try to fix this spaghetti of a code
This commit is contained in:
Frederik Spirgi
+6
-336
@@ -1,336 +1,6 @@
|
||||
body {
|
||||
background: radial-gradient(circle at top, #111, #000);
|
||||
color: #0f0;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: "♠ ♥ Welcome to Gambling API ♦ ♣";
|
||||
font-size: 24px;
|
||||
color: #0f0;
|
||||
margin-bottom: 40px;
|
||||
display: block;
|
||||
text-shadow: 0 0 5px #0f0, 0 0 10px #0f0;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #0f0;
|
||||
color: #000;
|
||||
border: none;
|
||||
padding: 15px 30px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 10px #0f0, 0 0 5px #0f0 inset;
|
||||
transition: background 0.2s ease-in-out, transform 0.2s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #1f1;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
button.logout {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.balance {
|
||||
margin-top: 20px;
|
||||
color: #0f0;
|
||||
text-shadow: 0 0 5px #0f0, 0 0 10px #0f0;
|
||||
}
|
||||
|
||||
.lobby-buttons {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.host-form {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
justify-items: center;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.lobby-visibility {
|
||||
color: #fff;
|
||||
font-family: monospace;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-shadow: 0 0 3px #0f0;
|
||||
}
|
||||
|
||||
.lobby-visibility label {
|
||||
border: 1px solid rgba(0, 255, 0, 0.5);
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.lobby-visibility input {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
accent-color: #0f0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.lobby-room h2 {
|
||||
color: #0f0;
|
||||
font-size: 20px;
|
||||
margin-bottom: 20px;
|
||||
text-shadow: 0 0 5px #0f0;
|
||||
}
|
||||
|
||||
#player-list {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.join-browser {
|
||||
margin-top: 20px;
|
||||
width: min(520px, calc(100vw - 32px));
|
||||
background: rgba(0, 0, 0, 0.78);
|
||||
border: 2px solid #0f0;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 10px #0f0;
|
||||
padding: 18px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.join-code-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#join-form:not(.hidden) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#join-form input {
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
border: 2px solid #0f0;
|
||||
background-color: #111;
|
||||
color: #0f0;
|
||||
font-size: 16px;
|
||||
box-shadow: 0 0 5px #0f0 inset;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.browser-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-top: 16px;
|
||||
border-top: 1px solid rgba(0, 255, 0, 0.35);
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
.browser-header h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
color: #0f0;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.browser-header button,
|
||||
.public-lobby button {
|
||||
padding: 8px 14px;
|
||||
font-size: 13px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.public-lobbies {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin-top: 12px;
|
||||
max-height: 220px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.public-lobbies p {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.public-lobby {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
border: 1px solid rgba(0, 255, 0, 0.45);
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
background: rgba(0, 255, 0, 0.06);
|
||||
}
|
||||
|
||||
.public-lobby-info {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
color: #fff;
|
||||
font-family: monospace;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.public-lobby-info strong {
|
||||
color: #0f0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.public-lobby-info span {
|
||||
font-size: 13px;
|
||||
color: #d8ffd8;
|
||||
}
|
||||
|
||||
#join-form button {
|
||||
background-color: #0f0;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: red;
|
||||
margin-top: 10px;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 3px red;
|
||||
}
|
||||
|
||||
#matrix-canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.leaderboard {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 20px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border: 2px solid #0f0;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
width: 200px;
|
||||
color: #0f0;
|
||||
font-family: monospace;
|
||||
box-shadow: 0 0 10px #0f0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.leaderboard h3 {
|
||||
margin-top: 0;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
text-shadow: 0 0 5px #0f0;
|
||||
}
|
||||
|
||||
.leaderboard ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.leaderboard li {
|
||||
margin: 5px 0;
|
||||
font-size: 14px;
|
||||
text-shadow: 0 0 3px #0f0;
|
||||
}
|
||||
|
||||
.leaderboard li.you {
|
||||
font-weight: bold;
|
||||
color: #ff0;
|
||||
text-shadow: 0 0 5px #ff0;
|
||||
}
|
||||
|
||||
.your-rank {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-shadow: 0 0 3px #0f0;
|
||||
}
|
||||
|
||||
.lobby-room {
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border: 2px solid #0f0;
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
margin-top: 40px;
|
||||
width: 400px;
|
||||
text-align: center;
|
||||
box-shadow: 0 0 10px #0f0;
|
||||
}
|
||||
|
||||
.lobby-header {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.leave-button {
|
||||
background-color: #f00;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
padding: 8px 12px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 5px red;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, transform 0.2s;
|
||||
}
|
||||
|
||||
.leave-button:hover {
|
||||
background-color: #c00;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.start-game {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.start-game:disabled {
|
||||
background-color: #163016;
|
||||
color: #67a667;
|
||||
cursor: not-allowed;
|
||||
box-shadow: 0 0 5px #0f0 inset;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.lobby-room { width: min(460px, calc(100vw - 32px)); overflow-wrap: anywhere; }
|
||||
body { padding: 72px 16px 24px; gap: 8px; }
|
||||
@media (max-width: 1000px) {
|
||||
body { justify-content: flex-start; }
|
||||
.leaderboard { position: static; width: min(460px, 100%); order: 10; margin-top: 24px; }
|
||||
body::before { text-align: center; font-size: 20px; margin-bottom: 12px; }
|
||||
.join-code-row { flex-wrap: wrap; }
|
||||
#join-form input { width: 100%; min-width: 0; }
|
||||
.lobby-visibility { flex-wrap: wrap; justify-content: center; }
|
||||
.lobby-header { position: static; text-align: right; }
|
||||
}
|
||||
:root { --matrix-rain:#55f570; } body { min-height:100vh; margin:0; padding:0 24px; color:#e6ffe9; background:#040604; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; } #matrix-canvas { position:fixed; inset:0; z-index:-1; width:100%; height:100%; opacity:.15; pointer-events:none; }.app-header { width:min(1120px,100%); min-height:72px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid #1c5727; }.wordmark { color:#f1fff2; text-decoration:none; font-weight:800; letter-spacing:-.06em; }.wordmark span { color:#56ed70; }.header-status { color:#7fc889; font-size:11px; letter-spacing:.06em; }.status-dot { display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:#54f570; box-shadow:0 0 9px #54f570; }.logout,.leave-button { border:1px solid #477d4f; background:transparent; color:#a3e9ac; padding:8px 11px; font:12px inherit; cursor:pointer; }
|
||||
.menu-shell { width:min(1120px,100%); min-height:calc(100vh - 72px); margin:auto; display:grid; grid-template-columns:260px minmax(0,1fr); gap:clamp(30px,9vw,120px); align-items:center; }.leaderboard { background:#080d08; border:1px solid #2b7036; padding:20px; box-shadow:0 0 22px rgba(35,203,62,.1); }.panel-label { margin:0; color:#63c870; font-size:10px; letter-spacing:.13em; text-transform:uppercase; }.leaderboard h3 { margin:8px 0 16px; color:#8aff9a; font-size:17px; }.leaderboard ul { list-style:none; padding:0; margin:0; border-top:1px solid #1b4822; }.leaderboard li { padding:10px 0; border-bottom:1px solid #1b4822; color:#c4e6c8; font-size:13px; }.leaderboard li.you { color:#ffdc72; }.your-rank { margin-top:14px; color:#72d680; font-size:12px; }
|
||||
.command-center { max-width:540px; }.command-center h1 { margin:12px 0 28px; color:#effff1; font-size:clamp(36px,6vw,62px); letter-spacing:-.08em; }.easter-open { color:#8aff9c; outline:1px dashed #55f570; outline-offset:8px; }.cursor { color:#55f570; animation:blink 1s step-end infinite; } .balance { display:grid; gap:6px; padding:17px 0; border-top:1px solid #326d3b; border-bottom:1px solid #326d3b; }.balance>span { color:#80be87; font-size:11px; letter-spacing:.12em; }.balance strong { color:#70f887; font-size:34px; letter-spacing:-.05em; }.lobby-buttons { display:flex; gap:10px; margin:24px 0; }
|
||||
.secret-cue { position:fixed; z-index:21; top:50%; left:50%; color:#8aff9c; font:700 0/1 ui-monospace,SFMono-Regular,Consolas,monospace; text-shadow:0 0 24px #55f570; transform:translate(-50%,-50%); pointer-events:none; }.secret-cue-medium { font-size:clamp(90px,20vw,200px); animation:secret-letter 1s ease-out forwards; }.secret-cue-strong { font-size:clamp(150px,31vw,320px); animation:secret-letter 1s ease-out forwards; }.secret-flash { position:fixed; z-index:20; inset:0; pointer-events:none; opacity:0; background:rgba(122,255,145,.5); }.secret-flash-active { animation:secret-flash .28s ease-out forwards; }.secret-shake { animation:secret-shake .18s linear; }.secret-shake-strong { animation:secret-shake-big .38s linear; } @keyframes secret-letter { 0% { opacity:0; transform:translate(-50%,-50%) scale(.6); } 18% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.1); } } @keyframes secret-flash { to { opacity:0; } } @keyframes secret-shake { 25% { transform:translateX(2px); } 50% { transform:translateX(-3px); } 75% { transform:translateX(2px); } } @keyframes secret-shake-big { 20% { transform:translateX(8px) rotate(.2deg); } 45% { transform:translateX(-10px) rotate(-.2deg); } 70% { transform:translateX(6px); } } @media (prefers-reduced-motion:reduce) { .secret-cue,.secret-shake,.secret-shake-strong,.secret-flash-active { animation:none; } }
|
||||
button { min-height:44px; border:1px solid #52ee6b; background:#58ed70; color:#041005; padding:10px 16px; font:700 13px ui-monospace,SFMono-Regular,Consolas,monospace; cursor:pointer; letter-spacing:.04em; transition:transform .15s,box-shadow .15s,background .15s; } button:hover { transform:translateY(-2px); background:#8aff9c; box-shadow:0 0 16px rgba(82,242,106,.35); } button:disabled { opacity:.5; cursor:not-allowed; transform:none; }.secondary-action { background:#0b160c; color:#8aff9b; }.secondary-action:hover { background:#112914; }.host-form,.join-browser,.lobby-room { background:#080d08; border:1px solid #2d7437; padding:18px; box-shadow:0 0 20px rgba(32,187,56,.1); }.host-form { display:grid; gap:14px; }.lobby-visibility { display:flex; gap:10px; flex-wrap:wrap; color:#c7e5ca; font-size:12px; }.lobby-visibility label { border:1px solid #2d7437; padding:9px; cursor:pointer; }.lobby-visibility input { accent-color:#55f570; }.join-browser { display:grid; gap:16px; }.join-code-row { display:flex; gap:8px; }.join-code-row input { flex:1; min-width:0; background:#040604; border:1px solid #367d41; color:#dfffff; padding:11px; font:14px inherit; }.browser-header { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #214d28; padding-top:14px; }.browser-header h2 { margin:0; color:#8aff9a; font-size:15px; }.public-lobbies { display:grid; gap:7px; }.public-lobby { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px; border:1px solid #234e2b; color:#c4e6c8; font-size:12px; }.public-lobby button { min-height:34px; padding:6px 10px; }.error-message { margin-top:12px; color:#ff7986; font-size:12px; }.lobby-room { margin-top:12px; }.lobby-header { display:flex; justify-content:flex-end; }.lobby-room h2 { color:#82f793; font-size:15px; overflow-wrap:anywhere; }.lobby-room p { color:#c6e9ca; font-size:13px; }.start-game { width:100%; margin-top:10px; } @keyframes blink { 50% { opacity:0; } }
|
||||
@media(max-width:760px) { body { padding:0 16px; }.app-header { min-height:62px; }.header-status { display:none; }.menu-shell { min-height:0; padding:44px 0; grid-template-columns:1fr; gap:28px; }.leaderboard { order:2; }.command-center { max-width:none; }.command-center h1 { font-size:44px; }.lobby-buttons { flex-direction:column; }.lobby-buttons button { width:100%; }.join-code-row { flex-wrap:wrap; }.join-code-row button { width:100%; } }
|
||||
|
||||
Reference in New Issue
Block a user