diff --git a/dropdown.js b/dropdown.js index fc97817..5d28b26 100644 --- a/dropdown.js +++ b/dropdown.js @@ -18,44 +18,39 @@ * along with this program. If not, see . */ document.addEventListener("DOMContentLoaded", () => { - const menu = document.querySelector(".menu"); - const burgerMenu = document.querySelector(".burger-menu"); + const menu = document.querySelector(".menu"); + const burgerMenu = document.querySelector(".burger-menu"); - if (!menu || !burgerMenu) { - console.warn( - "Menu or burger menu element not found. Ensure they exist in the DOM." - ); - return; - } - - // Toggle the menu visibility - function toggleMenu() { - menu.classList.toggle("active"); - - if (menu.classList.contains("active")) { - // Add click listener to close menu when clicking outside - document.addEventListener("click", closeMenu); - } else { - // Remove the click listener when menu is closed - document.removeEventListener("click", closeMenu); + if (!menu || !burgerMenu) { + console.warn("Menu or burger menu element not found. Ensure they exist in the DOM."); + return; } - } - // Close the menu if clicking outside of it - function closeMenu(event) { - if ( - !menu.contains(event.target) && - !event.target.classList.contains("burger-menu") - ) { - menu.classList.remove("active"); - document.removeEventListener("click", closeMenu); + // Toggle the menu visibility + function toggleMenu() { + menu.classList.toggle("active"); + + if (menu.classList.contains("active")) { + // Add click listener to close menu when clicking outside + document.addEventListener("click", closeMenu); + } else { + // Remove the click listener when menu is closed + document.removeEventListener("click", closeMenu); + } } - } - // Attach click event to the burger menu button - burgerMenu.addEventListener("click", (event) => { - event.stopPropagation(); // Prevent click from immediately triggering closeMenu - toggleMenu(); - }); + // Close the menu if clicking outside of it + function closeMenu(event) { + if (!menu.contains(event.target) && !event.target.classList.contains("burger-menu")) { + menu.classList.remove("active"); + document.removeEventListener("click", closeMenu); + } + } + + // Attach click event to the burger menu button + burgerMenu.addEventListener("click", (event) => { + event.stopPropagation(); // Prevent click from immediately triggering closeMenu + toggleMenu(); + }); }); -// @license-end +// @license-end \ No newline at end of file diff --git a/footer.js b/footer.js index 3aed36c..849c82d 100644 --- a/footer.js +++ b/footer.js @@ -37,16 +37,17 @@ class Footer extends HTMLElement { `; // Add event listener for button click - this.querySelector(".secret-button").addEventListener("click", () => { - window.open("secret/index.html", "_blank"); + this.querySelector('.secret-button').addEventListener('click', () => { + window.open('secret/index.html', '_blank'); }); } } -customElements.define("footer-component", Footer); +customElements.define('footer-component', Footer); + // CSS for the hidden button -const style = document.createElement("style"); +const style = document.createElement('style'); style.textContent = ` .secret-button { display: none; @@ -65,4 +66,4 @@ style.textContent = ` `; document.head.appendChild(style); -// @license-end +// @license-end \ No newline at end of file diff --git a/header.js b/header.js index 6cb9811..3bd9f3c 100644 --- a/header.js +++ b/header.js @@ -42,5 +42,5 @@ class Header extends HTMLElement { } } -customElements.define("header-component", Header); +customElements.define('header-component', Header); // @license-end diff --git a/secret/asteroidDestroyer/game.js b/secret/asteroidDestroyer/game.js index 2ea6461..d792739 100644 --- a/secret/asteroidDestroyer/game.js +++ b/secret/asteroidDestroyer/game.js @@ -1,7 +1,7 @@ "use strict"; // Canvas setup -const canvas = document.getElementById("gameCanvas"); -const ctx = canvas.getContext("2d"); +const canvas = document.getElementById('gameCanvas'); +const ctx = canvas.getContext('2d'); const targetFPS = 60; const targetFrameTime = 1000 / targetFPS; canvas.width = window.innerWidth; @@ -15,9 +15,9 @@ const player = { y: canvas.height - 60, width: 40, height: 40, - color: "white", + color: 'white', speed: 5, - dx: 0, + dx: 0 }; let bullets = []; @@ -48,14 +48,14 @@ let greenSphereCooldown = 0; let rainbowSphereCooldown = 0; // Sphere types -const sphereTypes = ["blue", "yellow", "green", "rainbow"]; +const sphereTypes = ['blue', 'yellow', 'green', 'rainbow']; /// Control for left button press and release function btnMoveLeft(isPressed) { if (isPressed) { - player.dx = -player.speed; // Start moving left + player.dx = -player.speed; // Start moving left } else { - player.dx = 0; // Stop moving when button is released + player.dx = 0; // Stop moving when button is released } } @@ -70,42 +70,37 @@ function btnShoot() { // Control for right button press and release function btnMoveRight(isPressed) { if (isPressed) { - player.dx = player.speed; // Start moving right + player.dx = player.speed; // Start moving right } else { - player.dx = 0; // Stop moving when button is released + player.dx = 0; // Stop moving when button is released } } -document.getElementById("shootBtn").addEventListener("mouseup", () => { +document.getElementById('shootBtn').addEventListener('mouseup', () => { canShoot = true; // Allow shooting again when button is released }); -window.addEventListener("keydown", (e) => { - if (e.key === "ArrowLeft" || e.key === "a") player.dx = -player.speed; - if (e.key === "ArrowRight" || e.key === "d") player.dx = player.speed; +window.addEventListener('keydown', (e) => { + if (e.key === 'ArrowLeft' || e.key === 'a') player.dx = -player.speed; + if (e.key === 'ArrowRight' || e.key === 'd') player.dx = player.speed; // Shoot only if it's not a hold, and we can shoot - if (e.key === " " && canShoot && !isGameOver) { + if (e.key === ' ' && canShoot && !isGameOver) { shootBullet(); canShoot = false; // Prevent shooting until the key is released } - if (e.key === "r" && isGameOver) restartGame(); + if (e.key === 'r' && isGameOver) restartGame(); }); -window.addEventListener("keyup", (e) => { +window.addEventListener('keyup', (e) => { // Stop moving when either the arrow keys or the 'a'/'d' keys are released - if ( - e.key === "ArrowLeft" || - e.key === "ArrowRight" || - e.key === "a" || - e.key === "d" - ) { + if (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'a' || e.key === 'd') { player.dx = 0; } // Allow shooting again when the space key is released - if (e.key === " ") { + if (e.key === ' ') { canShoot = true; } }); @@ -129,8 +124,8 @@ function shootBullet() { y: player.y, width: 5, height: 10, - color: "yellow", - speed: 7, + color: 'yellow', + speed: 7 }); }, i * 50); // Fire bullets with 50ms delay between shots } @@ -142,9 +137,9 @@ function shootBullet() { y: player.y, width: 5, height: 10, - color: "yellow", + color: 'yellow', speed: 7, - angle: i * 10, // Spray the bullets at different angles + angle: i * 10 // Spray the bullets at different angles }); } } else { @@ -154,15 +149,15 @@ function shootBullet() { y: player.y, width: 5, height: 10, - color: "yellow", - speed: 7, + color: 'yellow', + speed: 7 }); } } // Generate random color function getRandomColor() { - const colors = ["red", "blue", "green", "orange", "purple", "pink"]; + const colors = ['red', 'blue', 'green', 'orange', 'purple', 'pink']; return colors[Math.floor(Math.random() * colors.length)]; } @@ -175,14 +170,13 @@ function createAsteroid() { width: size, height: size, color: getRandomColor(), - speed: (Math.random() * 3 + 2) * asteroidSpeedMultiplier, // Faster initial speed + speed: (Math.random() * 3 + 2) * asteroidSpeedMultiplier // Faster initial speed }); } // Item mechanics function createItem() { - const randomType = - sphereTypes[Math.floor(Math.random() * sphereTypes.length)]; + const randomType = sphereTypes[Math.floor(Math.random() * sphereTypes.length)]; const size = 30; const x = Math.random() * canvas.width; items.push({ @@ -191,15 +185,8 @@ function createItem() { width: size, height: size, type: randomType, - color: - randomType === "blue" - ? "blue" - : randomType === "yellow" - ? "yellow" - : randomType === "green" - ? "green" - : "rainbow", - speed: 3, + color: randomType === 'blue' ? 'blue' : randomType === 'yellow' ? 'yellow' : randomType === 'green' ? 'green' : 'rainbow', + speed: 3 }); } @@ -207,8 +194,7 @@ function createItem() { function updatePlayer() { player.x += player.dx; if (player.x < 0) player.x = 0; - if (player.x + player.width > canvas.width) - player.x = canvas.width - player.width; + if (player.x + player.width > canvas.width) player.x = canvas.width - player.width; } function updateBullets() { @@ -244,15 +230,15 @@ function updateItems() { function applyItemEffect(type) { let points = Math.floor(Math.random() * 5) + 1; // Random points between 1 and 5 - if (type === "blue") { + if (type === 'blue') { rapidFireActive = true; - setTimeout(() => (rapidFireActive = false), 15000); // 15 seconds of rapid fire - } else if (type === "yellow") { + setTimeout(() => rapidFireActive = false, 15000); // 15 seconds of rapid fire + } else if (type === 'yellow') { shotgunActive = true; - setTimeout(() => (shotgunActive = false), 30000); // 30 seconds of shotgun - } else if (type === "green") { + setTimeout(() => shotgunActive = false, 30000); // 30 seconds of shotgun + } else if (type === 'green') { ammo = 100; // Refill ammo - } else if (type === "rainbow") { + } else if (type === 'rainbow') { rapidFireActive = true; shotgunActive = true; setTimeout(() => { @@ -296,7 +282,7 @@ function checkCollisions() { // Explosion effect function createExplosion(x, y) { - ctx.fillStyle = "yellow"; + ctx.fillStyle = 'yellow'; ctx.beginPath(); ctx.arc(x, y, 20, 0, Math.PI * 2); ctx.fill(); @@ -327,47 +313,33 @@ function drawItems() { items.forEach((item) => { ctx.fillStyle = item.color; ctx.beginPath(); - ctx.arc( - item.x + item.width / 2, - item.y + item.height / 2, - item.width / 2, - 0, - Math.PI * 2 - ); + ctx.arc(item.x + item.width / 2, item.y + item.height / 2, item.width / 2, 0, Math.PI * 2); ctx.fill(); }); } function drawScore() { - ctx.fillStyle = "white"; - ctx.font = "24px Arial"; + ctx.fillStyle = 'white'; + ctx.font = '24px Arial'; ctx.fillText(`Score: ${score}`, 20, 40); // Score at top-left corner } function drawAmmo() { - ctx.fillStyle = "white"; - ctx.font = "24px Arial"; + ctx.fillStyle = 'white'; + ctx.font = '24px Arial'; ctx.fillText(`Ammo: ${ammo}`, 20, 70); // Ammo at top-left corner } function drawGameOver() { if (isGameOver) { - ctx.fillStyle = "white"; - ctx.font = "40px Arial"; - ctx.textAlign = "center"; - ctx.fillText("Game Over!", canvas.width / 2, canvas.height / 2 - 40); - ctx.font = "24px Arial"; + ctx.fillStyle = 'white'; + ctx.font = '40px Arial'; + ctx.textAlign = 'center'; + ctx.fillText('Game Over!', canvas.width / 2, canvas.height / 2 - 40); + ctx.font = '24px Arial'; ctx.fillText(`Total Score: ${score}`, canvas.width / 2, canvas.height / 2); - ctx.fillText( - `Bullets Fired: ${totalBulletsFired}`, - canvas.width / 2, - canvas.height / 2 + 40 - ); - ctx.fillText( - 'Press "R" to Restart', - canvas.width / 2, - canvas.height / 2 + 80 - ); + ctx.fillText(`Bullets Fired: ${totalBulletsFired}`, canvas.width / 2, canvas.height / 2 + 40); + ctx.fillText('Press "R" to Restart', canvas.width / 2, canvas.height / 2 + 80); } } diff --git a/secret/asteroidDestroyer/style.css b/secret/asteroidDestroyer/style.css index e90a6ad..be1817f 100644 --- a/secret/asteroidDestroyer/style.css +++ b/secret/asteroidDestroyer/style.css @@ -1,43 +1,43 @@ body { - margin: 0; - overflow: hidden; + margin: 0; + overflow: hidden; } canvas { - display: block; - background: black; - width: 100%; - height: 100%; + display: block; + background: black; + width: 100%; + height: 100%; } .controls { - display: none; - position: absolute; - bottom: 20px; - left: 50%; - transform: translateX(-50%); - display: flex; - justify-content: space-between; - width: 80%; + display: none; + position: absolute; + bottom: 20px; + left: 50%; + transform: translateX(-50%); + display: flex; + justify-content: space-between; + width: 80%; } .control-btn { - display: none; - padding: 10px; - font-size: 18px; - background-color: rgba(0, 0, 0, 0.6); - color: white; - border: 1px solid #fff; - border-radius: 5px; - cursor: pointer; - flex-grow: 1; - margin: 0 5px; + display: none; + padding: 10px; + font-size: 18px; + background-color: rgba(0, 0, 0, 0.6); + color: white; + border: 1px solid #fff; + border-radius: 5px; + cursor: pointer; + flex-grow: 1; + margin: 0 5px; } -@media (max-width: 600px) { - .control-btn { - display: block; - font-size: 16px; - padding: 12px; - } +@media(max-width: 600px) { + .control-btn { + display: block; + font-size: 16px; + padding: 12px; + } } diff --git a/secret/asteroidDestroyer/styles.css b/secret/asteroidDestroyer/styles.css index 7d92d64..b72528c 100644 --- a/secret/asteroidDestroyer/styles.css +++ b/secret/asteroidDestroyer/styles.css @@ -1,76 +1,74 @@ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } body, html { - height: 100%; - font-family: Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - background-color: #000; - color: white; - overflow: hidden; + height: 100%; + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + background-color: #000; + color: white; + overflow: hidden; } .landing-page { - position: relative; - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; + position: relative; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; } .game-background { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.7); /* Dark overlay */ - backdrop-filter: blur(8px); /* Apply blur effect to the background */ - z-index: -1; /* Ensures it's in the background */ - pointer-events: none; /* Prevent interaction with the blurred background */ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); /* Dark overlay */ + backdrop-filter: blur(8px); /* Apply blur effect to the background */ + z-index: -1; /* Ensures it's in the background */ + pointer-events: none; /* Prevent interaction with the blurred background */ } .content { - text-align: center; - z-index: 1; /* Ensure content appears above the game background */ - padding: 20px; - max-width: 600px; /* Limit the width of the content */ - position: relative; - color: white; - backdrop-filter: blur( - 8px - ); /* Ensure content has some blur as well for contrast */ + text-align: center; + z-index: 1; /* Ensure content appears above the game background */ + padding: 20px; + max-width: 600px; /* Limit the width of the content */ + position: relative; + color: white; + backdrop-filter: blur(8px); /* Ensure content has some blur as well for contrast */ } h1 { - font-size: 2rem; - margin-bottom: 20px; + font-size: 2rem; + margin-bottom: 20px; } p { - font-size: 1.2rem; - margin-bottom: 30px; + font-size: 1.2rem; + margin-bottom: 30px; } button { - padding: 12px 24px; - background-color: #ffcc00; - color: black; - border: none; - font-size: 18px; - cursor: pointer; - border-radius: 5px; - text-transform: uppercase; - transition: background-color 0.3s ease; + padding: 12px 24px; + background-color: #ffcc00; + color: black; + border: none; + font-size: 18px; + cursor: pointer; + border-radius: 5px; + text-transform: uppercase; + transition: background-color 0.3s ease; } button:hover { - background-color: #ff9900; + background-color: #ff9900; } diff --git a/secret/endlessRunner/script.js b/secret/endlessRunner/script.js index 59df696..c1f200f 100644 --- a/secret/endlessRunner/script.js +++ b/secret/endlessRunner/script.js @@ -1,90 +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; + 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; + 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); + 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; - } + // 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); + // 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 + 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); + 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); + // 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); } - }); - // Score - score++; - ctx.fillStyle = "black"; - ctx.fillText("Score: " + score, 10, 20); + update(); + }, [running]); - requestAnimationFrame(update); + function jump() { + if (player.y >= 150) { + player.dy = -10; + } } - update(); - }, [running]); - - function jump() { - if (player.y >= 150) { - player.dy = -10; - } - } - - return ( -
- - {!running && ( - - )} -
- ); + return ( +
+ + {!running && } +
+ ); } diff --git a/secret/game.js b/secret/game.js index 36185f6..8231594 100644 --- a/secret/game.js +++ b/secret/game.js @@ -1,7 +1,7 @@ "use strict"; // Canvas setup -const canvas = document.getElementById("gameCanvas"); -const ctx = canvas.getContext("2d"); +const canvas = document.getElementById('gameCanvas'); +const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; @@ -11,9 +11,9 @@ const player = { y: canvas.height - 60, width: 40, height: 40, - color: "white", + color: 'white', speed: 5, - dx: 0, + dx: 0 }; let bullets = []; @@ -44,14 +44,14 @@ let greenSphereCooldown = 0; let rainbowSphereCooldown = 0; // Sphere types -const sphereTypes = ["blue", "yellow", "green", "rainbow"]; +const sphereTypes = ['blue', 'yellow', 'green', 'rainbow']; /// Control for left button press and release function btnMoveLeft(isPressed) { if (isPressed) { - player.dx = -player.speed; // Start moving left + player.dx = -player.speed; // Start moving left } else { - player.dx = 0; // Stop moving when button is released + player.dx = 0; // Stop moving when button is released } } @@ -66,42 +66,37 @@ function btnShoot() { // Control for right button press and release function btnMoveRight(isPressed) { if (isPressed) { - player.dx = player.speed; // Start moving right + player.dx = player.speed; // Start moving right } else { - player.dx = 0; // Stop moving when button is released + player.dx = 0; // Stop moving when button is released } } -document.getElementById("shootBtn").addEventListener("mouseup", () => { +document.getElementById('shootBtn').addEventListener('mouseup', () => { canShoot = true; // Allow shooting again when button is released }); -window.addEventListener("keydown", (e) => { - if (e.key === "ArrowLeft" || e.key === "a") player.dx = -player.speed; - if (e.key === "ArrowRight" || e.key === "d") player.dx = player.speed; +window.addEventListener('keydown', (e) => { + if (e.key === 'ArrowLeft' || e.key === 'a') player.dx = -player.speed; + if (e.key === 'ArrowRight' || e.key === 'd') player.dx = player.speed; // Shoot only if it's not a hold, and we can shoot - if (e.key === " " && canShoot && !isGameOver) { + if (e.key === ' ' && canShoot && !isGameOver) { shootBullet(); canShoot = false; // Prevent shooting until the key is released } - if (e.key === "r" && isGameOver) restartGame(); + if (e.key === 'r' && isGameOver) restartGame(); }); -window.addEventListener("keyup", (e) => { +window.addEventListener('keyup', (e) => { // Stop moving when either the arrow keys or the 'a'/'d' keys are released - if ( - e.key === "ArrowLeft" || - e.key === "ArrowRight" || - e.key === "a" || - e.key === "d" - ) { + if (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'a' || e.key === 'd') { player.dx = 0; } // Allow shooting again when the space key is released - if (e.key === " ") { + if (e.key === ' ') { canShoot = true; } }); @@ -125,8 +120,8 @@ function shootBullet() { y: player.y, width: 5, height: 10, - color: "yellow", - speed: 7, + color: 'yellow', + speed: 7 }); }, i * 50); // Fire bullets with 50ms delay between shots } @@ -138,9 +133,9 @@ function shootBullet() { y: player.y, width: 5, height: 10, - color: "yellow", + color: 'yellow', speed: 7, - angle: i * 10, // Spray the bullets at different angles + angle: i * 10 // Spray the bullets at different angles }); } } else { @@ -150,15 +145,15 @@ function shootBullet() { y: player.y, width: 5, height: 10, - color: "yellow", - speed: 7, + color: 'yellow', + speed: 7 }); } } // Generate random color function getRandomColor() { - const colors = ["red", "blue", "green", "orange", "purple", "pink"]; + const colors = ['red', 'blue', 'green', 'orange', 'purple', 'pink']; return colors[Math.floor(Math.random() * colors.length)]; } @@ -171,14 +166,13 @@ function createAsteroid() { width: size, height: size, color: getRandomColor(), - speed: (Math.random() * 3 + 2) * asteroidSpeedMultiplier, // Faster initial speed + speed: (Math.random() * 3 + 2) * asteroidSpeedMultiplier // Faster initial speed }); } // Item mechanics function createItem() { - const randomType = - sphereTypes[Math.floor(Math.random() * sphereTypes.length)]; + const randomType = sphereTypes[Math.floor(Math.random() * sphereTypes.length)]; const size = 30; const x = Math.random() * canvas.width; items.push({ @@ -187,15 +181,8 @@ function createItem() { width: size, height: size, type: randomType, - color: - randomType === "blue" - ? "blue" - : randomType === "yellow" - ? "yellow" - : randomType === "green" - ? "green" - : "rainbow", - speed: 3, + color: randomType === 'blue' ? 'blue' : randomType === 'yellow' ? 'yellow' : randomType === 'green' ? 'green' : 'rainbow', + speed: 3 }); } @@ -203,8 +190,7 @@ function createItem() { function updatePlayer() { player.x += player.dx; if (player.x < 0) player.x = 0; - if (player.x + player.width > canvas.width) - player.x = canvas.width - player.width; + if (player.x + player.width > canvas.width) player.x = canvas.width - player.width; } function updateBullets() { @@ -240,15 +226,15 @@ function updateItems() { function applyItemEffect(type) { let points = Math.floor(Math.random() * 5) + 1; // Random points between 1 and 5 - if (type === "blue") { + if (type === 'blue') { rapidFireActive = true; - setTimeout(() => (rapidFireActive = false), 15000); // 15 seconds of rapid fire - } else if (type === "yellow") { + setTimeout(() => rapidFireActive = false, 15000); // 15 seconds of rapid fire + } else if (type === 'yellow') { shotgunActive = true; - setTimeout(() => (shotgunActive = false), 30000); // 30 seconds of shotgun - } else if (type === "green") { + setTimeout(() => shotgunActive = false, 30000); // 30 seconds of shotgun + } else if (type === 'green') { ammo = 100; // Refill ammo - } else if (type === "rainbow") { + } else if (type === 'rainbow') { rapidFireActive = true; shotgunActive = true; setTimeout(() => { @@ -292,7 +278,7 @@ function checkCollisions() { // Explosion effect function createExplosion(x, y) { - ctx.fillStyle = "yellow"; + ctx.fillStyle = 'yellow'; ctx.beginPath(); ctx.arc(x, y, 20, 0, Math.PI * 2); ctx.fill(); @@ -323,47 +309,33 @@ function drawItems() { items.forEach((item) => { ctx.fillStyle = item.color; ctx.beginPath(); - ctx.arc( - item.x + item.width / 2, - item.y + item.height / 2, - item.width / 2, - 0, - Math.PI * 2 - ); + ctx.arc(item.x + item.width / 2, item.y + item.height / 2, item.width / 2, 0, Math.PI * 2); ctx.fill(); }); } function drawScore() { - ctx.fillStyle = "white"; - ctx.font = "24px Arial"; + ctx.fillStyle = 'white'; + ctx.font = '24px Arial'; ctx.fillText(`Score: ${score}`, 20, 40); // Score at top-left corner } function drawAmmo() { - ctx.fillStyle = "white"; - ctx.font = "24px Arial"; + ctx.fillStyle = 'white'; + ctx.font = '24px Arial'; ctx.fillText(`Ammo: ${ammo}`, 20, 70); // Ammo at top-left corner } function drawGameOver() { if (isGameOver) { - ctx.fillStyle = "white"; - ctx.font = "40px Arial"; - ctx.textAlign = "center"; - ctx.fillText("Game Over!", canvas.width / 2, canvas.height / 2 - 40); - ctx.font = "24px Arial"; + ctx.fillStyle = 'white'; + ctx.font = '40px Arial'; + ctx.textAlign = 'center'; + ctx.fillText('Game Over!', canvas.width / 2, canvas.height / 2 - 40); + ctx.font = '24px Arial'; ctx.fillText(`Total Score: ${score}`, canvas.width / 2, canvas.height / 2); - ctx.fillText( - `Bullets Fired: ${totalBulletsFired}`, - canvas.width / 2, - canvas.height / 2 + 40 - ); - ctx.fillText( - 'Press "R" to Restart', - canvas.width / 2, - canvas.height / 2 + 80 - ); + ctx.fillText(`Bullets Fired: ${totalBulletsFired}`, canvas.width / 2, canvas.height / 2 + 40); + ctx.fillText('Press "R" to Restart', canvas.width / 2, canvas.height / 2 + 80); } } diff --git a/secret/guessMyNumber/game.js b/secret/guessMyNumber/game.js index 9a3436d..cd5803d 100644 --- a/secret/guessMyNumber/game.js +++ b/secret/guessMyNumber/game.js @@ -1,65 +1,54 @@ -"use strict"; +'use strict'; const targetNum = Math.trunc(Math.random() * 20) + 1; -let highScore = Number(localStorage.getItem("highscore")) || 0; -let userGuess = 10; // Default guess +let highScore = Number(localStorage.getItem('highscore')) || 0; +let userGuess = 10; // Default guess let currScore = 20; -const screenEl = document.querySelector(".screen"); -const msgEl = document.querySelector(".message"); -const guessInput = document.querySelector("#guess"); -const scoreEl = document.querySelector(".score"); -const highScoreEl = document.querySelector(".highScore"); -const checkBtn = document.querySelector("#check"); -const restartBtn = document.querySelector("#restart"); -const incBtn = document.querySelector("#up"); -const decBtn = document.querySelector("#down"); +const screenEl = document.querySelector('.screen'); +const msgEl = document.querySelector('.message'); +const guessInput = document.querySelector('#guess'); +const scoreEl = document.querySelector('.score'); +const highScoreEl = document.querySelector('.highScore'); +const checkBtn = document.querySelector('#check'); +const restartBtn = document.querySelector('#restart'); +const incBtn = document.querySelector('#up'); +const decBtn = document.querySelector('#down'); -const setMsg = (msg) => (msgEl.textContent = msg); -const setScore = (score) => - (scoreEl.textContent = `Score: ${(currScore = score)}`); +const setMsg = msg => msgEl.textContent = msg; +const setScore = score => scoreEl.textContent = `Score: ${currScore = score}`; const setHighScore = () => { - highScoreEl.textContent = `Highscore: ${highScore}`; - localStorage.setItem("highscore", highScore); + highScoreEl.textContent = `Highscore: ${highScore}`; + localStorage.setItem('highscore', highScore); }; -const changeColor = (color) => (screenEl.style.backgroundColor = color); +const changeColor = color => screenEl.style.backgroundColor = color; -checkBtn.addEventListener("click", () => { - userGuess = Number(guessInput.textContent); - if (!userGuess || userGuess < 1 || userGuess > 20) { - setMsg("Please enter a valid number between 1 and 20."); - } else if (userGuess === targetNum) { - highScore = Math.max(highScore, currScore); - setHighScore(); - setMsg( - currScore !== 20 ? "Correct Number!" : "Are you sure you didn't cheat?" - ); - changeColor(currScore !== 20 ? "#1ba100" : "#FFC300"); - } else { - setMsg(userGuess > targetNum ? "Too High!" : "Too Low!"); - if (currScore > 1) { - setScore(currScore - 1); +checkBtn.addEventListener('click', () => { + userGuess = Number(guessInput.textContent); + if (!userGuess || userGuess < 1 || userGuess > 20) { + setMsg("Please enter a valid number between 1 and 20."); + } else if (userGuess === targetNum) { + highScore = Math.max(highScore, currScore); + setHighScore(); + setMsg(currScore !== 20 ? 'Correct Number!' : 'Are you sure you didn\'t cheat?'); + changeColor(currScore !== 20 ? '#1ba100' : '#FFC300'); } else { - setScore(1); - setMsg("You lost the game!"); - changeColor("#a10000"); + setMsg(userGuess > targetNum ? 'Too High!' : 'Too Low!'); + if (currScore > 1) { + setScore(currScore - 1); + } else { + setScore(1); + setMsg("You lost the game!"); + changeColor('#a10000'); + } } - } }); -restartBtn.addEventListener("click", () => location.reload()); -incBtn.addEventListener( - "click", - () => - (guessInput.textContent = Math.min(Number(guessInput.textContent) + 1, 20)) -); -decBtn.addEventListener( - "click", - () => - (guessInput.textContent = Math.max(Number(guessInput.textContent) - 1, 1)) -); +restartBtn.addEventListener('click', () => location.reload()); +incBtn.addEventListener('click', () => guessInput.textContent = Math.min(Number(guessInput.textContent) + 1, 20)); +decBtn.addEventListener('click', () => guessInput.textContent = Math.max(Number(guessInput.textContent) - 1, 1)); guessInput.textContent = userGuess; -setMsg("Guess a number"); +setMsg('Guess a number'); setScore(currScore); setHighScore(); diff --git a/secret/guessMyNumber/styles.css b/secret/guessMyNumber/styles.css index 3a50aec..ef9039a 100644 --- a/secret/guessMyNumber/styles.css +++ b/secret/guessMyNumber/styles.css @@ -1,189 +1,189 @@ /* Base Reset */ body, html { - margin: 0; - padding: 0; - font-family: monospace; - background-color: #3a2d56; - display: flex; - justify-content: center; - align-items: center; - height: 100vh; + margin: 0; + padding: 0; + font-family: monospace; + background-color: #3a2d56; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; } /* GameBoy Layout */ .gameboy { - background-color: #5f4c82; /* Game Boy Color purple shell */ - width: 441px; - height: 735px; - border-radius: 20px; - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); - display: flex; - flex-direction: column; - align-items: center; - padding: 10px; - position: relative; + background-color: #5f4c82; /* Game Boy Color purple shell */ + width: 441px; + height: 735px; + border-radius: 20px; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); + display: flex; + flex-direction: column; + align-items: center; + padding: 10px; + position: relative; } -@media (max-width: 768px) { - .gameboy { - width: 100vw; - height: 100vh; - border-radius: 0; - } +@media(max-width: 768px) { + .gameboy { + width: 100vw; + height: 100vh; + border-radius: 0; + } } /* Screen */ .screen { - background-color: #306230; /* Game Boy green screen */ - border: 4px solid #0f380f; - width: 90%; - height: 55%; - margin-top: 20px; - border-radius: 10px; - display: flex; - justify-content: center; - align-items: center; - box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5); - overflow: hidden; + background-color: #306230; /* Game Boy green screen */ + border: 4px solid #0f380f; + width: 90%; + height: 55%; + margin-top: 20px; + border-radius: 10px; + display: flex; + justify-content: center; + align-items: center; + box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5); + overflow: hidden; } .game { - text-align: center; - width: 90%; + text-align: center; + width: 90%; } /* Titles */ h1 { - font-size: 2rem; /* Increased font size */ - margin-bottom: 10px; - text-transform: uppercase; + font-size: 2rem; /* Increased font size */ + margin-bottom: 10px; + text-transform: uppercase; } /* Guess Display */ .guess-display { - background-color: #9bbc0f; - color: #0f380f; - border: 2px solid #0f380f; - font-size: 2rem; /* Increased font size */ - width: 80px; /* Increased width */ - text-align: center; - margin: 10px auto; - padding: 10px; /* Increased padding */ - border-radius: 4px; + background-color: #9bbc0f; + color: #0f380f; + border: 2px solid #0f380f; + font-size: 2rem; /* Increased font size */ + width: 80px; /* Increased width */ + text-align: center; + margin: 10px auto; + padding: 10px; /* Increased padding */ + border-radius: 4px; } /* Messages */ .message, .score, .highScore { - font-size: 1.4rem; /* Increased font size */ - margin: 5px 0; + font-size: 1.4rem; /* Increased font size */ + margin: 5px 0; } .description, .description p { - font-size: 1.2rem; - margin: 0 auto; - padding: 0 auto; + font-size: 1.2rem; + margin: 0 auto; + padding: 0 auto; } /* Controls Section */ .controls { - margin-top: 20px; - display: flex; - justify-content: space-between; - width: 80%; - align-items: center; + margin-top: 20px; + display: flex; + justify-content: space-between; + width: 80%; + align-items: center; } /* D-Pad */ .dpad { - position: relative; - width: 120px; /* Increased size */ - height: 120px; /* Increased size */ + position: relative; + width: 120px; /* Increased size */ + height: 120px; /* Increased size */ } /* Base Styling for D-Pad Buttons */ .dpad-btn { - background-color: #0f380f; - color: #9bbc0f; - border: none; - border-radius: 5px; - position: absolute; - width: 42px; - height: 42px; - font-size: 1.5rem; /* Increased size */ - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - z-index: 1; + background-color: #0f380f; + color: #9bbc0f; + border: none; + border-radius: 5px; + position: absolute; + width: 42px; + height: 42px; + font-size: 1.5rem; /* Increased size */ + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + z-index: 1; } .dpad-btn.up { - top: 0; - left: 50%; - transform: translateX(-50%); + top: 0; + left: 50%; + transform: translateX(-50%); } .dpad-btn.down { - bottom: 0; - left: 50%; - transform: translateX(-50%); + bottom: 0; + left: 50%; + transform: translateX(-50%); } .dpad-btn.left { - top: 50%; - left: 0; - transform: translateY(-50%); + top: 50%; + left: 0; + transform: translateY(-50%); } .dpad-btn.right { - top: 50%; - right: 0; - transform: translateY(-50%); + top: 50%; + right: 0; + transform: translateY(-50%); } /* D-Pad Center to Connect Buttons */ .dpad-center { - background-color: #0f380f; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 40px; - height: 40px; - border: 2px solid #9cbc0f00; - z-index: 0; - border-radius: 5px; + background-color: #0f380f; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 40px; + height: 40px; + border: 2px solid #9cbc0f00; + z-index: 0; + border-radius: 5px; } /* A and B Buttons */ .action-buttons { - display: flex; - flex-direction: column; - justify-content: space-between; - height: 140px; /* Increased height */ + display: flex; + flex-direction: column; + justify-content: space-between; + height: 140px; /* Increased height */ } .btn { - background-color: #0f380f; - color: #9bbc0f; - border: 2px solid #9bbc0f; - border-radius: 50%; - width: 60px; - height: 60px; - font-size: 1.8rem; /* Increased font size */ - cursor: pointer; - transition: transform 0.1s, background-color 0.2s; + background-color: #0f380f; + color: #9bbc0f; + border: 2px solid #9bbc0f; + border-radius: 50%; + width: 60px; + height: 60px; + font-size: 1.8rem; /* Increased font size */ + cursor: pointer; + transition: transform 0.1s, background-color 0.2s; } .btn:hover { - background-color: #9bbc0f; - color: #0f380f; + background-color: #9bbc0f; + color: #0f380f; } .btn:active { - transform: scale(0.9); + transform: scale(0.9); } diff --git a/secret/guessMyNumber/styles.js b/secret/guessMyNumber/styles.js index 8ccae52..d7357df 100644 --- a/secret/guessMyNumber/styles.js +++ b/secret/guessMyNumber/styles.js @@ -1,148 +1,62 @@ -"use strict"; -const left = document.querySelector("#left"); -const right = document.querySelector("#right"); -const gameboy = document.querySelector(".gameboy"); +'use strict'; +const left = document.querySelector('#left'); +const right = document.querySelector('#right'); +const gameboy = document.querySelector('.gameboy'); const html = document.documentElement; const body = document.body; -const screen = document.querySelector(".screen"); -const dpadButtons = document.querySelectorAll(".dpad-btn"); -const dpadCenter = document.querySelector(".dpad-center"); // Darker variant -const actionButtons = document.querySelectorAll(".btn"); +const screen = document.querySelector('.screen'); +const dpadButtons = document.querySelectorAll('.dpad-btn'); +const dpadCenter = document.querySelector('.dpad-center'); // Darker variant +const actionButtons = document.querySelectorAll('.btn'); const colors = [ - { - gameboyColor: "#B39DDB", - htmlColor: "#D1C4E9", - screenColor: "#E1BEE7", - buttonColor: "#673AB7", - buttonTextColor: "#FFFFFF", - dpadCenterColor: "#5E35B1", - }, - { - gameboyColor: "#FFC107", - htmlColor: "#FFF9C4", - screenColor: "#FFEB3B", - buttonColor: "#FF9800", - buttonTextColor: "#000000", - dpadCenterColor: "#EF6C00", - }, - { - gameboyColor: "#8BC34A", - htmlColor: "#C5E1A5", - screenColor: "#A5D6A7", - buttonColor: "#FF5722", - buttonTextColor: "#FFFFFF", - dpadCenterColor: "#E64A19", - }, - { - gameboyColor: "#F44336", - htmlColor: "#FFCDD2", - screenColor: "#EF9A9A", - buttonColor: "#E91E63", - buttonTextColor: "#FFFFFF", - dpadCenterColor: "#C2185B", - }, - { - gameboyColor: "#03A9F4", - htmlColor: "#BBDEFB", - screenColor: "#90CAF9", - buttonColor: "#FFEB3B", - buttonTextColor: "#000000", - dpadCenterColor: "#0277BD", - }, - { - gameboyColor: "#FF7043", - htmlColor: "#FFCCBC", - screenColor: "#FFAB91", - buttonColor: "#FF5722", - buttonTextColor: "#FFFFFF", - dpadCenterColor: "#D84315", - }, - { - gameboyColor: "#9C27B0", - htmlColor: "#E1BEE7", - screenColor: "#D1C4E9", - buttonColor: "#7B1FA2", - buttonTextColor: "#FFFFFF", - dpadCenterColor: "#6A1B9A", - }, - { - gameboyColor: "#FFD700", - htmlColor: "#FFF9C4", - screenColor: "#FFF59D", - buttonColor: "#FF9800", - buttonTextColor: "#FFFFFF", - dpadCenterColor: "#F57F17", - }, - { - gameboyColor: "#009688", - htmlColor: "#B2DFDB", - screenColor: "#80CBC4", - buttonColor: "#4CAF50", - buttonTextColor: "#FFFFFF", - dpadCenterColor: "#00796B", - }, - { - gameboyColor: "#795548", - htmlColor: "#D7CCC8", - screenColor: "#A1887F", - buttonColor: "#9E9E9E", - buttonTextColor: "#000000", - dpadCenterColor: "#5D4037", - }, - { - gameboyColor: "#FF5733", - htmlColor: "#FFCCCB", - screenColor: "#FFABAB", - buttonColor: "#C70039", - buttonTextColor: "#FFFFFF", - dpadCenterColor: "#B71C1C", - }, - { - gameboyColor: "#00BCD4", - htmlColor: "#B2EBF2", - screenColor: "#80DEEA", - buttonColor: "#00ACC1", - buttonTextColor: "#FFFFFF", - dpadCenterColor: "#00838F", - }, + { gameboyColor: '#B39DDB', htmlColor: '#D1C4E9', screenColor: '#E1BEE7', buttonColor: '#673AB7', buttonTextColor: '#FFFFFF', dpadCenterColor: '#5E35B1' }, + { gameboyColor: '#FFC107', htmlColor: '#FFF9C4', screenColor: '#FFEB3B', buttonColor: '#FF9800', buttonTextColor: '#000000', dpadCenterColor: '#EF6C00' }, + { gameboyColor: '#8BC34A', htmlColor: '#C5E1A5', screenColor: '#A5D6A7', buttonColor: '#FF5722', buttonTextColor: '#FFFFFF', dpadCenterColor: '#E64A19' }, + { gameboyColor: '#F44336', htmlColor: '#FFCDD2', screenColor: '#EF9A9A', buttonColor: '#E91E63', buttonTextColor: '#FFFFFF', dpadCenterColor: '#C2185B' }, + { gameboyColor: '#03A9F4', htmlColor: '#BBDEFB', screenColor: '#90CAF9', buttonColor: '#FFEB3B', buttonTextColor: '#000000', dpadCenterColor: '#0277BD' }, + { gameboyColor: '#FF7043', htmlColor: '#FFCCBC', screenColor: '#FFAB91', buttonColor: '#FF5722', buttonTextColor: '#FFFFFF', dpadCenterColor: '#D84315' }, + { gameboyColor: '#9C27B0', htmlColor: '#E1BEE7', screenColor: '#D1C4E9', buttonColor: '#7B1FA2', buttonTextColor: '#FFFFFF', dpadCenterColor: '#6A1B9A' }, + { gameboyColor: '#FFD700', htmlColor: '#FFF9C4', screenColor: '#FFF59D', buttonColor: '#FF9800', buttonTextColor: '#FFFFFF', dpadCenterColor: '#F57F17' }, + { gameboyColor: '#009688', htmlColor: '#B2DFDB', screenColor: '#80CBC4', buttonColor: '#4CAF50', buttonTextColor: '#FFFFFF', dpadCenterColor: '#00796B' }, + { gameboyColor: '#795548', htmlColor: '#D7CCC8', screenColor: '#A1887F', buttonColor: '#9E9E9E', buttonTextColor: '#000000', dpadCenterColor: '#5D4037' }, + { gameboyColor: '#FF5733', htmlColor: '#FFCCCB', screenColor: '#FFABAB', buttonColor: '#C70039', buttonTextColor: '#FFFFFF', dpadCenterColor: '#B71C1C' }, + { gameboyColor: '#00BCD4', htmlColor: '#B2EBF2', screenColor: '#80DEEA', buttonColor: '#00ACC1', buttonTextColor: '#FFFFFF', dpadCenterColor: '#00838F' } ]; -let currentColorIndex = localStorage.getItem("gameboyColorIndex") - ? parseInt(localStorage.getItem("gameboyColorIndex")) - : 0; +let currentColorIndex = localStorage.getItem('gameboyColorIndex') ? parseInt(localStorage.getItem('gameboyColorIndex')) : 0; function updateGameBoyColor() { - gameboy.style.backgroundColor = colors[currentColorIndex].gameboyColor; - html.style.backgroundColor = colors[currentColorIndex].htmlColor; - body.style.backgroundColor = colors[currentColorIndex].htmlColor; - screen.style.backgroundColor = colors[currentColorIndex].screenColor; + gameboy.style.backgroundColor = colors[currentColorIndex].gameboyColor; + html.style.backgroundColor = colors[currentColorIndex].htmlColor; + body.style.backgroundColor = colors[currentColorIndex].htmlColor; + screen.style.backgroundColor = colors[currentColorIndex].screenColor; - dpadButtons.forEach((button) => { - button.style.backgroundColor = colors[currentColorIndex].buttonColor; - button.style.color = colors[currentColorIndex].buttonTextColor; - }); + dpadButtons.forEach(button => { + button.style.backgroundColor = colors[currentColorIndex].buttonColor; + button.style.color = colors[currentColorIndex].buttonTextColor; + }); - // Using darker dpad center color - dpadCenter.style.backgroundColor = colors[currentColorIndex].dpadCenterColor; - dpadCenter.style.color = colors[currentColorIndex].buttonTextColor; + // Using darker dpad center color + dpadCenter.style.backgroundColor = colors[currentColorIndex].dpadCenterColor; + dpadCenter.style.color = colors[currentColorIndex].buttonTextColor; - actionButtons.forEach((button) => { - button.style.backgroundColor = colors[currentColorIndex].buttonColor; - button.style.color = colors[currentColorIndex].buttonTextColor; - }); + actionButtons.forEach(button => { + button.style.backgroundColor = colors[currentColorIndex].buttonColor; + button.style.color = colors[currentColorIndex].buttonTextColor; + }); } -left.addEventListener("click", () => { - currentColorIndex = (currentColorIndex - 1 + colors.length) % colors.length; - localStorage.setItem("gameboyColorIndex", currentColorIndex); - updateGameBoyColor(); +left.addEventListener('click', () => { + currentColorIndex = (currentColorIndex - 1 + colors.length) % colors.length; + localStorage.setItem('gameboyColorIndex', currentColorIndex); + updateGameBoyColor(); }); -right.addEventListener("click", () => { - currentColorIndex = (currentColorIndex + 1) % colors.length; - localStorage.setItem("gameboyColorIndex", currentColorIndex); - updateGameBoyColor(); +right.addEventListener('click', () => { + currentColorIndex = (currentColorIndex + 1) % colors.length; + localStorage.setItem('gameboyColorIndex', currentColorIndex); + updateGameBoyColor(); }); updateGameBoyColor(); diff --git a/secret/mineSweeper/script.js b/secret/mineSweeper/script.js index f30f685..d35c436 100644 --- a/secret/mineSweeper/script.js +++ b/secret/mineSweeper/script.js @@ -1,192 +1,173 @@ -document.getElementById("startGame").addEventListener("click", function () { - const gridSize = parseInt(document.getElementById("gridSize").value); - const bombs = parseInt(document.getElementById("bombs").value); +document.getElementById('startGame').addEventListener('click', function () { + const gridSize = parseInt(document.getElementById('gridSize').value); + const bombs = parseInt(document.getElementById('bombs').value); - document.getElementById("settings").style.display = "none"; - document.getElementById("game").style.display = "block"; + document.getElementById('settings').style.display = 'none'; + document.getElementById('game').style.display = 'block'; - renderGame(gridSize, bombs); + renderGame(gridSize, bombs); }); -const canvas = document.getElementById("game"); -const ctx = canvas.getContext("2d"); +const canvas = document.getElementById('game'); +const ctx = canvas.getContext('2d'); class Minesweeper { - constructor(width, height, bombs) { - this.size = 25; - this.field = new Array(width); - this.bombs = new Array(width); - for (let x = 0; x < this.field.length; x++) { - this.field[x] = new Array(height); - this.bombs[x] = new Array(height); - for (let y = 0; y < this.field[x].length; y++) { - this.field[x][y] = 1; - this.bombs[x][y] = false; - } - } - - this.bombAmount = - bombs > (width * height) / 2 ? (width * height) / 2 : bombs; - this.width = width; - this.height = height; - this.firstClick = false; - this.drawField(); - } - - generateBombs() { - for (let i = 0; i < this.bombAmount; i++) { - let x = Math.floor(Math.random() * this.width); - let y = Math.floor(Math.random() * this.height); - this.bombs[x][y] || this.field[x][y] == 0 - ? i-- - : (this.bombs[x][y] = true); - } - this.firstClick = true; - } - - getNearbyBombs(x, y) { - let counter = 0; - for (let newX = x - 1; newX <= x + 1; newX++) { - for (let newY = y - 1; newY <= y + 1; newY++) { - if ( - newX < this.field.length && - newX >= 0 && - newY < this.field[0].length && - newY >= 0 - ) { - this.bombs[newX][newY] ? counter++ : {}; - } - } - } - return counter; - } - - checkWin() { - for (let x = 0; x < this.field.length; x++) { - for (let y = 0; y < this.field[x].length; y++) { - if (this.field[x][y] != 0 && !this.bombs[x][y]) { - return; - } else if (this.field[x][y] == 0 && this.bombs[x][y]) { - alert(`[ERROR]: Square (${x}|${y}) should not be a bomb!`); - this.bombs[x][y] = false; - } - } - } - this.drawField(); - alert("You won!"); - window.location.reload(); - } - - markSquare(x, y) { - if (x < this.field.length && y < this.field[0].length) { - switch (this.field[x][y]) { - case 1: - this.field[x][y]++; - break; - case 2: - this.field[x][y]++; - break; - case 3: - this.field[x][y] = 1; - break; - default: - break; - } - this.drawField(); - } - } - - uncoverSquare(x, y) { - if (x < this.field.length && x >= 0 && y < this.field[0].length && y >= 0) { - if (this.bombs[x][y] && this.field[x][y] == 1) { - alert("You lost!"); - window.location.reload(); - } else if (this.field[x][y] == 1) { - this.field[x][y] = 0; - !this.firstClick ? this.generateBombs() : {}; - if (this.getNearbyBombs(x, y) == 0) { - for (let newX = x - 1; newX <= x + 1; newX++) { - for (let newY = y - 1; newY <= y + 1; newY++) { - if ( - newX < this.field.length && - newX >= 0 && - newY < this.field[0].length && - newY >= 0 - ) { - this.field[newX][newY] == 1 - ? this.uncoverSquare(newX, newY) - : {}; - } + constructor(width, height, bombs) { + this.size = 25; + this.field = new Array(width); + this.bombs = new Array(width); + for (let x = 0; x < this.field.length; x++) { + this.field[x] = new Array(height); + this.bombs[x] = new Array(height); + for (let y = 0; y < this.field[x].length; y++) { + this.field[x][y] = 1; + this.bombs[x][y] = false; } - } } - } - this.checkWin(); - this.drawField(); - } - } - drawSquare(x, y, type) { - ctx.lineWidth = 3; - let uncovered = (x + y) % 2 === 0 ? "#D3D3D3" : "#A9A9A9"; - let covered = (x + y) % 2 === 0 ? "#4CAF50" : "#81C784"; - ctx.fillStyle = type != 0 ? covered : uncovered; - ctx.fillRect(x * this.size, y * this.size, this.size, this.size); - ctx.strokeStyle = "#000"; - ctx.strokeRect(x * this.size, y * this.size, this.size, this.size); - - if (type != 1) { - const fontSize = this.size / 2; - const number = this.getNearbyBombs(x, y); - let finalPrint; - ctx.font = `${fontSize}px sans-serif`; - ctx.fillStyle = "#000"; - type == 0 ? (finalPrint = number ? number : " ") : {}; - type == 2 ? (finalPrint = "🚩") : {}; - type == 3 ? (finalPrint = "❓") : {}; - ctx.fillText( - finalPrint, - x * this.size + fontSize / (type == 0 ? 1.5 : 1.8), - y * this.size + fontSize * 1.3 - ); - } - } - - drawField() { - if (window.innerWidth > window.innerHeight) { - this.size = window.innerHeight / (this.field[0].length + 4); - } else { - this.size = window.innerWidth / (this.field.length + 4); + this.bombAmount = bombs > width * height / 2 ? width * height / 2 : bombs; + this.width = width; + this.height = height; + this.firstClick = false; + this.drawField(); } - canvas.width = this.size * this.field.length; - canvas.height = this.size * this.field[0].length; - - const offsetX = (canvas.width - this.field.length * this.size) / 2; - const offsetY = (canvas.height - this.field[0].length * this.size) / 2; - - for (let x = 0; x < this.field.length; x++) { - for (let y = 0; y < this.field[x].length; y++) { - this.drawSquare(x, y, this.field[x][y], offsetX, offsetY); - } + generateBombs() { + for (let i = 0; i < this.bombAmount; i++) { + let x = Math.floor(Math.random() * this.width); + let y = Math.floor(Math.random() * this.height); + (this.bombs[x][y] || this.field[x][y] == 0) ? i-- : this.bombs[x][y] = true; + } + this.firstClick = true; + } + + getNearbyBombs(x, y) { + let counter = 0; + for (let newX = x - 1; newX <= x + 1; newX++) { + for (let newY = y - 1; newY <= y + 1; newY++) { + if (newX < this.field.length && newX >= 0 && newY < this.field[0].length && newY >= 0) { + this.bombs[newX][newY] ? counter++ : {}; + } + } + } + return counter; + } + + checkWin() { + for (let x = 0; x < this.field.length; x++) { + for (let y = 0; y < this.field[x].length; y++) { + if (this.field[x][y] != 0 && !this.bombs[x][y]) { + return; + } else if (this.field[x][y] == 0 && this.bombs[x][y]) { + alert(`[ERROR]: Square (${x}|${y}) should not be a bomb!`); + this.bombs[x][y] = false; + } + } + } + this.drawField(); + alert('You won!'); + window.location.reload(); + } + + markSquare(x, y) { + if (x < this.field.length && y < this.field[0].length) { + switch (this.field[x][y]) { + case 1: + this.field[x][y]++; + break; + case 2: + this.field[x][y]++; + break; + case 3: + this.field[x][y] = 1; + break; + default: + break; + } + this.drawField(); + } + } + + uncoverSquare(x, y) { + if (x < this.field.length && x >= 0 && y < this.field[0].length && y >= 0) { + if (this.bombs[x][y] && this.field[x][y] == 1) { + alert('You lost!'); + window.location.reload(); + } else if (this.field[x][y] == 1) { + this.field[x][y] = 0; + !this.firstClick ? this.generateBombs() : {}; + if (this.getNearbyBombs(x, y) == 0) { + for (let newX = x - 1; newX <= x + 1; newX++) { + for (let newY = y - 1; newY <= y + 1; newY++) { + if (newX < this.field.length && newX >= 0 && newY < this.field[0].length && newY >= 0) { + this.field[newX][newY] == 1 ? this.uncoverSquare(newX, newY) : {}; + } + } + } + } + }; + this.checkWin(); + this.drawField(); + } + } + + drawSquare(x, y, type) { + ctx.lineWidth = 3; + let uncovered = (x + y) % 2 === 0 ? '#D3D3D3' : '#A9A9A9'; + let covered = (x + y) % 2 === 0 ? '#4CAF50' : '#81C784'; + ctx.fillStyle = type != 0 ? covered : uncovered; + ctx.fillRect(x * this.size, y * this.size, this.size, this.size); + ctx.strokeStyle = '#000'; + ctx.strokeRect(x * this.size, y * this.size, this.size, this.size); + + if (type != 1) { + const fontSize = this.size / 2; + const number = this.getNearbyBombs(x, y); + let finalPrint; + ctx.font = `${fontSize}px sans-serif`; + ctx.fillStyle = '#000'; + type == 0 ? finalPrint = number ? number : ' ' : {}; + type == 2 ? finalPrint = '🚩' : {}; + type == 3 ? finalPrint = '❓' : {}; + ctx.fillText(finalPrint, x * this.size + fontSize / (type == 0 ? 1.5 : 1.8), y * this.size + fontSize * 1.3); + } + } + + drawField() { + if (window.innerWidth > window.innerHeight) { + this.size = window.innerHeight / (this.field[0].length + 4); + } else { + this.size = window.innerWidth / (this.field.length + 4); + } + + canvas.width = this.size * this.field.length; + canvas.height = this.size * this.field[0].length; + + const offsetX = (canvas.width - (this.field.length * this.size)) / 2; + const offsetY = (canvas.height - (this.field[0].length * this.size)) / 2; + + for (let x = 0; x < this.field.length; x++) { + for (let y = 0; y < this.field[x].length; y++) { + this.drawSquare(x, y, this.field[x][y], offsetX, offsetY); + } + } } - } } const renderGame = (gridSize, bombs) => { - let field = new Minesweeper(gridSize, gridSize, bombs); - window.addEventListener("resize", () => field.drawField()); - canvas.addEventListener("click", (event) => { - const rect = canvas.getBoundingClientRect(); - const x = Math.floor((event.clientX - rect.left) / field.size); - const y = Math.floor((event.clientY - rect.top) / field.size); - field.uncoverSquare(x, y); - }); - canvas.addEventListener("contextmenu", (event) => { - event.preventDefault(); - const rect = canvas.getBoundingClientRect(); - const x = Math.floor((event.clientX - rect.left) / field.size); - const y = Math.floor((event.clientY - rect.top) / field.size); - field.markSquare(x, y); - }); + let field = new Minesweeper(gridSize, gridSize, bombs); + window.addEventListener('resize', () => field.drawField()); + canvas.addEventListener('click', (event) => { + const rect = canvas.getBoundingClientRect(); + const x = Math.floor((event.clientX - rect.left) / field.size); + const y = Math.floor((event.clientY - rect.top) / field.size); + field.uncoverSquare(x, y); + }); + canvas.addEventListener('contextmenu', (event) => { + event.preventDefault(); + const rect = canvas.getBoundingClientRect(); + const x = Math.floor((event.clientX - rect.left) / field.size); + const y = Math.floor((event.clientY - rect.top) / field.size); + field.markSquare(x, y); + }); }; diff --git a/secret/mineSweeper/styles.css b/secret/mineSweeper/styles.css index 8468965..738993d 100644 --- a/secret/mineSweeper/styles.css +++ b/secret/mineSweeper/styles.css @@ -1,104 +1,104 @@ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } body, html { - height: 100%; - margin: 0; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - background-color: #121212; - color: #e0e0e0; + height: 100%; + margin: 0; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #121212; + color: #e0e0e0; } #settings { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; - margin: auto; - background-color: #1e1e1e; - padding: 40px; - border-radius: 12px; - box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5); - width: 100%; - max-width: 600px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + margin: auto; + background-color: #1e1e1e; + padding: 40px; + border-radius: 12px; + box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5); + width: 100%; + max-width: 600px; } h1 { - font-size: 2.5em; - margin-bottom: 20px; - color: #007bff; + font-size: 2.5em; + margin-bottom: 20px; + color: #007bff; } label { - margin-bottom: 12px; - font-size: 20px; - color: #d1d1d1; + margin-bottom: 12px; + font-size: 20px; + color: #d1d1d1; } input[type="number"], input[type="range"], span { - padding: 12px; - margin-bottom: 20px; - width: 100%; - max-width: 400px; - text-align: center; - border: 1px solid #444; - border-radius: 6px; - background-color: #333; - color: #e0e0e0; - font-size: 18px; - transition: border-color 0.3s ease; + padding: 12px; + margin-bottom: 20px; + width: 100%; + max-width: 400px; + text-align: center; + border: 1px solid #444; + border-radius: 6px; + background-color: #333; + color: #e0e0e0; + font-size: 18px; + transition: border-color 0.3s ease; } input[type="number"]:focus, input[type="range"]:focus { - border-color: #007bff; - outline: none; + border-color: #007bff; + outline: none; } button { - padding: 12px 24px; - background-color: #007bff; - color: white; - border: none; - border-radius: 6px; - cursor: pointer; - transition: background-color 0.3s ease, transform 0.2s ease; - font-size: 18px; + padding: 12px 24px; + background-color: #007bff; + color: white; + border: none; + border-radius: 6px; + cursor: pointer; + transition: background-color 0.3s ease, transform 0.2s ease; + font-size: 18px; } button:hover { - background-color: #0056b3; - transform: translateY(-2px); + background-color: #0056b3; + transform: translateY(-2px); } button:active { - transform: translateY(0); + transform: translateY(0); } canvas { - display: none; + display: none; } -@media (max-width: 600px) { - #settings { - font-size: 16px; - } +@media(max-width: 600px) { + #settings { + font-size: 16px; + } - input[type="number"], - input[type="range"], - button { - width: 90%; - max-width: none; - } -} + input[type="number"], + input[type="range"], + button { + width: 90%; + max-width: none; + } +} \ No newline at end of file diff --git a/secret/snake/game.js b/secret/snake/game.js index 08d50d5..a9f50a8 100644 --- a/secret/snake/game.js +++ b/secret/snake/game.js @@ -1,13 +1,13 @@ -"use strict"; +'use strict'; -const upButton = document.getElementById("up"); -const downButton = document.getElementById("down"); -const leftButton = document.getElementById("left"); -const rightButton = document.getElementById("right"); -const startButton = document.getElementById("start"); -const grid = document.createElement("div"); -grid.id = "grid"; -document.querySelector(".game").appendChild(grid); +const upButton = document.getElementById('up'); +const downButton = document.getElementById('down'); +const leftButton = document.getElementById('left'); +const rightButton = document.getElementById('right'); +const startButton = document.getElementById('start'); +const grid = document.createElement('div'); +grid.id = 'grid'; +document.querySelector('.game').appendChild(grid); let snake = [{ x: 5, y: 5 }]; let apple = { x: 8, y: 5 }; @@ -17,134 +17,128 @@ let isGameRunning = false; const gridSize = 10; function initGame() { - grid.style.display = "grid"; - grid.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`; - grid.style.gridTemplateRows = `repeat(${gridSize}, 1fr)`; - grid.style.width = "350px"; - grid.style.height = "350px"; - document.getElementById("title").style.display = "none"; - document.getElementById("description").style.display = "none"; + grid.style.display = 'grid'; + grid.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`; + grid.style.gridTemplateRows = `repeat(${gridSize}, 1fr)`; + grid.style.width = '350px'; + grid.style.height = '350px'; + document.getElementById('title').style.display = 'none'; + document.getElementById('description').style.display = 'none'; - isGameRunning = true; - snake = [{ x: 5, y: 5 }]; - apple = spawnApple(); - direction = { x: 0, y: 0 }; + isGameRunning = true; + snake = [{ x: 5, y: 5 }]; + apple = spawnApple(); + direction = { x: 0, y: 0 }; - clearInterval(gameInterval); - gameInterval = setInterval(gameLoop, 200); - render(); + clearInterval(gameInterval); + gameInterval = setInterval(gameLoop, 200); + render(); } function spawnApple() { - let newApple; - do { - newApple = { - x: Math.floor(Math.random() * gridSize), - y: Math.floor(Math.random() * gridSize), - }; - } while ( - snake.some( - (segment) => segment.x === newApple.x && segment.y === newApple.y - ) - ); - return newApple; + let newApple; + do { + newApple = { + x: Math.floor(Math.random() * gridSize), + y: Math.floor(Math.random() * gridSize) + }; + } while (snake.some(segment => segment.x === newApple.x && segment.y === newApple.y)); + return newApple; } function updateSnake() { - const newHead = { - x: snake[0].x + direction.x, - y: snake[0].y + direction.y, - }; + const newHead = { + x: snake[0].x + direction.x, + y: snake[0].y + direction.y + }; - if (newHead.x < 0) newHead.x = gridSize - 1; - if (newHead.y < 0) newHead.y = gridSize - 1; - if (newHead.x >= gridSize) newHead.x = 0; - if (newHead.y >= gridSize) newHead.y = 0; + if (newHead.x < 0) newHead.x = gridSize - 1; + if (newHead.y < 0) newHead.y = gridSize - 1; + if (newHead.x >= gridSize) newHead.x = 0; + if (newHead.y >= gridSize) newHead.y = 0; - if ( - snake.some((segment) => segment.x === newHead.x && segment.y === newHead.y) - ) { - gameOver(); - return; - } + if (snake.some(segment => segment.x === newHead.x && segment.y === newHead.y)) { + gameOver(); + return; + } - snake.unshift(newHead); + snake.unshift(newHead); - if (newHead.x === apple.x && newHead.y === apple.y) { - apple = spawnApple(); - } else { - snake.pop(); - } + if (newHead.x === apple.x && newHead.y === apple.y) { + apple = spawnApple(); + } else { + snake.pop(); + } } function render() { - grid.innerHTML = ""; + grid.innerHTML = ""; - for (let y = 0; y < gridSize; y++) { - for (let x = 0; x < gridSize; x++) { - const cell = document.createElement("div"); - cell.classList.add("cell"); + for (let y = 0; y < gridSize; y++) { + for (let x = 0; x < gridSize; x++) { + const cell = document.createElement("div"); + cell.classList.add("cell"); - if ((x + y) % 2 === 0) { - cell.classList.add("light-green"); - } else { - cell.classList.add("dark-green"); - } + if ((x + y) % 2 === 0) { + cell.classList.add("light-green"); + } else { + cell.classList.add("dark-green"); + } - if (snake.some((segment) => segment.x === x && segment.y === y)) { - cell.classList.add("snake"); - } + if (snake.some(segment => segment.x === x && segment.y === y)) { + cell.classList.add("snake"); + } - if (apple.x === x && apple.y === y) { - cell.classList.add("apple"); - } + if (apple.x === x && apple.y === y) { + cell.classList.add("apple"); + } - grid.appendChild(cell); + grid.appendChild(cell); + } } - } } function gameLoop() { - if (!isGameRunning) return; - updateSnake(); - render(); + if (!isGameRunning) return; + updateSnake(); + render(); } function gameOver() { - alert("Game Over!"); - clearInterval(gameInterval); - isGameRunning = false; + alert('Game Over!'); + clearInterval(gameInterval); + isGameRunning = false; } function handleDirectionInput(key) { - switch (key) { - case "ArrowUp": - case "w": - if (direction.y === 0) direction = { x: 0, y: -1 }; - break; - case "ArrowDown": - case "s": - if (direction.y === 0) direction = { x: 0, y: 1 }; - break; - case "ArrowLeft": - case "a": - if (direction.x === 0) direction = { x: -1, y: 0 }; - break; - case "ArrowRight": - case "d": - if (direction.x === 0) direction = { x: 1, y: 0 }; - break; - } + switch (key) { + case 'ArrowUp': + case 'w': + if (direction.y === 0) direction = { x: 0, y: -1 }; + break; + case 'ArrowDown': + case 's': + if (direction.y === 0) direction = { x: 0, y: 1 }; + break; + case 'ArrowLeft': + case 'a': + if (direction.x === 0) direction = { x: -1, y: 0 }; + break; + case 'ArrowRight': + case 'd': + if (direction.x === 0) direction = { x: 1, y: 0 }; + break; + } } -upButton.addEventListener("click", () => handleDirectionInput("ArrowUp")); -downButton.addEventListener("click", () => handleDirectionInput("ArrowDown")); -leftButton.addEventListener("click", () => handleDirectionInput("ArrowLeft")); -rightButton.addEventListener("click", () => handleDirectionInput("ArrowRight")); -startButton.addEventListener("click", () => { - if (!isGameRunning) initGame(); +upButton.addEventListener('click', () => handleDirectionInput('ArrowUp')); +downButton.addEventListener('click', () => handleDirectionInput('ArrowDown')); +leftButton.addEventListener('click', () => handleDirectionInput('ArrowLeft')); +rightButton.addEventListener('click', () => handleDirectionInput('ArrowRight')); +startButton.addEventListener('click', () => { + if (!isGameRunning) initGame(); }); -document.addEventListener("keydown", (event) => { - handleDirectionInput(event.key); +document.addEventListener('keydown', (event) => { + handleDirectionInput(event.key); }); diff --git a/secret/snake/styles.css b/secret/snake/styles.css index 2454d67..556a94a 100644 --- a/secret/snake/styles.css +++ b/secret/snake/styles.css @@ -1,238 +1,238 @@ /* Base Reset */ body, html { - margin: 0; - padding: 0; - font-family: monospace; - background-color: #3a2d56; - display: flex; - justify-content: center; - align-items: center; - height: 100vh; + margin: 0; + padding: 0; + font-family: monospace; + background-color: #3a2d56; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; } /* GameBoy Layout */ .gameboy { - background-color: #5f4c82; - width: 441px; - height: 735px; - border-radius: 20px; - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); - display: flex; - flex-direction: column; - align-items: center; - padding: 10px; - position: relative; + background-color: #5f4c82; /* Game Boy Color purple shell */ + width: 441px; + height: 735px; + border-radius: 20px; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); + display: flex; + flex-direction: column; + align-items: center; + padding: 10px; + position: relative; } -@media (max-width: 768px) { - .gameboy { - width: 100vw; - height: 100vh; - border-radius: 0; - } +@media(max-width: 768px) { + .gameboy { + width: 100vw; + height: 100vh; + border-radius: 0; + } } /* Screen */ .screen { - background-color: black; - border: 4px solid #0f380f; - width: 90%; - height: 55%; - margin-top: 20px; - border-radius: 10px; - display: flex; - justify-content: center; - align-items: center; - box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5); - overflow: hidden; + background-color: black; + border: 4px solid #0f380f; + width: 90%; + height: 55%; + margin-top: 20px; + border-radius: 10px; + display: flex; + justify-content: center; + align-items: center; + box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5); + overflow: hidden; } .game { - text-align: center; - width: 90%; + text-align: center; + width: 90%; } /* Titles */ h1 { - font-size: 2rem; - margin-bottom: 10px; - text-transform: uppercase; - color: #9bbc0f; + font-size: 2rem; + margin-bottom: 10px; + text-transform: uppercase; + color: #9bbc0f; } .description, .description p { - font-size: 1.2rem; - margin: 0 auto; - padding: 0 auto; - color: white; + font-size: 1.2rem; + margin: 0 auto; + padding: 0 auto; + color: white; } /* Grid container */ #grid { - display: grid; - grid-template-columns: repeat(10, 1fr); /* Adjust to match gridSize */ - grid-template-rows: repeat(10, 1fr); /* Adjust to match gridSize */ - width: 400px; /* Adjust as needed */ - height: 400px; /* Adjust as needed */ - border: 2px solid #0f380f; - margin: 20px auto; - /* initially hide */ - display: none; + display: grid; + grid-template-columns: repeat(10, 1fr); /* Adjust to match gridSize */ + grid-template-rows: repeat(10, 1fr); /* Adjust to match gridSize */ + width: 400px; /* Adjust as needed */ + height: 400px; /* Adjust as needed */ + border: 2px solid #0f380f; + margin: 20px auto; + /* initially hide */ + display: none; } /* Individual cells */ .cell { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } .cell.light-green { - background-color: #9bbc0f; + background-color: #9bbc0f; } .cell.dark-green { - background-color: #0f380f; + background-color: #0f380f; } /* Snake styling */ .snake { - background-color: #e600ff; /* Snake color */ - z-index: 1000; + background-color: #e600ff; /* Snake color */ + z-index: 1000; } /* Apple styling */ .apple { - background-color: red; /* Apple color */ - z-index: 999; + background-color: red; /* Apple color */ + z-index: 999; } /* Controls Section */ .controls { - margin-top: 20px; - display: flex; - justify-content: space-between; - width: 80%; - align-items: center; + margin-top: 20px; + display: flex; + justify-content: space-between; + width: 80%; + align-items: center; } /* D-Pad */ .dpad { - position: relative; - width: 120px; - height: 120px; + position: relative; + width: 120px; + height: 120px; } /* Base Styling for D-Pad Buttons */ .dpad-btn { - background-color: #0f380f; - color: #9bbc0f; - border: none; - border-radius: 5px; - position: absolute; - width: 42px; - height: 42px; - font-size: 1.5rem; - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - z-index: 1; + background-color: #0f380f; + color: #9bbc0f; + border: none; + border-radius: 5px; + position: absolute; + width: 42px; + height: 42px; + font-size: 1.5rem; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + z-index: 1; } .dpad-btn.up { - top: 0; - left: 50%; - transform: translateX(-50%); + top: 0; + left: 50%; + transform: translateX(-50%); } .dpad-btn.down { - bottom: 0; - left: 50%; - transform: translateX(-50%); + bottom: 0; + left: 50%; + transform: translateX(-50%); } .dpad-btn.left { - top: 50%; - left: 0; - transform: translateY(-50%); + top: 50%; + left: 0; + transform: translateY(-50%); } .dpad-btn.right { - top: 50%; - right: 0; - transform: translateY(-50%); + top: 50%; + right: 0; + transform: translateY(-50%); } /* D-Pad Center to Connect Buttons */ .dpad-center { - background-color: #0f380f; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 40px; - height: 40px; - border: 2px solid transparent; - z-index: 0; - border-radius: 5px; + background-color: #0f380f; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 40px; + height: 40px; + border: 2px solid transparent; + z-index: 0; + border-radius: 5px; } /* A and B Buttons */ .action-buttons { - display: flex; - flex-direction: column; - justify-content: space-between; - height: 200px; + display: flex; + flex-direction: column; + justify-content: space-between; + height: 200px; } .btn { - background-color: #0f380f; - color: #9bbc0f; - border: 2px solid #9bbc0f; - border-radius: 50%; - width: 60px; - height: 60px; - font-size: 1.8rem; - cursor: pointer; - transition: transform 0.1s, background-color 0.2s; + background-color: #0f380f; + color: #9bbc0f; + border: 2px solid #9bbc0f; + border-radius: 50%; + width: 60px; + height: 60px; + font-size: 1.8rem; + cursor: pointer; + transition: transform 0.1s, background-color 0.2s; } .btn:hover { - background-color: #9bbc0f; - color: #0f380f; + background-color: #9bbc0f; + color: #0f380f; } .btn:active { - transform: scale(0.9); + transform: scale(0.9); } /* Start Button */ .start-btn { - background-color: #0f380f; - color: #9bbc0f; - border: 2px solid #9bbc0f; - border-radius: 5px; - width: 100px; - height: 40px; - font-size: 1.2rem; - cursor: pointer; - transition: transform 0.1s, background-color 0.2s; - margin-bottom: 20px; + background-color: #0f380f; + color: #9bbc0f; + border: 2px solid #9bbc0f; + border-radius: 5px; + width: 100px; + height: 40px; + font-size: 1.2rem; + cursor: pointer; + transition: transform 0.1s, background-color 0.2s; + margin-bottom: 20px; } .start-btn:hover { - background-color: #9bbc0f; - color: #0f380f; + background-color: #9bbc0f; + color: #0f380f; } .start-btn:active { - transform: scale(0.9); + transform: scale(0.9); } /* Hidden Canvas for Debugging or Fallback */ canvas { - display: none; - z-index: 1000; + display: none; + z-index: 1000; } diff --git a/secret/snake/styles.js b/secret/snake/styles.js index 231d5b3..6706f60 100644 --- a/secret/snake/styles.js +++ b/secret/snake/styles.js @@ -1,134 +1,60 @@ -"use strict"; -const aBtn = document.querySelector("#a"); -const bBtn = document.querySelector("#b"); -const gameboy = document.querySelector(".gameboy"); +'use strict'; +const aBtn = document.querySelector('#a'); +const bBtn = document.querySelector('#b'); +const gameboy = document.querySelector('.gameboy'); const html = document.documentElement; const body = document.body; -const dpadButtons = document.querySelectorAll(".dpad-btn"); -const dpadCenter = document.querySelector(".dpad-center"); // Darker variant -const actionButtons = document.querySelectorAll(".btn"); +const dpadButtons = document.querySelectorAll('.dpad-btn'); +const dpadCenter = document.querySelector('.dpad-center'); // Darker variant +const actionButtons = document.querySelectorAll('.btn'); const colors = [ - { - gameboyColor: "#B39DDB", - htmlColor: "#D1C4E9", - buttonColor: "#673AB7", - buttonTextColor: "#FFFFFF", - dpadCenterColor: "#5E35B1", - }, - { - gameboyColor: "#FFC107", - htmlColor: "#FFF9C4", - buttonColor: "#FF9800", - buttonTextColor: "#000000", - dpadCenterColor: "#EF6C00", - }, - { - gameboyColor: "#8BC34A", - htmlColor: "#C5E1A5", - buttonColor: "#FF5722", - buttonTextColor: "#FFFFFF", - dpadCenterColor: "#E64A19", - }, - { - gameboyColor: "#F44336", - htmlColor: "#FFCDD2", - buttonColor: "#E91E63", - buttonTextColor: "#FFFFFF", - dpadCenterColor: "#C2185B", - }, - { - gameboyColor: "#03A9F4", - htmlColor: "#BBDEFB", - buttonColor: "#FFEB3B", - buttonTextColor: "#000000", - dpadCenterColor: "#0277BD", - }, - { - gameboyColor: "#FF7043", - htmlColor: "#FFCCBC", - buttonColor: "#FF5722", - buttonTextColor: "#FFFFFF", - dpadCenterColor: "#D84315", - }, - { - gameboyColor: "#9C27B0", - htmlColor: "#E1BEE7", - buttonColor: "#7B1FA2", - buttonTextColor: "#FFFFFF", - dpadCenterColor: "#6A1B9A", - }, - { - gameboyColor: "#FFD700", - htmlColor: "#FFF9C4", - buttonColor: "#FF9800", - buttonTextColor: "#FFFFFF", - dpadCenterColor: "#F57F17", - }, - { - gameboyColor: "#009688", - htmlColor: "#B2DFDB", - buttonColor: "#4CAF50", - buttonTextColor: "#FFFFFF", - dpadCenterColor: "#00796B", - }, - { - gameboyColor: "#795548", - htmlColor: "#D7CCC8", - buttonColor: "#9E9E9E", - buttonTextColor: "#000000", - dpadCenterColor: "#5D4037", - }, - { - gameboyColor: "#FF5733", - htmlColor: "#FFCCCB", - buttonColor: "#C70039", - buttonTextColor: "#FFFFFF", - dpadCenterColor: "#B71C1C", - }, - { - gameboyColor: "#00BCD4", - htmlColor: "#B2EBF2", - buttonColor: "#00ACC1", - buttonTextColor: "#FFFFFF", - dpadCenterColor: "#00838F", - }, + { gameboyColor: '#B39DDB', htmlColor: '#D1C4E9', buttonColor: '#673AB7', buttonTextColor: '#FFFFFF', dpadCenterColor: '#5E35B1' }, + { gameboyColor: '#FFC107', htmlColor: '#FFF9C4', buttonColor: '#FF9800', buttonTextColor: '#000000', dpadCenterColor: '#EF6C00' }, + { gameboyColor: '#8BC34A', htmlColor: '#C5E1A5', buttonColor: '#FF5722', buttonTextColor: '#FFFFFF', dpadCenterColor: '#E64A19' }, + { gameboyColor: '#F44336', htmlColor: '#FFCDD2', buttonColor: '#E91E63', buttonTextColor: '#FFFFFF', dpadCenterColor: '#C2185B' }, + { gameboyColor: '#03A9F4', htmlColor: '#BBDEFB', buttonColor: '#FFEB3B', buttonTextColor: '#000000', dpadCenterColor: '#0277BD' }, + { gameboyColor: '#FF7043', htmlColor: '#FFCCBC', buttonColor: '#FF5722', buttonTextColor: '#FFFFFF', dpadCenterColor: '#D84315' }, + { gameboyColor: '#9C27B0', htmlColor: '#E1BEE7', buttonColor: '#7B1FA2', buttonTextColor: '#FFFFFF', dpadCenterColor: '#6A1B9A' }, + { gameboyColor: '#FFD700', htmlColor: '#FFF9C4', buttonColor: '#FF9800', buttonTextColor: '#FFFFFF', dpadCenterColor: '#F57F17' }, + { gameboyColor: '#009688', htmlColor: '#B2DFDB', buttonColor: '#4CAF50', buttonTextColor: '#FFFFFF', dpadCenterColor: '#00796B' }, + { gameboyColor: '#795548', htmlColor: '#D7CCC8', buttonColor: '#9E9E9E', buttonTextColor: '#000000', dpadCenterColor: '#5D4037' }, + { gameboyColor: '#FF5733', htmlColor: '#FFCCCB', buttonColor: '#C70039', buttonTextColor: '#FFFFFF', dpadCenterColor: '#B71C1C' }, + { gameboyColor: '#00BCD4', htmlColor: '#B2EBF2', buttonColor: '#00ACC1', buttonTextColor: '#FFFFFF', dpadCenterColor: '#00838F' } ]; -let currentColorIndex = localStorage.getItem("gameboyColorIndex") - ? parseInt(localStorage.getItem("gameboyColorIndex")) - : 0; +let currentColorIndex = localStorage.getItem('gameboyColorIndex') ? parseInt(localStorage.getItem('gameboyColorIndex')) : 0; function updateGameBoyColor() { - gameboy.style.backgroundColor = colors[currentColorIndex].gameboyColor; - html.style.backgroundColor = colors[currentColorIndex].htmlColor; - body.style.backgroundColor = colors[currentColorIndex].htmlColor; + gameboy.style.backgroundColor = colors[currentColorIndex].gameboyColor; + html.style.backgroundColor = colors[currentColorIndex].htmlColor; + body.style.backgroundColor = colors[currentColorIndex].htmlColor; - dpadButtons.forEach((button) => { - button.style.backgroundColor = colors[currentColorIndex].buttonColor; - button.style.color = colors[currentColorIndex].buttonTextColor; - }); + dpadButtons.forEach(button => { + button.style.backgroundColor = colors[currentColorIndex].buttonColor; + button.style.color = colors[currentColorIndex].buttonTextColor; + }); - // Using darker dpad center color - dpadCenter.style.backgroundColor = colors[currentColorIndex].dpadCenterColor; - dpadCenter.style.color = colors[currentColorIndex].buttonTextColor; + // Using darker dpad center color + dpadCenter.style.backgroundColor = colors[currentColorIndex].dpadCenterColor; + dpadCenter.style.color = colors[currentColorIndex].buttonTextColor; - actionButtons.forEach((button) => { - button.style.backgroundColor = colors[currentColorIndex].buttonColor; - button.style.color = colors[currentColorIndex].buttonTextColor; - }); + actionButtons.forEach(button => { + button.style.backgroundColor = colors[currentColorIndex].buttonColor; + button.style.color = colors[currentColorIndex].buttonTextColor; + }); } -aBtn.addEventListener("click", () => { - currentColorIndex = (currentColorIndex - 1 + colors.length) % colors.length; - localStorage.setItem("gameboyColorIndex", currentColorIndex); - updateGameBoyColor(); +aBtn.addEventListener('click', () => { + currentColorIndex = (currentColorIndex - 1 + colors.length) % colors.length; + localStorage.setItem('gameboyColorIndex', currentColorIndex); + updateGameBoyColor(); }); -bBtn.addEventListener("click", () => { - currentColorIndex = (currentColorIndex + 1) % colors.length; - localStorage.setItem("gameboyColorIndex", currentColorIndex); - updateGameBoyColor(); +bBtn.addEventListener('click', () => { + currentColorIndex = (currentColorIndex + 1) % colors.length; + localStorage.setItem('gameboyColorIndex', currentColorIndex); + updateGameBoyColor(); }); updateGameBoyColor(); diff --git a/secret/styles.css b/secret/styles.css index b25a85c..7c3550c 100644 --- a/secret/styles.css +++ b/secret/styles.css @@ -1,145 +1,141 @@ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } body { - font-family: "Courier New", Courier, monospace; - background-color: #0d0d0d; - color: #b0b0b0; - margin: 0; - line-height: 1.6; - background-image: url("images/background.jpg"); - background-size: cover; /* Adjust size for tape appearance */ + font-family: 'Courier New', Courier, monospace; + background-color: #0d0d0d; + color: #b0b0b0; + margin: 0; + line-height: 1.6; + background-image: url('images/background.jpg'); + background-size: cover; /* Adjust size for tape appearance */ } header { - background-color: #222; /* Fully opaque background */ - color: #b0b0b0; - text-align: center; - padding: 1em 0; - font-size: 2rem; - text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); - animation: neonFlicker 1.5s infinite; + background-color: #222; /* Fully opaque background */ + color: #b0b0b0; + text-align: center; + padding: 1em 0; + font-size: 2rem; + text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); + animation: neonFlicker 1.5s infinite; } /* Create the flickering neon light effect */ @keyframes neonFlicker { - 0% { - text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, - 0 0 20px #ffcc00, 0 0 30px #ffcc00, 0 0 40px #ffcc00, 0 0 50px #ffcc00; - } - 20% { - text-shadow: 0 0 3px #ffcc00, 0 0 7px #ffcc00, 0 0 10px #ffcc00, - 0 0 15px #ffcc00, 0 0 20px #ffcc00; - } - 40% { - text-shadow: 0 0 5px #ffcc00, 0 0 15px #ffcc00, 0 0 25px #ffcc00; - } - 60% { - text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, - 0 0 20px #ffcc00, 0 0 30px #ffcc00; - } - 80% { - text-shadow: 0 0 3px #ffcc00, 0 0 7px #ffcc00, 0 0 10px #ffcc00; - } - 100% { - text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, - 0 0 20px #ffcc00, 0 0 30px #ffcc00, 0 0 40px #ffcc00; - } + 0% { + text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, 0 0 20px #ffcc00, 0 0 30px #ffcc00, 0 0 40px #ffcc00, 0 0 50px #ffcc00; + } + 20% { + text-shadow: 0 0 3px #ffcc00, 0 0 7px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, 0 0 20px #ffcc00; + } + 40% { + text-shadow: 0 0 5px #ffcc00, 0 0 15px #ffcc00, 0 0 25px #ffcc00; + } + 60% { + text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, 0 0 20px #ffcc00, 0 0 30px #ffcc00; + } + 80% { + text-shadow: 0 0 3px #ffcc00, 0 0 7px #ffcc00, 0 0 10px #ffcc00; + } + 100% { + text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, 0 0 20px #ffcc00, 0 0 30px #ffcc00, 0 0 40px #ffcc00; + } } footer { - background-color: #111; - color: #b0b0b0; - text-align: center; - padding: 1em 0; - margin-top: 20px; + background-color: #111; + color: #b0b0b0; + text-align: center; + padding: 1em 0; + margin-top: 20px; } .grid-container { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 20px; - padding: 20px; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; + padding: 20px; } .item { - position: relative; - background-color: #1a1a1a; - border-radius: 10px; - overflow: hidden; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8); - transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease; - width: 100%; - height: 400px; - display: flex; - flex-direction: column; + position: relative; + background-color: #1a1a1a; + border-radius: 10px; + overflow: hidden; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8); + transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease; + width: 100%; + height: 400px; + display: flex; + flex-direction: column; } .item img { - width: 100%; - height: 100%; - object-fit: cover; - filter: brightness(0.6); + width: 100%; + height: 100%; + object-fit: cover; + filter: brightness(0.6); } .item .description { - padding: 30px; - font-size: 1rem; - color: #ccc; - background-color: rgba(0, 0, 0, 0.8); - border-radius: 0 0 10px 10px; - flex-grow: 1; + padding: 30px; + font-size: 1rem; + color: #ccc; + background-color: rgba(0, 0, 0, 0.8); + border-radius: 0 0 10px 10px; + flex-grow: 1; } p { - text-decoration: none; + text-decoration: none; } .item:hover { - transform: scale(1.05); - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.9); - filter: brightness(1.1); + transform: scale(1.05); + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.9); + filter: brightness(1.1); } .item:hover img { - transform: scale(1.1); - filter: brightness(1.1); + transform: scale(1.1); + filter: brightness(1.1); } .item h2 { - position: absolute; - top: 10%; - left: 50%; - transform: translateX(-50%); - color: #ffffff; - font-size: 1.8rem; - background-color: rgba(0, 0, 0, 0.9); - padding: 5px 15px; - border-radius: 5px; - text-align: center; - opacity: 0; - transition: opacity 0.3s ease, transform 0.3s ease; + position: absolute; + top: 10%; + left: 50%; + transform: translateX(-50%); + color: #ffffff; + font-size: 1.8rem; + background-color: rgba(0, 0, 0, 0.9); + padding: 5px 15px; + border-radius: 5px; + text-align: center; + opacity: 0; + transition: opacity 0.3s ease, transform 0.3s ease; } .item:hover h2 { - opacity: 1; - transform: translateX(-50%) translateY(-10px); + opacity: 1; + transform: translateX(-50%) translateY(-10px); } -@media (max-width: 800px) { - header { - font-size: 1.5rem; - } +@media(max-width: 800px) { + header { + font-size: 1.5rem; + } - .item { - height: auto; - width: auto; - } + .item { + height: auto; + width: auto; + } - .grid-container { - grid-template-columns: repeat(1, 1fr); - } + .grid-container { + grid-template-columns: repeat(1, 1fr); + } } diff --git a/styles.css b/styles.css index d14c826..15b329a 100644 --- a/styles.css +++ b/styles.css @@ -206,8 +206,7 @@ article ul a li { margin-bottom: 10px; border-radius: var(--border-radius); padding: 10px; - transition: background-color var(--transition-speed), - box-shadow var(--transition-speed); + transition: background-color var(--transition-speed), box-shadow var(--transition-speed); } article ul a li:hover { @@ -215,7 +214,7 @@ article ul a li:hover { box-shadow: 0 0 10px var(--accent-color); } -article ul a li { +article ul a li{ text-decoration: none; color: var(--accent-color); font-weight: bold; @@ -257,19 +256,14 @@ section .card a { color: inherit; height: 100%; width: 100%; - padding: 20px; + padding: 20px; } /* Card styles */ section .card { text-align: center; list-style: none; - background: linear-gradient( - 180deg, - rgba(0, 0, 50, 0.9), - rgba(10, 10, 100, 0.9), - rgba(30, 30, 150, 0.9) - ); + background: linear-gradient(180deg, rgba(0, 0, 50, 0.9), rgba(10, 10, 100, 0.9), rgba(30, 30, 150, 0.9)); border-radius: 12px; box-shadow: 0 5px 20px rgba(0, 0, 50, 0.8), 0 0 10px rgba(255, 255, 255, 0.1); border: 1px solid #2e3a60; @@ -284,12 +278,7 @@ section .card { /* Hover effect */ section .card:hover { transform: translateY(-8px); - background: linear-gradient( - 180deg, - rgba(30, 30, 150, 0.9), - rgba(40, 0, 100, 0.9), - rgba(100, 0, 150, 0.9) - ); + background: linear-gradient(180deg, rgba(30, 30, 150, 0.9), rgba(40, 0, 100, 0.9), rgba(100, 0, 150, 0.9)); box-shadow: 0 10px 30px rgba(0, 0, 100, 0.7), 0 0 20px rgba(255, 221, 85, 0.8); } @@ -325,11 +314,7 @@ section .card::before { width: 60px; height: 60px; border-radius: 50%; - background: radial-gradient( - circle, - rgba(255, 255, 255, 0.1), - rgba(255, 255, 255, 0.02) - ); + background: radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)); box-shadow: 0 0 50px rgba(255, 255, 255, 0.5); animation: spin 8s linear infinite; } @@ -426,7 +411,7 @@ footer { width: 60px; } - .project-name { + .project-name{ font-size: 1.3em; } } diff --git a/webGames/styles.css b/webGames/styles.css index e9a6fcf..3f4f099 100644 --- a/webGames/styles.css +++ b/webGames/styles.css @@ -1,120 +1,120 @@ /* Reset and box-sizing */ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } /* General Styles */ body { - font-family: Arial, sans-serif; - background-color: #282c34; - color: #ffffff; - margin: 0; + font-family: Arial, sans-serif; + background-color: #282c34; + color: #ffffff; + margin: 0; } header { - background-color: #4caf50; - color: white; - text-align: center; - padding: 1em 0; - font-size: 1.5rem; + background-color: #4CAF50; + color: white; + text-align: center; + padding: 1em 0; + font-size: 1.5rem; } footer { - background-color: #333; - color: white; - text-align: center; - padding: 1em 0; - margin-top: 20px; + background-color: #333; + color: white; + text-align: center; + padding: 1em 0; + margin-top: 20px; } /* Grid Styles */ .grid-container { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 20px; /* Space between items */ - padding: 20px; /* Space around the grid */ + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; /* Space between items */ + padding: 20px; /* Space around the grid */ } /* Game Item */ .item { - position: relative; - background-color: #444; - border-radius: 10px; - overflow: hidden; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); - transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease; - width: 100%; /* Ensure it takes full width of the column */ - height: 400px; /* Set a fixed height for all items */ - display: flex; - flex-direction: column; /* Stack children vertically */ + position: relative; + background-color: #444; + border-radius: 10px; + overflow: hidden; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease; + width: 100%; /* Ensure it takes full width of the column */ + height: 400px; /* Set a fixed height for all items */ + display: flex; + flex-direction: column; /* Stack children vertically */ } /* Ensure the image takes the top part of the card */ .item img { - width: 100%; - height: 100%; /* Set a height for the image */ - object-fit: cover; + width: 100%; + height: 100%; /* Set a height for the image */ + object-fit: cover; } .item .description { - padding: 30px; - font-size: 1rem; - color: #ddd; - background-color: rgba(0, 0, 0, 0.5); - border-radius: 0 0 10px 10px; - flex-grow: 1; /* Allow description to take remaining space */ + padding: 30px; + font-size: 1rem; + color: #ddd; + background-color: rgba(0, 0, 0, 0.5); + border-radius: 0 0 10px 10px; + flex-grow: 1; /* Allow description to take remaining space */ } p { - text-decoration: none; + text-decoration: none; } /* Hover effect for scaling and glowing */ .item:hover { - transform: scale(1.05); - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); - filter: brightness(1.2); + transform: scale(1.05); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); + filter: brightness(1.2); } .item:hover img { - transform: scale(1.1); /* Slight zoom-in effect for the image */ - filter: brightness(1.1); /* Increase image brightness */ + transform: scale(1.1); /* Slight zoom-in effect for the image */ + filter: brightness(1.1); /* Increase image brightness */ } .item h2 { - position: absolute; - top: 10%; - left: 50%; - transform: translateX(-50%); - color: white; - font-size: 1.5rem; - background-color: rgba(0, 0, 0, 0.6); - padding: 5px 15px; - border-radius: 5px; - text-align: center; - opacity: 0; - transition: opacity 0.3s ease, transform 0.3s ease; + position: absolute; + top: 10%; + left: 50%; + transform: translateX(-50%); + color: white; + font-size: 1.5rem; + background-color: rgba(0, 0, 0, 0.6); + padding: 5px 15px; + border-radius: 5px; + text-align: center; + opacity: 0; + transition: opacity 0.3s ease, transform 0.3s ease; } .item:hover h2 { - opacity: 1; - transform: translateX(-50%) translateY(-10px); /* Move the title upwards with hover */ + opacity: 1; + transform: translateX(-50%) translateY(-10px); /* Move the title upwards with hover */ } /* Mobile Optimization */ -@media (max-width: 600px) { - header { - font-size: 1.2rem; - } +@media(max-width: 600px) { + header { + font-size: 1.2rem; + } - .item { - height: auto; /* Allow auto height on mobile for better responsiveness */ - width: auto; - } + .item { + height: auto; /* Allow auto height on mobile for better responsiveness */ + width: auto; + } - .grid-container { - grid-template-columns: repeat(1, 1fr); - } + .grid-container { + grid-template-columns: repeat(1, 1fr); + } }