A Chrome extension that scrobbles NTS Radio tracks to teal.fm
chadtmiller.com
1<!DOCTYPE html>
2<html>
3
4<head>
5 <meta charset="UTF-8">
6 <title>NTS Radio Scrobbler</title>
7 <link rel="stylesheet" href="styles.css">
8</head>
9
10<body>
11 <div class="container">
12 <h1>NTS Radio Scrobbler</h1>
13
14 <div id="auth-section">
15 <div id="login-form">
16 <h2>Login to the AT Protocol</h2>
17 <input type="text" id="pds-url" placeholder="PDS URL (default: https://bsky.social)" />
18 <input type="text" id="identifier" placeholder="Handle" />
19 <input type="password" id="password" placeholder="App Password" />
20 <button id="login-btn">Login</button>
21 <div id="error-msg" class="error"></div>
22 </div>
23
24 <div id="logged-in" style="display: none;">
25 <h2>Connected to the AT Protocol</h2>
26 <p id="user-info"></p>
27 <button id="logout-btn">Logout</button>
28 </div>
29 </div>
30
31 <div id="now-playing-section">
32 <h2>Now Playing</h2>
33 <div id="current-track">
34 <p class="info">No track detected</p>
35 </div>
36 <div id="recent-scrobbles">
37 <h3>Recent Scrobbles</h3>
38 <div id="recent-tracks-list">
39 <p class="info small">No recent scrobbles</p>
40 </div>
41 </div>
42 </div>
43
44 <div id="settings-section">
45 <h2>Settings</h2>
46 <label>
47 <input type="checkbox" id="auto-scrobble" checked />
48 Auto-scrobble tracks
49 </label>
50 </div>
51
52 <div id="status-section">
53 <p class="info">Visit <a href="https://www.nts.live" target="_blank">nts.live</a> and start listening to scrobble
54 tracks!</p>
55 </div>
56 </div>
57
58 <script src="popup.js"></script>
59</body>
60
61</html>