Untitled


<!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>