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

snake framework

Browse source
This commit is contained in:
sageTheDM 2025-01-05 01:59:00 +01:00
parent 26fabc37e9
commit 8478bc66e7
4 changed files with 380 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

185
secret/snake/styles.css Normal file
View file

@ -0,0 +1,185 @@
body,
html {
margin: 0;
padding: 0;
font-family: monospace;
background-color: #3a2d56;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.gameboy {
background-color: #5900ff;
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;
}
}
.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;
}
h1 {
font-size: 2rem;
margin-bottom: 10px;
text-transform: uppercase;
align-items: center;
justify-content: center;
text-align: center;
color: #9bbc0f;
}
.description,
.description p,
.description h1 {
align-items: center;
justify-content: center;
text-align: center;
font-size: 1.2rem;
margin: 0 auto;
padding: 0 auto;
color: #ffffff;
}
.controls {
margin-top: 20px;
display: flex;
justify-content: space-between;
width: 80%;
align-items: center;
}
.dpad {
position: relative;
width: 120px;
height: 120px;
}
.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;
}
.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%);
}
.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;
}
.action-buttons {
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;
}
.btn:hover {
background-color: #9bbc0f;
color: #0f380f;
}
.btn:active {
transform: scale(0.9);
}
.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;
}
.start-btn:hover {
background-color: #9bbc0f;
color: #0f380f;
}
.start-btn:active {
transform: scale(0.9);
}