Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Prediksi Jumlah Penumpang Bulan Depan</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link | |
| href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" | |
| rel="stylesheet" | |
| /> | |
| </head> | |
| <body class="bg-[url('{{url_for("static", filename="hujan.jpg")}}')] bg-cover bg-center bg-no-repeat h-screen flex items-center justify-center"> | |
| <div class="container mx-auto max-w-lg"> | |
| <div | |
| class="px-4 py-6 flex flex-col justify-center items-center w-full" | |
| > | |
| <div class="mb-8 w-full text-center"> | |
| <h1 class="text-3xl text-white font-bold">Jumlah Penumpang Kereta Api</h1> | |
| <h1 class="text-lg text-white font-bold">Prediksi</h1> | |
| </div> | |
| <div class="w-full"> | |
| <div class="bg-white p-6 rounded-lg shadow-md text-justify"> | |
| <h2 class="text-xl font-semibold mb-4 text-center">MASUKKAN DATA</h2> | |
| <form method="POST" action=""> | |
| <div class="grid grid-cols-2 gap-4 w-full mb-4"> | |
| <!-- Temp 1 --> | |
| <div class="col-span-2 xl:col-span-1"> | |
| <label class="block text-sm font-medium text-zinc-700">temp_1</label> | |
| <div class="mt-1 flex rounded-md shadow-sm"> | |
| <input | |
| name="temp_1" | |
| type="number" | |
| class="w-full mt-1 px-4 py-2 border rounded-md bg-gray-100" | |
| placeholder="Contoh: 30.5" | |
| step="0.1" | |
| value="{{ record['temp_1'] }}" | |
| required | |
| /> | |
| </div> | |
| {% if errors.temp_1 %} | |
| <p class="text-red-500 text-xs italic">{{ errors.temp_1 }}</p> | |
| {% endif %} | |
| </div> | |
| <!-- Temp 2 --> | |
| <div class="col-span-2 xl:col-span-1"> | |
| <label class="block text-sm font-medium text-zinc-700">temp_2</label> | |
| <div class="mt-1 flex rounded-md shadow-sm"> | |
| <input | |
| name="temp_2" | |
| type="number" | |
| class="w-full mt-1 px-4 py-2 border rounded-md bg-gray-100" | |
| placeholder="Contoh: 30.5" | |
| step="0.1" | |
| value="{{ record['temp_2'] }}" | |
| required | |
| /> | |
| </div> | |
| {% if errors.temp_2 %} | |
| <p class="text-red-500 text-xs italic">{{ errors.temp_2 }}</p> | |
| {% endif %} | |
| </div> | |
| <!-- Temp 3 --> | |
| <div class="col-span-2 xl:col-span-1"> | |
| <label class="block text-sm font-medium text-zinc-700">temp_3</label> | |
| <div class="mt-1 flex rounded-md shadow-sm"> | |
| <input | |
| name="temp_3" | |
| type="number" | |
| class="w-full mt-1 px-4 py-2 border rounded-md bg-gray-100" | |
| placeholder="Contoh: 30.5" | |
| step="0.1" | |
| value="{{ record['temp_3'] }}" | |
| required | |
| /> | |
| </div> | |
| {% if errors.temp_3 %} | |
| <p class="text-red-500 text-xs italic">{{ errors.temp_3 }}</p> | |
| {% endif %} | |
| </div> | |
| <!-- FeelsLike 1 --> | |
| <div class="col-span-2 xl:col-span-1"> | |
| <label class="block text-sm font-medium text-zinc-700">feelslike_1</label> | |
| <div class="mt-1 flex rounded-md shadow-sm"> | |
| <input | |
| name="feelslike_1" | |
| type="number" | |
| class="w-full mt-1 px-4 py-2 border rounded-md bg-gray-100" | |
| placeholder="Contoh: 29.8" | |
| step="0.1" | |
| value="{{ record['feelslike_1'] }}" | |
| required | |
| /> | |
| </div> | |
| {% if errors.feelslike_1 %} | |
| <p class="text-red-500 text-xs italic">{{ errors.feelslike_1 }}</p> | |
| {% endif %} | |
| </div> | |
| <!-- FeelsLike 2 --> | |
| <div class="col-span-2 xl:col-span-1"> | |
| <label class="block text-sm font-medium text-zinc-700">feelslike_2</label> | |
| <div class="mt-1 flex rounded-md shadow-sm"> | |
| <input | |
| name="feelslike_2" | |
| type="number" | |
| class="w-full mt-1 px-4 py-2 border rounded-md bg-gray-100" | |
| placeholder="Contoh: 29.8" | |
| step="0.1" | |
| value="{{ record['feelslike_2'] }}" | |
| required | |
| /> | |
| </div> | |
| {% if errors.feelslike_2 %} | |
| <p class="text-red-500 text-xs italic">{{ errors.feelslike_2 }}</p> | |
| {% endif %} | |
| </div> | |
| <!-- FeelsLike 3 --> | |
| <div class="col-span-2 xl:col-span-1"> | |
| <label class="block text-sm font-medium text-zinc-700">feelslike_3</label> | |
| <div class="mt-1 flex rounded-md shadow-sm"> | |
| <input | |
| name="feelslike_3" | |
| type="number" | |
| class="w-full mt-1 px-4 py-2 border rounded-md bg-gray-100" | |
| placeholder="Contoh: 29.8" | |
| step="0.1" | |
| value="{{ record['feelslike_3'] }}" | |
| required | |
| /> | |
| </div> | |
| {% if errors.feelslike_3 %} | |
| <p class="text-red-500 text-xs italic">{{ errors.feelslike_3 }}</p> | |
| {% endif %} | |
| </div> | |
| </div> | |
| <div class="flex justify-center gap-2"> | |
| <button | |
| type="button" | |
| id="clear-button" | |
| 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" | |
| > | |
| Bersihkan | |
| </button> | |
| <button | |
| type="submit" | |
| 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" | |
| > | |
| Kirim | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| {% if prediction is not none %} | |
| <div class="flex flex-col justify-center items-center mt-6 p-6 rounded-lg shadow-md bg-blue-500 text-center"> | |
| <h2 class="text-white text-2xl lg:text-3xl font-semibold">Prediksi Jumlah Penumpang</h2> | |
| <p class="text-white text-lg mt-2">Hasil prediksi untuk 5 periode ke depan:</p> | |
| <table class="mt-4 bg-white shadow-lg rounded-lg w-full max-w-md"> | |
| <thead> | |
| <tr class="bg-blue-700 text-white"> | |
| <th class="py-2 px-4 border">Periode</th> | |
| <th class="py-2 px-4 border">Prediksi Fitur 1</th> | |
| <th class="py-2 px-4 border">Prediksi Fitur 2</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {% for pred in prediction %} | |
| <tr class="{{ loop.cycle('bg-gray-100', 'bg-gray-200') }}"> | |
| <td class="py-2 px-4 border">Periode {{ loop.index }}</td> | |
| <td class="py-2 px-4 border">{{ pred[0] | round(2) }}</td> | |
| <td class="py-2 px-4 border">{{ pred[1] | round(2) }}</td> | |
| </tr> | |
| {% endfor %} | |
| </tbody> | |
| </table> | |
| <p class="text-white text-sm mt-4 italic">* Prediksi berdasarkan data yang diinputkan.</p> | |
| </div> | |
| {% endif %} | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document | |
| .getElementById("clear-button") | |
| .addEventListener("click", function () { | |
| const inputs = document.querySelectorAll('input[type="number"]'); | |
| inputs.forEach((input) => (input.value = "")); | |
| }); | |
| </script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script> | |
| </body> | |
| </html> | |