Portal Test Chamber Sign Generator

This is recreated as best as I could get it by using pure html and css instead of something like a canvas. I am pretty sure I've got like 99% accuracy ngl. Very proud of myself. This is using textures stolen from Portal 2, but I assume that those were stolen from Portal 1 anyways so I reckon it'll all be the same.

Click on the different parts of the sign below to change them.

---

---

---

Writing this was so fun. Its the first time that I've done any 'proper' drawing/positional stuff with css. It was mainly done with absolute positioning (what I mean by proper drawing) This kind of programming is my absolute favourite to do, but I usually do it in like graphics libraries such as raylib and whatnot. I could have done like 90% of this just with a background image, but doing it in css was super fun and also easy. I will definitely be coming back to do something like this again in the future.

For if you are wondering, there are two different fonts here. UniversLTStd, and the condensed version of the same font. The condensed version is used for the chambers index (large numbers) then the non condensed version is on the little text above the tally marks. In the actual game those tallies aren't text btw; they're separate images for some reason. I'd have used a pipe ngl.

This page isn't done yet but I kinda wanted to be finished so I am publishing it now.