2526-web/Kelompok10-intro-Hulio-Lwen-Zagar-Kelvin-Ryver
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upload files to "/"

Browse Source
This commit is contained in:
5803025048 2025-11-30 22:59:30 -05:00
parent 96d8ea6f64
commit aca45f9808
1 changed files with 40 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
style.css
View File

@ -1,109 +1,40 @@
/* style.css */ body{
body { text-align:center;
font-family: 'Orbitron', sans-serif; /* Font futuristik */ font-family:Arial;
background: radial-gradient(circle at center, #1b2735 0%, #090a0f 100%); background:#f2f2f2;
color: white; }
margin: 0; canvas{
height: 100vh; background:#111;
display: flex; display:block;
justify-content: center; margin:auto;
align-items: center; border:2px solid #555;
overflow: hidden; }
} .login-box{
width:250px;
.main-wrapper { margin:auto;
position: relative; padding:20px;
text-align: center; background:white;
} border-radius:10px;
}
.game-title { .login-box input{
font-size: 2.5rem; width:100%;
margin-bottom: 15px; margin:5px 0;
letter-spacing: 3px; padding:5px;
color: #0ff; }
text-shadow: 0 0 10px #0ff, 0 0 20px #0ff; /* Efek Glow Teks */ .login-box button{
} width:100%;
padding:6px;
#game-container { }
position: relative; table{
border-radius: 12px; margin:auto;
padding: 5px; background:white;
background: linear-gradient(45deg, #0ff, #f0f); /* Border gradasi */ padding:10px;
box-shadow: 0 0 30px rgba(0, 255, 255, 0.3); border-radius:10px;
} }
td{
canvas { padding:5px 20px;
background-color: #121212; }
display: block; .menu a{
border-radius: 8px; margin:10px;
/* Grid background effect dibuat di JS, tapi base color gelap */ padding:5px;
} }
/* Tampilan Skor saat main (pojok kiri atas canvas) */
#ingame-score {
position: absolute;
top: 20px;
left: 20px;
font-size: 3rem;
color: rgba(255, 255, 255, 0.1);
font-weight: bold;
pointer-events: none;
}
/* UI Game Over (Glassmorphism) */
#ui-layer {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(5px);
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 8px;
z-index: 10;
}
#status-text {
font-size: 2rem;
color: #ff0055;
text-shadow: 0 0 10px #ff0055;
margin-bottom: 20px;
}
.score-box {
margin-bottom: 20px;
}
.score-box p { margin: 0; font-size: 0.8rem; color: #aaa; }
.score-box span { font-size: 3rem; color: white; }
.btn {
background: transparent;
color: #0ff;
border: 2px solid #0ff;
padding: 12px 30px;
font-family: 'Orbitron', sans-serif;
font-size: 1.2rem;
cursor: pointer;
border-radius: 50px;
transition: 0.3s;
text-transform: uppercase;
box-shadow: 0 0 10px #0ff;
}
.btn:hover {
background: #0ff;
color: #000;
box-shadow: 0 0 20px #0ff, 0 0 40px #0ff;
}
#score-board {
margin-top: 20px;
background: rgba(255, 255, 255, 0.05);
padding: 10px 20px;
border-radius: 50px;
display: inline-block;
border: 1px solid rgba(255, 255, 255, 0.1);
}
#score-board .label { font-size: 0.7rem; color: #888; display: block; }
#high-score-display { font-size: 1.5rem; color: #ffd700; text-shadow: 0 0 5px #ffd700; }