🚀 Simple Integration Test
+Simple Integration Test
This page demonstrates the most basic integration of the OpenNetwork Banner.
Just include the script and the banner automatically appears!
Domain detected: Loading...
diff --git a/styles/community.css b/styles/community.css index bc30497..9f0923f 100644 --- a/styles/community.css +++ b/styles/community.css @@ -1,19 +1,19 @@ /* ===== COMMUNITY SPECIFIC STYLES ===== */ -/* Import Hack Club gradient variables */ +/* Import Professional Color Variables */ :root { - --gradient-electric: linear-gradient(135deg, #7C3AED 0%, #06B6D4 100%); - --gradient-sunset: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%); - --gradient-cosmic: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%); - --gradient-neon: linear-gradient(135deg, #10B981 0%, #06B6D4 100%); - --font-display: 'Kanit', sans-serif; - --font-mono: 'Space Mono', monospace; + --gradient-electric: #1A73E8; + --gradient-sunset: #1A73E8; + --gradient-cosmic: #1A73E8; + --gradient-neon: #1A73E8; + --font-display: 'Google Sans', sans-serif; + --font-mono: 'Google Sans', sans-serif; } /* Community Layout */ .community-container { padding: 24px; - font-family: 'Space Grotesk', -apple-system, sans-serif; + font-family: 'Google Sans', -apple-system, sans-serif; } .community-layout { @@ -142,7 +142,7 @@ text-align: left; cursor: pointer; font-size: 1rem; - font-family: 'Space Grotesk', sans-serif; + font-family: 'Google Sans', sans-serif; transition: all 0.3s ease; } diff --git a/styles/dashboard.css b/styles/dashboard.css index 3089d63..0c85e9c 100644 --- a/styles/dashboard.css +++ b/styles/dashboard.css @@ -24,8 +24,8 @@ --gradient-primary: linear-gradient(135deg, var(--accent-primary), #7b68ee); /* Fonts */ - --font-primary: 'Inter', system-ui, sans-serif; - --font-mono: 'Space Mono', monospace; + --font-primary: 'Google Sans', system-ui, sans-serif; + --font-mono: 'Google Sans', monospace; /* Spacing */ --sidebar-width: 280px; diff --git a/styles/hackclub-style.css b/styles/hackclub-style.css index 84a7d6e..1218c63 100644 --- a/styles/hackclub-style.css +++ b/styles/hackclub-style.css @@ -1,50 +1,44 @@ -/* OpenRockets - Hack Club Inspired Design System */ -@import url('https://fonts.googleapis.com/css2?family=Phantom+Sans:wght@400;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700;800;900&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Asimovian&family=Michroma&family=Zalando+Sans+Expanded:ital,wght@0,200..900;1,200..900&display=swap'); +/* OpenRockets - Professional Design System */ +@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap'); + :root { - /* Ada College Inspired Color Palette */ - --ada-yellow: #FFD23F; - --ada-green: #7CB342; - --ada-blue: #42A5F5; - --ada-purple: #BA68C8; - --ada-orange: #FF7043; - --ada-pink: #EC407A; - --ada-light-gray: #F8F9FA; - --ada-dark-gray: #263238; - - /* Modern Gradients - Ada Inspired */ - --gradient-primary: linear-gradient(135deg, var(--ada-yellow) 0%, var(--ada-orange) 100%); - --gradient-secondary: linear-gradient(135deg, var(--ada-green) 0%, var(--ada-blue) 100%); - --gradient-accent: linear-gradient(135deg, var(--ada-purple) 0%, var(--ada-pink) 100%); - --gradient-hero: linear-gradient(135deg, var(--ada-blue) 0%, var(--ada-purple) 50%, var(--ada-pink) 100%); - --gradient-geometric: linear-gradient(45deg, var(--ada-yellow) 25%, var(--ada-green) 25%, var(--ada-green) 50%, var(--ada-blue) 50%, var(--ada-blue) 75%, var(--ada-purple) 75%); - - /* Legacy Hack Club Colors (maintained for compatibility) */ - --hc-red: var(--ada-orange); - --hc-orange: var(--ada-yellow); - --hc-yellow: var(--ada-yellow); - --hc-green: var(--ada-green); - --hc-blue: var(--ada-blue); - --hc-purple: var(--ada-purple); - --hc-slate: #34495E; - --hc-muted: #7F8C8D; - --hc-smoke: #ECF0F1; - --hc-snow: #FFFFFF; - --hc-dark: #2C3E50; - --hc-black: #1A252F; - - /* Custom OpenRockets Extensions - Ada Style */ - --or-primary: var(--ada-blue); - --or-secondary: var(--ada-green); - --or-accent: var(--ada-yellow); - --or-dark: var(--ada-dark-gray); - --or-darker: #1A252F; - --or-light: var(--ada-light-gray); + /* Professional Color Palette */ + --primary-white: #FFFFFF; + --primary-black: #000000; + --primary-blue: #1A73E8; + --secondary-blue: #4285F4; + --accent-red: #DC3545; + --light-gray: #F8F9FA; + --medium-gray: #6C757D; + --dark-gray: #343A40; + --border-gray: #DEE2E6; + + /* Simplified color references */ + --ada-blue: var(--primary-blue); + --ada-light-gray: var(--light-gray); + --ada-dark-gray: var(--dark-gray); + + /* Legacy color compatibility */ + --hc-blue: var(--primary-blue); + --hc-slate: var(--dark-gray); + --hc-muted: var(--medium-gray); + --hc-smoke: var(--light-gray); + --hc-snow: var(--primary-white); + --hc-dark: var(--dark-gray); + --hc-black: var(--primary-black); + + /* OpenRockets color system */ + --or-primary: var(--primary-blue); + --or-secondary: var(--secondary-blue); + --or-accent: var(--accent-red); + --or-dark: var(--dark-gray); + --or-darker: var(--primary-black); + --or-light: var(--light-gray); /* Typography */ - --font-primary: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; - --font-display: "Asimovian", sans-serif; - --font-modern: "Asimovian", sans-serif; + --font-primary: 'Google Sans', -apple-system, BlinkMacSystemFont, sans-serif; + --font-display: 'Google Sans', sans-serif; + --font-modern: 'Google Sans', sans-serif; /* Spacing */ --space-1: 0.25rem; @@ -85,9 +79,8 @@ html { body { font-family: var(--font-primary); - background: linear-gradient(135deg, var(--ada-light-gray) 0%, #FFFFFF 25%, var(--ada-light-gray) 50%, #F0F3F7 75%, var(--ada-light-gray) 100%); - background-attachment: fixed; - color: var(--ada-dark-gray); + background: var(--primary-white); + color: var(--primary-black); line-height: 1.6; overflow-x: hidden; font-weight: 400; @@ -95,22 +88,6 @@ body { position: relative; } -/* Ambient background effects - Ada Style Geometric Patterns */ -body::before { - content: ''; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: - radial-gradient(circle at 20% 80%, rgba(175, 122, 197, 0.08) 0%, transparent 50%), - radial-gradient(circle at 80% 20%, rgba(143, 209, 79, 0.08) 0%, transparent 50%), - radial-gradient(circle at 50% 50%, rgba(255, 210, 63, 0.05) 0%, transparent 50%); - pointer-events: none; - z-index: -1; -} - /* Canvas Background */ #canvas-bg { position: fixed; @@ -122,20 +99,18 @@ body::before { opacity: 0.1; } -/* Navigation - Ada Style */ +/* Navigation - Professional Style */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; - background: rgba(0, 0, 0, 0.95); - -webkit-backdrop-filter: blur(20px); - backdrop-filter: blur(20px); - border-bottom: 3px solid var(--ada-yellow); + background: var(--primary-white); + border-bottom: 1px solid var(--border-gray); padding: var(--space-3) 0; transition: var(--transition); - box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .nav-container { @@ -175,12 +150,8 @@ body::before { .brand-text { font-family: var(--font-display); font-size: 1.5rem; - font-weight: 800; - - background: var(--ada-light-gray); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; + font-weight: 700; + color: var(--primary-black); line-height: 1; } @@ -2841,3 +2812,156 @@ body.nav-open { opacity: 0.7; } + +/* Magazine Announcement Section */ +.magazine-announcement { + padding: var(--space-6) var(--space-4); + background: var(--light-gray); + border-bottom: 1px solid var(--border-gray); +} + +.magazine-announcement .container { + max-width: 1200px; + margin: 0 auto; +} + +.announcement-content { + background: var(--primary-white); + padding: var(--space-5); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-lg); + text-align: center; +} + +.announcement-header h2 { + margin-bottom: var(--space-4); +} + +.announcement-body p { + max-width: 800px; + margin: 0 auto var(--space-4); +} + +/* Impact Report Section */ +.impact-report { + padding: var(--space-6) var(--space-4); + background: var(--primary-white); +} + +.impact-report .container { + max-width: 1200px; + margin: 0 auto; +} + +.report-header { + text-align: center; + margin-bottom: var(--space-5); +} + +.report-meta { + color: var(--medium-gray); + font-size: 0.9rem; + margin-top: var(--space-2); +} + +.report-content { + background: var(--light-gray); + padding: var(--space-5); + border-radius: var(--radius-lg); + border: 1px solid var(--border-gray); +} + +.report-intro { + font-size: 1.1rem; + line-height: 1.8; + margin-bottom: var(--space-5); + color: var(--dark-gray); +} + +.milestones-section h3 { + font-size: 1.8rem; + margin-bottom: var(--space-4); + color: var(--primary-black); + font-weight: 700; +} + +.milestones-list { + list-style: none; + padding: 0; +} + +.milestones-list li { + background: var(--primary-white); + padding: var(--space-4); + margin-bottom: var(--space-3); + border-radius: var(--radius); + border-left: 4px solid var(--primary-blue); + box-shadow: var(--shadow-sm); +} + +.milestones-list li strong { + color: var(--primary-blue); + font-weight: 700; +} + +.report-cta { + margin-top: var(--space-5); + display: flex; + gap: var(--space-3); + justify-content: center; + flex-wrap: wrap; +} + +/* Professional Button Styles */ +.btn-primary { + background: var(--primary-blue); + color: var(--primary-white); + border: none; +} + +.btn-primary:hover { + background: var(--secondary-blue); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3); +} + +.btn-secondary { + background: var(--primary-white); + color: var(--primary-blue); + border: 2px solid var(--primary-blue); +} + +.btn-secondary:hover { + background: var(--primary-blue); + color: var(--primary-white); + transform: translateY(-2px); +} + +/* Remove all gradient backgrounds for professional look */ +body::before, +.hero::before, +.hero::after { + display: none; +} + +/* Professional footer */ +.footer { + background: var(--dark-gray) !important; + color: var(--primary-white) !important; + border-top: 1px solid var(--border-gray); +} + +.footer-section h4, +.footer-section h5 { + color: var(--primary-white) !important; +} + +.footer-section a, +.footer-section span { + color: var(--light-gray) !important; +} + +.footer-section a:hover { + color: var(--primary-blue) !important; +} + diff --git a/styles/lms-main.css b/styles/lms-main.css index febf98c..cdf35a8 100644 --- a/styles/lms-main.css +++ b/styles/lms-main.css @@ -32,8 +32,8 @@ --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); /* Fonts */ - --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; - --font-mono: 'Space Mono', 'Fira Code', monospace; + --font-primary: 'Google Sans', -apple-system, BlinkMacSystemFont, sans-serif; + --font-mono: 'Google Sans', 'Fira Code', monospace; } /* ===== RESET & BASE STYLES ===== */ diff --git a/styles/main.css b/styles/main.css index b3842dd..24eb7de 100644 --- a/styles/main.css +++ b/styles/main.css @@ -6,39 +6,39 @@ } :root { - /* Color Palette */ - --primary-color: #22ff00; - --primary-dark: #004499; - --primary-light: #000000; - --secondary-color: #ff6b35; - --secondary-dark: #e55a2b; - --accent-color: #00d4aa; - --accent-dark: #00b894; + /* Professional Color Palette */ + --primary-color: #1A73E8; + --primary-dark: #1557B0; + --primary-light: #4285F4; + --secondary-color: #000000; + --secondary-dark: #000000; + --accent-color: #DC3545; + --accent-dark: #C82333; /* Neutral Colors */ --white: #ffffff; - --gray-50: #f8fafc; - --gray-100: #f1f5f9; - --gray-200: #e2e8f0; - --gray-300: #cbd5e1; - --gray-400: #94a3b8; - --gray-500: #64748b; - --gray-600: #475569; - --gray-700: #334155; - --gray-800: #1e293b; - --gray-900: #0f172a; + --gray-50: #f8f9fa; + --gray-100: #e9ecef; + --gray-200: #dee2e6; + --gray-300: #ced4da; + --gray-400: #adb5bd; + --gray-500: #6c757d; + --gray-600: #495057; + --gray-700: #343a40; + --gray-800: #212529; + --gray-900: #000000; --black: #000000; /* Background Colors */ - --bg-primary: #0a0a0f; - --bg-secondary: #1a1a2e; - --bg-tertiary: #16213e; - --bg-glass: rgba(255, 255, 255, 0.05); - --bg-glass-hover: rgba(255, 255, 255, 0.1); + --bg-primary: #ffffff; + --bg-secondary: #f8f9fa; + --bg-tertiary: #e9ecef; + --bg-glass: rgba(255, 255, 255, 0.95); + --bg-glass-hover: rgba(255, 255, 255, 1); /* Typography */ - --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; - --font-mono: 'Space Mono', 'Fira Code', 'Monaco', 'Consolas', monospace; + --font-primary: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; + --font-mono: 'Google Sans', 'Roboto Mono', monospace; /* Font Weights */ --font-light: 300; diff --git a/test-community.html b/test-community.html index 5984478..d3f0dae 100644 --- a/test-community.html +++ b/test-community.html @@ -83,7 +83,7 @@
-
🚀 OpenRockets Community System Test
+OpenRockets Community System Test
This page tests all the community features to identify what's working and what needs to be fixed.