Spaces:

noah33565
/

GNRP

Running

App Files Files Community

noah33565 commited on Feb 22

Commit

038ead3

verified ·

1 Parent(s): c984683

Update index.html

Browse files

Files changed (1) hide show

index.html +1406 -18

index.html CHANGED Viewed

@@ -1,19 +1,1407 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>German RP (GNRP) Server</title>
+<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --bg: #050508;
+    --bg2: #0a0a12;
+    --accent: #e8a020;
+    --accent2: #ff6a00;
+    --accent3: #c47d0a;
+    --text: #f0e8d8;
+    --dim: #6a5840;
+    --owner: #ffd700;
+    --admin: #ff6a00;
+    --mod: #e8a020;
+    --supporter: #c47d0a;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    background: var(--bg);
+    color: var(--text);
+    font-family: 'Rajdhani', sans-serif;
+    font-size: 16px;
+    overflow-x: hidden;
+    cursor: default;
+  }
+  /* Hero background image */
+  #heroBg {
+    position: fixed;
+    inset: 0;
+    background-image: url('https://i.imgur.com/placeholder.jpg');
+    background-size: cover;
+    background-position: center;
+    opacity: 0.18;
+    z-index: 0;
+    pointer-events: none;
+    transition: background-image 0.5s;
+  }
+  /* Animated bg grid */
+  body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background-image:
+      linear-gradient(rgba(232,160,32,0.03) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(232,160,32,0.03) 1px, transparent 1px);
+    background-size: 60px 60px;
+    animation: gridMove 20s linear infinite;
+    pointer-events: none;
+    z-index: 0;
+  }
+  @keyframes gridMove {
+    0% { background-position: 0 0; }
+    100% { background-position: 60px 60px; }
+  }
+  body::after {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px);
+    pointer-events: none;
+    z-index: 999;
+  }
+  nav {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 100;
+    padding: 0 40px;
+    height: 64px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: rgba(5,5,8,0.9);
+    border-bottom: 1px solid rgba(232,160,32,0.2);
+    backdrop-filter: blur(10px);
+  }
+  .logo {
+    font-family: 'Orbitron', monospace;
+    font-size: 22px;
+    font-weight: 900;
+    letter-spacing: 4px;
+    color: var(--accent);
+    text-shadow: 0 0 20px var(--accent), 0 0 40px rgba(232,160,32,0.4);
+    text-decoration: none;
+  }
+  .logo span { color: var(--accent2); }
+  .nav-links {
+    display: flex;
+    gap: 32px;
+    list-style: none;
+  }
+  .nav-links a {
+    font-family: 'Orbitron', monospace;
+    font-size: 11px;
+    letter-spacing: 2px;
+    color: var(--dim);
+    text-decoration: none;
+    transition: color 0.2s, text-shadow 0.2s;
+    text-transform: uppercase;
+  }
+  .nav-links a:hover {
+    color: var(--accent);
+    text-shadow: 0 0 10px var(--accent);
+  }
+  .hero {
+    position: relative;
+    z-index: 1;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 80px 20px 60px;
+    overflow: hidden;
+  }
+  .hero-glow {
+    position: absolute;
+    width: 600px;
+    height: 600px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(232,160,32,0.1) 0%, transparent 70%);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    animation: pulse 4s ease-in-out infinite;
+  }
+  .hero-glow2 {
+    position: absolute;
+    width: 400px;
+    height: 400px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(255,106,0,0.1) 0%, transparent 70%);
+    top: 30%;
+    right: 10%;
+    animation: pulse 6s ease-in-out infinite reverse;
+  }
+  @keyframes pulse {
+    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
+    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
+  }
+  .hero-content { position: relative; z-index: 2; }
+  .hero-tag {
+    font-family: 'Orbitron', monospace;
+    font-size: 11px;
+    letter-spacing: 6px;
+    color: var(--accent);
+    text-transform: uppercase;
+    margin-bottom: 24px;
+    opacity: 0;
+    animation: fadeUp 0.8s 0.3s forwards;
+  }
+  .hero-title {
+    font-family: 'Orbitron', monospace;
+    font-size: clamp(52px, 10vw, 100px);
+    font-weight: 900;
+    line-height: 0.9;
+    letter-spacing: -2px;
+    margin-bottom: 30px;
+    opacity: 0;
+    animation: fadeUp 0.8s 0.5s forwards;
+  }
+  .hero-title .line1 {
+    display: block;
+    color: var(--text);
+    text-shadow: 0 0 60px rgba(255,255,255,0.1);
+  }
+  .hero-title .line2 {
+    display: block;
+    background: linear-gradient(90deg, var(--accent), var(--accent2));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-shadow: none;
+    filter: drop-shadow(0 0 30px rgba(232,160,32,0.6));
+  }
+  .hero-sub {
+    font-size: 18px;
+    color: var(--dim);
+    letter-spacing: 1px;
+    margin-bottom: 50px;
+    max-width: 500px;
+    margin-left: auto;
+    margin-right: auto;
+    opacity: 0;
+    animation: fadeUp 0.8s 0.7s forwards;
+  }
+  /* Server code badge */
+  .server-code-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    background: rgba(232,160,32,0.08);
+    border: 1px solid rgba(232,160,32,0.3);
+    padding: 10px 22px;
+    font-family: 'Orbitron', monospace;
+    font-size: 13px;
+    letter-spacing: 3px;
+    color: var(--accent);
+    margin-bottom: 28px;
+    clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
+    cursor: pointer;
+    transition: all 0.2s;
+    opacity: 0;
+    animation: fadeUp 0.8s 0.65s forwards;
+    user-select: all;
+  }
+  .server-code-badge:hover {
+    background: rgba(232,160,32,0.15);
+    box-shadow: 0 0 20px rgba(232,160,32,0.2);
+  }
+  .server-code-badge .code-label {
+    font-size: 9px;
+    color: var(--dim);
+    letter-spacing: 2px;
+  }
+  .copy-hint {
+    font-size: 9px;
+    color: var(--dim);
+    letter-spacing: 1px;
+    margin-bottom: 20px;
+    opacity: 0;
+    animation: fadeUp 0.8s 0.68s forwards;
+  }
+  .hero-buttons {
+    display: flex;
+    gap: 16px;
+    justify-content: center;
+    flex-wrap: wrap;
+    opacity: 0;
+    animation: fadeUp 0.8s 0.9s forwards;
+  }
+  @keyframes fadeUp {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  .btn {
+    font-family: 'Orbitron', monospace;
+    font-size: 12px;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    padding: 14px 32px;
+    border: none;
+    cursor: pointer;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    transition: all 0.3s;
+    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
+  }
+  .btn-primary {
+    background: var(--accent);
+    color: var(--bg);
+    font-weight: 700;
+  }
+  .btn-primary:hover {
+    background: #fff;
+    box-shadow: 0 0 30px var(--accent), 0 0 60px rgba(232,160,32,0.4);
+    transform: translateY(-2px);
+  }
+  .btn-discord {
+    background: #5865F2;
+    color: #fff;
+    font-weight: 700;
+  }
+  .btn-discord:hover {
+    background: #7289da;
+    box-shadow: 0 0 30px rgba(88,101,242,0.7);
+    transform: translateY(-2px);
+  }
+  .btn-outline {
+    background: transparent;
+    color: var(--accent);
+    border: 1px solid rgba(232,160,32,0.4);
+  }
+  .btn-outline:hover {
+    background: rgba(232,160,32,0.08);
+    border-color: var(--accent);
+    box-shadow: 0 0 20px rgba(232,160,32,0.2);
+    transform: translateY(-2px);
+  }
+  .stats-bar {
+    position: relative;
+    z-index: 1;
+    background: rgba(10,10,18,0.8);
+    border-top: 1px solid rgba(232,160,32,0.1);
+    border-bottom: 1px solid rgba(232,160,32,0.1);
+    padding: 30px 0;
+    display: flex;
+    justify-content: center;
+    gap: 80px;
+    flex-wrap: wrap;
+  }
+  .stat { text-align: center; }
+  .stat-num {
+    font-family: 'Orbitron', monospace;
+    font-size: 32px;
+    font-weight: 900;
+    color: var(--accent);
+    text-shadow: 0 0 20px var(--accent);
+    display: block;
+  }
+  .stat-label {
+    font-size: 12px;
+    letter-spacing: 3px;
+    color: var(--dim);
+    text-transform: uppercase;
+  }
+  .section {
+    position: relative;
+    z-index: 1;
+    padding: 100px 40px;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  .section-header {
+    text-align: center;
+    margin-bottom: 60px;
+  }
+  .section-tag {
+    font-family: 'Orbitron', monospace;
+    font-size: 10px;
+    letter-spacing: 5px;
+    color: var(--accent3);
+    text-transform: uppercase;
+    margin-bottom: 12px;
+  }
+  .section-title {
+    font-family: 'Orbitron', monospace;
+    font-size: 36px;
+    font-weight: 900;
+    letter-spacing: 2px;
+  }
+  .section-title span {
+    color: var(--accent);
+    text-shadow: 0 0 20px var(--accent);
+  }
+  .rank-group { margin-bottom: 60px; }
+  .rank-header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 24px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid rgba(255,255,255,0.05);
+  }
+  .rank-badge {
+    font-family: 'Orbitron', monospace;
+    font-size: 11px;
+    letter-spacing: 2px;
+    padding: 6px 16px;
+    clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
+    font-weight: 700;
+  }
+  .rank-owner .rank-badge { background: var(--owner); color: #000; }
+  .rank-admin .rank-badge { background: var(--admin); color: #fff; }
+  .rank-mod .rank-badge { background: var(--mod); color: #000; }
+  .rank-supporter .rank-badge { background: var(--supporter); color: #fff; }
+  .rank-count { font-size: 13px; color: var(--dim); letter-spacing: 1px; }
+  .team-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 16px;
+  }
+  .member-card {
+    background: rgba(255,255,255,0.02);
+    border: 1px solid rgba(255,255,255,0.06);
+    padding: 20px;
+    transition: all 0.3s;
+    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
+    position: relative;
+  }
+  .member-card::before {
+    content: '';
+    position: absolute;
+    top: 0; right: 16px;
+    width: 16px; height: 1px;
+    background: var(--rank-color, var(--accent));
+    transform-origin: right;
+    transform: rotate(45deg) translate(8px, 8px);
+    transition: all 0.3s;
+  }
+  .rank-owner .member-card { --rank-color: var(--owner); }
+  .rank-admin .member-card { --rank-color: var(--admin); }
+  .rank-mod .member-card { --rank-color: var(--mod); }
+  .rank-supporter .member-card { --rank-color: var(--supporter); }
+  .member-card:hover {
+    background: rgba(255,255,255,0.05);
+    border-color: var(--rank-color, var(--accent));
+    box-shadow: 0 0 20px rgba(0,0,0,0.5), inset 0 0 20px rgba(0,0,0,0.2);
+    transform: translateY(-3px);
+  }
+  .member-avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--rank-color, var(--accent)), var(--bg2));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: 'Orbitron', monospace;
+    font-size: 18px;
+    font-weight: 900;
+    color: #000;
+    margin-bottom: 12px;
+    border: 2px solid var(--rank-color, var(--accent));
+    box-shadow: 0 0 12px var(--rank-color, var(--accent));
+  }
+  .member-name {
+    font-family: 'Orbitron', monospace;
+    font-size: 13px;
+    font-weight: 700;
+    letter-spacing: 1px;
+    color: var(--text);
+    margin-bottom: 4px;
+  }
+  .member-role {
+    font-size: 11px;
+    letter-spacing: 2px;
+    color: var(--dim);
+    text-transform: uppercase;
+  }
+  footer {
+    position: relative;
+    z-index: 1;
+    background: rgba(5,5,8,0.95);
+    border-top: 1px solid rgba(232,160,32,0.1);
+    padding: 40px;
+    text-align: center;
+  }
+  .footer-logo {
+    font-family: 'Orbitron', monospace;
+    font-size: 20px;
+    font-weight: 900;
+    color: var(--accent);
+    text-shadow: 0 0 20px var(--accent);
+    margin-bottom: 12px;
+  }
+  .footer-text { font-size: 13px; color: var(--dim); letter-spacing: 1px; }
+  /* LOGIN */
+  .login-page {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: var(--bg);
+    z-index: 500;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  }
+  .login-page.active { display: flex; }
+  .login-box {
+    background: rgba(10,10,20,0.95);
+    border: 1px solid rgba(232,160,32,0.25);
+    padding: 50px;
+    min-width: 380px;
+    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
+    box-shadow: 0 0 60px rgba(232,160,32,0.06);
+    position: relative;
+  }
+  .login-title {
+    font-family: 'Orbitron', monospace;
+    font-size: 18px;
+    font-weight: 900;
+    letter-spacing: 3px;
+    color: var(--accent);
+    text-shadow: 0 0 15px var(--accent);
+    margin-bottom: 8px;
+    text-align: center;
+  }
+  .login-sub {
+    font-size: 12px;
+    color: var(--dim);
+    text-align: center;
+    letter-spacing: 2px;
+    margin-bottom: 32px;
+    text-transform: uppercase;
+  }
+  .input-group { margin-bottom: 20px; }
+  .input-group label {
+    display: block;
+    font-size: 11px;
+    letter-spacing: 2px;
+    color: var(--dim);
+    text-transform: uppercase;
+    margin-bottom: 8px;
+  }
+  .input-group input {
+    width: 100%;
+    background: rgba(232,160,32,0.04);
+    border: 1px solid rgba(232,160,32,0.15);
+    color: var(--text);
+    padding: 12px 16px;
+    font-family: 'Rajdhani', sans-serif;
+    font-size: 16px;
+    outline: none;
+    transition: border-color 0.3s, box-shadow 0.3s;
+  }
+  .input-group input:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 15px rgba(232,160,32,0.1);
+  }
+  .login-error {
+    color: var(--accent2);
+    font-size: 12px;
+    text-align: center;
+    margin-bottom: 12px;
+    letter-spacing: 1px;
+    min-height: 16px;
+  }
+  .btn-login {
+    width: 100%;
+    background: var(--accent);
+    color: var(--bg);
+    border: none;
+    padding: 14px;
+    font-family: 'Orbitron', monospace;
+    font-size: 12px;
+    letter-spacing: 3px;
+    font-weight: 700;
+    cursor: pointer;
+    text-transform: uppercase;
+    transition: all 0.3s;
+    clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
+  }
+  .btn-login:hover { background: #fff; box-shadow: 0 0 30px var(--accent); }
+  .login-back {
+    margin-top: 16px;
+    text-align: center;
+    font-size: 12px;
+    color: var(--dim);
+    cursor: pointer;
+    letter-spacing: 1px;
+    transition: color 0.2s;
+  }
+  .login-back:hover { color: var(--accent); }
+  /* ADMIN PANEL */
+  .admin-panel {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: var(--bg);
+    z-index: 500;
+    overflow-y: auto;
+    padding: 40px;
+  }
+  .admin-panel.active { display: block; }
+  .admin-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 40px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid rgba(232,160,32,0.15);
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+  .admin-title {
+    font-family: 'Orbitron', monospace;
+    font-size: 20px;
+    font-weight: 900;
+    color: var(--accent);
+    text-shadow: 0 0 15px var(--accent);
+    letter-spacing: 3px;
+  }
+  .admin-section { margin-bottom: 40px; }
+  .admin-section-title {
+    font-family: 'Orbitron', monospace;
+    font-size: 13px;
+    font-weight: 700;
+    letter-spacing: 2px;
+    margin-bottom: 16px;
+    padding: 8px 16px;
+    background: rgba(232,160,32,0.06);
+    border-left: 3px solid var(--accent);
+    color: var(--accent);
+    text-transform: uppercase;
+  }
+  .member-list-admin {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 16px;
+    max-height: 240px;
+    overflow-y: auto;
+    padding-right: 4px;
+  }
+  .member-list-admin::-webkit-scrollbar { width: 4px; }
+  .member-list-admin::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
+  .member-list-admin::-webkit-scrollbar-thumb { background: rgba(232,160,32,0.3); }
+  .admin-member-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 14px;
+    background: rgba(255,255,255,0.02);
+    border: 1px solid rgba(255,255,255,0.06);
+    gap: 12px;
+  }
+  .admin-member-name {
+    flex: 1;
+    font-family: 'Orbitron', monospace;
+    font-size: 13px;
+    color: var(--text);
+  }
+  .btn-remove {
+    background: rgba(255,0,60,0.15);
+    border: 1px solid rgba(255,0,60,0.3);
+    color: #ff003c;
+    padding: 6px 14px;
+    font-family: 'Orbitron', monospace;
+    font-size: 10px;
+    letter-spacing: 1px;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+  .btn-remove:hover {
+    background: rgba(255,0,60,0.3);
+    box-shadow: 0 0 10px rgba(255,0,60,0.3);
+  }
+  .add-member-row { display: flex; gap: 12px; }
+  .add-member-row input {
+    flex: 1;
+    background: rgba(232,160,32,0.04);
+    border: 1px solid rgba(232,160,32,0.15);
+    color: var(--text);
+    padding: 10px 14px;
+    font-family: 'Rajdhani', sans-serif;
+    font-size: 15px;
+    outline: none;
+  }
+  .add-member-row input:focus { border-color: var(--accent); }
+  .btn-add {
+    background: var(--accent);
+    color: var(--bg);
+    border: none;
+    padding: 10px 20px;
+    font-family: 'Orbitron', monospace;
+    font-size: 11px;
+    letter-spacing: 1px;
+    cursor: pointer;
+    font-weight: 700;
+    transition: all 0.2s;
+    clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
+  }
+  .btn-add:hover { background: #fff; box-shadow: 0 0 15px var(--accent); }
+  /* Server code & link admin */
+  .admin-text-row {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    margin-bottom: 16px;
+  }
+  .admin-text-row input {
+    flex: 1;
+    background: rgba(232,160,32,0.04);
+    border: 1px solid rgba(232,160,32,0.2);
+    color: var(--text);
+    padding: 10px 14px;
+    font-family: 'Rajdhani', sans-serif;
+    font-size: 15px;
+    outline: none;
+  }
+  .admin-text-row input:focus { border-color: var(--accent); }
+  /* BG image admin */
+  .admin-bg-row {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .admin-bg-row input {
+    flex: 1;
+    min-width: 200px;
+    background: rgba(232,160,32,0.04);
+    border: 1px solid rgba(232,160,32,0.2);
+    color: var(--text);
+    padding: 10px 14px;
+    font-family: 'Rajdhani', sans-serif;
+    font-size: 14px;
+    outline: none;
+  }
+  .admin-bg-row input:focus { border-color: var(--accent); }
+  .admin-bg-preview {
+    width: 80px;
+    height: 50px;
+    object-fit: cover;
+    border: 1px solid rgba(232,160,32,0.3);
+    display: none;
+  }
+  .particles {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    pointer-events: none;
+  }
+  .particle {
+    position: absolute;
+    width: 2px;
+    height: 2px;
+    background: var(--accent);
+    border-radius: 50%;
+    animation: float linear infinite;
+    opacity: 0;
+  }
+  @keyframes float {
+    0% { transform: translateY(100vh) translateX(0); opacity: 0; }
+    10% { opacity: 0.6; }
+    90% { opacity: 0.6; }
+    100% { transform: translateY(-20px) translateX(var(--drift)); opacity: 0; }
+  }
+  .divider {
+    position: relative;
+    z-index: 1;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(232,160,32,0.3), transparent);
+  }
+  .partner-section {
+    position: relative;
+    z-index: 1;
+    padding: 100px 40px;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  .partner-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 20px;
+  }
+  .partner-card {
+    background: rgba(255,255,255,0.02);
+    border: 1px solid rgba(255,255,255,0.08);
+    padding: 32px 28px;
+    transition: all 0.3s;
+    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
+    text-decoration: none;
+    display: block;
+    position: relative;
+    overflow: hidden;
+  }
+  .partner-card::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(135deg, rgba(232,160,32,0.04) 0%, transparent 60%);
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+  .partner-card:hover::before { opacity: 1; }
+  .partner-card:hover {
+    border-color: rgba(232,160,32,0.4);
+    box-shadow: 0 0 30px rgba(232,160,32,0.06), 0 8px 40px rgba(0,0,0,0.4);
+    transform: translateY(-4px);
+  }
+  .partner-icon { font-size: 32px; margin-bottom: 14px; display: block; }
+  .partner-name {
+    font-family: 'Orbitron', monospace;
+    font-size: 14px;
+    font-weight: 700;
+    letter-spacing: 2px;
+    color: var(--accent);
+    margin-bottom: 8px;
+    text-shadow: 0 0 10px rgba(232,160,32,0.4);
+  }
+  .partner-desc { font-size: 14px; color: var(--dim); line-height: 1.5; margin-bottom: 20px; }
+  .partner-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-family: 'Orbitron', monospace;
+    font-size: 10px;
+    letter-spacing: 2px;
+    color: var(--accent);
+    border: 1px solid rgba(232,160,32,0.3);
+    padding: 8px 18px;
+    clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
+    transition: all 0.3s;
+    background: transparent;
+    text-transform: uppercase;
+  }
+  .partner-card:hover .partner-btn {
+    background: rgba(232,160,32,0.1);
+    border-color: var(--accent);
+    box-shadow: 0 0 15px rgba(232,160,32,0.2);
+  }
+  .partner-btn svg { transition: transform 0.3s; }
+  .partner-card:hover .partner-btn svg { transform: translateX(3px); }
+  .saved-notice {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    background: rgba(232,160,32,0.1);
+    border: 1px solid var(--accent);
+    color: var(--accent);
+    padding: 12px 24px;
+    font-family: 'Orbitron', monospace;
+    font-size: 11px;
+    letter-spacing: 2px;
+    z-index: 1000;
+    opacity: 0;
+    transform: translateY(10px);
+    transition: all 0.3s;
+    clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
+  }
+  .saved-notice.show { opacity: 1; transform: translateY(0); }
+  .copy-toast {
+    position: fixed;
+    bottom: 70px;
+    left: 50%;
+    transform: translateX(-50%) translateY(10px);
+    background: rgba(232,160,32,0.15);
+    border: 1px solid var(--accent);
+    color: var(--accent);
+    padding: 10px 22px;
+    font-family: 'Orbitron', monospace;
+    font-size: 11px;
+    letter-spacing: 2px;
+    z-index: 1000;
+    opacity: 0;
+    transition: all 0.3s;
+    clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
+    pointer-events: none;
+  }
+  .copy-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
+  @media (max-width: 600px) {
+    nav { padding: 0 20px; }
+    .nav-links { gap: 16px; }
+    .section { padding: 60px 20px; }
+    .stats-bar { gap: 40px; }
+    .login-box { min-width: unset; width: 90vw; padding: 36px 28px; }
+    .add-member-row { flex-direction: column; }
+    .admin-panel { padding: 20px; }
+    .admin-text-row { flex-direction: column; }
+  }
+</style>
+</head>
+<body>
+<!-- Fixed background image layer -->
+<div id="heroBg"></div>
+<!-- NAV -->
+<nav>
+  <a href="#" class="logo" onclick="showMain()">GNRP<span>.</span></a>
+  <ul class="nav-links">
+    <li><a href="#" onclick="showMain(); scrollToTeam()">Team</a></li>
+    <li><a href="#" onclick="scrollToPartner()">Partner</a></li>
+    <li><a href="#" id="discordNavLink" target="_blank">Discord</a></li>
+    <li><a href="#" onclick="event.preventDefault(); showLogin()">Admin</a></li>
+  </ul>
+</nav>
+<!-- MAIN PAGE -->
+<div id="mainPage">
+  <section class="hero">
+    <div class="particles" id="particles"></div>
+    <div class="hero-glow"></div>
+    <div class="hero-glow2"></div>
+    <div class="hero-content">
+      <div class="hero-tag">// Willkommen beim</div>
+      <h1 class="hero-title">
+        <span class="line1">German RP</span>
+        <span class="line2">GNRP</span>
+      </h1>
+      <p class="hero-sub">Kompetitiv. Präzise. Unaufhaltsam.</p>
+      <!-- Server Code Badge -->
+      <div class="server-code-badge" onclick="copyServerCode()" title="Klicken zum Kopieren">
+        <span class="code-label">SERVER CODE</span>
+        <span id="serverCodeDisplay">—</span>
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="8" height="8" rx="1"/><path d="M4 4V3a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1h-1"/></svg>
+      </div>
+      <div class="copy-hint">↑ Klicken zum Kopieren</div>
+      <div class="hero-buttons">
+        <a href="#" id="discordHeroBtn" target="_blank" class="btn btn-discord">
+          <svg width="18" height="14" viewBox="0 0 18 14" fill="currentColor"><path d="M15.25 1.5a14.89 14.89 0 00-3.68-1.14.05.05 0 00-.06.03 10.36 10.36 0 00-.46.94 13.77 13.77 0 00-4.13 0A9.8 9.8 0 006.68.39a.06.06 0 00-.06-.03A14.86 14.86 0 002.94 1.5a.06.06 0 00-.02.02C.43 5.08-.26 8.55.08 11.97c0 .02.01.03.03.04a14.96 14.96 0 004.5 2.27.06.06 0 00.06-.02 10.66 10.66 0 00.92-1.5.06.06 0 00-.03-.08 9.86 9.86 0 01-1.41-.67.06.06 0 010-.1l.28-.22a.06.06 0 01.06-.01c2.96 1.35 6.16 1.35 9.08 0a.06.06 0 01.06.01l.28.22a.06.06 0 010 .1c-.45.26-.92.49-1.41.67a.06.06 0 00-.03.08c.27.52.58 1.02.92 1.5a.06.06 0 00.06.02 14.91 14.91 0 004.51-2.27.06.06 0 00.03-.04c.41-4.01-.69-7.49-2.9-10.45a.05.05 0 00-.02-.02zM6.01 9.83c-.89 0-1.62-.82-1.62-1.82 0-1 .72-1.82 1.62-1.82.9 0 1.63.83 1.62 1.82 0 1-.72 1.82-1.62 1.82zm5.99 0c-.89 0-1.62-.82-1.62-1.82 0-1 .72-1.82 1.62-1.82.9 0 1.63.83 1.62 1.82 0 1-.71 1.82-1.62 1.82z"/></svg>
+          Discord beitreten
+        </a>
+        <a href="#team" class="btn btn-outline" onclick="scrollToTeam()">Team ansehen</a>
+      </div>
+    </div>
+  </section>
+  <div class="divider"></div>
+  <div class="stats-bar">
+    <div class="stat">
+      <span class="stat-num" id="statMembers">—</span>
+      <span class="stat-label">Teammitglieder</span>
+    </div>
+    <div class="stat">
+      <span class="stat-num">24/7</span>
+      <span class="stat-label">Online</span>
+    </div>
+    <div class="stat">
+      <span class="stat-num">4</span>
+      <span class="stat-label">Ränge</span>
+    </div>
+    <div class="stat">
+      <span class="stat-num">1+</span>
+      <span class="stat-label">Partner</span>
+    </div>
+  </div>
+  <div class="divider"></div>
+  <section class="section" id="team">
+    <div class="section-header">
+      <div class="section-tag">// Unser</div>
+      <h2 class="section-title">TEAM<span>.</span></h2>
+    </div>
+    <div id="teamContainer"></div>
+  </section>
+  <div class="divider"></div>
+  <section class="partner-section" id="partner">
+    <div class="section-header">
+      <div class="section-tag">// Unsere</div>
+      <h2 class="section-title">PARTNER<span>.</span></h2>
+    </div>
+    <div class="partner-grid">
+      <a class="partner-card" href="https://noah33565-noahsapp.static.hf.space/" target="_blank" rel="noopener">
+        <span class="partner-icon">🚀</span>
+        <div class="partner-name">Noah's App</div>
+        <div class="partner-desc">Offizieller Partner — Besuche Noah's App und entdecke spannende Projekte.</div>
+        <span class="partner-btn">
+          Besuchen
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 7h10M7 2l5 5-5 5"/></svg>
+        </span>
+      </a>
+    </div>
+  </section>
+  <div class="divider"></div>
+  <footer>
+    <div class="footer-logo">German RP <span style="color:var(--accent2)">GNRP</span></div>
+    <p class="footer-text">© 2025 German RP (GNRP) — Alle Rechte vorbehalten</p>
+  </footer>
+</div>
+<!-- LOGIN PAGE -->
+<div class="login-page" id="loginPage">
+  <div class="login-box">
+    <div class="login-title">// ADMIN</div>
+    <div class="login-sub">Team-Verwaltung</div>
+    <div class="input-group">
+      <label>Passwort</label>
+      <input type="password" id="passwordInput" placeholder="••••••••" onkeydown="if(event.key==='Enter')doLogin()">
+    </div>
+    <div class="login-error" id="loginError"></div>
+    <button class="btn-login" onclick="doLogin()">Einloggen</button>
+    <div class="login-back" onclick="showMain()">← Zurück zur Startseite</div>
+  </div>
+</div>
+<!-- ADMIN PANEL -->
+<div class="admin-panel" id="adminPanel">
+  <div class="admin-header">
+    <div class="admin-title">// GNRP VERWALTUNG</div>
+    <button style="font-family:'Orbitron',monospace;font-size:11px;letter-spacing:2px;padding:10px 20px;border:1px solid rgba(232,160,32,0.4);background:transparent;color:var(--accent);cursor:pointer;" onclick="logout()">Logout</button>
+  </div>
+  <!-- Server Code & Discord Link -->
+  <div class="admin-section">
+    <div class="admin-section-title">Server-Einstellungen</div>
+    <div style="margin-bottom:12px;font-size:11px;letter-spacing:1px;color:var(--dim);text-transform:uppercase;">Server Code</div>
+    <div class="admin-text-row">
+      <input type="text" id="adminServerCode" placeholder="z.B. GNRP-2024">
+      <button class="btn-add" onclick="saveServerCode()">Speichern</button>
+    </div>
+    <div style="margin-bottom:12px;margin-top:20px;font-size:11px;letter-spacing:1px;color:var(--dim);text-transform:uppercase;">Discord-Link</div>
+    <div class="admin-text-row">
+      <input type="text" id="adminDiscordLink" placeholder="https://discord.gg/...">
+      <button class="btn-add" onclick="saveDiscordLink()">Speichern</button>
+    </div>
+    <div style="margin-bottom:12px;margin-top:20px;font-size:11px;letter-spacing:1px;color:var(--dim);text-transform:uppercase;">Hintergrundbild (URL)</div>
+    <div class="admin-bg-row">
+      <input type="text" id="adminBgUrl" placeholder="https://example.com/bild.jpg">
+      <button class="btn-add" onclick="saveBgUrl()">Anwenden</button>
+      <button class="btn-remove" onclick="removeBgUrl()">Entfernen</button>
+    </div>
+    <div style="margin-top:10px;font-size:11px;color:var(--dim);">Aktuell: <span id="currentBgDisplay" style="color:var(--accent);">—</span></div>
+  </div>
+  <!-- Team Ranks -->
+  <div id="adminRanks"></div>
+</div>
+<div class="saved-notice" id="savedNotice">✓ GESPEICHERT</div>
+<div class="copy-toast" id="copyToast">✓ SERVER CODE KOPIERT</div>
+<script>
+  const ADMIN_PW = 'okcool1234_';
+  const defaultTeam = {
+    Owner: ["ShadowX"],
+    Admin: ["Nova", "Blaze"],
+    Mod: ["Frost", "Viper"],
+    Supporter: ["Echo", "Drift", "Zara"]
+  };
+  const rankColors = {
+    Owner: "#ffd700",
+    Admin: "#ff6a00",
+    Mod: "#e8a020",
+    Supporter: "#c47d0a"
+  };
+  const rankClasses = {
+    Owner: "rank-owner",
+    Admin: "rank-admin",
+    Mod: "rank-mod",
+    Supporter: "rank-supporter"
+  };
+  function loadTeam() {
+    const stored = localStorage.getItem('gnrp_team');
+    if (stored) return JSON.parse(stored);
+    return JSON.parse(JSON.stringify(defaultTeam));
+  }
+  function saveTeam(team) {
+    localStorage.setItem('gnrp_team', JSON.stringify(team));
+  }
+  function loadSettings() {
+    const stored = localStorage.getItem('gnrp_settings');
+    if (stored) return JSON.parse(stored);
+    return {
+      serverCode: 'GNRP-2025',
+      discordLink: 'https://discord.gg/85953svv',
+      bgUrl: ''
+    };
+  }
+  function saveSettings(settings) {
+    localStorage.setItem('gnrp_settings', JSON.stringify(settings));
+  }
+  let team = loadTeam();
+  let settings = loadSettings();
+  function applySettings() {
+    // Server code
+    const codeEl = document.getElementById('serverCodeDisplay');
+    if (codeEl) codeEl.textContent = settings.serverCode || '—';
+    // Discord links
+    const heroBtn = document.getElementById('discordHeroBtn');
+    const navLink = document.getElementById('discordNavLink');
+    const link = settings.discordLink || 'https://discord.gg/85953svv';
+    if (heroBtn) heroBtn.href = link;
+    if (navLink) navLink.href = link;
+    // Background
+    const bg = document.getElementById('heroBg');
+    if (bg) {
+      if (settings.bgUrl) {
+        bg.style.backgroundImage = `url('${settings.bgUrl}')`;
+      } else {
+        bg.style.backgroundImage = 'none';
+      }
+    }
+  }
+  function copyServerCode() {
+    const code = settings.serverCode || '';
+    if (!code) return;
+    navigator.clipboard.writeText(code).catch(() => {
+      const ta = document.createElement('textarea');
+      ta.value = code;
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand('copy');
+      document.body.removeChild(ta);
+    });
+    const toast = document.getElementById('copyToast');
+    toast.classList.add('show');
+    setTimeout(() => toast.classList.remove('show'), 2000);
+  }
+  function renderTeam() {
+    const container = document.getElementById('teamContainer');
+    container.innerHTML = '';
+    let total = 0;
+    for (const [rank, members] of Object.entries(team)) {
+      total += members.length;
+      const group = document.createElement('div');
+      group.className = `rank-group ${rankClasses[rank]}`;
+      group.innerHTML = `
+        <div class="rank-header">
+          <span class="rank-badge">${rank.toUpperCase()}</span>
+          <span class="rank-count">${members.length} Mitglied${members.length !== 1 ? 'er' : ''}</span>
+        </div>
+        <div class="team-grid">
+          ${members.map(m => `
+            <div class="member-card">
+              <div class="member-avatar">${m[0].toUpperCase()}</div>
+              <div class="member-name">${m}</div>
+              <div class="member-role">${rank}</div>
+            </div>
+          `).join('')}
+        </div>
+      `;
+      container.appendChild(group);
+    }
+    document.getElementById('statMembers').textContent = total;
+  }
+  function renderAdmin() {
+    // Populate settings fields
+    document.getElementById('adminServerCode').value = settings.serverCode || '';
+    document.getElementById('adminDiscordLink').value = settings.discordLink || '';
+    document.getElementById('adminBgUrl').value = settings.bgUrl || '';
+    document.getElementById('currentBgDisplay').textContent = settings.bgUrl || '(kein Bild)';
+    const container = document.getElementById('adminRanks');
+    container.innerHTML = '';
+    for (const [rank, members] of Object.entries(team)) {
+      const sec = document.createElement('div');
+      sec.className = 'admin-section';
+      sec.innerHTML = `
+        <div class="admin-section-title" style="border-left-color: ${rankColors[rank]}">${rank}</div>
+        <div class="member-list-admin" id="list_${rank}">
+          ${members.map((m, i) => `
+            <div class="admin-member-item">
+              <span class="admin-member-name">${m}</span>
+              <button class="btn-remove" onclick="removeMember('${rank}', ${i})">Entfernen</button>
+            </div>
+          `).join('')}
+        </div>
+        <div class="add-member-row">
+          <input type="text" id="input_${rank}" placeholder="${rank} hinzufügen..." onkeydown="if(event.key==='Enter')addMember('${rank}')">
+          <button class="btn-add" onclick="addMember('${rank}')">+ Hinzufügen</button>
+        </div>
+      `;
+      container.appendChild(sec);
+    }
+  }
+  function saveServerCode() {
+    const val = document.getElementById('adminServerCode').value.trim();
+    if (!val) return;
+    settings.serverCode = val;
+    saveSettings(settings);
+    applySettings();
+    showSaved();
+  }
+  function saveDiscordLink() {
+    const val = document.getElementById('adminDiscordLink').value.trim();
+    if (!val) return;
+    settings.discordLink = val;
+    saveSettings(settings);
+    applySettings();
+    showSaved();
+  }
+  function saveBgUrl() {
+    const val = document.getElementById('adminBgUrl').value.trim();
+    settings.bgUrl = val;
+    saveSettings(settings);
+    applySettings();
+    document.getElementById('currentBgDisplay').textContent = val || '(kein Bild)';
+    showSaved();
+  }
+  function removeBgUrl() {
+    settings.bgUrl = '';
+    document.getElementById('adminBgUrl').value = '';
+    saveSettings(settings);
+    applySettings();
+    document.getElementById('currentBgDisplay').textContent = '(kein Bild)';
+    showSaved();
+  }
+  function removeMember(rank, idx) {
+    team[rank].splice(idx, 1);
+    saveTeam(team);
+    renderAdmin();
+    renderTeam();
+    showSaved();
+  }
+  function addMember(rank) {
+    const input = document.getElementById(`input_${rank}`);
+    const name = input.value.trim();
+    if (!name) return;
+    team[rank].push(name);
+    input.value = '';
+    saveTeam(team);
+    renderAdmin();
+    renderTeam();
+    showSaved();
+  }
+  function showSaved() {
+    const n = document.getElementById('savedNotice');
+    n.classList.add('show');
+    setTimeout(() => n.classList.remove('show'), 2000);
+  }
+  function showLogin() {
+    document.getElementById('mainPage').style.display = 'none';
+    document.getElementById('loginPage').classList.add('active');
+    document.getElementById('adminPanel').classList.remove('active');
+    document.getElementById('loginError').textContent = '';
+    document.getElementById('passwordInput').value = '';
+    setTimeout(() => document.getElementById('passwordInput').focus(), 100);
+  }
+  function showMain() {
+    document.getElementById('mainPage').style.display = 'block';
+    document.getElementById('loginPage').classList.remove('active');
+    document.getElementById('adminPanel').classList.remove('active');
+  }
+  function showAdmin() {
+    document.getElementById('mainPage').style.display = 'none';
+    document.getElementById('loginPage').classList.remove('active');
+    document.getElementById('adminPanel').classList.add('active');
+    renderAdmin();
+  }
+  function doLogin() {
+    const pw = document.getElementById('passwordInput').value;
+    const err = document.getElementById('loginError');
+    if (pw === ADMIN_PW) {
+      err.textContent = '';
+      showAdmin();
+    } else {
+      err.textContent = 'Falsches Passwort';
+      document.getElementById('passwordInput').value = '';
+      document.getElementById('passwordInput').focus();
+    }
+  }
+  function logout() { showMain(); }
+  function scrollToPartner() {
+    showMain();
+    setTimeout(() => {
+      const el = document.getElementById('partner');
+      if (el) el.scrollIntoView({ behavior: 'smooth' });
+    }, 150);
+  }
+  function scrollToTeam() {
+    setTimeout(() => {
+      const el = document.getElementById('team');
+      if (el) el.scrollIntoView({ behavior: 'smooth' });
+    }, 100);
+  }
+  function spawnParticles() {
+    const container = document.getElementById('particles');
+    for (let i = 0; i < 30; i++) {
+      const p = document.createElement('div');
+      p.className = 'particle';
+      p.style.left = Math.random() * 100 + '%';
+      p.style.animationDuration = (8 + Math.random() * 12) + 's';
+      p.style.animationDelay = (-Math.random() * 20) + 's';
+      p.style.setProperty('--drift', (Math.random() * 100 - 50) + 'px');
+      p.style.width = (1 + Math.random() * 2) + 'px';
+      p.style.height = p.style.width;
+      if (Math.random() > 0.6) p.style.background = '#ff6a00';
+      if (Math.random() > 0.8) p.style.background = '#ffd700';
+      container.appendChild(p);
+    }
+  }
+  // Init
+  renderTeam();
+  applySettings();
+  spawnParticles();
+</script>
+</body>
 </html>