Skip to content

Commit 8deff43

Browse files
rudyberendsrudyberends
committed
feat(site): give the player its own chapter
The player was the product's face for daily use and had three passing mentions. Now it has section 04: what a search across every service at once means, favourites from any row (the same ones a wall switch cycles), the queue/grouping/EQ, and the always-in-agreement property the event stream buys. Illustrated with a phone drawn in the product's own panel style — cover, transport, live progress, up-next — no screenshots to go stale. Sections 05-08 renumbered; nav gains Player; German edition follows through i18n/de.json (204 pairs now).
1 parent c06a276 commit 8deff43

4 files changed

Lines changed: 317 additions & 8 deletions

File tree

‎assets/site.css‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2052,6 +2052,147 @@ section[data-num]::before {
20522052
color: var(--accent);
20532053
}
20542054

2055+
/* --- the player, drawn: a phone in the product's own panel style ----------- */
2056+
2057+
.phone-wrap {
2058+
display: grid;
2059+
place-items: center;
2060+
}
2061+
2062+
.phone {
2063+
width: min(300px, 78vw);
2064+
padding: 18px 20px 24px;
2065+
border: 1px solid var(--line);
2066+
border-radius: 34px;
2067+
background:
2068+
linear-gradient(168deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 1.5%)),
2069+
rgb(10 12 16 / 90%);
2070+
box-shadow:
2071+
inset 0 1px 0 rgb(255 255 255 / 7%),
2072+
0 50px 100px -50px rgb(0 0 0 / 100%),
2073+
0 0 90px -40px rgb(74 222 128 / 25%);
2074+
transform: rotate(1.6deg);
2075+
transition: transform 0.4s var(--ease);
2076+
}
2077+
2078+
.phone:hover {
2079+
transform: rotate(0deg) translateY(-4px);
2080+
}
2081+
2082+
.phone-top {
2083+
display: flex;
2084+
align-items: center;
2085+
gap: 8px;
2086+
font-size: 10px;
2087+
letter-spacing: 0.14em;
2088+
text-transform: uppercase;
2089+
color: var(--muted);
2090+
}
2091+
2092+
.phone-cover {
2093+
display: grid;
2094+
place-items: center;
2095+
aspect-ratio: 1;
2096+
margin-top: 16px;
2097+
border: 1px solid var(--line-soft);
2098+
border-radius: 14px;
2099+
background:
2100+
radial-gradient(120% 100% at 20% 0%, rgb(74 222 128 / 14%), transparent 55%),
2101+
radial-gradient(120% 100% at 90% 100%, rgb(45 212 191 / 10%), transparent 55%),
2102+
rgb(0 0 0 / 30%);
2103+
color: rgb(74 222 128 / 45%);
2104+
}
2105+
2106+
.phone-cover svg {
2107+
width: 42%;
2108+
}
2109+
2110+
.phone-title {
2111+
margin-top: 16px;
2112+
font-size: 17px;
2113+
font-weight: 750;
2114+
letter-spacing: -0.02em;
2115+
}
2116+
2117+
.phone-artist {
2118+
margin-top: 3px;
2119+
font-size: 12.5px;
2120+
color: var(--dim);
2121+
}
2122+
2123+
.phone-progress {
2124+
position: relative;
2125+
height: 3px;
2126+
margin-top: 14px;
2127+
border-radius: 2px;
2128+
background: rgb(255 255 255 / 8%);
2129+
}
2130+
2131+
.phone-progress i {
2132+
position: absolute;
2133+
inset: 0 auto 0 0;
2134+
width: 34%;
2135+
border-radius: 2px;
2136+
background: linear-gradient(90deg, rgb(74 222 128 / 50%), var(--accent));
2137+
box-shadow: 0 0 8px rgb(74 222 128 / 55%);
2138+
animation: creep 260s linear forwards;
2139+
}
2140+
2141+
.phone-transport {
2142+
display: flex;
2143+
align-items: center;
2144+
justify-content: center;
2145+
gap: 26px;
2146+
margin-top: 16px;
2147+
}
2148+
2149+
.phone-transport svg {
2150+
width: 20px;
2151+
height: 20px;
2152+
color: var(--muted);
2153+
}
2154+
2155+
.phone-play {
2156+
display: grid;
2157+
place-items: center;
2158+
width: 46px;
2159+
height: 46px;
2160+
border-radius: 50%;
2161+
background: var(--accent);
2162+
box-shadow: 0 4px 24px -4px rgb(74 222 128 / 55%);
2163+
}
2164+
2165+
.phone-play svg {
2166+
width: 19px;
2167+
height: 19px;
2168+
color: var(--accent-ink);
2169+
}
2170+
2171+
.phone-queue {
2172+
margin-top: 18px;
2173+
padding-top: 14px;
2174+
border-top: 1px solid var(--line-soft);
2175+
}
2176+
2177+
.phone-queue-k {
2178+
font-size: 9px;
2179+
letter-spacing: 0.18em;
2180+
text-transform: uppercase;
2181+
color: var(--dim);
2182+
}
2183+
2184+
.phone-row {
2185+
display: flex;
2186+
justify-content: space-between;
2187+
gap: 10px;
2188+
padding: 9px 0 0;
2189+
font-size: 13px;
2190+
}
2191+
2192+
.phone-row .mono {
2193+
font-size: 10px;
2194+
}
2195+
20552196
/* --- feature rows (zones) ------------------------------------------------ */
20562197

20572198
.rows {

‎de/index.html‎

Lines changed: 77 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@
5959
<a href="#two-ways">Zwei Wege</a>
6060
<a href="#signal">Signalweg</a>
6161
<a href="#content">Inhalte</a>
62+
<a href="#player">Player</a>
6263
<a href="#zones">Zonen</a>
6364
<a href="#integrations">Loxone &amp; HA</a>
6465
<a href="#api">API</a>
@@ -426,8 +427,80 @@ <h3>Radio &amp; Line-in</h3>
426427
</div>
427428
</section>
428429

430+
<!-- ========================================================== player -->
431+
<section id="player" data-num="04">
432+
<div class="wrap">
433+
<div class="split">
434+
<div class="rise">
435+
<p class="eyebrow">der web-player</p>
436+
<h2 class="h2">Das ganze Haus, aus jedem Browser.</h2>
437+
<p class="lede">
438+
Der Server liefert seinen eigenen Player aus — öffne <code>:7090</code> auf dem Handy, dem Laptop oder dem Wandpanel, und jeder Raum ist da. Nichts zu installieren, nichts zu aktualisieren, und er kann nie veralten: Er kommt aus derselben Kiste, die die Musik spielt.
439+
</p>
440+
441+
<dl class="rows">
442+
<div class="row">
443+
<dt>Alles auf einmal durchsuchen</dt>
444+
<dd>
445+
Eine Suche über deine Bibliothek und jeden verbundenen Dienst, sortiert nach Art. Finde einen Titel, tippe ihn an, und er spielt im ausgewählten Raum.
446+
</dd>
447+
</div>
448+
<div class="row">
449+
<dt>Favoriten aus jeder Zeile</dt>
450+
<dd>
451+
Ein Stern sitzt an allem, was spielen kann — Browsing-Ergebnisse, Suchtreffer, Warteschlange, Verlauf — und legt es in die Favoriten der Zone: dieselben, durch die ein Loxone-Wandtaster oder eine Beoremote schaltet.
452+
</dd>
453+
</div>
454+
<div class="row">
455+
<dt>Warteschlange, Gruppen und ein 10-Band-EQ</dt>
456+
<dd>
457+
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>.
458+
</dd>
459+
</div>
460+
<div class="row">
461+
<dt>Immer einer Meinung</dt>
462+
<dd>
463+
Zwei Handys, das Wandpanel und die Loxone-App zeigen denselben Zustand, live — nichts pollt, und eine Änderung von irgendwo erscheint überall.
464+
</dd>
465+
</div>
466+
</dl>
467+
</div>
468+
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>
497+
</div>
498+
</div>
499+
</div>
500+
</section>
501+
429502
<!-- =========================================================== zones -->
430-
<section id="zones" data-num="04">
503+
<section id="zones" data-num="05">
431504
<div class="wrap">
432505
<div class="section-head rise">
433506
<p class="eyebrow">zonen &amp; ausgänge</p>
@@ -634,7 +707,7 @@ <h2 class="h2">Die Lautsprecher, die du schon besitzt, sind das System.</h2>
634707
</section>
635708

636709
<!-- ==================================================== integrations -->
637-
<section id="integrations" data-num="05">
710+
<section id="integrations" data-num="06">
638711
<div class="wrap">
639712
<div class="split">
640713
<div class="rise">
@@ -711,7 +784,7 @@ <h2 class="h2 h2-sub">Und es versteht sich mit dem Rest des Hauses.</h2>
711784
</section>
712785

713786
<!-- ============================================================= api -->
714-
<section id="api" data-num="06">
787+
<section id="api" data-num="07">
715788
<div class="wrap">
716789
<div class="section-head rise">
717790
<p class="eyebrow">für entwickler</p>
@@ -789,7 +862,7 @@ <h3>MQTT dazu</h3>
789862
</section>
790863

791864
<!-- =========================================================== start -->
792-
<section id="start" data-num="07">
865+
<section id="start" data-num="08">
793866
<div class="wrap">
794867
<div class="section-head rise">
795868
<p class="eyebrow">loslegen</p>

‎i18n/de.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,20 @@
9191
["Play/pause and skip reach the actual CD changer", "Play/Pause und Skip erreichen den echten CD-Wechsler"],
9292
["TTS and alert sounds, Loxone-native when paired", "TTS und Hinweistöne, Loxone-nativ wenn gekoppelt"],
9393

94+
["the web player", "der web-player"],
95+
["The whole house, from any browser.", "Das ganze Haus, aus jedem Browser."],
96+
["The server serves its own player — open <code>:7090</code> on a phone, a laptop or the wall panel and every room is there. Nothing to install, nothing to update, and it can never be out of date: it comes from the same box that plays the music.", "Der Server liefert seinen eigenen Player aus — öffne <code>:7090</code> auf dem Handy, dem Laptop oder dem Wandpanel, und jeder Raum ist da. Nichts zu installieren, nichts zu aktualisieren, und er kann nie veralten: Er kommt aus derselben Kiste, die die Musik spielt."],
97+
["Search everything at once", "Alles auf einmal durchsuchen"],
98+
["One search across your library and every connected service, bucketed by kind. Find a track, tap it, and it plays in the room you have selected.", "Eine Suche über deine Bibliothek und jeden verbundenen Dienst, sortiert nach Art. Finde einen Titel, tippe ihn an, und er spielt im ausgewählten Raum."],
99+
["Favourites from any row", "Favoriten aus jeder Zeile"],
100+
["A star sits on everything that can play — browse results, search hits, queue entries, recents — and adds it to the zone's favourites: the same ones a Loxone wall switch or a Beoremote cycles through.", "Ein Stern sitzt an allem, was spielen kann — Browsing-Ergebnisse, Suchtreffer, Warteschlange, Verlauf — und legt es in die Favoriten der Zone: dieselben, durch die ein Loxone-Wandtaster oder eine Beoremote schaltet."],
101+
["The queue, grouping and a 10-band EQ", "Warteschlange, Gruppen und ein 10-Band-EQ"],
102+
["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>."],
103+
["Always in agreement", "Immer einer Meinung"],
104+
["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<"],
107+
94108
["zones &amp; outputs", "zonen &amp; ausgänge"],
95109
["The speakers you already own are the system.", "Die Lautsprecher, die du schon besitzt, sind das System."],
96110
["A zone is one device in one room. sonn speaks to nearly anything that can make sound — and a zone can also <em>receive</em>: point AirPlay or Spotify&nbsp;Connect at an old amplifier, and it just works.", "Eine Zone ist ein Gerät in einem Raum. sonn spricht mit fast allem, was Klang erzeugen kann — und eine Zone kann auch <em>empfangen</em>: Richte AirPlay oder Spotify&nbsp;Connect auf einen alten Verstärker, und es funktioniert einfach."],

0 commit comments

Comments
 (0)