Hugging Face's logo

Spaces:
Prashant43
/
insurance
Sleeping

App Files Community
Prashant43 commited on
Commit
e58668e
·
verified ·
1 Parent(s): 8aa1934

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +116 -88
templates/index.html CHANGED
@@ -1,94 +1,122 @@
1
- <!doctype html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="utf-8" />
5
- <title>Insurance Charges Predictor</title>
6
- <meta name="viewport" content="width=device-width,initial-scale=1" />
7
- <style>
8
- body { font-family: Arial, sans-serif; max-width:700px; margin:40px auto; padding:0 16px; }
9
- label { display:block; margin-top:12px; }
10
- input, select { width:100%; padding:8px; margin-top:6px; box-sizing:border-box; }
11
- button { margin-top:16px; padding:10px 14px; font-size:16px; }
12
- #result { margin-top:18px; font-weight:600; }
13
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14
  </head>
15
  <body>
16
- <h1>Insurance Charges Predictor</h1>
17
-
18
- <form id="predict-form">
19
- <label>Age
20
- <input type="number" id="age" name="age" min="0" required />
21
- </label>
22
-
23
- <label>Sex
24
- <select id="sex" name="sex" required>
25
- <option value="male">male</option>
26
- <option value="female">female</option>
27
- </select>
28
- </label>
29
-
30
- <label>BMI
31
- <input type="number" step="0.1" id="bmi" name="bmi" required />
32
- </label>
33
-
34
- <label>Children
35
- <input type="number" id="children" name="children" min="0" step="1" required />
36
- </label>
37
-
38
- <label>Smoker
39
- <select id="smoker" name="smoker" required>
40
- <option value="yes">yes</option>
41
- <option value="no">no</option>
42
- </select>
43
- </label>
44
-
45
- <label>Region
46
- <select id="region" name="region" required>
47
- <option value="northeast">northeast</option>
48
- <option value="southeast">southeast</option>
49
- <option value="southwest">southwest</option>
50
- <option value="northwest">northwest</option>
51
- </select>
52
- </label>
53
-
54
- <button type="submit">Predict</button>
55
- </form>
56
-
57
- <div id="result"></div>
58
-
59
- <script>
60
- const form = document.getElementById('predict-form');
61
- const resultDiv = document.getElementById('result');
62
-
63
- form.addEventListener('submit', async (e) => {
64
- e.preventDefault();
65
- resultDiv.textContent = 'Predicting...';
66
-
67
- const payload = {
68
- age: parseFloat(document.getElementById('age').value),
69
- sex: document.getElementById('sex').value,
70
- bmi: parseFloat(document.getElementById('bmi').value),
71
- children: parseInt(document.getElementById('children').value),
72
- smoker: document.getElementById('smoker').value,
73
- region: document.getElementById('region').value
74
- };
75
-
76
- try {
77
- const resp = await fetch('/predict', {
78
- method: 'POST',
79
- headers: { 'Content-Type': 'application/json' },
80
- body: JSON.stringify(payload)
81
- });
82
- const data = await resp.json();
83
- if (!resp.ok) {
84
- resultDiv.textContent = `Error: ${data.error || JSON.stringify(data)}`;
85
- } else {
86
- resultDiv.textContent = `Predicted charges: ₹ ${data.predicted_charges.toFixed(2)}`;
87
- }
88
- } catch (err) {
89
- resultDiv.textContent = 'Request failed: ' + err.message;
90
- }
91
- });
92
- </script>
93
  </body>
94
  </html>
 
1
+ <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Insurance Charges Predictor</title>
7
+ <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
8
+ <style>
9
+
10
+
11
+ body {
12
+ font-family: Arial, sans-serif;
13
+ background: linear-gradient(to right, #74ebd5, #ACB6E5);
14
+ display: flex;
15
+ justify-content: center;
16
+ align-items: center;
17
+ height: 100vh;
18
+ margin: 0;
19
+ }
20
+
21
+ .container {
22
+ background: white;
23
+ padding: 25px 40px;
24
+ border-radius: 12px;
25
+ box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
26
+ width: 400px;
27
+ }
28
+
29
+ h1 {
30
+ text-align: center;
31
+ margin-bottom: 20px;
32
+ color: #333;
33
+ }
34
+
35
+ form {
36
+ display: flex;
37
+ flex-direction: column;
38
+ }
39
+
40
+ label {
41
+ margin-top: 10px;
42
+ font-weight: bold;
43
+ color: #555;
44
+ }
45
+
46
+ input, select {
47
+ padding: 8px;
48
+ border-radius: 6px;
49
+ border: 1px solid #ccc;
50
+ margin-top: 5px;
51
+ }
52
+
53
+ button {
54
+ margin-top: 20px;
55
+ padding: 12px;
56
+ background: #4CAF50;
57
+ color: white;
58
+ border: none;
59
+ border-radius: 8px;
60
+ cursor: pointer;
61
+ font-size: 16px;
62
+ }
63
+
64
+ button:hover {
65
+ background: #45a049;
66
+ }
67
+
68
+ .result {
69
+ margin-top: 20px;
70
+ text-align: center;
71
+ font-size: 18px;
72
+ color: #222;
73
+ }
74
+
75
+
76
+ </style>
77
+
78
  </head>
79
  <body>
80
+ <div class="container">
81
+ <h1>Insurance Charges Prediction</h1>
82
+ <form method="POST">
83
+ <label for="age">Age:</label>
84
+ <input type="number" step="0.1" name="age" required>
85
+
86
+ <label for="sex">Sex:</label>
87
+ <select name="sex" required>
88
+ <option value="male">Male</option>
89
+ <option value="female">Female</option>
90
+ </select>
91
+
92
+ <label for="bmi">BMI:</label>
93
+ <input type="number" step="0.1" name="bmi" required>
94
+
95
+ <label for="children">Children:</label>
96
+ <input type="number" name="children" required>
97
+
98
+ <label for="smoker">Smoker:</label>
99
+ <select name="smoker" required>
100
+ <option value="yes">Yes</option>
101
+ <option value="no">No</option>
102
+ </select>
103
+
104
+ <label for="region">Region:</label>
105
+ <select name="region" required>
106
+ <option value="northeast">Northeast</option>
107
+ <option value="northwest">Northwest</option>
108
+ <option value="southeast">Southeast</option>
109
+ <option value="southwest">Southwest</option>
110
+ </select>
111
+
112
+ <button type="submit">Predict</button>
113
+ </form>
114
+
115
+ {% if prediction %}
116
+ <div class="result">
117
+ <h2>Predicted Charges: {{ prediction }}</h2>
118
+ </div>
119
+ {% endif %}
120
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
121
  </body>
122
  </html>