https-devrutu143.github.io/index.html at main · devrutu143/https-devrutu143.github.io · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#ffffff">
    <title>Fun Games App</title>
    <link rel="stylesheet" href="style.css">
    <link rel="manifest" href="manifest.json">
</head>
<body>
    <div class="container fade-in">
        <header>
            <h1 class="slide-in">Welcome To RutuDev Studio!</h1>
            <div id="welcome-note" class="fade-in">Enter your name to start.</div>
            <input type="text" id="user-name" placeholder="Enter your name..." class="input-field">
            <button id="save-name" class="btn">Save Name</button>
        </header>

        <section id="dashboard-section" class="hidden">
            <h2 class="fade-in">Dashboard</h2>
            <p id="dashboard-welcome"></p>
            <input type="text" id="update-name" placeholder="Update your name..." class="input-field">
            <button id="update-name-btn" class="btn">Update Name</button>
            <div id="nisha-quote" class="hidden quote"></div>
            <button id="games-btn" class="btn game-btn">Play Games</button>
            <button id="leaderboard-btn" class="btn game-btn">View Leaderboard</button>
            <button id="secrets-btn" class="btn game-btn">Secret's</button>
            <button id="next-website-btn" class="btn game-btn">Next Website</button>
        </section>

        <section id="password-section" class="hidden">
            <h2 class="fade-in">Enter Password for Secret's</h2>
            <input type="password" id="password-input" placeholder="Enter password..." class="input-field">
            <button id="submit-password" class="btn">Submit</button>
            <p id="password-error" class="error hidden">Wrong</p>
            <button class="btn back-btn">Back to Dashboard</button>
        </section>

        <section id="secrets-section" class="hidden">
            <h2 class="fade-in">Secret's Dashboard</h2>
            <div class="photo-frame fade-in">
                <img src="assets/Snapchat-1481157723.jpg" alt="My Image">
            </div>
            <p class="secret-signature">Madam Ji ki Muskaan 🤭</p>
            <div class="photo-frame fade-in">
                <img src="assets/Snapchat-2111848756.jpg" alt="Second Image">
            </div>
            <p class="secret-signature">itni pyari smile sa ma v melt hogya🥀</p>
            <div class="photo-frame fade-in">
                <img src="assets/Snapchat-574192377.jpg" alt="Third Image">
            </div>
            <p class="secret-signature">haaye this too precious 💕</p>
            <button class="btn back-btn">Back to Main Dashboard</button>
        </section>

        <section id="games-section" class="hidden">
            <h2 class="fade-in">Choose a Game</h2>
            <button id="game1-btn" class="btn game-btn">Tic-Tac-Toe</button>
            <button id="game2-btn" class="btn game-btn">Rock-Paper-Scissors</button>
            <button id="game3-btn" class="btn game-btn">Memory Match</button>
            <button id="game4-btn" class="btn game-btn">Flappy Rutu</button>
            <button class="btn back-btn">Back to Dashboard</button>
        </section>

        <!-- Game 1: Tic-Tac-Toe -->
        <section id="game1" class="game-container hidden">
            <h2>Tic-Tac-Toe vs Rutu</h2>
            <select id="difficulty" class="input-field">
                <option value="easy">Easy</option>
                <option value="medium">Medium</option>
                <option value="hardcore">Hardcore</option>
            </select>
            <div id="board"></div>
            <p id="message">Your turn (X)<span id="thinking-loader" class="hidden"> ⏳</span></p>
            <button id="reset-tic" class="btn">Reset</button>
            <button class="btn back-btn">Back to Dashboard</button>
        </section>

        <!-- Game 2: Rock-Paper-Scissors -->
        <section id="game2" class="game-container hidden">
            <h2>Rock-Paper-Scissors</h2>
            <div class="choices-container">
                <button class="choice" data-choice="rock">Rock</button>
                <span id="vs-graphic" class="hidden">⚡</span>
                <button class="choice" data-choice="paper">Paper</button>
                <button class="choice" data-choice="scissors">Scissors</button>
            </div>
            <p id="result"></p>
            <p>Score: <span id="score">0</span></p>
            <button class="btn back-btn">Back to Dashboard</button>
        </section>

        <!-- Game 3: Memory Match -->
        <section id="game3" class="game-container hidden">
            <h2>Memory Match</h2>
            <div id="memory-board"></div>
            <p>Moves: <span id="moves">0</span></p>
            <button id="reset-memory" class="btn">Reset</button>
            <button class="btn back-btn">Back to Dashboard</button>
        </section>

        <!-- Game 4: Flappy Rutu -->
        <section id="game4" class="game-container hidden">
            <h2>Flappy Rutu 😜</h2>
            <canvas id="flappy-canvas"></canvas>
            <p>Score: <span id="flappy-score">0</span></p>
            <p id="flappy-message" class="hidden"></p>
            <button id="reset-flappy" class="btn">Retry</button>
            <button class="btn back-btn">Back to Dashboard</button>
        </section>

        <section id="leaderboard-section" class="hidden">
            <h2 class="fade-in">Leaderboard</h2>
            <ul id="leaderboard"></ul>
            <button class="btn back-btn">Back to Dashboard</button>
        </section>

        <footer>
            <p>Made by Rutu😎</p>
        </footer>
    </div>

    <script src="script.js"></script>
</body>
                </html>