Untitled
unknown
plain_text
10 days ago
3.9 kB
3
Indexable
Never
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Point and Click Game</title> <style> /* General Styles */ body { background-color: black; color: white; font-family: Arial, sans-serif; text-align: center; margin: 0; padding: 0; } h1 { margin: 20px; font-size: 2rem; } /* Container for the Game */ .container { margin-top: 50px; display: none; /* Initially hidden */ } /* Room Buttons */ .room { background-color: grey; padding: 20px; margin: 20px; border-radius: 10px; cursor: pointer; display: inline-block; width: 150px; } .room:hover { background-color: #555; } /* Start Screen */ #startScreen { margin-top: 100px; } #door { background-color: brown; padding: 20px; border-radius: 10px; cursor: pointer; display: inline-block; font-size: 20px; } #door:hover { background-color: #654321; } /* Responsive Design for Mobile */ @media (max-width: 768px) { h1 { font-size: 1.5rem; } .room { width: 100px; padding: 15px; margin: 10px; font-size: 1rem; } #door { font-size: 1.2rem; padding: 15px; } .container { margin-top: 20px; } } @media (max-width: 480px) { h1 { font-size: 1.2rem; } .room { width: 80px; padding: 10px; margin: 8px; font-size: 0.8rem; } #door { font-size: 1rem; padding: 10px; } .container { margin-top: 15px; } } </style> <script> function enterUniverse() { let response = confirm("Are you sure you want to enter this universe?"); if (response) { document.getElementById('startScreen').style.display = 'none'; document.getElementById('gameContainer').style.display = 'block'; } } function showPopup(room) { if (room === "IT") { alert("There is a guy in here that wants to reach you."); } else if (room === "Talent") { alert("There is a wonderful girl in here that no one ever understood."); } else if (room === "Area Break") { let response = confirm("I think the alone guy in that room would love to meet you, should you invite him?"); if (response) { alert("You will be my priority, I will notify my creator about that."); } else { alert("Are you sure you want to collapse this universe?"); } } } </script> </head> <body> <!-- Start Screen --> <div id="startScreen"> <h1>Welcome to the Universe</h1> <div id="door" onclick="enterUniverse()">Enter the Door</div> </div> <!-- Game Container --> <div id="gameContainer" class="container"> <h1>Office Room Explorer</h1> <div class="room" onclick="showPopup('IT')">IT Room</div> <div class="room" onclick="showPopup('Talent')">Talent Room</div> <div class="room" onclick="showPopup('Area Break')">Area Break Room</div> </div> </body> </html>
Leave a Comment