Initial landing page
This commit is contained in:
Christian Krakau-Louis
+77
@@ -0,0 +1,77 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>LeagueLedger | Loyalty, events, and rewards for leagues</title>
|
||||
<meta name="description" content="LeagueLedger manages league loyalty programs, event participation, team standings, and QR-code rewards.">
|
||||
<meta property="og:title" content="LeagueLedger">
|
||||
<meta property="og:description" content="Track triumphs, reward participation, and manage league engagement.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://www.leagueledger.net/">
|
||||
<link rel="canonical" href="https://www.leagueledger.net/">
|
||||
<style>
|
||||
:root { --ink: #172026; --muted: #607080; --line: #d7dee6; --bg: #f4f8fb; --brand: #126b54; --accent: #d89b22; }
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; background: var(--bg); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
|
||||
header, section, footer { max-width: 1120px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
|
||||
header { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
|
||||
.brand { font-size: 1.2rem; font-weight: 850; }
|
||||
nav { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
|
||||
a { color: var(--brand); text-decoration: none; font-weight: 700; }
|
||||
.button { min-height: 44px; padding: 0 18px; border-radius: 8px; display: inline-flex; align-items: center; color: white; background: var(--brand); }
|
||||
.hero { padding-top: 54px; padding-bottom: 36px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 44px; align-items: center; }
|
||||
h1 { font-size: clamp(2.4rem, 6vw, 4.8rem); line-height: 1; margin: 0; letter-spacing: 0; }
|
||||
.lead { margin: 24px 0 30px; color: var(--muted); font-size: 1.16rem; line-height: 1.65; max-width: 650px; }
|
||||
.scoreboard { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 24px; box-shadow: 0 24px 50px rgba(23,32,38,.08); }
|
||||
.row { display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: center; }
|
||||
.row:last-child { border-bottom: 0; }
|
||||
.rank { width: 36px; height: 36px; border-radius: 50%; background: #eef5f2; display: grid; place-items: center; font-weight: 850; color: var(--brand); }
|
||||
.points { color: var(--accent); font-weight: 850; }
|
||||
section { padding-top: 32px; padding-bottom: 32px; }
|
||||
h2 { font-size: 1.8rem; margin: 0 0 18px; }
|
||||
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
|
||||
.card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 22px; min-height: 156px; }
|
||||
.card h3 { margin: 0 0 10px; }
|
||||
.card p, footer p { margin: 0; color: var(--muted); line-height: 1.55; }
|
||||
footer { margin-top: 24px; padding-top: 28px; padding-bottom: 42px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
|
||||
@media (max-width: 820px) { header { align-items: flex-start; flex-direction: column; padding-top: 24px; } .hero { grid-template-columns: 1fr; padding-top: 34px; } .grid { grid-template-columns: 1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="brand">LeagueLedger</div>
|
||||
<nav aria-label="Primary">
|
||||
<a href="https://github.com/christianlouis/LeagueLedger">GitHub</a>
|
||||
<a class="button" href="https://app.leagueledger.net/">Open app</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section class="hero">
|
||||
<div>
|
||||
<h1>Track participation. Reward momentum.</h1>
|
||||
<p class="lead">LeagueLedger helps leagues and event organizers manage teams, loyalty points, QR-code rewards, and standings from one focused web application.</p>
|
||||
<a class="button" href="https://app.leagueledger.net/">Open production instance</a>
|
||||
</div>
|
||||
<aside class="scoreboard" aria-label="Example league standings">
|
||||
<div class="row"><span class="rank">1</span><strong>North Stand</strong><span class="points">840</span></div>
|
||||
<div class="row"><span class="rank">2</span><strong>Quiz Kings</strong><span class="points">790</span></div>
|
||||
<div class="row"><span class="rank">3</span><strong>Late Entries</strong><span class="points">735</span></div>
|
||||
<div class="row"><span class="rank">4</span><strong>Bonus Round</strong><span class="points">690</span></div>
|
||||
</aside>
|
||||
</section>
|
||||
<section>
|
||||
<h2>What it manages</h2>
|
||||
<div class="grid">
|
||||
<article class="card"><h3>Teams and members</h3><p>Maintain profiles, teams, participation history, and OAuth-backed access.</p></article>
|
||||
<article class="card"><h3>QR-code rewards</h3><p>Create redemption flows for attendance, promotions, rewards, and league events.</p></article>
|
||||
<article class="card"><h3>Leaderboards</h3><p>Surface standings and progress in a way participants can understand at a glance.</p></article>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>LeagueLedger is an open-source project by Christian Krakau-Louis.</p>
|
||||
<p><a href="mailto:christianlouis@gmail.com">Contact</a> · <a href="https://github.com/christianlouis/LeagueLedger">Source</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user