108 lines
4.1 KiB
HTML
108 lines
4.1 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<main id="app" class="hidden">
|
||
<aside class="selector-panel">
|
||
<header class="brand">
|
||
<div class="brand-mark">DX</div>
|
||
<div>
|
||
<p>DEVX-CITY ROLEPLAY</p>
|
||
<h1>Charakterauswahl</h1>
|
||
</div>
|
||
</header>
|
||
|
||
<div id="message" class="message hidden"></div>
|
||
|
||
<section class="character-section">
|
||
<div class="section-heading">
|
||
<span>DEINE CHARAKTERE</span>
|
||
<small id="slotCounter">0 / 3</small>
|
||
</div>
|
||
<div id="characters" class="characters"></div>
|
||
</section>
|
||
|
||
<section class="details">
|
||
<p class="details-kicker">AUSGEWÄHLTER CHARAKTER</p>
|
||
<h2 id="selectedName">Kein Charakter</h2>
|
||
<div class="detail-grid">
|
||
<div><span>Geburtsdatum</span><strong id="selectedDob">–</strong></div>
|
||
<div><span>Charakterplatz</span><strong id="selectedSlot">–</strong></div>
|
||
<div><span>Telefon</span><strong id="selectedPhone">–</strong></div>
|
||
<div><span>Status</span><strong id="selectedStatus">–</strong></div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="main-actions">
|
||
<button id="deleteCharacter" class="danger" disabled>Löschen</button>
|
||
<button id="newCharacter" class="secondary">Neuer Charakter</button>
|
||
<button id="playCharacter" class="primary" disabled>Stadt betreten</button>
|
||
</footer>
|
||
</aside>
|
||
|
||
<div class="preview-hint">
|
||
<span>DEVX-CITY</span>
|
||
<strong>Wähle dein neues Leben.</strong>
|
||
</div>
|
||
|
||
<section id="createOverlay" class="modal-overlay hidden">
|
||
<form id="createForm" class="modal-card create-card">
|
||
<div class="modal-header">
|
||
<div>
|
||
<p>NEUE IDENTITÄT</p>
|
||
<h2>Charakter erstellen</h2>
|
||
</div>
|
||
<button type="button" id="cancelCreate" class="close-button" aria-label="Schließen">×</button>
|
||
</div>
|
||
|
||
<div class="form-grid">
|
||
<label><span>Vorname</span><input name="firstName" minlength="2" maxlength="32" autocomplete="off" required></label>
|
||
<label><span>Nachname</span><input name="lastName" minlength="2" maxlength="32" autocomplete="off" required></label>
|
||
<label><span>Geburtsdatum</span><input name="dateOfBirth" type="date" min="1900-01-01" max="2010-12-31" required></label>
|
||
<label><span>Geschlecht</span>
|
||
<select name="sex" id="sexSelect">
|
||
<option value="m">Männlich</option>
|
||
<option value="f">Weiblich</option>
|
||
<option value="x">Divers</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
|
||
<p class="form-note">Deine Telefonnummer und dein persönliches Bankkonto werden automatisch erstellt.</p>
|
||
<div class="modal-actions">
|
||
<button type="button" id="cancelCreateBottom" class="secondary">Abbrechen</button>
|
||
<button type="submit" class="primary">Charakter erstellen</button>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
|
||
<section id="deleteOverlay" class="modal-overlay hidden">
|
||
<div class="modal-card delete-card">
|
||
<div class="warning-icon">!</div>
|
||
<h2>Charakter dauerhaft löschen?</h2>
|
||
<p id="deleteDescription">Dieser Vorgang kann nicht rückgängig gemacht werden.</p>
|
||
<label class="confirm-label">
|
||
<span>Tippe <strong id="deleteConfirmWord">LÖSCHEN</strong> zur Bestätigung</span>
|
||
<input id="deleteConfirmInput" autocomplete="off" placeholder="LÖSCHEN">
|
||
</label>
|
||
<div class="modal-actions">
|
||
<button id="cancelDelete" class="secondary">Abbrechen</button>
|
||
<button id="confirmDelete" class="danger" disabled>Endgültig löschen</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<section id="dialogue" class="dialogue hidden" aria-live="polite">
|
||
<strong id="dialogueSpeaker">Mason</strong>
|
||
<p id="dialogueText"></p>
|
||
</section>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|