From 5dcb2fef1db95a5954abb2cd0d7890e1473b75da Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Sat, 4 Jan 2025 16:01:14 +0100 Subject: [PATCH 1/3] removed the dead links --- secret/index.html | 12 ++++++------ webGames/index.html | 10 +++++----- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/secret/index.html b/secret/index.html index 0ac1ce7..dd3016e 100644 --- a/secret/index.html +++ b/secret/index.html @@ -21,42 +21,42 @@

Your goal is to survive as long as possible while scoring points!

- + Image can't be displayed

Secret Blackjack

Try to beat the dealer by getting a hand value as close to 21 as possible without going over.

- + Image can't be displayed

Snake

Guide the snake to eat food and grow longer while avoiding collisions with the walls and itself.

- + Image can't be displayed

Solitaire

A classic card game where the objective is to move all cards to foundation piles in ascending order.

- + Image can't be displayed

Minesweeper

Uncover squares on a grid while avoiding hidden mines, using numbers to deduce safe spots.

- + Image can't be displayed

Guess My Number

A simple game where you try to guess a randomly chosen number within a certain range.

- + Image can't be displayed

Endless Runner

diff --git a/webGames/index.html b/webGames/index.html index 93ae6a9..35c69b5 100644 --- a/webGames/index.html +++ b/webGames/index.html @@ -13,35 +13,35 @@
- + Image can't be displayed

Snake

Guide the snake to eat food and grow longer while avoiding collisions with the walls and itself.

- + Image can't be displayed

Solitaire

A classic card game where the objective is to move all cards to foundation piles in ascending order.

- + Image can't be displayed

Minesweeper

Uncover squares on a grid while avoiding hidden mines, using numbers to deduce safe spots.

- + Image can't be displayed

Guess My Number

A simple game where you try to guess a randomly chosen number within a certain range.

- + Image can't be displayed

Endless Runner

From 650980c8d247f7662f65ec761d4976e7d98cd0e2 Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Sat, 4 Jan 2025 16:28:09 +0100 Subject: [PATCH 2/3] added something --- secret/index.html | 12 ++--- secret/styles.css | 131 ++++++++++++++++++++++++++++++++-------------- 2 files changed, 99 insertions(+), 44 deletions(-) diff --git a/secret/index.html b/secret/index.html index dd3016e..912d0f8 100644 --- a/secret/index.html +++ b/secret/index.html @@ -21,42 +21,42 @@

Your goal is to survive as long as possible while scoring points!

- + Image can't be displayed

Secret Blackjack

Try to beat the dealer by getting a hand value as close to 21 as possible without going over.

- + Image can't be displayed

Snake

Guide the snake to eat food and grow longer while avoiding collisions with the walls and itself.

- + Image can't be displayed

Solitaire

A classic card game where the objective is to move all cards to foundation piles in ascending order.

- + Image can't be displayed

Minesweeper

Uncover squares on a grid while avoiding hidden mines, using numbers to deduce safe spots.

- + Image can't be displayed

Guess My Number

A simple game where you try to guess a randomly chosen number within a certain range.

- + Image can't be displayed

Endless Runner

diff --git a/secret/styles.css b/secret/styles.css index 12800c5..8230b8b 100644 --- a/secret/styles.css +++ b/secret/styles.css @@ -1,86 +1,142 @@ -/* Reset and box-sizing */ * { margin: 0; padding: 0; box-sizing: border-box; } -/* General Styles */ body { - font-family: Arial, sans-serif; - background-color: #282c34; - color: #ffffff; + font-family: 'Courier New', Courier, monospace; + background-color: #0d0d0d; + color: #b0b0b0; margin: 0; + line-height: 1.6; + background-size: 20px 20px; /* Adjust size for tape appearance */ } header { - background-color: #4CAF50; - color: white; + background-color: #222; + color: #b0b0b0; text-align: center; padding: 1em 0; - font-size: 1.5rem; + 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; + opacity: 1; + } + 20% { + text-shadow: + 0 0 3px #ffcc00, + 0 0 7px #ffcc00, + 0 0 10px #ffcc00, + 0 0 15px #ffcc00, + 0 0 20px #ffcc00; + opacity: 0.9; + } + 40% { + text-shadow: + 0 0 5px #ffcc00, + 0 0 15px #ffcc00, + 0 0 25px #ffcc00; + opacity: 1; + } + 60% { + text-shadow: + 0 0 5px #ffcc00, + 0 0 10px #ffcc00, + 0 0 15px #ffcc00, + 0 0 20px #ffcc00, + 0 0 30px #ffcc00; + opacity: 0.8; + } + 80% { + text-shadow: + 0 0 3px #ffcc00, + 0 0 7px #ffcc00, + 0 0 10px #ffcc00; + opacity: 1; + } + 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; + opacity: 0.9; + } } footer { - background-color: #333; - color: white; + background-color: #111; + color: #b0b0b0; 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 */ + gap: 20px; + padding: 20px; } -/* Game Item */ .item { position: relative; - background-color: #444; + background-color: #1a1a1a; border-radius: 10px; overflow: hidden; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + 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%; /* Ensure it takes full width of the column */ - height: 400px; /* Set a fixed height for all items */ + width: 100%; + height: 400px; display: flex; - flex-direction: column; /* Stack children vertically */ + flex-direction: column; } -/* Ensure the image takes the top part of the card */ .item img { width: 100%; - height: 100%; /* Set a height for the image */ + height: 100%; object-fit: cover; + filter: brightness(0.6); } .item .description { padding: 30px; font-size: 1rem; - color: #ddd; - background-color: rgba(0, 0, 0, 0.5); + color: #ccc; + background-color: rgba(0, 0, 0, 0.8); border-radius: 0 0 10px 10px; - flex-grow: 1; /* Allow description to take remaining space */ + flex-grow: 1; } p { 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); + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.9); + filter: brightness(1.1); } .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); + filter: brightness(1.1); } .item h2 { @@ -88,9 +144,9 @@ p { top: 10%; left: 50%; transform: translateX(-50%); - color: white; - font-size: 1.5rem; - background-color: rgba(0, 0, 0, 0.6); + color: #ffffff; + font-size: 1.8rem; + background-color: rgba(0, 0, 0, 0.9); padding: 5px 15px; border-radius: 5px; text-align: center; @@ -100,21 +156,20 @@ p { .item:hover h2 { opacity: 1; - transform: translateX(-50%) translateY(-10px); /* Move the title upwards with hover */ + transform: translateX(-50%) translateY(-10px); } -/* Mobile Optimization */ -@media (max-width: 600px) { +@media (max-width: 800px) { header { - font-size: 1.2rem; + font-size: 1.5rem; } .item { - height: auto; /* Allow auto height on mobile for better responsiveness */ + height: auto; width: auto; } - .grid-container{ + .grid-container { grid-template-columns: repeat(1, 1fr); } } From ec1f3fb11b716f67313a1bbf77474a5cad0d024f Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Sat, 4 Jan 2025 16:40:26 +0100 Subject: [PATCH 3/3] bug fixes --- secret/styles.css | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/secret/styles.css b/secret/styles.css index 8230b8b..c0a914f 100644 --- a/secret/styles.css +++ b/secret/styles.css @@ -10,11 +10,18 @@ body { color: #b0b0b0; margin: 0; line-height: 1.6; + background-image: repeating-linear-gradient( + 45deg, + #ffcc00 0%, + #ffcc00 10%, + #0d0d0d 10%, + #0d0d0d 20% + ); background-size: 20px 20px; /* Adjust size for tape appearance */ } header { - background-color: #222; + background-color: #222; /* Fully opaque background */ color: #b0b0b0; text-align: center; padding: 1em 0; @@ -34,7 +41,6 @@ header { 0 0 30px #ffcc00, 0 0 40px #ffcc00, 0 0 50px #ffcc00; - opacity: 1; } 20% { text-shadow: @@ -43,14 +49,12 @@ header { 0 0 10px #ffcc00, 0 0 15px #ffcc00, 0 0 20px #ffcc00; - opacity: 0.9; } 40% { text-shadow: 0 0 5px #ffcc00, 0 0 15px #ffcc00, 0 0 25px #ffcc00; - opacity: 1; } 60% { text-shadow: @@ -59,14 +63,12 @@ header { 0 0 15px #ffcc00, 0 0 20px #ffcc00, 0 0 30px #ffcc00; - opacity: 0.8; } 80% { text-shadow: 0 0 3px #ffcc00, 0 0 7px #ffcc00, 0 0 10px #ffcc00; - opacity: 1; } 100% { text-shadow: @@ -76,7 +78,6 @@ header { 0 0 20px #ffcc00, 0 0 30px #ffcc00, 0 0 40px #ffcc00; - opacity: 0.9; } }