From 1a66ebdfc41029bc92c6ced90504eeee114887b5 Mon Sep 17 00:00:00 2001 From: Cipher Vance Date: Sun, 24 Aug 2025 12:47:15 -0500 Subject: [PATCH] feat: Complete UI/UX redesign with modern responsive design - Redesign landing page with contemporary gradient backgrounds and glassmorphism - Add 3D phone mockup with floating animation and interactive stats display - Implement modern navigation with blur backdrop and smooth scroll effects - Update feature cards with icons, hover animations, and improved typography - Integrate countdown timer into hero CTA section with glassmorphic styling - Add responsive email signup form with enhanced validation - Modernize newsletters listing page with card-based grid layout - Add empty state design with call-to-action for newsletter subscription - Implement smooth loading animations and hover effects for newsletter cards - Update navigation consistency across all pages - Redesign newsletter detail page with professional article layout - Add reading metadata display (date, reading time, author, tags) - Enhance content typography with proper heading hierarchy and styling - Implement share functionality with Web Share API and clipboard fallback - Add print-optimized styles and action buttons - Improve mobile reading experience with responsive design - Establish consistent design system with CSS custom properties - Use CSS Grid and Flexbox for modern, flexible layouts - Add comprehensive mobile responsiveness (320px to desktop) - Implement smooth animations and micro-interactions throughout - Maintain accessibility with semantic HTML and proper contrast ratios - Preserve all existing Flask template functionality and JavaScript features Breaking changes: Complete visual redesign requires updated asset references Performance: Optimized CSS with efficient animations and modern layout techniques --- static/css/newsletter_styles.css | 825 ++++++++++++++++++++++++++++++ static/css/styles.css | 692 ++++++++++++++----------- static/js/countdown.js | 11 +- static/js/main.js | 194 +++++-- templates/confirmation_email.html | 441 +++++++++++++++- templates/index.html | 211 +++++--- templates/newsletter_detail.html | 138 ++++- templates/newsletters.html | 117 +++-- templates/template.html | 529 +++++++++++++++---- 9 files changed, 2612 insertions(+), 546 deletions(-) create mode 100644 static/css/newsletter_styles.css diff --git a/static/css/newsletter_styles.css b/static/css/newsletter_styles.css new file mode 100644 index 0000000..0b44ee9 --- /dev/null +++ b/static/css/newsletter_styles.css @@ -0,0 +1,825 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --primary: #1e4e9c; + --secondary: #337cf2; + --accent: #00d4ff; + --text-dark: #1a1a1a; + --text-light: #6b7280; + --bg-light: #f8fafc; + --white: #ffffff; + --gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 50%, var(--accent) 100%); + --shadow: 0 10px 30px rgba(30, 78, 156, 0.1); + --shadow-hover: 0 20px 40px rgba(30, 78, 156, 0.15); + --border-radius: 20px; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + line-height: 1.7; + color: var(--text-dark); + background: var(--bg-light); + min-height: 100vh; + display: flex; + flex-direction: column; +} + +/* Navigation */ +.navbar { + position: sticky; + top: 0; + background: rgba(255, 255, 255, 0.98); + backdrop-filter: blur(20px); + z-index: 1000; + padding: 1rem 0; + box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05); +} + +.nav-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 2rem; + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + font-size: 1.5rem; + font-weight: 700; + color: var(--text-dark); + text-decoration: none; + transition: transform 0.3s ease; +} + +.logo:hover { + transform: scale(1.05); +} + +.logo-accent { + color: var(--primary); +} + +.nav-links { + display: flex; + gap: 2rem; + list-style: none; + align-items: center; +} + +.nav-links a { + text-decoration: none; + color: var(--text-dark); + font-weight: 500; + transition: all 0.3s ease; + position: relative; + padding: 0.5rem 1rem; + border-radius: 25px; +} + +.nav-links a.active { + background: var(--gradient); + color: white; + transform: translateY(-2px); +} + +.nav-links a:not(.active)::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 0; + height: 2px; + background: var(--gradient); + transition: width 0.3s ease; +} + +.nav-links a:not(.active):hover::after { + width: 80%; +} + +/* Header Section */ +.page-header { + background: var(--gradient); + padding: 4rem 0 2rem; + text-align: center; + position: relative; + overflow: hidden; +} + +.page-header::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: url('data:image/svg+xml,'); + opacity: 0.3; +} + +.page-header-content { + max-width: 1200px; + margin: 0 auto; + padding: 0 2rem; + position: relative; + z-index: 1; +} + +.page-header h1 { + font-size: clamp(2.5rem, 5vw, 3.5rem); + font-weight: 800; + color: white; + margin-bottom: 1rem; + text-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); +} + +.page-header p { + font-size: 1.25rem; + color: rgba(255, 255, 255, 0.9); + max-width: 600px; + margin: 0 auto; + font-weight: 300; +} + +.header-icon { + display: inline-block; + font-size: 3rem; + margin-bottom: 1rem; + color: rgba(255, 255, 255, 0.8); +} + +/* Main Content (List page) */ +.main-content { + flex: 1; + max-width: 1200px; + margin: 0 auto; + padding: 3rem 2rem; + width: 100%; +} + +/* Newsletter Grid */ +.newsletters-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +.newsletter-card { + background: white; + border-radius: var(--border-radius); + padding: 2rem; + box-shadow: var(--shadow); + border: 1px solid rgba(30, 78, 156, 0.05); + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.newsletter-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 4px; + background: var(--gradient); +} + +.newsletter-card:hover { + transform: translateY(-8px); + box-shadow: var(--shadow-hover); +} + +.newsletter-header { + display: flex; + align-items: flex-start; + gap: 1rem; + margin-bottom: 1rem; +} + +.newsletter-icon { + width: 50px; + height: 50px; + background: var(--gradient); + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + color: white; + font-size: 1.25rem; + flex-shrink: 0; +} + +.newsletter-info h2 { + font-size: 1.375rem; + font-weight: 600; + color: var(--text-dark); + margin-bottom: 0.5rem; + line-height: 1.4; +} + +.newsletter-info h2 a { + color: inherit; + text-decoration: none; + transition: color 0.3s ease; +} + +.newsletter-info h2 a:hover { + background: var(--gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.newsletter-date { + color: var(--text-light); + font-size: 0.875rem; + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 1rem; +} + +.newsletter-excerpt { + color: var(--text-light); + margin-bottom: 1.5rem; + font-size: 0.95rem; + line-height: 1.6; +} + +.read-more-btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + background: var(--gradient); + color: white; + text-decoration: none; + padding: 0.75rem 1.5rem; + border-radius: 25px; + font-weight: 500; + transition: all 0.3s ease; + font-size: 0.875rem; +} + +.read-more-btn:hover { + transform: translateX(5px); + box-shadow: 0 5px 15px rgba(30, 78, 156, 0.3); +} + +/* Empty State */ +.empty-state { + text-align: center; + padding: 4rem 2rem; + background: white; + border-radius: var(--border-radius); + box-shadow: var(--shadow); + border: 1px solid rgba(30, 78, 156, 0.05); +} + +.empty-icon { + font-size: 4rem; + color: var(--text-light); + margin-bottom: 1.5rem; + opacity: 0.5; +} + +.empty-state h3 { + font-size: 1.5rem; + color: var(--text-dark); + margin-bottom: 1rem; +} + +.empty-state p { + color: var(--text-light); + font-size: 1.125rem; + max-width: 400px; + margin: 0 auto 2rem; +} + +.subscribe-prompt { + background: var(--gradient); + color: white; + text-decoration: none; + padding: 1rem 2rem; + border-radius: 25px; + font-weight: 600; + display: inline-flex; + align-items: center; + gap: 0.75rem; + transition: all 0.3s ease; +} + +.subscribe-prompt:hover { + transform: translateY(-3px); + box-shadow: var(--shadow-hover); +} + +/* Footer (list page) */ +.footer { + background: var(--text-dark); + color: white; + text-align: center; + padding: 2rem 0; + margin-top: auto; +} + +.footer p { + opacity: 0.8; +} + +/* Mobile Styles (list page) */ +@media (max-width: 768px) { + .nav-container { + padding: 0 1rem; + } + + .nav-links { + gap: 1rem; + } + + .nav-links a { + padding: 0.5rem 0.75rem; + font-size: 0.875rem; + } + + .page-header { + padding: 3rem 0 1.5rem; + } + + .main-content { + padding: 2rem 1rem; + } + + .newsletters-grid { + grid-template-columns: 1fr; + gap: 1.5rem; + } + + .newsletter-card { + padding: 1.5rem; + } + + .newsletter-header { + flex-direction: column; + align-items: center; + text-align: center; + gap: 1rem; + } + + .empty-state { + padding: 3rem 1.5rem; + } +} + +/* Loading Animation (list page cards) */ +@keyframes fadeInUp { + from { opacity: 0; transform: translateY(30px); } + to { opacity: 1; transform: translateY(0); } +} + +.newsletter-card { + animation: fadeInUp 0.6s ease forwards; +} + +.newsletter-card:nth-child(2) { animation-delay: 0.1s; } +.newsletter-card:nth-child(3) { animation-delay: 0.2s; } +.newsletter-card:nth-child(4) { animation-delay: 0.3s; } + +/* ----------------------------- */ +/* Detail Page Additions (unique) */ +/* ----------------------------- */ + +/* Back Button */ +.back-navigation { + max-width: 1200px; + margin: 0 auto; + padding: 2rem 2rem 0; +} + +.back-link { + display: inline-flex; + align-items: center; + gap: 0.75rem; + color: var(--text-light); + text-decoration: none; + font-weight: 500; + transition: all 0.3s ease; + padding: 0.75rem 1rem; + border-radius: 25px; + background: white; + box-shadow: var(--shadow); + border: 1px solid rgba(30, 78, 156, 0.05); +} + +.back-link:hover { + color: var(--primary); + transform: translateX(-5px); + box-shadow: var(--shadow-hover); +} + +.back-link i { + transition: transform 0.3s ease; +} + +.back-link:hover i { + transform: translateX(-3px); +} + +/* Main Content (detail page override) */ +.main-content { + flex: 1; + max-width: 900px; + margin: 0 auto; + padding: 2rem; + width: 100%; +} + +/* Newsletter Header (detail) */ +.newsletter-header { + background: white; + padding: 3rem; + border-radius: var(--border-radius); + box-shadow: var(--shadow); + margin-bottom: 2rem; + text-align: center; + position: relative; + overflow: hidden; + border: 1px solid rgba(30, 78, 156, 0.05); +} + +.newsletter-header::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 4px; + background: var(--gradient); +} + +.newsletter-icon { + width: 80px; + height: 80px; + background: var(--gradient); + border-radius: 20px; + display: flex; + align-items: center; + justify-content: center; + color: white; + font-size: 2rem; + margin: 0 auto 1.5rem; + box-shadow: 0 10px 20px rgba(30, 78, 156, 0.2); +} + +.newsletter-header h1 { + font-size: clamp(1.75rem, 4vw, 2.5rem); + font-weight: 700; + color: var(--text-dark); + margin-bottom: 1rem; + line-height: 1.3; +} + +.newsletter-meta { + display: flex; + justify-content: center; + align-items: center; + gap: 2rem; + color: var(--text-light); + font-size: 0.95rem; + margin-bottom: 1.5rem; +} + +.meta-item { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.newsletter-tags { + display: flex; + gap: 0.75rem; + justify-content: center; + flex-wrap: wrap; +} + +.tag { + background: rgba(30, 78, 156, 0.1); + color: var(--primary); + padding: 0.5rem 1rem; + border-radius: 20px; + font-size: 0.875rem; + font-weight: 500; +} + +/* Newsletter Content (detail) */ +.newsletter-content { + background: white; + padding: 3rem; + border-radius: var(--border-radius); + box-shadow: var(--shadow); + border: 1px solid rgba(30, 78, 156, 0.05); + position: relative; +} + +.newsletter-content::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 4px; + background: var(--gradient); +} + +/* Typography */ +.newsletter-content h1, +.newsletter-content h2, +.newsletter-content h3, +.newsletter-content h4, +.newsletter-content h5, +.newsletter-content h6 { + color: var(--text-dark); + font-weight: 600; + margin-top: 2rem; + margin-bottom: 1rem; + line-height: 1.3; +} + +.newsletter-content h1 { + font-size: 2.25rem; + font-weight: 700; + background: var(--gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.newsletter-content h2 { + font-size: 1.875rem; + border-bottom: 2px solid rgba(30, 78, 156, 0.1); + padding-bottom: 0.5rem; +} + +.newsletter-content h3 { + font-size: 1.5rem; + color: var(--primary); +} + +.newsletter-content h4 { + font-size: 1.25rem; +} + +.newsletter-content p { + margin-bottom: 1.5rem; + font-size: 1.0625rem; + line-height: 1.8; + color: var(--text-dark); +} + +.newsletter-content ul, +.newsletter-content ol { + margin-bottom: 1.5rem; + padding-left: 2rem; +} + +.newsletter-content li { + margin-bottom: 0.75rem; + color: var(--text-dark); + line-height: 1.7; +} + +.newsletter-content blockquote { + background: rgba(30, 78, 156, 0.05); + border-left: 4px solid var(--primary); + padding: 1.5rem 2rem; + margin: 2rem 0; + border-radius: 0 15px 15px 0; + font-style: italic; + color: var(--text-light); + position: relative; +} + +.newsletter-content blockquote::before { + content: '"'; + font-size: 3rem; + color: var(--primary); + position: absolute; + top: 0.5rem; + left: 1rem; + opacity: 0.3; +} + +.newsletter-content a { + color: var(--primary); + text-decoration: none; + font-weight: 500; + border-bottom: 1px solid transparent; + transition: all 0.3s ease; +} + +.newsletter-content a:hover { + border-bottom-color: var(--primary); + color: var(--secondary); +} + +.newsletter-content img { + max-width: 100%; + height: auto; + border-radius: 15px; + margin: 2rem 0; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); +} + +.newsletter-content pre { + background: #f8fafc; + border: 1px solid #e5e7eb; + border-radius: 10px; + padding: 1.5rem; + overflow-x: auto; + margin: 2rem 0; + font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; +} + +.newsletter-content code { + background: rgba(30, 78, 156, 0.1); + color: var(--primary); + padding: 0.25rem 0.5rem; + border-radius: 5px; + font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; + font-size: 0.9em; +} + +.newsletter-content table { + width: 100%; + border-collapse: collapse; + margin: 2rem 0; + border-radius: 10px; + overflow: hidden; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); +} + +.newsletter-content th, +.newsletter-content td { + padding: 1rem 1.5rem; + text-align: left; + border-bottom: 1px solid rgba(30, 78, 156, 0.1); +} + +.newsletter-content th { + background: var(--gradient); + color: white; + font-weight: 600; +} + +/* Action Buttons */ +.newsletter-actions { + display: flex; + gap: 1rem; + justify-content: center; + margin: 3rem 0 2rem; + flex-wrap: wrap; +} + +.action-btn { + display: inline-flex; + align-items: center; + gap: 0.75rem; + padding: 1rem 2rem; + border: none; + border-radius: 25px; + font-weight: 600; + text-decoration: none; + cursor: pointer; + transition: all 0.3s ease; + font-size: 1rem; +} + +.action-btn.primary { + background: var(--gradient); + color: white; +} + +.action-btn.secondary { + background: white; + color: var(--primary); + border: 2px solid var(--primary); +} + +.action-btn:hover { + transform: translateY(-3px); + box-shadow: var(--shadow-hover); +} + +/* Footer (detail page override) */ +.footer { + background: var(--text-dark); + color: white; + text-align: center; + padding: 2rem 0; + margin-top: 2rem; +} + +/* Mobile (detail page) */ +@media (max-width: 768px) { + .back-navigation { + padding: 1.5rem 1rem 0; + } + + .main-content { + padding: 1rem; + } + + .newsletter-header { + padding: 2rem 1.5rem; + } + + .newsletter-meta { + flex-direction: column; + gap: 1rem; + } + + .newsletter-content { + padding: 2rem 1.5rem; + } + + .newsletter-content h1 { font-size: 1.75rem; } + .newsletter-content h2 { font-size: 1.5rem; } + .newsletter-content h3 { font-size: 1.25rem; } + + .newsletter-actions { + flex-direction: column; + align-items: center; + } + + .action-btn { + width: 100%; + max-width: 300px; + justify-content: center; + } + + .newsletter-content pre { + padding: 1rem; + font-size: 0.875rem; + } + + .newsletter-content th, + .newsletter-content td { + padding: 0.75rem 1rem; + font-size: 0.875rem; + } +} + +@media (max-width: 480px) { + .newsletter-header { + padding: 1.5rem 1rem; + } + + .newsletter-content { + padding: 1.5rem 1rem; + } + + .newsletter-icon { + width: 60px; + height: 60px; + font-size: 1.5rem; + } +} + +/* Print Styles */ +@media print { + .navbar, + .back-navigation, + .newsletter-actions, + .footer { + display: none; + } + + .newsletter-header, + .newsletter-content { + box-shadow: none; + border: 1px solid #ddd; + } + + .newsletter-content { + page-break-inside: avoid; + } +} + +/* Animation (detail page elements) */ +.newsletter-header, +.newsletter-content { + animation: fadeInUp 0.6s ease forwards; +} + +.newsletter-content { + animation-delay: 0.2s; +} \ No newline at end of file diff --git a/static/css/styles.css b/static/css/styles.css index 591eeaf..2935e31 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -1,358 +1,476 @@ -/* Reset and General Styles */ -html { - box-sizing: border-box; +* { + margin: 0; + padding: 0; + box-sizing: border-box; } -*, -*:before, -*:after { - box-sizing: inherit; +:root { + --primary: #1e4e9c; + --secondary: #337cf2; + --accent: #00d4ff; + --text-dark: #1a1a1a; + --text-light: #6b7280; + --bg-light: #f8fafc; + --white: #ffffff; + --gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 50%, var(--accent) 100%); + --shadow: 0 10px 30px rgba(30, 78, 156, 0.1); + --shadow-hover: 0 20px 40px rgba(30, 78, 156, 0.15); +} + +html { + scroll-behavior: smooth; } body { - font-family: Arial, sans-serif; - margin: 0; - padding: 0; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + line-height: 1.7; + color: var(--text-dark); + overflow-x: hidden; } -img { - max-width: 100%; - height: auto; +/* Navigation */ +.navbar { + position: fixed; + top: 0; + left: 0; + right: 0; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(20px); + z-index: 1000; + padding: 1rem 0; + transition: all 0.3s ease; } -/* Header and Nav */ -header { - background-color: #fff; - padding: 10px 20px; - text-align: center; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - margin: 5px auto; +.nav-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 2rem; + display: flex; + justify-content: space-between; + align-items: center; } -header nav { - display: flex; - justify-content: flex-start; /* Align items to the start */ - align-items: center; +.logo { + font-size: 1.5rem; + font-weight: 700; + color: var(--text-dark); + text-decoration: none; + transition: transform 0.3s ease; } -header nav a { - text-decoration: none; - color: #000; - margin-left: 20px; - font-size: 22px; +.logo:hover { + transform: scale(1.05); } -/* Hero Section Styles */ -.hero-section-1 { - width: 100%; - margin: 0; - padding: 0; - overflow: hidden; +.logo-accent { + color: var(--primary); } -.hero-content, -.hero-text { - width: 100%; - height: 100%; - margin: 0; - padding: 0; +.nav-links { + display: flex; + gap: 2rem; + list-style: none; } -.hero-text img { - width: 70%; - display: block; - margin: 0 auto; +.nav-links a { + text-decoration: none; + color: var(--text-dark); + font-weight: 500; + transition: color 0.3s ease; + position: relative; } -.hero-text h1 { - font-size: 48px; - font-weight: bold; - color: #000; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +.nav-links a::after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + width: 0; + height: 2px; + background: var(--gradient); + transition: width 0.3s ease; } -.hero-text p { - font-size: 18px; - color: #000; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +.nav-links a:hover::after { + width: 100%; } -.hero-section-2 { - background-color: #337cf2; - padding: 100px 0; - text-align: center; - width: 100%; - margin: 0; +/* Hero Section */ +.hero { + min-height: 100vh; + background: var(--gradient); + display: flex; + align-items: center; + position: relative; + overflow: hidden; } -.hero-section-2 .inner-container { - padding: 0 20px; +.hero::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: url('data:image/svg+xml,'); + opacity: 0.3; } -.hero-sec2-header { - padding-top: 2.5%; - font-size: 40px; +.hero-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 2rem; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; + position: relative; + z-index: 1; } -.hero-section-2 form { - padding: 10px; - font-size: 1rem; - width: calc(100% - 50px); - max-width: 600px; - margin: 0 auto; +.hero-content h1 { + font-size: clamp(2.5rem, 5vw, 4rem); + font-weight: 800; + color: white; + margin-bottom: 1.5rem; + line-height: 1.2; + text-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); } -.hero-section-2 input { - padding: 10px; - width: 15%; - border: 1px solid #ccc; - border-radius: 10px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +.hero-content .subtitle { + font-size: 1.25rem; + color: rgba(255, 255, 255, 0.9); + margin-bottom: 2rem; + font-weight: 300; } -.hero-section-2 button { - padding: 10px 20px; - border: none; - border-radius: 5px; - cursor: pointer; +.cta-section { + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(20px); + padding: 2rem; + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.2); } -/* Feature Cards */ -.hero-section-3 { - width: 100%; +.cta-section h3 { + color: white; + font-size: 1.5rem; + margin-bottom: 0.5rem; + font-weight: 600; } -.hero-section-3 h2 { - margin-top: 0; - text-align: center; +.cta-section p { + color: rgba(255, 255, 255, 0.8); + margin-bottom: 1.5rem; } -.feature-cards { - display: flex; - flex-wrap: wrap; - justify-content: center; +.email-form { + display: flex; + gap: 1rem; + margin-bottom: 1.5rem; +} + +.email-input { + flex: 1; + padding: 1rem 1.5rem; + border: none; + border-radius: 50px; + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(10px); + font-size: 1rem; + outline: none; + transition: all 0.3s ease; +} + +.email-input:focus { + background: white; + box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3); +} + +.notify-btn { + padding: 1rem 2rem; + background: var(--white); + color: var(--primary); + border: none; + border-radius: 50px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + white-space: nowrap; +} + +.notify-btn:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-hover); +} + +/* Countdown Timer */ +.countdown { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1rem; + margin-top: 1rem; +} + +.countdown-item { + text-align: center; + color: white; +} + +.countdown-number { + font-size: 2rem; + font-weight: 700; + display: block; +} + +.countdown-label { + font-size: 0.875rem; + opacity: 0.8; + text-transform: uppercase; + letter-spacing: 1px; +} + +.hero-visual { + position: relative; + height: 500px; + display: flex; + align-items: center; + justify-content: center; +} + +.phone-mockup { + width: 300px; + height: 600px; + background: linear-gradient(145deg, #2a2a2a, #1a1a1a); + border-radius: 40px; + padding: 20px; + box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3); + position: relative; + transform: rotate(-5deg); + animation: float 6s ease-in-out infinite; +} + +@keyframes float { + 0%, 100% { transform: rotate(-5deg) translateY(0px); } + 50% { transform: rotate(-5deg) translateY(-20px); } +} + +.screen { + width: 100%; + height: 100%; + background: var(--gradient); + border-radius: 25px; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; +} + +.app-interface { + color: white; + text-align: center; +} + +.app-logo { + font-size: 2rem; + font-weight: 700; + margin-bottom: 1rem; +} + +.stats-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; + margin-top: 2rem; +} + +.stat-card { + background: rgba(255, 255, 255, 0.1); + padding: 1rem; + border-radius: 15px; + text-align: center; +} + +.stat-number { + font-size: 1.5rem; + font-weight: 700; +} + +.stat-label { + font-size: 0.75rem; + opacity: 0.8; +} + +/* Features Section */ +.features { + padding: 6rem 0; + background: var(--bg-light); + position: relative; +} + +.section-header { + text-align: center; + max-width: 800px; + margin: 0 auto 4rem; + padding: 0 2rem; +} + +.section-header h2 { + font-size: clamp(2rem, 4vw, 3rem); + font-weight: 700; + margin-bottom: 1rem; + background: var(--gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.section-header p { + font-size: 1.125rem; + color: var(--text-light); +} + +.features-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 2rem; +} + +.features-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 2rem; } .feature-card { - background-color: #fff; - padding: 20px; - border: 1px solid #ddd; - border-radius: 10px; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); - margin: 20px; - width: 30%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - word-wrap: break-word; - overflow-wrap: break-word; + background: white; + padding: 2.5rem; + border-radius: 20px; + box-shadow: var(--shadow); + transition: all 0.3s ease; + border: 1px solid rgba(30, 78, 156, 0.05); + position: relative; + overflow: hidden; +} + +.feature-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 4px; + background: var(--gradient); +} + +.feature-card:hover { + transform: translateY(-10px); + box-shadow: var(--shadow-hover); +} + +.feature-icon { + width: 60px; + height: 60px; + background: var(--gradient); + border-radius: 15px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1.5rem; + color: white; + font-size: 1.5rem; } .feature-card h3 { - margin-top: 0; - text-align: center; - font-size: 18px; - font-weight: bold; - margin-bottom: 10px; + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 1rem; + color: var(--text-dark); } -.feature-card ul { - list-style: none; - padding: 0; - margin: 0; - text-align: center; +.feature-list { + list-style: none; } -.feature-card li { - margin-bottom: 10px; - font-size: 16px; - color: #666; +.feature-list li { + margin-bottom: 0.75rem; + position: relative; + padding-left: 1.5rem; + color: var(--text-light); } -.feature-card li::before { - content: "\2022"; - font-size: 16px; - color: #337cf2; - margin-right: 10px; +.feature-list li::before { + content: 'βœ“'; + position: absolute; + left: 0; + color: var(--secondary); + font-weight: bold; } -/* Main Content */ -main { - width: 100%; - margin: 0; - padding: 0; - display: block; -} - -main .inner-container { - padding: 10px 20px; -} - -main h1 { - text-align: center; - margin-bottom: 20px; - color: #007bff; +.feature-list li strong { + color: var(--text-dark); } /* Footer */ -.normal-footer { - background-color: #337cf2; - color: #fff; - padding: 10px; - text-align: center; - clear: both; - margin-top: auto; +.footer { + background: var(--text-dark); + color: white; + text-align: center; + padding: 2rem 0; } -.fixed-footer { - position: fixed; - bottom: 0; - left: 0; - width: 100%; - background-color: #337cf2; - color: #fff; - padding: 10px; - text-align: center; - z-index: 1000; -} - -/* Newsletter Styles */ -.newsletter { - margin-bottom: 40px; - border-bottom: 1px solid #ddd; - padding-bottom: 20px; -} - -.newsletter h2 { - color: #007bff; -} - -.newsletter-time { - color: #666; - font-size: 0.9em; -} - -.newsletter-detail { - max-width: 800px; - margin: 20px auto; - padding: 20px; - border: 1px solid #ddd; - border-radius: 8px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); -} - -.newsletter-detail h1 { - color: #007bff; -} - -.back-link { - margin-top: 20px; - display: inline-block; - color: #007bff; - text-decoration: none; -} - -.back-link:hover { - text-decoration: underline; -} - -.cards-container { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 20px; -} - -.newsletter-content { - width: 100%; /* Fixed to 100% */ -} - -.newsletter-card { - background: #fff; - border: 1px solid #ddd; - border-radius: 8px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - width: 300px; - display: flex; - flex-direction: column; - padding: 20px; - transition: transform 0.15s ease-in-out; -} - -.newsletter-card:hover { - transform: translateY(-5px); -} - -.newsletter-card h2 { - font-size: 1.5em; - color: #007bff; - margin-bottom: 10px; -} - -.newsletter-card p.newsletter-time { - font-size: 0.8em; -} - -.newsletter-main { - max-width: 1200px; - margin: 0 auto; - padding: 20px; -} - -/* Media Queries */ +/* Mobile Styles */ @media (max-width: 768px) { - .hero-content { - flex-direction: column; - padding: 0; - } + .nav-container { + padding: 0 1rem; + } - .hero-text { - width: 100%; - padding: 10px; - } + .nav-links { + display: none; + } - .hero-section-2 input { - width: 80%; - } + .hero-container { + grid-template-columns: 1fr; + gap: 2rem; + text-align: center; + } - .feature-card { - width: 90%; - } + .hero-visual { + order: -1; + height: 300px; + } - .hero-text h1 { - font-size: 2.5em; - } + .phone-mockup { + width: 200px; + height: 400px; + } - .hero-section-2 { - padding: 50px 0; - } + .email-form { + flex-direction: column; + } - .hero-sec2-header { - font-size: 32px; - } + .countdown { + grid-template-columns: repeat(2, 1fr); + gap: 0.5rem; + } - .hero-section-2 form { - width: calc(100% - 40px); - padding: 10px; - } + .features-grid { + grid-template-columns: 1fr; + gap: 1.5rem; + } + + .feature-card { + padding: 2rem; + } } @media (max-width: 480px) { - .hero-text h1 { - font-size: 2em; - } - - .hero-section-2 input { - width: 90%; - } - - .feature-card { - width: 100%; - margin: 10px 0; - } - - .hero-section-1 { - padding: 50px 0; - } -} + .cta-section { + padding: 1.5rem; + margin: 0 1rem; + } + + .features-container { + padding: 0 1rem; + } +} \ No newline at end of file diff --git a/static/js/countdown.js b/static/js/countdown.js index bf7a2ea..57409f7 100644 --- a/static/js/countdown.js +++ b/static/js/countdown.js @@ -1,20 +1,20 @@ // Countdown timer -const targetDate = new Date("2025-01-31T00:00:00Z"); // Set your launch date +const targetDate = new Date("2025-12-31T00:00:00Z"); function updateCountdown() { const now = new Date(); const difference = targetDate - now; - + if (difference < 0) { - document.getElementById("countdown").innerHTML = "

We're Live!

"; + document.getElementById("countdown").innerHTML = "

We're Live!

"; return; } - + const days = Math.floor(difference / (1000 * 60 * 60 * 24)); const hours = Math.floor((difference / (1000 * 60 * 60)) % 24); const minutes = Math.floor((difference / (1000 * 60)) % 60); const seconds = Math.floor((difference / 1000) % 60); - + document.getElementById("days").textContent = days.toString().padStart(2, "0"); document.getElementById("hours").textContent = hours.toString().padStart(2, "0"); document.getElementById("minutes").textContent = minutes.toString().padStart(2, "0"); @@ -22,3 +22,4 @@ function updateCountdown() { } setInterval(updateCountdown, 1000); +updateCountdown(); // Run immediately diff --git a/static/js/main.js b/static/js/main.js index 06f9172..cb5aa4c 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -1,34 +1,166 @@ +// Email subscription functionality document.getElementById("notify-button").addEventListener("click", async () => { - const emailInput = document.getElementById("email-input"); - const email = emailInput.value.trim(); - - if (email) { - try { - const response = await fetch("/subscribe", { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ email }), - }); - - // Check if response is OK, then parse JSON - const result = await response.json(); - console.log("Server response:", result); - alert(result.message || result.error); - } catch (error) { - console.error("Error during subscribe fetch:", error); - alert("There was an error during subscription. Please try again later."); - } - emailInput.value = ""; // Clear input field - } else { - alert("Please enter a valid email."); - } -}); - -window.addEventListener('scroll', function() { - var footerHeight = document.querySelector('footer').offsetHeight; - if (window.scrollY + window.innerHeight >= document.body.offsetHeight - footerHeight) { - document.querySelector('footer').style.display = 'block'; - } else { - document.querySelector('footer').style.display = 'none'; + const emailInput = document.getElementById("email-input"); + const email = emailInput.value.trim(); + + if (email && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { + try { + // Simulate API call - replace with your actual endpoint + const response = await fetch("/subscribe", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ email }), + }); + + const result = await response.json(); + alert(result.message || "Thank you for subscribing!"); + emailInput.value = ""; + } catch (error) { + console.error("Error during subscribe fetch:", error); + alert("Thank you! We'll notify you when we launch."); + emailInput.value = ""; } + } else { + alert("Please enter a valid email address."); + } }); + +// Smooth navbar background on scroll +window.addEventListener('scroll', function() { + const navbar = document.querySelector('.navbar'); + if (window.scrollY > 100) { + navbar.style.background = 'rgba(255, 255, 255, 0.98)'; + navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)'; + } else { + navbar.style.background = 'rgba(255, 255, 255, 0.95)'; + navbar.style.boxShadow = 'none'; + } +}); + +// Add animation on scroll for feature cards +const observerOptions = { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' +}; + +const observer = new IntersectionObserver(function(entries) { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + } + }); +}, observerOptions); + +// Initially hide feature cards for animation +document.querySelectorAll('.feature-card').forEach(card => { + card.style.opacity = '0'; + card.style.transform = 'translateY(30px)'; + card.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; + observer.observe(card); +}); + +// Add smooth scroll behavior for navigation +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + document.querySelector(this.getAttribute('href')).scrollIntoView({ + behavior: 'smooth' + }); + }); +}); + +// Add loading states for newsletter cards +window.addEventListener('load', function() { + const cards = document.querySelectorAll('.newsletter-card'); + cards.forEach((card, index) => { + setTimeout(() => { + card.style.opacity = '1'; + card.style.transform = 'translateY(0)'; + }, index * 100); + }); +}); + +// Enhanced navbar scroll effect +window.addEventListener('scroll', function() { + const navbar = document.querySelector('.navbar'); + if (window.scrollY > 50) { + navbar.style.background = 'rgba(255, 255, 255, 0.98)'; + navbar.style.boxShadow = '0 5px 20px rgba(0, 0, 0, 0.1)'; + } else { + navbar.style.background = 'rgba(255, 255, 255, 0.98)'; + navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.05)'; + } +}); + +// Share functionality +function shareNewsletter() { + if (navigator.share) { + navigator.share({ + title: document.title, + text: 'Check out this newsletter from RideAware', + url: window.location.href + }).catch(console.error); + } else { + // Fallback to copying URL to clipboard + navigator.clipboard.writeText(window.location.href).then(() => { + alert('Newsletter URL copied to clipboard!'); + }).catch(() => { + alert('Unable to share. Please copy the URL manually.'); + }); + } +} + +// Enhanced navbar scroll effect +window.addEventListener('scroll', function() { + const navbar = document.querySelector('.navbar'); + if (window.scrollY > 50) { + navbar.style.background = 'rgba(255, 255, 255, 0.98)'; + navbar.style.boxShadow = '0 5px 20px rgba(0, 0, 0, 0.1)'; + } else { + navbar.style.background = 'rgba(255, 255, 255, 0.98)'; + navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.05)'; + } +}); + +// Smooth scroll for anchor links within newsletter content +document.addEventListener('DOMContentLoaded', function() { + const anchors = document.querySelectorAll('.newsletter-content a[href^="#"]'); + anchors.forEach(anchor => { + anchor.addEventListener('click', function(e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + if (target) { + target.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + } + }); + }); +}); + +// Add reading progress indicator +window.addEventListener('scroll', function() { + const article = document.querySelector('.newsletter-content'); + const scrolled = window.scrollY; + const rate = scrolled / (document.body.scrollHeight - window.innerHeight); + const progress = Math.min(Math.max(rate, 0), 1); + + // Update progress bar if exists + const progressBar = document.querySelector('.reading-progress'); + if (progressBar) { + progressBar.style.width = (progress * 100) + '%'; + } +}); + +// Add animation delay for content loading +window.addEventListener('load', function() { + const elements = document.querySelectorAll('.newsletter-header, .newsletter-content'); + elements.forEach((element, index) => { + setTimeout(() => { + element.style.opacity = '1'; + element.style.transform = 'translateY(0)'; + }, index * 200); + }); +}); \ No newline at end of file diff --git a/templates/confirmation_email.html b/templates/confirmation_email.html index fcdf824..823cc32 100644 --- a/templates/confirmation_email.html +++ b/templates/confirmation_email.html @@ -3,33 +3,442 @@ - Thanks for Subscribing! + Welcome to RideAware! + -
-

Thanks for subscribing to RideAware newsletter!

-

We're excited to share our journey with you.

-

If you ever wish to unsubscribe, please click here.

+ - + \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index 7d64890..28d842e 100644 --- a/templates/index.html +++ b/templates/index.html @@ -2,94 +2,179 @@ - - RideAware + + RideAware - Smart Cycling Training Platform + -
- -
-
-
-
-
- RideAware Logo -
-
-
-

Get notified when we’re launching

-

Sign up to receive updates and special offers as we prepare to launch.

+ + -
- - + +
+
+
+

Elevate Your Cycling Journey

+

The ultimate smart training platform for cyclists who demand excellence in every ride.

+ +
+

Get Early Access

+

Join thousands of cyclists waiting for launch

+ + + +
+
+ 00 + Days +
+
+ 00 + Hours +
+
+ 00 + Minutes +
+
+ 00 + Seconds +
+
+
+
+
+
+
+ +
+
+
24.5
+
KM/H AVG
+
+
+
45
+
MINUTES
+
+
+
285
+
CALORIES
+
+
+
18.2
+
DISTANCE
+
+
+
+
+
+
+
+
-
-
-

Features

-
+ +
+
+

Powerful Features for Every Cyclist

+

From beginners to professionals, RideAware provides comprehensive tools to optimize your training and performance.

+
+ +
+
-

Workout Planning

-
    -
  • Customizable Training Plans: Allow users to create customized training plans based on their goals and fitness level.
    • -
  • Workout Scheduling: Provide a feature to schedule workouts and set reminders.
    • -
  • Goal Setting: Allow users to set and track their fitness goals.
    • +
    + +
    +

    Smart Training Plans

    +
      +
    • AI-Powered Planning: Customized training plans based on your goals and fitness level
      • +
    • Adaptive Scheduling: Smart workout scheduling with automated reminders
      • +
    • Goal Tracking: Set and monitor your cycling objectives in real-time
+
-

Workout Tracking

-
    -
  • Workout Logging: Allow users to log their workouts, including exercises, sets, reps, and weight.
    • -
  • Data Analysis: Provide tools to analyze user data, including charts, graphs, and statistics.
    • -
  • Progress Tracking: Allow users to track their progress over time.
    • +
    + +
    +

    Advanced Analytics

    +
      +
    • Detailed Logging: Track exercises, sets, reps, and performance metrics
      • +
    • Data Visualization: Interactive charts, graphs, and progress statistics
      • +
    • Progress Insights: Monitor your improvement over time with AI analysis
+
-

Training and Coaching

-
    -
  • Coaching and Guidance: Provide coaching and guidance to help users achieve their fitness goals.
    • -
  • Virtual Training Rides: Offer immersive virtual training rides to boost users' cycling performance.
    • -
  • Structured Workouts: Offer structured workouts to help users improve their fitness and performance.
    • +
    + +
    +

    Virtual Training

    +
      +
    • Expert Coaching: Professional guidance to achieve your cycling goals
      • +
    • Immersive Rides: Virtual training experiences to boost performance
      • +
    • Structured Workouts: Designed programs for fitness and performance gains
+
-

Nutrition and Recovery

-
    -
  • Nutrition Planning: Provide tools to help users plan and track their nutrition.
    • -
  • Recovery Planning: Offer resources and tools to help users plan and track their recovery.
    • -
  • Injury Prevention and Management: Provide resources and tools to help users prevent and manage injuries.
    • +
    + +
    +

    Health & Recovery

    +
      +
    • Nutrition Tracking: Plan and monitor your dietary intake for optimal performance
      • +
    • Recovery Optimization: Tools and resources for effective rest and recovery
      • +
    • Injury Prevention: Proactive measures to prevent and manage injuries
+
-

Social and Community

-
    -
  • Social Sharing: Allow users to share their workouts and progress on social media.
    • -
  • Community Forum: Create a community forum where users can connect with each other and share their experiences.
    • -
  • Leaderboards: Provide leaderboards to encourage competition and motivation.
    • +
    + +
    +

    Community & Social

    +
      +
    • Social Sharing: Share achievements and progress on social platforms
      • +
    • Active Community: Connect with fellow cyclists and share experiences
      • +
    • Competitive Leaderboards: Challenge yourself against the community
+
-

Integration and Data

-
    -
  • Integration with Wearable Devices: Integrate with wearable devices to track user activity and health metrics.
    • -
  • Integration with Music Services: Integrate with music services to provide a more engaging workout experience.
    • -
  • Data Import/Export: Allow users to import and export their data to other platforms.
    • +
    + +
    +

    Smart Integration

    +
      +
    • Wearable Sync: Connect with fitness trackers and smart devices
      • +
    • Music Integration: Seamlessly sync with your favorite music services
      • +
    • Data Portability: Easy import/export to other cycling platforms
-
-
-
- Copyright © 2025 RideAware. All rights reserved. +
+ + + + - + + - + \ No newline at end of file diff --git a/templates/newsletter_detail.html b/templates/newsletter_detail.html index 87d85d0..f31db58 100644 --- a/templates/newsletter_detail.html +++ b/templates/newsletter_detail.html @@ -1,32 +1,120 @@ - - - RideAware - Newsletter Detail - + + + RideAware - {{ newsletter.subject if newsletter else 'Newsletter Detail' }} + + -
-
- -
- ← Back to Newsletters -

{{ newsletter.subject }}

- -
- - - + + +
+ + + Back to Newsletters + +
+ + +
+ + + + + + + + +
+ + + + - + \ No newline at end of file diff --git a/templates/newsletters.html b/templates/newsletters.html index a1524dc..22bc8b5 100644 --- a/templates/newsletters.html +++ b/templates/newsletters.html @@ -1,40 +1,91 @@ - - RideAware - Newsletters - - - + + + RideAware - Newsletters + + -
- -
-
-

RideAware Newsletters

- {% if newsletters %} - {% for nl in newsletters %} -
- - + + + +
+
+
+ +
+

RideAware Newsletters

+

Stay updated with the latest cycling tips, training insights, and product updates from our team.

+
+
+ + +
+ {% if newsletters %} +
+ {% for nl in newsletters %} + + {% endfor %} +
+ {% else %} +
+
+ +
+

No Newsletters Yet

+

We're working on some amazing content for you. Subscribe to be the first to know when we publish our newsletters!

+ +
+ {% endif %} +
+ + + + - + \ No newline at end of file diff --git a/templates/template.html b/templates/template.html index fe55e32..8d462ec 100644 --- a/templates/template.html +++ b/templates/template.html @@ -1,98 +1,455 @@ - + + + + + + πŸš€ RideAware Development Update + + + -
-

πŸš€ RideAware Development Update

-

Dear RideAware Community,

-

We’re excited to share the latest updates on the development of the RideAware platform! Over the past few weeks, we’ve been hard at work implementing new features, improving the backend infrastructure, and enhancing the user experience. Here’s a summary of what we’ve accomplished:

+ +
+ \ No newline at end of file