<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./accpdbk.ico" type="image/x-icon">
    <title>ACC PDBK</title>

    <!-- Internal CSS -->
    <style>
        /* Reset some default styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Body styling */
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            background-color: #f9f9f9;
            color: #333;
            overflow-x: hidden;
        }

        /* Header */
        header {
            background: linear-gradient(90deg, #87CEEB, #4682B4);
            color: white;
            padding: 40px 20px;
            text-align: center;
            clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
            border-bottom: 5px solid #87CEEB;
        }

        header h1 {
            margin-bottom: 15px;
            font-size: 2.5em;
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

        header p {
            font-size: 1.2em;
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

        /* Main section styling */
        main {
            padding: 40px 20px;
        }

        .intro {
            max-width: 800px;
            margin: auto;
            text-align: center;
            margin-bottom: 40px;
            background-color: #f0f0f0;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .intro h2 {
            margin-bottom: 20px;
            font-size: 1.8em;
            color: #4682B4;
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

        .features {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 40px;
        }

        .feature {
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin: 10px;
            flex: 1;
            min-width: 200px;
            max-width: 300px;
            text-align: center;
            transition: transform 0.3s ease;
        }

        .feature:hover {
            transform: scale(1.1);
        }

        .feature h3 {
            color: #4682B4;
            margin-bottom: 10px;
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

        .testimonials {
            background-color: #f0f0f0;
            padding: 40px 20px;
            text-align: center;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .testimonial {
            margin-bottom: 20px;
            font-style: italic;
            padding: 20px;
            border-bottom: 1px solid #ddd;
        }

        .testimonial p {
            margin-bottom: 10px;
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

        .testimonial .author {
            font-weight: bold;
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

        .start-test {
            text-align: center;
            margin: 40px 0;
        }

        .start-test .btn-start {
            padding: 15px 30px;
            background-color: #4682B4;
            color: white;
            text-decoration: none;
            font-size: 1.2em;
            border-radius: 50px;
            transition: background-color 0.3s ease;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

        .start-test .btn-start:hover {
            background-color: #87CEEB;
        }

        footer {
            text-align: center;
            padding: 20px;
            background-color: #4682B4;
            color: white;
            border-top: 5px solid #87CEEB;
        }
        
        /* Styling Navbar */
        .navbar {
            display: flex;
            justify-content: space-between; /* Menu dan logo berjauhan */
            align-items: center; /* Sejajarkan secara vertikal */
            background-color: #4682B4;
            padding: 10px 20px;
            border-bottom: 2px solid #87CEEB;
        }
        
        .logo-img {
            height: 50px; /* Atur tinggi logo */
        }
        
        /* Tombol Hamburger */
        .hamburger {
            display: none; /* Sembunyikan di layar besar */
            font-size: 1.5em;
            background: none;
            border: none;
            color: white;
            cursor: pointer;
            padding: 10px;
            margin-left: auto; /* Pastikan tombol ada di kanan */
        }
        
        /* Menu */
        .menu {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .menu li {
            margin-left: 20px; /* Spasi antar item menu */
        }
        
        .menu a {
            text-decoration: none;
            color: white;
            font-weight: bold;
            transition: color 0.3s ease;
        }
        
        .menu a:hover {
            color: #FFD700;
        }
        
        /* Responsif untuk layar kecil */
        @media (max-width: 768px) {
            .hamburger {
                display: block; /* Tampilkan tombol hamburger di layar kecil */
            }
        
            .menu {
                display: none; /* Sembunyikan menu secara default */
                flex-direction: column; /* Susun menu secara vertikal */
                position: absolute; /* Agar menu muncul di bawah hamburger */
                top: 60px; /* Sesuaikan dengan tinggi header */
                right: 20px; /* Buat menu rata kanan */
                background-color: #4682B4; /* Warna latar menu */
                padding: 10px 20px;
                border-radius: 8px; /* Opsional: tambahkan sudut melengkung */
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Opsional: tambahkan bayangan */
                z-index: 1000; /* Pastikan menu selalu di atas */
            }
        
            .menu.active {
                display: flex; /* Tampilkan menu ketika tombol hamburger di klik */
            }
        
            .menu li {
                margin: 10px 0; /* Spasi antar item menu di layar kecil */
            }
        
            .menu a {
                text-align: right; /* Pastikan teks dalam menu rata kanan */
                color: white;
                text-decoration: none;
                font-weight: bold;
                transition: color 0.3s ease;
            }
        
            .menu a:hover {
                color: #FFD700;
            }
        
            .logo-img {
                height: 40px; /* Perkecil logo untuk ponsel */
            }
        }
    </style>

    <!-- Internal JavaScript -->
    <script>
        function startTest() {
            // Fungsi untuk menghasilkan hash random
            function generateRandomHash() {
                const characters = '0123456789';
                let hash = '';
                for (let i = 0; i < 10; i++) { // Panjang hash 10 karakter
                    hash += characters.charAt(Math.floor(Math.random() * characters.length));
                }
                return hash;
            }
        
            // Generate hash dan tambahkan ke URL
            const randomHash = generateRandomHash();
            window.location.href = `./test?code=${randomHash}`;
        }
        function toggleMenu() {
            const menu = document.querySelector('.menu');
            menu.classList.toggle('active');
        }
    </script>
</head>
<body>
    <header>
        <nav class="navbar">
            <div class="logo">
                <img src="./ACC.png" alt="Logo ACC PDBK" class="logo-img"> <!-- Ganti dengan logo Anda -->
            </div>
            <ul class="menu">
                <li><a href="#">Home</a></li>
                <li><a href="./about">About Us</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Resources</a></li>
            </ul>
            <!-- Tombol Hamburger untuk tampilan mobile -->
            <button class="hamburger" onclick="toggleMenu()">☰</button>
        </nav><br>
        
        <h1>Selamat Datang di ACC PDBK</h1>
        <p>Alat Evaluasi Penerimaan dan Pemahaman terhadap Peserta Didik Berkebutuhan Khusus</p>
    </header>

    <main>
        <section class="intro">
            <h2>Apa Itu ACC PDBK?</h2>
            <p>
                ACC PDBK adalah platform evaluasi yang dirancang untuk memahami sikap dan persepsi Anda terhadap peserta didik berkebutuhan khusus (PDBK). Dengan alat ini, Anda dapat membantu menciptakan lingkungan sekolah yang inklusif dan mendukung bagi semua siswa.
            </p>
        </section>

        <section class="features">
            <div class="feature">
                <h3>Pahami Kebutuhan PDBK</h3>
                <p>Pahami bagaimana mendukung dan menghargai peserta didik berkebutuhan khusus.</p>
            </div>
            <div class="feature">
                <h3>Evaluasi Penerimaan</h3>
                <p>Ikuti evaluasi untuk mengetahui sejauh mana penerimaan Anda terhadap keberadaan PDBK.</p>
            </div>
            <div class="feature">
                <h3>Rekomendasi Kebijakan</h3>
                <p>Temukan rekomendasi untuk menciptakan lingkungan belajar yang lebih inklusif.</p>
            </div>
        </section>

        <section class="testimonials">
            <h2>Pengalaman Pengguna ACC PDBK</h2>
            <div class="testimonial">
                <p>"ACC PDBK membantu saya memahami pentingnya keberadaan teman berkebutuhan khusus. Alat ini mudah digunakan dan sangat membantu!"</p>
                <p class="author">- Dian, Pelajar</p>
            </div>
            <div class="testimonial">
                <p>"Setelah mengikuti ACC PDBK, saya merasa lebih percaya diri mendukung teman-teman berkebutuhan khusus."</p>
                <p class="author">- Arif, Pelajar</p>
            </div>
        </section>

        <section class="testimonials">
            <h2>Manfaat ACC PDBK</h2>
            <div class="testimonial">
                <p>ACC PDBK membantu Anda memahami potensi dan kebutuhan PDBK.</p>
            </div>
            <div class="testimonial">
                <p>ACC PDBK membantu Anda memahami potensi dan kebutuhan PDBK.</p>
            </div>
            <div class="testimonial">
                <p>ACC PDBK membantu menciptakan lingkungan yang inklusif untuk semua siswa.</p>
            </div>
        </section>

        <section class="start-test">
            <p>Apakah Anda Siap Memulai Evaluasi?</p>
            <button class="btn-start" onclick="startTest()">Mulai Evaluasi</button>
        </section>
    </main>

    <footer>
        <p>&copy; 2025 ACC PDBK. Semua Hak Dilindungi.</p>
    </footer>
</body>
</html>




