Spaces:
Running
Running
| <html lang="de"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DEGBGaming Server GBDE©</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: #00f0ff; | |
| --accent2: #ff003c; | |
| --accent3: #7b2fff; | |
| --text: #e0e8ff; | |
| --dim: #4a5070; | |
| --owner: #ffd700; | |
| --admin: #ff003c; | |
| --mod: #00f0ff; | |
| --supporter: #7b2fff; | |
| } | |
| * { 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; | |
| } | |
| /* Animated bg grid */ | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| inset: 0; | |
| background-image: | |
| linear-gradient(rgba(0,240,255,0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0,240,255,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; } | |
| } | |
| /* Scanlines overlay */ | |
| 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 */ | |
| 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(0,240,255,0.15); | |
| 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(0,240,255,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 */ | |
| .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(0,240,255,0.08) 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(123,47,255,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(--accent3)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| text-shadow: none; | |
| filter: drop-shadow(0 0 30px rgba(0,240,255,0.5)); | |
| } | |
| .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; | |
| } | |
| .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(0,240,255,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(0,240,255,0.4); | |
| } | |
| .btn-outline:hover { | |
| background: rgba(0,240,255,0.08); | |
| border-color: var(--accent); | |
| box-shadow: 0 0 20px rgba(0,240,255,0.2); | |
| transform: translateY(-2px); | |
| } | |
| /* STATS BAR */ | |
| .stats-bar { | |
| position: relative; | |
| z-index: 1; | |
| background: rgba(10,10,18,0.8); | |
| border-top: 1px solid rgba(0,240,255,0.1); | |
| border-bottom: 1px solid rgba(0,240,255,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; | |
| } | |
| /* TEAM SECTION */ | |
| .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 */ | |
| footer { | |
| position: relative; | |
| z-index: 1; | |
| background: rgba(5,5,8,0.95); | |
| border-top: 1px solid rgba(0,240,255,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 PAGE */ | |
| .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(0,240,255,0.2); | |
| padding: 50px 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(0,240,255,0.05); | |
| 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(0,240,255,0.04); | |
| border: 1px solid rgba(0,240,255,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(0,240,255,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(0,240,255,0.15); | |
| } | |
| .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(0,240,255,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(0,240,255,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: var(--accent2); | |
| 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(0,240,255,0.04); | |
| border: 1px solid rgba(0,240,255,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); | |
| } | |
| /* Particle burst on hero */ | |
| .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 */ | |
| .divider { | |
| position: relative; | |
| z-index: 1; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, rgba(0,240,255,0.3), transparent); | |
| } | |
| /* Responsive */ | |
| @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; } | |
| } | |
| .saved-notice { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| background: rgba(0,240,255,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); } | |
| /* PARTNER SECTION */ | |
| .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(0,240,255,0.04) 0%, transparent 60%); | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .partner-card:hover::before { opacity: 1; } | |
| .partner-card:hover { | |
| border-color: rgba(0,240,255,0.4); | |
| box-shadow: 0 0 30px rgba(0,240,255,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(0,240,255,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(0,240,255,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(0,240,255,0.1); | |
| border-color: var(--accent); | |
| box-shadow: 0 0 15px rgba(0,240,255,0.2); | |
| } | |
| .partner-btn svg { transition: transform 0.3s; } | |
| .partner-card:hover .partner-btn svg { transform: translateX(3px); } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- NAV --> | |
| <nav> | |
| <a href="#" class="logo" onclick="showMain()">DEGB<span>Gaming</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="https://discord.gg/GQa2JWNy9D" target="_blank">Discord</a></li> | |
| <li><a href="#" onclick="event.preventDefault(); showLogin()">Admin</a></li> | |
| </ul> | |
| </nav> | |
| <!-- MAIN PAGE --> | |
| <div id="mainPage"> | |
| <!-- HERO --> | |
| <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">DEGBGaming</span> | |
| <span class="line2">Server GBDE©</span> | |
| </h1> | |
| <p class="hero-sub">Kompetitiv. Präzise. Unaufhaltsam.</p> | |
| <div class="hero-buttons"> | |
| <a href="https://discord.gg/GQa2JWNy9D" 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> | |
| <!-- STATS --> | |
| <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> | |
| <!-- TEAM SECTION --> | |
| <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> | |
| <!-- PARTNER SECTION --> | |
| <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">DEGBGaming <span style="color:var(--accent2)">Server GBDE©</span></div> | |
| <p class="footer-text">© 2025 DEGBGaming Server GBDE© — 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">// DEGB TEAM VERWALTUNG</div> | |
| <button class="btn btn-outline" style="font-family:'Orbitron',monospace;font-size:11px;letter-spacing:2px;padding:10px 20px;border:1px solid rgba(0,240,255,0.4);background:transparent;color:var(--accent);cursor:pointer;clip-path:none;" onclick="logout()">Logout</button> | |
| </div> | |
| <div id="adminRanks"></div> | |
| </div> | |
| <div class="saved-notice" id="savedNotice">✓ GESPEICHERT</div> | |
| <script> | |
| // Default team data | |
| const defaultTeam = { | |
| Owner: ["ShadowX"], | |
| Admin: ["Nova", "Blaze"], | |
| Mod: ["Frost", "Viper"], | |
| Supporter: ["Echo", "Drift", "Zara"] | |
| }; | |
| const rankColors = { | |
| Owner: "#ffd700", | |
| Admin: "#ff003c", | |
| Mod: "#00f0ff", | |
| Supporter: "#7b2fff" | |
| }; | |
| const rankClasses = { | |
| Owner: "rank-owner", | |
| Admin: "rank-admin", | |
| Mod: "rank-mod", | |
| Supporter: "rank-supporter" | |
| }; | |
| // Load/save team from localStorage | |
| function loadTeam() { | |
| const stored = localStorage.getItem('degb_team'); | |
| if (stored) return JSON.parse(stored); | |
| return JSON.parse(JSON.stringify(defaultTeam)); | |
| } | |
| function saveTeam(team) { | |
| localStorage.setItem('degb_team', JSON.stringify(team)); | |
| } | |
| let team = loadTeam(); | |
| // Render main team section | |
| 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; | |
| } | |
| // Render admin panel | |
| function renderAdmin() { | |
| 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 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); | |
| } | |
| // Routing (hash-basiert fuer hf.space) | |
| // Login: https://noah33565-gamingserver.hf.space/#/login | |
| function checkRoute() { | |
| const hash = window.location.hash; | |
| if (hash === '#/login') showLogin(false); | |
| else if (hash === '#/admin') { /* bleibt im admin */ } | |
| else showMainView(false); | |
| } | |
| function showLogin(updateHash) { | |
| if (updateHash !== false) window.location.hash = '#/login'; | |
| 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(updateHash) { | |
| if (updateHash !== false) window.location.hash = ''; | |
| document.getElementById('mainPage').style.display = 'block'; | |
| document.getElementById('loginPage').classList.remove('active'); | |
| document.getElementById('adminPanel').classList.remove('active'); | |
| } | |
| function showMainView(updateHash) { showMain(updateHash); } | |
| function showAdmin() { | |
| window.location.hash = '#/admin'; | |
| 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 === 'Fire1234!') { | |
| err.textContent = ''; | |
| showAdmin(); | |
| } else { | |
| err.textContent = 'Falsches Passwort'; | |
| document.getElementById('passwordInput').value = ''; | |
| document.getElementById('passwordInput').focus(); | |
| } | |
| } | |
| function logout() { showMain(); } | |
| function scrollToPartner() { | |
| setTimeout(() => { | |
| const el = document.getElementById('partner'); | |
| if (el) el.scrollIntoView({ behavior: 'smooth' }); | |
| }, 100); | |
| } | |
| function scrollToTeam() { | |
| setTimeout(() => { | |
| const el = document.getElementById('team'); | |
| if (el) el.scrollIntoView({ behavior: 'smooth' }); | |
| }, 100); | |
| } | |
| window.addEventListener('hashchange', checkRoute); | |
| // Particles | |
| 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.7) p.style.background = '#7b2fff'; | |
| if (Math.random() > 0.85) p.style.background = '#ff003c'; | |
| container.appendChild(p); | |
| } | |
| } | |
| // Init | |
| renderTeam(); | |
| spawnParticles(); | |
| checkRoute(); | |
| </script> | |
| </body> | |
| </html> |