Upload files to "/"
This commit is contained in:
parent
96d8ea6f64
commit
aca45f9808
125
style.css
125
style.css
@ -1,109 +1,40 @@
|
||||
/* style.css */
|
||||
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;
|
||||
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{
|
||||
background-color: #121212;
|
||||
background:#111;
|
||||
display:block;
|
||||
border-radius: 8px;
|
||||
/* Grid background effect dibuat di JS, tapi base color gelap */
|
||||
margin:auto;
|
||||
border:2px solid #555;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
.login-box{
|
||||
width:250px;
|
||||
margin:auto;
|
||||
padding:20px;
|
||||
background:white;
|
||||
border-radius:10px;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
.login-box input{
|
||||
width:100%;
|
||||
margin:5px 0;
|
||||
padding:5px;
|
||||
}
|
||||
|
||||
#status-text {
|
||||
font-size: 2rem;
|
||||
color: #ff0055;
|
||||
text-shadow: 0 0 10px #ff0055;
|
||||
margin-bottom: 20px;
|
||||
.login-box button{
|
||||
width:100%;
|
||||
padding:6px;
|
||||
}
|
||||
|
||||
.score-box {
|
||||
margin-bottom: 20px;
|
||||
table{
|
||||
margin:auto;
|
||||
background:white;
|
||||
padding:10px;
|
||||
border-radius:10px;
|
||||
}
|
||||
.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;
|
||||
td{
|
||||
padding:5px 20px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #0ff;
|
||||
color: #000;
|
||||
box-shadow: 0 0 20px #0ff, 0 0 40px #0ff;
|
||||
.menu a{
|
||||
margin:10px;
|
||||
padding:5px;
|
||||
}
|
||||
|
||||
#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; }
|
||||
Loading…
x
Reference in New Issue
Block a user