|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Diabetes Risk Assessment</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
</head> |
|
|
<body class="bg-gray-100 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<h1 class="text-3xl font-bold text-center mb-8 text-gray-800">Diabetes Risk Assessment Tool</h1> |
|
|
|
|
|
|
|
|
{% if error %} |
|
|
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4" role="alert"> |
|
|
<p class="font-bold">Error:</p> |
|
|
<p>{{ error }}</p> |
|
|
</div> |
|
|
{% endif %} |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md mb-8"> |
|
|
<form method="POST" action="{{ url_for('home') }}" class="space-y-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label for="Pregnancies" class="block text-sm font-semibold text-gray-700 mb-1">Number of Pregnancies</label> |
|
|
<input type="number" id="Pregnancies" name="Pregnancies" min="0" max="20" step="1" |
|
|
class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" |
|
|
value="{{ input_data.Pregnancies if input_data else '' }}" required> |
|
|
</div> |
|
|
<div> |
|
|
<label for="Glucose" class="block text-sm font-semibold text-gray-700 mb-1">Glucose Level (mg/dL)</label> |
|
|
<input type="number" id="Glucose" name="Glucose" min="0" max="500" |
|
|
class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" |
|
|
value="{{ input_data.Glucose if input_data else '' }}" required> |
|
|
</div> |
|
|
<div> |
|
|
<label for="BloodPressure" class="block text-sm font-semibold text-gray-700 mb-1">Blood Pressure (mm Hg)</label> |
|
|
<input type="number" id="BloodPressure" name="BloodPressure" min="0" max="300" |
|
|
class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" |
|
|
value="{{ input_data.BloodPressure if input_data else '' }}" required> |
|
|
</div> |
|
|
<div> |
|
|
<label for="SkinThickness" class="block text-sm font-semibold text-gray-700 mb-1">Skin Thickness (mm)</label> |
|
|
<input type="number" id="SkinThickness" name="SkinThickness" min="0" max="100" |
|
|
class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" |
|
|
value="{{ input_data.SkinThickness if input_data else '' }}" required> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label for="Insulin" class="block text-sm font-semibold text-gray-700 mb-1">Insulin Level (mu U/ml)</label> |
|
|
<input type="number" id="Insulin" name="Insulin" min="0" max="1000" |
|
|
class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" |
|
|
value="{{ input_data.Insulin if input_data else '' }}" required> |
|
|
</div> |
|
|
<div> |
|
|
<label for="BMI" class="block text-sm font-semibold text-gray-700 mb-1">BMI</label> |
|
|
<input type="number" id="BMI" name="BMI" min="0" max="100" step="0.1" |
|
|
class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" |
|
|
value="{{ input_data.BMI if input_data else '' }}" required> |
|
|
</div> |
|
|
<div> |
|
|
<label for="DiabetesPedigreeFunction" class="block text-sm font-semibold text-gray-700 mb-1">Diabetes Pedigree Function</label> |
|
|
<input type="number" id="DiabetesPedigreeFunction" name="DiabetesPedigreeFunction" min="0" max="3" step="0.001" |
|
|
class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" |
|
|
value="{{ input_data.DiabetesPedigreeFunction if input_data else '' }}" required> |
|
|
</div> |
|
|
<div> |
|
|
<label for="Age" class="block text-sm font-semibold text-gray-700 mb-1">Age</label> |
|
|
<input type="number" id="Age" name="Age" min="0" max="120" |
|
|
class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" |
|
|
value="{{ input_data.Age if input_data else '' }}" required> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-center mt-8"> |
|
|
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg shadow-md transition duration-300 text-lg"> |
|
|
Get Assessment |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
|
|
|
{% if result %} |
|
|
<div class="bg-white p-8 rounded-lg shadow-md space-y-6"> |
|
|
<div class="text-center"> |
|
|
<h2 class="text-2xl font-bold mb-4">Assessment Result</h2> |
|
|
<p class="text-lg {% if 'diabetic' in result %}text-red-600{% else %}text-green-600{% endif %} font-semibold"> |
|
|
{{ result }} |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
{% if suggestions %} |
|
|
<div class="mt-8"> |
|
|
<h3 class="text-xl font-bold mb-4">Personalized Recommendations</h3> |
|
|
<div class="space-y-4"> |
|
|
{% for category, tips in suggestions.items() %} |
|
|
<div> |
|
|
<h4 class="font-semibold">{{ category }}</h4> |
|
|
<ul class="list-disc pl-6 mt-2"> |
|
|
{% for tip in tips %} |
|
|
<li>{{ tip }}</li> |
|
|
{% endfor %} |
|
|
</ul> |
|
|
</div> |
|
|
{% endfor %} |
|
|
</div> |
|
|
</div> |
|
|
{% else %} |
|
|
<p class="text-center text-gray-600">No recommendations available at the moment.</p> |
|
|
{% endif %} |
|
|
</div> |
|
|
{% endif %} |
|
|
</div> |
|
|
</body> |
|
|
</html> |
|
|
|
