175 lines
5.9 KiB
HTML
175 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>CalTally</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<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=Mali:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="big-container">
|
|
<div class="welcome">
|
|
<iframe src="https://giphy.com/embed/wMQX4lLIYRTKE" width="60" height="200" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
|
|
<h1 class="title">
|
|
Welcome <br />to<br />
|
|
CalTally
|
|
</h1>
|
|
</div>
|
|
<div class="part1">
|
|
<h3 id="form-title">Calculate Total Daily Energy Expenditure</h3>
|
|
<form id="healthForm">
|
|
<div class="form-group">
|
|
<label for="nameInput">Nickname:</label><br />
|
|
<input
|
|
type="text"
|
|
min="1"
|
|
class="form-control"
|
|
id="nameInput"
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="ageInput">Age:</label><br />
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
class="form-control"
|
|
id="ageInput"
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="genderInput">Gender:</label><br />
|
|
<select id="genderInput" class="form-control">
|
|
<option value="male">Male</option>
|
|
<option value="female">Female</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="heightInput">Height (cm):</label><br />
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
class="form-control"
|
|
id="heightInput"
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="weightInput">Weight (kg):</label><br />
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
class="form-control"
|
|
id="weightInput"
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="activityLevelInput">Activity Level:</label><br/>
|
|
<select
|
|
class="calorie"
|
|
id="activityLevelInput"
|
|
class="form-control"
|
|
>
|
|
<option value="sedentary">
|
|
Sedentary (little or no exercise)
|
|
</option>
|
|
<option value="lightlyActive">
|
|
Lightly Active (light exercise/sports 1-3 days/week)
|
|
</option>
|
|
<option value="moderatelyActive">
|
|
Moderately Active (moderate exercise/sports 3-5 days/week)
|
|
</option>
|
|
<option value="veryActive">
|
|
Very Active (hard exercise/sports 6-7 days/week)
|
|
</option>
|
|
<option value="superActive">
|
|
Super Active (very hard exercise/sports & physical job or
|
|
training)
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
|
|
|
|
<br />
|
|
<button type="submit" class="bmrbtn" id="submitBtn">
|
|
Calculate TDEE
|
|
</button>
|
|
</form>
|
|
<div id="result"></div>
|
|
</div>
|
|
<div class="part2" id="questionContainer" style="display: none">
|
|
<h3>What did you eat today?</h3>
|
|
<label>Food Weight:</label
|
|
><input type="number" class="calorie" id="food-weight-input" autocomplete="name" />
|
|
<select class="calorie" id="unit-select">
|
|
<option class="unit" value="g">g</option>
|
|
<option class="unit" value="oz">oz</option>
|
|
<option class="unit" value="lb">lb</option>
|
|
</select>
|
|
<br />
|
|
<label>Food Name: </label
|
|
><input type="text" class="calorie" id="food-name-input" autocomplete="name" />
|
|
<button type="button" class="foodbtn" id="calculate-btn">
|
|
Get the Calories
|
|
</button>
|
|
</div>
|
|
<div id="part2result"><div id="result-container"></div></div>
|
|
|
|
<div class="part3">
|
|
<div class="date">
|
|
<h1 class="today">Today</h1>
|
|
|
|
</div>
|
|
<div id="cal-value">
|
|
</div>
|
|
</div>
|
|
<div class="part4">
|
|
<div id="container">
|
|
<p>Weekly Report</p>
|
|
<div id="dateContainer">
|
|
<button class="datebtn" id="prevButton"><</button>
|
|
<span id="currentDate"></span>
|
|
<button class="datebtn" id="nextButton">></button>
|
|
</div>
|
|
<!-- <div class="barcontainer">
|
|
<div class="bar" id="bar1" style="height: 50%"></div>
|
|
<div class="day" id="day1"></div>
|
|
</div>
|
|
<div class="barcontainer">
|
|
<div class="bar" id="bar2"style="height: 50%"></div>
|
|
<div class="day" id="day2"></div>
|
|
</div>
|
|
|
|
<div class="barcontainer">
|
|
<div class="bar" id="bar3"style="height: 50%"></div>
|
|
<div class="day" id="day3"></div>
|
|
</div>
|
|
|
|
<div class="barcontainer">
|
|
<div class="bar" id="bar4"style="height: 50%"></div>
|
|
<div class="day" id="day4"></div>
|
|
</div>
|
|
|
|
<div class="barcontainer">
|
|
<div class="bar" id="bar5" style="height: 50%"></div>
|
|
<div class="day" id="day5"></div>
|
|
</div>
|
|
|
|
<div class="barcontainer">
|
|
<div class="bar" id="bar6"style="height: 50%"></div>
|
|
<div class="day" id="day6"></div>
|
|
</div>
|
|
<div class="barcontainer">
|
|
<div class="bar" id="bar7" style="height: 50%"></div>
|
|
<div class="day" id="day7"></div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
<script src="./index.js"></script>
|
|
</body>
|
|
</html>
|