|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Diet Like a Pro</title> |
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}"> |
|
|
</head> |
|
|
<body> |
|
|
<h1>Diet Like a Pro</h1> |
|
|
|
|
|
<div id="user-metrics"> |
|
|
<h2>Enter Your Metrics</h2> |
|
|
<form id="user-form"> |
|
|
<label for="age">Age:</label> |
|
|
<input type="number" id="age" required> |
|
|
|
|
|
<label for="gender">Gender:</label> |
|
|
<select id="gender" required> |
|
|
<option value="male">Male</option> |
|
|
<option value="female">Female</option> |
|
|
<option value="other">Other</option> |
|
|
</select> |
|
|
|
|
|
<label for="height-feet">Height (feet):</label> |
|
|
<input type="number" id="height-feet" required> |
|
|
|
|
|
<label for="height-inches">Height (inches):</label> |
|
|
<input type="number" id="height-inches" required> |
|
|
|
|
|
<label for="weight">Weight (lbs):</label> |
|
|
<input type="number" id="weight" required> |
|
|
|
|
|
<label for="target-weight">Target Weight (lbs):</label> |
|
|
<input type="number" id="target-weight" required> |
|
|
|
|
|
<label for="waist">Waist Circumference (inches):</label> |
|
|
<input type="number" id="waist" required> |
|
|
|
|
|
<label for="neck">Neck Circumference (inches):</label> |
|
|
<input type="number" id="neck" required> |
|
|
|
|
|
<label for="hip">Hip Circumference (inches):</label> |
|
|
<input type="number" id="hip" required> |
|
|
|
|
|
<label for="steps">Daily Steps:</label> |
|
|
<input type="number" id="steps" required> |
|
|
|
|
|
<label for="standing-hours">Standing Hours:</label> |
|
|
<input type="number" id="standing-hours" required> |
|
|
|
|
|
<button type="submit">Calculate</button> |
|
|
</form> |
|
|
</div> |
|
|
<div id="health-metrics"> |
|
|
<h3>Your BMI: <span id="bmi-value"></span></h3> |
|
|
<h3>Recommended Daily Calories: <span id="recommended-calories"></span></h3> |
|
|
<h3>Body Fat Percentage: <span id="body-fat-percentage"></span></h3> |
|
|
<h3>Lean Body Mass: <span id="lean-body-mass"></span></h3> |
|
|
<h3>Time to Reach Target Weight: <span id="target-weight-time"></span></h3> |
|
|
</div> |
|
|
<div id="recommendations"> |
|
|
<h2>Personalized Recommendations</h2> |
|
|
<div id="diet-recommendations"> |
|
|
<h3>Diet Recommendations:</h3> |
|
|
<ul id="diet-recommendations-list"></ul> |
|
|
</div> |
|
|
<div id="exercise-recommendations"> |
|
|
<h3>Exercise Recommendations:</h3> |
|
|
<ul id="exercise-recommendations-list"></ul> |
|
|
</div> |
|
|
</div> |
|
|
<div id="food-selection"> |
|
|
<h2>Select Food Items</h2> |
|
|
<div class="search-container"> |
|
|
<input type="text" id="food-search" placeholder="Search for food..."> |
|
|
<ul id="search-results"></ul> |
|
|
</div> |
|
|
<div class="flex-container"> |
|
|
<div> |
|
|
<h3>Selected Food Items:</h3> |
|
|
<ul id="selected-food-list"></ul> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3>Total Calories: <span id="total-calories">0</span></h3> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="visualization"> |
|
|
<h2>Your Plate</h2> |
|
|
<canvas id="belly-fat-canvas" width="300" height="300"></canvas> |
|
|
</div> |
|
|
|
|
|
|
|
|
<script src="{{ url_for('static', filename='js/app.js') }}"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
