diff --git a/DeepDrftPublic.Client/Controls/DeepDrftHero.razor b/DeepDrftPublic.Client/Controls/DeepDrftHero.razor new file mode 100644 index 0000000..da90172 --- /dev/null +++ b/DeepDrftPublic.Client/Controls/DeepDrftHero.razor @@ -0,0 +1,10 @@ +
Charleston, South Carolina
+

Deep
Drft

+

Electronic Music Collective

+

+ We craft immersive electronic soundscapes — live; built from synthesizers, drum machines, and raw intention. +

+
+ Start Streaming + Browse Tracks +
\ No newline at end of file diff --git a/DeepDrftPublic.Client/Controls/DeepDrftHero.razor.css b/DeepDrftPublic.Client/Controls/DeepDrftHero.razor.css new file mode 100644 index 0000000..c15575a --- /dev/null +++ b/DeepDrftPublic.Client/Controls/DeepDrftHero.razor.css @@ -0,0 +1,108 @@ +/* ── Animations ── */ +@keyframes fade-up { + from { opacity: 0; transform: translateY(24px); } + to { opacity: 1; transform: none; } +} + +.hero-eyebrow { + font-family: var(--deepdrft-font-mono); + font-size: 0.65rem; + letter-spacing: 0.28em; + color: var(--deepdrft-green-accent); + text-transform: uppercase; + margin-bottom: 1.8rem; + display: flex; + align-items: center; + gap: 1rem; + animation-delay: 0.1s; +} + +.hero-eyebrow::before { + content: ''; + display: block; + width: 2.5rem; + height: 1px; + background: var(--deepdrft-green-accent); +} + +.hero-title { + font-family: var(--deepdrft-font-display); + font-size: clamp(4.5rem, 8vw, 8.5rem); + font-weight: 300; + line-height: 0.92; + letter-spacing: -0.02em; + color: var(--deepdrft-navy); + margin-bottom: 0.5rem; + animation-delay: 0.22s; +} + +.hero-title em { + font-style: italic; + color: var(--deepdrft-green); +} + +.hero-subtitle { + font-family: var(--deepdrft-font-display); + font-size: clamp(1rem, 2vw, 1.35rem); + font-weight: 300; + font-style: italic; + color: var(--deepdrft-muted); + margin-bottom: 3rem; + letter-spacing: 0.04em; + animation-delay: 0.34s; +} + +.hero-desc { + font-family: var(--deepdrft-font-body); + font-size: 0.92rem; + line-height: 1.75; + color: var(--deepdrft-navy); + opacity: 0.7; + max-width: 36ch; + margin-bottom: 3rem; + animation-delay: 0.44s; +} + +.hero-actions { + display: flex; + gap: 1rem; + align-items: center; + animation-delay: 0.54s; +} + +.btn-primary { + font-family: var(--deepdrft-font-mono); + font-size: 0.68rem; + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--deepdrft-white); + background: var(--deepdrft-navy); + border: none; + padding: 1rem 2.2rem; + cursor: pointer; + text-decoration: none; + transition: background 0.25s, transform 0.2s; + display: inline-block; +} + +.btn-primary:hover { + background: var(--deepdrft-green); + transform: translateY(-1px); +} + +.btn-ghost { + font-family: var(--deepdrft-font-mono); + font-size: 0.68rem; + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--deepdrft-navy); + background: transparent; + border: 1px solid var(--deepdrft-border); + padding: 1rem 2.2rem; + cursor: pointer; + text-decoration: none; + transition: border-color 0.25s, color 0.25s; + display: inline-block; +} + +.btn-ghost:hover { border-color: var(--deepdrft-navy); } diff --git a/DeepDrftPublic.Client/Controls/NowPlaying.razor b/DeepDrftPublic.Client/Controls/NowPlaying.razor new file mode 100644 index 0000000..f351b79 --- /dev/null +++ b/DeepDrftPublic.Client/Controls/NowPlaying.razor @@ -0,0 +1,11 @@ +@* Pulsing rings *@ +
+
+
+ +
+ + + @* Stat row - hard-coded for now. TODO Phase 2: wire to real track count / identity model. *@ + +
\ No newline at end of file diff --git a/DeepDrftPublic.Client/Controls/NowPlaying.razor.css b/DeepDrftPublic.Client/Controls/NowPlaying.razor.css new file mode 100644 index 0000000..403d4fc --- /dev/null +++ b/DeepDrftPublic.Client/Controls/NowPlaying.razor.css @@ -0,0 +1,20 @@ +.now-playing-content { + position: relative; + z-index: 2; + padding: 3rem; +} + +.circle-deco { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 50%; + border: 1px solid rgba(61, 122, 104, 0.3); + animation: pulse-ring 4s ease-in-out infinite; + pointer-events: none; +} + +.circle-deco:nth-child(1) { width: 320px; height: 320px; animation-delay: 0s; } +.circle-deco:nth-child(2) { width: 520px; height: 520px; animation-delay: 0.8s; } +.circle-deco:nth-child(3) { width: 720px; height: 720px; animation-delay: 1.6s; } \ No newline at end of file diff --git a/DeepDrftPublic.Client/Controls/NowPlayingCard.razor b/DeepDrftPublic.Client/Controls/NowPlayingCard.razor new file mode 100644 index 0000000..4299666 --- /dev/null +++ b/DeepDrftPublic.Client/Controls/NowPlayingCard.razor @@ -0,0 +1,46 @@ +@using DeepDrftPublic.Client.Services +
+
Now Playing
+
@(Player?.CurrentTrack?.TrackName ?? "Nothing playing")
+
+ @(Player?.CurrentTrack != null + ? $"{Player.CurrentTrack.Artist} · {Player.CurrentTrack.Album ?? "Single"}" + : "Select a track to begin") +
+ + @if (Player?.IsLoaded == true) + { +
+ @* 20 bars - approximate the wireframe's varied animation timings *@ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ } + else + { +
+ } +
+ + +@code { + [CascadingParameter] public IStreamingPlayerService? Player { get; set; } +} \ No newline at end of file diff --git a/DeepDrftPublic.Client/Controls/NowPlayingCard.razor.css b/DeepDrftPublic.Client/Controls/NowPlayingCard.razor.css new file mode 100644 index 0000000..f8c122c --- /dev/null +++ b/DeepDrftPublic.Client/Controls/NowPlayingCard.razor.css @@ -0,0 +1,62 @@ +.now-playing { + background: rgba(250, 250, 248, 0.06); + border: 1px solid rgba(250, 250, 248, 0.12); + padding: 1.5rem; + margin-bottom: 1.5rem; + backdrop-filter: blur(8px); +} + +.np-label { + font-family: var(--deepdrft-font-mono); + font-size: 0.6rem; + letter-spacing: 0.25em; + color: var(--deepdrft-green-accent); + text-transform: uppercase; + margin-bottom: 0.75rem; + display: flex; + align-items: center; + gap: 0.5rem; +} + +.np-dot { + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--deepdrft-green-accent); + animation: blink 1.2s ease-in-out infinite; +} + +.np-title { + font-family: var(--deepdrft-font-display); + font-size: 1.5rem; + font-weight: 400; + color: var(--deepdrft-white); + margin-bottom: 0.25rem; +} + +.np-sub { + font-family: var(--deepdrft-font-body); + font-size: 0.75rem; + color: rgba(250, 250, 248, 0.45); + letter-spacing: 0.08em; +} + +.waveform-bars { + display: flex; + align-items: center; + gap: 3px; + margin-top: 1.2rem; +} + +.waveform-bar { + width: 3px; + background: var(--deepdrft-green-accent); + border-radius: 2px; + animation: wave-dance var(--dur, 1s) ease-in-out infinite alternate; +} + +.waveform-placeholder { + margin-top: 1.2rem; + height: 1px; + background: rgba(250, 250, 248, 0.12); +} \ No newline at end of file diff --git a/DeepDrftPublic.Client/Controls/NowPlayingStats.razor b/DeepDrftPublic.Client/Controls/NowPlayingStats.razor new file mode 100644 index 0000000..01f3d4d --- /dev/null +++ b/DeepDrftPublic.Client/Controls/NowPlayingStats.razor @@ -0,0 +1,14 @@ +
+
+
47+
+
Live Sessions
+
+
+
2
+
Members
+
+
+
∞
+
Drift Points
+
+
\ No newline at end of file diff --git a/DeepDrftPublic.Client/Controls/NowPlayingStats.razor.css b/DeepDrftPublic.Client/Controls/NowPlayingStats.razor.css new file mode 100644 index 0000000..620b69e --- /dev/null +++ b/DeepDrftPublic.Client/Controls/NowPlayingStats.razor.css @@ -0,0 +1,28 @@ +.hero-stat-row { + display: flex; + gap: 1.5rem; +} + +.hero-stat { + flex: 1; + background: rgba(250, 250, 248, 0.04); + border: 1px solid rgba(250, 250, 248, 0.08); + padding: 1.2rem; +} + +.hero-stat-num { + font-family: var(--deepdrft-font-display); + font-size: 2rem; + font-weight: 300; + color: var(--deepdrft-white); + line-height: 1; +} + +.hero-stat-label { + font-family: var(--deepdrft-font-mono); + font-size: 0.58rem; + letter-spacing: 0.2em; + color: rgba(250, 250, 248, 0.4); + text-transform: uppercase; + margin-top: 0.4rem; +} diff --git a/DeepDrftPublic.Client/Pages/Home.razor b/DeepDrftPublic.Client/Pages/Home.razor index 385fa4e..2e5a731 100644 --- a/DeepDrftPublic.Client/Pages/Home.razor +++ b/DeepDrftPublic.Client/Pages/Home.razor @@ -1,4 +1,5 @@ @page "/" +@using DeepDrftPublic.Client.Controls @using DeepDrftPublic.Client.Services Deep DRFT - Electronic Music Collective @@ -6,83 +7,11 @@ @* Hero - split 50/50 *@
-
Charleston, South Carolina
-

Deep
Drft

-

Electronic Music Collective

-

- We craft immersive electronic soundscapes — live, unscripted, and built from synthesizers, drum machines, and raw intention. No sets. No loops. Pure drift. -

-
- Start Streaming - Browse Tracks -
+
- @* Pulsing rings *@ -
-
-
- -
- @* Now-Playing card *@ -
-
Now Playing
-
@(Player?.CurrentTrack?.TrackName ?? "Nothing playing")
-
- @(Player?.CurrentTrack != null - ? $"{Player.CurrentTrack.Artist} · {Player.CurrentTrack.Album ?? "Single"}" - : "Select a track to begin") -
- - @if (Player?.IsLoaded == true) - { -
- @* 20 bars - approximate the wireframe's varied animation timings *@ -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- } - else - { -
- } -
- - @* Stat row - hard-coded for now. TODO Phase 2: wire to real track count / identity model. *@ -
-
-
47+
-
Live Sessions
-
-
-
2
-
Members
-
-
-
∞
-
Drift Points
-
-
-
+
diff --git a/DeepDrftPublic.Client/Pages/Home.razor.css b/DeepDrftPublic.Client/Pages/Home.razor.css index 46b97ad..4d38607 100644 --- a/DeepDrftPublic.Client/Pages/Home.razor.css +++ b/DeepDrftPublic.Client/Pages/Home.razor.css @@ -43,109 +43,6 @@ background: var(--deepdrft-white); } -.hero-eyebrow { - font-family: var(--deepdrft-font-mono); - font-size: 0.65rem; - letter-spacing: 0.28em; - color: var(--deepdrft-green-accent); - text-transform: uppercase; - margin-bottom: 1.8rem; - display: flex; - align-items: center; - gap: 1rem; - animation-delay: 0.1s; -} - -.hero-eyebrow::before { - content: ''; - display: block; - width: 2.5rem; - height: 1px; - background: var(--deepdrft-green-accent); -} - -.hero-title { - font-family: var(--deepdrft-font-display); - font-size: clamp(4.5rem, 8vw, 8.5rem); - font-weight: 300; - line-height: 0.92; - letter-spacing: -0.02em; - color: var(--deepdrft-navy); - margin-bottom: 0.5rem; - animation-delay: 0.22s; -} - -.hero-title em { - font-style: italic; - color: var(--deepdrft-green); -} - -.hero-subtitle { - font-family: var(--deepdrft-font-display); - font-size: clamp(1rem, 2vw, 1.35rem); - font-weight: 300; - font-style: italic; - color: var(--deepdrft-muted); - margin-bottom: 3rem; - letter-spacing: 0.04em; - animation-delay: 0.34s; -} - -.hero-desc { - font-family: var(--deepdrft-font-body); - font-size: 0.92rem; - line-height: 1.75; - color: var(--deepdrft-navy); - opacity: 0.7; - max-width: 36ch; - margin-bottom: 3rem; - animation-delay: 0.44s; -} - -.hero-actions { - display: flex; - gap: 1rem; - align-items: center; - animation-delay: 0.54s; -} - -.btn-primary { - font-family: var(--deepdrft-font-mono); - font-size: 0.68rem; - letter-spacing: 0.2em; - text-transform: uppercase; - color: var(--deepdrft-white); - background: var(--deepdrft-navy); - border: none; - padding: 1rem 2.2rem; - cursor: pointer; - text-decoration: none; - transition: background 0.25s, transform 0.2s; - display: inline-block; -} - -.btn-primary:hover { - background: var(--deepdrft-green); - transform: translateY(-1px); -} - -.btn-ghost { - font-family: var(--deepdrft-font-mono); - font-size: 0.68rem; - letter-spacing: 0.2em; - text-transform: uppercase; - color: var(--deepdrft-navy); - background: transparent; - border: 1px solid var(--deepdrft-border); - padding: 1rem 2.2rem; - cursor: pointer; - text-decoration: none; - transition: border-color 0.25s, color 0.25s; - display: inline-block; -} - -.btn-ghost:hover { border-color: var(--deepdrft-navy); } - .hero-right { background: var(--deepdrft-navy); position: relative; @@ -155,119 +52,6 @@ overflow: hidden; } -.circle-deco { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - border-radius: 50%; - border: 1px solid rgba(61, 122, 104, 0.3); - animation: pulse-ring 4s ease-in-out infinite; - pointer-events: none; -} - -.circle-deco:nth-child(1) { width: 320px; height: 320px; animation-delay: 0s; } -.circle-deco:nth-child(2) { width: 520px; height: 520px; animation-delay: 0.8s; } -.circle-deco:nth-child(3) { width: 720px; height: 720px; animation-delay: 1.6s; } - -.hero-right-content { - position: relative; - z-index: 2; - padding: 3rem; -} - -.now-playing { - background: rgba(250, 250, 248, 0.06); - border: 1px solid rgba(250, 250, 248, 0.12); - padding: 1.5rem; - margin-bottom: 1.5rem; - backdrop-filter: blur(8px); -} - -.np-label { - font-family: var(--deepdrft-font-mono); - font-size: 0.6rem; - letter-spacing: 0.25em; - color: var(--deepdrft-green-accent); - text-transform: uppercase; - margin-bottom: 0.75rem; - display: flex; - align-items: center; - gap: 0.5rem; -} - -.np-dot { - width: 6px; - height: 6px; - border-radius: 50%; - background: var(--deepdrft-green-accent); - animation: blink 1.2s ease-in-out infinite; -} - -.np-title { - font-family: var(--deepdrft-font-display); - font-size: 1.5rem; - font-weight: 400; - color: var(--deepdrft-white); - margin-bottom: 0.25rem; -} - -.np-sub { - font-family: var(--deepdrft-font-body); - font-size: 0.75rem; - color: rgba(250, 250, 248, 0.45); - letter-spacing: 0.08em; -} - -.waveform-bars { - display: flex; - align-items: center; - gap: 3px; - margin-top: 1.2rem; -} - -.waveform-bar { - width: 3px; - background: var(--deepdrft-green-accent); - border-radius: 2px; - animation: wave-dance var(--dur, 1s) ease-in-out infinite alternate; -} - -.waveform-placeholder { - margin-top: 1.2rem; - height: 1px; - background: rgba(250, 250, 248, 0.12); -} - -.hero-stat-row { - display: flex; - gap: 1.5rem; -} - -.hero-stat { - flex: 1; - background: rgba(250, 250, 248, 0.04); - border: 1px solid rgba(250, 250, 248, 0.08); - padding: 1.2rem; -} - -.hero-stat-num { - font-family: var(--deepdrft-font-display); - font-size: 2rem; - font-weight: 300; - color: var(--deepdrft-white); - line-height: 1; -} - -.hero-stat-label { - font-family: var(--deepdrft-font-mono); - font-size: 0.58rem; - letter-spacing: 0.2em; - color: rgba(250, 250, 248, 0.4); - text-transform: uppercase; - margin-top: 0.4rem; -} - /* ── DIVIDER ── */ .section-divider { display: flex;