diff --git a/style.css b/style.css index f8ff9de..8256e44 100644 --- a/style.css +++ b/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; -} - -.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; - display: block; - border-radius: 8px; - /* Grid background effect dibuat di JS, tapi base color gelap */ -} - -/* 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; } \ No newline at end of file +body{ + text-align:center; + font-family:Arial; + background:#f2f2f2; +} +canvas{ + background:#111; + display:block; + margin:auto; + border:2px solid #555; +} +.login-box{ + width:250px; + margin:auto; + padding:20px; + background:white; + border-radius:10px; +} +.login-box input{ + width:100%; + margin:5px 0; + padding:5px; +} +.login-box button{ + width:100%; + padding:6px; +} +table{ + margin:auto; + background:white; + padding:10px; + border-radius:10px; +} +td{ + padding:5px 20px; +} +.menu a{ + margin:10px; + padding:5px; +} \ No newline at end of file