From 7a31bb7e3a6deb33a6a759e74b1a174756b791e9 Mon Sep 17 00:00:00 2001 From: Cipher Vance Date: Sun, 31 Aug 2025 13:05:16 -0500 Subject: [PATCH] feat: add favicon, one stylesheet, base.html --- static/assets/32x32.png | Bin 0 -> 4720 bytes static/assets/apple-touch-icon.png | Bin 0 -> 4720 bytes static/css/styles.css | 1018 ++++++++++++++++++++-------- templates/base.html | 69 ++ templates/index.html | 346 +++++----- templates/newsletter_detail.html | 232 +++---- templates/newsletters.html | 172 ++--- 7 files changed, 1166 insertions(+), 671 deletions(-) create mode 100644 static/assets/32x32.png create mode 100644 static/assets/apple-touch-icon.png create mode 100644 templates/base.html diff --git a/static/assets/32x32.png b/static/assets/32x32.png new file mode 100644 index 0000000000000000000000000000000000000000..6ecd0e4731f838d559fa7b063a9dee3876fe5912 GIT binary patch literal 4720 zcmb_fc|4Tu*T2c0A#0J4U1i41kTDtiTGs4D#>`+C+Zg*cNY+TAP+1>FWGAu}vL&fx zD`d}}2!*_(=lMPF^KO6r-apQLUH5gJ>zwobo^w9;b;lVS>VR1ISpWb4>FH`-rH;Z! z!o)y*`UC}SQ3pC_H3KyOs7wmkGf6$##OPi%0Du^F07#_D0rgOXDgcBA0>EMd04U7? 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%0Du^F07#_D0rgOXDgcBA0>EMd04U7? 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 Yl#b)PRJnh!9etejv'); - 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 %} + +
+

© 2025 RideAware. All rights reserved.

+
+ + + + {% 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 5d1166e..754f63a 100644 --- a/templates/newsletter_detail.html +++ b/templates/newsletter_detail.html @@ -1,130 +1,114 @@ - - - - - - RideAware - {{ newsletter.subject if newsletter else 'Newsletter Detail' }} - - +{% extends "base.html" %} - - - - - - + {% 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' }}

+
+ + + + - - -
- - - - - - - - + + +
+ +{% endblock %} - -
-

© 2025 RideAware. All rights reserved.

-
- - - \ 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 ea57a57..4e9332e 100644 --- a/templates/newsletters.html +++ b/templates/newsletters.html @@ -1,99 +1,75 @@ - - - - - - RideAware - 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 %} -
- - -
-

© 2025 RideAware. All rights reserved.

-
- - - \ 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! +

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