Skip to content

Commit a31be43

Browse files
rudyberendsrudyberends
committed
feat(site): real pixels instead of mockups
Screenshots from the product itself, captured off a genuinely running server: core was built and booted in a container, the released Admin UI and player dists fetched, an admin account created, four zones named, and the screens photographed with a headless browser. - The player section's drawn phone now holds the real thing: the player's home screen ('Good evening. The house is quiet — 4 rooms ready'), captioned 'the actual player · not a mockup'. - The zones section closes with the Admin UI's Zones screen as it ships: four named rooms, receiver chips on every card, framed in the site's own window chrome. JPEG for the admin shot (dark gradients cost 800KB as PNG, 160KB as JPEG), PNG for the flat player screen (35KB). The stale phone-mock translation pairs were caught by the build, exactly as designed.
1 parent 8deff43 commit a31be43

6 files changed

Lines changed: 78 additions & 58 deletions

File tree

‎assets/shots/player-mobile.png‎

34.1 KB
Loading

‎assets/shots/zones-web.jpg‎

159 KB
Loading

‎assets/site.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2193,6 +2193,54 @@ section[data-num]::before {
21932193
font-size: 10px;
21942194
}
21952195

2196+
/* --- real screenshots, framed ---------------------------------------------- */
2197+
2198+
/* A window frame in the site's own chrome; the pixels inside are the product's. */
2199+
.shot {
2200+
margin-top: clamp(38px, 6vh, 56px);
2201+
border: 1px solid var(--line);
2202+
border-radius: 14px;
2203+
background: rgb(0 0 0 / 45%);
2204+
overflow: hidden;
2205+
box-shadow:
2206+
inset 0 1px 0 rgb(255 255 255 / 5%),
2207+
0 40px 90px -50px rgb(0 0 0 / 100%),
2208+
0 0 80px -40px rgb(74 222 128 / 18%);
2209+
}
2210+
2211+
.shot img {
2212+
display: block;
2213+
width: 100%;
2214+
height: auto;
2215+
}
2216+
2217+
.shot-caption {
2218+
padding: 10px 14px;
2219+
border-top: 1px solid var(--line-soft);
2220+
font-size: 9.5px;
2221+
letter-spacing: 0.16em;
2222+
text-transform: uppercase;
2223+
color: var(--dim);
2224+
}
2225+
2226+
/* The real player in the drawn bezel: the frame is ours, the screen is the product's. */
2227+
.phone-real {
2228+
padding: 10px;
2229+
}
2230+
2231+
.phone-real img {
2232+
display: block;
2233+
width: 100%;
2234+
height: auto;
2235+
border-radius: 24px;
2236+
}
2237+
2238+
.phone-real .shot-caption {
2239+
border-top: 0;
2240+
padding: 12px 4px 2px;
2241+
text-align: center;
2242+
}
2243+
21962244
/* --- feature rows (zones) ------------------------------------------------ */
21972245

21982246
.rows {

‎de/index.html‎

Lines changed: 13 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -466,34 +466,12 @@ <h2 class="h2">Das ganze Haus, aus jedem Browser.</h2>
466466
</dl>
467467
</div>
468468

469-
<!-- The player, drawn: a phone in the product's own panel style. -->
470-
<div class="phone-wrap rise" aria-hidden="true">
471-
<div class="phone">
472-
<div class="phone-top mono"><i class="dot"></i>wohnzimmer <span class="quiet">· grouped</span></div>
473-
<div class="phone-cover">
474-
<svg viewBox="8 12 84 68" fill="currentColor">
475-
<path d="M14 46 L50 18 L86 46" fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" />
476-
<rect x="37.35" y="58.05" width="2.17" height="15.9" rx="1.08" />
477-
<rect x="46.03" y="56.6" width="2.89" height="18.8" rx="1.45" />
478-
<rect x="54.69" y="58.05" width="2.17" height="15.9" rx="1.08" />
479-
</svg>
480-
</div>
481-
<p class="phone-title">Holocene</p>
482-
<p class="phone-artist">Bon Iver · <span class="mono">FLAC 24/96</span></p>
483-
<div class="phone-progress"><i></i></div>
484-
<div class="phone-transport">
485-
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 6l-8.5 6L18 18V6zM8 6v12H6V6h2z" /></svg>
486-
<span class="phone-play">
487-
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 5h4v14H6zm8 0h4v14h-4z" /></svg>
488-
</span>
489-
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z" /></svg>
490-
</div>
491-
<div class="phone-queue">
492-
<p class="phone-queue-k mono">als nächstes</p>
493-
<div class="phone-row"><span>Re: Stacks</span><span class="mono quiet">Bon Iver</span></div>
494-
<div class="phone-row"><span>Towers</span><span class="mono quiet">Bon Iver</span></div>
495-
</div>
496-
</div>
469+
<!-- The player itself: a real screenshot, in a bezel — not a mockup. -->
470+
<div class="phone-wrap rise">
471+
<figure class="phone phone-real">
472+
<img src="../assets/shots/player-mobile.png" width="780" height="1440" alt="Der sonn Web-Player auf einem Handy: Good evening — the house is quiet, 4 rooms ready" loading="lazy" />
473+
<figcaption class="shot-caption mono">der echte player · kein mockup</figcaption>
474+
</figure>
497475
</div>
498476
</div>
499477
</div>
@@ -703,6 +681,13 @@ <h2 class="h2">Die Lautsprecher, die du schon besitzt, sind das System.</h2>
703681
</dd>
704682
</div>
705683
</dl>
684+
685+
<!-- Real pixels: the Admin UI's Zones screen, exactly as it ships. -->
686+
<figure class="shot rise">
687+
<div class="slab-chrome" aria-hidden="true"><i></i><i></i><i></i><span>admin · zones · live</span></div>
688+
<img src="../assets/shots/zones-web.jpg" width="1920" height="1260" alt="Der Zones-Bildschirm der sonn Admin-UI: vier Zonen namens Living room, Kitchen, Study und Bedroom, jede mit AirPlay-, Spotify-Connect- und DLNA-Empfänger-Chips" loading="lazy" />
689+
<figcaption class="shot-caption mono">die admin-ui, wie sie ausgeliefert wird — jeder raum eine zone, empfänger an jeder</figcaption>
690+
</figure>
706691
</div>
707692
</section>
708693

‎i18n/de.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,8 +102,10 @@
102102
["Reorder what plays next, pull rooms into a group mid-song, shape a zone with its own equalizer — and see the true stream format of every room, down to the <a class=\"hl\" href=\"#signal\">bit-perfect verdict</a>.", "Sortiere um, was als nächstes spielt, hole Räume mitten im Song in eine Gruppe, forme eine Zone mit ihrem eigenen Equalizer — und sieh das echte Streamformat jedes Raums, bis hin zum <a class=\"hl\" href=\"#signal\">bit-perfect-Urteil</a>."],
103103
["Always in agreement", "Immer einer Meinung"],
104104
["Two phones, the wall panel and the Loxone app all show the same state, live — nothing polls, and an edit made anywhere appears everywhere.", "Zwei Handys, das Wandpanel und die Loxone-App zeigen denselben Zustand, live — nichts pollt, und eine Änderung von irgendwo erscheint überall."],
105-
["living room <span class=\"quiet\">· grouped</span>", "wohnzimmer <span class=\"quiet\">· grouped</span>"],
106-
[">up next<", ">als nächstes<"],
105+
["The sonn web player on a phone: Good evening — the house is quiet, 4 rooms ready", "Der sonn Web-Player auf einem Handy: Good evening — the house is quiet, 4 rooms ready"],
106+
["the actual player · not a mockup", "der echte player · kein mockup"],
107+
["The sonn Admin UI Zones screen: four zones named Living room, Kitchen, Study and Bedroom, each with AirPlay, Spotify Connect and DLNA receiver chips", "Der Zones-Bildschirm der sonn Admin-UI: vier Zonen namens Living room, Kitchen, Study und Bedroom, jede mit AirPlay-, Spotify-Connect- und DLNA-Empfänger-Chips"],
108+
["the admin ui, as it ships — every room a zone, receivers on each", "die admin-ui, wie sie ausgeliefert wird — jeder raum eine zone, empfänger an jeder"],
107109

108110
["zones &amp; outputs", "zonen &amp; ausgänge"],
109111
["The speakers you already own are the system.", "Die Lautsprecher, die du schon besitzt, sind das System."],

‎index.html‎

Lines changed: 13 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -494,34 +494,12 @@ <h2 class="h2">The whole house, from any browser.</h2>
494494
</dl>
495495
</div>
496496

497-
<!-- The player, drawn: a phone in the product's own panel style. -->
498-
<div class="phone-wrap rise" aria-hidden="true">
499-
<div class="phone">
500-
<div class="phone-top mono"><i class="dot"></i>living room <span class="quiet">· grouped</span></div>
501-
<div class="phone-cover">
502-
<svg viewBox="8 12 84 68" fill="currentColor">
503-
<path d="M14 46 L50 18 L86 46" fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" />
504-
<rect x="37.35" y="58.05" width="2.17" height="15.9" rx="1.08" />
505-
<rect x="46.03" y="56.6" width="2.89" height="18.8" rx="1.45" />
506-
<rect x="54.69" y="58.05" width="2.17" height="15.9" rx="1.08" />
507-
</svg>
508-
</div>
509-
<p class="phone-title">Holocene</p>
510-
<p class="phone-artist">Bon Iver · <span class="mono">FLAC 24/96</span></p>
511-
<div class="phone-progress"><i></i></div>
512-
<div class="phone-transport">
513-
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 6l-8.5 6L18 18V6zM8 6v12H6V6h2z" /></svg>
514-
<span class="phone-play">
515-
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 5h4v14H6zm8 0h4v14h-4z" /></svg>
516-
</span>
517-
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z" /></svg>
518-
</div>
519-
<div class="phone-queue">
520-
<p class="phone-queue-k mono">up next</p>
521-
<div class="phone-row"><span>Re: Stacks</span><span class="mono quiet">Bon Iver</span></div>
522-
<div class="phone-row"><span>Towers</span><span class="mono quiet">Bon Iver</span></div>
523-
</div>
524-
</div>
497+
<!-- The player itself: a real screenshot, in a bezel — not a mockup. -->
498+
<div class="phone-wrap rise">
499+
<figure class="phone phone-real">
500+
<img src="assets/shots/player-mobile.png" width="780" height="1440" alt="The sonn web player on a phone: Good evening — the house is quiet, 4 rooms ready" loading="lazy" />
501+
<figcaption class="shot-caption mono">the actual player · not a mockup</figcaption>
502+
</figure>
525503
</div>
526504
</div>
527505
</div>
@@ -740,6 +718,13 @@ <h2 class="h2">The speakers you already own are the system.</h2>
740718
</dd>
741719
</div>
742720
</dl>
721+
722+
<!-- Real pixels: the Admin UI's Zones screen, exactly as it ships. -->
723+
<figure class="shot rise">
724+
<div class="slab-chrome" aria-hidden="true"><i></i><i></i><i></i><span>admin · zones · live</span></div>
725+
<img src="assets/shots/zones-web.jpg" width="1920" height="1260" alt="The sonn Admin UI Zones screen: four zones named Living room, Kitchen, Study and Bedroom, each with AirPlay, Spotify Connect and DLNA receiver chips" loading="lazy" />
726+
<figcaption class="shot-caption mono">the admin ui, as it ships — every room a zone, receivers on each</figcaption>
727+
</figure>
743728
</div>
744729
</section>
745730

0 commit comments

Comments
 (0)