update,
This commit is contained in:
249
givefortune/task1/testweb/index.html
Normal file
249
givefortune/task1/testweb/index.html
Normal 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"><</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>
|
||||
<!-- content end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="./index.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
Reference in New Issue
Block a user