Files
void-genesis/lobby-frontend/index.html
T

156 lines
6.4 KiB
HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Void-Genesis | Login</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="game-wrapper">
<div id="pixi-container"></div>
<div id="ui-layer">
<div id="dev-warning-banner">
<span class="warning-icon"></span>
<strong>DEV-BUILD:</strong> Das Spiel befindet sich in der Entwicklung.
Die Registrierung ist derzeit deaktiviert (E-Mail-System pausiert).
</div>
<form id="register-form" autocomplete="off">
<div id="tab-container">
<button type="button" class="tab-btn active" id="tab-login" data-i18n="tab_login">Login</button>
<button type="button" class="tab-btn" id="tab-register" data-i18n="tab_register">Registrieren</button>
</div>
<p id="otp-instruction" data-i18n="txt_otp_instruction">
Bitte gib den 6-stelligen Code aus deiner E-Mail ein.
</p>
<div class="input-group">
<label for="username">Benutzername</label>
<input type="text" id="username" required>
</div>
<div class="input-group" id="group-email">
<label for="email">E-Mail</label>
<input type="email" id="email" required>
</div>
<div class="input-group">
<label for="password">Passwort</label>
<input type="password" id="password" required>
</div>
<div class="checkbox-group" id="group-remember" style="display: none;">
<input type="checkbox" id="remember">
<label for="remember" data-i18n="lbl_remember">Angemeldet bleiben</label>
</div>
<div class="checkbox-group" id="group-agb">
<input type="checkbox" id="agb" required>
<label for="agb" data-i18n="lbl_agb">Ich akzeptiere die AGB & Spielregeln</label>
</div>
<div id="msg-box"></div>
<button type="submit" id="btn-register" data-i18n="btn_register">Jetzt kostenlos registrieren</button>
<a href="#" id="resend-otp-link" data-i18n="link_resend_otp" style="display: none;">Code erneut senden</a>
<a href="#" id="forgot-password-link" data-i18n="link_forgot_password" style="display: none;">Passwort vergessen?</a>
<a href="#" id="back-link" data-i18n="link_back" style="display: none;">« Zurück</a>
<a href="https://discord.gg/agQhwDdVfK" target="_blank" id="discord-link"></a>
</form>
</div>
<div id="sector-browser-layer" style="display: none;">
<div id="sector-tab-container">
<button type="button" class="tab-btn active" id="tab-last-sector">Zuletzt gespielt</button>
<button type="button" class="tab-btn active" id="tab-my-sectors">Meine Sektoren</button>
<button type="button" class="tab-btn" id="tab-new-sectors">Neue Sektoren</button>
</div>
<div id="sector-list-container"></div>
</div>
<div id="sector-onboarding-layer" style="display: none;">
<form id="onboarding-form" autocomplete="off">
<input type="text" id="local-username" placeholder="Benutzername eingeben" required>
<button type="button" id="btn-gender-male" class="gender-btn active" data-gender="male" data-i18n="btn_male">Männlich</button>
<button type="button" id="btn-gender-female" class="gender-btn" data-gender="female" data-i18n="btn_female">Weiblich</button>
<div id="onboarding-msg-box"></div>
<button type="button" id="btn-cancel-onboarding" data-i18n="btn_cancel">Abbrechen</button>
<button type="submit" id="btn-submit-onboarding" data-i18n="btn_join">Beitreten</button>
</form>
</div>
<div id="lobby-ui">
<div id="top-bar">
<div class="top-bar-left"></div>
<div class="top-bar-right">
<div class="custom-dropdown" id="user-dropdown" style="display: none;">
<div class="dropdown-toggle" id="user-toggle">
<span id="lobby-username">Commander</span>
<span class="dropdown-arrow"></span>
</div>
<ul class="dropdown-menu user-menu" id="user-menu">
<li class="dropdown-header disabled">
<small>E-Mail</small><br>
<span id="lobby-email">ladend...</span>
</li>
<li class="dropdown-item disabled">E-Mail ändern</li>
<li class="dropdown-item disabled">Benutzername ändern</li>
<li class="dropdown-divider"></li>
<li class="dropdown-item" id="btn-change-pw">Passwort ändern</li>
<li class="dropdown-divider"></li>
<li class="dropdown-header disabled">
<small>Premium Währung</small><br>
<span class="premium-text">Res_Premium: <span id="lobby-premium">-1</span></span>
</li>
<li class="dropdown-item disabled">Res_Premium aufladen</li>
<li class="dropdown-divider"></li>
<li class="dropdown-item logout-item" id="btn-logout">Logout</li>
</ul>
</div>
<div class="custom-dropdown" id="lang-dropdown">
<div class="dropdown-toggle" id="lang-toggle">
<span class="flag-icon" id="current-flag">🇩🇪</span>
<span id="current-lang-text">DE</span>
<span class="dropdown-arrow"></span>
</div>
<ul class="dropdown-menu" id="lang-menu">
<li class="dropdown-item" data-lang="de">
<span class="flag-icon">🇩🇪</span> Deutsch
</li>
<li class="dropdown-item" data-lang="en">
<span class="flag-icon">🇬🇧</span> English
</li>
</ul>
</div>
</div>
</div>
</div>
<footer id="game-footer">
<div class="footer-left">v 0.0.3.0-dev</div>
<div class="footer-center">&copy; 2026 Void-Genesis</div>
<div class="footer-right">
<a href="impressum.html" target="_blank" data-i18n="link_imprint">Impressum</a> |
<a href="datenschutz.html" target="_blank" data-i18n="link_privacy">Datenschutz</a> |
<a href="agb.html" target="_blank" data-i18n="link_agb">AGB</a> |
<a href="regeln.html" target="_blank" data-i18n="link_rules">Spielregeln</a>
</div>
</footer> </div>
<script type="module" src="src/main.js"></script>
</body>
</html>