139 lines
6.6 KiB
HTML
139 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Sport Science Coach</title>
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<header>
|
|
<h1><i class="fas fa-heartbeat"></i> Sport Science Coach</h1>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="data-upload">
|
|
<h2>Upload Your Health Data</h2>
|
|
<p>Upload your metrics and workouts CSV files to get personalized health recommendations.</p>
|
|
|
|
<div class="file-upload-container">
|
|
<div class="file-upload">
|
|
<label for="metrics-file">
|
|
<i class="fas fa-chart-line"></i> Metrics Data
|
|
<input type="file" id="metrics-file" accept=".csv">
|
|
</label>
|
|
<span id="metrics-filename">No file selected</span>
|
|
</div>
|
|
|
|
<div class="file-upload">
|
|
<label for="workouts-file">
|
|
<i class="fas fa-running"></i> Workouts Data
|
|
<input type="file" id="workouts-file" accept=".csv">
|
|
</label>
|
|
<span id="workouts-filename">No file selected</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="use-sample-data">
|
|
<button id="use-sample-data">Use Sample Data</button>
|
|
<span class="tooltip">Use pre-loaded sample data for demonstration</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="analysis-options">
|
|
<h2>Customize Your Analysis</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="options-row">
|
|
<div class="option-group">
|
|
<h3>Analysis Focus</h3>
|
|
<select id="analysis-focus" aria-label="Analysis Focus">
|
|
<option value="comprehensive">Comprehensive Analysis</option>
|
|
<option value="sleep">Sleep Quality</option>
|
|
<option value="stress">Stress Management</option>
|
|
<option value="workout">Workout Performance</option>
|
|
<option value="recovery">Recovery Patterns</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="option-group">
|
|
<h3>Recommendation Style</h3>
|
|
<select id="recommendation-style" aria-label="Recommendation Style">
|
|
<option value="moderate">Moderate</option>
|
|
<option value="conservative">Conservative</option>
|
|
<option value="aggressive">Aggressive</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="option-group">
|
|
<h3>Report Detail</h3>
|
|
<select id="report-detail" aria-label="Report Detail Level">
|
|
<option value="detailed">Detailed</option>
|
|
<option value="summary">Summary</option>
|
|
<option value="comprehensive">Comprehensive</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="options-row advanced-row">
|
|
<div class="option-group">
|
|
<h3>Advanced Options</h3>
|
|
<div class="checkbox-option">
|
|
<input type="checkbox" id="show-gpt-input" aria-label="Show GPT-4.1 Input Data">
|
|
<label for="show-gpt-input">Show data sent to GPT-4.1</label>
|
|
</div>
|
|
</div>
|
|
<div class="option-group">
|
|
<h3>Sleep Goal</h3>
|
|
<label for="sleep-goal-input">Sleep Goal (hours/night):</label>
|
|
<input type="number" id="sleep-goal-input" min="0" step="0.1" placeholder="e.g. 8">
|
|
<span class="tooltip">Set your target sleep duration per night</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="custom-prompt">
|
|
<h3>Custom Instructions (Optional)</h3>
|
|
<textarea id="custom-prompt" placeholder="Add any specific instructions or questions you'd like addressed in your report..."></textarea>
|
|
</div>
|
|
|
|
<button id="generate-report" class="primary-button">Generate Health Report</button>
|
|
</section>
|
|
|
|
<section class="report-section hidden">
|
|
<div class="report-header">
|
|
<h2>Your Health & Fitness Report</h2>
|
|
<div class="report-actions">
|
|
<button id="download-report"><i class="fas fa-download"></i> Download PDF</button>
|
|
<button id="new-analysis"><i class="fas fa-redo"></i> New Analysis</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="report-content">
|
|
<div class="loading-indicator hidden">
|
|
<div class="spinner"></div>
|
|
<p>Analyzing your health data...</p>
|
|
</div>
|
|
|
|
<div id="report-container"></div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<p>Sport Science Coach | Powered by OpenAI GPT-4.1</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="js/config.js"></script>
|
|
<script src="js/data-processor.js"></script>
|
|
<script src="js/openai-service.js"></script>
|
|
<script src="js/charts.js"></script>
|
|
<script src="js/report-generator.js"></script>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|