Log In Sign Up
Models:
Raymond King
RaymondKing/
stroke-risk-predictor
0
Downloads: 1
[15a331]: / templates / index.html

Download this file

151 lines (151 with data), 6.3 kB 

  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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Stroke Risk Predictor</title>

    <link

      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"

      rel="stylesheet"

    />

    <link

      rel="stylesheet"

      href="{{ url_for('static', filename='css/style.css') }}"

    />

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

  </head>

  <body>

    <header>

      <nav>

        <div class="logo"></div>

      </nav>

    </header>

    <main class="container">

      <h1>Stroke Risk <span class="highlight">Predictor</span></h1>

      <p class="subtitle">Enter your details to estimate your stroke risk.</p>

      <div class="flex-container">

        <div class="left-section">

          <form id="risk-form">

            <div class="form-row">

              <div class="input-group">

                <label for="age">Age</label>

                <input type="number" id="age" name="age" required min="0" max="120" />

              </div>

              <div class="input-group">

                <label for="hypertension">Hypertension</label>

                <select id="hypertension" name="hypertension" required>

                  <option value="0">No</option>

                  <option value="1">Yes</option>

                </select>

              </div>

            </div>

            <div class="form-row">  

              <div class="input-group">

                <label for="heart_disease">Heart Disease</label>

                <select id="heart_disease" name="heart_disease" required>

                  <option value="0">No</option>

                  <option value="1">Yes</option>

                </select>

              </div>

              <div class="input-group">

                <label for="ever_married">Ever Married</label>

                <select id="ever_married" name="ever_married" required>

                  <option value="0">No</option>

                  <option value="1">Yes</option>

                </select>

              </div>

            </div>

            <div class="form-row">

              <div class="input-group">

                <label for="residence_type">Residence Type</label>

                <select id="residence_type" name="residence_type" required>

                  <option value="0">Rural</option>

                  <option value="1">Urban</option>

                </select>

              </div>

              <div class="input-group">

                <label for="bmi">BMI</label>

                <input

                  type="number"

                  id="bmi"

                  name="bmi"

                  required

                  min="0"

                  max="60"

                  step="0.1"

                />

                <button type="button" id="calculate-bmi">Calculate BMI</button>

              </div>

            </div>

            <div id="bmi-calculator" class="hidden">

              <div class="input-group">

                <label for="height">Height (cm)</label>

                <input type="number" id="height" min="0" step="0.1" />

              </div>

              <div class="input-group">

                <label for="weight">Weight (kg)</label>

                <input type="number" id="weight" min="0" step="0.1" />

              </div>

              <button type="button" id="submit-bmi">Calculate</button>

            </div>

            <div class="form-row">

              <div class="input-group">

                <label for="gender">Gender</label>

                <select id="gender" name="gender" required>

                  <option value="female">Female</option>

                  <option value="male">Male</option>

                  <option value="other">Other</option>

                </select>

              </div>

              <div class="input-group">

                <label for="smoking_status">Smoking Status</label>

                <select id="smoking_status" name="smoking_status" required>

                  <option value="never_smoked">Never Smoked</option>

                  <option value="formerly_smoked">Formerly Smoked</option>

                  <option value="smokes">Smokes</option>

                  <option value="unknown">Unknown</option>

                </select>

              </div>

            </div>

            <div class="input-group full-width">

              <label for="glucose_level">Average Glucose Level (mg/dL)</label>

              <input

                type="number"

                id="glucose_level"

                name="glucose_level"

                min="0"

                step="0.1"

                placeholder="Leave blank if unknown"

              />

            </div>

            <button type="submit">Predict Risk</button>

          </form>

        </div>

        <div class="right-section">

          <div id="prediction-result">

            <h2>Prediction Result</h2>

            <p id="result-text"></p>

            <div id="risk-factors-chart-container">

              <canvas id="risk-factors-chart"></canvas>

            </div>

            <div id="feature-explanation">

              <h3>Feature Explanations</h3>

              <ul>

                <li><strong>Age:</strong> The age of the individual.</li>

                <li><strong>Hypertension:</strong> Whether the individual has hypertension.</li>

                <li><strong>Heart Disease:</strong> Whether the individual has any heart disease.</li>

                <li><strong>Ever Married:</strong> Whether the individual has ever been married.</li>

                <li><strong>Residence Type:</strong> Whether the individual lives in an urban or rural area.</li>

                <li><strong>BMI:</strong> Body Mass Index, calculated from height and weight.</li>

                <li><strong>Gender:</strong> The gender of the individual.</li>

                <li><strong>Smoking Status:</strong> The smoking habits of the individual.</li>

                <li><strong>Average Glucose Level:</strong> The average glucose level in the blood.</li>

              </ul>

            </div>

          </div>

        </div>

      </div>

    </main>

    <script src="{{ url_for('static', filename='js/script.js') }}"></script>

  </body>

</html>