Lampu Layar

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Create a responsive mobile-first interactive utility game/app titled “Lampu Layar” (Screen Lamp), presented as a portrait phone interface rather than a conventional game. Use Indonesian UI text exactly as follows: heading “Lampu Layar”; subtitle “Gunakan layar HP sebagai lampu terang.”; main button initially “Nyalakan Lampu”; status initially “Mati”; brightness label “Terang”; four color preset buttons “Putih”, “Hangat”, “Dingin”, and “Merah”; footer hint “Tekan tombol untuk mengaktifkan. Untuk mematikan, tekan lagi atau kunci layar.”

Visual design: full viewport, no scrolling, dark #111 page background with white text. Center a single rounded rectangular control panel, max width about 460px and full width within 20px side padding, with 24px padding, 24px corner radius, translucent black background, blur/backdrop effect, and soft large shadow. Use a clean system sans-serif font. The panel contains a large responsive heading, muted subtitle, a full-width tall primary button with about 76px minimum height, white background, dark text, bold type, 18px radius, and a subtle dark bottom shadow; pressing it gives a small downward pressed movement. Below it place the bold status, then a horizontal row with the bold “Terang” label on the left and a range slider on the right. The slider ranges from 20 to 100 and starts at 100, with an accent color matching the current text color. Under that, arrange four equal-width preset buttons in one row with small gaps, around 48px tall, 12px radius, translucent light background, thin translucent white border, and inherited text color. Finish with the muted, small, multiline hint.

Core behavior: maintain an on/off state, initially off, a selected lamp color initially #ffffff, and brightness initially 100. Clicking the main button toggles the lamp. When off, the app viewport background is #111, normal dark theme styling is used, the button says “Nyalakan Lampu”, and the status says exactly “Mati”. When on, apply the selected lamp color as the entire app/viewport background and apply a brightness filter based on the slider value (brightness(value/100), never below 0.35); add an “on” visual mode where the panel becomes translucent white (about rgba(255,255,255,.22)) with dark text and the main button switches to a dark #111 background with white text. Change the main button label to “Matikan Lampu” and status to “Nyala • [brightness]%”, updating the percentage live as the slider moves. The brightness slider should update the live lamp appearance and status whenever it receives input, whether the lamp is on or off.

Each preset immediately changes the selected lamp color and refreshes the appearance: Putih uses #ffffff, Hangat uses #fff4d6 (warm pale cream), Dingin uses #dcecff (cool pale blue), and Merah uses #ffd1d1 (pale red/pink). Presets do not themselves toggle the lamp. When turning the lamp on, request the browser Screen Wake Lock if supported so the screen stays awake; release that lock when turning it off. If the page becomes visible again while the lamp is on, request the wake lock again. Handle unsupported or failed wake-lock requests gracefully without showing errors. The app should work with touch and mouse, with touch-friendly controls. Include state persistence hooks or equivalent internal state for isOn, lampColor, and brightness, clamping brightness to 20–100 when externally restored.