Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NSMP Server</title> | |
| <style> | |
| :root { | |
| --bg: #0a0c12; | |
| --panel: rgba(18, 22, 34, 0.72); | |
| --panel-solid: #121626; | |
| --text: #e6e9f2; | |
| --muted: #8b92a8; | |
| --accent: #5c6fff; | |
| --accent2: #4653e5; | |
| --border: rgba(255,255,255,0.08); | |
| } | |
| * { | |
| box-sizing: border-box; | |
| font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| margin: 0; | |
| color: var(--text); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| background: var(--bg); | |
| } | |
| body::before { | |
| content: ""; | |
| position: fixed; | |
| inset: 0; | |
| z-index: -1; | |
| background: radial-gradient( | |
| 900px 500px at 20% 0%, | |
| #1a1f36, | |
| var(--bg) | |
| ); | |
| background-repeat: no-repeat; | |
| } | |
| .topbar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 14px 18px; | |
| background: rgba(10,12,18,0.6); | |
| backdrop-filter: blur(14px); | |
| border-bottom: 1px solid var(--border); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .brand { | |
| font-weight: 700; | |
| letter-spacing: .5px; | |
| font-size: 22px; | |
| } | |
| .wrapper { | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| padding: 24px; | |
| } | |
| .hero { | |
| text-align: center; | |
| padding: 100px 20px 60px; | |
| } | |
| .hero h1 { | |
| font-size: clamp(3rem, 8vw, 5rem); | |
| margin: 0; | |
| background: linear-gradient( | |
| 135deg, | |
| white, | |
| #8ea0ff | |
| ); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .hero p { | |
| color: var(--muted); | |
| font-size: 1.1rem; | |
| max-width: 700px; | |
| margin: 20px auto; | |
| line-height: 1.7; | |
| } | |
| .card { | |
| background: linear-gradient( | |
| 180deg, | |
| rgba(20,24,40,.75), | |
| rgba(12,14,24,.9) | |
| ); | |
| border: 1px solid rgba(255,255,255,.08); | |
| border-radius: 18px; | |
| padding: 28px; | |
| backdrop-filter: blur(14px); | |
| box-shadow: 0 20px 60px rgba(0,0,0,.45); | |
| transition: | |
| transform .25s ease, | |
| border-color .25s ease; | |
| } | |
| .card:hover { | |
| transform: translateY(-4px); | |
| border-color: rgba(92,111,255,.35); | |
| } | |
| .card h2, | |
| .card h3 { | |
| margin-top: 0; | |
| color: white; | |
| } | |
| .card p { | |
| color: var(--muted); | |
| line-height: 1.6; | |
| } | |
| .server-box, | |
| .launcher-box { | |
| max-width: 700px; | |
| margin: 24px auto 0; | |
| } | |
| .ip-box { | |
| margin-top: 15px; | |
| background: rgba(0,0,0,.25); | |
| border: 1px solid var(--border); | |
| border-radius: 14px; | |
| padding: 16px; | |
| font-family: monospace; | |
| font-size: 1.1rem; | |
| cursor: pointer; | |
| transition: | |
| border-color .2s ease, | |
| background .2s ease; | |
| } | |
| .ip-box:hover { | |
| border-color: var(--accent); | |
| background: rgba(92,111,255,.08); | |
| } | |
| .button-group { | |
| display: flex; | |
| gap: 12px; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| margin-top: 20px; | |
| } | |
| .button { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-width: 160px; | |
| height: 52px; | |
| padding: 0 24px; | |
| border-radius: 12px; | |
| text-decoration: none; | |
| color: white; | |
| font-weight: 600; | |
| border: 1px solid rgba(124,92,255,0.35); | |
| background: linear-gradient( | |
| 135deg, | |
| var(--accent), | |
| var(--accent2) | |
| ); | |
| transition: | |
| transform .2s ease, | |
| box-shadow .2s ease; | |
| } | |
| .button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 25px rgba(92,111,255,.35); | |
| } | |
| .button:active { | |
| transform: translateY(0); | |
| } | |
| .footer { | |
| text-align: center; | |
| padding: 50px 20px; | |
| color: var(--muted); | |
| font-size: .9rem; | |
| } | |
| .toast { | |
| position: fixed; | |
| bottom: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: rgba(18,22,34,.95); | |
| border: 1px solid var(--border); | |
| padding: 12px 18px; | |
| border-radius: 12px; | |
| color: white; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity .25s ease; | |
| } | |
| .toast.show { | |
| opacity: 1; | |
| } | |
| @media (max-width: 600px) { | |
| .wrapper { | |
| padding: 16px; | |
| } | |
| .hero { | |
| padding-top: 70px; | |
| } | |
| .button { | |
| width: 100%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="topbar"> | |
| <div class="brand">NSMP</div> | |
| </div> | |
| <div class="wrapper"> | |
| <section class="hero"> | |
| <h1>NSMP 2</h1> | |
| <p> | |
| Fajny serwer z modami.<br> | |
| Nie wiem po co robię tę stronę. | |
| </p> | |
| </section> | |
| <div class="server-box"> | |
| <div class="card"> | |
| <h2>Serwer</h2> | |
| <p> | |
| Dołącz używając tego adresu IP: | |
| </p> | |
| <div class="ip-box" onclick="copyIP()"> | |
| NSMP2.play.hosting | |
| </div> | |
| </div> | |
| </div> | |
| <div class="launcher-box"> | |
| <div class="card"> | |
| <h2>Launcher</h2> | |
| <p> | |
| Pobierz launcher, aby grać na serwerze. | |
| </p> | |
| <div class="button-group"> | |
| <a href="https://nsmp-nsmp-server.hf.space/files/launchers/NSMP-Launcher-Installer-Windows.exe" class="button" download> | |
| Windows | |
| </a> | |
| <a href="https://nsmp-nsmp-server.hf.space/files/launchers/NSMP-Launcher-Installer-Linux.exe" class="button" download> | |
| Linux (.deb) | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="toast" id="toast"> | |
| Skopiowano adres IP! | |
| </div> | |
| <script> | |
| function copyIP() { | |
| navigator.clipboard.writeText("NSMP2.play.hosting"); | |
| const toast = document.getElementById("toast"); | |
| toast.classList.add("show"); | |
| setTimeout(() => { | |
| toast.classList.remove("show"); | |
| }, 2000); | |
| } | |
| </script> | |
| </body> | |
| </html> |