site/features.html
Rama main · réplica de lectura del repositorio original.
<!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 — 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 — 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 — 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 — 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 — 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 • 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 — 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 — 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 — 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 — 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>© 2026 ActaLog. Made for athletes, by athletes.</p>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>