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

125
style.css
View File

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