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

133
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;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
} }
canvas{
.main-wrapper { background:#111;
position: relative; display:block;
text-align: center; margin:auto;
border:2px solid #555;
} }
.login-box{
.game-title { width:250px;
font-size: 2.5rem; margin:auto;
margin-bottom: 15px; padding:20px;
letter-spacing: 3px; background:white;
color: #0ff; border-radius:10px;
text-shadow: 0 0 10px #0ff, 0 0 20px #0ff; /* Efek Glow Teks */
} }
.login-box input{
#game-container { width:100%;
position: relative; margin:5px 0;
border-radius: 12px; padding:5px;
padding: 5px;
background: linear-gradient(45deg, #0ff, #f0f); /* Border gradasi */
box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
} }
.login-box button{
canvas { width:100%;
background-color: #121212; padding:6px;
display: block;
border-radius: 8px;
/* Grid background effect dibuat di JS, tapi base color gelap */
} }
table{
/* Tampilan Skor saat main (pojok kiri atas canvas) */ margin:auto;
#ingame-score { background:white;
position: absolute; padding:10px;
top: 20px; border-radius:10px;
left: 20px;
font-size: 3rem;
color: rgba(255, 255, 255, 0.1);
font-weight: bold;
pointer-events: none;
} }
td{
/* UI Game Over (Glassmorphism) */ padding:5px 20px;
#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;
} }
.menu a{
#status-text { margin:10px;
font-size: 2rem; padding:5px;
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; }