Chapter 2: The Starry Interface Meets a Notched Phone

The following plots are purely fictitious and any similarity is purely coincidental.

Opening

By the end of the first episode, L had already created a playable web page sample. Starting the game, drawing talents, assigning attributes, training, and settlement are all in one set of processes, and it’s not too ugly to click on.

But she still felt uncomfortable looking at it.

It's not that the function is wrong, it's that the taste is wrong. The fonts are too ordinary, the black is just ordinary black, and the home page is as empty as a makeshift backstage. What L wants is to practice cultivation, not a table that can roll numbers.

So she opened Gemini first, then called Teacher G out and continued chatting.

She explained that world clearly first

L Let’s not talk about the gameplay sequence this time, but start talking about the page itself.

She told Teacher G bit by bit the feeling she had when she was a child playing "The Legend of Jin Yong". It’s not a web game, it’s not a backend, and it’s not a form wearing a fairy skin. She wanted black bottoms, a little air conditioning, and the smell of touching the computer in the middle of the night and opening it, knowing that there were already people inside practicing, running away, surviving tribulations, and waiting for misfortune.

She chatted for several rounds, first smoothing out the situation in her mind, and then turned to knock Kimi.

But before that, Y gave her an extremely simple introductory lesson.

That night, L sat down with the computer and said that she couldn't stand copying and pasting back and forth. Once the chat box was closed, the things she had just changed seemed to fall into a black hole. After hearing this, Y didn’t say anything big. He just dragged her computer over, installed WSL for her first, opened the terminal, and then configured VS Code, GitHub login, and Kimi’s VS Code plug-in in one go. The whole process is much like distributing a safety helmet and tool box to a person who enters the construction site for the first time.

L is obviously a little wary of black-bottomed terminals. As soon as the window popped up, she shrank back and stared at the string of flashing cursor prompts for two seconds. The first thing she said was: "Did this thing type a wrong letter and the computer would die?"

Y didn't plan to train her to be a command line expert on the spot. He only teaches the most useful steps: how to enter the project directory, how to `git pull`, how to open VS Code, how to let Kimi directly stare at the current file to change, how to run `bash scripts/serve.sh`, and then refresh in the browser to see the results. The first time L typed `cd` by himself, he stopped in the middle of typing. He looked back to confirm twice, and his expression before pressing Enter was as if he was pressing a launch button. As a result, the terminal honestly jumped to the next directory, and she was obviously relieved.

It will be much smoother later on. As soon as `git pull` is run and the page is refreshed, the newly changed things will really grow out of the screen. L soon discovered that this set of things was similar to the drawing process she was familiar with. With this set of things, when she talks to Kimi, she no longer just "give me a page to look at", but "just change this, make it brighter, cooler, and don't touch anything else."

This time she mentioned it in detail. The font can no longer be like the default font, it must be a bit like a monument; the button cannot be just a square, it must be like a plaque; the bottom of the title cannot be empty, and it is better to have a starry sky behind it, a bit of cold light; the checkout page cannot be just a pop-up window, it must be like Tiandao holding a brush and giving orders on the spot.The text on the page was first changed. The original straight-forward style was gone and replaced with serif fonts that looked more like ancient books and inscriptions. The black background is no longer dead black, and the buttons, titles, card borders, and progress bars all glow with a dark golden light. The most eye-catching thing is that a layer of starry sky canvas suddenly appeared behind it, and the page suddenly became uneven, as if someone was finally willing to build a canopy for this world of immortality.

L sat up a little straighter facing the screen and started looking at it inch by inch. Does the title look like a title? Is the gold color too tacky? Is the button a little bit attractive? Does the checkout page look like "the road disappears and the body dies" instead of "you have logged out". As she watched, she continued to let Kimi make changes.

L first stared at the homepage for a long time and thought it was good. Then she picked up the phone, swiped it twice, and frowned. The buttons are on the side, and the “View Life Account” bar at the bottom is so crowded that it’s hard to breathe, and the top and bottom of the notch looks like someone has pinched it. The fairy spirit on the desktop, as soon as it was shrunk into the mobile phone, I immediately felt a little embarrassed.

She held up the phone to Y and said only: "This is not right."

First, I put `viewport-fit=cover` in, and then moved the page height to `100dvh`. There was also a safe area under the bottom button, as if I was afraid that it would fall into the bottom of the iPhone accidentally. Later, the settlement pop-up window was brought out again and arranged again. The top and bottom were left with space for bangs and bottom strips, and the scroll bar was released, so that the "Dao Xiao Shen Die" no longer got stuck in a place that looked like a bug.

Started beating Liu Haiping at night

Y has a good idea of what AI can do, but that doesn’t mean he knows the front-end. On the contrary, he has never written a front-end and knows almost nothing about CSS. Words such as notch, safe zone, and viewport height are no more advanced than spells to him. L doesn’t know how to say `safe-area-inset-bottom`, nor does she care about `100vh`, `100svh`, `100dvh` which comes first. She will only hold her phone and say: This button is blocked, this pop-up window seems to be blocked, and it looks awkward here.

That night, he dragged his computer over and opened Codex himself. While describing the phenomenon to the model, I repeatedly refreshed it on my phone to see if this version was worse or finally not that bad.

In the next few changes, the top and bottom safe areas were first extracted into variables, and the order of page heights was rearranged. `100vh`, `100svh`, and `100dvh` are no longer piled up in disorder. Further down, the bottom of iOS Chrome and Safari has also been added to prevent the situation where `safe-area-bottom` suddenly returns to zero and the bottom button falls down.

Put the phone on the table, open and close the page, close and open again, sometimes looking at the slit at the top, sometimes staring at the buttons at the bottom, sometimes pulling up the checkout pop-up window to see if it will get stuck. L was sitting cross-legged on the sofa, holding the phone in his hand. He said for a moment, "This color is much more pleasing to the eye," and for a moment, "It still holds up well underneath." Y sat on the other side, staring at the several versions of the patches provided by Codex, and tried back line by line. When he saw the CSS variables and the way `env(...)` was written, his expression was similar to that of looking at a foreign menu, but he still had to keep trying.

After this round of tossing, the writing is stable, the light is there, the starry sky spreads out, the settlement page is laid out, and the bottom of the phone is no longer so devilish.