HTML-PROJECT/index.html at main · gededn/HTML-PROJECT · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Picker</title>
    <link rel="stylesheet" href="css/style.css">
    <!-- PWA Manifest & Theme -->
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#2c2c3e">
    <!-- Icons for Apple devices -->
    <link rel="apple-touch-icon" href="images/icons/icon-192x192.png">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body>
    <div class="background-stars"></div>
    <main class="card-container" id="main-card-container">
        <button id="dark-mode-toggle" class="dark-mode-toggle" aria-label="Toggle Dark Mode">
            <i class="fa-solid fa-moon"></i>
        </button>
        <h1 class="main-title">GEMPITA <i class="fa-solid fa-heart heart-icon"></i></h1>
        <p class="subtitle">Bingung mau pilih apa? Biar kami yang tentukan secara acak! ✨</p>

        <div class="toggle-buttons">
            <button class="toggle-btn active" id="makanan-btn">
                <i class="fa-solid fa-utensils"></i> Makanan
            </button>
            <button class="toggle-btn" id="nongki-btn">
                <i class="fa-solid fa-mug-hot"></i> Nongki
            </button>
            <button class="toggle-btn" id="snack-btn">
                <i class="fa-solid fa-cookie-bite"></i> Snack
            </button>
            <button class="toggle-btn" id="date-btn">
                <i class="fa-solid fa-hand-holding-heart"></i> Date
            </button>
        </div>

        <div class="main-section" id="main-section">
            <h2 class="dynamic-title" id="dynamic-title">
                <i class="fa-solid fa-utensils"></i> Mau Makan Apa?
            </h2>
            <div class="input-group">
                <input type="text" id="add-input" placeholder="Masukkan nama makanan... 🍔">
                <button id="add-btn" class="add-btn" aria-label="Add item to list">+</button>
            </div>
            <div class="dropdowns" id="dropdown-section">
                <div class="select-row" id="makanan-select-row">
                    <select id="food-type-select" aria-label="Food Type">
                        <option value="real-food">🍔 Real Food</option>
                        <option value="junk-food">🍟 Junk Food</option>
                    </select>
                    <select id="lokasi-select" aria-label="Location">
                        <option value="malang">🏔️ Malang</option>
                        <option value="surabaya">🏙️ Surabaya</option>
                        <option value="sidoarjo">🏭 Sidoarjo</option>
                    </select>
                </div>
                <div class="select-row hidden" id="nongki-select-row">
                    <select id="nongki-type-select" aria-label="Hangout Type">
                        <option value="elite">🏆 Elite</option>
                        <option value="sulit">🤫 Sulit</option>
                    </select>
                    <select id="lokasi-select-nongki" aria-label="Location">
                        <option value="malang">🏔️ Malang</option>
                        <option value="surabaya">🏙️ Surabaya</option>
                        <option value="sidoarjo">🏭 Sidoarjo</option>
                    </select>
                </div>
                <div class="select-row hidden" id="snack-select-row">
                    <select id="snack-type-select" aria-label="Snack Type">
                        <option value="gurih">🥨 Gurih</option>
                        <option value="manis">🍭 Manis</option>
                        <option value="sehat">🥕 Sehat</option>
                        <option value="tradisional">🇮🇩 Tradisional</option>
                    </select>
                    <select id="lokasi-select-snack" aria-label="Location">
                        <option value="malang">🏔️ Malang</option>
                        <option value="surabaya">🏙️ Surabaya</option>
                        <option value="sidoarjo">🏭 Sidoarjo</option>
                    </select>
                </div>
                <div class="select-row hidden" id="date-select-row">
                    <select id="date-type-select" aria-label="Date Type">
                        <option value="indoor">🏠 Indoor</option>
                        <option value="outdoor">🏞️ Outdoor</option>
                    </select>
                    <select id="lokasi-select-date" aria-label="Location">
                        <option value="malang">🏔️ Malang</option>
                        <option value="surabaya">🏙️ Surabaya</option>
                        <option value="sidoarjo">🏭 Sidoarjo</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="list-view-container" id="list-view-container">
            <h3 class="list-title">Daftar Pilihan (<span id="total-count">0</span>):</h3>
            <div id="pilihan-list-items"></div>
            <div class="empty-state hidden" id="empty-state">
                <p id="empty-message">Belum ada pilihan makanan. Yuk tambah dulu! ✨</p>
            </div>
        </div>

        <button class="random-pick-btn" id="random-pick-btn">
            <i class="fa-solid fa-shuffle"></i> Random Pick!
        </button>

        <button class="view-all-btn" id="view-all-btn">
            <i class="fa-solid fa-list-ul"></i> Lihat Semua
        </button>

        <!-- MEMINDAHKAN RESULT CONTAINER KE AKHIR UNTUK STRUKTUR YANG LEBIH BAIK -->
        <div class="result-view-container hidden" id="result-view-container">
            <div class="result-card">
                <h2 class="result-title" id="result-title"></h2>
                <button class="back-btn" id="back-btn">
                    <i class="fa-solid fa-arrow-left"></i> Kembali
                </button>
            </div>
        </div>

    </main>
    <footer class="copyright">
        <p>&copy; 2024 Dharma Nakula. All rights reserved.</p>
    </footer>
    <script src="js/script.js" defer></script>
</body>
</html>