Add channels page

This commit is contained in:
2025-12-10 18:22:04 +01:00
parent 009ecdc2ca
commit cd77b08df2
10 changed files with 242 additions and 3 deletions

View File

@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Browse channels - Imgfloat</title>
<link rel="stylesheet" href="/css/styles.css" />
</head>
<body class="landing-body">
<div class="landing">
<header class="landing-header">
<div class="brand">
<div class="brand-mark">IF</div>
<div>
<div class="brand-title">Imgfloat</div>
<div class="brand-subtitle">Twitch overlay manager</div>
</div>
</div>
<div class="cta-row">
<a class="button ghost" href="/">Home</a>
<a class="button" href="/oauth2/authorization/twitch">Login</a>
</div>
</header>
<main class="hero hero-compact">
<div class="hero-text">
<p class="eyebrow">Broadcast views</p>
<h1>Open a public channel overlay.</h1>
<p class="lead">Search any broadcaster with published overlays and jump straight to their on-stream view without logging in.</p>
<ul class="pill-list minimal">
<li>Autocomplete from all published overlays</li>
<li>Direct broadcast view links</li>
</ul>
</div>
<div class="hero-panel search-panel">
<div class="panel-header">
<div>
<p class="eyebrow subtle">Search</p>
<h3>Find a broadcaster</h3>
</div>
<span class="badge">Live</span>
</div>
<p class="muted">Type a channel name to get autocomplete suggestions and open the broadcast overlay.</p>
<form id="channel-search-form" class="search-form">
<label class="sr-only" for="channel-search">Search by broadcaster</label>
<div class="search-row">
<input id="channel-search" name="channel" class="text-input" type="text" list="channel-suggestions" placeholder="Search broadcaster..." autocomplete="off" />
<datalist id="channel-suggestions"></datalist>
<button type="submit" class="button secondary">Open</button>
</div>
<p class="muted tiny">Autocomplete shows all broadcasters with published overlays.</p>
</form>
</div>
</main>
<footer class="landing-footer compact">
<div>
<div class="brand-title">Imgfloat</div>
<div class="muted">Ready when you go live.</div>
</div>
<a class="button ghost" href="/oauth2/authorization/twitch">Login</a>
</footer>
</div>
<script src="/js/landing.js"></script>
</body>
</html>

View File

@@ -25,7 +25,7 @@
<p class="lead">Upload artwork, drop it into a shared dashboard, and stay in sync with your mods.</p>
<div class="cta-row">
<a class="button" href="/oauth2/authorization/twitch">Login with Twitch</a>
<span class="muted">Secure OAuth login. No bots needed.</span>
<a class="button ghost" href="/channels">Browse channels</a>
</div>
<ul class="pill-list minimal">
<li>Instant overlay updates</li>