From 5a8a2da842e299feae48f16539977a7d3816add2 Mon Sep 17 00:00:00 2001 From: daniel-c-harvey Date: Sat, 6 Sep 2025 14:19:09 -0400 Subject: [PATCH] Front End Work - Home Page - Custom Site Styles & Mud Theme Adjustments --- .../Controls/AudioPlayerBar.razor | 10 +- DeepDrftWeb.Client/Controls/TrackCard.razor | 27 +- .../Controls/TracksGallery.razor | 2 +- DeepDrftWeb.Client/Layout/MainLayout.razor | 54 ++-- DeepDrftWeb.Client/Layout/NavMenu.razor | 3 +- DeepDrftWeb.Client/Pages/Home.razor | 223 +++++++++++++- DeepDrftWeb/Components/App.razor | 1 + .../wwwroot/styles/deepdrft-styles.css | 288 ++++++++++++++++++ 8 files changed, 555 insertions(+), 53 deletions(-) create mode 100644 DeepDrftWeb/wwwroot/styles/deepdrft-styles.css diff --git a/DeepDrftWeb.Client/Controls/AudioPlayerBar.razor b/DeepDrftWeb.Client/Controls/AudioPlayerBar.razor index 325416c..60ec456 100644 --- a/DeepDrftWeb.Client/Controls/AudioPlayerBar.razor +++ b/DeepDrftWeb.Client/Controls/AudioPlayerBar.razor @@ -15,7 +15,7 @@ Disabled="!IsLoaded"/> } - + @FormatTime(CurrentTime) / @FormatTime(Duration) @@ -27,17 +27,17 @@ Value="@CurrentTime" ValueChanged="@OnSeek" Disabled="!IsLoaded" - Style="flex: 1; margin-right: 8px;"/> + Class="deepdrft-audio-slider-seek"/> -
- +
+ + Class="deepdrft-audio-slider"/>
@if (!string.IsNullOrEmpty(ErrorMessage)) diff --git a/DeepDrftWeb.Client/Controls/TrackCard.razor b/DeepDrftWeb.Client/Controls/TrackCard.razor index d85255d..2b675d1 100644 --- a/DeepDrftWeb.Client/Controls/TrackCard.razor +++ b/DeepDrftWeb.Client/Controls/TrackCard.razor @@ -1,42 +1,35 @@ - @if (!string.IsNullOrEmpty(TrackModel?.ImagePath)) { -
+
} else { - } - + -
+
+ Class="text-truncate mb-1"> @TrackModel?.TrackName + Class="text-truncate mb-2"> @TrackModel?.Artist
-
+
@if (!string.IsNullOrEmpty(TrackModel?.Album)) { + Class="deepdrft-genre-chip"> @TrackModel.Genre }
-
+
@if (TrackModel?.ReleaseDate.HasValue == true) { -
+
diff --git a/DeepDrftWeb.Client/Layout/MainLayout.razor b/DeepDrftWeb.Client/Layout/MainLayout.razor index ebc060c..0193a9b 100644 --- a/DeepDrftWeb.Client/Layout/MainLayout.razor +++ b/DeepDrftWeb.Client/Layout/MainLayout.razor @@ -74,10 +74,10 @@ private readonly PaletteLight _lightPalette = new() { - Primary = "#9370DB", // MediumPurple - stronger but still pastel - Secondary = "#F4A460", // SandyBrown - warm pastel orange - Tertiary = "#FF1493", // DeepPink - vibrant accent (kept neon) - Info = "#8A2BE2", // BlueViolet - stronger purple info + Primary = "#8A2BE2", // BlueViolet - main DeepDrft purple + Secondary = "#FF1493", // DeepPink - main DeepDrft pink + Tertiary = "#4B0082", // Indigo - DeepDrft deep purple + Info = "#9370DB", // MediumPurple - DeepDrft accent purple Success = "#98FB98", // PaleGreen - soft success Warning = "#FFEAA7", // Light peach - soft warning Error = "#FFB6C1", // LightPink - soft error @@ -86,35 +86,35 @@ Surface = "#FFFAF0", // FloralWhite - creamy surface Background = "#FAF0E6", // Linen - warm cream background AppbarText = "#2F2F2F", // Dark text on light appbar - AppbarBackground = "rgba(211,180,221,0.90)", // Translucent plum - more presence - DrawerBackground = "#D3B4DD", // Plum drawer - stronger presence + AppbarBackground = "rgba(138,43,226,0.85)", // Translucent DeepDrft primary + DrawerBackground = "rgba(138,43,226,0.1)", // Very light DeepDrft primary TextPrimary = "#2F2F2F", // Dark primary text TextSecondary = "#6B6B6B", // Medium gray secondary text - GrayLight = "#E6E6FA", // Lavender - light purple-tinted gray - GrayLighter = "#F8F8FF", // GhostWhite - very light purple-tinted - GrayDefault = "#BC8F8F", // RosyBrown - warm gray - GrayDark = "#8B4513", // SaddleBrown - warm dark gray - Divider = "#E6E6FA", // Lavender - soft purple divider lines - TableLines = "#E6E6FA", // Lavender - soft table lines + GrayLight = "rgba(138,43,226,0.1)", // Light DeepDrft tint + GrayLighter = "rgba(138,43,226,0.05)", // Very light DeepDrft tint + GrayDefault = "rgba(138,43,226,0.2)", // Medium DeepDrft tint + GrayDark = "rgba(138,43,226,0.4)", // Darker DeepDrft tint + Divider = "rgba(138,43,226,0.15)", // Soft DeepDrft divider lines + TableLines = "rgba(138,43,226,0.15)", // Soft DeepDrft table lines }; private readonly PaletteDark _darkPalette = new() { - Primary = "#FF69B4", // HotPink - softer magenta for dark mode - Secondary = "#4B0082", // Indigo - deep purple from logo - Tertiary = "#8A2BE2", // BlueViolet - purple accent instead of blue - Info = "#9370DB", // MediumPurple - purple info instead of blue + Primary = "#FF1493", // DeepPink - main DeepDrft pink for dark mode + Secondary = "#8A2BE2", // BlueViolet - main DeepDrft purple + Tertiary = "#9370DB", // MediumPurple - DeepDrft accent + Info = "#4B0082", // Indigo - DeepDrft deep purple Success = "#00FF7F", // SpringGreen - bright success Warning = "#FFD700", // Gold - warning color Error = "#FF6347", // Tomato - error color Black = "#000000", // Pure black White = "#FFFFFF", // Pure white - Surface = "#2D1B4E", // Dark purple - surface with purple tint - Background = "#0D0D0D", // Near black - very dark background + Surface = "rgba(75,0,130,0.2)", // Dark DeepDrft indigo tint + Background = "#0A0A0A", // Very dark background BackgroundGray = "#1A1A1A", // Very dark gray AppbarText = "#FFFFFF", // White text on dark appbar - AppbarBackground = "rgba(45,27,78,0.95)", // Translucent dark purple - DrawerBackground = "#2D1B4E", // Dark purple drawer + AppbarBackground = "rgba(75,0,130,0.95)", // Translucent DeepDrft indigo + DrawerBackground = "rgba(75,0,130,0.15)", // Dark DeepDrft indigo tint DrawerIcon = "#E0E0E0", // Light gray icons DrawerText = "#E0E0E0", // Light gray drawer text ActionDefault = "#BDBDBD", // Light gray for actions @@ -123,13 +123,13 @@ TextPrimary = "#FFFFFF", // White primary text TextSecondary = "#E0E0E0", // Light gray secondary text TextDisabled = "#757575", // Disabled text - GrayLight = "#424242", // Light gray in dark mode - GrayLighter = "#2F2F2F", // Lighter gray in dark mode - GrayDefault = "#757575", // Default gray - GrayDark = "#BDBDBD", // Dark gray (inverted for dark mode) - Divider = "#424242", // Medium gray divider lines - LinesDefault = "#424242", // Default lines - TableLines = "#424242", // Table lines + GrayLight = "rgba(255,20,147,0.15)", // Light DeepDrft pink tint + GrayLighter = "rgba(255,20,147,0.08)", // Lighter DeepDrft pink tint + GrayDefault = "rgba(255,20,147,0.25)", // Default DeepDrft pink tint + GrayDark = "rgba(255,20,147,0.4)", // Darker DeepDrft pink tint + Divider = "rgba(255,20,147,0.2)", // DeepDrft pink divider lines + LinesDefault = "rgba(255,20,147,0.2)", // DeepDrft pink lines + TableLines = "rgba(255,20,147,0.2)", // DeepDrft pink table lines OverlayLight = "rgba(0,0,0,0.7)", // Dark overlay OverlayDark = "rgba(255,255,255,0.1)", // Light overlay for dark mode }; diff --git a/DeepDrftWeb.Client/Layout/NavMenu.razor b/DeepDrftWeb.Client/Layout/NavMenu.razor index 9c06af9..830a1ea 100644 --- a/DeepDrftWeb.Client/Layout/NavMenu.razor +++ b/DeepDrftWeb.Client/Layout/NavMenu.razor @@ -1,8 +1,7 @@ @using DeepDrftWeb.Client.Controls Home -Track Gallery -Audio Test +Track Gallery diff --git a/DeepDrftWeb.Client/Pages/Home.razor b/DeepDrftWeb.Client/Pages/Home.razor index 5f8670c..e8124db 100644 --- a/DeepDrftWeb.Client/Pages/Home.razor +++ b/DeepDrftWeb.Client/Pages/Home.razor @@ -1,4 +1,225 @@ @page "/" -Deep Drft Home +DeepDrft - Electronic Music Collective + + + + @* Hero Section *@ + + + + + + DEEPDRFT + + + + ELECTRONIC MUSIC COLLECTIVE + + + + Live electronic music from Charleston, SC featuring house, techno, trance, and IDM crafted with synthesizers and grooveboxes + + + + + START STREAMING + + + + + BROWSE TRACKS + + + + + + @* About Section *@ + + + + + + The Collective + + + DeepDrft is a two-member electronic music collective based in Charleston, South Carolina. + We create immersive soundscapes that blend the energy of underground club culture with + the precision of live electronic performance. + + + Using an arsenal of synthesizers, drum machines, and grooveboxes, we craft dynamic live + performances that span house, techno, trance, and intelligent dance music (IDM). + Every session is a journey through sound and rhythm. + + + + + + + + + Our Sound + + + House + Techno + Trance + IDM + Progressive + Ambient + + + From deep, driving basslines to ethereal atmospheric textures, our music explores the + full spectrum of electronic expression. We believe in the power of live performance + to create unique, unrepeatable moments that connect artist and audience through rhythm and melody. + + + + + + @* Features Section *@ + + + Experience DeepDrft + + + + + + + + High-Quality Streaming + + + Crystal-clear audio streaming with lossless quality for the best listening experience + + + + + + + + + Live Sessions + + + Join us for live streaming sessions and experience electronic music as it's created + + + + + + + + + Video Content + + + Watch behind-the-scenes content and live performance videos (coming soon) + + + + + + + + + Growing Archive + + + Explore our expanding collection of tracks, mixes, and live recordings + + + + + + + @* Location & Connect Section *@ + + + + + + Charleston, SC + + + Based in the vibrant music scene of Charleston, South Carolina, DeepDrft draws inspiration + from both the city's rich cultural heritage and the cutting-edge sounds of global electronic music. + + + The Holy City's unique blend of tradition and innovation provides the perfect backdrop + for our electronic explorations, where historic charm meets futuristic beats. + + + + + + + + + Connect With Us + + + Stay connected with DeepDrft for the latest releases, live session announcements, + and updates from our studio in Charleston. + + + + Newsletter + + + Live Alerts + + + + + + + @* Call to Action *@ + + + Ready to Dive Deep? + + + Immerse yourself in the electronic soundscapes of DeepDrft + + + + + EXPLORE MUSIC + + + + LIVE SCHEDULE + + + + + diff --git a/DeepDrftWeb/Components/App.razor b/DeepDrftWeb/Components/App.razor index b1043d3..9940478 100644 --- a/DeepDrftWeb/Components/App.razor +++ b/DeepDrftWeb/Components/App.razor @@ -11,6 +11,7 @@ + diff --git a/DeepDrftWeb/wwwroot/styles/deepdrft-styles.css b/DeepDrftWeb/wwwroot/styles/deepdrft-styles.css new file mode 100644 index 0000000..d025d0c --- /dev/null +++ b/DeepDrftWeb/wwwroot/styles/deepdrft-styles.css @@ -0,0 +1,288 @@ +/* DeepDrft Global Styles - Aesthetic and Structural Classes */ + +/* === AESTHETIC STYLES (Reusable across components) === */ + +/* Color Variables - Aligned with MudBlazor Theme */ +:root { + /* Main DeepDrft Colors */ + --deepdrft-primary: #8A2BE2; /* BlueViolet - Primary brand color */ + --deepdrft-secondary: #FF1493; /* DeepPink - Secondary brand color */ + --deepdrft-tertiary: #4B0082; /* Indigo - Deep accent color */ + --deepdrft-accent: #9370DB; /* MediumPurple - Light accent */ + + /* Surface Colors */ + --deepdrft-surface: rgba(255, 255, 255, 1); + --deepdrft-surface-alpha: rgba(255, 255, 255, 0.9); + + /* Theme-aware Variables (Light Mode Default) */ + --deepdrft-theme-primary: var(--deepdrft-primary); + --deepdrft-theme-secondary: var(--deepdrft-secondary); + --deepdrft-theme-tertiary: var(--deepdrft-tertiary); + --deepdrft-theme-info: var(--deepdrft-accent); +} + +/* Dark Mode Variables */ +[data-theme="dark"], .mud-theme-dark { + --deepdrft-theme-primary: #FF1493; /* DeepPink for dark mode */ + --deepdrft-theme-secondary: #8A2BE2; /* BlueViolet for dark mode */ + --deepdrft-theme-tertiary: #9370DB; /* MediumPurple for dark mode */ + --deepdrft-theme-info: #4B0082; /* Indigo for dark mode */ +} + +/* Primary Gradient Backgrounds */ +.deepdrft-gradient-primary { + background: linear-gradient(135deg, #8A2BE2 0%, #FF1493 50%, #4B0082 100%); +} + +.deepdrft-gradient-hero { + background: linear-gradient(135deg, #8A2BE2 0%, #FF1493 50%, #4B0082 100%); +} + +.deepdrft-gradient-soft-primary { + background: linear-gradient(45deg, rgba(138,43,226,0.1) 0%, rgba(255,20,147,0.1) 100%); +} + +.deepdrft-gradient-soft-secondary { + background: linear-gradient(45deg, rgba(75,0,130,0.1) 0%, rgba(138,43,226,0.1) 100%); +} + +.deepdrft-gradient-soft-accent { + background: linear-gradient(135deg, rgba(138,43,226,0.1) 0%, rgba(75,0,130,0.1) 100%); +} + +.deepdrft-gradient-soft-tertiary { + background: linear-gradient(135deg, rgba(255,20,147,0.1) 0%, rgba(138,43,226,0.1) 100%); +} + +.deepdrft-gradient-features { + background: linear-gradient(to right, rgba(138,43,226,0.05) 0%, rgba(255,20,147,0.05) 100%); +} + +/* Text Shadows and Effects */ +.deepdrft-text-hero { + font-weight: bold; + text-shadow: 2px 2px 4px rgba(0,0,0,0.5); + font-size: clamp(2rem, 8vw, 4rem); +} + +.deepdrft-text-subtitle { + font-weight: 300; + text-shadow: 1px 1px 2px rgba(0,0,0,0.3); +} + +.deepdrft-text-description { + font-weight: 400; + opacity: 0.9; +} + +.deepdrft-text-bold { + font-weight: bold; +} + +.deepdrft-text-readable { + line-height: 1.6; +} + +/* Border Accents */ +.deepdrft-border-left-primary { + border-left: 4px solid #FF1493; +} + +.deepdrft-border-left-secondary { + border-left: 4px solid #8A2BE2; +} + +.deepdrft-border-top-primary { + border-top: 4px solid #8A2BE2; +} + +.deepdrft-border-top-secondary { + border-top: 4px solid #FF1493; +} + +/* Buttons */ +.deepdrft-button-primary { + color: #8A2BE2; + font-weight: bold; + box-shadow: 0 4px 8px rgba(0,0,0,0.2); +} + +.deepdrft-button-outlined { + border: 2px solid rgba(255,255,255,0.8); +} + +.deepdrft-button-spaced { + margin: 8px; +} + +/* Card Aesthetics */ +.deepdrft-card-purple-tint { + background: rgba(138,43,226,0.1); +} + +.deepdrft-card-pink-tint { + background: rgba(255,20,147,0.1); +} + +.deepdrft-card-indigo-tint { + background: rgba(75,0,130,0.1); +} + +.deepdrft-card-lavender-tint { + background: rgba(147,112,219,0.1); +} + +/* Track Card Specific */ +.deepdrft-track-card-bg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-size: cover; + background-position: center; + filter: brightness(0.7); +} + +.deepdrft-track-card-content { + position: relative; + z-index: 1; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 16px; +} + +.deepdrft-genre-chip { + opacity: 0.9; + margin-top: 4px; +} + +.deepdrft-chip-spacing { + margin: 2px; +} + +/* Icons */ +.deepdrft-icon-large { + font-size: 3rem; +} + +/* === STRUCTURAL STYLES (Layout and positioning) === */ + +/* Hero Section Layout */ +.deepdrft-hero-container { + min-height: 60vh; + display: flex; + flex-direction: column; + justify-content: center; +} + +.deepdrft-hero-text-container { + max-width: 600px; + margin: 0 auto; +} + +/* Feature Cards Layout */ +.deepdrft-feature-card { + height: 100%; +} + +.deepdrft-feature-icon-container { + text-align: center; +} + +/* About Section Layout */ +.deepdrft-about-card { + height: 100%; +} + +/* CTA Section Layout */ +.deepdrft-cta-container { + border-radius: 16px; + text-align: center; +} + +.deepdrft-cta-buttons { + margin-bottom: 16px; +} + +/* Track Card Layout */ +.deepdrft-track-card-container { + width: 250px; + height: 250px; + position: relative; + overflow: hidden; +} + +.deepdrft-track-card-fallback { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.deepdrft-track-info-top { + /* Used for track name and artist at top */ +} + +.deepdrft-track-info-middle { + margin: 8px 0; + /* Used for album and genre in middle */ +} + +.deepdrft-track-info-bottom { + display: flex; + justify-content: space-between; + align-items: center; + /* Used for year and play button at bottom */ +} + +.deepdrft-track-gallery-item-center { + display: flex; + justify-content: center; +} + +/* Audio Player Layout */ +.deepdrft-audio-controls { + display: flex; + align-items: center; + width: 140px; +} + +.deepdrft-audio-time { + min-width: 120px; +} + +.deepdrft-audio-volume-icon { + margin-right: 4px; +} + +.deepdrft-audio-slider { + flex: 1; +} + +.deepdrft-audio-slider-seek { + flex: 1; + margin-right: 8px; +} + +/* Responsive Utilities */ +@media (max-width: 768px) { + .deepdrft-hero-text { + font-size: clamp(1.5rem, 6vw, 3rem) !important; + } + + .deepdrft-cta-buttons .mud-button { + margin: 4px !important; + width: 100%; + } +} + +@media (max-width: 480px) { + .deepdrft-track-card-container { + width: 200px; + height: 200px; + } +} \ No newline at end of file