diff --git a/static/assets/32x32.png b/static/assets/32x32.png new file mode 100644 index 0000000..6ecd0e4 Binary files /dev/null and b/static/assets/32x32.png differ diff --git a/static/assets/RideAwareLogo.svg b/static/assets/RideAwareLogo.svg deleted file mode 100644 index 4d9c3cd..0000000 --- a/static/assets/RideAwareLogo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/static/assets/apple-touch-icon.png b/static/assets/apple-touch-icon.png new file mode 100644 index 0000000..6ecd0e4 Binary files /dev/null and b/static/assets/apple-touch-icon.png differ diff --git a/static/assets/undraw_indoor-bike_9lxj.svg b/static/assets/undraw_indoor-bike_9lxj.svg deleted file mode 100644 index 3fbb967..0000000 --- a/static/assets/undraw_indoor-bike_9lxj.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/static/css/newsletter_styles.css b/static/css/newsletter_styles.css deleted file mode 100644 index 0b44ee9..0000000 --- a/static/css/newsletter_styles.css +++ /dev/null @@ -1,825 +0,0 @@ -* { - 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 2935e31..b5ca331 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -1,476 +1,902 @@ +/* ======================= + Global Reset & Variables + ======================= */ * { - margin: 0; - padding: 0; - box-sizing: border-box; + 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); + --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; + scroll-behavior: smooth; } body { - font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; - line-height: 1.7; - color: var(--text-dark); - overflow-x: hidden; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + line-height: 1.7; + color: var(--text-dark); + overflow-x: hidden; + background: #fff; } -/* Navigation */ +/* ======================= + 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; + 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; + border-bottom: 1px solid rgba(2, 6, 23, 0.04); + + /* Lock navbar typography (prevents subtle shifts) */ + font-size: 1rem; /* 16px baseline */ + line-height: 1.2; + letter-spacing: 0; } .nav-container { - max-width: 1200px; - margin: 0 auto; - padding: 0 2rem; - display: flex; - justify-content: space-between; - align-items: center; + 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; + font-size: 1.5rem; /* consistent logo size */ + font-weight: 700; + color: var(--text-dark); + text-decoration: none; + transition: transform 0.3s ease; + letter-spacing: 0.2px; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } .logo:hover { - transform: scale(1.05); + transform: scale(1.05); } .logo-accent { - color: var(--primary); + color: var(--accent); } .nav-links { - display: flex; - gap: 2rem; - list-style: none; + display: flex; + gap: 2rem; + list-style: none; } .nav-links a { - text-decoration: none; - color: var(--text-dark); - font-weight: 500; - transition: color 0.3s ease; - position: relative; + text-decoration: none; + color: var(--text-dark); + font-weight: 500; + transition: color 0.3s ease; + position: relative; } .nav-links a::after { - content: ''; - position: absolute; - bottom: -5px; - left: 0; - width: 0; - height: 2px; - background: var(--gradient); - transition: width 0.3s ease; + content: ''; + position: absolute; + bottom: -5px; + left: 0; + width: 0; + height: 2px; + background: var(--gradient); + transition: width 0.3s ease; } -.nav-links a:hover::after { - width: 100%; +.nav-links a:hover::after, +.nav-links a.active::after { + width: 100%; } -/* Hero Section */ +/* ======================= + Hero Section (Landing) + ======================= */ .hero { - min-height: 100vh; - background: var(--gradient); - display: flex; - align-items: center; - position: relative; - overflow: hidden; + min-height: 100vh; + background: var(--gradient); + display: flex; + align-items: center; + position: relative; + overflow: hidden; } .hero::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: url('data:image/svg+xml,'); - opacity: 0.3; + content: ''; + position: absolute; + inset: 0; + background: url('data:image/svg+xml,'); + opacity: 0.3; } .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; + 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-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); + font-size: clamp(2.5rem, 5vw, 4rem); + font-weight: 800; + color: #fff; + margin-bottom: 1.5rem; + line-height: 1.2; + text-shadow: 0 2px 20px 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; + font-size: 1.25rem; + color: rgba(255, 255, 255, 0.9); + margin-bottom: 2rem; + font-weight: 300; } .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); + 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); } .cta-section h3 { - color: white; - font-size: 1.5rem; - margin-bottom: 0.5rem; - font-weight: 600; + color: #fff; + font-size: 1.5rem; + margin-bottom: 0.5rem; + font-weight: 600; } .cta-section p { - color: rgba(255, 255, 255, 0.8); - margin-bottom: 1.5rem; + color: rgba(255, 255, 255, 0.8); + margin-bottom: 1.5rem; } .email-form { - display: flex; - gap: 1rem; - margin-bottom: 1.5rem; + 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; + 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); + background: #fff; + 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; + 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); + transform: translateY(-2px); + box-shadow: var(--shadow-hover); } -/* Countdown Timer */ +/* Countdown (if used) */ .countdown { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 1rem; - margin-top: 1rem; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1rem; + margin-top: 1rem; } .countdown-item { - text-align: center; - color: white; + text-align: center; + color: #fff; } .countdown-number { - font-size: 2rem; - font-weight: 700; - display: block; + font-size: 2rem; + font-weight: 700; + display: block; } .countdown-label { - font-size: 0.875rem; - opacity: 0.8; - text-transform: uppercase; - letter-spacing: 1px; + font-size: 0.875rem; + opacity: 0.8; + text-transform: uppercase; + letter-spacing: 1px; } +/* Phone mockup */ .hero-visual { - position: relative; - height: 500px; - display: flex; - align-items: center; - justify-content: center; + 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; + 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); } + 0%, + 100% { + transform: rotate(-5deg) translateY(0); + } + 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; + 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; + color: #fff; + text-align: center; } .app-logo { - font-size: 2rem; - font-weight: 700; - margin-bottom: 1rem; + font-size: 2rem; + font-weight: 700; + margin-bottom: 1rem; } .stats-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1rem; - margin-top: 2rem; + 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; + background: rgba(255, 255, 255, 0.1); + padding: 1rem; + border-radius: 15px; + text-align: center; } .stat-number { - font-size: 1.5rem; - font-weight: 700; + font-size: 1.5rem; + font-weight: 700; } .stat-label { - font-size: 0.75rem; - opacity: 0.8; + font-size: 0.75rem; + opacity: 0.8; } -/* Features Section */ +/* ======================= + Features Section + ======================= */ .features { - padding: 6rem 0; - background: var(--bg-light); - position: relative; + padding: 6rem 0; + background: var(--bg-light); + position: relative; } .section-header { - text-align: center; - max-width: 800px; - margin: 0 auto 4rem; - padding: 0 2rem; + 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; + font-size: clamp(2rem, 4vw, 3rem); + font-weight: 700; + margin-bottom: 1rem; + background: var(--gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + color: transparent; } .section-header p { - font-size: 1.125rem; - color: var(--text-light); + font-size: 1.125rem; + color: var(--text-light); } .features-container { - max-width: 1200px; - margin: 0 auto; - padding: 0 2rem; + max-width: 1200px; + margin: 0 auto; + padding: 0 2rem; } .features-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); - gap: 2rem; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 2rem; } .feature-card { - 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; + background: #fff; + 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); + 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); + 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; + width: 60px; + height: 60px; + background: var(--gradient); + border-radius: 15px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1.5rem; + color: #fff; + font-size: 1.5rem; } .feature-card h3 { - font-size: 1.5rem; - font-weight: 600; - margin-bottom: 1rem; - color: var(--text-dark); + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 1rem; + color: var(--text-dark); } .feature-list { - list-style: none; + list-style: none; } .feature-list li { - margin-bottom: 0.75rem; - position: relative; - padding-left: 1.5rem; - color: var(--text-light); + margin-bottom: 0.75rem; + position: relative; + padding-left: 1.5rem; + color: var(--text-light); } .feature-list li::before { - content: '✓'; - position: absolute; - left: 0; - color: var(--secondary); - font-weight: bold; + content: '✓'; + position: absolute; + left: 0; + color: var(--secondary); + font-weight: bold; } .feature-list li strong { - color: var(--text-dark); + color: var(--text-dark); } -/* Footer */ +/* ======================= + Newsletter Pages (List & Detail) + ======================= */ + +/* Page header banner */ +.page-header { + background: linear-gradient( + 180deg, + rgba(30, 78, 156, 0.06), + rgba(0, 212, 255, 0.06) + ); + padding: 8rem 0 3rem; /* account for fixed navbar */ + border-bottom: 1px solid rgba(30, 78, 156, 0.08); +} + +.page-header-content { + max-width: 1000px; + margin: 0 auto; + padding: 0 2rem; + text-align: center; +} + +.page-header .header-icon { + width: 64px; + height: 64px; + margin: 0 auto 1rem; + border-radius: 16px; + background: var(--gradient); + color: #fff; + display: flex; + align-items: center; + justify-content: center; + box-shadow: var(--shadow); + font-size: 1.5rem; +} + +.page-header h1 { + font-size: clamp(2rem, 4vw, 2.5rem); + font-weight: 700; + color: var(--text-dark); + margin-bottom: 0.5rem; +} + +.page-header p { + color: var(--text-light); + font-size: 1.05rem; +} + +/* Main content container */ +.main-content { + max-width: 1100px; + margin: 0 auto; + padding: 2rem 2rem 4rem; +} + +/* Grid of newsletter cards */ +.newsletters-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + gap: 1.5rem; +} + +/* Individual card */ +.newsletter-card { + background: #fff; + border: 1px solid rgba(30, 78, 156, 0.08); + border-radius: 16px; + padding: 1.25rem 1.25rem 1rem; + box-shadow: var(--shadow); + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.newsletter-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-hover); +} + +.newsletter-header { + display: flex; + align-items: center; + gap: 0.75rem; + margin-bottom: 0.75rem; +} + +.newsletter-icon { + width: 44px; + height: 44px; + border-radius: 12px; + background: var(--gradient); + color: #fff; + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 44px; +} + +.newsletter-info h2 { + font-size: 1.1rem; + margin: 0; +} + +.newsletter-info a { + color: var(--text-dark); + text-decoration: none; +} + +.newsletter-info a:hover { + color: var(--secondary); +} + +/* Meta/date and excerpt */ +.newsletter-date { + display: flex; + align-items: center; + gap: 0.5rem; + color: var(--text-light); + font-size: 0.9rem; + margin-bottom: 0.5rem; +} + +.newsletter-excerpt { + color: var(--text-dark); + opacity: 0.9; + margin-bottom: 0.75rem; +} + +/* Read more button */ +.read-more-btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + color: #fff; + background: var(--gradient); + padding: 0.55rem 0.9rem; + border-radius: 999px; + text-decoration: none; + font-weight: 600; +} + +/* Detail page nav back link */ +.back-navigation { + max-width: 1100px; + margin: 6rem auto 0; /* space for fixed navbar */ + padding: 0 2rem; +} + +.back-link { + color: var(--secondary); + text-decoration: none; + font-weight: 600; +} + +.back-link:hover { + text-decoration: underline; +} + +/* Detail header, meta, tags */ +.newsletter-header h1 { + margin-top: 0.5rem; +} + +.newsletter-meta { + display: flex; + flex-wrap: wrap; + gap: 0.75rem 1.25rem; + margin-top: 0.5rem; + color: var(--text-light); +} + +.newsletter-meta .meta-item { + display: inline-flex; + align-items: center; + gap: 0.4rem; +} + +.newsletter-tags { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-top: 0.75rem; +} + +.newsletter-tags .tag { + font-size: 0.85rem; + padding: 0.3rem 0.6rem; + background: rgba(51, 124, 242, 0.1); + color: var(--secondary); + border: 1px solid rgba(51, 124, 242, 0.2); + border-radius: 999px; +} + +/* Detail content */ +.newsletter-content { + margin-top: 1.25rem; + background: #fff; + border: 1px solid rgba(30, 78, 156, 0.08); + border-radius: 16px; + padding: 1.5rem; + box-shadow: var(--shadow); +} + +.newsletter-content h2, +.newsletter-content h3 { + margin-top: 1rem; + margin-bottom: 0.5rem; +} + +.newsletter-content p, +.newsletter-content li { + color: var(--text-dark); +} + +.newsletter-content ul { + padding-left: 1.25rem; +} + +.newsletter-content blockquote { + margin: 1rem 0; + padding: 1rem 1.25rem; + background: rgba(0, 212, 255, 0.08); + border-left: 4px solid var(--accent); + border-radius: 8px; + color: var(--text-dark); +} + +/* Actions */ +.newsletter-actions { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + margin-top: 1rem; +} + +.action-btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + border-radius: 10px; + padding: 0.6rem 1rem; + cursor: pointer; + border: none; + text-decoration: none; + font-weight: 600; +} + +.action-btn.primary { + background: var(--gradient); + color: #fff; +} + +.action-btn.secondary { + background: #f1f5f9; + color: var(--text-dark); +} + +/* ======================= + Footer + ======================= */ .footer { - background: var(--text-dark); - color: white; - text-align: center; - padding: 2rem 0; + background: var(--text-dark); + color: #fff; + text-align: center; + padding: 2rem 0; } -/* Mobile Styles */ +/* ======================= + Responsive + ======================= */ @media (max-width: 768px) { - .nav-container { - padding: 0 1rem; - } + .nav-container { + padding: 0 1rem; + } - .nav-links { - display: none; - } + .nav-links { + display: none; + } - .hero-container { - grid-template-columns: 1fr; - gap: 2rem; - text-align: center; - } + .hero-container { + grid-template-columns: 1fr; + gap: 2rem; + text-align: center; + } - .hero-visual { - order: -1; - height: 300px; - } + .hero-visual { + order: -1; + height: 300px; + } - .phone-mockup { - width: 200px; - height: 400px; - } + .phone-mockup { + width: 200px; + height: 400px; + } - .email-form { - flex-direction: column; - } + .email-form { + flex-direction: column; + } - .countdown { - grid-template-columns: repeat(2, 1fr); - gap: 0.5rem; - } + .countdown { + grid-template-columns: repeat(2, 1fr); + gap: 0.5rem; + } - .features-grid { - grid-template-columns: 1fr; - gap: 1.5rem; - } + .features-grid { + grid-template-columns: 1fr; + gap: 1.5rem; + } - .feature-card { - padding: 2rem; - } + .feature-card { + padding: 2rem; + } + + /* Newsletter pages */ + .page-header { + padding: 7rem 0 2rem; + } + + .main-content { + padding: 1.25rem 1rem 3rem; + } } @media (max-width: 480px) { - .cta-section { - padding: 1.5rem; - margin: 0 1rem; - } - - .features-container { - padding: 0 1rem; - } + .cta-section { + padding: 1.5rem; + margin: 0 1rem; + } + + .features-container { + padding: 0 1rem; + } +} + +/* ======================= + Hard Guards for Navbar + ======================= */ + +/* Ensure navbar logo colors are always visible on white background */ +.navbar .logo { + color: var(--text-dark) !important; +} +.navbar .logo .logo-accent { + color: var(--accent) !important; +} + +/* Prevent content typography from leaking into the navbar */ +.navbar, +.navbar * { + text-transform: none; + letter-spacing: normal; + line-height: normal; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; +} + +/* Article layout for newsletter detail */ +.article-wrap { + max-width: 1200px; + margin: 6rem auto 3rem; + padding: 0 2rem; + display: grid; + grid-template-columns: 280px 1fr; + gap: 2rem; +} + +.article-aside { + position: sticky; + top: 84px; /* below fixed navbar */ + align-self: start; +} + +.article-meta { + background: #fff; + border: 1px solid rgba(30, 78, 156, 0.08); + border-radius: 16px; + padding: 1rem; + box-shadow: var(--shadow); + margin-top: 0.75rem; +} + +.article-title { + font-size: 1.1rem; + margin: 0 0 0.5rem 0; +} + +.meta-row { + display: flex; + align-items: center; + gap: 0.5rem; + color: var(--text-light); + font-size: 0.95rem; + margin: 0.25rem 0; +} + +.article-tags { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; + margin-top: 0.5rem; +} +.article-tags .tag { + font-size: 0.8rem; + padding: 0.25rem 0.5rem; + background: rgba(51, 124, 242, 0.08); + color: var(--secondary); + border: 1px solid rgba(51, 124, 242, 0.2); + border-radius: 999px; +} + +.toc { + margin-top: 1rem; + background: #fff; + border: 1px solid rgba(30, 78, 156, 0.08); + border-radius: 16px; + padding: 0.75rem 0.75rem 0.75rem 1rem; + box-shadow: var(--shadow); +} +.toc-title { + font-weight: 700; + margin-bottom: 0.5rem; + color: var(--text-dark); +} +#toc-list { + list-style: none; + padding-left: 0; +} +#toc-list li { + margin: 0.25rem 0; +} +#toc-list a { + text-decoration: none; + color: var(--text-dark); + font-size: 0.95rem; +} +#toc-list a:hover { color: var(--secondary); } +.toc-h3 { margin-left: 0.75rem; opacity: 0.9; } + +.article-main .article-hero { + display: flex; + align-items: center; + gap: 0.75rem; + margin-bottom: 0.75rem; +} +.article-hero .newsletter-icon { + width: 44px; + height: 44px; + border-radius: 12px; + background: var(--gradient); + color: #fff; + display: inline-flex; + align-items: center; + justify-content: center; +} + +@media (max-width: 992px) { + .article-wrap { + grid-template-columns: 1fr; + } + .article-aside { + position: static; + } } \ No newline at end of file diff --git a/templates/base.html b/templates/base.html new file mode 100644 index 0000000..dc975dc --- /dev/null +++ b/templates/base.html @@ -0,0 +1,69 @@ + + + + + + {% block title %}RideAware{% endblock %} + + + + + + + + + + + + {% block extra_head %}{% endblock %} + + + + + {% block content %}{% endblock %} + + + + + + {% block extra_scripts %}{% endblock %} + + \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index ac5110b..d996c65 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,164 +1,204 @@ - - - - - - RideAware - Smart Cycling Training Platform - - - + +{% extends "base.html" %} - - - - + - -
-
-
-

Elevate Your Cycling Journey

-

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

- -
-

Coming soon!

-

Join us while waiting for launch

- - -
-
- -
-
-
-
- -
-
-
24.5
-
KM/H AVG
-
-
-
45
-
MINUTES
-
-
-
285
-
CALORIES
-
-
-
18.2
-
DISTANCE
-
-
-
-
+
+
+
+
+ +
+
+
24.5
+
KM/H AVG
+
+
45
+
MINUTES
+
+
+
285
+
CALORIES
+
+
+
18.2
+
DISTANCE
+
+
+
-
+ + + - -
-
-

Powerful Features for Every Cyclist

-

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

+ +
+
+

Powerful Features for Every Cyclist

+

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

+
+ +
+
+
+
+ +
+

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 +
    • +
-
-
-
-
- -
-

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
    • -
-
- -
-
- -
-

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
    • -
-
- -
-
- -
-

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
    • -
-
- -
-
- -
-

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
    • -
-
- -
-
- -
-

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
    • -
-
- -
-
- -
-

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
    • -
-
-
+
+
+ +
+

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 +
    • +
-
- -
-

© 2025 RideAware. All rights reserved.

-
- - - \ No newline at end of file +
+
+ +
+

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 +
    • +
+
+ +
+
+ +
+

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 +
    • +
+
+ +
+
+ +
+

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 +
    • +
+
+ +
+
+ +
+

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 +
    • +
+
+
+ +
+{% endblock %} \ No newline at end of file diff --git a/templates/newsletter_detail.html b/templates/newsletter_detail.html index 1a5759a..754f63a 100644 --- a/templates/newsletter_detail.html +++ b/templates/newsletter_detail.html @@ -1,125 +1,114 @@ - - - - - - RideAware - {{ newsletter.subject if newsletter else 'Newsletter Detail' }} - - +{% extends "base.html" %} - +{% block title %} + RideAware - {{ newsletter.subject if newsletter else 'Newsletter Detail' }} +{% endblock %} - - - - + {% if newsletter and newsletter.get('reading_time') %} +
+ + {{ newsletter.reading_time }} min read +
+ {% endif %} + {% if newsletter and newsletter.get('author') %} +
+ + {{ newsletter.author }} +
+ {% endif %} - -
- - - Back to Newsletters + {% if newsletter and newsletter.get('tags') %} +
+ {% for tag in newsletter.tags %} + {{ tag }} + {% endfor %} +
+ {% endif %} +
+ + + + +
+
+ +

{{ newsletter.subject if newsletter else 'Newsletter Title' }}

+
+ + + +
+ + + View All Newsletters -
- - -
- - - - - - - - + + +
+ +{% endblock %} - - - - - \ No newline at end of file +{% block extra_scripts %} + +{% endblock %} \ No newline at end of file diff --git a/templates/newsletters.html b/templates/newsletters.html index 22b195b..4e9332e 100644 --- a/templates/newsletters.html +++ b/templates/newsletters.html @@ -1,94 +1,75 @@ - - - - - - RideAware - Newsletters - - +{% extends "base.html" %} - - - - - - -
-
-
- -
-

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 +

No Newsletters Yet

+

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

+ + + Subscribe for Updates + + + {% endif %} +
+{% endblock %} \ No newline at end of file