65 lines
2.8 KiB
HTML
65 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Styles — rokojori</title>
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body { font-family: system-ui, sans-serif; background: #111; color: #eee; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
|
||
|
||
.hero { text-align: center; padding: 2rem; }
|
||
.hero h1 { font-size: 5rem; font-weight: 900; letter-spacing: 0.15em; color: #fff; margin-bottom: 1.5rem; }
|
||
.hero p { color: #666; margin-bottom: 2rem; font-size: 1rem; }
|
||
.hero a.btn { display: inline-block; padding: 0.65rem 1.75rem; background: #2563eb; color: #fff; text-decoration: none; border-radius: 4px; font-size: 0.95rem; }
|
||
.hero a.btn:hover { background: #1d4ed8; }
|
||
|
||
.sections { width: 100%; max-width: 480px; padding: 2rem; }
|
||
.sections h2 { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: #555; margin-bottom: 1.25rem; }
|
||
.section-link { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; background: #1c1c1c; border: 1px solid #2a2a2a; border-radius: 6px; text-decoration: none; color: #eee; margin-bottom: 0.75rem; }
|
||
.section-link:hover { border-color: #444; background: #222; }
|
||
.section-link .label { font-size: 0.95rem; }
|
||
.section-link .arrow { color: #555; font-size: 1.1rem; }
|
||
|
||
#no-access { text-align: center; padding: 2rem; }
|
||
#no-access p { color: #666; margin-bottom: 1.5rem; }
|
||
#no-access a { color: #2563eb; text-decoration: none; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div id="hero" class="hero" hidden>
|
||
<h1>STYLES</h1>
|
||
<p>Font and asset hosting for rokojori projects.</p>
|
||
<a class="btn" href="https://account.rokojori.com/login?redirect=https://styles.rokojori.com">Log in</a>
|
||
</div>
|
||
|
||
<div id="sections" class="sections" hidden>
|
||
<h2>Sections</h2>
|
||
<a href="/list-fonts" class="section-link">
|
||
<span class="label">List fonts</span>
|
||
<span class="arrow">›</span>
|
||
</a>
|
||
<a href="/add-fonts" class="section-link">
|
||
<span class="label">Add fonts</span>
|
||
<span class="arrow">›</span>
|
||
</a>
|
||
</div>
|
||
|
||
<div id="no-access" hidden>
|
||
<p>Your account does not have access to Styles.</p>
|
||
<a href="https://account.rokojori.com/profile.html">Manage account</a>
|
||
</div>
|
||
|
||
<script>
|
||
fetch('/api/fonts')
|
||
.then(res => {
|
||
if (res.ok) { document.getElementById('sections').hidden = false; }
|
||
else if (res.status === 403) { document.getElementById('no-access').hidden = false; }
|
||
else { document.getElementById('hero').hidden = false; }
|
||
})
|
||
.catch(() => { document.getElementById('hero').hidden = false; });
|
||
</script>
|
||
</body>
|
||
</html>
|