MiniGamesHub/index.html at main · Cavid0/MiniGamesHub · 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#0f172a">
    <meta name="description" content="Mini Games Hub — play Code Breaker, Number Guess, Snake, and Tic-Tac-Toe in a sleek, modern browser interface.">
    <meta name="author" content="Mini Games Hub">
    <meta name="robots" content="index, follow">
    <meta name="referrer" content="no-referrer">

    <meta property="og:type" content="website">
    <meta property="og:title" content="Mini Games Hub">
    <meta property="og:description" content="Four beautifully crafted browser mini-games. Play instantly — no install required.">
    <meta name="twitter:card" content="summary">

    <title>Mini Games Hub — Play Instantly</title>

    <link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
    <link rel="apple-touch-icon" href="assets/favicon.svg">

    <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=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">

    <link rel="manifest" href="manifest.webmanifest">

    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/security.css">
    <script src="assets/js/theme.js"></script>
</head>
<body>
    <div class="top-bar">
        <button class="icon-toggle" id="sound-toggle" type="button" aria-label="Toggle sound" title="Sound"></button>
        <button class="icon-toggle" id="theme-toggle" type="button" aria-label="Toggle theme" title="Theme"></button>
    </div>

    <div class="background-animation" aria-hidden="true">
        <div class="circle circle-1"></div>
        <div class="circle circle-2"></div>
        <div class="circle circle-3"></div>
    </div>

    <div class="hub-container">
        <header class="hub-header">
            <h1 class="hub-title">🎮 Mini Games Hub</h1>
            <p class="hub-subtitle">Choose your challenge</p>
        </header>

        <div class="games-grid" role="list">
            <div class="game-card" data-game="codebreaker" role="listitem">
                <div class="card-content">
                    <div class="game-icon-wrapper" aria-hidden="true">
                        <span class="game-icon">🔐</span>
                    </div>
                    <h2 class="game-title">Code Breaker</h2>
                    <p class="game-description">
                        Decrypt the secure 4-digit sequence using logic and deduction.
                    </p>
                    <div class="game-features">
                        <span class="feature">6 Attempts</span>
                        <span class="feature">Logic Puzzle</span>
                    </div>
                </div>
                <a href="games/codebreaker/index.html" class="play-button" aria-label="Launch Code Breaker">
                    <span>LAUNCH</span>
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                        <path d="M5 12h14M12 5l7 7-7 7"/>
                    </svg>
                </a>
            </div>

            <div class="game-card" data-game="numberguess" role="listitem">
                <div class="card-content">
                    <div class="game-icon-wrapper" aria-hidden="true">
                        <span class="game-icon">🎲</span>
                    </div>
                    <h2 class="game-title">Number Guess</h2>
                    <p class="game-description">
                        Find the hidden number between 1-100 with smart boundary hints.
                    </p>
                    <div class="game-features">
                        <span class="feature">5 Attempts</span>
                        <span class="feature">Dynamic Hints</span>
                    </div>
                </div>
                <a href="games/numberguess/index.html" class="play-button" aria-label="Launch Number Guess">
                    <span>LAUNCH</span>
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                        <path d="M5 12h14M12 5l7 7-7 7"/>
                    </svg>
                </a>
            </div>

            <div class="game-card" data-game="snake" role="listitem">
                <div class="card-content">
                    <div class="game-icon-wrapper" aria-hidden="true">
                        <span class="game-icon">🐍</span>
                    </div>
                    <h2 class="game-title">Snake</h2>
                    <p class="game-description">
                        Classic snake game — eat food, grow longer, and beat your high score!
                    </p>
                    <div class="game-features">
                        <span class="feature">Bonus Food</span>
                        <span class="feature">Level Up</span>
                    </div>
                </div>
                <a href="games/snake/index.html" class="play-button" aria-label="Launch Snake">
                    <span>LAUNCH</span>
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                        <path d="M5 12h14M12 5l7 7-7 7"/>
                    </svg>
                </a>
            </div>

            <div class="game-card" data-game="tictactoe" role="listitem">
                <div class="card-content">
                    <div class="game-icon-wrapper" aria-hidden="true">
                        <span class="game-icon">⭕</span>
                    </div>
                    <h2 class="game-title">Tic-Tac-Toe</h2>
                    <p class="game-description">
                        Classic 2-player battle on one device. First to three in a row wins!
                    </p>
                    <div class="game-features">
                        <span class="feature">2 Players</span>
                        <span class="feature">Local PvP</span>
                    </div>
                </div>
                <a href="games/tictactoe/index.html" class="play-button" aria-label="Launch Tic-Tac-Toe">
                    <span>LAUNCH</span>
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                        <path d="M5 12h14M12 5l7 7-7 7"/>
                    </svg>
                </a>
            </div>
        </div>

        <footer class="hub-footer">
            <p>Select a game to start playing</p>
        </footer>
    </div>

    <script src="assets/js/security.js"></script>
    <script src="assets/js/haptics.js"></script>
    <script src="assets/js/sounds.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="assets/js/pwa.js"></script>
</body>
</html>