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

guess my number Game was added

Browse source
This commit is contained in:
sageTheDM 2025-01-04 21:00:39 +01:00
parent 6a9c287b69
commit 08a58b90d2
6 changed files with 348 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

184
secret/guessMyNumber/styles.css Normal file
View file

@ -0,0 +1,184 @@
/* Base Reset */
body, html {
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: 0px 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;
}
}
/* 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 0px 4px 8px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.game {
text-align: center;
width: 90%;
}
/* Titles */
h1 {
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;
}
/* Messages */
.message, .score, .highScore {
font-size: 1.4rem; /* Increased font size */
margin: 5px 0;
}
.description,
.description p{
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;
}
/* D-Pad */
.dpad {
position: relative;
width: 120px; /* Increased size */
height: 120px; /* Increased size */
}
/* Base Styling for D-Pad Buttons */
.dpad-btn {
background-color: #0f380f;
color: #9bbc0f;
border: 2px solid #9cbc0f00;
border-radius: 5px;
position: absolute;
width: 40px;
height: 40px;
font-size: 1.5rem; /* Increased size */
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.dpad-btn.up {
top: 0;
left: 50%;
transform: translateX(-50%);
}
.dpad-btn.down {
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.dpad-btn.left {
top: 50%;
left: 0;
transform: translateY(-50%);
}
.dpad-btn.right {
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;
border-radius: 5px;
}
/* A and B Buttons */
.action-buttons {
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;
}
.btn:hover {
background-color: #9bbc0f;
color: #0f380f;
}
.btn:active {
transform: scale(0.9);
}