File size: 7,541 Bytes
7166038 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
<!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>
<!-- Error Message -->
{% 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 %}
<!-- Input Form -->
<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>
<!-- Results Section -->
{% 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>
|