222 lines
7.9 KiB
HTML
222 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Monster Dash Step Competition</title>
|
|
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
|
<link rel="stylesheet" href="styles.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<img src="monster-dash-logo.png" alt="Monster Dash Steps Contest" class="header-logo">
|
|
<nav>
|
|
<button class="tab-btn active" data-tab="log">Log Your Steps</button>
|
|
<button class="tab-btn" data-tab="monsters">Daily Monsters</button>
|
|
<button class="tab-btn" data-tab="teams">Team Standings</button>
|
|
<button class="tab-btn" data-tab="stats">Competition Stats</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Tip Banner -->
|
|
<div id="tip-banner" class="tip-banner">
|
|
<span class="tip-icon">💡</span>
|
|
<span id="tip-text" class="tip-text"></span>
|
|
</div>
|
|
|
|
<!-- Log Your Steps Tab -->
|
|
<div id="log-tab" class="tab-content active">
|
|
<div class="two-column-layout">
|
|
<!-- Left Column: Step Entry -->
|
|
<div class="entry-column">
|
|
<h2>Log Your Steps</h2>
|
|
|
|
<div class="form-section">
|
|
<div class="form-group">
|
|
<label for="team-select">1. Select Your Team:</label>
|
|
<select id="team-select" required>
|
|
<option value="">Choose your team...</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="name-select">2. Select Your Name:</label>
|
|
<select id="name-select" required disabled>
|
|
<option value="">First select a team...</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="step-date">3. Date:</label>
|
|
<input type="date" id="step-date" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="step-count">4. Steps:</label>
|
|
<input type="number" id="step-count" min="0" placeholder="Enter step count" required>
|
|
</div>
|
|
|
|
<button id="submit-steps" class="btn-primary">Submit Steps</button>
|
|
<div id="entry-message" class="message"></div>
|
|
</div>
|
|
|
|
<!-- CSV Import Section -->
|
|
<div class="import-section" style="display: none;">
|
|
<h3>Admin: Bulk Import</h3>
|
|
<p class="help-text">Upload CSV with columns: team_name, participant_name, email</p>
|
|
<input type="file" id="csv-file" accept=".csv">
|
|
<button id="import-csv" class="btn-secondary">Import CSV</button>
|
|
<div id="import-message" class="message"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column: Your History -->
|
|
<div class="history-column">
|
|
<h2>Your Step History</h2>
|
|
<div id="personal-stats" class="stats-box">
|
|
<p class="help-text">Select your name to see your history</p>
|
|
</div>
|
|
<div id="personal-history"></div>
|
|
|
|
<h2 style="margin-top: 30px;">Your Team</h2>
|
|
<div id="team-stats" class="stats-box">
|
|
<p class="help-text">Select your team to see team stats</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Daily Monsters Tab -->
|
|
<div id="monsters-tab" class="tab-content">
|
|
<h2>Daily Monster Challenge</h2>
|
|
|
|
<!-- How It Works Info Box -->
|
|
<div style="background: rgba(138, 43, 226, 0.15); border: 2px solid rgba(138, 43, 226, 0.4); border-radius: 12px; padding: 20px; margin-bottom: 25px;">
|
|
<h3 style="margin-top: 0; color: #bb86fc; font-size: 18px;">📖 How It Works</h3>
|
|
<p style="margin: 8px 0; line-height: 1.6;">
|
|
Each day, a new monster appears with a step goal. Your team must reach the goal to catch it!
|
|
</p>
|
|
<p style="margin: 8px 0; line-height: 1.6; color: #ff7700;">
|
|
<strong>⏰ Important:</strong> The <strong>"Active Challenge"</strong> shows yesterday's monster.
|
|
Log your steps from yesterday to see if your team caught it!
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Monster CSV Import Section -->
|
|
<div class="import-section" style="display: none;">
|
|
<h3>Admin: Import Monsters</h3>
|
|
<p class="help-text">Upload CSV with columns: date, monster_name, monster_description, step_goal, monster_icon</p>
|
|
<input type="file" id="monster-csv-file" accept=".csv">
|
|
<div style="margin: 10px 0;">
|
|
<label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
|
|
<input type="checkbox" id="monster-overwrite" style="cursor: pointer;">
|
|
<span style="color: #ff7700;">Overwrite all existing monsters (deletes all current monsters and catches)</span>
|
|
</label>
|
|
</div>
|
|
<button id="import-monsters" class="btn-secondary">Import Monsters</button>
|
|
<div id="monster-import-message" class="message"></div>
|
|
</div>
|
|
|
|
<!-- Today's Monster Section -->
|
|
<div id="todays-monster-section" class="monster-today">
|
|
<h3>Active Challenge</h3>
|
|
<p style="color: #999; font-size: 14px; margin: -5px 0 15px 0;">Enter your steps from yesterday to catch this monster!</p>
|
|
<div id="todays-monster-card" class="monster-card-today">
|
|
<p class="help-text">Loading active challenge...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Monster Timeline -->
|
|
<div id="monster-timeline-section">
|
|
<h3>Monster Timeline</h3>
|
|
<div id="monster-timeline" class="monster-timeline">
|
|
<p class="help-text">Loading monsters...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team Standings Tab -->
|
|
<div id="teams-tab" class="tab-content">
|
|
<h2>Team Standings</h2>
|
|
|
|
<div class="leaderboard-section">
|
|
<h3>Team Leaderboard</h3>
|
|
<table id="team-leaderboard" class="leaderboard">
|
|
<thead>
|
|
<tr>
|
|
<th>Rank</th>
|
|
<th>Team Name</th>
|
|
<th>Total Steps</th>
|
|
<th>Active</th>
|
|
<th>Avg Steps/Person</th>
|
|
<th>Monsters Caught</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="leaderboard-section">
|
|
<h3>Individual Leaderboard</h3>
|
|
<table id="individual-leaderboard" class="leaderboard">
|
|
<thead>
|
|
<tr>
|
|
<th>Rank</th>
|
|
<th>Name</th>
|
|
<th>Team</th>
|
|
<th>Total Steps</th>
|
|
<th>Days Logged</th>
|
|
<th>Avg Steps/Day</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Competition Stats Tab -->
|
|
<div id="stats-tab" class="tab-content">
|
|
<h2>Competition Statistics</h2>
|
|
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<h3>Total Steps</h3>
|
|
<div id="total-steps" class="stat-number">-</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>Total Participants</h3>
|
|
<div id="total-participants" class="stat-number">-</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>Average Daily Steps</h3>
|
|
<div id="avg-daily-steps" class="stat-number">-</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>Days Active</h3>
|
|
<div id="days-active" class="stat-number">-</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chart-container">
|
|
<h3>Team Comparison</h3>
|
|
<canvas id="team-comparison-chart"></canvas>
|
|
</div>
|
|
|
|
<div class="chart-container">
|
|
<h3>Top 10 Individuals</h3>
|
|
<canvas id="top-individuals-chart"></canvas>
|
|
</div>
|
|
|
|
<div class="chart-container">
|
|
<h3>Team Progress Over Time</h3>
|
|
<canvas id="team-progress-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|