75 lines
3.5 KiB
HTML
75 lines
3.5 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>
|
||
<section id="phone" class="phone hidden">
|
||
<div class="camera-dot"></div>
|
||
<header class="status"><span id="time">12:00</span><span>DEVX LTE ▰</span></header>
|
||
|
||
<main>
|
||
<section id="home" class="screen">
|
||
<div class="home-heading">
|
||
<small>DEVX-CITY</small>
|
||
<h1>Hallo, <span id="firstName">Spieler</span>.</h1>
|
||
<p id="ownNumber">555-0000</p>
|
||
</div>
|
||
<div class="apps">
|
||
<button data-app="bank"><span class="bank-icon">$</span><b>Bank</b></button>
|
||
<button data-app="contacts"><span class="contacts-icon">●</span><b>Kontakte</b></button>
|
||
<button data-app="messages"><span class="messages-icon">✉</span><b>Nachrichten</b></button>
|
||
<button data-app="profile"><span class="profile-icon">DX</span><b>Profil</b></button>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="bank" class="screen hidden">
|
||
<div class="app-header"><button class="back">‹</button><h2>DevX Bank</h2><button class="refresh">↻</button></div>
|
||
<article class="bank-card">
|
||
<small>VERFÜGBAR</small>
|
||
<strong id="balance">0 $</strong>
|
||
<span id="accountNumber">–</span>
|
||
</article>
|
||
<div id="bankError" class="inline-error hidden"></div>
|
||
<form id="transferForm" class="phone-form">
|
||
<h3>Überweisen</h3>
|
||
<input name="destination" placeholder="Empfängerkonto" required>
|
||
<input name="amount" type="number" min="1" step="1" placeholder="Betrag" required>
|
||
<input name="reference" maxlength="140" placeholder="Verwendungszweck" value="Überweisung">
|
||
<button type="submit">Überweisen</button>
|
||
</form>
|
||
<h3 class="history-title">Letzte Buchungen</h3>
|
||
<div id="transactions" class="transactions"></div>
|
||
</section>
|
||
|
||
<section id="contacts" class="screen hidden">
|
||
<div class="app-header"><button class="back">‹</button><h2>Kontakte</h2><span></span></div>
|
||
<form id="contactForm" class="phone-form compact">
|
||
<input name="contactName" placeholder="Name" required>
|
||
<input name="phoneNumber" placeholder="555-0000" required>
|
||
<button type="submit">Kontakt speichern</button>
|
||
</form>
|
||
<div id="contactError" class="inline-error hidden"></div>
|
||
<div id="contactList" class="contact-list"></div>
|
||
</section>
|
||
|
||
<section id="profile" class="screen hidden">
|
||
<div class="app-header"><button class="back">‹</button><h2>Profil</h2><span></span></div>
|
||
<div class="profile-card"><span>DX</span><h2 id="profileName">Spieler</h2><p id="profileNumber">555-0000</p></div>
|
||
<div class="profile-row"><span>RP-Erfahrung</span><strong id="rpXp">0 XP</strong></div>
|
||
<div class="profile-row"><span>Charakter-ID</span><strong id="characterId">–</strong></div>
|
||
</section>
|
||
|
||
<section id="messages" class="screen hidden">
|
||
<div class="app-header"><button class="back">‹</button><h2>Nachrichten</h2><span></span></div>
|
||
<div class="empty-state"><strong>Noch keine Nachrichten</strong><p>SMS und Anrufe folgen in der nächsten Telefon-Ausbaustufe.</p></div>
|
||
</section>
|
||
</main>
|
||
<button id="homeButton" aria-label="Handy schließen"></button>
|
||
</section>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|