Skip to content

Polish the landing page phone frame #149

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TeoSlayer merged 1 commit into from
Sep 14, 2026
+126 −23
Merged

Polish the landing page phone frame #149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,11 @@ All notable user-visible changes are recorded here. Versions follow [Semantic Ve

## Unreleased

### Changed

- Redrew the landing page phone frame with a titanium-style band, Dynamic
Island, iOS status bar, physical side buttons and a home indicator.

## [0.15.1] — 2026-09-14

### Changed
Expand Down
128 changes: 105 additions & 23 deletions web/landing.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -625,47 +625,121 @@

.phone-device {
position: relative;
padding: 9px;
border: 1px solid #30343d;
border-radius: 46px;
background: #111319;
padding: 3px;
border-radius: 54px;
background:
linear-gradient(160deg, #62666e 0%, #2c2f36 22%, #1c1f25 50%, #33363d 78%, #5d616a 100%);
box-shadow:
0 48px 100px rgb(30 39 24 / 24%),
0 10px 26px rgb(30 39 24 / 17%),
inset 0 0 0 1px rgb(255 255 255 / 7%);
0 1px 0 rgb(255 255 255 / 45%),
inset 0 0 0 1px rgb(255 255 255 / 10%);
}

.phone-device::before,
.phone-device::after {
position: absolute;
width: 3px;
border-radius: 3px 0 0 3px;
background: #292d35;
content: "";
.phone-bezel {
padding: 9px;
border-radius: 51px;
background: #050609;
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 4%);
}

.phone-device::before {
height: 70px;
top: 118px;
left: -4px;
/* physical buttons: action + volume on the left, side button on the right */
.phone-btn {
position: absolute;
width: 4px;
border-radius: 2px 0 0 2px;
background: linear-gradient(90deg, #6a6e76, #3a3d44 45%, #24272d);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), -1px 0 0 rgb(0 0 0 / 30%);
}

.phone-device::after {
height: 92px;
top: 145px;
.phone-btn-action { height: 24px; top: 118px; left: -4px; }
.phone-btn-vol-up { height: 56px; top: 164px; left: -4px; }
.phone-btn-vol-down { height: 56px; top: 232px; left: -4px; }

.phone-btn-power {
height: 96px;
top: 196px;
right: -4px;
border-radius: 0 3px 3px 0;
border-radius: 0 2px 2px 0;
background: linear-gradient(270deg, #6a6e76, #3a3d44 45%, #24272d);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), 1px 0 0 rgb(0 0 0 / 30%);
}

.hero-phone-screen {
display: grid;
position: relative;
width: 100%;
min-height: 650px;
overflow: hidden;
border-radius: 37px;
border-radius: 42px;
background: #0c0f14;
color: #f1f3f6;
grid-template-rows: auto 1fr auto;
grid-template-rows: auto auto 1fr auto;
}

/* iOS status bar with the Dynamic Island notch */
.phone-status {
display: grid;
height: 48px;
padding: 0 28px;
background: #11151c;
color: #f1f3f6;
font: 600 13px/1 -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif;
letter-spacing: -.01em;
grid-template-columns: 1fr auto;
align-items: center;
}

.phone-status > span:first-child {
grid-column: 1;
}

.phone-status > span:last-child {
display: flex;
grid-column: 2;
justify-content: end;
align-items: center;
gap: 6px;
}

.phone-status svg {
display: block;
fill: currentcolor;
}

.phone-island {
position: absolute;
top: 11px;
left: 50%;
width: 88px;
height: 27px;
border-radius: 14px;
background: #000;
box-shadow: 0 0 0 1px rgb(255 255 255 / 3%);
transform: translateX(-50%);
}

.phone-island::after {
position: absolute;
top: 8px;
right: 10px;
width: 11px;
height: 11px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #2b3552, #0a0d16 60%);
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%);
content: "";
}

.phone-home {
position: absolute;
bottom: 8px;
left: 50%;
width: 118px;
height: 5px;
border-radius: 3px;
background: rgb(241 243 246 / 80%);
transform: translateX(-50%);
}

.hero-phone-head {
Expand Down Expand Up @@ -850,7 +924,7 @@

.hero-phone-keys {
display: grid;
padding: 11px 10px 16px;
padding: 11px 10px 26px;
border-top: 1px solid #292d35;
background: #11151c;
grid-template-columns: repeat(8, minmax(0, 1fr));
Expand Down Expand Up @@ -2874,6 +2948,14 @@
width: min(310px, 88%);
}

.phone-status {
padding: 0 24px;
}

.phone-island {
width: 80px;
}

.hero-phone-screen {
min-height: 610px;
}
Expand Down
16 changes: 16 additions & 0 deletions web/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,21 @@ function renderLanding(): void {
<div class="demo-aura" aria-hidden="true"></div>
<figure class="real-phone-demo">
<div class="phone-device">
<span class="phone-btn phone-btn-action" aria-hidden="true"></span>
<span class="phone-btn phone-btn-vol-up" aria-hidden="true"></span>
<span class="phone-btn phone-btn-vol-down" aria-hidden="true"></span>
<span class="phone-btn phone-btn-power" aria-hidden="true"></span>
<div class="phone-bezel">
<div class="hero-phone-screen">
<div class="phone-status" aria-hidden="true">
<span>9:41</span>
<span class="phone-island"></span>
<span>
<svg width="17" height="11" viewBox="0 0 17 11"><rect x="0" y="7" width="3" height="4" rx="1"/><rect x="4.5" y="5" width="3" height="6" rx="1"/><rect x="9" y="2.5" width="3" height="8.5" rx="1"/><rect x="13.5" y="0" width="3" height="11" rx="1"/></svg>
<svg width="17" height="12" viewBox="0 0 18 13" fill="none" stroke="currentcolor" stroke-width="1.6" stroke-linecap="round"><path d="M1.58 5.58A10.5 10.5 0 0 1 16.42 5.58"/><path d="M3.84 7.84A7.3 7.3 0 0 1 14.16 7.84"/><path d="M6.1 10.1A4.1 4.1 0 0 1 11.9 10.1"/><circle cx="9" cy="11.6" r="1.3" fill="currentcolor" stroke="none"/></svg>
<svg width="27" height="12" viewBox="0 0 27 12"><rect x=".5" y=".5" width="23" height="11" rx="3" fill="none" stroke="currentcolor" stroke-opacity=".4"/><rect x="2" y="2" width="20" height="8" rx="1.8"/><path d="M25 4v4a2 2 0 0 0 0-4Z" fill-opacity=".4"/></svg>
</span>
</div>
<div class="hero-phone-head">
<strong>shell.online</strong>
<span class="hero-phone-latency"><i></i> 22 ms</span>
Expand All @@ -225,6 +239,8 @@ function renderLanding(): void {
<div class="hero-phone-keys" aria-hidden="true">
<span>esc</span><span>tab</span><span>←</span><span>↑</span><span>↓</span><span>→</span><span>enter</span><span>ctrl-c</span>
</div>
<span class="phone-home" aria-hidden="true"></span>
</div>
</div>
</div>
<figcaption><span><i></i> Interactive in any browser</span><strong>Claude Code · live via shell.online</strong></figcaption>
Expand Down
Loading