This commit is contained in:
louiscklaw
2025-01-31 19:47:49 +08:00
parent 32bc49f19a
commit 893eaee67b
129 changed files with 71057 additions and 0 deletions

View File

@@ -0,0 +1,249 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<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="content-container">
<div class="content-column">
<div style="padding: 1rem;">
<!-- content start -->
<div class="welcome">
<iframe src="https://giphy.com/embed/wMQX4lLIYRTKE" width="60" height="120" frameBorder="0" class="giphy-embed"
allowFullScreen></iframe>
<h1 class="title">
Welcome <br />to<br />
CalTally
</h1>
</div>
<!-- content end -->
</div>
<div style="margin-top: 0.2rem; padding: 0.5rem;">
<!-- content start -->
<div class="part1">
<h3 id="form-title">
Calculate Total Daily Energy Expenditure
</h3>
<div class="part1-body">
<form id="healthForm">
<div class="form-group">
<label for="nameInput">Nickname:</label>
<input type="text" min="1" class="form-control" id="nameInput" required />
</div>
<!--
<div class="form-group">
<label class="nickname-label" for="nameInput">Nickname:</label>
<input type="text" min="1" class="form-control" id="nameInput" required style="border: 1px solid black ;"/>
</div>
-->
<div class="form-group">
<label for="ageInput">Age:</label>
<input type="number" min="0" class="form-control" id="ageInput" required />
</div>
<div class="form-group">
<label for="genderInput">Gender:</label>
<!--
<select id="genderInput" class="form-control">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
-->
<div class="gender-selector">
<div>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">Male</label>
</div>
<div>/</div>
<div>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">Female</label>
</div>
</div>
</div>
<div class="form-group">
<label for="heightInput">Height (cm):</label>
<input type="number" min="0" class="form-control" id="heightInput" required />
</div>
<div class="form-group">
<label for="weightInput">Weight (kg):</label>
<input type="number" min="0" class="form-control" id="weightInput" required />
</div>
<div class="form-group">
<label for="activityLevelInput">Activity Level:</label>
<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>
<div class="form-footer">
<button type="submit" class="bmrbtn" id="submitBtn">
Calculate TDEE
</button>
</div>
</form>
</div>
</div>
<!-- content end -->
</div>
</div>
<div class="content-column">
<div style="padding: 1rem;">
<!-- content start -->
<div class="part2" id="questionContainer" style="display: none">
<div>
<div>
<h3>What did you eat today?</h3>
</div>
<div class="input-label">
<label>Food Weight:</label>
</div>
<div class="weight-group">
<input type="number" min="1" class="form-control" id="food-weight-input" required />
<div style="width: 80px;">
<select class="calorie" id="unit-select" class="form-control">
<option class="unit" value="g">g</option>
<option class="unit" value="oz">oz</option>
<option class="unit" value="lb">lb</option>
</select>
</div>
</div>
<div class="input-label">
<label>Food Name: </label>
</div>
<div>
<input type="text" class="form-control" id="food-name-input" required />
</div>
<div>
<button type="button" class="foodbtn" id="calculate-btn">
Get the Calories
</button>
</div>
</div>
</div>
<!-- content end -->
</div>
<div style="margin-top: 0.2rem; padding: 0.5rem;">
<!-- content start -->
<div id="part2result">
<div id="result-container">
</div>
</div>
<!-- content end -->
</div>
</div>
<div class="content-column">
<div style="padding: 1rem;">
<!-- content start -->
<div class="part3">
<div class="date">
<h1 class="today">Today</h1>
</div>
<div id="cal-value">
</div>
</div>
<!-- content end -->
</div>
<div style="margin-top: 0.2rem; padding: 0.5rem;">
<!-- content start -->
<div class="part4">
<div id="container" class="weekly-report-container">
<p>Weekly Report</p>
<div id="dateContainer">
<button class="datebtn" id="prevButton">&lt;</button>
<span id="currentDate"></span>
<button class="datebtn" id="nextButton">&gt;</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>
<!-- content end -->
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>