Ctrl K
ComunidadGuías…

site/features.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 for Admins - Manage Your CrossFit Community</title>
    <meta name="description" content="Run your CrossFit community with ActaLog. Member management, announcements, subscription billing, and performance tracking for administrators.">

    <!-- Open Graph -->
    <meta property="og:title" content="ActaLog for Admins - Manage Your CrossFit Community">
    <meta property="og:description" content="Run your CrossFit community with ActaLog. Member management, announcements, and performance tracking.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://johnzastrow.github.io/actalog/features.html">
    <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">

    <!-- 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">
</head>
<body>
    <!-- Noise Texture Overlay -->
    <div class="noise-overlay"></div>

    <!-- Navigation -->
    <nav class="nav">
        <div class="nav-container">
            <div class="nav-logo">
                <a href="index.html" style="text-decoration: none; color: inherit;">
                    <span class="logo-text">ACTALOG</span>
                </a>
            </div>
            <div class="nav-links">
                <a href="index.html" class="nav-link">HOME</a>
                <a href="tech.html" class="nav-link">DEVELOPERS</a>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero" style="min-height: 50vh;">
        <div class="hero-container">
            <div class="hero-content" style="max-width: 100%;">
                <div class="hero-badge">FOR ADMINISTRATORS</div>
                <h1 class="hero-title">
                    <span class="hero-title-line">RUN YOUR</span>
                    <span class="hero-title-line glow">COMMUNITY.</span>
                </h1>
                <p class="hero-subtitle">Everything you need to manage members, track performance, and keep your community engaged. Built by athletes, for athletes and their communities.</p>
            </div>
        </div>
        <div class="diagonal-divider"></div>
    </section>

    <!-- Member Management Section -->
    <section class="features" id="members">
        <div class="features-container">
            <div class="section-header">
                <h2 class="section-title">MEMBER MANAGEMENT</h2>
                <div class="section-line"></div>
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-bottom: 3rem;">
                <div>
                    <h3 style="color: #00bcd4; font-family: 'Bebas Neue', sans-serif; font-size: 1.75rem; margin-bottom: 1rem;">KNOW YOUR ATHLETES</h3>
                    <p style="color: #ccc; font-size: 1.1rem; line-height: 1.8; margin-bottom: 1.5rem;">
                        Your members are more than just names on a roster. ActaLog gives you visibility into their training journey &mdash; who's showing up consistently, who's hitting PRs, and who might need a little extra motivation.
                    </p>
                    <p style="color: #888; font-size: 1rem; line-height: 1.7;">
                        With three-tier role-based access control, you decide who sees what. Admins have full control. Coaches manage class rosters and check-ins. Athletes see only their own data.
                    </p>
                </div>
                <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;">
                        <div style="width: 50px; height: 50px; border-radius: 50%; background: #00bcd4; display: flex; align-items: center; justify-content: center; color: #0a1628; font-weight: bold;">JD</div>
                        <div>
                            <div style="color: #e0e0e0; font-weight: 600;">Jane Doe</div>
                            <div style="color: #666; font-size: 0.9rem;">Member since 2023</div>
                        </div>
                        <div style="margin-left: auto; color: #00e676; font-size: 0.9rem;">Active</div>
                    </div>
                    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; text-align: center;">
                        <div>
                            <div style="color: #00bcd4; font-size: 1.5rem; font-weight: bold;">47</div>
                            <div style="color: #666; font-size: 0.8rem;">Workouts</div>
                        </div>
                        <div>
                            <div style="color: #ffc107; font-size: 1.5rem; font-weight: bold;">12</div>
                            <div style="color: #666; font-size: 0.8rem;">PRs</div>
                        </div>
                        <div>
                            <div style="color: #00e676; font-size: 1.5rem; font-weight: bold;">85%</div>
                            <div style="color: #666; font-size: 0.8rem;">Attendance</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="features-grid">
                <div class="feature-card">
                    <h3 class="feature-title">USER REGISTRATION</h3>
                    <p class="feature-description">Email verification, secure password management, and optional admin approval for new signups.</p>
                </div>
                <div class="feature-card">
                    <h3 class="feature-title">ROLE-BASED ACCESS</h3>
                    <p class="feature-description">Three roles: Athlete (default), Coach (roster & check-in access), and Admin (full system control). Coaches bypass subscription checks and manage sessions at their assigned gyms.</p>
                </div>
                <div class="feature-card">
                    <h3 class="feature-title">MEMBER PROFILES</h3>
                    <p class="feature-description">Track workout history, PRs, attendance patterns, and subscription status for every member.</p>
                </div>

                <div class="feature-card">
                    <h3 class="feature-title">CLASS SCHEDULING</h3>
                    <p class="feature-description">Full gym scheduling: locations, class templates, recurring schedule slots, and individual sessions with capacity management. Athletes reserve spots, join waitlists, and get automatic notifications when a spot opens.</p>
                </div>

                <div class="feature-card">
                    <h3 class="feature-title">CREDIT PACKAGES</h3>
                    <p class="feature-description">Sell class packages (e.g., "10-Class Pack", "Monthly Unlimited"). Credits deduct automatically on reservation. Refunds issued when sessions are cancelled. Expiration tracking built in.</p>
                </div>

                <div class="feature-card">
                    <h3 class="feature-title">LEADERBOARDS</h3>
                    <p class="feature-description">Gym-wide PR leaderboards for any movement. Consistency achievement tracking. Athletes see how their lifts stack up against the community — motivation built in.</p>
                </div>
            </div>

            <!-- Admin Screenshots -->
            <div style="margin-top: 3rem;">
                <h3 style="color: #00bcd4; font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; margin-bottom: 1.5rem; text-align: center;">ADMIN DASHBOARD</h3>
                <div style="display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;">
                    <div style="background: rgba(15, 29, 46, 0.8); border-radius: 16px; padding: 1rem; border: 1px solid rgba(0, 188, 212, 0.2); max-width: 180px;">
                        <a href="assets/AdminFunctions.png" target="_blank">
                            <img src="assets/AdminFunctions.png" alt="Admin Functions" 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: 1rem; margin: 0.75rem 0 0.25rem;">ADMIN CONTROLS</h3>
                        <p style="color: #888; font-size: 0.8rem;">Admin control panel.</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); max-width: 400px;">
                        <a href="assets/DesktopUsertoStandard.png" target="_blank">
                            <img src="assets/DesktopUsertoStandard.png" alt="User Role Management" 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;">USER MANAGEMENT</h3>
                        <p style="color: #888; font-size: 0.9rem;">Manage user roles, subscription status, and promote workouts from user-created (available only to the user that created it) to official, system-wide workouts.</p>
                    </div>

                    <div style="background: rgba(15, 29, 46, 0.8); border-radius: 16px; padding: 1rem; border: 1px solid rgba(0, 230, 118, 0.2); max-width: 400px;">
                        <a href="assets/DataQualityOverview.png" target="_blank">
                            <img src="assets/DataQualityOverview.png" alt="Data Quality Dashboard" 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: #00e676; font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; margin: 1rem 0 0.5rem;">DATA QUALITY</h3>
                        <p style="color: #888; font-size: 0.9rem;">Scan for duplicate records and data quality issues. Detect orphaned references, empty fields, future dates, and invalid emails across all entity types.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Notifications & Announcements Section -->
    <section class="tech" id="announcements">
        <div class="tech-container">
            <div class="tech-content" style="max-width: 100%;">
                <div class="section-header">
                    <h2 class="section-title">NOTIFICATIONS & ANNOUNCEMENTS</h2>
                    <div class="section-line"></div>
                </div>

                <!-- Announcements Feature -->
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-top: 2rem; margin-bottom: 4rem;">
                    <div style="background: rgba(15, 29, 46, 0.8); border-radius: 16px; padding: 1.5rem; border: 1px solid rgba(255, 193, 7, 0.2);">
                        <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
                            <div style="width: 8px; height: 8px; border-radius: 50%; background: #ffc107;"></div>
                            <span style="color: #ffc107; font-size: 0.9rem; font-weight: 600;">ANNOUNCEMENT</span>
                            <span style="color: #666; font-size: 0.8rem; margin-left: auto;">2 hours ago</span>
                        </div>
                        <h4 style="color: #e0e0e0; font-size: 1.1rem; margin-bottom: 0.75rem;">Holiday Hours Reminder</h4>
                        <p style="color: #888; font-size: 0.95rem; line-height: 1.6;">Hey everyone! Just a reminder that we'll have <strong style="color: #ccc;">modified hours</strong> next week for the holidays. Check the <a href="#" style="color: #00bcd4;">schedule here</a>.</p>
                        <p style="color: #888; font-size: 0.95rem; line-height: 1.6; margin-top: 0.5rem;">See you all at the Christmas Eve WOD!</p>
                        <div style="display: flex; gap: 1rem; margin-top: 1rem; color: #666; font-size: 0.85rem;">
                            <span>Sent to: All Members</span>
                        </div>
                    </div>
                    <div>
                        <h3 style="color: #ffc107; font-family: 'Bebas Neue', sans-serif; font-size: 1.75rem; margin-bottom: 1rem;">BROADCAST TO YOUR COMMUNITY</h3>
                        <p style="color: #ccc; font-size: 1.1rem; line-height: 1.8; margin-bottom: 1.5rem;">
                            Schedule changes, special events, equipment updates, competition announcements &mdash; your members see it all in their notification feed. No more hoping everyone checks the whiteboard or reads their email.
                        </p>
                        <p style="color: #888; font-size: 1rem; line-height: 1.7; margin-bottom: 1rem;">
                            Announcements go directly to every member's notification inbox within the app. They appear with a timestamp and are accessible from anywhere. Members who miss a day still get the message when they open the app.
                        </p>
                        <p style="color: #888; font-size: 1rem; line-height: 1.7;">
                            Write announcements with <strong style="color: #ccc;">Markdown formatting</strong> for rich text &mdash; bold, italics, links, and lists. ActaLog supports <a href="https://www.markdownguide.org/basic-syntax/" target="_blank" style="color: #00bcd4;">standard Markdown syntax</a> so your messages look professional and are easy to read.
                        </p>
                    </div>
                </div>

                <!-- Multi-Organization Feature -->
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-bottom: 4rem;">
                    <div>
                        <h3 style="color: #00bcd4; font-family: 'Bebas Neue', sans-serif; font-size: 1.75rem; margin-bottom: 1rem;">MULTIPLE ORGANIZATIONS</h3>
                        <p style="color: #ccc; font-size: 1.1rem; line-height: 1.8; margin-bottom: 1.5rem;">
                            Athletes aren't limited to a single community. Users can belong to multiple organizations &mdash; their home box, a specialty gym, a competition team, or a remote coaching group.
                        </p>
                        <p style="color: #888; font-size: 1rem; line-height: 1.7; margin-bottom: 1rem;">
                            Each organization has its own admins, announcements, and member lists. Athletes see notifications from all their communities in one unified feed, but workouts and PRs belong to the individual &mdash; their data travels with them.
                        </p>
                        <p style="color: #888; font-size: 1rem; line-height: 1.7;">
                            Perfect for coaches who work at multiple locations, athletes who travel frequently, or competition teams that span different boxes.
                        </p>
                    </div>
                    <div style="background: rgba(15, 29, 46, 0.8); border-radius: 16px; padding: 1.5rem; border: 1px solid rgba(0, 188, 212, 0.2);">
                        <div style="color: #666; font-size: 0.9rem; margin-bottom: 1rem;">YOUR ORGANIZATIONS</div>
                        <div style="display: flex; flex-direction: column; gap: 1rem;">
                            <div style="display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(0, 188, 212, 0.1); border-radius: 8px;">
                                <div style="width: 40px; height: 40px; border-radius: 8px; background: #00bcd4; display: flex; align-items: center; justify-content: center; color: #0a1628; font-weight: bold;">CF</div>
                                <div>
                                    <div style="color: #e0e0e0; font-weight: 600;">CrossFit Downtown</div>
                                    <div style="color: #666; font-size: 0.85rem;">Primary &bull; Admin</div>
                                </div>
                            </div>
                            <div style="display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(255, 193, 7, 0.1); border-radius: 8px;">
                                <div style="width: 40px; height: 40px; border-radius: 8px; background: #ffc107; display: flex; align-items: center; justify-content: center; color: #0a1628; font-weight: bold;">OL</div>
                                <div>
                                    <div style="color: #e0e0e0; font-weight: 600;">Olympic Lifting Club</div>
                                    <div style="color: #666; font-size: 0.85rem;">Member</div>
                                </div>
                            </div>
                            <div style="display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(0, 230, 118, 0.1); border-radius: 8px;">
                                <div style="width: 40px; height: 40px; border-radius: 8px; background: #00e676; display: flex; align-items: center; justify-content: center; color: #0a1628; font-weight: bold;">CT</div>
                                <div>
                                    <div style="color: #e0e0e0; font-weight: 600;">Competition Team 2025</div>
                                    <div style="color: #666; font-size: 0.85rem;">Athlete</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Announcement Screenshots -->
                <div style="margin-bottom: 4rem;">
                    <h3 style="color: #ffc107; font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; margin-bottom: 1.5rem; text-align: center;">ANNOUNCEMENT SYSTEM</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/AnnouncementCreate.png" target="_blank">
                                <img src="assets/AnnouncementCreate.png" alt="Create Announcement" 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.1rem; margin: 1rem 0 0.5rem;">CREATE ANNOUNCEMENT</h3>
                            <p style="color: #888; font-size: 0.9rem;">Compose messages to your community with a simple editor.</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/FormattedAnnouncement.png" target="_blank">
                                <img src="assets/FormattedAnnouncement.png" alt="Formatted Announcement" 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.1rem; margin: 1rem 0 0.5rem;">MARKDOWN FORMATTING</h3>
                            <p style="color: #888; font-size: 0.9rem;">Rich text with bold, links, and lists using Markdown syntax.</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/AnnouncementTargeted.png" target="_blank">
                                <img src="assets/AnnouncementTargeted.png" alt="Targeted Announcement" 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.1rem; margin: 1rem 0 0.5rem;">TARGETED MESSAGING</h3>
                            <p style="color: #888; font-size: 0.9rem;">Send to all members or target specific groups and roles.</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/AnnouncementReading.png" target="_blank">
                                <img src="assets/AnnouncementReading.png" alt="Reading Announcements" 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.1rem; margin: 1rem 0 0.5rem;">MEMBER VIEW</h3>
                            <p style="color: #888; font-size: 0.9rem;">How members see and interact with your announcements.</p>
                        </div>
                    </div>
                </div>

                <!-- Notification Types -->
                <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;">NOTIFICATION TYPES</h3>
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
                        <div style="background: rgba(15, 29, 46, 0.8); border-radius: 12px; padding: 1.5rem; border: 1px solid rgba(255, 193, 7, 0.2);">
                            <div style="color: #ffc107; font-size: 1.25rem; margin-bottom: 0.5rem;">PR Achievements</div>
                            <p style="color: #888; font-size: 0.95rem; line-height: 1.6;">When you hit a personal record, you get notified. When others hit PRs, you can celebrate with a like.</p>
                        </div>
                        <div style="background: rgba(15, 29, 46, 0.8); border-radius: 12px; padding: 1.5rem; border: 1px solid rgba(0, 188, 212, 0.2);">
                            <div style="color: #00bcd4; font-size: 1.25rem; margin-bottom: 0.5rem;">Admin Announcements</div>
                            <p style="color: #888; font-size: 0.95rem; line-height: 1.6;">Important updates from your organization's admins appear in your notification feed.</p>
                        </div>
                        <div style="background: rgba(15, 29, 46, 0.8); border-radius: 12px; padding: 1.5rem; border: 1px solid rgba(0, 230, 118, 0.2);">
                            <div style="color: #00e676; font-size: 1.25rem; margin-bottom: 0.5rem;">Social Interactions</div>
                            <p style="color: #888; font-size: 0.95rem; line-height: 1.6;">Get notified when someone likes your PR or interacts with your achievements.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="diagonal-divider diagonal-divider-reverse"></div>
    </section>

    <!-- Subscription Billing Section -->
    <section class="features" id="billing">
        <div class="features-container">
            <div class="section-header">
                <h2 class="section-title">SUBSCRIPTION MANAGEMENT</h2>
                <div class="section-line"></div>
            </div>

            <div style="max-width: 900px; margin: 0 auto;">
                <p style="color: #ccc; font-size: 1.15rem; line-height: 1.8; margin-bottom: 2rem; text-align: center;">
                    ActaLog includes a flexible subscription system designed for CrossFit boxes. Manage individual memberships or organization-wide access with manual admin control.
                </p>

                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 3rem;">
                    <div style="background: rgba(15, 29, 46, 0.8); border-radius: 16px; padding: 2rem; border: 1px solid rgba(0, 188, 212, 0.2);">
                        <h3 style="color: #00bcd4; font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; margin-bottom: 1rem;">INDIVIDUAL SUBSCRIPTIONS</h3>
                        <p style="color: #888; line-height: 1.7;">
                            Perfect for drop-in athletes or remote members. Create monthly or annual subscriptions for individual users. Track payment status and expiration dates.
                        </p>
                    </div>

                    <div style="background: rgba(15, 29, 46, 0.8); border-radius: 16px; padding: 2rem; border: 1px solid rgba(255, 193, 7, 0.2);">
                        <h3 style="color: #ffc107; font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; margin-bottom: 1rem;">ORGANIZATION SUBSCRIPTIONS</h3>
                        <p style="color: #888; line-height: 1.7;">
                            One subscription covers all members of an organization. Ideal for boxes that want to provide app access as part of their membership package.
                        </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);">
                        <h3 style="color: #00e676; font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; margin-bottom: 1rem;">PERMANENT FREE ACCESS</h3>
                        <p style="color: #888; line-height: 1.7;">
                            Grant permanent access to founders, staff, or special members. No expiration, no recurring billing &mdash; just full access forever.
                        </p>
                    </div>
                </div>

                <div class="features-grid">
                    <div class="feature-card">
                        <h3 class="feature-title">MANUAL CONTROL</h3>
                        <p class="feature-description">Mark payments as received, extend subscriptions, or cancel access. You're in control of the billing relationship.</p>
                    </div>
                    <div class="feature-card">
                        <h3 class="feature-title">READ-ONLY MODE</h3>
                        <p class="feature-description">Expired subscriptions automatically enter read-only mode. Members can view their history but can't log new workouts.</p>
                    </div>
                    <div class="feature-card">
                        <h3 class="feature-title">AUDIT TRAIL</h3>
                        <p class="feature-description">Every subscription change is logged. Know who made changes and when for full accountability.</p>
                    </div>
                </div>

                <!-- Subscription Screenshot -->
                <div style="margin-top: 3rem;">
                    <h3 style="color: #00bcd4; font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; margin-bottom: 1.5rem; text-align: center;">SUBSCRIPTION DASHBOARD</h3>
                    <div style="max-width: 400px; 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/DesktopSubscriptions.png" target="_blank">
                                <img src="assets/DesktopSubscriptions.png" alt="Subscription Management" 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;">MANAGE SUBSCRIPTIONS</h3>
                            <p style="color: #888; font-size: 0.9rem;">View and manage all member subscriptions from a single dashboard. Track status, expiration dates, and payment history.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Data & Privacy Section -->
    <section class="tech" id="data">
        <div class="tech-container">
            <div class="tech-content" style="max-width: 100%;">
                <div class="section-header">
                    <h2 class="section-title">IMPORT, EXPORT & DATA CONTROL</h2>
                    <div class="section-line"></div>
                </div>

                <!-- Data Ownership -->
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-top: 2rem; margin-bottom: 4rem;">
                    <div>
                        <h3 style="color: #00bcd4; font-family: 'Bebas Neue', sans-serif; font-size: 1.75rem; margin-bottom: 1rem;">COMPLETE DATA OWNERSHIP</h3>
                        <p style="color: #ccc; font-size: 1.1rem; line-height: 1.8; margin-bottom: 1.5rem;">
                            Unlike cloud-only solutions, ActaLog runs on your infrastructure. Your member data never leaves your servers unless you want it to.
                        </p>
                        <p style="color: #888; font-size: 1rem; line-height: 1.7; margin-bottom: 1.5rem;">
                            Full backup and restore capabilities mean you can migrate, archive, or recover data at any time. The complete database can be backed up with a single click, and restores are just as simple.
                        </p>
                    </div>
                    <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; padding: 2rem;">
                            <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#00bcd4" stroke-width="1.5" style="margin-bottom: 1.5rem;">
                                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                                <polyline points="9 12 11 14 15 10"/>
                            </svg>
                            <h4 style="color: #e0e0e0; font-size: 1.25rem; margin-bottom: 0.75rem;">GDPR & Privacy Ready</h4>
                            <p style="color: #888; font-size: 0.95rem; line-height: 1.6;">
                                Export member data on request, delete records completely, maintain audit trails for compliance.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Import Capabilities -->
                <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, 230, 118, 0.2);">
                        <div style="color: #00e676; font-size: 0.9rem; margin-bottom: 1rem;">IMPORT FORMATS</div>
                        <div style="display: flex; flex-direction: column; gap: 0.75rem;">
                            <div style="display: flex; align-items: center; gap: 1rem; padding: 0.75rem; background: rgba(0, 230, 118, 0.1); border-radius: 8px;">
                                <span style="color: #00e676;">CSV</span>
                                <span style="color: #888;">Movements, WODs, Workouts</span>
                            </div>
                            <div style="display: flex; align-items: center; gap: 1rem; padding: 0.75rem; background: rgba(0, 230, 118, 0.1); border-radius: 8px;">
                                <span style="color: #00e676;">JSON</span>
                                <span style="color: #888;">User workout history</span>
                            </div>
                            <div style="display: flex; align-items: center; gap: 1rem; padding: 0.75rem; background: rgba(255, 193, 7, 0.1); border-radius: 8px;">
                                <span style="color: #ffc107;">Wodify</span>
                                <span style="color: #888;">Direct performance import</span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <h3 style="color: #00e676; font-family: 'Bebas Neue', sans-serif; font-size: 1.75rem; margin-bottom: 1rem;">EXTENSIVE IMPORT OPTIONS</h3>
                        <p style="color: #ccc; font-size: 1.1rem; line-height: 1.8; margin-bottom: 1.5rem;">
                            Migrating from another platform? ActaLog makes it easy. Import your movements, WODs, and workout history from CSV files. Coming from Wodify? We have a dedicated importer that handles their export format directly.
                        </p>
                        <p style="color: #888; font-size: 1rem; line-height: 1.7;">
                            Each import type includes a preview step so you can review what will be added before confirming. Duplicate detection prevents accidental data duplication, and you can choose to skip or update existing records.
                        </p>
                    </div>
                </div>

                <!-- Export Capabilities -->
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-bottom: 4rem;">
                    <div>
                        <h3 style="color: #00bcd4; font-family: 'Bebas Neue', sans-serif; font-size: 1.75rem; margin-bottom: 1rem;">COMPREHENSIVE EXPORTS</h3>
                        <p style="color: #ccc; font-size: 1.1rem; line-height: 1.8; margin-bottom: 1.5rem;">
                            Your data should always be accessible. Export movements, WODs, and complete workout histories to CSV or JSON formats. Members can export their own data anytime &mdash; no admin intervention required.
                        </p>
                        <p style="color: #888; font-size: 1rem; line-height: 1.7; margin-bottom: 1rem;">
                            Admins can generate full system backups that include the complete database. These backups can be used for disaster recovery, migrating to a new server, or archiving historical data.
                        </p>
                        <p style="color: #888; font-size: 1rem; line-height: 1.7;">
                            All exports are timestamped and logged in the audit trail for accountability and compliance tracking.
                        </p>
                    </div>
                    <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="color: #00bcd4; font-size: 0.9rem; margin-bottom: 1rem;">EXPORT OPTIONS</div>
                        <div style="display: flex; flex-direction: column; gap: 0.75rem;">
                            <div style="display: flex; align-items: center; gap: 1rem; padding: 0.75rem; background: rgba(0, 188, 212, 0.1); border-radius: 8px;">
                                <span style="color: #00bcd4;">CSV</span>
                                <span style="color: #888;">Movements, WODs, Templates</span>
                            </div>
                            <div style="display: flex; align-items: center; gap: 1rem; padding: 0.75rem; background: rgba(0, 188, 212, 0.1); border-radius: 8px;">
                                <span style="color: #00bcd4;">JSON</span>
                                <span style="color: #888;">Complete user workout data</span>
                            </div>
                            <div style="display: flex; align-items: center; gap: 1rem; padding: 0.75rem; background: rgba(255, 107, 53, 0.1); border-radius: 8px;">
                                <span style="color: #ff6b35;">ZIP</span>
                                <span style="color: #888;">Full system backup</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Batch Operations -->
                <div style="max-width: 900px; margin: 0 auto;">
                    <h3 style="color: #ffc107; font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; margin-bottom: 1.5rem; text-align: center;">BATCH OPERATIONS</h3>
                    <p style="color: #888; font-size: 1rem; line-height: 1.7; text-align: center; margin-bottom: 2rem;">
                        Managing a community means working with data at scale. ActaLog provides batch operations for common administrative tasks.
                    </p>
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
                        <div style="background: rgba(15, 29, 46, 0.8); border-radius: 12px; padding: 1.5rem; border: 1px solid rgba(255, 193, 7, 0.2);">
                            <div style="color: #ffc107; font-size: 1.1rem; margin-bottom: 0.5rem;">Bulk User Import</div>
                            <p style="color: #888; font-size: 0.95rem; line-height: 1.6;">Import multiple users at once from CSV. Perfect for onboarding a new class or migrating from another system.</p>
                        </div>
                        <div style="background: rgba(15, 29, 46, 0.8); border-radius: 12px; padding: 1.5rem; border: 1px solid rgba(255, 193, 7, 0.2);">
                            <div style="color: #ffc107; font-size: 1.1rem; margin-bottom: 0.5rem;">Movement Library Seeding</div>
                            <p style="color: #888; font-size: 0.95rem; line-height: 1.6;">Import complete movement libraries from CSV. Start with the included 182 movements or add your own custom set.</p>
                        </div>
                        <div style="background: rgba(15, 29, 46, 0.8); border-radius: 12px; padding: 1.5rem; border: 1px solid rgba(255, 193, 7, 0.2);">
                            <div style="color: #ffc107; font-size: 1.1rem; margin-bottom: 0.5rem;">WOD Library Loading</div>
                            <p style="color: #888; font-size: 0.95rem; line-height: 1.6;">Bulk import WODs from CSV with full metadata &mdash; name, description, type, time cap, and movement lists.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="diagonal-divider diagonal-divider-reverse"></div>
    </section>

    <!-- Performance Tracking Section -->
    <section class="features" id="performance">
        <div class="features-container">
            <div class="section-header">
                <h2 class="section-title">CELEBRATE YOUR ATHLETES</h2>
                <div class="section-line"></div>
            </div>

            <p style="color: #ccc; font-size: 1.15rem; line-height: 1.8; margin-bottom: 2rem; text-align: center; max-width: 800px; margin-left: auto; margin-right: auto;">
                When a member hits a PR, they get a notification. When that notification gets likes from other members, they know the community is cheering for them. Small touches that build big culture.
            </p>

            <div class="features-grid">
                <div class="feature-card">
                    <h3 class="feature-title">PR NOTIFICATIONS</h3>
                    <p class="feature-description">Automatic notifications when members hit personal records. Celebrate wins in real-time, not just on the whiteboard.</p>
                </div>
                <div class="feature-card">
                    <h3 class="feature-title">SOCIAL LIKES</h3>
                    <p class="feature-description">Members can like each other's achievements. Build community and friendly competition through recognition.</p>
                </div>
                <div class="feature-card">
                    <h3 class="feature-title">STREAK TRACKING</h3>
                    <p class="feature-description">Track consecutive training days. Gamify consistency and help members build the habit of showing up.</p>
                </div>
                <div class="feature-card">
                    <h3 class="feature-title">MOVEMENT LIBRARY</h3>
                    <p class="feature-description">182 movements categorized and ready. Olympic lifts, gymnastics, cardio, and accessories all organized.</p>
                </div>
                <div class="feature-card">
                    <h3 class="feature-title">WOD TEMPLATES</h3>
                    <p class="feature-description">314 benchmark WODs pre-loaded. The Girls, Heroes, Open workouts &mdash; all ready to program and track.</p>
                </div>
                <div class="feature-card">
                    <h3 class="feature-title">CUSTOM WORKOUTS</h3>
                    <p class="feature-description">Create your own templates for daily programming. Members log your WODs with a single tap.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="cta">
        <div class="cta-container">
            <h2 class="cta-title">READY TO UPGRADE YOUR BOX?</h2>
            <p class="cta-subtitle">Give your members the tools they deserve. Run it on your terms.</p>

            <div class="cta-buttons">
                <a href="tech.html" class="btn btn-primary btn-large">
                    <span>SEE THE TECH</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="index.html" class="btn btn-secondary btn-large">
                    <span>BACK TO HOME</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">Built for CrossFit Communities</p>
                </div>

                <div class="footer-links">
                    <div class="footer-column">
                        <h4 class="footer-heading">PRODUCT</h4>
                        <a href="index.html">For Athletes</a>
                        <a href="#members">Member Management</a>
                        <a href="#billing">Subscriptions</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>