Hugging Face's logo

Spaces:
bram4627
/
prediksi-jumlah-penumpang
Sleeping

App Files Community
bram4627 commited on
Commit
c66dc2e
•
1 Parent(s): 9bf9e9f

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +123 -123
templates/index.html CHANGED
@@ -1,123 +1,123 @@
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>Prediksi Jumlah Penumpang Bulan Depan</title>
7
- <script src="https://cdn.tailwindcss.com"></script>
8
- <link
9
- href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css"
10
- rel="stylesheet"
11
- />
12
- </head>
13
- <body class="bg-[url('{{url_for("static", filename="keretaApi.jpg")}}')] bg-cover bg-center bg-no-repeat h-screen flex items-center justify-center">
14
- <div class="container mx-auto max-w-lg">
15
- <div
16
- class="px-4 py-6 flex flex-col justify-center items-center w-full"
17
- >
18
- <div class="mb-8 w-full text-center">
19
- <h1 class="text-3xl text-white font-bold">Jumlah Penumpang Kereta Api</h1>
20
- <h1 class="text-lg text-white font-bold">Prediksi</h1>
21
- </div>
22
-
23
- <div class="w-full">
24
- <div class="bg-white p-6 rounded-lg shadow-md text-justify">
25
- <h2 class="text-xl font-semibold mb-4 text-center">MASUKKAN DATA</h2>
26
- <form method="POST" action="">
27
- <div class="grid grid-cols-2 gap-4 w-full mb-4">
28
- <div class="col-span-2 xl:col-span-1">
29
- <label class="block text-sm font-medium text-zinc-700">XT_1</label>
30
- <div class="mt-1 flex rounded-md shadow-sm">
31
- <input
32
- name="XT_1"
33
- type="number"
34
- class="w-full mt-1 px-4 py-2 border rounded-md bg-gray-100"
35
- placeholder="Contoh: 0.1"
36
- step="0.01"
37
- value="{{ record['XT_1'] }}"
38
- required
39
- />
40
- </div>
41
- {% if errors.XT_1 %}
42
- <p class="text-red-500 text-xs italic">{{ errors.XT_1 }}</p>
43
- {% endif %}
44
- </div>
45
-
46
- <div class="col-span-2 xl:col-span-1">
47
- <label class="block text-sm font-medium text-zinc-700">XT_2</label>
48
- <div class="mt-1 flex rounded-md shadow-sm">
49
- <input
50
- name="XT_2"
51
- type="number"
52
- class="w-full mt-1 px-4 py-2 border rounded-md bg-gray-100"
53
- placeholder="Contoh: 0.1"
54
- step="0.01"
55
- value="{{ record['XT_2'] }}"
56
- required
57
- />
58
- </div>
59
- {% if errors.XT_2 %}
60
- <p class="text-red-500 text-xs italic">{{ errors.XT_2 }}</p>
61
- {% endif %}
62
- </div>
63
-
64
- <div class="col-span-2 xl:col-span-1">
65
- <label class="block text-sm font-medium text-zinc-700">XT_3</label>
66
- <div class="mt-1 flex rounded-md shadow-sm">
67
- <input
68
- name="XT_3"
69
- type="number"
70
- class="w-full mt-1 px-4 py-2 border rounded-md bg-gray-100"
71
- placeholder="Contoh: 0.1"
72
- step="0.01"
73
- value="{{ record['XT_3'] }}"
74
- required
75
- />
76
- </div>
77
- {% if errors.XT_3 %}
78
- <p class="text-red-500 text-xs italic">{{ errors.XT_3 }}</p>
79
- {% endif %}
80
- </div>
81
- </div>
82
-
83
- <div class="flex justify-center gap-2">
84
- <button
85
- type="button"
86
- id="clear-button"
87
- class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5"
88
- >
89
- Bersihkan
90
- </button>
91
- <button
92
- type="submit"
93
- class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 focus:outline-none"
94
- >
95
- Kirim
96
- </button>
97
- </div>
98
- </form>
99
- </div>
100
-
101
- {% if prediction is not none %}
102
- <div class="flex justify-center items-center mt-6 p-6 rounded-lg shadow-md bg-blue-500 text-center">
103
- <div>
104
- <p class="text-white text-4xl lg:text-6xl font-bold">{{ prediction }}</p>
105
- <p class="text-white text-xl mt-2">Prediksi Jumlah Penumpang untuk Bulan Depan</p>
106
- </div>
107
- </div>
108
- {% endif %}
109
- </div>
110
- </div>
111
- </div>
112
-
113
- <script>
114
- document
115
- .getElementById("clear-button")
116
- .addEventListener("click", function () {
117
- const inputs = document.querySelectorAll('input[type="number"]');
118
- inputs.forEach((input) => (input.value = ""));
119
- });
120
- </script>
121
- <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
122
- </body>
123
- </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>Prediksi Jumlah Penumpang Bulan Depan</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link
9
+ href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css"
10
+ rel="stylesheet"
11
+ />
12
+ </head>
13
+ <body class="bg-[url('{{url_for("static", filename="keretaApi.jpg")}}')] bg-cover bg-center bg-no-repeat h-screen flex items-center justify-center">
14
+ <div class="container mx-auto max-w-lg">
15
+ <div
16
+ class="px-4 py-6 flex flex-col justify-center items-center w-full"
17
+ >
18
+ <div class="mb-8 w-full text-center">
19
+ <h1 class="text-3xl text-white font-bold">Jumlah Penumpang Kereta Api</h1>
20
+ <h1 class="text-lg text-white font-bold">Prediksi</h1>
21
+ </div>
22
+
23
+ <div class="w-full">
24
+ <div class="bg-white p-6 rounded-lg shadow-md text-justify" style="background-color: rgba(255,255,255,0.5);">
25
+ <h2 class="text-xl font-semibold mb-4 text-center">MASUKKAN DATA</h2>
26
+ <form method="POST" action="">
27
+ <div class="grid grid-cols-2 gap-4 w-full mb-4">
28
+ <div class="col-span-2 xl:col-span-1">
29
+ <label class="block text-sm font-medium text-zinc-700">XT_1</label>
30
+ <div class="mt-1 flex rounded-md shadow-sm">
31
+ <input
32
+ name="XT_1"
33
+ type="number"
34
+ class="w-full mt-1 px-4 py-2 border rounded-md bg-gray-100"
35
+ placeholder="Contoh: 0.1"
36
+ step="0.01"
37
+ value="{{ record['XT_1'] }}"
38
+ required
39
+ />
40
+ </div>
41
+ {% if errors.XT_1 %}
42
+ <p class="text-red-500 text-xs italic">{{ errors.XT_1 }}</p>
43
+ {% endif %}
44
+ </div>
45
+
46
+ <div class="col-span-2 xl:col-span-1">
47
+ <label class="block text-sm font-medium text-zinc-700">XT_2</label>
48
+ <div class="mt-1 flex rounded-md shadow-sm">
49
+ <input
50
+ name="XT_2"
51
+ type="number"
52
+ class="w-full mt-1 px-4 py-2 border rounded-md bg-gray-100"
53
+ placeholder="Contoh: 0.1"
54
+ step="0.01"
55
+ value="{{ record['XT_2'] }}"
56
+ required
57
+ />
58
+ </div>
59
+ {% if errors.XT_2 %}
60
+ <p class="text-red-500 text-xs italic">{{ errors.XT_2 }}</p>
61
+ {% endif %}
62
+ </div>
63
+
64
+ <div class="col-span-2 xl:col-span-1">
65
+ <label class="block text-sm font-medium text-zinc-700">XT_3</label>
66
+ <div class="mt-1 flex rounded-md shadow-sm">
67
+ <input
68
+ name="XT_3"
69
+ type="number"
70
+ class="w-full mt-1 px-4 py-2 border rounded-md bg-gray-100"
71
+ placeholder="Contoh: 0.1"
72
+ step="0.01"
73
+ value="{{ record['XT_3'] }}"
74
+ required
75
+ />
76
+ </div>
77
+ {% if errors.XT_3 %}
78
+ <p class="text-red-500 text-xs italic">{{ errors.XT_3 }}</p>
79
+ {% endif %}
80
+ </div>
81
+ </div>
82
+
83
+ <div class="flex justify-center gap-2">
84
+ <button
85
+ type="button"
86
+ id="clear-button"
87
+ class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5"
88
+ >
89
+ Bersihkan
90
+ </button>
91
+ <button
92
+ type="submit"
93
+ class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 focus:outline-none"
94
+ >
95
+ Kirim
96
+ </button>
97
+ </div>
98
+ </form>
99
+ </div>
100
+
101
+ {% if prediction is not none %}
102
+ <div class="flex justify-center items-center mt-6 p-6 rounded-lg shadow-md bg-blue-500 text-center">
103
+ <div>
104
+ <p class="text-white text-4xl lg:text-6xl font-bold">{{ prediction }}</p>
105
+ <p class="text-white text-xl mt-2">Prediksi Jumlah Penumpang untuk Bulan Depan</p>
106
+ </div>
107
+ </div>
108
+ {% endif %}
109
+ </div>
110
+ </div>
111
+ </div>
112
+
113
+ <script>
114
+ document
115
+ .getElementById("clear-button")
116
+ .addEventListener("click", function () {
117
+ const inputs = document.querySelectorAll('input[type="number"]');
118
+ inputs.forEach((input) => (input.value = ""));
119
+ });
120
+ </script>
121
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
122
+ </body>
123
+ </html>