teal.fm
1
2{{ define "content" }}
3
4 <h1 class="text-[#1DB954]">Piper - Multi-User Spotify & Last.fm Tracker via ATProto</h1>
5 {{ template "components/navBar" .NavBar }}
6
7
8 <div class="border border-gray-300 rounded-lg p-5 mb-5">
9 <h2 class="text-xl font-semibold mb-2">Welcome to Piper</h2>
10 <p class="mb-3">Piper is a multi-user application that records what you're listening to on Spotify and Last.fm, saving your listening history.</p>
11
12 {{if .NavBar.IsLoggedIn}}
13 <p class="mb-2">You're logged in!</p>
14 <ul class="list-disc pl-5 mb-3">
15 <li><a class="text-[#1DB954] font-bold" href="/login/spotify">Connect your Spotify account</a> to start tracking.</li>
16 <li><a class="text-[#1DB954] font-bold" href="/link-lastfm">Link your Last.fm account</a> to track scrobbles.</li>
17 </ul>
18 <p class="mb-2">Once connected, you can check out your:</p>
19 <ul class="list-disc pl-5 mb-3">
20 <li><a class="text-[#1DB954] font-bold" href="/current-track">Spotify current track</a> or <a class="text-[#1DB954] font-bold" href="/history">listening history</a>.</li>
21 {{ if .NavBar.LastFMUsername }}
22 <li><a class="text-[#1DB954] font-bold" href="/lastfm/recent">Last.fm recent tracks</a>.</li>
23 {{ end }}
24
25 </ul>
26 <p class="mb-3">You can also manage your <a class="text-[#1DB954] font-bold" href="/api-keys">API keys</a> for programmatic access.</p>
27
28 {{ if .NavBar.LastFMUsername }}
29 <p class='italic text-gray-600'>Last.fm Username: {{ .NavBar.LastFMUsername }}</p>
30 {{else }}
31 <p class='italic text-gray-600'>Last.fm account not linked.</p>
32 {{end}}
33
34
35 {{ else }}
36
37 <p class="mb-3">Login with ATProto to get started!</p>
38 <form class="space-y-2" action="/login/atproto">
39 <label class="block" for="handle">handle:</label>
40 <input class="block w-[95%] p-2 border border-gray-300 rounded" type="text" id="handle" name="handle" >
41 <input class="bg-[#1DB954] text-white px-4 py-2.5 rounded cursor-pointer hover:opacity-90" type="submit" value="submit">
42 </form>
43
44
45 {{ end }}
46 </div> <!-- Close card div -->
47
48{{ end }}