<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Daily Protein and Calorie Requirements Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Include CSS and Google Fonts -->
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
<!-- Theme Toggle Button -->
<button id="theme-toggle">Toggle Dark Mode</button>
<div class="container">
<h1>Daily Protein and Calorie Requirements Calculator</h1>
<!-- Instructional Text -->
<div class="instructions">
<p><strong>Step 1:</strong> Type your weight into the box.</p>
<p><strong>Step 2:</strong> Select your weight management goal.</p>
<p><strong>Step 3:</strong> View your daily protein and calorie requirements below.</p>
</div>
<!-- Input Section -->
<div class="input-section">
<label for="weight">Enter your weight (kg):</label>
<input type="number" id="weight" name="weight" min="30" max="200" step="0.1" placeholder="e.g., 70">
</div>
<div class="input-section">
<label for="goal">Select your weight management goal:</label>
<select id="goal" name="goal">
<option value="">--Please choose an option--</option>
<option value="Intense Weight Loss" title="Recommended for rapid weight reduction; consult a nutritionist">Intense Weight Loss</option>
<option value="Moderate Weight Loss" title="Recommended for gradual weight loss">Moderate Weight Loss</option>
<option value="Maintenance" title="Maintain your current weight">Maintenance</option>
<option value="Moderate Weight Gain" title="Recommended for gradual weight gain">Moderate Weight Gain</option>
<option value="Intense Weight Gain" title="Recommended for rapid weight gain; consult a nutritionist">Intense Weight Gain</option>
</select>
</div>
<!-- Output Section -->
<div class="output-section">
<p id="protein-requirement">Daily Protein Requirement: -- grams</p>
<p id="calorie-requirement">Daily Calorie Requirement: -- calories</p>
</div>
<!-- Download Report Button -->
<button id="download-btn">Download Report</button>
</div>
<!-- Include JavaScript Files -->
<!-- FileSaver.js for downloading the report -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<!-- Your custom script -->
<script src="script.js"></script>
</body>
</html>