For Clock App Lab #001, the home screen icon is not just a small image. It is the first part of the app the user sees before launching it. A clock PWA needs an icon that is simple, readable, and recognizable at small sizes. In this note, I focus on designing a clean icon for Android and iPhone, using the retro clock shape, a simple Z mark, and the short app name “Clock Lab.” In this ninth note for Clock App Lab #001, I want to focus on the home screen icon. After working on t

For Clock App Lab #001, I need to adjust the layout for real smartphone use as a PWA. Even if the clock looks good on a desktop browser, it may not fit well on a phone. The height can feel too tight, or the landscape view may not feel enough like a real desk clock. In this note, I focus on 100vh vs 100dvh, switching layouts between portrait and landscape, and keeping the clock UI visible without unnecessary scrolling. In this eighth note for Clock App Lab #001, I want to orga

For Clock App Lab #001, the final step in this first round is testing the clock on real phones. A PWA can look good in a desktop browser, but the real question is whether it feels useful on Android and iPhone. This note focuses on portrait mode, landscape mode, home screen launch behavior, saved light/dark mode, and whether the clock feels like a small desk object rather than a normal web page.

For Clock App Lab #001, the next step is testing how the retro desk clock behaves when it is added to a phone’s home screen. A clock PWA should not feel like a normal web page. It should launch quickly, open in a clean standalone view, remember the selected mode, and feel like a small tool that can stay on the desk. This note focuses on the home screen installation flow for Android and iPhone.

For Clock App Lab #001, the next step is moving from a visual clock prototype to a small installable PWA. This means preparing the basic file structure: index.html, manifest.json, app icons, and a service worker. The clock should not just look like an app in the browser. It should also be able to launch from the home screen, remember its mode, and work as a small standalone tool.

For Clock App Lab #001, I wanted to test whether the clock could react to the brightness around the device. The idea is simple: when the room is bright, the clock stays in light mode; when the room becomes dark, the display changes into a warm backlight mode. This is only an experiment for now, but it helps explore how a small PWA clock could feel more like a real object on a desk. In this fourth note for Clock App Lab #001, I want to write about ambient light detection. Afte

For Clock App Lab #001, I wanted the time display to feel more like a real object, not just text changing on a screen. At first, I tried making each digit flip separately, but the result looked too mechanical and unnatural. In this version, I changed the display into two larger panels: one for the hour and one for the minutes. I also shortened the flip animation so the movement feels more like a quick physical motion.

For Clock App Lab #001, I decided to switch between light mode and dark mode using two small dots placed under the time display, rather than using a large toggle switch. The left dot is for light mode, and the right dot is for dark mode. By removing labels and long explanations from the clock itself, the UI stays quiet, simple, and closer to the feeling of a real desk clock.

Clock App Lab’s first prototype is a small retro-style desk clock built as a PWA experiment. The goal is simple: create a clock that feels warm, useful, and easy to keep on a desk or phone screen. This first version focuses on a two-panel flip-clock design, light and dark modes, a minimal two-dot toggle, and a layout that can later grow into a mobile-friendly installable web app.