JavaScript-Games/index.html at main · ZLostTK/JavaScript-Games · 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
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

	<!-- SEO primario -->
	<title>JavaScript Games</title>
	<meta name="description" content="Colección de juegos clásicos - Snake, Tetris, Pong y más - creados con JavaScript puro (Vanilla JS). Gratis, sin anuncios, jugables desde el navegador.">
	<link rel="canonical" href="https://zlosttk.github.io/JavaScript-Games/">

	<!-- Open Graph (redes sociales + motores de IA) -->
	<meta property="og:type" content="website">
	<meta property="og:url" content="https://zlosttk.github.io/JavaScript-Games/">
	<meta property="og:title" content="JavaScript Games – Juegos Clásicos en Vanilla JS">
	<meta property="og:description" content="Colección de juegos clásicos creados con JavaScript puro. Snake, Tetris, Pong y más. Gratis, sin anuncios, jugables desde el navegador.">
	<meta property="og:locale" content="es_MX">

	<!-- Twitter Card -->
	<meta name="twitter:card" content="summary">
	<meta name="twitter:title" content="JavaScript Games – Juegos Clásicos en Vanilla JS">
	<meta name="twitter:description" content="Juegos clásicos en JavaScript puro. Gratis, sin anuncios, jugables desde el navegador.">

	<!-- PWA / Tema -->
	<link rel="manifest" href="manifest.json">
	<link rel="icon" href="icon.svg" type="image/svg+xml">
	<meta name="theme-color" content="#09090b">

	<!-- Schema markup: WebSite + autor -->
	<script type="application/ld+json">
		{
			"@context": "https://schema.org",
			"@type": "WebSite",
			"name": "JavaScript Games",
			"url": "https://zlosttk.github.io/JavaScript-Games/",
			"description": "Colección de juegos clásicos creados con JavaScript puro (Vanilla JS). Gratis, sin anuncios, jugables desde el navegador.",
			"inLanguage": "es",
			"author": {
				"@type": "Person",
				"name": "ZLostTK"
			},
			"potentialAction": {
				"@type": "SearchAction",
				"target": "https://zlosttk.github.io/JavaScript-Games/?q={search_term_string}",
				"query-input": "required name=search_term_string"
			}
		}
	</script>

	<!-- Font Awesome diferido para no bloquear render -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" media="print" onload="this.media='all'">
	<noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"></noscript>

	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div id="pwa-banner" class="hidden">
		<p>¡Instala la App para jugar sin conexión y pantalla completa!</p>
		<button id="install-btn"><i class="fa-solid fa-download" aria-hidden="true"></i> Instalar PWA</button>
	</div>

	<header>
		<!-- Ícono separado del texto del H1 para que crawlers lean "JavaScript Games" limpio -->
		<h1>
			<i class="fa-solid fa-gamepad" aria-hidden="true"></i>
			JavaScript Games
		</h1>
		<p>Una colección de juegos clásicos creados con Vanilla JS.</p>
		<div class="header-nav">
			<div class="search-wrap">
				<i class="fa-solid fa-search search-icon" aria-hidden="true"></i>
				<input type="text" id="search-input" class="search-input" placeholder="Buscar juegos..." autocomplete="off">
			</div>
			<nav class="nav-links">
				<a href="." class="nav-link active" aria-current="page">Juegos</a>
				<a href="tools/" class="nav-link">Tools</a>
			</nav>
		</div>
		<button id="clear-cache-btn" class="clear-cache-btn" aria-label="Borrar caché y recargar">
			<i class="fa-solid fa-trash-can" aria-hidden="true"></i> Borrar Caché
		</button>
	</header>

	<main id="game-grid" aria-label="Catálogo de juegos"></main>

	<div id="confirm-modal" class="modal hidden">
		<div class="modal-content">
			<p id="confirm-modal-text">¿Borrar toda la caché?</p>
			<div class="modal-actions">
				<button id="confirm-modal-cancel" class="btn btn-secondary">Cancelar</button>
				<button id="confirm-modal-ok" class="btn btn-danger">Borrar</button>
			</div>
		</div>
	</div>

	<footer>
		<p>Desarrollado con JavaScript puro (Vanilla JS) · Open Source</p>
		<p>&copy; 2026 <a href="https://github.com/ZLostTK" rel="author" aria-label="Perfil de GitHub de ZLostTK" style="color: #f5f5e3; text-decoration: none;">ZLostTK</a></p>
	</footer>

	<script type="module" src="./main.js"></script>
</body>
</html>