From 97eec653fb9e3a00a63448c8a58b321142ad9baa Mon Sep 17 00:00:00 2001 From: Blake Ridgway Date: Sun, 23 Nov 2025 08:41:19 -0600 Subject: [PATCH] add development status on landing page --- scripts/build.sh | 174 +++++++++++++++ static/css/styles.css | 479 +++++++++++++++++++++++++++++++++--------- templates/index.html | 105 ++++++++- 3 files changed, 650 insertions(+), 108 deletions(-) create mode 100755 scripts/build.sh diff --git a/scripts/build.sh b/scripts/build.sh new file mode 100755 index 0000000..55956ee --- /dev/null +++ b/scripts/build.sh @@ -0,0 +1,174 @@ +#!/bin/bash + +set -e + +# Colors for output +RED='\033[0;31m' +GREEN='\033[0;32m' +YELLOW='\033[1;33m' +BLUE='\033[0;34m' +NC='\033[0m' # No Color + +# Default values +IMAGE_NAME="rideaware-landing" +IMAGE_TAG="latest" +NO_CACHE=false +RUN_CONTAINER=false +CONTAINER_NAME="rideaware-landing" + +# Help function +show_help() { + cat << EOF +Usage: $0 [OPTIONS] + +OPTIONS: + -t, --tag TAG Image tag (default: latest) + -n, --name NAME Image name (default: rideaware-landing) + -r, --run Run container after build + -c, --container NAME Container name when running (default: rideaware-landing) + --no-cache Build without cache + -h, --help Show this help message + +EXAMPLES: + $0 # Build as rideaware:latest + $0 -t v1.0 # Build as rideaware:v1.0 + $0 -t dev --run # Build and run + $0 --no-cache -t prod # Build without cache as rideaware:prod + +EOF + exit 0 +} + +# Parse arguments +while [[ $# -gt 0 ]]; do + case $1 in + -t|--tag) + IMAGE_TAG="$2" + shift 2 + ;; + -n|--name) + IMAGE_NAME="$2" + shift 2 + ;; + -r|--run) + RUN_CONTAINER=true + shift + ;; + -c|--container) + CONTAINER_NAME="$2" + shift 2 + ;; + --no-cache) + NO_CACHE=true + shift + ;; + -h|--help) + show_help + ;; + *) + echo -e "${RED}Unknown option: $1${NC}" + show_help + ;; + esac +done + +FULL_IMAGE="$IMAGE_NAME:$IMAGE_TAG" +BUILD_ARGS="" + +if [ "$NO_CACHE" = true ]; then + BUILD_ARGS="--no-cache" +fi + +# Function to stop and remove container +cleanup_container() { + local name=$1 + + if podman ps -a --format "{{.Names}}" | grep -q "^${name}\$"; then + echo -e "${YELLOW}Removing existing container: $name${NC}" + + # Stop if running + if podman ps --format "{{.Names}}" | grep -q "^${name}\$"; then + echo " Stopping container..." + podman kill "$name" 2>/dev/null || true + fi + + # Remove + echo " Removing container..." + if podman rm "$name" 2>/dev/null; then + echo -e "${GREEN} ✓ Container removed${NC}" + else + echo -e "${RED} ✗ Failed to remove container${NC}" + return 1 + fi + fi + return 0 +} + +echo -e "${BLUE}╔════════════════════════════════════════╗${NC}" +echo -e "${BLUE}║ Building Podman Image ║${NC}" +echo -e "${BLUE}╚════════════════════════════════════════╝${NC}" +echo -e "${YELLOW}Image: $FULL_IMAGE${NC}" +echo "" + +if ! podman build $BUILD_ARGS -f Containerfile -t "$FULL_IMAGE" .; then + echo -e "${RED}✗ Build failed${NC}" + exit 1 +fi + +echo -e "${GREEN}✓ Image built successfully${NC}" +echo "" + +# Show image info +echo -e "${BLUE}╔════════════════════════════════════════╗${NC}" +echo -e "${BLUE}║ Image Details ║${NC}" +echo -e "${BLUE}╚════════════════════════════════════════╝${NC}" +podman images "$IMAGE_NAME:$IMAGE_TAG" \ + --format "table {{.Repository}}:{{.Tag}}\t{{.Size}}\t{{.Created}}" +echo "" + +if [ "$RUN_CONTAINER" = true ]; then + echo -e "${BLUE}╔════════════════════════════════════════╗${NC}" + echo -e "${BLUE}║ Starting Container ║${NC}" + echo -e "${BLUE}╚════════════════════════════════════════╝${NC}" + + # Cleanup existing container + if ! cleanup_container "$CONTAINER_NAME"; then + echo -e "${RED}✗ Failed to clean up existing container${NC}" + exit 1 + fi + + echo "" + echo "Starting new container: $CONTAINER_NAME" + + if podman run -d \ + --name "$CONTAINER_NAME" \ + -p 5000:5000 \ + --env-file .env \ + "$FULL_IMAGE"; then + echo -e "${GREEN}✓ Container running: $CONTAINER_NAME${NC}" + echo "" + + # Wait for startup + sleep 2 + + echo -e "${YELLOW}Container logs:${NC}" + podman logs "$CONTAINER_NAME" + echo "" + + echo -e "${GREEN}Site available at: http://localhost:5000${NC}" + echo -e "${YELLOW}To view logs: podman logs -f $CONTAINER_NAME${NC}" + echo -e "${YELLOW}To stop: podman kill $CONTAINER_NAME${NC}" + else + echo -e "${RED}✗ Failed to start container${NC}" + exit 1 + fi +else + echo -e "${YELLOW}To run the container:${NC}" + echo " podman run -d --name $CONTAINER_NAME -p 5000:5000 --env-file .env $FULL_IMAGE" + echo "" + echo -e "${YELLOW}Or use this script with --run:${NC}" + echo " $0 -t $IMAGE_TAG --run" +fi + +echo "" +echo -e "${GREEN}✓ Done!${NC}" \ No newline at end of file diff --git a/static/css/styles.css b/static/css/styles.css index a05c93e..22f11f6 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -24,6 +24,7 @@ --shadow: 0 10px 30px rgba(30, 78, 156, 0.1); --shadow-hover: 0 20px 40px rgba(30, 78, 156, 0.15); --navbar-height: 64px; + --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } html { @@ -31,11 +32,13 @@ html { } body { - font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.7; color: var(--text-dark); overflow-x: hidden; - background: #fff; + background: var(--white); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } /* ======================= @@ -50,7 +53,7 @@ body { backdrop-filter: blur(20px); z-index: 1000; padding: 1rem 0; - transition: all 0.3s ease; + transition: var(--transition); border-bottom: 1px solid rgba(2, 6, 23, 0.04); min-height: var(--navbar-height); font-size: 1rem; @@ -58,6 +61,11 @@ body { letter-spacing: 0; } +.navbar.scrolled { + box-shadow: var(--shadow); + background: rgba(255, 255, 255, 0.98); +} + .nav-container { max-width: 1200px; margin: 0 auto; @@ -136,9 +144,9 @@ body { height: 42px; border: 1px solid rgba(2, 6, 23, 0.08); border-radius: 10px; - background: #ffffff; + background: var(--white); cursor: pointer; - transition: box-shadow 0.2s ease, transform 0.2s ease; + transition: var(--transition); } .nav-toggle:hover { @@ -190,7 +198,7 @@ body { .hero-content h1 { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; - color: #fff; + color: var(--white); margin-bottom: 1.5rem; line-height: 1.2; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); @@ -209,20 +217,55 @@ body { padding: 2rem; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } .cta-section h3 { - color: #fff; + color: var(--white); font-size: 1.5rem; margin-bottom: 0.5rem; font-weight: 600; } -.cta-section p { +.cta-section > p { color: rgba(255, 255, 255, 0.8); margin-bottom: 1.5rem; + font-size: 1rem; } +/* Beta Badge */ +.beta-badge { + display: inline-flex; + align-items: center; + gap: 8px; + background: rgba(255, 255, 255, 0.15); + border: 1px solid rgba(255, 255, 255, 0.3); + padding: 10px 16px; + border-radius: 50px; + margin-bottom: 20px; + font-size: 13px; + font-weight: 600; + color: rgba(255, 255, 255, 0.95); + text-transform: uppercase; + letter-spacing: 0.5px; + backdrop-filter: blur(10px); +} + +.badge-icon { + font-size: 16px; + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; +} + +@keyframes pulse { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0.7; + } +} + +/* Email Form */ .email-form { display: flex; gap: 1rem; @@ -234,19 +277,25 @@ body { padding: 1rem 1.5rem; border: none; border-radius: 50px; - background: rgba(255, 255, 255, 0.9); + background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); font-size: 1rem; outline: none; - transition: all 0.3s ease; + transition: var(--transition); + color: var(--text-dark); +} + +.email-input::placeholder { + color: rgba(26, 26, 26, 0.5); } .email-input:focus { - background: #fff; + background: var(--white); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3); } -.notify-btn { +.notify-btn, +.dev-btn { padding: 1rem 2rem; background: var(--white); color: var(--primary); @@ -254,38 +303,56 @@ body { border-radius: 50px; font-weight: 600; cursor: pointer; - transition: all 0.3s ease; + transition: var(--transition); white-space: nowrap; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } -.notify-btn:hover { - transform: translateY(-2px); - box-shadow: var(--shadow-hover); +.notify-btn:hover, +.dev-btn:hover { + transform: translateY(-3px); + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); } -.countdown { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 1rem; - margin-top: 1rem; +.notify-btn:active, +.dev-btn:active { + transform: translateY(-1px); } -.countdown-item { +/* Beta Notice */ +.beta-notice { + background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 152, 0, 0.1)); + border-left: 4px solid rgba(255, 193, 7, 0.6); + border-radius: 12px; + padding: 16px; + margin-top: 20px; + font-size: 14px; + color: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); +} + +.beta-notice p { + margin: 0; + line-height: 1.6; +} + +/* Dev Access Button */ +.dev-access-button { + margin-top: 25px; text-align: center; - color: #fff; } -.countdown-number { - font-size: 2rem; - font-weight: 700; - display: block; +.dev-btn { + display: inline-flex; + align-items: center; + gap: 10px; + text-decoration: none; + background: var(--white); + color: var(--primary); } -.countdown-label { - font-size: 0.875rem; - opacity: 0.8; - text-transform: uppercase; - letter-spacing: 1px; +.dev-btn-icon { + font-size: 18px; } /* Phone mockup */ @@ -332,7 +399,7 @@ body { } .app-interface { - color: #fff; + color: var(--white); text-align: center; display: flex; flex-direction: column; @@ -355,6 +422,7 @@ body { height: 32px; display: block; border-radius: 6px; + background: rgba(255, 255, 255, 0.2); } .app-logo { @@ -362,7 +430,7 @@ body { font-weight: 700; margin: 0; letter-spacing: -0.5px; - color: #ffffff; + color: var(--white); } .screen .stats-grid { @@ -386,7 +454,7 @@ body { .screen .stat-number { font-size: 1.8rem !important; font-weight: 900 !important; - color: #ffffff !important; + color: var(--white) !important; margin-bottom: 0.4rem !important; display: block !important; text-shadow: none !important; @@ -399,7 +467,7 @@ body { font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; - color: #ffffff !important; + color: var(--white) !important; display: block !important; opacity: 1 !important; } @@ -409,7 +477,7 @@ body { ======================= */ .features { padding: 6rem 0; - background: var(--bg-light); + background: var(--white); position: relative; } @@ -449,11 +517,11 @@ body { } .feature-card { - background: #fff; + background: var(--white); padding: 2.5rem; border-radius: 20px; box-shadow: var(--shadow); - transition: all 0.3s ease; + transition: var(--transition); border: 1px solid rgba(30, 78, 156, 0.05); position: relative; overflow: hidden; @@ -472,6 +540,7 @@ body { .feature-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-hover); + border-color: rgba(30, 78, 156, 0.15); } .feature-icon { @@ -483,7 +552,7 @@ body { align-items: center; justify-content: center; margin-bottom: 1.5rem; - color: #fff; + color: var(--white); font-size: 1.5rem; } @@ -543,7 +612,7 @@ body { margin: 0 auto 1rem; border-radius: 16px; background: var(--gradient); - color: #fff; + color: var(--white); display: flex; align-items: center; justify-content: center; @@ -576,17 +645,18 @@ body { } .newsletter-card { - background: #fff; + background: var(--white); 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; + transition: var(--transition); } .newsletter-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); + border-color: rgba(30, 78, 156, 0.15); } .newsletter-header { @@ -601,7 +671,7 @@ body { height: 44px; border-radius: 12px; background: var(--gradient); - color: #fff; + color: var(--white); display: flex; align-items: center; justify-content: center; @@ -616,6 +686,7 @@ body { .newsletter-info a { color: var(--text-dark); text-decoration: none; + transition: color 0.3s ease; } .newsletter-info a:hover { @@ -641,12 +712,18 @@ body { display: inline-flex; align-items: center; gap: 0.5rem; - color: #fff; + color: var(--white); background: var(--gradient); padding: 0.55rem 0.9rem; border-radius: 999px; text-decoration: none; font-weight: 600; + transition: var(--transition); +} + +.read-more-btn:hover { + transform: translateY(-2px); + box-shadow: var(--shadow); } .back-navigation { @@ -659,10 +736,14 @@ body { color: var(--secondary); text-decoration: none; font-weight: 600; + display: inline-flex; + align-items: center; + gap: 0.5rem; + transition: gap 0.3s ease; } .back-link:hover { - text-decoration: underline; + gap: 0.75rem; } .newsletter-header h1 { @@ -701,7 +782,7 @@ body { .newsletter-content { margin-top: 1.25rem; - background: #fff; + background: var(--white); border: 1px solid rgba(30, 78, 156, 0.08); border-radius: 16px; padding: 1.5rem; @@ -749,24 +830,29 @@ body { border: none; text-decoration: none; font-weight: 600; + transition: var(--transition); } .action-btn.primary { background: var(--gradient); - color: #fff; + color: var(--white); } .action-btn.secondary { - background: #f1f5f9; + background: var(--bg-light); color: var(--text-dark); } +.action-btn:hover { + transform: translateY(-2px); +} + /* ======================= Footer ======================= */ .footer { background: var(--text-dark); - color: #fff; + color: var(--white); text-align: center; padding: 2rem 0; } @@ -776,7 +862,7 @@ body { ======================= */ .contact-about-page { min-height: 100vh; - background: #fff; + background: var(--white); padding-top: var(--navbar-height); } @@ -784,7 +870,7 @@ body { background: var(--gradient); padding: 6rem 2rem; text-align: center; - color: #fff; + color: var(--white); } .hero-section h1 { @@ -843,7 +929,7 @@ body { } .contact-form { - background: #fff; + background: var(--white); border: 1px solid rgba(30, 78, 156, 0.08); border-radius: 16px; padding: 2rem; @@ -881,7 +967,9 @@ body { border-radius: 8px; font-family: inherit; font-size: 1rem; - transition: all 0.3s ease; + transition: var(--transition); + background: var(--white); + color: var(--text-dark); } .form-group input:focus, @@ -967,13 +1055,13 @@ body { align-items: center; gap: 0.5rem; background: var(--gradient); - color: #fff; + color: var(--white); padding: 1rem 2.5rem; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; - transition: all 0.3s ease; + transition: var(--transition); font-size: 1rem; } @@ -982,6 +1070,10 @@ body { box-shadow: var(--shadow-hover); } +.form-submit:active { + transform: translateY(-1px); +} + .form-submit i { font-size: 1.1rem; } @@ -994,6 +1086,18 @@ body { border-radius: 8px; margin-bottom: 1.5rem; display: none; + animation: slideDown 0.3s ease; +} + +@keyframes slideDown { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } } .form-success.show { @@ -1010,18 +1114,19 @@ body { } .info-card { - background: #fff; + background: var(--white); border: 1px solid rgba(30, 78, 156, 0.08); border-radius: 16px; padding: 2rem; text-align: center; box-shadow: var(--shadow); - transition: all 0.3s ease; + transition: var(--transition); } .info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); + border-color: rgba(30, 78, 156, 0.15); } .info-card-icon { @@ -1032,7 +1137,7 @@ body { display: flex; align-items: center; justify-content: center; - color: #fff; + color: var(--white); font-size: 1.5rem; margin: 0 auto 1rem; } @@ -1052,10 +1157,11 @@ body { color: var(--secondary); text-decoration: none; font-weight: 600; + transition: color 0.3s ease; } .info-card a:hover { - text-decoration: underline; + color: var(--primary); } .team-section { @@ -1087,11 +1193,11 @@ body { } .team-member { - background: #fff; + background: var(--white); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); - transition: all 0.3s ease; + transition: var(--transition); text-align: center; } @@ -1103,12 +1209,12 @@ body { .team-member-image { width: 100%; height: 250px; - background: linear-gradient(135deg, var(--primary), var(--secondary)); + background: var(--gradient); display: flex; align-items: center; justify-content: center; font-size: 4rem; - color: #fff; + color: var(--white); } .team-member-info { @@ -1135,7 +1241,7 @@ body { .values-section { padding: 4rem 2rem; - background: #fff; + background: var(--white); } .values-grid { @@ -1147,18 +1253,19 @@ body { } .value-card { - background: #fff; + background: var(--white); border: 1px solid rgba(30, 78, 156, 0.08); border-radius: 16px; padding: 2rem; text-align: center; box-shadow: var(--shadow); - transition: all 0.3s ease; + transition: var(--transition); } .value-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); + border-color: rgba(30, 78, 156, 0.15); } .value-icon { @@ -1169,7 +1276,7 @@ body { display: flex; align-items: center; justify-content: center; - color: #fff; + color: var(--white); font-size: 1.5rem; margin: 0 auto 1rem; } @@ -1207,15 +1314,20 @@ body { .stat-box { text-align: center; padding: 2rem; - background: #fff; + background: var(--white); border-radius: 16px; box-shadow: var(--shadow); + transition: var(--transition); +} + +.stat-box:hover { + transform: translateY(-4px); } .stat-number { font-size: 2.5rem; font-weight: 700; - color: #1e4e9c; + color: var(--primary); margin-bottom: 0.5rem; } @@ -1226,7 +1338,7 @@ body { .faq-section { padding: 4rem 2rem; - background: #fff; + background: var(--white); } .faq-container { @@ -1239,13 +1351,14 @@ body { border-radius: 12px; margin-bottom: 1rem; overflow: hidden; - background: #fff; + background: var(--white); box-shadow: var(--shadow); - transition: all 0.3s ease; + transition: var(--transition); } .faq-item.open { box-shadow: var(--shadow-hover); + border-color: rgba(30, 78, 156, 0.15); } .faq-question { @@ -1255,6 +1368,7 @@ body { justify-content: space-between; align-items: center; transition: background 0.3s ease; + user-select: none; } .faq-question:hover { @@ -1300,6 +1414,141 @@ body { justify-content: center; } +/* ======================= + Development Status Section (Improved) + ======================= */ +.development-status { + padding: 60px 20px; + background: linear-gradient(135deg, #f8fafc 0%, #f0f4f9 100%); + border-top: 1px solid rgba(51, 124, 242, 0.1); +} + +.status-container { + max-width: 1000px; + margin: 0 auto; +} + +.development-status h2 { + font-size: 32px; + color: var(--text-dark); + margin-bottom: 15px; + text-align: center; + font-weight: 700; +} + +.status-intro { + font-size: 16px; + color: var(--text-light); + text-align: center; + margin-bottom: 40px; + line-height: 1.7; + max-width: 700px; + margin-left: auto; + margin-right: auto; +} + +.status-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 20px; + margin-bottom: 40px; +} + +.status-item { + background: var(--white); + border-radius: 12px; + padding: 25px; + border: 1px solid rgba(51, 124, 242, 0.1); + position: relative; + transition: var(--transition); +} + +.status-item:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-hover); + border-color: rgba(51, 124, 242, 0.2); +} + +.status-badge { + display: inline-block; + font-size: 12px; + font-weight: 700; + padding: 6px 12px; + border-radius: 6px; + margin-bottom: 15px; + letter-spacing: 0.5px; + text-transform: uppercase; +} + +.status-item.ready .status-badge { + background: rgba(76, 175, 80, 0.15); + color: #2e7d32; +} + +.status-item.in-progress .status-badge { + background: rgba(255, 193, 7, 0.15); + color: #f57f17; +} + +.status-item.planned .status-badge { + background: rgba(51, 124, 242, 0.15); + color: var(--primary); +} + +.status-item h4 { + color: var(--text-dark); + font-size: 16px; + margin: 0 0 8px 0; + font-weight: 600; +} + +.status-item p { + color: var(--text-light); + font-size: 14px; + margin: 0; + line-height: 1.6; +} + +.feedback-cta { + background: var(--white); + border: 2px solid rgba(51, 124, 242, 0.2); + border-radius: 12px; + padding: 30px; + text-align: center; + transition: var(--transition); +} + +.feedback-cta:hover { + border-color: rgba(51, 124, 242, 0.4); + box-shadow: var(--shadow); +} + +.feedback-cta h3 { + color: var(--text-dark); + font-size: 20px; + margin: 0 0 12px 0; + font-weight: 700; +} + +.feedback-cta p { + color: var(--text-light); + font-size: 15px; + margin: 0; + line-height: 1.7; +} + +.feedback-cta a { + color: var(--secondary); + text-decoration: none; + font-weight: 600; + transition: color 0.3s ease; +} + +.feedback-cta a:hover { + color: var(--primary); + text-decoration: underline; +} + /* ======================= Article layout for newsletter detail ======================= */ @@ -1319,7 +1568,7 @@ body { } .article-meta { - background: #fff; + background: var(--white); border: 1px solid rgba(30, 78, 156, 0.08); border-radius: 16px; padding: 1rem; @@ -1330,6 +1579,7 @@ body { .article-title { font-size: 1.1rem; margin: 0 0 0.5rem 0; + font-weight: 600; } .meta-row { @@ -1359,7 +1609,7 @@ body { .toc { margin-top: 1rem; - background: #fff; + background: var(--white); border: 1px solid rgba(30, 78, 156, 0.08); border-radius: 16px; padding: 0.75rem 0.75rem 0.75rem 1rem; @@ -1385,6 +1635,7 @@ body { text-decoration: none; color: var(--text-dark); font-size: 0.95rem; + transition: color 0.3s ease; } #toc-list a:hover { @@ -1408,14 +1659,14 @@ body { height: 44px; border-radius: 12px; background: var(--gradient); - color: #fff; + color: var(--white); display: inline-flex; align-items: center; justify-content: center; } /* ======================= - Responsive + Responsive Design ======================= */ /* Tablet adjustments */ @@ -1437,24 +1688,28 @@ body { /* Mobile layout and hamburger menu */ @media (max-width: 768px) { + :root { + --navbar-height: 60px; + } + .nav-container { padding: 0 1rem; } .nav-toggle { - display: inline-flex; + display: flex; } .nav-links { position: absolute; - top: 64px; - left: 16px; - right: 16px; + top: 60px; + left: 1rem; + right: 1rem; display: none; flex-direction: column; gap: 0; list-style: none; - background: #ffffff; + background: var(--white); border: 1px solid rgba(2, 6, 23, 0.08); border-radius: 12px; box-shadow: var(--shadow); @@ -1478,12 +1733,11 @@ body { } .nav-links a:hover { - background: #f8fafc; + background: var(--bg-light); } .nav-links a::after { display: none; - content: none; } .nav-toggle.active .bar:nth-child(1) { @@ -1509,7 +1763,6 @@ body { .hero-visual { order: -1; height: 360px; - margin-top: 4px; } .phone-mockup { @@ -1517,7 +1770,7 @@ body { height: 460px; padding: 16px; border-radius: 36px; - transform: rotate(-5deg) translateY(0); + transform: rotate(-5deg); } .screen { @@ -1537,7 +1790,6 @@ body { .app-logo { font-size: 1.4rem; - margin-bottom: 0; } .screen .stats-grid { @@ -1622,15 +1874,25 @@ body { .cta-section { margin: 2rem 1rem !important; - padding: 2.5rem 1rem !important; + padding: 1.5rem !important; } - .cta-section h2 { - font-size: 1.5rem; + .cta-section h3 { + font-size: 1.25rem; } - .cta-section p { - font-size: 0.95rem; + .cta-section > p { + font-size: 0.9rem; + } + + .email-form { + flex-direction: column; + gap: 0.75rem; + } + + .email-input, + .notify-btn { + width: 100%; } .article-wrap { @@ -1639,6 +1901,18 @@ body { .article-aside { position: static; } + + .status-grid { + grid-template-columns: 1fr; + } + + .development-status h2 { + font-size: 24px; + } + + .feedback-cta { + padding: 20px; + } } /* Small phones */ @@ -1690,6 +1964,18 @@ body { .screen .stat-label { font-size: 0.6rem; } + + .hero-content h1 { + font-size: 1.75rem; + } + + .hero-content .subtitle { + font-size: 1rem; + } + + .section-header h2 { + font-size: 1.5rem; + } } /* Very narrow devices */ @@ -1734,7 +2020,7 @@ body { } } -/* Anchor scroll offset so anchors are not hidden under fixed navbar */ +/* Anchor scroll offset */ main, .section, .page-header, @@ -1742,12 +2028,11 @@ main, scroll-margin-top: calc(var(--navbar-height) + 12px); } -/* ======================= - Hard Guards for Navbar - ======================= */ +/* Hard guards for navbar */ .navbar .logo { color: var(--text-dark) !important; } + .navbar .logo .logo-accent { color: var(--accent) !important; } @@ -1757,5 +2042,5 @@ main, text-transform: none; letter-spacing: normal; line-height: normal; - font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; } \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index b6804ea..a86357e 100644 --- a/templates/index.html +++ b/templates/index.html @@ -12,8 +12,12 @@

-

Coming soon!

-

Join us while waiting for launch

+
+ ⚡ + Development Build Available +
+

Join Our Newsletter

+

Get updates on new features and development progress

+ +
+

+ Note: This is an early development build. Not all features are fully functional yet. + Your feedback helps us build better! 🚀 +

@@ -72,15 +83,15 @@ {{if .IsHome}}
-
-

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

+
+
@@ -210,5 +221,77 @@
+ + +
+
+

Current Development Status

+

+ RideAware is actively being built. This development build lets you experience the platform early + and help us refine it. Some features are still in progress. +

+ +
+
+ ✓ Live +

User Authentication

+

Sign up, login, and user profiles fully functional

+
+ +
+ ✓ Live +

Equipment Management

+

Add and manage your bikes and cycling gear

+
+ +
+ ✓ Live +

Training Zones

+

HR and power zone calculations

+
+ +
+ 🔨 In Progress +

Workout Planning

+

Structured workout builder with interval support

+
+ +
+ 🔨 In Progress +

Performance Analytics

+

Detailed performance tracking and metrics

+
+ +
+ 📋 Planned +

Device Integration

+

Sync with wearables and cycling computers

+
+ +
+ 📋 Planned +

Community Features

+

Social sharing and competitive leaderboards

+
+ +
+ 📋 Planned +

Advanced Training

+

AI-powered coaching and personalized plans

+
+
+ + +
+
{{end}} {{end}} \ No newline at end of file