|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<title>InBody Analysis</title> |
|
|
<style> |
|
|
body { |
|
|
font-family: Arial, sans-serif; |
|
|
padding: 40px; |
|
|
max-width: 700px; |
|
|
margin: auto; |
|
|
background-color: #000; |
|
|
color: #fff; |
|
|
} |
|
|
label { |
|
|
display: block; |
|
|
margin-top: 10px; |
|
|
} |
|
|
textarea, input, select { |
|
|
width: 100%; |
|
|
padding: 8px; |
|
|
margin-top: 5px; |
|
|
background-color: #222; |
|
|
color: #fff; |
|
|
border: 1px solid #444; |
|
|
} |
|
|
button { |
|
|
margin-top: 20px; |
|
|
padding: 10px 20px; |
|
|
font-size: 16px; |
|
|
background-color: #444; |
|
|
color: white; |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
} |
|
|
button:hover { |
|
|
background-color: #666; |
|
|
} |
|
|
.output { |
|
|
margin-top: 30px; |
|
|
padding: 20px; |
|
|
background-color: #111; |
|
|
border-radius: 10px; |
|
|
border: 1px solid #333; |
|
|
} |
|
|
.output h3 { |
|
|
margin-top: 20px; |
|
|
} |
|
|
.scrollable-section { |
|
|
max-height: 150px; |
|
|
overflow-y: auto; |
|
|
padding-right: 10px; |
|
|
margin-top: 10px; |
|
|
background-color: #000; |
|
|
border: 1px solid #444; |
|
|
padding: 10px; |
|
|
border-radius: 5px; |
|
|
} |
|
|
.loader { |
|
|
border: 4px solid #222; |
|
|
border-top: 4px solid #3498db; |
|
|
border-radius: 50%; |
|
|
width: 18px; |
|
|
height: 18px; |
|
|
animation: spin 1s linear infinite; |
|
|
display: inline-block; |
|
|
vertical-align: middle; |
|
|
margin-right: 8px; |
|
|
} |
|
|
@keyframes spin { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<h2>InBody AI Analysis</h2> |
|
|
|
|
|
<label for="name">Name:</label> |
|
|
<input id="name" type="text" placeholder="Enter your name" required> |
|
|
|
|
|
<label for="age">Age:</label> |
|
|
<input id="age" type="number" placeholder="Enter your age" required> |
|
|
|
|
|
<label for="sex">Sex:</label> |
|
|
<select id="sex"> |
|
|
<option value="male">Male</option> |
|
|
<option value="female">Female</option> |
|
|
</select> |
|
|
|
|
|
<label for="report">InBody Report:</label> |
|
|
<textarea id="report" rows="6" placeholder="Enter raw InBody report..."></textarea> |
|
|
|
|
|
<button id="analyze-btn">Analyze</button> |
|
|
|
|
|
|
|
|
<div id="loading" style="display: none; margin-top: 20px; font-weight: bold; color: lightblue;"> |
|
|
<span class="loader"></span> Processing your InBody report... |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="output"> |
|
|
<h3>🧠 Analysis:</h3> |
|
|
<div class="scrollable-section" id="analysis"></div> |
|
|
|
|
|
<h3>💪 Training Plan:</h3> |
|
|
<div class="scrollable-section" id="training"></div> |
|
|
|
|
|
<h3>🥗 Nutrition Plan:</h3> |
|
|
<div class="scrollable-section" id="nutrition"></div> |
|
|
|
|
|
<h3>📅 Weekly Regime:</h3> |
|
|
<div class="scrollable-section" id="regime"></div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.getElementById("analyze-btn").addEventListener("click", async () => { |
|
|
const name = document.getElementById("name").value; |
|
|
const age = parseInt(document.getElementById("age").value); |
|
|
const sex = document.getElementById("sex").value; |
|
|
const report = document.getElementById("report").value; |
|
|
|
|
|
const loadingDiv = document.getElementById("loading"); |
|
|
loadingDiv.style.display = "block"; |
|
|
|
|
|
try { |
|
|
const response = await fetch("http://localhost:8000/inbody", { |
|
|
method: "POST", |
|
|
headers: { |
|
|
"Content-Type": "application/json" |
|
|
}, |
|
|
body: JSON.stringify({ name, age, sex, report }) |
|
|
}); |
|
|
|
|
|
const result = await response.json(); |
|
|
|
|
|
document.getElementById("analysis").textContent = result.analysis; |
|
|
document.getElementById("training").textContent = result.training_plan; |
|
|
document.getElementById("nutrition").textContent = result.nutrition_plan; |
|
|
document.getElementById("regime").textContent = result.regime; |
|
|
} catch (error) { |
|
|
alert("Something went wrong. Please check your backend."); |
|
|
console.error(error); |
|
|
} finally { |
|
|
loadingDiv.style.display = "none"; |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
|
|
|
</body> |
|
|
</html> |
|
|
|
