Byrosphere/Needle_Drop
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />6 7 <title>Needle Drop</title>8 9 <style>10 :root {11 --bg: #0b0b0b;12 --panel: #151515;13 --card: #1c1c1c;14 --gold: #d4af37;15 --gold-soft: #f1d87a;16 --text: #f8f3df;17 --muted: #c8bb8a;18 --border: #5f4b14;19 }20 21 * {22 box-sizing: border-box;23 }24 25 body {26 margin: 0;27 font-family: Arial, Helvetica, sans-serif;28 background:29 radial-gradient(circle at top, rgba(212,175,55,.15), transparent 25%),30 linear-gradient(180deg, #111 0%, #080808 100%);31 color: var(--text);32 min-height: 100vh;33 }34 35 .app {36 max-width: 1200px;37 margin: auto;38 padding: 20px;39 }40 41 /* HEADER */42 43 .header {44 text-align: center;45 padding: 25px 20px;46 margin-bottom: 22px;47 border: 1px solid var(--border);48 border-radius: 18px;49 background:50 linear-gradient(51 180deg,52 rgba(212,175,55,.10),53 rgba(0,0,0,.20)54 );55 }56 57 .record-icon {58 font-size: 2.5rem;59 margin-bottom: 5px;60 }61 62 .header h1 {63 margin: 0;64 color: var(--gold);65 font-size: 2.7rem;66 letter-spacing: 4px;67 }68 69 .header .tagline {70 margin-top: 9px;71 color: var(--muted);72 }73 74 .header .rule {75 display: inline-block;76 margin-top: 12px;77 padding: 7px 14px;78 border-radius: 999px;79 border: 1px solid rgba(212,175,55,.35);80 color: var(--gold-soft);81 font-size: .85rem;82 }83 84 /* GENERAL */85 86 .card {87 background: var(--card);88 border: 1px solid var(--border);89 border-radius: 18px;90 padding: 18px;91 }92 93 .section-title {94 margin: 0 0 12px;95 color: var(--gold);96 text-transform: uppercase;97 letter-spacing: 1px;98 font-size: 1.1rem;99 }100 101 .muted {102 color: var(--muted);103 }104 105 /* BATTLE */106 107 .battle-grid {108 display: grid;109 grid-template-columns: 1fr 110px 1fr;110 gap: 18px;111 align-items: stretch;112 }113 114 .song-card {115 display: flex;116 flex-direction: column;117 justify-content: space-between;118 }119 120 .song-top {121 display: flex;122 gap: 15px;123 }124 125 .cover {126 width: 120px;127 height: 120px;128 border-radius: 14px;129 object-fit: cover;130 border: 2px solid var(--gold);131 background: #292929;132 flex-shrink: 0;133 }134 135 .song-meta {136 min-width: 0;137 }138 139 .song-label {140 display: inline-block;141 background: rgba(212,175,55,.10);142 border: 1px solid rgba(212,175,55,.4);143 color: var(--gold-soft);144 font-size: .72rem;145 text-transform: uppercase;146 letter-spacing: 1px;147 padding: 5px 10px;148 border-radius: 999px;149 margin-bottom: 8px;150 }151 152 .song-title {153 margin: 0;154 font-size: 1.5rem;155 }156 157 .song-artist {158 color: var(--muted);159 margin: 7px 0;160 }161 162 .song-theme {163 color: var(--gold-soft);164 font-size: .9rem;165 }166 167 .vs-box {168 display: flex;169 justify-content: center;170 align-items: center;171 }172 173 .vs-circle {174 width: 88px;175 height: 88px;176 border-radius: 50%;177 display: flex;178 justify-content: center;179 align-items: center;180 border: 2px solid var(--gold);181 background: radial-gradient(circle, #30260f, #111);182 color: var(--gold);183 font-weight: 900;184 font-size: 1.2rem;185 }186 187 button {188 cursor: pointer;189 }190 191 .vote-btn,192 .action-btn {193 width: 100%;194 padding: 14px 16px;195 border-radius: 12px;196 border: none;197 margin-top: 16px;198 font-size: 1rem;199 font-weight: bold;200 }201 202 .vote-btn {203 color: #111;204 background:205 linear-gradient(206 180deg,207 #e8cb62,208 #b9911d209 );210 }211 212 .vote-btn:hover,213 .action-btn:hover {214 opacity: .9;215 }216 217 /* CHAMPION */218 219 .info-grid {220 display: grid;221 grid-template-columns: 1.25fr .75fr;222 gap: 18px;223 margin-top: 18px;224 }225 226 .champion-name {227 font-size: 1.8rem;228 font-weight: bold;229 color: var(--gold);230 margin: 5px 0;231 }232 233 .status {234 padding: 12px;235 margin-top: 14px;236 border-radius: 12px;237 border: 1px solid rgba(212,175,55,.3);238 background: rgba(212,175,55,.07);239 }240 241 .stat-grid {242 display: grid;243 grid-template-columns: repeat(3,1fr);244 gap: 12px;245 margin-top: 16px;246 }247 248 .stat {249 text-align: center;250 background: var(--panel);251 border: 1px solid var(--border);252 padding: 14px;253 border-radius: 12px;254 }255 256 .stat small {257 color: var(--muted);258 display: block;259 margin-bottom: 6px;260 text-transform: uppercase;261 }262 263 .stat strong {264 color: var(--gold);265 font-size: 1.5rem;266 }267 268 /* FORMS */269 270 .two-column {271 display: grid;272 grid-template-columns: 1fr 1fr;273 gap: 18px;274 margin-top: 18px;275 }276 277 .form-grid {278 display: grid;279 grid-template-columns: 1fr 1fr;280 gap: 12px;281 }282 283 label {284 display: block;285 color: var(--muted);286 font-size: .9rem;287 }288 289 input {290 width: 100%;291 margin-top: 6px;292 padding: 12px;293 border-radius: 10px;294 border: 1px solid var(--border);295 background: #101010;296 color: white;297 font-size: 1rem;298 }299 300 .full {301 grid-column: 1 / -1;302 }303 304 .gold-btn {305 color: #111;306 background:307 linear-gradient(308 180deg,309 #dabb4c,310 #9d7917311 );312 }313 314 .dark-btn {315 color: white;316 background: #292929;317 border: 1px solid var(--border);318 }319 320 .red-btn {321 color: white;322 background: #6f1c1c;323 }324 325 .actions {326 display: grid;327 gap: 10px;328 }329 330 /* LISTS */331 332 .history-list,333 .hall-list {334 display: grid;335 gap: 10px;336 }337 338 .history-item,339 .hall-item {340 background: var(--panel);341 border: 1px solid var(--border);342 border-radius: 12px;343 padding: 12px;344 }345 346 .history-item strong,347 .hall-item strong {348 color: var(--gold-soft);349 }350 351 /* MOBILE */352 353 @media (max-width: 850px) {354 355 .battle-grid,356 .info-grid,357 .two-column,358 .form-grid {359 grid-template-columns: 1fr;360 }361 362 .vs-box {363 padding: 5px;364 }365 366 .song-top {367 flex-direction: column;368 align-items: center;369 text-align: center;370 }371 372 .stat-grid {373 grid-template-columns: 1fr;374 }375 376 .header h1 {377 font-size: 2.1rem;378 }379 380 .full {381 grid-column: auto;382 }383 }384 </style>385</head>386 387<body>388 389<div class="app">390 391 <!-- HEADER -->392 393 <header class="header">394 395 <div class="record-icon">💿</div>396 397 <h1>NEEDLE DROP</h1>398 399 <div class="tagline">400 Drop two tracks. Pick one winner.401 </div>402 403 <div class="rule">404 🎵 Winner stays. Challenger steps up.405 </div>406 407 </header>408 409 410 <!-- BATTLE -->411 412 <section class="battle-grid">413 414 <div class="card song-card">415 416 <div class="song-top">417 418 <img419 id="coverA"420 class="cover"421 alt="Song A album art"422 >423 424 <div class="song-meta">425 426 <div class="song-label">427 Track A428 </div>429 430 <h2431 id="titleA"432 class="song-title">433 </h2>434 435 <div436 id="artistA"437 class="song-artist">438 </div>439 440 <div441 id="themeA"442 class="song-theme">443 </div>444 445 </div>446 447 </div>448 449 <button450 id="voteA"451 class="vote-btn">452 🎧 Pick Track A453 </button>454 455 </div>456 457 458 <div class="vs-box">459 460 <div class="vs-circle">461 VS462 </div>463 464 </div>465 466 467 <div class="card song-card">468 469 <div class="song-top">470 471 <img472 id="coverB"473 class="cover"474 alt="Song B album art"475 >476 477 <div class="song-meta">478 479 <div class="song-label">480 Track B481 </div>482 483 <h2484 id="titleB"485 class="song-title">486 </h2>487 488 <div489 id="artistB"490 class="song-artist">491 </div>492 493 <div494 id="themeB"495 class="song-theme">496 </div>497 498 </div>499 500 </div>501 502 <button503 id="voteB"504 class="vote-btn">505 🎧 Pick Track B506 </button>507 508 </div>509 510 </section>511 512 513 <!-- CHAMPION -->514 515 <section class="info-grid">516 517 <div class="card">518 519 <h3 class="section-title">520 👑 Now Spinning521 </h3>522 523 <div524 id="championName"525 class="champion-name">526 No champion yet527 </div>528 529 <div530 id="championArtist"531 class="muted">532 Cast the first vote.533 </div>534 535 <div536 id="status"537 class="status">538 Which record survives the drop?539 </div>540 541 542 <div class="stat-grid">543 544 <div class="stat">545 546 <small>547 Win Streak548 </small>549 550 <strong id="currentStreak">551 0552 </strong>553 554 </div>555 556 557 <div class="stat">558 559 <small>560 Battles561 </small>562 563 <strong id="totalBattles">564 0565 </strong>566 567 </div>568 569 570 <div class="stat">571 572 <small>573 Champions574 </small>575 576 <strong id="hallCount">577 0578 </strong>579 580 </div>581 582 </div>583 584 </div>585 586 587 <!-- ACTIONS -->588 589 <div class