diff --git a/cs.css b/cs.css new file mode 100644 index 0000000..4cef96a --- /dev/null +++ b/cs.css @@ -0,0 +1,195 @@ +* { + user-select: none; + -webkit-tap-highlight-color: transparent; +} + +body { + margin: 0; + min-height: 100vh; + background: radial-gradient(circle at 20% 30%, #03030f, #000000); + display: flex; + justify-content: center; + align-items: center; + font-family: 'Orbitron', 'Segoe UI', 'Courier New', monospace; + overflow: hidden; +} + +.game-container { + background: #0a0c1a; + border-radius: 28px; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.05); + padding: 12px; + border: 1px solid #2a3f6e; +} + +canvas { + display: block; + margin: 0 auto; + border-radius: 20px; + box-shadow: 0 0 0 2px #1e2a3a, 0 10px 25px -5px black; + cursor: crosshair; +} + +.info-panel { + margin-top: 16px; + display: flex; + flex-wrap: wrap; + gap: 14px; + justify-content: space-between; + background: rgba(8, 12, 25, 0.85); + backdrop-filter: blur(12px); + border-radius: 20px; + padding: 12px 20px; + border: 1px solid #2e4b7c; + color: #b7e4ff; + text-shadow: 0 0 3px #0a5f8a; +} + +.stats { + display: flex; + gap: 28px; + flex-wrap: wrap; + font-weight: bold; +} + +.stat { + background: #010314; + padding: 6px 14px; + border-radius: 40px; + border-left: 3px solid #3e8ed0; + font-size: 0.9rem; +} + +.stat span { + color: #ffd966; + font-weight: bold; + font-size: 1.1rem; +} + +button { + background: #162b40; + border: none; + color: #c0e4ff; + font-family: monospace; + font-weight: bold; + padding: 6px 18px; + border-radius: 60px; + font-size: 0.8rem; + cursor: pointer; + transition: 0.2s; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); + letter-spacing: 1px; +} + +button:hover { + background: #2a577a; + transform: scale(0.96); + color: white; + box-shadow: 0 0 8px #3f95cf; +} + +.action-group { + display: flex; + gap: 12px; + align-items: center; +} + +.status-msg { + background: #000000aa; + border-radius: 20px; + padding: 5px 15px; + font-size: 0.75rem; + font-family: monospace; + max-width: 260px; + border-right: 2px solid #2e8bc0; +} + +.system-info { + background: #03071cee; + border-radius: 16px; + padding: 8px 14px; + margin-top: 10px; + font-size: 0.7rem; + max-width: 380px; + border-left: 3px solid #ffaa55; +} + +.system-info h4 { + margin: 0 0 5px 0; + font-size: 0.8rem; + color: #ffcc88; +} + +.planet-list { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 6px; +} + +.planet-badge { + background: #1f2a44; + border-radius: 20px; + padding: 4px 12px; + font-size: 0.7rem; + cursor: pointer; + transition: 0.1s; + display: flex; + align-items: center; + gap: 6px; +} + +.planet-badge:hover { + background: #3e5a8f; + transform: scale(1.02); +} + +/* Панель настроек */ +.settings-panel { + background: #05161fe6; + border-radius: 20px; + padding: 10px 16px; + margin-top: 10px; + display: flex; + flex-wrap: wrap; + gap: 20px; + align-items: center; + font-size: 0.7rem; + border: 1px solid #2e6b8f; +} + +.setting-item { + display: flex; + align-items: center; + gap: 12px; + background: #02101a; + padding: 4px 12px; + border-radius: 40px; +} + +.setting-item label { + font-weight: bold; + color: #aae0ff; +} + +input[type="range"] { + width: 140px; + background: #1f4a6e; + height: 3px; + border-radius: 5px; +} + +.setting-value { + background: black; + padding: 2px 8px; + border-radius: 20px; + min-width: 40px; + text-align: center; + font-family: monospace; +} + +.small-btn { + background: #2f5f7a; + padding: 2px 10px; + font-size: 0.7rem; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..5b52b6e --- /dev/null +++ b/index.html @@ -0,0 +1,69 @@ + + + +
+ + +