1a66ebdfc4
- 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
455 lines
No EOL
16 KiB
HTML
455 lines
No EOL
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>🚀 RideAware Development Update</title>
|
|
<!--[if mso]>
|
|
<noscript>
|
|
<xml>
|
|
<o:OfficeDocumentSettings>
|
|
<o:PixelsPerInch>96</o:PixelsPerInch>
|
|
</o:OfficeDocumentSettings>
|
|
</xml>
|
|
</noscript>
|
|
<![endif]-->
|
|
<style>
|
|
/* Reset and base styles */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
line-height: 1.6;
|
|
color: #1a1a1a;
|
|
background-color: #f8fafc;
|
|
margin: 0;
|
|
padding: 0;
|
|
-webkit-text-size-adjust: 100%;
|
|
-ms-text-size-adjust: 100%;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
mso-table-lspace: 0pt;
|
|
mso-table-rspace: 0pt;
|
|
}
|
|
|
|
img {
|
|
border: 0;
|
|
height: auto;
|
|
line-height: 100%;
|
|
outline: none;
|
|
text-decoration: none;
|
|
-ms-interpolation-mode: bicubic;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Container */
|
|
.email-container {
|
|
max-width: 650px;
|
|
margin: 0 auto;
|
|
background-color: #ffffff;
|
|
border-radius: 16px;
|
|
box-shadow: 0 10px 30px rgba(30, 78, 156, 0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.email-wrapper {
|
|
background-color: #f8fafc;
|
|
padding: 20px;
|
|
}
|
|
|
|
/* Header */
|
|
.header {
|
|
background: linear-gradient(135deg, #1e4e9c 0%, #337cf2 50%, #00d4ff 100%);
|
|
padding: 40px 30px;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.header::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100%" height="100%" fill="url(%23dots)"/></svg>');
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
color: white;
|
|
text-decoration: none;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.logo-accent {
|
|
color: #00d4ff;
|
|
}
|
|
|
|
.header h1 {
|
|
color: white;
|
|
font-size: 32px;
|
|
font-weight: 800;
|
|
margin: 20px 0 10px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.header .subtitle {
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-size: 16px;
|
|
font-weight: 300;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Content */
|
|
.content {
|
|
padding: 40px 30px;
|
|
}
|
|
|
|
.greeting {
|
|
font-size: 18px;
|
|
color: #1a1a1a;
|
|
margin-bottom: 20px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.intro {
|
|
font-size: 16px;
|
|
color: #374151;
|
|
margin-bottom: 30px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* Section styling */
|
|
.section {
|
|
margin-bottom: 35px;
|
|
background: #f8fafc;
|
|
border-radius: 12px;
|
|
padding: 25px;
|
|
border-left: 4px solid #337cf2;
|
|
}
|
|
|
|
.section h2 {
|
|
color: #1e4e9c;
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.section-icon {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.feature-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.feature-list li {
|
|
margin-bottom: 15px;
|
|
padding-left: 20px;
|
|
position: relative;
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
color: #374151;
|
|
}
|
|
|
|
.feature-list li::before {
|
|
content: '✓';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
color: #10b981;
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.feature-list li strong {
|
|
color: #1a1a1a;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.feature-list li code {
|
|
background: rgba(30, 78, 156, 0.1);
|
|
color: #1e4e9c;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-family: 'Monaco', 'Menlo', monospace;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* Next steps */
|
|
.next-steps {
|
|
background: linear-gradient(135deg, rgba(30, 78, 156, 0.05) 0%, rgba(0, 212, 255, 0.05) 100%);
|
|
border-radius: 12px;
|
|
padding: 25px;
|
|
margin: 30px 0;
|
|
border: 1px solid rgba(30, 78, 156, 0.1);
|
|
}
|
|
|
|
.next-steps h2 {
|
|
color: #1e4e9c;
|
|
font-size: 20px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.next-steps ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.next-steps li {
|
|
margin-bottom: 10px;
|
|
padding-left: 25px;
|
|
position: relative;
|
|
color: #374151;
|
|
}
|
|
|
|
.next-steps li::before {
|
|
content: '→';
|
|
position: absolute;
|
|
left: 0;
|
|
color: #337cf2;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* CTA Button */
|
|
.cta-section {
|
|
text-align: center;
|
|
margin: 35px 0;
|
|
padding: 30px;
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.cta-button {
|
|
display: inline-block;
|
|
background: linear-gradient(135deg, #1e4e9c 0%, #337cf2 100%);
|
|
color: white;
|
|
text-decoration: none;
|
|
padding: 15px 30px;
|
|
border-radius: 25px;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 5px 15px rgba(30, 78, 156, 0.3);
|
|
}
|
|
|
|
.cta-button:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(30, 78, 156, 0.4);
|
|
text-decoration: none;
|
|
color: white;
|
|
}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
background: #1a1a1a;
|
|
color: white;
|
|
padding: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.footer p {
|
|
margin: 5px 0;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.team-signature {
|
|
font-weight: 600;
|
|
color: #00d4ff;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.unsubscribe {
|
|
margin-top: 20px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.unsubscribe a {
|
|
color: #9ca3af;
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.unsubscribe a:hover {
|
|
color: #00d4ff;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Links */
|
|
a {
|
|
color: #337cf2;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
}
|
|
|
|
a:hover {
|
|
color: #1e4e9c;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Mobile responsive */
|
|
@media only screen and (max-width: 600px) {
|
|
.email-wrapper {
|
|
padding: 10px;
|
|
}
|
|
|
|
.header {
|
|
padding: 30px 20px;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.content {
|
|
padding: 30px 20px;
|
|
}
|
|
|
|
.section {
|
|
padding: 20px 15px;
|
|
}
|
|
|
|
.section h2 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.cta-section {
|
|
padding: 20px;
|
|
}
|
|
|
|
.footer {
|
|
padding: 20px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="email-wrapper">
|
|
<div class="email-container">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<div class="logo">Ride<span class="logo-accent">Aware</span></div>
|
|
<h1>🚀 Development Update</h1>
|
|
<p class="subtitle">Latest progress on your favorite cycling platform</p>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="content">
|
|
<p class="greeting">Dear RideAware Community,</p>
|
|
|
|
<p class="intro">
|
|
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:
|
|
</p>
|
|
|
|
<!-- User Authentication Section -->
|
|
<div class="section">
|
|
<h2><span class="section-icon">🔒</span> User Authentication and Security</h2>
|
|
<ul class="feature-list">
|
|
<li><strong>Signup and Login System:</strong> We've implemented a robust user authentication system that allows users to securely sign up and log in to the platform. Passwords are hashed using industry-standard algorithms (<code>pbkdf2:sha256</code>) to ensure user data is stored securely.</li>
|
|
<li><strong>Error Handling and Validation:</strong> Input validation has been added to ensure usernames and passwords meet security and usability standards. Users are notified of errors such as invalid credentials or duplicate accounts with clear and helpful messages.</li>
|
|
<li><strong>Logout Functionality:</strong> A logout feature has been added, allowing users to securely end their sessions.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- User Profiles Section -->
|
|
<div class="section">
|
|
<h2><span class="section-icon">👤</span> User Profiles</h2>
|
|
<ul class="feature-list">
|
|
<li><strong>User Profile Creation:</strong> A new <code>UserProfile</code> system has been introduced, allowing users to store additional information such as their first name, last name, bio, and profile picture.</li>
|
|
<li><strong>Automatic Profile Creation:</strong> User profiles are now automatically created when a new user account is registered, ensuring a seamless onboarding experience.</li>
|
|
<li><strong>One-to-One Relationship:</strong> The backend now supports a one-to-one relationship between users and their profiles, making it easy to manage and query user data.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Backend Improvements Section -->
|
|
<div class="section">
|
|
<h2><span class="section-icon">🛠</span> Backend Improvements</h2>
|
|
<ul class="feature-list">
|
|
<li><strong>PostgreSQL Integration:</strong> We've migrated from a local SQLite database to a robust PostgreSQL database hosted on a separate server. This change improves scalability, performance, and environment separation.</li>
|
|
<li><strong>SQLAlchemy ORM:</strong> The backend now uses SQLAlchemy for database interactions, simplifying the codebase and improving maintainability.</li>
|
|
<li><strong>Error Logging and Debugging:</strong> Enhanced logging has been added to track issues during signup, login, and database operations. This ensures that any problems can be quickly identified and resolved.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Frontend Enhancements Section -->
|
|
<div class="section">
|
|
<h2><span class="section-icon">🌐</span> Frontend Enhancements</h2>
|
|
<ul class="feature-list">
|
|
<li><strong>Vue.js Login Component:</strong> A new login component has been developed using Vue.js, providing a clean and user-friendly interface for authentication.</li>
|
|
<li><strong>Error Feedback:</strong> The frontend now displays clear error messages for invalid login attempts or missing input fields, improving the user experience.</li>
|
|
<li><strong>Environment-Specific API Configuration:</strong> The frontend now dynamically uses environment variables to configure the API base URL, making it easier to switch between development and production environments.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Newsletter System Section -->
|
|
<div class="section">
|
|
<h2><span class="section-icon">📧</span> Newsletter System</h2>
|
|
<ul class="feature-list">
|
|
<li><strong>User Notifications:</strong> A foundation has been laid for a newsletter system, allowing users to stay updated on the latest developments and announcements.</li>
|
|
<li><strong>Unsubscribe Links:</strong> Unsubscribe links are now included in all emails, ensuring compliance with best practices and user preferences.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- What's Next Section -->
|
|
<div class="next-steps">
|
|
<h2>🎯 What's Next?</h2>
|
|
<p>Looking ahead, we're planning to:</p>
|
|
<ul>
|
|
<li>Implement a password reset feature for users who forget their credentials.</li>
|
|
<li>Add two-factor authentication (2FA) for enhanced account security.</li>
|
|
<li>Build a dashboard for users to manage their profiles and preferences.</li>
|
|
<li>Continue refining the frontend design for a more polished user experience.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- CTA Section -->
|
|
<div class="cta-section">
|
|
<h2>💡 Get Involved</h2>
|
|
<p style="margin-bottom: 20px;">We're proud to share that the RideAware platform is open source! If you're a developer or enthusiast, you can view the codebase, contribute to the project, or provide feedback.</p>
|
|
<a href="https://github.com/rideaware" target="_blank" class="cta-button">
|
|
Visit GitHub Repository →
|
|
</a>
|
|
</div>
|
|
|
|
<p>Thank you for your continued support as we build RideAware into a platform that empowers cyclists and fosters a connected community. Stay tuned for more updates!</p>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="footer">
|
|
<p>Best regards,</p>
|
|
<p class="team-signature">The RideAware Development Team 🚴♂️</p>
|
|
|
|
<div class="unsubscribe">
|
|
<p>
|
|
<a href="{{ unsubscribe_link }}">Unsubscribe</a> |
|
|
<a href="mailto:support@rideaware.com">Contact Support</a>
|
|
</p>
|
|
<p style="font-size: 12px; color: #9ca3af; margin-top: 10px;">
|
|
© 2025 RideAware. All rights reserved.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |