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="keretaApi.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" style="background-color: rgba(255,255,255,0.5);"> | |
| <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"> | |
| <div class="col-span-2 xl:col-span-1"> | |
| <label class="block text-sm font-medium text-zinc-700">XT_1</label> | |
| <div class="mt-1 flex rounded-md shadow-sm"> | |
| <input | |
| name="XT_1" | |
| type="number" | |
| class="w-full mt-1 px-4 py-2 border rounded-md bg-gray-100" | |
| placeholder="Contoh: 0.1" | |
| step="0.01" | |
| value="{{ record['XT_1'] }}" | |
| required | |
| /> | |
| </div> | |
| {% if errors.XT_1 %} | |
| <p class="text-red-500 text-xs italic">{{ errors.XT_1 }}</p> | |
| {% endif %} | |
| </div> | |
| <div class="col-span-2 xl:col-span-1"> | |
| <label class="block text-sm font-medium text-zinc-700">XT_2</label> | |
| <div class="mt-1 flex rounded-md shadow-sm"> | |
| <input | |
| name="XT_2" | |
| type="number" | |
| class="w-full mt-1 px-4 py-2 border rounded-md bg-gray-100" | |
| placeholder="Contoh: 0.1" | |
| step="0.01" | |
| value="{{ record['XT_2'] }}" | |
| required | |
| /> | |
| </div> | |
| {% if errors.XT_2 %} | |
| <p class="text-red-500 text-xs italic">{{ errors.XT_2 }}</p> | |
| {% endif %} | |
| </div> | |
| <div class="col-span-2 xl:col-span-1"> | |
| <label class="block text-sm font-medium text-zinc-700">XT_3</label> | |
| <div class="mt-1 flex rounded-md shadow-sm"> | |
| <input | |
| name="XT_3" | |
| type="number" | |
| class="w-full mt-1 px-4 py-2 border rounded-md bg-gray-100" | |
| placeholder="Contoh: 0.1" | |
| step="0.01" | |
| value="{{ record['XT_3'] }}" | |
| required | |
| /> | |
| </div> | |
| {% if errors.XT_3 %} | |
| <p class="text-red-500 text-xs italic">{{ errors.XT_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 justify-center items-center mt-6 p-6 rounded-lg shadow-md bg-blue-500 text-center"> | |
| <div> | |
| <p class="text-white text-4xl lg:text-6xl font-bold">{{ prediction }}</p> | |
| <p class="text-white text-xl mt-2">Prediksi Jumlah Penumpang untuk Bulan Depan</p> | |
| </div> | |
| </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> | |