<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jadwal Kuliah - ITERA</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }
        h1 {
            text-align: center;
            padding: 20px;
            background-color: #F4A900;
            color: white;
            margin-bottom: 20px;
            font-size: 24px;
        }
        table {
            width: 90%;
            margin: 0 auto;
            border-collapse: collapse;
            background-color: white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
        }
        th, td {
            padding: 12px;
            text-align: left;
            border: 1px solid #ddd;
        }
        th {
            background-color: #2E5E4E;
            color: white;
            text-transform: uppercase;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        tr:hover {
            background-color: #eaf2f8;
        }
        .empty-row {
            color: #999;
            text-align: center;
        }
        footer {
            text-align: center;
            padding: 10px;
            background-color: #333;
            color: white;
            margin-top: 20px;
        }
    </style>
</head>
<body>

    <h1>Jadwal Kuliah - ITERA</h1>

    <table>
        <thead>
            <tr>
                <th>Hari</th>
                <th>Waktu</th>
                <th>Mata Kuliah</th>
                <th>Kode</th>
                <th>SKS</th>
                <th>Dosen</th>
                <th>Ruang</th>
            </tr>
        </thead>
        <tbody id="jadwalTableBody"></tbody>
    </table>

    <footer>
        &copy; 2025 Institut Teknologi Sumatera | Jadwal Kuliah
    </footer>

    <script>
        const jadwalKuliah = [
            { hari: "Senin", waktu: "(Tidak ada jadwal)", matkul: "-", kode: "-", sks: "-", dosen: "-", ruang: "-" },
            { hari: "Selasa", waktu: "08.00 - 09.40", matkul: "Pengantar Komputer dan Software II", kode: "KU0008", sks: 2, dosen: "Suryaneta, S.T., M.Sc., Ph.D.", ruang: "LAB MM TPB 3 (LABTEK 3 LT. 2)" },
            { hari: "", waktu: "15.00 - 16.40", matkul: "Kimia Dasar II", kode: "KI1204", sks: 2, dosen: "Dr. Mariyam, S.Pd., M.Sc.", ruang: "GK1.214 (80)" },
            { hari: "Rabu", waktu: "07.00 - 08.40", matkul: "Olahraga", kode: "KU1004", sks: 2, dosen: "Azry Ayu Nabillah, M.Pd.", ruang: "-" },
            { hari: "", waktu: "09.00 - 11.30", matkul: "Matematika Dasar II", kode: "MA1204", sks: 3, dosen: "Een Lujainatul Isnaini, S.T., M.Eng.", ruang: "GK1.312 (80)" },
            { hari: "", waktu: "13.00 - 14.40", matkul: "Bahasa Indonesia", kode: "KU0003", sks: 2, dosen: "Misfallah Nurhayati, M.T.", ruang: "GK1.104 (80)" },
            { hari: "", waktu: "15.00 - 16.40", matkul: "Biologi Dasar 1B", kode: "BI1103", sks: 2, dosen: "Dian Anggria Sari, S.Si., M.Si.", ruang: "GK1.201 (80)" },
            { hari: "Kamis", waktu: "(Tidak ada jadwal)", matkul: "-", kode: "-", sks: "-", dosen: "-", ruang: "-" },
            { hari: "Jumat", waktu: "10.00 - 11.40", matkul: "Fisika Dasar II", kode: "FI1203", sks: 3, dosen: "Achmad Chalid Afif Alfajrin, M.Ling", ruang: "GK1.120 (80)" },
            { hari: "", waktu: "13.00 - 14.40", matkul: "Praktikum Fisika Dasar", kode: "FI1203", sks: "-", dosen: "-", ruang: "LAB. FISIKA TPB 4 (LABTEK 1 LT. 2)" },
            { hari: "", waktu: "15.00 - 17.30", matkul: "Algoritma dan Pemrograman II", kode: "IF1222", sks: 3, dosen: "Leslie Anggraini, S.Kom., M.Cs.", ruang: "LAB MM IF PRODI 2 (LABTEK 1 LT. 3)" }
        ];

        function generateTable() {
            const tableBody = document.getElementById("jadwalTableBody");
            tableBody.innerHTML = "";

            jadwalKuliah.forEach((item) => {
                let row = document.createElement("tr");

                let tdHari = document.createElement("td");
                tdHari.textContent = item.hari;
                row.appendChild(tdHari);

                let tdWaktu = document.createElement("td");
                tdWaktu.textContent = item.waktu;
                row.appendChild(tdWaktu);

                let tdMatkul = document.createElement("td");
                tdMatkul.innerHTML = `<strong>${item.matkul}</strong>`;
                row.appendChild(tdMatkul);

                let tdKode = document.createElement("td");
                tdKode.textContent = item.kode;
                row.appendChild(tdKode);

                let tdSks = document.createElement("td");
                tdSks.textContent = item.sks;
                row.appendChild(tdSks);

                let tdDosen = document.createElement("td");
                tdDosen.textContent = item.dosen;
                row.appendChild(tdDosen);

                let tdRuang = document.createElement("td");
                tdRuang.textContent = item.ruang;
                row.appendChild(tdRuang);

                if (item.matkul === "-") {
                    row.classList.add("empty-row");
                }

                tableBody.appendChild(row);
            });
        }

        generateTable();
    </script>

</body>
</html>
