Login page
eric
parent
3e0822df3b
commit
a7467f6f25
|
|
@ -1,18 +1,79 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Spotify – Zuletzt gehörte Songs</title>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Spotify Roulette – Login</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{
|
||||
--bg:#121212; --card:#181818; --border:#282828; --text:#fff;
|
||||
--muted:#b3b3b3; --accent:#1db954; --accent-press:#169e47; --glow:rgba(29,185,84,.25);
|
||||
--radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35)
|
||||
}
|
||||
*{box-sizing:border-box}
|
||||
html,body{height:100%}
|
||||
body{
|
||||
margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
|
||||
color:var(--text);
|
||||
background: radial-gradient(1000px 500px at 20% -10%, rgba(29,185,84,.14), transparent 60%),
|
||||
radial-gradient(900px 450px at 110% -20%, rgba(29,185,84,.12), transparent 70%),
|
||||
var(--bg);
|
||||
display:grid; place-items:center; padding:24px;
|
||||
}
|
||||
.shell{width:100%; max-width:560px}
|
||||
header{display:flex; align-items:center; gap:12px; margin-bottom:18px}
|
||||
.logo{width:40px; height:40px; border-radius:50%; background:var(--accent);
|
||||
display:grid; place-content:center; color:#121212; box-shadow:0 0 0 6px var(--glow)}
|
||||
h1{margin:0; font-size:24px; letter-spacing:.2px}
|
||||
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)}
|
||||
.card .bd{padding:22px}
|
||||
p.muted{color:var(--muted); margin:8px 0 0}
|
||||
label{display:block; color:var(--muted); margin-bottom:6px}
|
||||
input[type="text"]{
|
||||
width:100%; background:#0f0f0f; color:var(--text);
|
||||
border:1px solid var(--border); border-radius:12px; padding:12px 14px; outline:none;
|
||||
}
|
||||
input:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--glow)}
|
||||
.row{display:flex; gap:12px; align-items:center; margin-top:14px}
|
||||
.btn{border:0; padding:12px 16px; border-radius:999px; font-weight:700; cursor:pointer;
|
||||
transition:transform .06s ease, filter .15s ease, background .2s ease}
|
||||
.btn:active{transform:translateY(1px)}
|
||||
.btn-primary{background:var(--accent); color:#0a0a0a}
|
||||
.btn-primary:hover{filter:brightness(1.05)}
|
||||
.btn-primary:active{background:var(--accent-press)}
|
||||
.hint{display:flex; gap:8px; align-items:center; margin-top:14px; color:var(--muted); font-size:14px}
|
||||
.pill{display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius:999px;
|
||||
border:1px solid var(--border); background:#101010; color:var(--muted); font-size:12px}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Spotify – Zuletzt gehörte Songs</h1>
|
||||
<form id="usernameForm">
|
||||
<label for="username">Benutzername:</label>
|
||||
<input type="text" id="username" name="username" required>
|
||||
<button type="submit">Weiter mit Spotify</button>
|
||||
</form>
|
||||
<ul id="tracks"></ul>
|
||||
<div class="shell">
|
||||
<header>
|
||||
<div class="logo" aria-hidden="true">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2 2 7l10 5 10-5-10-5Zm10 7-10 5v9l10-5V9ZM2 9v9l10 5v-9L2 9Z"/></svg>
|
||||
</div>
|
||||
<h1>Spotify Roulette</h1>
|
||||
<span class="pill" style="margin-left:auto">Status: <b style="color:#fff">Abgemeldet</b></span>
|
||||
</header>
|
||||
|
||||
<section class="card" aria-label="Login">
|
||||
<div class="bd">
|
||||
<form id="usernameForm" autocomplete="on">
|
||||
<label for="username">Benutzername</label>
|
||||
<input id="username" name="username" type="text" placeholder="Dein Name" required />
|
||||
<div class="row">
|
||||
<button class="btn btn-primary" type="submit">Weiter mit Spotify</button>
|
||||
</div>
|
||||
</form>
|
||||
<p class="hint">Du wirst zu Spotify weitergeleitet, um die Berechtigungen zu bestätigen.</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Dein bestehendes Script beibehalten -->
|
||||
<script type="module" src="/js/login.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue