From d18c1a7b3ed553343b62e0cab8fc8a73ac68a2fc Mon Sep 17 00:00:00 2001 From: kbe Date: Fri, 5 Sep 2025 00:21:38 +0200 Subject: [PATCH] feat: Add premium login design system inspired by telecom aesthetics MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Create comprehensive theme system with professional color palette - Implement flat design login mockups for both dark and light themes - Add telecom-inspired glassmorphism effects and micro-interactions - Include Quantic Telecom reference design for professional styling - Generate responsive login interfaces with premium animations - Support both flat and gradient design variations 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .../aperonight_premium_light_login_1.html | 738 ++++++++++++++++++ .../aperonight_premium_light_theme.css | 125 +++ .../aperonight_premium_login_1.html | 710 +++++++++++++++++ .../aperonight_premium_theme.css | 125 +++ .../design_iterations/quantic_login_1.html | 480 ++++++++++++ .../quantic_telecom_theme.css | 71 ++ 6 files changed, 2249 insertions(+) create mode 100644 .superdesign/design_iterations/aperonight_premium_light_login_1.html create mode 100644 .superdesign/design_iterations/aperonight_premium_light_theme.css create mode 100644 .superdesign/design_iterations/aperonight_premium_login_1.html create mode 100644 .superdesign/design_iterations/aperonight_premium_theme.css create mode 100644 .superdesign/design_iterations/quantic_login_1.html create mode 100644 .superdesign/design_iterations/quantic_telecom_theme.css diff --git a/.superdesign/design_iterations/aperonight_premium_light_login_1.html b/.superdesign/design_iterations/aperonight_premium_light_login_1.html new file mode 100644 index 0000000..a59a8b7 --- /dev/null +++ b/.superdesign/design_iterations/aperonight_premium_light_login_1.html @@ -0,0 +1,738 @@ + + + + + + Connexion - AperoNight | Plateforme Événementielle Premium + + + + + + + + + + +
+
+ +
+
+
+
+ +
+
+

AperoNight

+

Plateforme Événementielle Premium

+

Connexion sécurisée • Interface professionnelle

+ +
+
+ + Connexion Sécurisée +
+
+
+ + + + + +
+
+ + + Support Pro + + + + Sécurité Renforcée + + + + API Premium + +
+

© 2024 AperoNight • Plateforme Événementielle Premium • Tous droits réservés

+
+ +
+ Système opérationnel + + • + 99.9% uptime + • + GDPR compliant +
+
+
+
+ + + + \ No newline at end of file diff --git a/.superdesign/design_iterations/aperonight_premium_light_theme.css b/.superdesign/design_iterations/aperonight_premium_light_theme.css new file mode 100644 index 0000000..d7f1a4a --- /dev/null +++ b/.superdesign/design_iterations/aperonight_premium_light_theme.css @@ -0,0 +1,125 @@ +:root { + /* AperoNight Premium Light Theme - Professional Event Platform */ + + /* Base Colors - Clean Light Background with Professional Accents */ + --background: oklch(0.9800 0.0050 240); + --foreground: oklch(0.1500 0.0200 240); + --surface: oklch(0.9600 0.0080 240); + --surface-elevated: oklch(0.9400 0.0120 240); + + /* Card & Dialog surfaces */ + --card: oklch(1.0000 0 0); + --card-foreground: oklch(0.1500 0.0200 240); + --popover: oklch(1.0000 0 0); + --popover-foreground: oklch(0.1500 0.0200 240); + + /* Primary - Professional Electric Blue */ + --primary: oklch(0.5200 0.2200 220); + --primary-foreground: oklch(0.9900 0.0050 220); + --primary-hover: oklch(0.4600 0.2400 220); + --primary-light: oklch(0.9200 0.1000 220); + --primary-dark: oklch(0.3800 0.2600 220); + + /* Secondary - Sophisticated Light Gray */ + --secondary: oklch(0.9200 0.0100 240); + --secondary-foreground: oklch(0.3000 0.0300 240); + --secondary-hover: oklch(0.8800 0.0150 240); + + /* Accent - Vibrant Cyan (Events Energy) */ + --accent: oklch(0.6500 0.2400 200); + --accent-foreground: oklch(0.9900 0.0050 200); + --accent-light: oklch(0.9400 0.1200 200); + --accent-dark: oklch(0.5000 0.2800 200); + + /* Success - Event Success Green */ + --success: oklch(0.6000 0.2000 140); + --success-foreground: oklch(0.9800 0.0100 140); + --success-light: oklch(0.9600 0.0800 140); + + /* Warning - Premium Amber */ + --warning: oklch(0.7200 0.1800 60); + --warning-foreground: oklch(0.2500 0.0400 60); + --warning-light: oklch(0.9600 0.0800 60); + + /* Error - Professional Red */ + --destructive: oklch(0.5600 0.2200 20); + --destructive-foreground: oklch(0.9800 0.0100 20); + --destructive-light: oklch(0.9600 0.1000 20); + + /* Muted tones */ + --muted: oklch(0.9400 0.0100 240); + --muted-foreground: oklch(0.5200 0.0300 240); + --muted-dark: oklch(0.8800 0.0200 240); + + /* Borders and inputs */ + --border: oklch(0.8800 0.0200 240); + --input: oklch(0.9800 0.0080 240); + --input-border: oklch(0.8600 0.0300 240); + --ring: oklch(0.5200 0.2200 220); + + /* Typography - Premium Event Platform */ + --font-sans: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif; + --font-display: 'Space Grotesk', 'Outfit', system-ui, sans-serif; + --font-mono: 'JetBrains Mono', 'Fira Code', monospace; + + /* Spacing and layout */ + --radius: 0.75rem; + --spacing: 1rem; + + /* Light theme shadow system */ + --shadow-xs: 0 1px 3px 0 hsl(240 15% 15% / 0.08), 0 1px 2px -1px hsl(240 15% 15% / 0.06); + --shadow-sm: 0 2px 6px -1px hsl(240 15% 15% / 0.10), 0 2px 4px -2px hsl(240 15% 15% / 0.08); + --shadow: 0 4px 8px -2px hsl(240 15% 15% / 0.12), 0 2px 4px -2px hsl(240 15% 15% / 0.08); + --shadow-md: 0 8px 16px -4px hsl(240 15% 15% / 0.14), 0 4px 6px -2px hsl(240 15% 15% / 0.10); + --shadow-lg: 0 16px 24px -4px hsl(240 15% 15% / 0.16), 0 8px 8px -4px hsl(240 15% 15% / 0.08); + --shadow-xl: 0 20px 32px -8px hsl(240 15% 15% / 0.18), 0 8px 16px -8px hsl(240 15% 15% / 0.10); + --shadow-2xl: 0 32px 64px -12px hsl(240 15% 15% / 0.22); + + /* Subtle accent shadows for light theme */ + --shadow-electric: 0 4px 16px -2px hsl(220 80% 60% / 0.15), 0 2px 8px -2px hsl(220 80% 60% / 0.10); + --shadow-accent: 0 4px 16px -2px hsl(200 80% 60% / 0.18), 0 2px 8px -2px hsl(200 80% 60% / 0.12); + + /* Light theme gradients */ + --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); + --gradient-background: linear-gradient(135deg, + oklch(0.9800 0.0050 240) 0%, + oklch(0.9600 0.0080 235) 25%, + oklch(0.9400 0.0120 230) 50%, + oklch(0.9600 0.0080 225) 75%, + oklch(0.9800 0.0050 220) 100%); + --gradient-card: linear-gradient(135deg, + oklch(1.0000 0 0) 0%, + oklch(0.9900 0.0050 235) 100%); + + /* Light theme pattern overlays */ + --grid-color: oklch(0.8500 0.0300 240); + --dot-color: oklch(0.8000 0.0400 220); + --connection-color: oklch(0.7500 0.0800 210); + + /* Light glassmorphism */ + --glass-bg: oklch(1.0000 0 0 / 0.85); + --glass-border: oklch(0.8800 0.0200 240 / 0.25); + --glass-backdrop: blur(16px) saturate(180%); + + /* Professional interaction states */ + --hover-lift: translateY(-2px); + --hover-scale: scale(1.02); + --focus-ring: 0 0 0 3px var(--ring); + + /* Event-specific colors for light theme */ + --event-vip: oklch(0.6800 0.2200 45); + --event-premium: oklch(0.5800 0.2000 280); + --event-standard: oklch(0.6200 0.1600 160); + --event-available: oklch(0.6000 0.1800 140); + --event-limited: oklch(0.7000 0.1800 50); + --event-sold-out: oklch(0.5800 0.2000 15); + + /* Radius variations */ + --radius-xs: calc(var(--radius) - 4px); + --radius-sm: calc(var(--radius) - 2px); + --radius-md: var(--radius); + --radius-lg: calc(var(--radius) + 4px); + --radius-xl: calc(var(--radius) + 8px); + --radius-2xl: calc(var(--radius) + 12px); + --radius-full: 9999px; +} \ No newline at end of file diff --git a/.superdesign/design_iterations/aperonight_premium_login_1.html b/.superdesign/design_iterations/aperonight_premium_login_1.html new file mode 100644 index 0000000..b5007e7 --- /dev/null +++ b/.superdesign/design_iterations/aperonight_premium_login_1.html @@ -0,0 +1,710 @@ + + + + + + Connexion - AperoNight | Plateforme Événementielle Premium + + + + + + + + + + +
+
+ +
+
+
+
+ +
+
+

AperoNight

+

Plateforme Événementielle Premium

+

Connexion sécurisée • Interface professionnelle

+ +
+
+ + Connexion Sécurisée +
+
+
+ + + + + +
+
+ + + Support Pro + + + + Sécurité Renforcée + + + + API Premium + +
+

© 2024 AperoNight • Plateforme Événementielle Premium • Tous droits réservés

+
+ +
+ Système opérationnel + + • + 99.9% uptime + • + GDPR compliant +
+
+
+
+ + + + \ No newline at end of file diff --git a/.superdesign/design_iterations/aperonight_premium_theme.css b/.superdesign/design_iterations/aperonight_premium_theme.css new file mode 100644 index 0000000..b625a53 --- /dev/null +++ b/.superdesign/design_iterations/aperonight_premium_theme.css @@ -0,0 +1,125 @@ +:root { + /* AperoNight Premium Theme - Telecom Inspired */ + + /* Base Colors - Sophisticated Navy & Electric Accents */ + --background: oklch(0.1200 0.0300 240); + --foreground: oklch(0.9500 0.0100 240); + --surface: oklch(0.1600 0.0400 240); + --surface-elevated: oklch(0.2000 0.0500 240); + + /* Card & Dialog surfaces */ + --card: oklch(0.9800 0.0100 240); + --card-foreground: oklch(0.1500 0.0200 240); + --popover: oklch(0.9800 0.0100 240); + --popover-foreground: oklch(0.1500 0.0200 240); + + /* Primary - Premium Electric Blue */ + --primary: oklch(0.5500 0.2400 220); + --primary-foreground: oklch(0.9800 0.0100 220); + --primary-hover: oklch(0.4800 0.2600 220); + --primary-light: oklch(0.8500 0.1200 220); + --primary-dark: oklch(0.3500 0.2800 220); + + /* Secondary - Sophisticated Slate */ + --secondary: oklch(0.8800 0.0200 240); + --secondary-foreground: oklch(0.2500 0.0300 240); + --secondary-hover: oklch(0.8200 0.0300 240); + + /* Accent - Vibrant Cyan (Events Energy) */ + --accent: oklch(0.6800 0.2600 200); + --accent-foreground: oklch(0.9800 0.0100 200); + --accent-light: oklch(0.8800 0.1400 200); + --accent-dark: oklch(0.4500 0.3000 200); + + /* Success - Event Success Green */ + --success: oklch(0.6200 0.2200 140); + --success-foreground: oklch(0.9600 0.0200 140); + --success-light: oklch(0.9200 0.1000 140); + + /* Warning - Premium Gold */ + --warning: oklch(0.7500 0.2000 60); + --warning-foreground: oklch(0.2000 0.0300 60); + --warning-light: oklch(0.9400 0.1000 60); + + /* Error - Professional Red */ + --destructive: oklch(0.5800 0.2400 20); + --destructive-foreground: oklch(0.9700 0.0200 20); + --destructive-light: oklch(0.9300 0.1200 20); + + /* Muted tones */ + --muted: oklch(0.8800 0.0200 240); + --muted-foreground: oklch(0.4800 0.0400 240); + --muted-dark: oklch(0.7500 0.0300 240); + + /* Borders and inputs */ + --border: oklch(0.8400 0.0300 240); + --input: oklch(0.9600 0.0200 240); + --input-border: oklch(0.8200 0.0400 240); + --ring: oklch(0.5500 0.2400 220); + + /* Typography - Premium Event Platform */ + --font-sans: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif; + --font-display: 'Space Grotesk', 'Outfit', system-ui, sans-serif; + --font-mono: 'JetBrains Mono', 'Fira Code', monospace; + + /* Spacing and layout */ + --radius: 0.75rem; + --spacing: 1rem; + + /* Premium shadow system */ + --shadow-xs: 0 1px 3px 0 hsl(240 30% 8% / 0.08), 0 1px 2px -1px hsl(240 30% 8% / 0.06); + --shadow-sm: 0 2px 6px -1px hsl(240 30% 8% / 0.10), 0 2px 4px -2px hsl(240 30% 8% / 0.08); + --shadow: 0 4px 8px -2px hsl(240 30% 8% / 0.12), 0 2px 4px -2px hsl(240 30% 8% / 0.08); + --shadow-md: 0 8px 16px -4px hsl(240 30% 8% / 0.14), 0 4px 6px -2px hsl(240 30% 8% / 0.10); + --shadow-lg: 0 16px 24px -4px hsl(240 30% 8% / 0.16), 0 8px 8px -4px hsl(240 30% 8% / 0.08); + --shadow-xl: 0 20px 32px -8px hsl(240 30% 8% / 0.20), 0 8px 16px -8px hsl(240 30% 8% / 0.12); + --shadow-2xl: 0 32px 64px -12px hsl(240 30% 8% / 0.25); + + /* Electric/Glow shadows for premium effects */ + --shadow-electric: 0 4px 16px -2px hsl(220 100% 70% / 0.20), 0 2px 8px -2px hsl(220 100% 70% / 0.15); + --shadow-accent: 0 4px 16px -2px hsl(200 100% 70% / 0.25), 0 2px 8px -2px hsl(200 100% 70% / 0.20); + + /* Premium gradients */ + --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); + --gradient-background: linear-gradient(135deg, + oklch(0.1200 0.0300 240) 0%, + oklch(0.1000 0.0400 235) 25%, + oklch(0.0800 0.0500 230) 50%, + oklch(0.1000 0.0400 225) 75%, + oklch(0.1200 0.0300 220) 100%); + --gradient-card: linear-gradient(135deg, + oklch(0.9900 0.0100 240) 0%, + oklch(0.9700 0.0200 235) 100%); + + /* Tech pattern overlays */ + --grid-color: oklch(0.3000 0.0500 240); + --dot-color: oklch(0.2500 0.0600 220); + --connection-color: oklch(0.4000 0.1200 210); + + /* Glass morphism for premium feel */ + --glass-bg: oklch(0.9800 0.0100 240 / 0.80); + --glass-border: oklch(0.8500 0.0300 240 / 0.30); + --glass-backdrop: blur(16px) saturate(200%); + + /* Professional states */ + --hover-lift: translateY(-2px); + --hover-scale: scale(1.02); + --focus-ring: 0 0 0 3px var(--ring); + + /* Event-specific colors */ + --event-vip: oklch(0.6500 0.2500 45); + --event-premium: oklch(0.5500 0.2200 280); + --event-standard: oklch(0.6000 0.1800 160); + --event-available: oklch(0.6200 0.2000 140); + --event-limited: oklch(0.7200 0.2000 50); + --event-sold-out: oklch(0.5500 0.2200 15); + + /* Radius variations */ + --radius-xs: calc(var(--radius) - 4px); + --radius-sm: calc(var(--radius) - 2px); + --radius-md: var(--radius); + --radius-lg: calc(var(--radius) + 4px); + --radius-xl: calc(var(--radius) + 8px); + --radius-2xl: calc(var(--radius) + 12px); + --radius-full: 9999px; +} \ No newline at end of file diff --git a/.superdesign/design_iterations/quantic_login_1.html b/.superdesign/design_iterations/quantic_login_1.html new file mode 100644 index 0000000..d13f599 --- /dev/null +++ b/.superdesign/design_iterations/quantic_login_1.html @@ -0,0 +1,480 @@ + + + + + + Connexion - Quantic Telecom + + + + + + + + + + +
+
+ +
+
+
+ +
+
+

Quantic Telecom

+

Connexion Espace Client

+

Votre espace client sécurisé

+
+ + + + + +
+

+ Besoin d'aide ? + Support technique +

+

© 2024 Quantic Telecom - Tous droits réservés

+
+
+
+ + + + \ No newline at end of file diff --git a/.superdesign/design_iterations/quantic_telecom_theme.css b/.superdesign/design_iterations/quantic_telecom_theme.css new file mode 100644 index 0000000..37d2e62 --- /dev/null +++ b/.superdesign/design_iterations/quantic_telecom_theme.css @@ -0,0 +1,71 @@ +:root { + /* Quantic Telecom Brand Colors */ + --background: oklch(0.9800 0.0050 240); + --foreground: oklch(0.1500 0.0100 240); + --card: oklch(1.0000 0 0); + --card-foreground: oklch(0.1500 0.0100 240); + --popover: oklch(1.0000 0 0); + --popover-foreground: oklch(0.1500 0.0100 240); + + /* Primary - Telecom Blue */ + --primary: oklch(0.4800 0.2000 240); + --primary-foreground: oklch(0.9800 0.0050 240); + --primary-hover: oklch(0.4200 0.2200 240); + + /* Secondary - Tech Gray */ + --secondary: oklch(0.9200 0.0100 240); + --secondary-foreground: oklch(0.2500 0.0150 240); + + /* Accent - Electric Blue */ + --accent: oklch(0.6500 0.2800 220); + --accent-foreground: oklch(0.9800 0.0050 240); + + /* Muted tones */ + --muted: oklch(0.9600 0.0080 240); + --muted-foreground: oklch(0.4500 0.0120 240); + + /* Success/Error states */ + --success: oklch(0.5500 0.2000 140); + --success-foreground: oklch(0.9800 0.0050 140); + --destructive: oklch(0.5500 0.2200 20); + --destructive-foreground: oklch(0.9800 0.0050 20); + + /* Borders and inputs */ + --border: oklch(0.8800 0.0150 240); + --input: oklch(0.9600 0.0080 240); + --ring: oklch(0.4800 0.2000 240); + + /* Typography */ + --font-sans: 'Inter', 'Segoe UI', system-ui, sans-serif; + --font-serif: 'Inter', 'Segoe UI', system-ui, serif; + --font-mono: 'JetBrains Mono', 'Fira Code', monospace; + + /* Spacing and layout */ + --radius: 0.5rem; + --spacing: 1rem; + + /* Modern shadows for depth */ + --shadow-xs: 0 1px 3px 0 hsl(240 25% 3% / 0.06); + --shadow-sm: 0 1px 3px 0 hsl(240 25% 3% / 0.08), 0 1px 2px -1px hsl(240 25% 3% / 0.08); + --shadow: 0 4px 8px -2px hsl(240 25% 3% / 0.08), 0 2px 4px -2px hsl(240 25% 3% / 0.06); + --shadow-md: 0 8px 16px -4px hsl(240 25% 3% / 0.08), 0 4px 6px -2px hsl(240 25% 3% / 0.06); + --shadow-lg: 0 16px 24px -4px hsl(240 25% 3% / 0.08), 0 8px 8px -4px hsl(240 25% 3% / 0.04); + --shadow-xl: 0 20px 32px -8px hsl(240 25% 3% / 0.12), 0 8px 16px -8px hsl(240 25% 3% / 0.08); + + /* Gradients for modern appeal */ + --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); + --gradient-background: linear-gradient(135deg, oklch(0.9900 0.0030 240) 0%, oklch(0.9700 0.0080 220) 100%); + + /* Grid overlay for tech aesthetic */ + --grid-color: oklch(0.9400 0.0100 240); + + /* Glass morphism effects */ + --glass-bg: oklch(1.0000 0 0 / 0.70); + --glass-border: oklch(0.9000 0.0200 240 / 0.20); + --glass-backdrop: blur(12px) saturate(180%); + + --radius-sm: calc(var(--radius) - 2px); + --radius-md: var(--radius); + --radius-lg: calc(var(--radius) + 4px); + --radius-xl: calc(var(--radius) + 8px); +} \ No newline at end of file