interstellar_development/interstellar_website
3
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request 'updates' (#19) from sageTheDm/pages:main into main

Browse source 
Reviewed-on: https://interstellardevelopment.org/code/code/interstellar_development/interstellar_website/pulls/19
This commit is contained in:
Patrick 2025-01-04 16:41:51 +01:00
commit ca6b00a6d4
3 changed files with 105 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
secret/index.html
View file

@ -21,42 +21,42 @@
<p>Your goal is to survive as long as possible while scoring points!</p> <p>Your goal is to survive as long as possible while scoring points!</p>
</div> </div>
</a> </a>
<a href="link_to_blackjack_game" target="_blank" class="item"> <a href="#" target="_blank" class="item">
<img src="images/blackjack.jpg" alt="Image can't be displayed"> <img src="images/blackjack.jpg" alt="Image can't be displayed">
<h2>Secret Blackjack</h2> <h2>Secret Blackjack</h2>
<div class="description"> <div class="description">
<p>Try to beat the dealer by getting a hand value as close to 21 as possible without going over.</p> <p>Try to beat the dealer by getting a hand value as close to 21 as possible without going over.</p>
</div> </div>
</a> </a>
<a href="link_to_snake_game" target="_blank" class="item"> <a href="#" target="_blank" class="item">
<img src="images/snake.png" alt="Image can't be displayed"> <img src="images/snake.png" alt="Image can't be displayed">
<h2>Snake</h2> <h2>Snake</h2>
<div class="description"> <div class="description">
<p>Guide the snake to eat food and grow longer while avoiding collisions with the walls and itself.</p> <p>Guide the snake to eat food and grow longer while avoiding collisions with the walls and itself.</p>
</div> </div>
</a> </a>
<a href="link_to_solitaire_game" target="_blank" class="item"> <a href="#" target="_blank" class="item">
<img src="images/solitaire.png" alt="Image can't be displayed"> <img src="images/solitaire.png" alt="Image can't be displayed">
<h2>Solitaire</h2> <h2>Solitaire</h2>
<div class="description"> <div class="description">
<p>A classic card game where the objective is to move all cards to foundation piles in ascending order.</p> <p>A classic card game where the objective is to move all cards to foundation piles in ascending order.</p>
</div> </div>
</a> </a>
<a href="link_to_minesweeper_game" target="_blank" class="item"> <a href="#" target="_blank" class="item">
<img src="images/minesweeper.png" alt="Image can't be displayed"> <img src="images/minesweeper.png" alt="Image can't be displayed">
<h2>Minesweeper</h2> <h2>Minesweeper</h2>
<div class="description"> <div class="description">
<p>Uncover squares on a grid while avoiding hidden mines, using numbers to deduce safe spots.</p> <p>Uncover squares on a grid while avoiding hidden mines, using numbers to deduce safe spots.</p>
</div> </div>
</a> </a>
<a href="link_to_guess_my_number_game" target="_blank" class="item"> <a href="#" target="_blank" class="item">
<img src="images/number.jpeg" alt="Image can't be displayed"> <img src="images/number.jpeg" alt="Image can't be displayed">
<h2>Guess My Number</h2> <h2>Guess My Number</h2>
<div class="description"> <div class="description">
<p>A simple game where you try to guess a randomly chosen number within a certain range.</p> <p>A simple game where you try to guess a randomly chosen number within a certain range.</p>
</div> </div>
</a> </a>
<a href="link_to_endless_runner_game" target="_blank" class="item"> <a href="#" target="_blank" class="item">
<img src="images/endless_runner.png" alt="Image can't be displayed"> <img src="images/endless_runner.png" alt="Image can't be displayed">
<h2>Endless Runner</h2> <h2>Endless Runner</h2>
<div class="description"> <div class="description">

130
secret/styles.css
View file

@ -1,86 +1,143 @@
/* Reset and box-sizing */
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
/* General Styles */
body { body {
font-family: Arial, sans-serif; font-family: 'Courier New', Courier, monospace;
background-color: #282c34; background-color: #0d0d0d;
color: #ffffff; color: #b0b0b0;
margin: 0; 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 { header {
background-color: #4CAF50; background-color: #222; /* Fully opaque background */
color: white; color: #b0b0b0;
text-align: center; text-align: center;
padding: 1em 0; 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;
}
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 { footer {
background-color: #333; background-color: #111;
color: white; color: #b0b0b0;
text-align: center; text-align: center;
padding: 1em 0; padding: 1em 0;
margin-top: 20px; margin-top: 20px;
} }
/* Grid Styles */
.grid-container { .grid-container {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 20px; /* Space between items */ gap: 20px;
padding: 20px; /* Space around the grid */ padding: 20px;
} }
/* Game Item */
.item { .item {
position: relative; position: relative;
background-color: #444; background-color: #1a1a1a;
border-radius: 10px; border-radius: 10px;
overflow: hidden; 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; transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
width: 100%; /* Ensure it takes full width of the column */ width: 100%;
height: 400px; /* Set a fixed height for all items */ height: 400px;
display: flex; display: flex;
flex-direction: column; /* Stack children vertically */ flex-direction: column;
} }
/* Ensure the image takes the top part of the card */
.item img { .item img {
width: 100%; width: 100%;
height: 100%; /* Set a height for the image */ height: 100%;
object-fit: cover; object-fit: cover;
filter: brightness(0.6);
} }
.item .description { .item .description {
padding: 30px; padding: 30px;
font-size: 1rem; font-size: 1rem;
color: #ddd; color: #ccc;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.8);
border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px;
flex-grow: 1; /* Allow description to take remaining space */ flex-grow: 1;
} }
p { p {
text-decoration: none; text-decoration: none;
} }
/* Hover effect for scaling and glowing */
.item:hover { .item:hover {
transform: scale(1.05); transform: scale(1.05);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.9);
filter: brightness(1.2); filter: brightness(1.1);
} }
.item:hover img { .item:hover img {
transform: scale(1.1); /* Slight zoom-in effect for the image */ transform: scale(1.1);
filter: brightness(1.1); /* Increase image brightness */ filter: brightness(1.1);
} }
.item h2 { .item h2 {
@ -88,9 +145,9 @@ p {
top: 10%; top: 10%;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
color: white; color: #ffffff;
font-size: 1.5rem; font-size: 1.8rem;
background-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.9);
padding: 5px 15px; padding: 5px 15px;
border-radius: 5px; border-radius: 5px;
text-align: center; text-align: center;
@ -100,17 +157,16 @@ p {
.item:hover h2 { .item:hover h2 {
opacity: 1; opacity: 1;
transform: translateX(-50%) translateY(-10px); /* Move the title upwards with hover */ transform: translateX(-50%) translateY(-10px);
} }
/* Mobile Optimization */ @media (max-width: 800px) {
@media (max-width: 600px) {
header { header {
font-size: 1.2rem; font-size: 1.5rem;
} }
.item { .item {
height: auto; /* Allow auto height on mobile for better responsiveness */ height: auto;
width: auto; width: auto;
} }

10
webGames/index.html
View file

@ -13,35 +13,35 @@
<main> <main>
<div class="grid-container"> <div class="grid-container">
<a href="link_to_snake_game" target="_blank" class="item"> <a href="" target="_blank" class="item">
<img src="../secret/../secret/images/snake.png" alt="Image can't be displayed"> <img src="../secret/../secret/images/snake.png" alt="Image can't be displayed">
<h2>Snake</h2> <h2>Snake</h2>
<div class="description"> <div class="description">
<p>Guide the snake to eat food and grow longer while avoiding collisions with the walls and itself.</p> <p>Guide the snake to eat food and grow longer while avoiding collisions with the walls and itself.</p>
</div> </div>
</a> </a>
<a href="link_to_solitaire_game" target="_blank" class="item"> <a href="" target="_blank" class="item">
<img src="../secret/images/solitaire.png" alt="Image can't be displayed"> <img src="../secret/images/solitaire.png" alt="Image can't be displayed">
<h2>Solitaire</h2> <h2>Solitaire</h2>
<div class="description"> <div class="description">
<p>A classic card game where the objective is to move all cards to foundation piles in ascending order.</p> <p>A classic card game where the objective is to move all cards to foundation piles in ascending order.</p>
</div> </div>
</a> </a>
<a href="link_to_minesweeper_game" target="_blank" class="item"> <a href="" target="_blank" class="item">
<img src="../secret/images/minesweeper.png" alt="Image can't be displayed"> <img src="../secret/images/minesweeper.png" alt="Image can't be displayed">
<h2>Minesweeper</h2> <h2>Minesweeper</h2>
<div class="description"> <div class="description">
<p>Uncover squares on a grid while avoiding hidden mines, using numbers to deduce safe spots.</p> <p>Uncover squares on a grid while avoiding hidden mines, using numbers to deduce safe spots.</p>
</div> </div>
</a> </a>
<a href="link_to_guess_my_number_game" target="_blank" class="item"> <a href="" target="_blank" class="item">
<img src="../secret/images/number.jpeg" alt="Image can't be displayed"> <img src="../secret/images/number.jpeg" alt="Image can't be displayed">
<h2>Guess My Number</h2> <h2>Guess My Number</h2>
<div class="description"> <div class="description">
<p>A simple game where you try to guess a randomly chosen number within a certain range.</p> <p>A simple game where you try to guess a randomly chosen number within a certain range.</p>
</div> </div>
</a> </a>
<a href="link_to_endless_runner_game" target="_blank" class="item"> <a href="" target="_blank" class="item">
<img src="../secret/images/endless_runner.png" alt="Image can't be displayed"> <img src="../secret/images/endless_runner.png" alt="Image can't be displayed">
<h2>Endless Runner</h2> <h2>Endless Runner</h2>
<div class="description"> <div class="description">