Hugging Face's logo

Spaces:
SAIcgr
/
bcgg
Running

App Files Community
SAIcgr commited on
Commit
94bdbfa
·
verified ·
1 Parent(s): d7b9b4a

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +204 -19
index.html CHANGED
@@ -1,19 +1,204 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Poki-Style Game Hub</title>
7
+ <style>
8
+ /* Animated Background */
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ background: linear-gradient(-45deg, #1a1a2e, #16213e, #0f3460, #533483);
12
+ background-size: 400% 400%;
13
+ animation: bgAnimation 8s infinite alternate ease-in-out;
14
+ color: white;
15
+ margin: 0;
16
+ padding: 0;
17
+ text-align: center;
18
+ display: flex;
19
+ flex-direction: column;
20
+ align-items: center;
21
+ justify-content: center;
22
+ min-height: 100vh;
23
+ transition: background 0.5s ease;
24
+ }
25
+
26
+ @keyframes bgAnimation {
27
+ 0% { background-position: 0% 50%; }
28
+ 100% { background-position: 100% 50%; }
29
+ }
30
+
31
+ /* Game Selection Grid */
32
+ .game-grid {
33
+ display: grid;
34
+ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
35
+ gap: 20px;
36
+ width: 90%;
37
+ max-width: 600px;
38
+ margin-top: 20px;
39
+ }
40
+
41
+ /* Game Cards */
42
+ .game-card {
43
+ background: rgba(255, 255, 255, 0.1);
44
+ padding: 15px;
45
+ border-radius: 12px;
46
+ cursor: pointer;
47
+ transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
48
+ display: flex;
49
+ flex-direction: column;
50
+ align-items: center;
51
+ backdrop-filter: blur(5px);
52
+ border: 2px solid transparent;
53
+ position: relative;
54
+ }
55
+
56
+ .game-card:hover {
57
+ background: rgba(255, 255, 255, 0.2);
58
+ transform: scale(1.1) rotate(-2deg);
59
+ box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.6);
60
+ border-color: white;
61
+ }
62
+
63
+ .game-card:active {
64
+ transform: scale(0.95);
65
+ }
66
+
67
+ .game-card img {
68
+ width: 100px;
69
+ height: 100px;
70
+ border-radius: 12px;
71
+ transition: transform 0.3s ease;
72
+ }
73
+
74
+ .game-card:hover img {
75
+ transform: scale(1.1);
76
+ }
77
+
78
+ .game-card p {
79
+ margin: 8px 0 0;
80
+ font-size: 18px;
81
+ font-weight: bold;
82
+ }
83
+
84
+ /* Game Frame */
85
+ #game-frame {
86
+ width: 100%;
87
+ height: 90vh;
88
+ border: none;
89
+ display: none;
90
+ opacity: 0;
91
+ transition: opacity 0.5s ease-in-out;
92
+ }
93
+
94
+ /* Full Screen View */
95
+ .full-view {
96
+ width: 100%;
97
+ height: 100vh;
98
+ }
99
+
100
+ /* Back Button */
101
+ .back-btn {
102
+ display: none;
103
+ position: absolute;
104
+ top: 15px;
105
+ left: 15px;
106
+ background: rgba(255, 255, 255, 0.8);
107
+ color: black;
108
+ border: none;
109
+ padding: 12px 18px;
110
+ border-radius: 8px;
111
+ font-size: 18px;
112
+ cursor: pointer;
113
+ transition: all 0.3s ease-in-out;
114
+ opacity: 0;
115
+ }
116
+
117
+ .back-btn.show {
118
+ opacity: 1;
119
+ display: block;
120
+ animation: pulse 1.5s infinite alternate;
121
+ }
122
+
123
+ .back-btn:hover {
124
+ background: white;
125
+ transform: scale(1.1);
126
+ }
127
+
128
+ @keyframes pulse {
129
+ 0% { transform: scale(1); }
130
+ 100% { transform: scale(1.05); }
131
+ }
132
+
133
+ /* Mobile Optimized */
134
+ @media (max-width: 600px) {
135
+ .game-grid {
136
+ grid-template-columns: repeat(2, 1fr);
137
+ }
138
+
139
+ .game-card img {
140
+ width: 80px;
141
+ height: 80px;
142
+ }
143
+ }
144
+ </style>
145
+ </head>
146
+ <body>
147
+
148
+ <h1>🎮 Poki-Style Game Hub</h1>
149
+
150
+ <!-- Game Selection Grid -->
151
+ <div id="game-grid" class="game-grid">
152
+ <div class="game-card" onclick="openGame('media-pipe-pong.html')">
153
+ <img src="game1.png" alt="Game 1">
154
+ <p>MediaPipe Pong</p>
155
+ </div>
156
+ <div class="game-card" onclick="openGame('gt.html')">
157
+ <img src="game2.png" alt="Game 2">
158
+ <p>Hong Game</p>
159
+ </div>
160
+ <div class="game-card" onclick="openGame('media-pipe-pong.html')">
161
+ <img src="game3.png" alt="Game 3">
162
+ <p>PONG</p>
163
+ </div>
164
+ <div class="game-card" onclick="openGame('profile.html')">
165
+ <img src="profile.png" alt="Profile">
166
+ <p>Profile</p>
167
+ </div>
168
+ <div class="game-card" onclick="openGame('mk.html')">
169
+ <img src="game5.png" alt="Game 5">
170
+ <p>MK</p>
171
+ </div>
172
+ <div class="game-card" onclick="openGame('mk2.html')">
173
+ <img src="game6.png" alt="Game 6">
174
+ <p>MK2</p>
175
+ </div>
176
+ </div>
177
+
178
+ <!-- Game Iframe -->
179
+ <iframe id="game-frame"></iframe>
180
+
181
+ <!-- Back Button -->
182
+ <button class="back-btn" onclick="goBack()">🔙 Back</button>
183
+
184
+ <script>
185
+ function openGame(gameUrl) {
186
+ document.getElementById("game-grid").style.display = "none"; // Hide game menu
187
+ document.getElementById("game-frame").src = gameUrl;
188
+ document.getElementById("game-frame").classList.add("full-view"); // Fullscreen view
189
+ document.getElementById("game-frame").style.display = "block";
190
+ setTimeout(() => document.getElementById("game-frame").style.opacity = "1", 100); // Smooth fade-in
191
+ document.querySelector(".back-btn").classList.add("show"); // Show back button
192
+ }
193
+
194
+ function goBack() {
195
+ document.getElementById("game-grid").style.display = "grid"; // Show game menu
196
+ document.getElementById("game-frame").classList.remove("full-view");
197
+ document.getElementById("game-frame").style.opacity = "0";
198
+ setTimeout(() => document.getElementById("game-frame").style.display = "none", 500);
199
+ document.querySelector(".back-btn").classList.remove("show"); // Hide back button
200
+ }
201
+ </script>
202
+
203
+ </body>
204
+ </html>