<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ucapan Ulang Tahun Lucu Romantis</title> <style> body { font-family: 'Arial', sans-serif; background-color: #f5f5f5; text-align: center; margin: 50px; } .container { max-width: 600px; margin: 0 auto; padding: 20px; background-color: #ffffff; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } label { display: block; margin-bottom: 10px; } input, select, button { width: 100%; padding: 10px; margin-bottom: 15px; box-sizing: border-box; } .button-group { display: flex; justify-content: space-between; } .whatsapp-button { background-color: #25D366; color: #fff; padding: 10px; border: none; border-radius: 5px; text-decoration: none; cursor: pointer; } </style> </head> <body> <div class="container">  <div id="popup1" style="display: block;"> <h2>Cek Dulu Yah Ini Beneran Kamu Gak</h2> <label for="name"></label> <input type="text" id="name" placeholder="Nama" required> <button onclick="showPopup2()">Terusin</button> </div>  <div id="popup2" style="display: none;"> <h2>Ciieeee Yang Ulang Tahun</h2> <label for="wishes">Selamat Yaahhh</label> <textarea id="wishes" rows="4" placeholder="Semoga Panjang Umur, Murah Rezeki, Diwujudkan Mimpimu, Awet Sama Aku .... " required></textarea> <button onclick="showPopup3()">Terusin Dong</button> </div>  <div id="popup3" style="display: none;"> <h2>Kamu Mau iPhone Apa Samsung?</h2> <label for="choice">ya udah kalo kamu maksa, aku mau:</label> <select id="choice"> <option value="iphone">iPhone</option> <option value="samsung">Samsung</option> </select> <button onclick="showPopup4()">Terusin</button> </div>  <div id="popup4" style="display: none;"> <h2>Yakin Nih Sama Pilihan Kamu?</h2> <label for="sure">Mmmmm</label> <select id="sure"> <option value="Yakin">Yakin</option> <option value="Balik Lagi deh">Balik Lagi Deh</option> </select> <button onclick="handlePopup4()">Terusin</button> </div>  <div id="popup5" style="display: none;"> <h2>Hehe, Mau Yakin Apa Gak Yakin Tetep Aja</h2> <p>Kamu mau traktir aku besok, Yeeeaayyy</p> <button onclick="showPopup6()">Oke</button> </div>  <div id="popup6" style="display: none;"> <h2>Selamat Ultah Bestie</h2> <p>Sampai Ketemu Besok ..... </p> <img src="https://media.tenor.com/ILt4uXhIdcEAAAAi/love-you-kisses.gif" alt="Birthday Image" width="200"> <button onclick="closeAllPopups()"> <a class="whatsapp-button" href="https://web.whatsapp.com/" target="_blank">WhatsApp</a></button> </div> <script> function showPopup2() { const nameInput = document.getElementById('name').value; if (nameInput.trim() !== '') { document.getElementById('popup1').style.display = 'none'; document.getElementById('popup2').style.display = 'block'; } else { alert('Eitss Nama Kamu Mannaaaaaaaa'); } } function showPopup3() { document.getElementById('popup2').style.display = 'none'; document.getElementById('popup3').style.display = 'block'; } function showPopup4() { const choice = document.getElementById('choice').value; if (choice === 'iphone' || choice === 'samsung') { document.getElementById('popup3').style.display = 'none'; document.getElementById('popup4').style.display = 'block'; } else { document.getElementById('popup3').style.display = 'block'; document.getElementById('popup4').style.display = 'none'; } } function handlePopup4() { const sure = document.getElementById('sure').value; if (sure === 'Yakin') { document.getElementById('popup4').style.display = 'none'; document.getElementById('popup5').style.display = 'block'; } else { document.getElementById('popup4').style.display = 'none'; document.getElementById('popup3').style.display = 'block'; } } function showPopup6() { document.getElementById('popup5').style.display = 'none'; document.getElementById('popup6').style.display = 'block'; } function closeAllPopups() { document.getElementById('popup6').style.display = 'none'; alert('Thank you for your participation!'); // You can add further actions or redirects here if needed. } </script> </div> </body> </html>