Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ad190f2

Browse files
authored
Update index.html
d
1 parent 0425ad9 commit ad190f2

File tree

1 file changed

+37
-205
lines changed

1 file changed

+37
-205
lines changed

‎index.html

Lines changed: 37 additions & 205 deletions
Original file line numberDiff line numberDiff line change
@@ -1,210 +1,42 @@
1-
<!doctype html>
2-
<htmllang="hi">
1+
<!DOCTYPE html>
2+
<html>
33
<head>
4-
<meta charset="utf-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6-
<title>My HTML Games — Play</title>
7-
<style>
8-
:root{
9-
--bg:#071022; --card:#0b1220; --muted:#9aa5b1; --accent:#06b6d4;
10-
}
11-
*{box-sizing:border-box}
12-
body{margin:0;font-family:system-ui,Segoe UI,Roboto,"Noto Sans",Arial;background:linear-gradient(180deg,#071024,#04121a);color:#e6eef3;min-height:100vh;}
13-
header{padding:14px 18px;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,0.02)}
14-
header h1{margin:0;font-size:18px}
15-
.wrap{display:grid;grid-template-columns:320px 1fr;gap:16px;padding:16px;height:calc(100vh - 68px);}
16-
.sidebar{background:var(--card);border-radius:10px;padding:12px;overflow:auto}
17-
.game-list{display:flex;flex-direction:column;gap:8px}
18-
.game-item{display:flex;gap:10px;align-items:center;padding:8px;border-radius:8px;cursor:pointer;transition:all .12s;background:transparent}
19-
.game-item:hover{transform:translateY(-2px);background:rgba(255,255,255,0.02)}
20-
.game-item.active{outline:2px solid rgba(6,182,212,0.12);background:linear-gradient(90deg, rgba(6,182,212,0.03), transparent)}
21-
.gi-thumb{width:52px;height:40px;border-radius:6px;background:linear-gradient(135deg,#08324a,#04202b);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--muted);font-size:12px}
22-
.gi-info{flex:1}
23-
.gi-title{font-size:14px;margin:0}
24-
.gi-sub{font-size:12px;color:var(--muted);margin:0}
25-
26-
.main{background:var(--card);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
27-
.controls{display:flex;gap:8px;align-items:center;justify-content:space-between}
28-
.btn{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:8px 12px;border-radius:8px;color:inherit;cursor:pointer}
29-
.iframe-wrap{flex:1;position:relative;border-radius:8px;overflow:hidden;background:#000;min-height:300px}
30-
iframe{width:100%;height:100%;border:0;display:block}
31-
32-
.note{font-size:12px;color:var(--muted)}
33-
34-
@media (max-width:880px){
35-
.wrap{grid-template-columns:1fr; padding:10px; height:calc(100vh - 68px)}
36-
.sidebar{order:2;height:220px}
37-
.main{order:1;min-height:60vh}
38-
}
39-
</style>
4+
<meta charset="UTF-8">
5+
<title>HTML CSS JavaScript Games</title>
406
</head>
417
<body>
42-
<header>
43-
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Crect rx='8' width='36' height='36' fill='%2306b6d4'/%3E%3Ctext x='50%25' y='55%25' font-family='Arial' font-size='14' text-anchor='middle' fill='%230b1220'%3EGG%3C/text%3E%3C/svg%3E" alt="logo" style="width:36px;height:36px;border-radius:8px">
44-
<div style="flex:1">
45-
<h1 style="margin:0">HTML Games Collection</h1>
46-
<div class="note">30 games — click to play. Mobile touch friendly.</div>
47-
</div>
48-
<div style="display:flex;gap:8px;align-items:center">
49-
<button class="btn" id="openNewTab">Open in new tab</button>
50-
<button class="btn" id="fullscreenBtn">Fullscreen</button>
51-
</div>
52-
</header>
53-
54-
<div class="wrap">
55-
<aside class="sidebar">
56-
<div style="font-size:13px;color:var(--muted);margin-bottom:8px">Games list</div>
57-
<div class="game-list" id="gameList"></div>
58-
<div class="note" style="margin-top:10px">अगर iframe कोई game load न करे → "Open in new tab" दबाएं।</div>
59-
</aside>
60-
61-
<main class="main">
62-
<div class="controls">
63-
<div><strong id="currentTitle">Select a game to play →</strong></div>
64-
<div class="note" id="statusNote"></div>
65-
</div>
66-
67-
<div class="iframe-wrap" id="frameWrap">
68-
<iframe id="gameFrame" src="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" sandbox="allow-scripts allow-same-origin allow-forms allow-pointer-lock"></iframe>
69-
</div>
70-
71-
<div style="display:flex;justify-content:space-between;align-items:center">
72-
<div class="note">Tip: Mobile users — use landscape for best experience.</div>
73-
<div class="note">Built for demo • MIT</div>
74-
</div>
75-
</main>
76-
</div>
77-
78-
<script>
79-
/* ========== Edit these if folder names differ in your repo ========== */
80-
const games = [
81-
{id:1, title:"01 - Candy Crush", path:"01-Candy-Crush-Game"},
82-
{id:2, title:"02 - Archery", path:"02-Archery-Game"},
83-
{id:3, title:"03 - Speed Typing", path:"03-Speed-Typing-Game"},
84-
{id:4, title:"04 - Breakout", path:"04-Breakout-Game"},
85-
{id:5, title:"05 - Minesweeper", path:"05-Minesweeper-Game"},
86-
{id:6, title:"06 - Tower Blocks", path:"06-Tower-Blocks"},
87-
{id:7, title:"07 - Ping Pong", path:"07-Ping-Pong-Game"},
88-
{id:8, title:"08 - Tetris", path:"08-Tetris-Game"},
89-
{id:9, title:"09 - Tilting Maze", path:"09-Tilting-Maze-Game"},
90-
{id:10, title:"10 - Memory Card", path:"10-Memory-Card-Game"},
91-
{id:11, title:"11 - Rock Paper Scissors", path:"11-Rock-Paper-Scissors"},
92-
{id:12, title:"12 - Type Number Guessing", path:"12-Type-Number-Guessing-Game"},
93-
{id:13, title:"13 - Tic Tac Toe", path:"13-Tic-Tac-Toe"},
94-
{id:14, title:"14 - Snake", path:"14-Snake-Game"},
95-
{id:15, title:"15 - Connect Four", path:"15-Connect-Four-Game"},
96-
{id:16, title:"16 - Insect Catch", path:"16-Insect-Catch-Game"},
97-
{id:17, title:"17 - Typing Game", path:"17-Typing-Game"},
98-
{id:18, title:"18 - Hangman", path:"18-Hangman-Game"},
99-
{id:19, title:"19 - Flappy Bird", path:"19-Flappy-Bird-Game"},
100-
{id:20, title:"20 - Crossy Road", path:"20-Crossy-Road-Game"},
101-
{id:21, title:"21 - 2048", path:"21-2048-Game"},
102-
{id:22, title:"22 - Dice Roll", path:"22-Dice-Roll-Simulator"},
103-
{id:23, title:"23 - Shape Clicker", path:"23-Shape-Clicker-Game"},
104-
{id:24, title:"24 - Typing Game #2", path:"24-Typing-Game"},
105-
{id:25, title:"25 - Speak Number Guessing", path:"25-Speak-Number-Guessing-Game"},
106-
{id:26, title:"26 - Fruit Slicer", path:"26-Fruit-Slicer-Game"},
107-
{id:27, title:"27 - Quiz Game", path:"27-Quiz-Game"},
108-
{id:28, title:"28 - Emoji Catcher", path:"28-Emoji-Catcher-Game"},
109-
{id:29, title:"29 - Whack-A-Mole", path:"29-Whack-A-Mole-Game"},
110-
{id:30, title:"30 - Simon Says", path:"30-Simon-Says-Game"}
111-
];
112-
113-
const listEl = document.getElementById('gameList');
114-
const frame = document.getElementById('gameFrame');
115-
const titleEl = document.getElementById('currentTitle');
116-
const statusNote = document.getElementById('statusNote');
117-
const frameWrap = document.getElementById('frameWrap');
118-
119-
// Create list entries
120-
games.forEach(g => {
121-
const div = document.createElement('div');
122-
div.className = 'game-item';
123-
div.dataset.path = g.path;
124-
125-
const thumb = document.createElement('div');
126-
thumb.className = 'gi-thumb';
127-
thumb.innerText = String(g.id).padStart(2,'0');
128-
129-
const info = document.createElement('div');
130-
info.className = 'gi-info';
131-
const t = document.createElement('p'); t.className='gi-title'; t.innerText = g.title;
132-
const s = document.createElement('p'); s.className='gi-sub'; s.innerText = g.path;
133-
info.appendChild(t); info.appendChild(s);
134-
135-
div.appendChild(thumb); div.appendChild(info);
136-
137-
div.addEventListener('click', () => {
138-
document.querySelectorAll('.game-item').forEach(el=>el.classList.remove('active'));
139-
div.classList.add('active');
140-
loadGame(g);
141-
});
142-
143-
listEl.appendChild(div);
144-
});
145-
146-
// Load selected game into iframe (relative path within repo)
147-
function loadGame(g){
148-
const url = './' + g.path + '/';
149-
titleEl.innerText = 'Playing: ' + g.title;
150-
statusNote.innerText = '';
151-
frame.src = url;
152-
frame.dataset.current = url;
153-
154-
// Add small timeout to detect 404 or blocked embed (if fails to load)
155-
let loaded = false;
156-
function onLoad(){ loaded = true; statusNote.innerText = ''; frame.removeEventListener('load', onLoad); }
157-
frame.addEventListener('load', onLoad);
158-
setTimeout(()=> {
159-
if(!loaded){
160-
statusNote.innerText = 'अगर लोड नहीं हुआ, तो "Open in new tab" दबाकर जांचें (CORS/GitHub Pages hosting)।';
161-
}
162-
}, 1500);
163-
}
164-
165-
// Default: load first game
166-
if(games.length) {
167-
// mark first active
168-
const first = document.querySelector('.game-item');
169-
if(first) first.classList.add('active');
170-
loadGame(games[0]);
171-
}
172-
173-
// Open current in new tab
174-
document.getElementById('openNewTab').addEventListener('click', function(){
175-
const url = frame.dataset.current || frame.src;
176-
if(!url) return alert('कोई गेम चुना नहीं गया है।');
177-
// For GitHub Pages, open absolute URL
178-
let abs = url;
179-
// If running from GitHub Pages domain, convert to absolute
180-
if(location.hostname.endsWith('github.io')){
181-
// repo assumed to be at /<repo>/
182-
// Keep relative path which works as absolute on pages
183-
abs = new URL(url, location.href).href;
184-
}
185-
window.open(abs, '_blank');
186-
});
187-
188-
// Fullscreen toggle for iframe container
189-
document.getElementById('fullscreenBtn').addEventListener('click', function(){
190-
const el = frameWrap;
191-
if(el.requestFullscreen) el.requestFullscreen();
192-
else if(el.webkitRequestFullscreen) el.webkitRequestFullscreen();
193-
else alert('Fullscreen समर्थित नहीं है आपके ब्राउज़र में।');
194-
});
195-
196-
// Touch improvements: prevent page scroll when touching iframe area
197-
frameWrap.addEventListener('touchstart', function(e){ e.preventDefault(); }, {passive:false});
198-
199-
// Optional: convert touch events to mouse events for games that listen to mouse
200-
(function(){
201-
var selectors = ['iframe'];
202-
var elements = selectors.map(s => document.querySelector(s)).filter(Boolean);
203-
if(elements.length === 0) return;
204-
// We cannot inject events inside iframe due to cross-origin; but most games inside repo are same-origin on GitHub Pages, so they will receive pointer events.
205-
// If some games still don't react to touch, user can open in new tab.
206-
})();
207-
208-
</script>
8+
<h1>30 HTML, CSS & JavaScript Games 🎮</h1>
9+
<ol>
10+
<li><a href="01-Candy-Crush-Game/index.html" target="_blank">Candy Crush Game</a></li>
11+
<li><a href="02-Archery-Game/index.html" target="_blank">Archery Game</a></li>
12+
<li><a href="03-Speed-Typing-Game/index.html" target="_blank">Speed Typing Game</a></li>
13+
<li><a href="04-Breakout-Game/index.html" target="_blank">Breakout Game</a></li>
14+
<li><a href="05-Minesweeper-Game/index.html" target="_blank">Minesweeper Game</a></li>
15+
<li><a href="06-Tower-Blocks/index.html" target="_blank">Tower Blocks Game</a></li>
16+
<li><a href="07-Ping-Pong-Game/index.html" target="_blank">Ping Pong Game</a></li>
17+
<li><a href="08-Tetris-Game/index.html" target="_blank">Tetris Game</a></li>
18+
<li><a href="09-Tilting-Maze-Game/index.html" target="_blank">Tilting Maze Game</a></li>
19+
<li><a href="10-Memory-Card-Game/index.html" target="_blank">Memory Card Game</a></li>
20+
<li><a href="11-Rock-Paper-Scissors/index.html" target="_blank">Rock Paper Scissors Game</a></li>
21+
<li><a href="12-Type-Number-Guessing-Game/index.html" target="_blank">Type Number Guessing Game</a></li>
22+
<li><a href="13-Tic-Tac-Toe/index.html" target="_blank">Tic Tac Toe Game</a></li>
23+
<li><a href="14-Snake-Game/index.html" target="_blank">Snake Game</a></li>
24+
<li><a href="15-Connect-Four-Game/index.html" target="_blank">Connect Four Game</a></li>
25+
<li><a href="16-Insect-Catch-Game/index.html" target="_blank">Insect Catch Game</a></li>
26+
<li><a href="17-Typing-Game/index.html" target="_blank">Typing Game</a></li>
27+
<li><a href="18-Hangman-Game/index.html" target="_blank">Hangman Game</a></li>
28+
<li><a href="19-Flappy-Bird-Game/index.html" target="_blank">Flappy Bird Game</a></li>
29+
<li><a href="20-Crossy-Road-Game/index.html" target="_blank">Crossy Road Game</a></li>
30+
<li><a href="21-2048-Game/index.html" target="_blank">2048 Game</a></li>
31+
<li><a href="22-Dice-Roll-Simulator/index.html" target="_blank">Dice Roll Simulator</a></li>
32+
<li><a href="23-Shape-Clicker-Game/index.html" target="_blank">Shape Clicker Game</a></li>
33+
<li><a href="24-Typing-Game/index.html" target="_blank">Typing Game</a></li>
34+
<li><a href="25-Speak-Number-Guessing-Game/index.html" target="_blank">Speak Number Guessing Game</a></li>
35+
<li><a href="26-Fruit-Slicer-Game/index.html" target="_blank">Fruit Slicer Game</a></li>
36+
<li><a href="27-Quiz-Game/index.html" target="_blank">Quiz Game</a></li>
37+
<li><a href="28-Emoji-Catcher-Game/index.html" target="_blank">Emoji Catcher Game</a></li>
38+
<li><a href="29-Whack-A-Mole-Game/index.html" target="_blank">Whack A Mole Game</a></li>
39+
<li><a href="30-Simon-Says-Game/index.html" target="_blank">Simon Says Game</a></li>
40+
</ol>
20941
</body>
21042
</html>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /