Skip to content

W
web_programming
Commit 7a98f3f2 authored by rattanaporn saysee's avatar rattanaporn saysee
Browse files
Options

web

parents
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1472 additions and 0 deletions
About.html 0 → 100644
View file @ 7a98f3f2
<!DOCTYPE html>
<html lang="en">
<head>
<title>Team</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://v40.pingendo.com/assets/4.0.0/default/theme.css" type="text/css">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar3SupportedContent"
aria-controls="navbar3SupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-light" href="home.php">
<h5>หน้าแรก</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="BMI.html">
<h5>คำนวณหาดัชนีมวลกาย</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="Weight.html">
<h5>คำนวณน้ำหนักที่เหมาะสม</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="Cal.html">
<h5>คำนวนอัตราการเผาผลาญพลังงาน</h5>
</a>
</li>
<li class="nav-item text-light">
<a class="nav-link" href="search.php">
<h5>ตารางแคลอรี่</h5>
</a>
</li>
<a class="ml-3 btn navbar-btn btn-warning text-dark" href="About.html">
<h5>Team</h5>
</a>
</ul>
</div>
</div>
</nav>
<div class="py-5 text-center">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Project Team Web Programming</h1>
</div>
</div>
<div class="row">
<div class="col-md-4 p-4">
<img class="img-fluid d-block rounded-circle mx-auto" src="pom.png">
<p class="my-4"></p>
<p>
<b>POM</b>
<br>Rattanaporn Saysee</p>
<a href="https://www.facebook.com/rattanaporn.saysee" target="blank">
<i class="fa fa-fw fa-facebook fa-3x "></i>
</a>
<a href="https://twitter.com" target="blank">
<i class="fa fa-fw fa-twitter fa-3x "></i>
</a>
<a href="https://www.instagram.com/pom3986" target="blank">
<i class="fa fa-fw fa-instagram fa-3x "></i>
</a>
</div>
<div class="col-md-4 p-4">
<img class="img-fluid d-block rounded-circle mx-auto" src="praew.jpg">
<p class="my-4"></p>
<p>
<b>PRAEW</b>
<br>Aomnsiri Unkham</p>
<a href="https://www.facebook.com/profile.php?id=100016875767560" target="blank">
<i class="fa fa-fw fa-facebook fa-3x "></i>
</a>
<a href="https://twitter.com/PraewmiAU" target="blank">
<i class="fa fa-fw fa-twitter fa-3x "></i>
</a>
<a href="https://www.instagram.com/praewly_amonsiri" target="blank">
<i class="fa fa-fw fa-instagram fa-3x "></i>
</a>
</div>
<div class="col-md-4 p-4">
<img class="img-fluid d-block rounded-circle mx-auto" src="aod.jpg">
<p class="my-4"></p>
<p>
<b>AOD</b>
<br>Teerapong Wonganan</p>
<a href="https://www.facebook.com/aodzii.teerapong" target="blank">
<i class="fa fa-fw fa-facebook fa-3x "></i>
</a>
<a href="https://twitter.com/Aodziii" target="blank">
<i class="fa fa-fw fa-twitter fa-3x "></i>
</a>
<a href="https://www.instagram.com/aodziixx" target="blank">
<i class="fa fa-fw fa-instagram fa-3x "></i>
</a>
</div>
</div>
</div>
</div>
</html>
\ No newline at end of file
BMI.html 0 → 100644
View file @ 7a98f3f2
<!DOCTYPE html>
<html>
<head>
<title>คำนวณหาดัชนีมวลกาย</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://v40.pingendo.com/assets/4.0.0/default/theme.css" type="text/css">
</head>
<style>
button{
background: teal;
color:white;
}
</style>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar3SupportedContent"
aria-controls="navbar3SupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-light" href="home.php">
<h5>หน้าแรก</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="BMI.html">
<h5>คำนวณหาดัชนีมวลกาย</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="Weight.html">
<h5>คำนวณน้ำหนักที่เหมาะสม</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="Cal.html">
<h5>คำนวนอัตราการเผาผลาญพลังงาน</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="search.php">
<h5>ตารางแคลอรี่</h5>
</a>
</li>
<a class="ml-3 btn navbar-btn btn-warning text-dark" href="About.html">
<h5>Team</h5>
</a>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-7 align-self-center text-lg-left text-center">
<h1 class="mb-0 mt-4 display-4">
<div class="primary shadowed">BMI Calculator
<br>คำนวณหาดัชนีมวลกายของคุณ</div>
</h1>
<br>
<h2>BMI คืออะไร?</h2>
<h4>
<p>BMI ย่อมาจาก Body Mass Index โดยคำนวณจาก 2 ปัจจัย คือ น้ำหนัก และ ส่วนสูง แต่ BMI ไม่สามารถ วัดปริมาณไขมัน หรือ
กล้ามเนื้อในร่างกายได้ จึงใช้ได้คร่าวๆในการประเมิณน้ำหนักที่เหมาะสม ให้สมส่วนตามความสูง ค่าของ BMI จึงเป็นตัวชี้มวลร่างกายได้คร่าว
ถึงความพอดี ความอ้วน ความผอม จากการประเมิณของน้ำหนัก และ ส่วนสูง</p>
</h4>
</div>
<div class="col-lg-5 p-3">
<form class="p-4" method="post">
<div class="form-group">
<h4>
<label>น้ำหนัก ( kg./กิโลกรัม )</label>
</h4>
<input type="number" class="form-control" id="weight" oninput=" BMIcalc()">
<strong>
<font id="Wnative" color='red'></font>
</strong>
<h4>
<label for="Inputhight">ความสูง ( cm./เซนติเมตร )</label>
</h4>
<input type="number" class="form-control" id="height" oninput=" BMIcalc()">
<strong>
<font id="Hnative" color='red'></font>
</strong>
</div>
<font color='darkcyan'>
<h4><span id="totalCals"></span></h4>
</font>
<button type = "reset" class="btn" onclick="clearr()"><h5>ตั้งค่าใหม่</h5></button>
</form>
<div class="embed-responsive embed-responsive-4by3 rounded">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Vb-nz6op8yg" allowfullscreen=""> </iframe>
</div>
</div>
</div>
</div>
<script>
function BMIcalc() {
var w = document.getElementById('weight');
var h = document.getElementById('height');
var w1 = parseInt(w.value);
var h1 = parseInt(h.value);
h1 = h1 / 100;
if (w1 <= 0) {
document.getElementById('Wnative').innerHTML = "*ค่าน้ำหนักที่กรอกเข้ามาจะต้องไม่ติดลบ"
}
else if (h1 <= 0) {
document.getElementById('Hnative').innerHTML = "*ค่าความสูงที่กรอกเข้ามาจะต้องไม่ติดลบ"
} else {
document.getElementById('Wnative').innerHTML = ''
document.getElementById('Hnative').innerHTML = ''
var BMI = ((w1) / (h1 * h1));
var resultMsg = "";
if (BMI < 16)
resultMsg = "ดัชนีมวลกายของคุณคือ" + BMI.toFixed(2) + "อยู่ในเกณฑ์ผอมมากไป"
else if (BMI <= 18.5)
resultMsg = "ดัชนีมวลกายของคุณคือ" + BMI.toFixed(2) + "อยู่ในเกณฑ์ผอม"
else if (BMI <= 25)
resultMsg = "ดัชนีมวลกายของคุณคือ" + BMI.toFixed(2) + "อยู่ในเกณฑ์ปกติ"
else if (BMI <= 30)
resultMsg = "ดัชนีมวลกายของคุณคือ" + BMI.toFixed(2) + "อยู่ในเกณฑ์น้ำหนักเกิน"
else if (BMI <= 35)
resultMsg = "ดัชนีมวลกายของคุณคือ" + BMI.toFixed(2) + "อยู่ในเกณฑ์น้ำหนักเกิน ระดับ 1"
else if (BMI <= 40)
resultMsg = "ดัชนีมวลกายของคุณคือ" + BMI.toFixed(2) + "อยู่ในเกณฑ์น้ำหนักเกิน ระดับ 2"
else if (BMI > 40)
resultMsg = "ดัชนีมวลกายของคุณคือ" + BMI.toFixed(2) + "อยู่ในเกณฑ์น้ำหนักเกิน ระดับ 3"
document.getElementById('totalCals').innerHTML = resultMsg
}
}
function clearr(){
document.getElementById('totalCals').innerHTML = ''
}
</script>
</body>
</html>
\ No newline at end of file
Cal.html 0 → 100644
View file @ 7a98f3f2
<!DOCTYPE html>
<html>
<head>
<title>คำนวนอัตราการเผาผลาญพลังงาน</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://v40.pingendo.com/assets/4.0.0/default/theme.css" type="text/css">
</head>
<style>
form{
font-size: 24px;
}
font{
color:darkcyan;
font-size: 26px;
font-weight:500;
}
button{
background:teal;
color:white;
}
</style>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar3SupportedContent"
aria-controls="navbar3SupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-light" href="home.php">
<h5>หน้าแรก</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="BMI.html">
<h5>คำนวณหาดัชนีมวลกาย</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="Weight.html">
<h5>คำนวณน้ำหนักที่เหมาะสม</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="Cal.html">
<h5>คำนวนอัตราการเผาผลาญพลังงาน</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="search.php">
<h5>ตารางแคลอรี่</h5>
</a>
</li>
<a class="ml-3 btn navbar-btn btn-warning text-dark" href="About.html">
<h5>Team</h5>
</a>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-7 align-self-center text-lg-left text-center">
<h1 class="mb-0 mt-4 display-4">
<div class="primary shadowed">BMR Calculator
<br>คำนวนอัตราการเผาผลาญพลังงานของคุณ </div>
</h1>
<br>
<h2>BMR คืออะไร?</h2>
<h4>
<p>BMR ย่อมาจาก Basal Metabolic Rate หรือ อัตราการเผาผลาญพลังงานของร่างกาย “ขณะพักผ่อน” คือเมื่อร่างกายอยู่นิ่งๆ ไม่มีกิจกรรมอื่นๆ
เป็นขณะที่ระบบย่อยพักงาน ซึ่งเป็นพลังงานที่ถูกใช้ไปเพียงเพื่อรักษาระดับการมีชีวิต เช่น หัวใจเต้น ปอด ตับ กล้ามเนื้อ
ผิวหนัง และ อื่นๆ การวัดค่า BMR เพื่อการนำไปเป็นฐานของการคำนวณพลังงานที่ต้องการต่อวัน โดยคำนวณจาก กิจกรรมต่อวันของแต่ละคน
โดยเฉลี่ย จะใช้ BMR คูณด้วย 1.2 ถึง 1.9 ขึ้นอยู่กับกิจกรรมและรูปแบบชีวิตของแต่ละคน</p>
</h4>
</div>
<div class="col-lg-5 p-3">
<form class="p-4" method="post">
เพศ :
<label>
<input id="female" type="radio" name="gender" oninput="calsPerDay()" /> หญิง </label>
<label>
<input id="male" type="radio" name="gender" oninput="calsPerDay()"/> ชาย </label>
<div class="form-group">
<label for="Inputweight">น้ำหนัก ( kg./กิโลกรัม )</label>
<input type="text" id="weight" name="weight" oninput="calsPerDay()">
</div>
<div class="form-group">
<label for="Inputhight">ความสูง ( cm./เซนติเมตร )</label>
<input type="text" id="height" name="height" oninput="calsPerDay()"> </div>
<div class="form-group">
<label for="Inputhight">อายุ ( yr./ปี )</label>
<input type="text" id="age" name="age" oninput="calsPerDay()"> </div>
<font>
ปริมาณการเผาผลาญพลังงานคือ
<span id="totalCals"></span> แคลอรี่/วัน
</font>
</br>
<button type="reset" class="btn" onclick="clearr()">
<h5>ตั้งค่าใหม่</h5>
</button>
</form>
<div class="embed-responsive embed-responsive-4by3 rounded">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/yFpa1RYZNpc" allowfullscreen=""> </iframe>
</div>
</div>
</div>
</div>
</div>
<script>
function find(id) {
return document.getElementById(id)
}
function calsPerDay() {
var age = find("age").value
var height = find("height").value
var weight = find("weight").value
var result = "";
if (find("male").checked)
result = (10 * weight) + (6.25 * height) - (5 * age)+5
else if (find("female").checked)
result = (10 * weight) + (6.25 * height) - (5 * age)-161
find("totalCals").innerHTML = result.toFixed(2)
}
function clearr() {
find("totalCals").innerHTML = ''
}
</script>
</body>
</html>
\ No newline at end of file
Weight.html 0 → 100644
View file @ 7a98f3f2
<!DOCTYPE html>
<html>
<head>
<title>คำนวณน้ำหนักที่เหมาะสม</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://v40.pingendo.com/assets/4.0.0/default/theme.css" type="text/css">
</head>
<style>
form{
font-size: 24px;
}
font{
color:darkcyan;
font-size: 26px;
font-weight:500;
}
button{
background: teal;
color:white;
}
</style>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar3SupportedContent" aria-controls="navbar3SupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-light" href="home.php">
<h5>หน้าแรก</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="BMI.html">
<h5>คำนวณหาดัชนีมวลกาย</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="Weight.html">
<h5>คำนวณน้ำหนักที่เหมาะสม</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Cal.html">
<h5>คำนวนอัตราการเผาผลาญพลังงาน</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="search.php">
<h5>ตารางแคลอรี่</h5>
</a>
</li>
<a class="ml-3 btn navbar-btn btn-warning text-dark" href="About.html">
<h5>Team</h5>
</a>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-7 align-self-center text-lg-left text-center">
<h1 class="mb-0 mt-4 display-4">
<div class="primary shadowed">Ideal weight calculator<br>คำนวณน้ำหนักที่เหมาะสมของคุณ </div>
</h1><br>
<h2>ค่าน้ำหนักที่เหมาะสมคืออะไร?</h2>
<h4><p>การคำนวณคำนวณค่าน้ำหนักที่เหมาะสม คือการแสดงผลช่วงน้ำหนัก 2 ตัวเลข ที่เป็นค่าน้ำหนักเหมาะสม เพื่อดูน้ำหนักที่ควรจะเป็นให้เหมาะกับส่วนสูงของแต่ละคนอย่างคร่าวๆ ค่าน้ำหนักที่สมส่วน และ สุขภาพดี จึงควรอยู่ระหว่าง ตัวเลขสองช่วงดังกล่าว</p>
<li> หากคุณหนักน้อยกว่าช่วงน้ำหนักที่แนะนำ แปลว่าคุณน้ำหนักน้อยเกินเกณฑ์ ควรเพิ่มน้ำหนัก</li>
<li> หากคุณหนักมากกว่าช่วงน้ำหนักที่แนะนำ แปลว่าคุณน้ำหนักมากเกินเกณฑ์ ควรลดน้ำหนัก</li>
</h4>
</div>
<div class="col-lg-5 p-3">
<form class="p-4" method="post">
เพศ :
<label>
<input id="female" type="radio" name="gender" onclick="calsWeight()"/> หญิง
</label>
<label>
<input id="male" type="radio" name="gender" onclick="calsWeight()"/> ชาย
</label>
<div class="form-group">
<label for="Inputhight">ความสูง ( cm./เซนติเมตร )</label>
<input type="text" id="height" placeholder="" oninput="calsWeight()"> </div>
<font>
ค่าน้ำหนักที่เหมาะสมคือ <span id="totalCals"></span> กิโลกรัม
</font>
</br>
<button type = "reset" class="btn" onclick="clearr()"><h5>ตั้งค่าใหม่</h5></button>
</form>
<div class="embed-responsive embed-responsive-4by3 rounded">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/yoQlfPnW9M0" allowfullscreen=""> </iframe>
</div>
</div>
</div>
</div>
<script>
function find(id) {
return document.getElementById(id)
}
function calsWeight() {
var height = find("height").value
var result = "";
if (find("male").checked)
result = (height-100)*0.9
else if (find("female").checked)
result = (height-100)*0.8
find("totalCals").innerHTML = Math.round(result)+" - "+Math.round(result+10)
}
function clearr(){
find("totalCals").innerHTML = ''
}
</script>
</body>
</html>
\ No newline at end of file
aod.jpg 0 → 100644
View file @ 7a98f3f2
aod.jpg

176 KB

css/component.css 0 → 100644
View file @ 7a98f3f2
.cbp-fwslider {
position: relative;
margin: 0 0 10px;
overflow: hidden;
padding: 40px 0 60px;
}
.cbp-fwslider ul {
margin: 0;
padding: 0;
white-space: nowrap;
list-style-type: none;
}
.cbp-fwslider ul li {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
transform: translateZ(0);
float: left;
display: block;
margin: 0;
padding: 0;
}
.cbp-fwslider ul li > a,
.cbp-fwslider ul li > div {
display: block;
text-align: center;
outline: none;
}
.cbp-fwslider ul li > a img {
border: none;
display: block;
margin: 0 auto;
max-width: 75%;
}
.cbp-fwslider nav span {
position: absolute;
top: 50%;
width: 50px;
height: 100px;
background: #47a3da;
color: #fff;
font-size: 50px;
text-align: center;
margin-top: -50px;
line-height: 100px;
cursor: pointer;
font-weight: normal;
}
.cbp-fwslider nav span:hover {
background: #378fc3;
}
.cbp-fwslider nav span.cbp-fwnext {
right: 0px;
}
.cbp-fwslider nav span.cbp-fwprev {
left: 0px;
}
.cbp-fwdots {
position: absolute;
bottom: 0px;
white-space: nowrap;
text-align: center;
width: 100%;
}
.cbp-fwdots span {
display: inline-block;
width: 18px;
height: 18px;
background: #ddd;
margin: 4px;
border-radius: 50%;
cursor: pointer;
}
.cbp-fwdots span:hover {
background: #999;
}
.cbp-fwdots span.cbp-fwcurrent {
background: #47a3da;
box-shadow: 0 0 0 2px #47a3da;
-webkit-transition: box-shadow 0.2s ease-in-out;
-moz-transition: box-shadow 0.2s ease-in-out;
transition: box-shadow 0.2s ease-in-out;
}
\ No newline at end of file
css/default.css 0 → 100644
View file @ 7a98f3f2
/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@font-face {
font-family: 'fontawesome';
src:url('../fonts/fontawesome.eot');
src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
url('../fonts/fontawesome.svg#fontawesome') format('svg'),
url('../fonts/fontawesome.woff') format('woff'),
url('../fonts/fontawesome.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body, html { font-size: 100%; padding: 0; margin: 0;}
/* Reset */
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
body {
font-family: 'Lato', Calibri, Arial, sans-serif;
color: #47a3da;
}
a {
color: #f0f0f0;
text-decoration: none;
}
a:hover {
color: #000;
}
.main,
.container > header {
width: 90%;
max-width: 70em;
margin: 0 auto;
padding: 0 1.875em 3.125em 1.875em;
}
.container > header {
padding: 2.875em 1.875em 1.875em;
}
.container > header h1 {
font-size: 2.125em;
line-height: 1.3;
margin: 0;
float: left;
font-weight: 400;
}
.container > header span {
display: block;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5em;
padding: 0 0 0.6em 0.1em;
}
.container > header nav {
float: right;
}
.container > header nav a {
display: block;
float: left;
position: relative;
width: 2.5em;
height: 2.5em;
background: #fff;
border-radius: 50%;
color: transparent;
margin: 0 0.1em;
border: 4px solid #47a3da;
text-indent: -8000px;
}
.container > header nav a:after {
content: attr(data-info);
color: #47a3da;
position: absolute;
width: 600%;
top: 120%;
text-align: right;
right: 0;
opacity: 0;
pointer-events: none;
}
.container > header nav a:hover:after {
opacity: 1;
}
.container > header nav a:hover {
background: #47a3da;
}
.icon-drop:before,
.icon-arrow-left:before {
font-family: 'fontawesome';
position: absolute;
top: 0;
width: 100%;
height: 100%;
speak: none;
font-style: normal;
font-weight: normal;
line-height: 2;
text-align: center;
color: #47a3da;
-webkit-font-smoothing: antialiased;
text-indent: 8000px;
padding-left: 8px;
}
.container > header nav a:hover:before {
color: #fff;
}
.icon-drop:before {
content: "\e000";
}
.icon-arrow-left:before {
content: "\f060";
}
food.sql 0 → 100644
View file @ 7a98f3f2
This diff is collapsed.
home.php 0 → 100644
View file @ 7a98f3f2
<!DOCTYPE html>
<html>
<head>
<title>หน้าแรก</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://v40.pingendo.com/assets/4.0.0/default/theme.css" type="text/css">
<link type="text/css" rel="stylesheet" href="css/component.css">
<script type="text/javascript" src="js/modernizr.custom.js"></script>
</head>
<body >
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar3SupportedContent" aria-controls="navbar3SupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-light" href="home.php">
<h5>หน้าแรก</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="BMI.html">
<h5>คำนวณหาดัชนีมวลกาย</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="Weight.html">
<h5>คำนวณน้ำหนักที่เหมาะสม</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="Cal.html">
<h5>คำนวนอัตราการเผาผลาญพลังงาน</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="search.php">
<h5>ตารางแคลอรี่</h5>
</a>
</li>
<a class="ml-3 btn navbar-btn btn-warning text-dark" href="About.html">
<h5>Team</h5>
</a>
</ul>
</div>
</div>
</nav>
<div id="cbp-fwslider" class="cbp-fwslider">
<ul>
<li>
<a href="#">
<img src="images/1.jpg" alt="img1"> </a>
</li>
<li>
<a href="#">
<img src="images/2.jpg" alt="img2"> </a>
</li>
<li>
<a href="#">
<img src="images/3.jpg" alt="img3"> </a>
</li>
<li>
<a href="#">
<img src="images/4.jpg" alt="img4"> </a>
</li>
<li>
<a href="#">
<img src="images/5.jpg" alt="img5"> </a>
</li>
<li>
<a href="#">
<img src="images/6.jpg" alt="img6"> </a>
</li>
<li>
<a href="#">
<img src="images/7.jpg" alt="img7"> </a>
</li>
<li>
<a href="#">
<img src="images/8.jpg" alt="img8"> </a>
</li>
<li>
<a href="#">
<img src="images/9.jpg" alt="img9"> </a>
</li>
<li>
<a href="#">
<img src="images/10.jpg" alt="img10"> </a>
</li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.cbpFWSlider.min.js"></script>
<script>
$( function() {
$( '#cbp-fwslider' ).cbpFWSlider();
} );
</script>
</body>
</html>
<!-- function carousel() { ภาพสไลด์เอง
var i;
var x = document.getElementsByClassName("mySlides"); ชื่อภาพ
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
} -->
\ No newline at end of file
js/animate-in.js 0 → 100644
View file @ 7a98f3f2
/**
* animate-in.js 1.0.0
* Animate elements on entrance
*
* Usage:
*
* Make sure to add this to the <head> of your page to avoid flickering on load
* Based on https://andycaygill.github.io/scroll-entrance/
*/
(function() {
//Set up defaults
var duration = "1000";
var heightOffset = 100;
// document.write("<style id='temp-animate-in'>*[class^='animate-in'], *[class*=' animate-in'] {display:none}</style>")
function isElementVisible(elem) {
var rect = elem.getBoundingClientRect();
//Return true if any of the following conditions are met:
return (
// The top is in view: the top is more than 0 and less than the window height (the top of the element is in view)
( (rect.top + heightOffset) >= 0 && (rect.top + heightOffset) <= window.innerHeight ) ||
// The bottom is in view: bottom position is greater than 0 and greater than the window height
( (rect.bottom + heightOffset) >= 0 && (rect.bottom + heightOffset) <= window.innerHeight ) ||
// The top is above the viewport and the bottom is below the viewport
( (rect.top + heightOffset) < 0 && (rect.bottom + heightOffset) > window.innerHeight )
)
}
function update() {
var nodes = document.querySelectorAll("*:not(.animate-in-done)[class^='animate-in'], *:not(.animate-in-done)[class*=' animate-in']")
for (var i = 0; i < nodes.length; i++) {
if (isElementVisible(nodes[i])) {
nodes[i].classList.remove("out-of-viewport")
nodes[i].classList.add("animate-in-done")
} else {
nodes[i].classList.add("out-of-viewport")
}
}
}
document.addEventListener("DOMContentLoaded", function(event) {
update()
// setTimeout(function() {
// document.querySelector("#temp-animate-in").remove()
// })
});
window.addEventListener("scroll", function() {
update()
})
})();
js/jquery.cbpFWSlider.js 0 → 100644
View file @ 7a98f3f2
/**
* jquery.cbpFWSlider.js v1.0.0
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2013, Codrops
* http://www.codrops.com
*/
;( function( $, window, undefined ) {
'use strict';
// global
var Modernizr = window.Modernizr;
$.CBPFWSlider = function( options, element ) {
this.$el = $( element );
this._init( options );
};
// the options
$.CBPFWSlider.defaults = {
// default transition speed (ms)
speed : 500,
// default transition easing
easing : 'ease'
};
$.CBPFWSlider.prototype = {
_init : function( options ) {
// options
this.options = $.extend( true, {}, $.CBPFWSlider.defaults, options );
// cache some elements and initialize some variables
this._config();
// initialize/bind the events
this._initEvents();
},
_config : function() {
// the list of items
this.$list = this.$el.children( 'ul' );
// the items (li elements)
this.$items = this.$list.children( 'li' );
// total number of items
this.itemsCount = this.$items.length;
// support for CSS Transitions & transforms
this.support = Modernizr.csstransitions && Modernizr.csstransforms;
this.support3d = Modernizr.csstransforms3d;
// transition end event name and transform name
// transition end event name
var transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd',
'MozTransition' : 'transitionend',
'OTransition' : 'oTransitionEnd',
'msTransition' : 'MSTransitionEnd',
'transition' : 'transitionend'
},
transformNames = {
'WebkitTransform' : '-webkit-transform',
'MozTransform' : '-moz-transform',
'OTransform' : '-o-transform',
'msTransform' : '-ms-transform',
'transform' : 'transform'
};
if( this.support ) {
this.transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ] + '.cbpFWSlider';
this.transformName = transformNames[ Modernizr.prefixed( 'transform' ) ];
}
// current and old item´s index
this.current = 0;
this.old = 0;
// check if the list is currently moving
this.isAnimating = false;
// the list (ul) will have a width of 100% x itemsCount
this.$list.css( 'width', 100 * this.itemsCount + '%' );
// apply the transition
if( this.support ) {
this.$list.css( 'transition', this.transformName + ' ' + this.options.speed + 'ms ' + this.options.easing );
}
// each item will have a width of 100 / itemsCount
this.$items.css( 'width', 100 / this.itemsCount + '%' );
// add navigation arrows and the navigation dots if there is more than 1 item
if( this.itemsCount > 1 ) {
// add navigation arrows (the previous arrow is not shown initially):
this.$navPrev = $( '<span class="cbp-fwprev">&lt;</span>' ).hide();
this.$navNext = $( '<span class="cbp-fwnext">&gt;</span>' );
$( '<nav/>' ).append( this.$navPrev, this.$navNext ).appendTo( this.$el );
// add navigation dots
var dots = '';
for( var i = 0; i < this.itemsCount; ++i ) {
// current dot will have the class cbp-fwcurrent
var dot = i === this.current ? '<span class="cbp-fwcurrent"></span>' : '<span></span>';
dots += dot;
}
var navDots = $( '<div class="cbp-fwdots"/>' ).append( dots ).appendTo( this.$el );
this.$navDots = navDots.children( 'span' );
}
},
_initEvents : function() {
var self = this;
if( this.itemsCount > 1 ) {
this.$navPrev.on( 'click.cbpFWSlider', $.proxy( this._navigate, this, 'previous' ) );
this.$navNext.on( 'click.cbpFWSlider', $.proxy( this._navigate, this, 'next' ) );
this.$navDots.on( 'click.cbpFWSlider', function() { self._jump( $( this ).index() ); } );
}
},
_navigate : function( direction ) {
// do nothing if the list is currently moving
if( this.isAnimating ) {
return false;
}
this.isAnimating = true;
// update old and current values
this.old = this.current;
if( direction === 'next' && this.current < this.itemsCount - 1 ) {
++this.current;
}
else if( direction === 'previous' && this.current > 0 ) {
--this.current;
}
// slide
this._slide();
},
_slide : function() {
// check which navigation arrows should be shown
this._toggleNavControls();
// translate value
var translateVal = -1 * this.current * 100 / this.itemsCount;
if( this.support ) {
this.$list.css( 'transform', this.support3d ? 'translate3d(' + translateVal + '%,0,0)' : 'translate(' + translateVal + '%)' );
}
else {
this.$list.css( 'margin-left', -1 * this.current * 100 + '%' );
}
var transitionendfn = $.proxy( function() {
this.isAnimating = false;
}, this );
if( this.support ) {
this.$list.on( this.transEndEventName, $.proxy( transitionendfn, this ) );
}
else {
transitionendfn.call();
}
},
_toggleNavControls : function() {
// if the current item is the first one in the list, the left arrow is not shown
// if the current item is the last one in the list, the right arrow is not shown
switch( this.current ) {
case 0 : this.$navNext.show(); this.$navPrev.hide(); break;
case this.itemsCount - 1 : this.$navNext.hide(); this.$navPrev.show(); break;
default : this.$navNext.show(); this.$navPrev.show(); break;
}
// highlight navigation dot
this.$navDots.eq( this.old ).removeClass( 'cbp-fwcurrent' ).end().eq( this.current ).addClass( 'cbp-fwcurrent' );
},
_jump : function( position ) {
// do nothing if clicking on the current dot, or if the list is currently moving
if( position === this.current || this.isAnimating ) {
return false;
}
this.isAnimating = true;
// update old and current values
this.old = this.current;
this.current = position;
// slide
this._slide();
},
destroy : function() {
if( this.itemsCount > 1 ) {
this.$navPrev.parent().remove();
this.$navDots.parent().remove();
}
this.$list.css( 'width', 'auto' );
if( this.support ) {
this.$list.css( 'transition', 'none' );
}
this.$items.css( 'width', 'auto' );
}
};
var logError = function( message ) {
if ( window.console ) {
window.console.error( message );
}
};
$.fn.cbpFWSlider = function( options ) {
if ( typeof options === 'string' ) {
var args = Array.prototype.slice.call( arguments, 1 );
this.each(function() {
var instance = $.data( this, 'cbpFWSlider' );
if ( !instance ) {
logError( "cannot call methods on cbpFWSlider prior to initialization; " +
"attempted to call method '" + options + "'" );
return;
}
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
logError( "no such method '" + options + "' for cbpFWSlider instance" );
return;
}
instance[ options ].apply( instance, args );
});
}
else {
this.each(function() {
var instance = $.data( this, 'cbpFWSlider' );
if ( instance ) {
instance._init();
}
else {
instance = $.data( this, 'cbpFWSlider', new $.CBPFWSlider( options, this ) );
}
});
}
return this;
};
} )( jQuery, window );
\ No newline at end of file
js/jquery.cbpFWSlider.min.js 0 → 100644
View file @ 7a98f3f2
(function(c,b,e){var d=b.Modernizr;c.CBPFWSlider=function(f,g){this.$el=c(g);this._init(f)};c.CBPFWSlider.defaults={speed:500,easing:"ease"};c.CBPFWSlider.prototype={_init:function(f){this.options=c.extend(true,{},c.CBPFWSlider.defaults,f);this._config();this._initEvents()},_config:function(){this.$list=this.$el.children("ul");this.$items=this.$list.children("li");this.itemsCount=this.$items.length;this.support=d.csstransitions&&d.csstransforms;this.support3d=d.csstransforms3d;var h={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd",msTransition:"MSTransitionEnd",transition:"transitionend"},k={WebkitTransform:"-webkit-transform",MozTransform:"-moz-transform",OTransform:"-o-transform",msTransform:"-ms-transform",transform:"transform"};if(this.support){this.transEndEventName=h[d.prefixed("transition")]+".cbpFWSlider";this.transformName=k[d.prefixed("transform")]}this.current=0;this.old=0;this.isAnimating=false;this.$list.css("width",100*this.itemsCount+"%");if(this.support){this.$list.css("transition",this.transformName+" "+this.options.speed+"ms "+this.options.easing)}this.$items.css("width",100/this.itemsCount+"%");if(this.itemsCount>1){this.$navPrev=c('<span class="cbp-fwprev">&lt;</span>').hide();this.$navNext=c('<span class="cbp-fwnext">&gt;</span>');c("<nav/>").append(this.$navPrev,this.$navNext).appendTo(this.$el);var l="";for(var g=0;g<this.itemsCount;++g){var f=g===this.current?'<span class="cbp-fwcurrent"></span>':"<span></span>";l+=f}var j=c('<div class="cbp-fwdots"/>').append(l).appendTo(this.$el);this.$navDots=j.children("span")}},_initEvents:function(){var f=this;if(this.itemsCount>1){this.$navPrev.on("click.cbpFWSlider",c.proxy(this._navigate,this,"previous"));this.$navNext.on("click.cbpFWSlider",c.proxy(this._navigate,this,"next"));this.$navDots.on("click.cbpFWSlider",function(){f._jump(c(this).index())})}},_navigate:function(f){if(this.isAnimating){return false}this.isAnimating=true;this.old=this.current;if(f==="next"&&this.current<this.itemsCount-1){++this.current}else{if(f==="previous"&&this.current>0){--this.current}}this._slide()},_slide:function(){this._toggleNavControls();var g=-1*this.current*100/this.itemsCount;if(this.support){this.$list.css("transform",this.support3d?"translate3d("+g+"%,0,0)":"translate("+g+"%)")}else{this.$list.css("margin-left",-1*this.current*100+"%")}var f=c.proxy(function(){this.isAnimating=false},this);if(this.support){this.$list.on(this.transEndEventName,c.proxy(f,this))}else{f.call()}},_toggleNavControls:function(){switch(this.current){case 0:this.$navNext.show();this.$navPrev.hide();break;case this.itemsCount-1:this.$navNext.hide();this.$navPrev.show();break;default:this.$navNext.show();this.$navPrev.show();break}this.$navDots.eq(this.old).removeClass("cbp-fwcurrent").end().eq(this.current).addClass("cbp-fwcurrent")},_jump:function(f){if(f===this.current||this.isAnimating){return false}this.isAnimating=true;this.old=this.current;this.current=f;this._slide()},destroy:function(){if(this.itemsCount>1){this.$navPrev.parent().remove();this.$navDots.parent().remove()}this.$list.css("width","auto");if(this.support){this.$list.css("transition","none")}this.$items.css("width","auto")}};var a=function(f){if(b.console){b.console.error(f)}};c.fn.cbpFWSlider=function(g){if(typeof g==="string"){var f=Array.prototype.slice.call(arguments,1);this.each(function(){var h=c.data(this,"cbpFWSlider");if(!h){a("cannot call methods on cbpFWSlider prior to initialization; attempted to call method '"+g+"'");return}if(!c.isFunction(h[g])||g.charAt(0)==="_"){a("no such method '"+g+"' for cbpFWSlider instance");return}h[g].apply(h,f)})}else{this.each(function(){var h=c.data(this,"cbpFWSlider");if(h){h._init()}else{h=c.data(this,"cbpFWSlider",new c.CBPFWSlider(g,this))}})}return this}})(jQuery,window);
\ No newline at end of file
js/modernizr.custom.js 0 → 100644
View file @ 7a98f3f2
/* Modernizr 2.6.2 (Custom Build) | MIT & BSD
* Build: http://modernizr.com/download/#-csstransforms-csstransforms3d-csstransitions-shiv-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes-load
*/
;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a){var e=a[d];if(!C(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["&#173;",'<style id="s',h,'">',a,"</style>"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=u.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e}),q.csstransforms=function(){return!!F("transform")},q.csstransforms3d=function(){var a=!!F("perspective");return a&&"webkitPerspective"in g.style&&w("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a},q.csstransitions=function(){return F("transition")};for(var G in q)y(q,G)&&(v=G.toLowerCase(),e[v]=q[G](),t.push((e[v]?"":"no-")+v));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)y(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},z(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e<g;e++)d.createElement(f[e]);return d}function p(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return r.shivMethods?n(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+l().join().replace(/\w+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(r,b.frag)}function q(a){a||(a=b);var c=m(a);return r.shivCSS&&!f&&!c.hasCSS&&(c.hasCSS=!!k(a,"article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}")),j||p(a,c),a}var c=a.html5||{},d=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,f,g="_html5shiv",h=0,i={},j;(function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,e.prefixed=function(a,b,c){return b?F(a,b,c):F(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};
\ No newline at end of file
js/navbar-ontop.js 0 → 100644
View file @ 7a98f3f2
/**
* navbar-ontop.js 1.0.0
* Add .navbar-ontop class to navbar when the page is scrolled to top
* Make sure to add this script to the <head> of page to avoid flickering on load
*/
(function() {
var className = "navbar-ontop"
// we start hidden, to avoid flickering
document.write("<style id='temp-navbar-ontop'>.navbar {opacity:0; transition: none !important}</style>")
function update() {
// toggle className based on the scrollTop property of document
var nav = document.querySelector(".navbar")
if (window.scrollY > 15)
nav.classList.remove(className)
else
nav.classList.add(className)
}
document.addEventListener("DOMContentLoaded", function(event) {
$(window).on('show.bs.collapse', function (e) {
$(e.target).closest("." + className).removeClass(className);
})
$(window).on('hidden.bs.collapse', function (e) {
update()
})
update()
// still hacking to avoid flickering
setTimeout(function() {
document.querySelector("#temp-navbar-ontop").remove()
})
});
window.addEventListener("scroll", function() {
update()
})
})();
\ No newline at end of file
js/smooth-scroll.js 0 → 100644
View file @ 7a98f3f2
/**
* smooth-scroll.js 1.0.0
* Make your page scrolling smooth
* Requires JQuery - Does not work with JQuery slim
* Based on https://css-tricks.com/snippets/jquery/smooth-scrolling/
*/
(function() {
var duration = 500
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.click(function(event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']')
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault()
$('html, body').animate({
scrollTop: target.offset().top
},
duration, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});
})();
pom.png 0 → 100644
View file @ 7a98f3f2
This diff is collapsed.
praew.jpg 0 → 100644
View file @ 7a98f3f2
praew.jpg

39.5 KB

search.php 0 → 100644
View file @ 7a98f3f2
<?php
// mysqli_query("SET NAME UTF-8");
if(isset($_POST['search'])){
$valueToSearch = $_POST['valueToSeach'];
$query = "SELECT * FROM `food` WHERE fname LIKE '%".$valueToSearch."%' OR cal LIKE '".$valueToSearch."%'";
$search_result = filterTable($query);
}else{
$query = "SELECT * FROM `food`";
$search_result = filterTable($query);
}
function filterTable($query){
$connect = mysqli_connect("localhost","root","","dbweb");
mysqli_set_charset($connect,"utf8");
$filter_Result = mysqli_query($connect,$query);
return $filter_Result;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>ตารางแคลอรี่</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://v40.pingendo.com/assets/4.0.0/default/theme.css" type="text/css">
<link type="text/css" rel="stylesheet" href="css/component.css">
<script type="text/javascript" src="js/modernizr.custom.js"></script>
<style>
table,tr,th,td{
border: 1px solid lightseagreen;
width: 900px;
font-size:18px;
padding: 5px;
text-align: center;
}
th{
background:lightseagreen;
font-weight: bold;
font-size:20px;
color: white;
}
</style>
</head>
<body >
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar3SupportedContent" aria-controls="navbar3SupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-light" href="home.php">
<h5>หน้าแรก</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="BMI.html">
<h5>คำนวณหาดัชนีมวลกาย</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="Weight.html">
<h5>คำนวณน้ำหนักที่เหมาะสม</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="Cal.html">
<h5>คำนวนอัตราการเผาผลาญพลังงาน</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="search.php">
<h5>ตารางแคลอรี่</h5>
</a>
</li>
<a class="ml-3 btn navbar-btn btn-warning text-dark" href="About.html">
<h5>Team</h5>
</a>
</ul>
</div>
</div>
</nav>
<form class="form-inline my-2 my-lg-0 p-2" method = "POST" action = "#">
<font color = "white">__________________________________________________________________</font>
<input class="form-control form-control-lg w-50 m-1 p-2 " align="center" type="text" name="valueToSeach" placeholder="ใส่ชื่ออาหาร,แคลอรี่">
<button class="btn btn-link my-2 my-sm-0" type="submit" name="search">
<i class="fa d-inline fa-lg fa-search text-primary"></i>
</button>
</form>
<table align="center">
<tr>
<th>ชื่ออาหาร</th>
<th>ปริมาณ/หน่วย</th>
<th>แคลอรี่</th>
</tr>
<?php while($row = mysqli_fetch_array($search_result)):?>
<tr>
<td><?php echo $row['fname'];?></td>
<td><?php echo $row['num'];?></td>
<td><?php echo $row['cal'];?></td>
</tr>
<?php endwhile;?>
</table>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment