|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Diabetes Data Logger</title> |
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
</head> |
|
<style> |
|
body { |
|
text-align: center; |
|
} |
|
button { |
|
background-color: #04AA6D; |
|
border: none; |
|
color: white; |
|
padding: 15px 32px; |
|
text-align: center; |
|
text-decoration: none; |
|
display: inline-block; |
|
font-size: 16px; |
|
border-radius: 12px |
|
} |
|
input { |
|
|
|
padding: 0 10px; |
|
text-align: center; |
|
transition-property: box-shadow, background; |
|
transition-duration: 150ms; |
|
transition-timing-function: ease-in-out; |
|
background-color: #FFFFFF; |
|
border-width: 2px; |
|
border-style: solid; |
|
border-color: #DAE3F3; |
|
border-radius: 0px; |
|
color: #272C34; |
|
width: 80%; |
|
left:10%; |
|
cursor: text; |
|
font-size: 14px; |
|
line-height: 20px; |
|
letter-spacing: 0px; |
|
font-weight: 400; |
|
font-style: normal; |
|
height: 30px; |
|
:hover{ |
|
box-shadow: 0px 2px 4px rgb(39 44 52 / 12%); |
|
} |
|
:focus{ |
|
transition-property: border-color, box-shadow, background; |
|
border-color: #39414D; |
|
outline: 0px; |
|
box-shadow: 0 0 0 3px #c5d2e7; |
|
} |
|
|
|
} |
|
</style> |
|
<body> |
|
<h1>بررسی سطح قند خون</h1> |
|
<label for="blood-sugar">سطح قند خون:</label> |
|
<input type="number" id="blood-sugar"><br> |
|
<label for="time">ساعت:</label> |
|
<input type="time" id="time"><br> |
|
<label for="meal">وعده غذایی:</label> |
|
<select id="meal"> |
|
<option value="قبل صبحانه">قبل صبحانه</option> |
|
<option value="قبل نهار">قبل نهار</option> |
|
<option value="قبل شام">قبل شام</option> |
|
</select><br><br> |
|
<button onclick="saveData()">ذخیره</button><br><br> |
|
<button onclick="displayGraph()">نمودار تغییرات</button><br> |
|
<canvas id="myChart" width="400" height="200"></canvas><br><br><br> |
|
<div id='di'> |
|
|
|
</div> |
|
<script> |
|
let data = []; |
|
|
|
function saveData() { |
|
const bloodSugar = document.getElementById('blood-sugar').value; |
|
const time = document.getElementById('time').value; |
|
const meal = document.getElementById('meal').value; |
|
data.push({ bloodSugar, time, meal }); |
|
localStorage.setItem('diabetesData', JSON.stringify(data)); |
|
console.log('Data saved:', data); |
|
document.getElementById('blood-sugar').value = ''; |
|
document.getElementById('time').value = ''; |
|
|
|
} |
|
|
|
function displayGraph() { |
|
const savedData = JSON.parse(localStorage.getItem('diabetesData')); |
|
if (savedData) { |
|
const ctx = document.getElementById('myChart').getContext('2d'); |
|
const bloodSugarData = savedData.map(entry => entry.bloodSugar); |
|
const timeLabels = savedData.map(entry => entry.time + ' (' + entry.meal + ')'); |
|
const myChart = new Chart(ctx, { |
|
type: 'line', |
|
data: { |
|
labels: timeLabels, |
|
datasets: [{ |
|
label: 'Blood Sugar Level', |
|
data: bloodSugarData, |
|
backgroundColor: 'rgba(255, 99, 132, 0.2)', |
|
borderColor: 'rgba(255, 99, 132, 1)', |
|
borderWidth: 1 |
|
}] |
|
}, |
|
options: { |
|
scales: { |
|
y: { |
|
beginAtZero: true |
|
} |
|
} |
|
} |
|
}); |
|
} else { |
|
console.log('No data available for graphing.'); |
|
} |
|
document.getElementById('di').innerHTML = |
|
` |
|
<button onclick="window.location.href='https://pezh-login.hf.space'">بپرس و یاد بگیر</button> |
|
` |
|
} |
|
</script> |
|
</body> |
|
</html> |
