Ctrl K
ComunidadGuías…

site/index.html

Rama main · réplica de lectura del repositorio original.

Archivo original ↗Preguntar a KiBot
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- from goatcounter -->
    <script data-goatcounter="https://jcz.goatcounter.com/count"
        async src="//gc.zgo.at/count.js"></script>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ActaLog - Track Your CrossFit Journey</title>
    <meta name="description" content="The workout tracker built for CrossFit athletes. Log WODs, track PRs, visualize your progress. Available on any device.">

    <!-- Open Graph -->
    <meta property="og:title" content="ActaLog - Track Your CrossFit Journey">
    <meta property="og:description" content="The workout tracker built for CrossFit athletes. Log WODs, track PRs, visualize your progress.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://johnzastrow.github.io/actalog/">
    <meta property="og:image" content="assets/hero-screenshot.png">
    <meta name="twitter:card" content="summary_large_image">

    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="assets/logo.svg">
    <link rel="alternate icon" href="assets/logo.svg">
    <link rel="mask-icon" href="assets/logo.svg" color="#00bcd4">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="styles.css">

    <!-- JSON-LD Structured Data -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "SoftwareApplication",
        "name": "ActaLog",
        "applicationCategory": "HealthApplication",
        "operatingSystem": "Web, iOS, Android (PWA)",
        "offers": {
            "@type": "Offer",
            "price": "0",
            "priceCurrency": "USD"
        },
        "description": "Mobile-first CrossFit workout tracker. Track PRs, analyze performance, log WODs.",
        "url": "https://johnzastrow.github.io/actalog/",
        "softwareVersion": "1.2.4",
        "keywords": ["crossfit", "workout tracker", "WOD", "fitness", "PWA", "PR tracking"]
    }
    </script>
</head>
<body>
    <!-- Noise Texture Overlay -->
    <div class="noise-overlay"></div>

    <!-- Navigation -->
    <nav class="nav">
        <div class="nav-container">
            <div class="nav-logo">
                <span class="logo-text">ACTALOG</span>
            </div>
            <div class="nav-links">
                <a href="features.html" class="nav-link">FOR ADMINS</a>
                <a href="tech.html" class="nav-link">DEVELOPERS</a>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-container">
            <div class="hero-content">
                <div class="hero-badge">YOUR FITNESS JOURNEY</div>
                <h1 class="hero-title">
                    <span class="hero-title-line">TRACK.</span>
                    <span class="hero-title-line">ANALYZE.</span>
                    <span class="hero-title-line glow">DOMINATE.</span>
                </h1>
                <p class="hero-subtitle">The workout tracker built for CrossFit athletes. Log your WODs, crush PRs, and watch your progress unfold.</p>

                <!-- Animated Metrics -->
                <div class="hero-metrics">
                    <div class="metric">
                        <div class="metric-value" data-target="314">0</div>
                        <div class="metric-label">BENCHMARK WODS</div>
                    </div>
                    <div class="metric-divider"></div>
                    <div class="metric">
                        <div class="metric-value" data-target="182">0</div>
                        <div class="metric-label">MOVEMENTS</div>
                    </div>
                    <div class="metric-divider"></div>
                    <div class="metric">
                        <div class="metric-value" data-target="7">0</div>
                        <div class="metric-label">THEMES</div>
                    </div>
                </div>

                <!-- CTAs -->
                <div class="hero-ctas">
                    <a href="#start" class="btn btn-primary">
                        <span>GET STARTED</span>
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M5 12h14M12 5l7 7-7 7"/>
                        </svg>
                    </a>
                    <a href="#screenshots" class="btn btn-secondary">
                        <span>SEE IT IN ACTION</span>
                    </a>
                </div>
            </div>

            <!-- Hero Visual -->
            <div class="hero-visual">
                <div class="mockup-container">
                    <div class="mockup-phone">
                        <div class="mockup-screen">
                            <img src="assets/hero-screenshot.svg" alt="ActaLog Dashboard" style="width: 100%; height: 100%; object-fit: cover; border-radius: 24px;">
                        </div>
                    </div>
                    <div class="mockup-glow"></div>
                </div>
            </div>
        </div>

        <!-- Diagonal Divider -->
        <div class="diagonal-divider"></div>
    </section>

    <!-- Features Section -->
    <section class="features" id="features">
        <div class="features-container">
            <div class="section-header">
                <h2 class="section-title">FOR ATHLETES</h2>
                <div class="section-line"></div>
            </div>

            <!-- PR Detection Feature - Expanded -->
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-bottom: 4rem;">
                <div>
                    <h3 style="color: #ffc107; font-family: 'Bebas Neue', sans-serif; font-size: 2rem; margin-bottom: 1rem;">AUTOMATIC PR DETECTION</h3>
                    <p style="color: #ccc; font-size: 1.1rem; line-height: 1.8; margin-bottom: 1.5rem;">
                        Every time you log a workout, ActaLog analyzes your performance across multiple metrics. Hit a new max weight? Faster time? More reps? We catch it automatically and celebrate with you.
                    </p>
                    <p style="color: #888; font-size: 1rem; line-height: 1.7; margin-bottom: 1rem;">
                        PR detection works across weight lifted, time to completion, total reps, and rounds completed. When you beat your previous best, you'll see a notification instantly &mdash; and your fellow athletes can like your achievement to cheer you on.
                    </p>
                    <div style="display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem;">
                        <span style="background: rgba(255, 193, 7, 0.2); color: #ffc107; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.9rem;">Weight PRs</span>
                        <span style="background: rgba(255, 193, 7, 0.2); color: #ffc107; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.9rem;">Time PRs</span>
                        <span style="background: rgba(255, 193, 7, 0.2); color: #ffc107; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.9rem;">Rep PRs</span>
                        <span style="background: rgba(255, 193, 7, 0.2); color: #ffc107; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.9rem;">Round PRs</span>
                    </div>
                </div>
                <div style="background: rgba(15, 29, 46, 0.8); border-radius: 16px; padding: 2rem; border: 1px solid rgba(255, 193, 7, 0.3);">
                    <div style="text-align: center; padding: 1rem;">
                        <div style="font-size: 4rem; color: #ffc107; margin-bottom: 0.5rem;">PR!</div>
                        <div style="color: #e0e0e0; font-size: 1.25rem; margin-bottom: 1rem;">Back Squat</div>
                        <div style="color: #00bcd4; font-size: 2.5rem; font-weight: bold;">315 lbs</div>
                        <div style="color: #666; margin-top: 0.5rem;">Previous: 305 lbs (+10 lbs)</div>
                    </div>
                </div>
            </div>

            <!-- Estimated 1RM Feature -->
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-bottom: 4rem;">
                <div style="background: rgba(15, 29, 46, 0.8); border-radius: 16px; padding: 2rem; border: 1px solid rgba(0, 188, 212, 0.2);">
                    <div style="text-align: center;">
                        <div style="color: #666; font-size: 0.9rem; margin-bottom: 0.5rem;">ESTIMATED</div>
                        <div style="color: #00bcd4; font-size: 3rem; font-weight: bold;">1RM</div>
                        <div style="color: #e0e0e0; font-size: 2rem; margin: 1rem 0;">365 lbs</div>
                        <div style="color: #888; font-size: 0.9rem;">Based on: 315 lbs x 5 reps</div>
                        <div style="color: #666; font-size: 0.85rem; margin-top: 1rem; font-style: italic;">Using Brzycki Formula</div>
                    </div>
                </div>
                <div>
                    <h3 style="color: #00bcd4; font-family: 'Bebas Neue', sans-serif; font-size: 2rem; margin-bottom: 1rem;">ESTIMATED 1RM CALCULATIONS</h3>
                    <p style="color: #ccc; font-size: 1.1rem; line-height: 1.8; margin-bottom: 1.5rem;">
                        Not every day is a max-out day &mdash; but you still want to know how you're progressing. ActaLog calculates your estimated one-rep max using the industry-standard Brzycki formula based on your working sets.
                    </p>
                    <p style="color: #888; font-size: 1rem; line-height: 1.7;">
                        Log a set of 225 lbs for 8 reps, and we'll tell you your estimated 1RM is around 281 lbs. Track these estimates over time to see your true strength progression without the wear and tear of constant max attempts. Your joints will thank you.
                    </p>
                </div>
            </div>

            <!-- Consistency Tracking Feature -->
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-bottom: 4rem;">
                <div>
                    <h3 style="color: #00e676; font-family: 'Bebas Neue', sans-serif; font-size: 2rem; margin-bottom: 1rem;">BUILD CONSISTENCY</h3>
                    <p style="color: #ccc; font-size: 1.1rem; line-height: 1.8; margin-bottom: 1.5rem;">
                        The best program is the one you actually follow. ActaLog tracks your training streaks, weekly frequency, and attendance patterns to help you build the habit of showing up.
                    </p>
                    <p style="color: #888; font-size: 1rem; line-height: 1.7; margin-bottom: 1rem;">
                        See your current streak displayed prominently on your dashboard. Watch it grow from days to weeks to months. The calendar view shows your training dots at a glance &mdash; gaps become obvious, consistency becomes visual proof of your dedication.
                    </p>
                    <p style="color: #888; font-size: 1rem; line-height: 1.7;">
                        Monthly summaries show your total workouts, workout frequency, and how you compare to previous months. Data-driven motivation to keep you coming back.
                    </p>
                </div>
                <div style="background: rgba(15, 29, 46, 0.8); border-radius: 16px; padding: 2rem; border: 1px solid rgba(0, 230, 118, 0.2);">
                    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; text-align: center;">
                        <div>
                            <div style="color: #00e676; font-size: 2.5rem; font-weight: bold;">23</div>
                            <div style="color: #666; font-size: 0.9rem;">Day Streak</div>
                        </div>
                        <div>
                            <div style="color: #00bcd4; font-size: 2.5rem; font-weight: bold;">4.2</div>
                            <div style="color: #666; font-size: 0.9rem;">Avg/Week</div>
                        </div>
                        <div>
                            <div style="color: #ffc107; font-size: 2.5rem; font-weight: bold;">18</div>
                            <div style="color: #666; font-size: 0.9rem;">This Month</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Pre-loaded Content Feature -->
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-bottom: 4rem;">
                <div style="background: rgba(15, 29, 46, 0.8); border-radius: 16px; padding: 2rem; border: 1px solid rgba(0, 188, 212, 0.2);">
                    <div style="display: flex; justify-content: space-around; text-align: center;">
                        <div>
                            <div style="color: #00bcd4; font-size: 3rem; font-weight: bold;">314</div>
                            <div style="color: #888; font-size: 0.9rem;">Benchmark WODs</div>
                            <div style="color: #666; font-size: 0.8rem; margin-top: 0.25rem;">Girls, Heroes, Open</div>
                        </div>
                        <div style="width: 1px; background: rgba(0, 188, 212, 0.3);"></div>
                        <div>
                            <div style="color: #ffc107; font-size: 3rem; font-weight: bold;">182</div>
                            <div style="color: #888; font-size: 0.9rem;">Movements</div>
                            <div style="color: #666; font-size: 0.8rem; margin-top: 0.25rem;">Lifts, Cardio, Gymnastics</div>
                        </div>
                    </div>
                </div>
                <div>
                    <h3 style="color: #00bcd4; font-family: 'Bebas Neue', sans-serif; font-size: 2rem; margin-bottom: 1rem;">PRE-LOADED & READY</h3>
                    <p style="color: #ccc; font-size: 1.1rem; line-height: 1.8; margin-bottom: 1.5rem;">
                        ActaLog comes loaded with 314 benchmark WODs and 182 movements right out of the box. Fran, Grace, Murph, all the Girls, the Heroes, and CrossFit Open workouts from multiple years &mdash; they're all here and ready to log.
                    </p>
                    <p style="color: #888; font-size: 1rem; line-height: 1.7;">
                        The movement library includes Olympic lifts like the snatch and clean &amp; jerk, powerlifting staples like squat and deadlift, gymnastics movements like muscle-ups and handstand walks, and cardio options from rowing to running. Each movement is categorized and searchable, so you find what you need instantly.
                    </p>
                </div>
            </div>

            <!-- Create Your Own Feature -->
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-bottom: 2rem;">
                <div>
                    <h3 style="color: #ff6b35; font-family: 'Bebas Neue', sans-serif; font-size: 2rem; margin-bottom: 1rem;">CREATE YOUR OWN</h3>
                    <p style="color: #ccc; font-size: 1.1rem; line-height: 1.8; margin-bottom: 1.5rem;">
                        The pre-loaded library is just the starting point. Create your own WODs, add custom movements, and build workout templates that match exactly how you train.
                    </p>
                    <p style="color: #888; font-size: 1rem; line-height: 1.7; margin-bottom: 1rem;">
                        Invented a new chipper? Add it as a template. Your box has a signature workout? Create it once, log it forever. Custom movements for specialty equipment or unique exercises? Add them to your library.
                    </p>
                    <p style="color: #888; font-size: 1rem; line-height: 1.7;">
                        Coaches and admins can create templates for the whole community. Program your daily WOD once, and every member can log it with a single tap. No more copying workout details from the whiteboard &mdash; just tap and go.
                    </p>
                </div>
                <div style="background: rgba(15, 29, 46, 0.8); border-radius: 16px; padding: 2rem; border: 1px solid rgba(255, 107, 53, 0.2);">
                    <div style="margin-bottom: 1.5rem;">
                        <div style="color: #ff6b35; font-size: 0.9rem; margin-bottom: 0.5rem;">CUSTOM WOD</div>
                        <div style="color: #e0e0e0; font-size: 1.5rem; font-weight: bold;">"Box Birthday Bash"</div>
                    </div>
                    <div style="color: #888; font-size: 0.95rem; line-height: 1.6;">
                        <div style="margin-bottom: 0.5rem;">For Time:</div>
                        <div style="padding-left: 1rem;">
                            <div>21-15-9</div>
                            <div style="color: #ccc;">Thrusters (95/65)</div>
                            <div style="color: #ccc;">Box Jumps (24/20)</div>
                            <div style="color: #ccc;">Toes to Bar</div>
                        </div>
                    </div>
                    <div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 107, 53, 0.2); color: #666; font-size: 0.85rem;">
                        Created by Coach Mike &bull; Used 47 times
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Screenshots Section -->
    <section class="tech" id="screenshots">
        <div class="tech-container">
            <div class="tech-content" style="max-width: 100%;">
                <div class="section-header">
                    <h2 class="section-title">SEE IT IN ACTION</h2>
                    <div class="section-line"></div>
                </div>

                <div class="tech-description">
                    <p>A clean, focused interface designed for athletes. No clutter, no distractions &mdash; just the tools you need to track your training.</p>
                </div>
            </div>
        </div>

        <!-- Screenshot Gallery -->
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; padding: 1rem; max-width: 1000px; margin: 0 auto;">
            <div style="background: rgba(15, 29, 46, 0.8); border-radius: 16px; padding: 1rem; border: 1px solid rgba(0, 188, 212, 0.2);">
                <a href="assets/Performance1.png" target="_blank">
                    <img src="assets/Performance1.png" alt="Performance Analytics" style="width: 100%; border-radius: 8px; transition: transform 0.2s ease;" onmouseover="this.style.transform='scale(1.02)'" onmouseout="this.style.transform='scale(1)'">
                </a>
                <h3 style="color: #00bcd4; font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; margin: 1rem 0 0.5rem;">PERFORMANCE ANALYTICS</h3>
                <p style="color: #888; font-size: 0.9rem;">Track your PRs, view progress charts, and see your top lifts at a glance.</p>
            </div>

            <div style="background: rgba(15, 29, 46, 0.8); border-radius: 16px; padding: 1rem; border: 1px solid rgba(0, 188, 212, 0.2);">
                <a href="assets/WODList.png" target="_blank">
                    <img src="assets/WODList.png" alt="WOD Library" style="width: 100%; border-radius: 8px; transition: transform 0.2s ease;" onmouseover="this.style.transform='scale(1.02)'" onmouseout="this.style.transform='scale(1)'">
                </a>
                <h3 style="color: #00bcd4; font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; margin: 1rem 0 0.5rem;">WOD LIBRARY</h3>
                <p style="color: #888; font-size: 0.9rem;">314 benchmark workouts ready to log. Filter by type: Girls, Heroes, Open, AMRAP.</p>
            </div>

            <div style="background: rgba(15, 29, 46, 0.8); border-radius: 16px; padding: 1rem; border: 1px solid rgba(0, 188, 212, 0.2);">
                <a href="assets/CalendarView.png" target="_blank">
                    <img src="assets/CalendarView.png" alt="Calendar View" style="width: 100%; border-radius: 8px; transition: transform 0.2s ease;" onmouseover="this.style.transform='scale(1.02)'" onmouseout="this.style.transform='scale(1)'">
                </a>
                <h3 style="color: #00bcd4; font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; margin: 1rem 0 0.5rem;">CALENDAR VIEW</h3>
                <p style="color: #888; font-size: 0.9rem;">Your training month at a glance. Workout dots, PR badges, and daily summaries.</p>
            </div>

            <div style="background: rgba(15, 29, 46, 0.8); border-radius: 16px; padding: 1rem; border: 1px solid rgba(0, 188, 212, 0.2);">
                <a href="assets/MovementList.png" target="_blank">
                    <img src="assets/MovementList.png" alt="Movement Library" style="width: 100%; border-radius: 8px; transition: transform 0.2s ease;" onmouseover="this.style.transform='scale(1.02)'" onmouseout="this.style.transform='scale(1)'">
                </a>
                <h3 style="color: #00bcd4; font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; margin: 1rem 0 0.5rem;">MOVEMENT LIBRARY</h3>
                <p style="color: #888; font-size: 0.9rem;">182 movements organized by category. Olympic lifts, gymnastics, cardio, and more.</p>
            </div>

            <div style="background: rgba(15, 29, 46, 0.8); border-radius: 16px; padding: 1rem; border: 1px solid rgba(0, 188, 212, 0.2);">
                <a href="assets/MovementDetails.png" target="_blank">
                    <img src="assets/MovementDetails.png" alt="Movement Details" style="width: 100%; border-radius: 8px; transition: transform 0.2s ease;" onmouseover="this.style.transform='scale(1.02)'" onmouseout="this.style.transform='scale(1)'">
                </a>
                <h3 style="color: #00bcd4; font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; margin: 1rem 0 0.5rem;">MOVEMENT DETAILS</h3>
                <p style="color: #888; font-size: 0.9rem;">See your history for each movement. Track progress and identify areas to improve.</p>
            </div>

            <div style="background: rgba(15, 29, 46, 0.8); border-radius: 16px; padding: 1rem; border: 1px solid rgba(0, 188, 212, 0.2);">
                <a href="assets/WorkoutDeatils.png" target="_blank">
                    <img src="assets/WorkoutDeatils.png" alt="Workout Details" style="width: 100%; border-radius: 8px; transition: transform 0.2s ease;" onmouseover="this.style.transform='scale(1.02)'" onmouseout="this.style.transform='scale(1)'">
                </a>
                <h3 style="color: #00bcd4; font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; margin: 1rem 0 0.5rem;">WORKOUT DETAILS</h3>
                <p style="color: #888; font-size: 0.9rem;">Full breakdown of each workout. Time, score, movements, and notes all in one place.</p>
            </div>
        </div>

        <!-- Notifications Row -->
        <div style="max-width: 1000px; margin: 0 auto; padding: 0 1rem 2rem;">
            <h3 style="color: #ffc107; font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; margin-bottom: 1.5rem; text-align: center;">STAY CONNECTED</h3>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem;">
                <div style="background: rgba(15, 29, 46, 0.8); border-radius: 16px; padding: 1rem; border: 1px solid rgba(255, 193, 7, 0.2);">
                    <a href="assets/PRNotification.png" target="_blank">
                        <img src="assets/PRNotification.png" alt="PR Notification" style="width: 100%; border-radius: 8px; transition: transform 0.2s ease;" onmouseover="this.style.transform='scale(1.02)'" onmouseout="this.style.transform='scale(1)'">
                    </a>
                    <h3 style="color: #ffc107; font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; margin: 1rem 0 0.5rem;">PR NOTIFICATIONS</h3>
                    <p style="color: #888; font-size: 0.9rem;">Get notified instantly when you hit a new personal record.</p>
                </div>

                <div style="background: rgba(15, 29, 46, 0.8); border-radius: 16px; padding: 1rem; border: 1px solid rgba(255, 193, 7, 0.2);">
                    <a href="assets/LikedNotification.png" target="_blank">
                        <img src="assets/LikedNotification.png" alt="Liked Notification" style="width: 100%; border-radius: 8px; transition: transform 0.2s ease;" onmouseover="this.style.transform='scale(1.02)'" onmouseout="this.style.transform='scale(1)'">
                    </a>
                    <h3 style="color: #ffc107; font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; margin: 1rem 0 0.5rem;">COMMUNITY CHEERS</h3>
                    <p style="color: #888; font-size: 0.9rem;">Your gym community can like your PRs and celebrate your wins.</p>
                </div>

                <div style="background: rgba(15, 29, 46, 0.8); border-radius: 16px; padding: 1rem; border: 1px solid rgba(0, 188, 212, 0.2);">
                    <a href="assets/UserSettings.png" target="_blank">
                        <img src="assets/UserSettings.png" alt="User Settings" style="width: 100%; border-radius: 8px; transition: transform 0.2s ease;" onmouseover="this.style.transform='scale(1.02)'" onmouseout="this.style.transform='scale(1)'">
                    </a>
                    <h3 style="color: #00bcd4; font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; margin: 1rem 0 0.5rem;">YOUR SETTINGS</h3>
                    <p style="color: #888; font-size: 0.9rem;">Customize your profile, notification preferences, and display options.</p>
                </div>
            </div>
        </div>

        <!-- Diagonal Divider -->
        <div class="diagonal-divider diagonal-divider-reverse"></div>
    </section>

    <!-- User Flow Guide Section -->
    <section class="features" id="user-flow">
        <div class="features-container">
            <div class="section-header">
                <h2 class="section-title">YOUR WORKOUT JOURNEY</h2>
                <div class="section-line"></div>
            </div>

            <p style="text-align: center; color: #888; max-width: 700px; margin: 0 auto 3rem; font-size: 1.1rem;">
                From logging your first workout to tracking years of progress, ActaLog guides you through every step.
            </p>

            <!-- Flow Steps -->
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-bottom: 3rem;">
                <!-- Step 1 -->
                <div style="background: rgba(15, 29, 46, 0.8); border-radius: 16px; padding: 1.5rem; border: 1px solid rgba(0, 188, 212, 0.2); position: relative;">
                    <div style="position: absolute; top: -15px; left: 20px; background: #00bcd4; color: #0a1628; font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; padding: 0.25rem 0.75rem; border-radius: 8px;">STEP 1</div>
                    <h3 style="color: #00bcd4; font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; margin: 1rem 0 0.75rem;">PICK YOUR WORKOUT</h3>
                    <p style="color: #888; font-size: 0.95rem; line-height: 1.6; margin-bottom: 1rem;">
                        Choose from 314 benchmark WODs or create your own. Filter by type &mdash; The Girls, Heroes, AMRAPs, or For Time workouts.
                    </p>
                    <div style="color: #666; font-size: 0.85rem;">
                        <span style="color: #00bcd4;">&#10132;</span> WOD Library &rarr; Select &rarr; Log Workout
                    </div>
                </div>

                <!-- Step 2 -->
                <div style="background: rgba(15, 29, 46, 0.8); border-radius: 16px; padding: 1.5rem; border: 1px solid rgba(255, 193, 7, 0.2); position: relative;">
                    <div style="position: absolute; top: -15px; left: 20px; background: #ffc107; color: #0a1628; font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; padding: 0.25rem 0.75rem; border-radius: 8px;">STEP 2</div>
                    <h3 style="color: #ffc107; font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; margin: 1rem 0 0.75rem;">LOG YOUR RESULTS</h3>
                    <p style="color: #888; font-size: 0.95rem; line-height: 1.6; margin-bottom: 1rem;">
                        Enter your time, score, or reps. Add weights for each movement. Include notes about scaling or how you felt.
                    </p>
                    <div style="color: #666; font-size: 0.85rem;">
                        <span style="color: #ffc107;">&#10132;</span> Time/Score &rarr; Weights &rarr; Notes &rarr; Save
                    </div>
                </div>

                <!-- Step 3 -->
                <div style="background: rgba(15, 29, 46, 0.8); border-radius: 16px; padding: 1.5rem; border: 1px solid rgba(0, 230, 118, 0.2); position: relative;">
                    <div style="position: absolute; top: -15px; left: 20px; background: #00e676; color: #0a1628; font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; padding: 0.25rem 0.75rem; border-radius: 8px;">STEP 3</div>
                    <h3 style="color: #00e676; font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; margin: 1rem 0 0.75rem;">WATCH YOUR PROGRESS</h3>
                    <p style="color: #888; font-size: 0.95rem; line-height: 1.6; margin-bottom: 1rem;">
                        PRs detected automatically. View your history by movement. Track streaks and consistency over time.
                    </p>
                    <div style="color: #666; font-size: 0.85rem;">
                        <span style="color: #00e676;">&#10132;</span> Dashboard &rarr; Performance &rarr; Calendar
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div style="max-width: 900px; margin: 0 auto;">
                <h3 style="color: #00bcd4; font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; margin-bottom: 1.5rem; text-align: center;">DAILY WORKFLOW</h3>
                <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;">
                    <div style="background: rgba(0, 188, 212, 0.1); border: 1px solid rgba(0, 188, 212, 0.3); border-radius: 12px; padding: 1rem 1.5rem; text-align: center;">
                        <div style="color: #00bcd4; font-size: 1.5rem; margin-bottom: 0.25rem;">&#128197;</div>
                        <div style="color: #e0e0e0; font-size: 0.9rem;">Check Dashboard</div>
                    </div>
                    <div style="color: #666; font-size: 1.5rem; display: flex; align-items: center;">&rarr;</div>
                    <div style="background: rgba(255, 193, 7, 0.1); border: 1px solid rgba(255, 193, 7, 0.3); border-radius: 12px; padding: 1rem 1.5rem; text-align: center;">
                        <div style="color: #ffc107; font-size: 1.5rem; margin-bottom: 0.25rem;">&#127947;</div>
                        <div style="color: #e0e0e0; font-size: 0.9rem;">Log Workout</div>
                    </div>
                    <div style="color: #666; font-size: 1.5rem; display: flex; align-items: center;">&rarr;</div>
                    <div style="background: rgba(0, 230, 118, 0.1); border: 1px solid rgba(0, 230, 118, 0.3); border-radius: 12px; padding: 1rem 1.5rem; text-align: center;">
                        <div style="color: #00e676; font-size: 1.5rem; margin-bottom: 0.25rem;">&#127942;</div>
                        <div style="color: #e0e0e0; font-size: 0.9rem;">Celebrate PRs</div>
                    </div>
                    <div style="color: #666; font-size: 1.5rem; display: flex; align-items: center;">&rarr;</div>
                    <div style="background: rgba(255, 107, 53, 0.1); border: 1px solid rgba(255, 107, 53, 0.3); border-radius: 12px; padding: 1rem 1.5rem; text-align: center;">
                        <div style="color: #ff6b35; font-size: 1.5rem; margin-bottom: 0.25rem;">&#128200;</div>
                        <div style="color: #e0e0e0; font-size: 0.9rem;">Review Progress</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Themes Section -->
    <section class="tech" id="themes">
        <div class="features-container">
            <div class="section-header">
                <h2 class="section-title">MAKE IT YOURS</h2>
                <div class="section-line"></div>
            </div>

            <p style="text-align: center; color: #888; max-width: 600px; margin: 0 auto 3rem; font-size: 1.1rem;">
                Choose a theme that matches your style. From clean and minimal to bold and intense.
            </p>

            <div class="features-grid" style="grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem;">
                <div class="feature-card" style="text-align: center; padding: 1.5rem;">
                    <div style="width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #fff 50%, #f5f5f5 50%); margin: 0 auto 1rem; border: 3px solid #00bcd4;"></div>
                    <h3 class="feature-title" style="font-size: 1rem; margin-bottom: 1rem;">LIGHT</h3>
                    <a href="assets/LighDashboard.png" target="_blank" style="display: inline-block; transition: transform 0.2s ease, box-shadow 0.2s ease;">
                        <img src="assets/LighDashboard.png" alt="Light theme dashboard" style="width: 60px; border-radius: 6px; border: 2px solid rgba(0, 188, 212, 0.3); transition: transform 0.2s ease, box-shadow 0.2s ease;" onmouseover="this.style.transform='scale(1.05)'; this.style.boxShadow='0 0 15px rgba(0, 188, 212, 0.5)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">
                    </a>
                </div>
                <div class="feature-card" style="text-align: center; padding: 1.5rem;">
                    <div style="width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #2a2a2a 50%, #1a1a1a 50%); margin: 0 auto 1rem; border: 3px solid #00bcd4;"></div>
                    <h3 class="feature-title" style="font-size: 1rem; margin-bottom: 1rem;">DARK</h3>
                    <a href="assets/DarkDashboard.png" target="_blank" style="display: inline-block; transition: transform 0.2s ease, box-shadow 0.2s ease;">
                        <img src="assets/DarkDashboard.png" alt="Dark theme dashboard" style="width: 60px; border-radius: 6px; border: 2px solid rgba(0, 188, 212, 0.3); transition: transform 0.2s ease, box-shadow 0.2s ease;" onmouseover="this.style.transform='scale(1.05)'; this.style.boxShadow='0 0 15px rgba(0, 188, 212, 0.5)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">
                    </a>
                </div>
                <div class="feature-card" style="text-align: center; padding: 1.5rem;">
                    <div style="width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #00bcd4 50%, #0a1628 50%); margin: 0 auto 1rem; border: 3px solid #ffc107;"></div>
                    <h3 class="feature-title" style="font-size: 1rem; margin-bottom: 1rem;">BRUTALIST</h3>
                    <a href="assets/BrutalDashboard.png" target="_blank" style="display: inline-block; transition: transform 0.2s ease, box-shadow 0.2s ease;">
                        <img src="assets/BrutalDashboard.png" alt="Brutalist theme dashboard" style="width: 60px; border-radius: 6px; border: 2px solid rgba(255, 193, 7, 0.3); transition: transform 0.2s ease, box-shadow 0.2s ease;" onmouseover="this.style.transform='scale(1.05)'; this.style.boxShadow='0 0 15px rgba(255, 193, 7, 0.5)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">
                    </a>
                </div>
                <div class="feature-card" style="text-align: center; padding: 1.5rem;">
                    <div style="width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #006d77 50%, #83c5be 50%); margin: 0 auto 1rem; border: 3px solid #00bcd4;"></div>
                    <h3 class="feature-title" style="font-size: 1rem; margin-bottom: 1rem;">OCEAN</h3>
                    <a href="assets/OceanDashboard.png" target="_blank" style="display: inline-block; transition: transform 0.2s ease, box-shadow 0.2s ease;">
                        <img src="assets/OceanDashboard.png" alt="Ocean theme dashboard" style="width: 60px; border-radius: 6px; border: 2px solid rgba(0, 109, 119, 0.4); transition: transform 0.2s ease, box-shadow 0.2s ease;" onmouseover="this.style.transform='scale(1.05)'; this.style.boxShadow='0 0 15px rgba(0, 109, 119, 0.5)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">
                    </a>
                </div>
                <div class="feature-card" style="text-align: center; padding: 1.5rem;">
                    <div style="width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #f77f00 50%, #fcbf49 50%); margin: 0 auto 1rem; border: 3px solid #d62828;"></div>
                    <h3 class="feature-title" style="font-size: 1rem; margin-bottom: 1rem;">SUNSET</h3>
                    <a href="assets/SunsetDashboard.png" target="_blank" style="display: inline-block; transition: transform 0.2s ease, box-shadow 0.2s ease;">
                        <img src="assets/SunsetDashboard.png" alt="Sunset theme dashboard" style="width: 60px; border-radius: 6px; border: 2px solid rgba(247, 127, 0, 0.4); transition: transform 0.2s ease, box-shadow 0.2s ease;" onmouseover="this.style.transform='scale(1.05)'; this.style.boxShadow='0 0 15px rgba(247, 127, 0, 0.5)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">
                    </a>
                </div>
                <div class="feature-card" style="text-align: center; padding: 1.5rem;">
                    <div style="width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #7B5D7F 50%, #D4637A 50%); margin: 0 auto 1rem; border: 3px solid #E8842A;"></div>
                    <h3 class="feature-title" style="font-size: 1rem; margin-bottom: 1rem;">SUNRISE</h3>
                    <a href="assets/SunriseDashboard.png" target="_blank" style="display: inline-block; transition: transform 0.2s ease, box-shadow 0.2s ease;">
                        <img src="assets/SunriseDashboard.png" alt="Sunrise theme dashboard" style="width: 60px; border-radius: 6px; border: 2px solid rgba(212, 99, 122, 0.4); transition: transform 0.2s ease, box-shadow 0.2s ease;" onmouseover="this.style.transform='scale(1.05)'; this.style.boxShadow='0 0 15px rgba(212, 99, 122, 0.5)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">
                    </a>
                </div>
                <div class="feature-card" style="text-align: center; padding: 1.5rem;">
                    <div style="width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #37474f 50%, #546e7a 50%); margin: 0 auto 1rem; border: 3px solid #00bcd4;"></div>
                    <h3 class="feature-title" style="font-size: 1rem; margin-bottom: 1rem;">MYST</h3>
                    <a href="assets/MystDashboard.png" target="_blank" style="display: inline-block; transition: transform 0.2s ease, box-shadow 0.2s ease;">
                        <img src="assets/MystDashboard.png" alt="Myst theme dashboard" style="width: 60px; border-radius: 6px; border: 2px solid rgba(0, 188, 212, 0.4); transition: transform 0.2s ease, box-shadow 0.2s ease;" onmouseover="this.style.transform='scale(1.05)'; this.style.boxShadow='0 0 15px rgba(0, 188, 212, 0.5)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Install App Section -->
    <section class="tech" id="install">
        <div class="tech-container">
            <div class="tech-content" style="max-width: 100%;">
                <div class="section-header">
                    <h2 class="section-title">WORKS EVERYWHERE</h2>
                    <div class="section-line"></div>
                </div>

                <div class="tech-description">
                    <p>ActaLog is a Progressive Web App (PWA) with responsive design. Use it on any device, install it like a native app, and train even when you're offline.</p>
                </div>

                <!-- Technology Benefits -->
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin: 2rem 0 3rem; max-width: 900px; margin-left: auto; margin-right: auto;">
                    <div style="text-align: center; padding: 1.5rem;">
                        <div style="font-size: 2.5rem; margin-bottom: 0.5rem;">&#128241;</div>
                        <h4 style="color: #00bcd4; font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; margin-bottom: 0.5rem;">RESPONSIVE DESIGN</h4>
                        <p style="color: #888; font-size: 0.9rem; line-height: 1.5;">Adapts to any screen size. Phone, tablet, or desktop &mdash; the interface adjusts automatically.</p>
                    </div>
                    <div style="text-align: center; padding: 1.5rem;">
                        <div style="font-size: 2.5rem; margin-bottom: 0.5rem;">&#9889;</div>
                        <h4 style="color: #ffc107; font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; margin-bottom: 0.5rem;">INSTANT LOADING</h4>
                        <p style="color: #888; font-size: 0.9rem; line-height: 1.5;">Service workers cache assets locally. The app loads instantly, even on slow connections.</p>
                    </div>
                    <div style="text-align: center; padding: 1.5rem;">
                        <div style="font-size: 2.5rem; margin-bottom: 0.5rem;">&#128268;</div>
                        <h4 style="color: #00e676; font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; margin-bottom: 0.5rem;">OFFLINE CAPABLE</h4>
                        <p style="color: #888; font-size: 0.9rem; line-height: 1.5;">Log workouts without internet. Data syncs automatically when you're back online.</p>
                    </div>
                    <div style="text-align: center; padding: 1.5rem;">
                        <div style="font-size: 2.5rem; margin-bottom: 0.5rem;">&#128274;</div>
                        <h4 style="color: #ff6b35; font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; margin-bottom: 0.5rem;">NO APP STORE</h4>
                        <p style="color: #888; font-size: 0.9rem; line-height: 1.5;">Install directly from your browser. Updates happen automatically &mdash; no manual downloads.</p>
                    </div>
                </div>

                <h3 style="color: #00bcd4; font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; margin-bottom: 1.5rem; text-align: center;">HOW TO INSTALL</h3>

                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 2rem;">
                    <!-- iOS Instructions -->
                    <div style="background: rgba(15, 29, 46, 0.8); border-radius: 16px; padding: 2rem; border: 1px solid rgba(0, 188, 212, 0.2);">
                        <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
                            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#00bcd4" stroke-width="1.5">
                                <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2z"/>
                                <path d="M12 6v6l4 2"/>
                            </svg>
                            <h3 style="color: #00bcd4; font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; margin: 0;">iPHONE / iPAD</h3>
                        </div>
                        <ol style="color: #ccc; line-height: 2; padding-left: 1.25rem; margin: 0;">
                            <li>Open ActaLog in <strong style="color: #e0e0e0;">Safari</strong></li>
                            <li>Tap the <strong style="color: #e0e0e0;">Share</strong> button (square with arrow)</li>
                            <li>Scroll down and tap <strong style="color: #00bcd4;">"Add to Home Screen"</strong></li>
                            <li>Tap <strong style="color: #e0e0e0;">Add</strong> to confirm</li>
                        </ol>
                        <p style="color: #666; font-size: 0.9rem; margin-top: 1rem; font-style: italic;">
                            Note: Must use Safari. Chrome and other browsers don't support Add to Home Screen on iOS.
                        </p>
                    </div>

                    <!-- Android Instructions -->
                    <div style="background: rgba(15, 29, 46, 0.8); border-radius: 16px; padding: 2rem; border: 1px solid rgba(0, 188, 212, 0.2);">
                        <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
                            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#00e676" stroke-width="1.5">
                                <rect x="5" y="2" width="14" height="20" rx="2"/>
                                <line x1="12" y1="18" x2="12" y2="18"/>
                            </svg>
                            <h3 style="color: #00e676; font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; margin: 0;">ANDROID</h3>
                        </div>
                        <ol style="color: #ccc; line-height: 2; padding-left: 1.25rem; margin: 0;">
                            <li>Open ActaLog in <strong style="color: #e0e0e0;">Chrome</strong></li>
                            <li>Tap the <strong style="color: #e0e0e0;">menu</strong> (three dots)</li>
                            <li>Tap <strong style="color: #00e676;">"Install app"</strong> or <strong style="color: #00e676;">"Add to Home Screen"</strong></li>
                            <li>Tap <strong style="color: #e0e0e0;">Install</strong> to confirm</li>
                        </ol>
                        <p style="color: #666; font-size: 0.9rem; margin-top: 1rem; font-style: italic;">
                            Chrome may automatically prompt you to install when you visit the app.
                        </p>
                    </div>
                </div>

                <div style="text-align: center; margin-top: 2rem;">
                    <p style="color: #888; font-size: 1rem;">
                        Once installed, ActaLog works offline and launches instantly from your home screen &mdash; just like a native app.
                    </p>
                </div>
            </div>
        </div>
        <div class="diagonal-divider diagonal-divider-reverse"></div>
    </section>

    <!-- CTA Section -->
    <section class="cta" id="start">
        <div class="cta-container">
            <h2 class="cta-title">READY TO TRACK YOUR TRAINING?</h2>
            <p class="cta-subtitle">Join athletes who take their training seriously. Start logging your workouts today.</p>

            <div class="cta-buttons">
                <a href="features.html" class="btn btn-primary btn-large">
                    <span>LEARN MORE</span>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M5 12h14M12 5l7 7-7 7"/>
                    </svg>
                </a>
                <a href="tech.html" class="btn btn-secondary btn-large">
                    <span>FOR DEVELOPERS</span>
                </a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="footer-container">
            <div class="footer-content">
                <div class="footer-brand">
                    <div class="footer-logo">ACTALOG</div>
                    <p class="footer-tagline">Track Your CrossFit Journey</p>
                </div>

                <div class="footer-links">
                    <div class="footer-column">
                        <h4 class="footer-heading">PRODUCT</h4>
                        <a href="features.html">For Admins</a>
                        <a href="#features">Features</a>
                        <a href="#user-flow">User Guide</a>
                        <a href="#themes">Themes</a>
                    </div>

                    <div class="footer-column">
                        <h4 class="footer-heading">RESOURCES</h4>
                        <a href="tech.html">For Developers</a>
                        <a href="https://github.com/johnzastrow/actalog/blob/main/docs/CHANGELOG.md" target="_blank">What's New</a>
                    </div>

                    <div class="footer-column">
                        <h4 class="footer-heading">SUPPORT</h4>
                        <a href="https://github.com/johnzastrow/actalog/issues/new" target="_blank">Get Help</a>
                        <a href="https://github.com/johnzastrow/actalog/issues/new" target="_blank">Request Feature</a>
                    </div>

                    <div class="footer-column">
                        <h4 class="footer-heading">LEGAL</h4>
                        <a href="privacy.html">Privacy Policy</a>
                    </div>
                </div>
            </div>

            <div class="footer-bottom">
                <p>&copy; 2026 ActaLog. Made for athletes, by athletes.</p>
            </div>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>