Booking Kursi Bus Kunjungan Industri<\/title>\n <style>\n body { font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; }\n h2 { margin-top: 0; }\n select, input, button { margin: 10px 0; padding: 8px; font-size: 16px; }\n .bus-layout { display: grid; gap: 5px; margin-top: 20px; }\n .seat {\n width: 60px; height: 60px;\n background-color: #4CAF50; color: white;\n display: flex; align-items: center; justify-content: center;\n border-radius: 5px; cursor: pointer;\n font-size: 12px;\n text-align: center;\n padding: 5px;\n }\n .seat.booked { background-color: #ccc; cursor: not-allowed; color: #000; font-weight: bold; }\n .seat:hover:not(.booked) { background-color: #45a049; }\n .controls { display: flex; flex-direction: column; max-width: 300px; }\n #resetBtn { background-color: #e74c3c; color: white; border: none; cursor: pointer; }\n #resetBtn:hover { background-color: #c0392b; }\n @media (max-width: 600px) {\n .bus-layout { grid-template-columns: repeat(4, 1fr) !important; }\n }\n .bus-image {\n max-width: 100%;\n margin-top: 20px;\n border-radius: 10px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.2);\n }\n <\/style>\n<\/head>\n<body>\n <h2>Booking Kursi Bus – Kunjungan Industri<\/h2>\n\n <div class=\"controls\">\n <label for=\"studentName\">Nama-Kelas:<\/label>\n <input type=\"text\" id=\"studentName\" placeholder=\"Nama-Kelas\">\n\n <label for=\"busSelect\">Pilih Bus:<\/label>\n <select id=\"busSelect\">\n <option value=\"1\">Bus 1 (TO) (50 kursi)<\/option>\n <option value=\"2\">Bus 2 (TO) (50 kursi)<\/option>\n <option value=\"3\">Bus 3 (TF & KA) (50 kursi)<\/option>\n <option value=\"4\">Bus 4 (TF & KA) (31 kursi)<\/option>\n <option value=\"5\">Bus 5 (AKL) (31 kursi)<\/option>\n <\/select>\n\n <button id=\"resetBtn\">\ud83d\udd04 Reset Semua Booking<\/button>\n <\/div>\n\n\n <div id=\"seatContainer\" class=\"bus-layout\"><\/div>\n\n <script>\n const seatContainer = document.getElementById(\"seatContainer\");\n const busSelect = document.getElementById(\"busSelect\");\n const studentNameInput = document.getElementById(\"studentName\");\n const resetBtn = document.getElementById(\"resetBtn\");\n const busImage = document.getElementById(\"busImage\");\n\n let busSeats = JSON.parse(localStorage.getItem(\"busSeats\")) || {\n 1: Array(50).fill(null),\n 2: Array(50).fill(null),\n 3: Array(50).fill(null),\n 4: Array(31).fill(null),\n 5: Array(31).fill(null),\n };\n\n function saveData() {\n localStorage.setItem(\"busSeats\", JSON.stringify(busSeats));\n }\n\n function renderSeats(busNumber) {\n const seats = busSeats[busNumber];\n const columns = 5;\n seatContainer.style.gridTemplateColumns = `repeat(${columns}, 1fr)`;\n seatContainer.innerHTML = \"\";\n\n seats.forEach((seat, index) => {\n const seatDiv = document.createElement(\"div\");\n seatDiv.className = \"seat\" + (seat ? \" booked\" : \"\");\n seatDiv.textContent = seat ? seat : index + 1;\n\n if (!seat) {\n seatDiv.onclick = () => {\n const name = studentNameInput.value.trim();\n if (!name) return alert(\"Masukkan Nama\/NIS terlebih dahulu\");\n busSeats[busNumber][index] = name;\n saveData();\n renderSeats(busNumber);\n };\n } else {\n seatDiv.title = seat;\n }\n\n seatContainer.appendChild(seatDiv);\n });\n }\n\n busSelect.addEventListener(\"change\", () => {\n renderSeats(busSelect.value);\n });\n\n resetBtn.addEventListener(\"click\", () => {\n if (confirm(\"Yakin ingin mereset semua data booking kursi?\")) {\n busSeats = {\n 1: Array(50).fill(null),\n 2: Array(50).fill(null),\n 3: Array(50).fill(null),\n 4: Array(31).fill(null),\n 5: Array(31).fill(null),\n };\n saveData();\n renderSeats(busSelect.value);\n }\n });\n\n renderSeats(busSelect.value);\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Booking Kursi Bus Kunjungan Industri Booking Kursi Bus – Kunjungan Industri Nama-Kelas: Pilih Bus: Bus 1 (TO) (50 kursi)Bus 2 (TO) (50 kursi)Bus 3 (TF & KA) (50 kursi)Bus 4 (TF & KA) (31 kursi)Bus 5 (AKL) (31 kursi) \ud83d\udd04 Reset Semua Booking<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-8317","post","type-post","status-publish","format-standard","hentry","category-informasi"],"_links":{"self":[{"href":"https:\/\/smkmuh1cilacap.com\/index.php?rest_route=\/wp\/v2\/posts\/8317","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/smkmuh1cilacap.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/smkmuh1cilacap.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/smkmuh1cilacap.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/smkmuh1cilacap.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8317"}],"version-history":[{"count":10,"href":"https:\/\/smkmuh1cilacap.com\/index.php?rest_route=\/wp\/v2\/posts\/8317\/revisions"}],"predecessor-version":[{"id":8332,"href":"https:\/\/smkmuh1cilacap.com\/index.php?rest_route=\/wp\/v2\/posts\/8317\/revisions\/8332"}],"wp:attachment":[{"href":"https:\/\/smkmuh1cilacap.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8317"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/smkmuh1cilacap.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=8317"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/smkmuh1cilacap.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=8317"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":8317,"date":"2025-04-25T08:23:51","date_gmt":"2025-04-25T01:23:51","guid":{"rendered":"https:\/\/smkmuh1cilacap.com\/?p=8317"},"modified":"2025-04-25T08:42:25","modified_gmt":"2025-04-25T01:42:25","slug":"boking-tempat-duduk-bus-kunjungan-industri","status":"publish","type":"post","link":"https:\/\/smkmuh1cilacap.com\/?p=8317","title":{"rendered":"BOKING TEMPAT DUDUK BUS KUNJUNGAN INDUSTRI"},"content":{"rendered":"\n