Spaces:

SURESHBEEKHANI
/

Heart_Attack_Prediction

Running

App Files Files Community

SURESHBEEKHANI commited on Oct 22, 2024

Commit

a7924dc

verified ·

1 Parent(s): 46d8269

Upload 4 files

Browse files

Files changed (4) hide show

static/img/bg.jpg +0 -0
static/img/ht.png +0 -0
static/styles.css +166 -0
templates/index.html +181 -0

static/img/bg.jpg ADDED Viewed

static/img/ht.png ADDED Viewed

static/styles.css ADDED Viewed

	@@ -0,0 +1,166 @@

+/* Base Styles */
+body {
+    font-family: 'Roboto', sans-serif;
+    background: url('static/img/bg.jpg') no-repeat center center fixed;
+    background-size: cover;
+    margin: 0;
+    padding: 0;
+    color: #333;
+}
+/* Header Styles */
+header {
+    background-color: #007bff; /* Primary color */
+    color: #fff;
+    padding: 2rem 0;
+    text-align: center;
+    position: relative;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+}
+header .logo {
+    max-width: 100px;
+    margin-bottom: 1rem;
+}
+/* Main Section */
+main {
+    padding: 2rem 0;
+}
+.container {
+    max-width: 600px; /* Centering the form */
+    margin: 0 auto;
+    padding: 0 1rem;
+}
+/* Section Title */
+h3 {
+    font-size: 1.8rem;
+    margin-bottom: 1.5rem;
+    text-align: center;
+    color: #007bff;
+}
+/* Form Styles */
+form {
+    background: linear-gradient(to bottom right, rgba(6, 142, 253, 0.9), rgba(240, 240, 240, 0.9));
+    padding: 2.5rem;
+    border-radius: 10px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
+    transition: transform 0.3s;
+    max-width: 600px;
+    width: 100%;
+    margin: 0 auto;
+}
+form:hover {
+    transform: translateY(-5px);
+}
+/* Form Inputs */
+.form-group label {
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    display: block; /* Ensure labels are block-level */
+}
+.form-control {
+    border-radius: 5px;
+    font-size: 1rem;
+    padding: 0.75rem;
+    border: 1px solid #ccc;
+    transition: border-color 0.3s, box-shadow 0.3s;
+    background: #fff; /* White background for inputs */
+    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+.form-control:focus {
+    border-color: #007bff;
+    box-shadow: 0 0 8px rgba(0, 123, 255, 0.25), inset 0 2px 5px rgba(0, 0, 0, 0.1);
+    outline: none;
+}
+/* Input Placeholder Styling */
+.form-control::placeholder {
+    color: #999; /* Light gray for placeholder */
+    font-style: italic; /* Italicize the placeholder text */
+}
+/* Submit Button */
+.btn-primary {
+    font-size: 1.2rem;
+    font-weight: 700;
+    padding: 0.75rem 1.5rem;
+    border-radius: 5px;
+    width: 100%;
+    transition: background-color 0.3s, transform 0.3s;
+    background-color: #007bff;
+    border: none;
+    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.25);
+}
+.btn-primary:hover {
+    background-color: #0056b3;
+    transform: translateY(-2px);
+}
+/* Prediction Result Styles */
+.prediction-result {
+    background-color: rgba(255, 255, 255, 0.9); /* White background with slight transparency */
+    border-radius: 15px; /* Rounded corners */
+    padding: 20px; /* Add padding for spacing */
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
+    margin-top: 30px; /* Space above */
+    width: 100%;
+}
+.result-title {
+    font-size: 24px; /* Larger font size for the title */
+    font-weight: bold; /* Bold text */
+    margin-bottom: 10px; /* Space below title */
+}
+.result-value {
+    font-size: 18px; /* Font size for result */
+    color: #007bff; /* Use primary color for emphasis */
+    font-weight: 700; /* Bold font weight */
+}
+/* Footer Styles */
+footer {
+    background-color: #007bff;
+    color: #fff;
+    text-align: center;
+    padding: 1rem;
+    margin-top: 2rem;
+}
+footer p {
+    margin: 0;
+    font-size: 1rem;
+}
+/* Responsive Design */
+@media (max-width: 768px) {
+    header h1 {
+        font-size: 2rem;
+    }
+    header p {
+        font-size: 1rem;
+    }
+    .container {
+        padding: 0 0.5rem; /* Reduced padding for smaller screens */
+    }
+    .btn-primary {
+        font-size: 1rem; /* Slightly smaller button on small screens */
+    }
+    h3 {
+        font-size: 1.5rem; /* Smaller section title on small screens */
+    }
+}

templates/index.html ADDED Viewed

	@@ -0,0 +1,181 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Heart Attack Prediction Tool - Predict your risk of heart attack using medical data.">
+    <title>Heart Attack Prediction</title>
+    <link rel="icon" href="static/img/ht.jpg" type="image/x-icon">
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+    <!-- Custom Stylesheet -->
+    <link rel="stylesheet" href="static/styles.css">
+    <!-- Bootstrap CSS -->
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+</head>
+<body>
+    <header class="bg-primary text-white text-center py-3">
+        <img src="static/img/ht.png" alt="Heart Health Logo" class="logo" style="max-width: 100px;">
+        <h1>Heart Attack Prediction</h1>
+        <p>Predict heart attack risk using an AI application Provide Details of Patient.</p>
+    </header>
+    <main>
+        <div class="container">
+            <form action="/predict" method="post" class="needs-validation" novalidate>
+                <!-- Sex Selection -->
+                <div class="form-group">
+                    <label for="sex">Sex:</label>
+                    <select id="sex" name="sex" class="form-control" required aria-label="Select your sex">
+                        <option value="" disabled selected>Select your sex</option>
+                        <option value="M">Male</option>
+                        <option value="F">Female</option>
+                    </select>
+                    <div class="invalid-feedback">Please select your sex.</div>
+                </div>
+                <!-- Chest Pain Type -->
+                <div class="form-group">
+                    <label for="chestPainType">Chest Pain Type:</label>
+                    <select id="chestPainType" name="chestPainType" class="form-control" required aria-label="Select chest pain type">
+                        <option value="" disabled selected>Select chest pain type</option>
+                        <option value="ATA">ATA</option>
+                        <option value="NAP">NAP</option>
+                        <option value="ASY">ASY</option>
+                        <option value="TA">TA</option>
+                    </select>
+                    <div class="invalid-feedback">Please select chest pain type.</div>
+                </div>
+                <!-- Resting ECG -->
+                <div class="form-group">
+                    <label for="restingECG">Resting ECG:</label>
+                    <select id="restingECG" name="restingECG" class="form-control" required aria-label="Select resting ECG result">
+                        <option value="" disabled selected>Select resting ECG result</option>
+                        <option value="Normal">Normal</option>
+                        <option value="ST">ST</option>
+                        <option value="LVH">LVH</option>
+                    </select>
+                    <div class="invalid-feedback">Please select resting ECG.</div>
+                </div>
+                <!-- Exercise Angina -->
+                <div class="form-group">
+                    <label for="exerciseAngina">Exercise Angina:</label>
+                    <select id="exerciseAngina" name="exerciseAngina" class="form-control" required aria-label="Select exercise angina">
+                        <option value="" disabled selected>Select exercise angina</option>
+                        <option value="N">No</option>
+                        <option value="Y">Yes</option>
+                    </select>
+                    <div class="invalid-feedback">Please select exercise angina.</div>
+                </div>
+                <!-- ST Slope -->
+                <div class="form-group">
+                    <label for="stSlope">ST Slope:</label>
+                    <select id="stSlope" name="stSlope" class="form-control" required aria-label="Select ST slope">
+                        <option value="" disabled selected>Select ST slope</option>
+                        <option value="Up">Up</option>
+                        <option value="Flat">Flat</option>
+                        <option value="Down">Down</option>
+                    </select>
+                    <div class="invalid-feedback">Please select ST slope.</div>
+                </div>
+                <!-- Age -->
+                <div class="form-group">
+                    <label for="age">Age:</label>
+                    <input type="number" id="age" name="age" class="form-control" required min="0" placeholder="Enter your age" aria-label="Enter your age">
+                    <div class="invalid-feedback">Please enter a valid age.</div>
+                </div>
+                <!-- Resting Blood Pressure -->
+                <div class="form-group">
+                    <label for="restingBP">Resting Blood Pressure (mm Hg):</label>
+                    <input type="number" id="restingBP" name="restingBP" class="form-control" required min="0" placeholder="Enter resting blood pressure" aria-label="Enter resting blood pressure">
+                    <div class="invalid-feedback">Please enter resting blood pressure.</div>
+                </div>
+                <!-- Cholesterol -->
+                <div class="form-group">
+                    <label for="cholesterol">Cholesterol (mg/dl):</label>
+                    <input type="number" id="cholesterol" name="cholesterol" class="form-control" required min="0" placeholder="Enter cholesterol level" aria-label="Enter cholesterol level">
+                    <div class="invalid-feedback">Please enter cholesterol level.</div>
+                </div>
+                <!-- Fasting Blood Sugar -->
+                <div class="form-group">
+                    <label for="fastingBS">Fasting Blood Sugar (mg/dl):</label>
+                    <input type="number" id="fastingBS" name="fastingBS" class="form-control" required min="0" placeholder="Enter fasting blood sugar" aria-label="Enter fasting blood sugar">
+                    <div class="invalid-feedback">Please enter fasting blood sugar.</div>
+                </div>
+                <!-- Max Heart Rate -->
+                <div class="form-group">
+                    <label for="maxHR">Max Heart Rate:</label>
+                    <input type="number" id="maxHR" name="maxHR" class="form-control" required min="0" placeholder="Enter max heart rate" aria-label="Enter max heart rate">
+                    <div class="invalid-feedback">Please enter max heart rate.</div>
+                </div>
+                <!-- Oldpeak -->
+                <div class="form-group">
+                    <label for="oldpeak">Oldpeak:</label>
+                    <input type="number" id="oldpeak" name="oldpeak" class="form-control" required step="0.1" min="0" placeholder="Enter oldpeak value" aria-label="Enter oldpeak value">
+                    <div class="invalid-feedback">Please enter a valid oldpeak value.</div>
+                </div>
+                <!-- Submit Button -->
+                <div class="text-center">
+                    <input class="btn btn-primary btn-lg" type="submit" value="Predict Risk of Heart Attack" />
+                </div>
+            </form>
+            <!-- Display prediction result -->
+            {% if results %}
+            <div class="alert alert-info mt-4 text-center prediction-result">
+                <h2 class="result-title">The prediction is:</h2>
+                <p class="result-value">{{ results }}</p>
+            </div>
+            {% endif %}
+        </div>
+    </main>
+    <footer class="text-center py-3">
+        <p>&copy; <span id="year"></span> Heart Health Initiative</p>
+    </footer>
+    <!-- Include Bootstrap JS for form validation -->
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Dynamic Year Update -->
+    <script>
+        document.getElementById("year").textContent = new Date().getFullYear();
+    </script>
+    <!-- Bootstrap Form Validation -->
+    <script>
+        (function() {
+            'use strict';
+            window.addEventListener('load', function() {
+                var forms = document.getElementsByClassName('needs-validation');
+                var validation = Array.prototype.filter.call(forms, function(form) {
+                    form.addEventListener('submit', function(event) {
+                        if (form.checkValidity() === false) {
+                            event.preventDefault();
+                            event.stopPropagation();
+                        }
+                        form.classList.add('was-validated');
+                    }, false);
+                });
+            }, false);
+        })();
+    </script>
+</body>
+</html>