An open source supporter broker powered by high-fives.
high-five.atprotofans.com/
atprotofans.com
1{{define "base"}}
2<!DOCTYPE html>
3<html lang="en">
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>{{block "title" .}}High Five{{end}}</title>
8 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
9 <style>
10 .hidden { display: none !important; }
11 .text-center { text-align: center; }
12 .status { display: inline-block; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.875rem; }
13 .status-live { background: var(--pico-ins-color); color: white; }
14 .status-offline { background: var(--pico-muted-border-color); color: var(--pico-muted-color); }
15 .high-five-emoji { font-size: 4rem; display: block; }
16 .high-five-emoji.bounce { animation: bounce 0.5s ease infinite; }
17 @keyframes bounce {
18 0%, 100% { transform: translateY(0); }
19 50% { transform: translateY(-10px); }
20 }
21 header h1 { margin-bottom: 0; }
22 </style>
23</head>
24<body>
25 <main class="container">
26 <header>
27 <nav>
28 <ul>
29 <li><strong>High Five</strong></li>
30 </ul>
31 <ul>
32 <li><a href="/">Home</a></li>
33 {{if .Session}}
34 <li><a href="/high-five">High-Five Room</a></li>
35 <li><a href="/info">Settings</a></li>
36 <li><a href="/logout">Logout</a></li>
37 {{else}}
38 <li><a href="/login">Login</a></li>
39 {{end}}
40 </ul>
41 </nav>
42 </header>
43
44 {{block "content" .}}{{end}}
45
46 <footer>
47 <small>Powered by <a href="https://atproto.com" target="_blank">ATProtocol</a> | <a href="https://tangled.org/atprotofans.com/high-five" target="_blank">Source</a></small>
48 </footer>
49 </main>
50
51 {{block "scripts" .}}{{end}}
52</body>
53</html>
54{{end}}