diff --git a/favicon_io/about.txt b/favicon_io/about.txt
new file mode 100644
index 0000000..2062908
--- /dev/null
+++ b/favicon_io/about.txt
@@ -0,0 +1,6 @@
+This favicon was generated using the following graphics from Twitter Twemoji:
+
+- Graphics Title: 1f680.svg
+- Graphics Author: Copyright 2020 Twitter, Inc and other contributors (https://github.com/twitter/twemoji)
+- Graphics Source: https://github.com/twitter/twemoji/blob/master/assets/svg/1f680.svg
+- Graphics License: CC-BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
diff --git a/favicon_io/android-chrome-192x192.png b/favicon_io/android-chrome-192x192.png
new file mode 100644
index 0000000..385d40d
Binary files /dev/null and b/favicon_io/android-chrome-192x192.png differ
diff --git a/favicon_io/android-chrome-512x512.png b/favicon_io/android-chrome-512x512.png
new file mode 100644
index 0000000..843853f
Binary files /dev/null and b/favicon_io/android-chrome-512x512.png differ
diff --git a/favicon_io/apple-touch-icon.png b/favicon_io/apple-touch-icon.png
new file mode 100644
index 0000000..1b41da6
Binary files /dev/null and b/favicon_io/apple-touch-icon.png differ
diff --git a/favicon_io/favicon-16x16.png b/favicon_io/favicon-16x16.png
new file mode 100644
index 0000000..870d85f
Binary files /dev/null and b/favicon_io/favicon-16x16.png differ
diff --git a/favicon_io/favicon-32x32.png b/favicon_io/favicon-32x32.png
new file mode 100644
index 0000000..89bbbad
Binary files /dev/null and b/favicon_io/favicon-32x32.png differ
diff --git a/favicon_io/favicon.ico b/favicon_io/favicon.ico
new file mode 100644
index 0000000..385d320
Binary files /dev/null and b/favicon_io/favicon.ico differ
diff --git a/favicon_io/site.webmanifest b/favicon_io/site.webmanifest
new file mode 100644
index 0000000..45dc8a2
--- /dev/null
+++ b/favicon_io/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file
diff --git a/footer.js b/footer.js
index c3fe9fc..849c82d 100644
--- a/footer.js
+++ b/footer.js
@@ -45,7 +45,6 @@ class Footer extends HTMLElement {
customElements.define('footer-component', Footer);
-// @license-end
// CSS for the hidden button
const style = document.createElement('style');
@@ -59,10 +58,12 @@ style.textContent = `
border: none;
font-size: 24px;
cursor: pointer;
-}
-
-.footer-content:hover .secret-button {
- display: block;
-}
-`;
+ }
+
+ .footer-content:hover .secret-button {
+ display: block;
+ }
+ `;
document.head.appendChild(style);
+
+// @license-end
\ No newline at end of file
diff --git a/index.html b/index.html
index c757b03..f9b4677 100644
--- a/index.html
+++ b/index.html
@@ -24,6 +24,24 @@
<script src="header.js" type="text/javascript" defer></script>
<script src="footer.js" type="text/javascript" defer></script>
<link rel="stylesheet" href="styles.css" />
+ <link
+ rel="apple-touch-icon"
+ sizes="180x180"
+ href="favicon_io/apple-touch-icon.png"
+ />
+ <link
+ rel="icon"
+ type="image/png"
+ sizes="32x32"
+ href="favicon_io/favicon-32x32.png"
+ />
+ <link
+ rel="icon"
+ type="image/png"
+ sizes="16x16"
+ href="favicon_io/favicon-16x16.png"
+ />
+ <link rel="manifest" href="favicon_io/site.webmanifest" />
<title>Interstellar Development</title>
</head>
diff --git a/secret/asteroidDestroyer/explenation.html b/secret/asteroidDestroyer/explenation.html
index e6fed38..843c32c 100644
--- a/secret/asteroidDestroyer/explenation.html
+++ b/secret/asteroidDestroyer/explenation.html
@@ -5,6 +5,24 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Game Landing Page</title>
<link rel="stylesheet" href="styles.css" />
+ <link
+ rel="apple-touch-icon"
+ sizes="180x180"
+ href="../../favicon_io/apple-touch-icon.png"
+ />
+ <link
+ rel="icon"
+ type="image/png"
+ sizes="32x32"
+ href="../../favicon_io/favicon-32x32.png"
+ />
+ <link
+ rel="icon"
+ type="image/png"
+ sizes="16x16"
+ href="../../favicon_io/favicon-16x16.png"
+ />
+ <link rel="manifest" href="../../favicon_io/site.webmanifest" />
</head>
<body>
<div class="landing-page">
diff --git a/secret/asteroidDestroyer/secret.html b/secret/asteroidDestroyer/secret.html
index 9d7f63d..1b22d19 100644
--- a/secret/asteroidDestroyer/secret.html
+++ b/secret/asteroidDestroyer/secret.html
@@ -5,6 +5,24 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Asteroid Shooter</title>
<link rel="stylesheet" href="style.css" />
+ <link
+ rel="apple-touch-icon"
+ sizes="180x180"
+ href="../../favicon_io/apple-touch-icon.png"
+ />
+ <link
+ rel="icon"
+ type="image/png"
+ sizes="32x32"
+ href="../../favicon_io/favicon-32x32.png"
+ />
+ <link
+ rel="icon"
+ type="image/png"
+ sizes="16x16"
+ href="../../favicon_io/favicon-16x16.png"
+ />
+ <link rel="manifest" href="../../favicon_io/site.webmanifest" />
</head>
<body>
<canvas id="gameCanvas"></canvas>
diff --git a/secret/endlessRunner/index.html b/secret/endlessRunner/index.html
index e69de29..c2feb26 100644
--- a/secret/endlessRunner/index.html
+++ b/secret/endlessRunner/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Endless runner</title>
+ <link
+ rel="apple-touch-icon"
+ sizes="180x180"
+ href="../../favicon_io/apple-touch-icon.png"
+ />
+ <link
+ rel="icon"
+ type="image/png"
+ sizes="32x32"
+ href="../../favicon_io/favicon-32x32.png"
+ />
+ <link
+ rel="icon"
+ type="image/png"
+ sizes="16x16"
+ href="../../favicon_io/favicon-16x16.png"
+ />
+ <link rel="manifest" href="../../favicon_io/site.webmanifest" />
+ </head>
+ <body>
+ <div class="game-container">
+ <canvas id="gameCanvas"></canvas>
+ <button id="restartBtn" onclick="restartGame()">Restart</button>
+ </div>
+ <script src="script.js"></script>
+ </body>
+</html>
diff --git a/secret/endlessRunner/script.js b/secret/endlessRunner/script.js
index e69de29..c1f200f 100644
--- a/secret/endlessRunner/script.js
+++ b/secret/endlessRunner/script.js
@@ -0,0 +1,78 @@
+import { useEffect, useRef, useState } from "react";
+
+export default function EndlessRunner() {
+ const canvasRef = useRef(null);
+ const [running, setRunning] = useState(true);
+ const player = { x: 50, y: 150, width: 20, height: 20, dy: 0 };
+ const gravity = 0.5;
+ let obstacles = [];
+ let score = 0;
+
+ useEffect(() => {
+ const canvas = canvasRef.current;
+ const ctx = canvas.getContext("2d");
+ canvas.width = window.innerWidth;
+ canvas.height = 300;
+
+ function update() {
+ if (!running) return;
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ // Player physics
+ player.dy += gravity;
+ player.y += player.dy;
+ if (player.y > 150) {
+ player.y = 150;
+ player.dy = 0;
+ }
+
+ // Draw player
+ ctx.fillStyle = "blue";
+ ctx.fillRect(player.x, player.y, player.width, player.height);
+
+ // Obstacles
+ if (Math.random() < 0.02) {
+ obstacles.push({ x: canvas.width, y: 150, width: 20, height: 20 });
+ }
+ obstacles = obstacles.map(obstacle => ({ ...obstacle, x: obstacle.x - 5 }));
+ obstacles = obstacles.filter(obstacle => obstacle.x + obstacle.width > 0);
+
+ obstacles.forEach(obstacle => {
+ ctx.fillStyle = "red";
+ ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
+
+ // Collision detection
+ if (
+ player.x < obstacle.x + obstacle.width &&
+ player.x + player.width > obstacle.x &&
+ player.y < obstacle.y + obstacle.height &&
+ player.y + player.height > obstacle.y
+ ) {
+ setRunning(false);
+ }
+ });
+
+ // Score
+ score++;
+ ctx.fillStyle = "black";
+ ctx.fillText("Score: " + score, 10, 20);
+
+ requestAnimationFrame(update);
+ }
+
+ update();
+ }, [running]);
+
+ function jump() {
+ if (player.y >= 150) {
+ player.dy = -10;
+ }
+ }
+
+ return (
+ <div className="flex flex-col items-center">
+ <canvas ref={canvasRef} className="border" onClick={jump}></canvas>
+ {!running && <button onClick={() => window.location.reload()} className="mt-4 bg-blue-500 text-white px-4 py-2 rounded">Restart</button>}
+ </div>
+ );
+}
diff --git a/secret/endlessRunner/styles.css b/secret/endlessRunner/styles.css
index e69de29..b8850fc 100644
--- a/secret/endlessRunner/styles.css
+++ b/secret/endlessRunner/styles.css
@@ -0,0 +1,34 @@
+body {
+ margin: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ background-color: #f4f4f4;
+}
+
+.game-container {
+ position: relative;
+ text-align: center;
+}
+
+canvas {
+ border: 2px solid black;
+ background-color: white;
+ display: block;
+}
+
+#restartBtn {
+ margin-top: 10px;
+ padding: 10px 20px;
+ font-size: 16px;
+ background-color: #007bff;
+ color: white;
+ border: none;
+ cursor: pointer;
+ display: none;
+}
+
+#restartBtn:hover {
+ background-color: #0056b3;
+}
diff --git a/secret/guessMyNumber/index.html b/secret/guessMyNumber/index.html
index 2453f5c..4e88eaa 100644
--- a/secret/guessMyNumber/index.html
+++ b/secret/guessMyNumber/index.html
@@ -5,6 +5,24 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Guess My Number</title>
<link rel="stylesheet" href="styles.css" />
+ <link
+ rel="apple-touch-icon"
+ sizes="180x180"
+ href="../../favicon_io/apple-touch-icon.png"
+ />
+ <link
+ rel="icon"
+ type="image/png"
+ sizes="32x32"
+ href="../../favicon_io/favicon-32x32.png"
+ />
+ <link
+ rel="icon"
+ type="image/png"
+ sizes="16x16"
+ href="../../favicon_io/favicon-16x16.png"
+ />
+ <link rel="manifest" href="../../favicon_io/site.webmanifest" />
</head>
<body>
<div class="gameboy">
diff --git a/secret/index.html b/secret/index.html
index 110c75b..dc45d69 100644
--- a/secret/index.html
+++ b/secret/index.html
@@ -5,6 +5,24 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Secret Game Collection</title>
<link rel="stylesheet" href="styles.css" />
+ <link
+ rel="apple-touch-icon"
+ sizes="180x180"
+ href="../favicon_io/apple-touch-icon.png"
+ />
+ <link
+ rel="icon"
+ type="image/png"
+ sizes="32x32"
+ href="../favicon_io/favicon-32x32.png"
+ />
+ <link
+ rel="icon"
+ type="image/png"
+ sizes="16x16"
+ href="../favicon_io/favicon-16x16.png"
+ />
+ <link rel="manifest" href="../favicon_io/site.webmanifest" />
</head>
<body>
<header>
diff --git a/secret/mineSweeper/index.html b/secret/mineSweeper/index.html
index eabf508..5794679 100644
--- a/secret/mineSweeper/index.html
+++ b/secret/mineSweeper/index.html
@@ -1,30 +1,60 @@
<!DOCTYPE html>
<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Minesweeper</title>
+ <link rel="stylesheet" href="styles.css" />
+ <link
+ rel="apple-touch-icon"
+ sizes="180x180"
+ href="../../favicon_io/apple-touch-icon.png"
+ />
+ <link
+ rel="icon"
+ type="image/png"
+ sizes="32x32"
+ href="../../favicon_io/favicon-32x32.png"
+ />
+ <link
+ rel="icon"
+ type="image/png"
+ sizes="16x16"
+ href="../../favicon_io/favicon-16x16.png"
+ />
+ <link rel="manifest" href="../../favicon_io/site.webmanifest" />
+ </head>
-<head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Minesweeper</title>
- <link rel="stylesheet" href="styles.css" />
-</head>
+ <body>
+ <div id="settings">
+ <h1>Minesweeper</h1>
+ <label for="gridSize">Grid Size:</label>
+ <input
+ type="number"
+ id="gridSize"
+ min="6"
+ max="25"
+ value="9"
+ aria-label="Grid Size"
+ />
-<body>
- <div id="settings">
- <h1>Minesweeper</h1>
- <label for="gridSize">Grid Size:</label>
- <input type="number" id="gridSize" min="6" max="25" value="9" aria-label="Grid Size" />
+ <label for="bombs">Number of Bombs:</label>
+ <input
+ type="number"
+ id="bombs"
+ min="1"
+ max="300"
+ value="9"
+ aria-label="Number of Bombs"
+ />
- <label for="bombs">Number of Bombs:</label>
- <input type="number" id="bombs" min="1" max="300" value="9" aria-label="Number of Bombs" />
+ <button id="startGame">Start Game</button>
+ </div>
- <button id="startGame">Start Game</button>
- </div>
+ <div class="container">
+ <canvas id="game"></canvas>
+ </div>
- <div class="container">
- <canvas id="game"></canvas>
- </div>
-
- <script src="script.js"></script>
-</body>
-
-</html>
\ No newline at end of file
+ <script src="script.js"></script>
+ </body>
+</html>
diff --git a/secret/snake/index.html b/secret/snake/index.html
index 47205b4..183027f 100644
--- a/secret/snake/index.html
+++ b/secret/snake/index.html
@@ -5,6 +5,24 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Snake - Game</title>
<link rel="stylesheet" href="styles.css" />
+ <link
+ rel="apple-touch-icon"
+ sizes="180x180"
+ href="../../favicon_io/apple-touch-icon.png"
+ />
+ <link
+ rel="icon"
+ type="image/png"
+ sizes="32x32"
+ href="../../favicon_io/favicon-32x32.png"
+ />
+ <link
+ rel="icon"
+ type="image/png"
+ sizes="16x16"
+ href="../../favicon_io/favicon-16x16.png"
+ />
+ <link rel="manifest" href="../../favicon_io/site.webmanifest" />
</head>
<body>
<div class="gameboy">
diff --git a/webGames/index.html b/webGames/index.html
index 320999d..7f1a0bf 100644
--- a/webGames/index.html
+++ b/webGames/index.html
@@ -5,6 +5,24 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Game Collection</title>
<link rel="stylesheet" href="styles.css" />
+ <link
+ rel="apple-touch-icon"
+ sizes="180x180"
+ href="../favicon_io/apple-touch-icon.png"
+ />
+ <link
+ rel="icon"
+ type="image/png"
+ sizes="32x32"
+ href="../favicon_io/favicon-32x32.png"
+ />
+ <link
+ rel="icon"
+ type="image/png"
+ sizes="16x16"
+ href="../favicon_io/favicon-16x16.png"
+ />
+ <link rel="manifest" href="../favicon_io/site.webmanifest" />
</head>
<body>
<header>