Tools for the Atmosphere
tools.slices.network
slices.network
quickslice
atproto
html
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Tools</title>
7 <style>
8 /* CSS Reset */
9 *,
10 *::before,
11 *::after {
12 box-sizing: border-box;
13 }
14 * {
15 margin: 0;
16 }
17 body {
18 line-height: 1.5;
19 -webkit-font-smoothing: antialiased;
20 }
21
22 :root {
23 --bg-primary: #fafaf9;
24 --bg-card: #ffffff;
25 --text-primary: #1c1917;
26 --text-secondary: #78716c;
27 --accent: #7c3aed;
28 --border: #e7e5e4;
29 }
30
31 body {
32 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
33 background: var(--bg-primary);
34 color: var(--text-primary);
35 min-height: 100vh;
36 padding: 3rem 1rem;
37 }
38
39 #app {
40 max-width: 500px;
41 margin: 0 auto;
42 }
43
44 header {
45 text-align: center;
46 margin-bottom: 2.5rem;
47 }
48
49 .logo {
50 width: 64px;
51 height: 64px;
52 margin: 0 auto 1rem;
53 }
54
55 header h1 {
56 font-size: 1.75rem;
57 font-weight: 700;
58 color: var(--text-primary);
59 margin-bottom: 0.25rem;
60 }
61
62 .tagline {
63 color: var(--text-secondary);
64 font-size: 0.875rem;
65 }
66
67 .tools-list {
68 display: flex;
69 flex-direction: column;
70 gap: 0.75rem;
71 }
72
73 .tool-card {
74 display: block;
75 background: var(--bg-card);
76 border-radius: 0.75rem;
77 padding: 1.25rem;
78 border: 1px solid var(--border);
79 text-decoration: none;
80 transition:
81 box-shadow 0.15s,
82 transform 0.15s;
83 }
84
85 .tool-card:hover {
86 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
87 transform: translateY(-2px);
88 }
89
90 .tool-header {
91 display: flex;
92 align-items: center;
93 gap: 0.75rem;
94 margin-bottom: 0.5rem;
95 }
96
97 .tool-icon {
98 font-size: 1.5rem;
99 }
100
101 .tool-name {
102 font-size: 1rem;
103 font-weight: 600;
104 color: var(--text-primary);
105 }
106
107 .tool-description {
108 color: var(--text-secondary);
109 font-size: 0.875rem;
110 line-height: 1.4;
111 }
112 </style>
113 <script src="https://cdn.jsdelivr.net/gh/bigmoves/elements@v0.1.0/dist/elements.min.js"></script>
114 </head>
115 <body>
116 <div id="app">
117 <header>
118 <svg class="logo" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
119 <defs>
120 <linearGradient id="board1" x1="0%" y1="0%" x2="100%" y2="100%">
121 <stop offset="0%" stop-color="#FF6347" />
122 <stop offset="100%" stop-color="#FF4500" />
123 </linearGradient>
124 <linearGradient id="board2" x1="0%" y1="0%" x2="100%" y2="100%">
125 <stop offset="0%" stop-color="#00CED1" />
126 <stop offset="100%" stop-color="#4682B4" />
127 </linearGradient>
128 </defs>
129 <g transform="translate(64, 64)">
130 <ellipse cx="0" cy="-28" rx="50" ry="20" fill="url(#board1)" />
131 <ellipse cx="0" cy="0" rx="60" ry="20" fill="url(#board2)" />
132 <ellipse cx="0" cy="28" rx="40" ry="20" fill="#32CD32" />
133 </g>
134 </svg>
135 <h1>Tools</h1>
136 <qs-tangled-stars
137 handle="slices.network"
138 repo="tools"
139 instance="https://quickslice-production-ddc3.up.railway.app"
140 style="margin-bottom: 0.75rem"
141 ></qs-tangled-stars>
142 <p class="tagline">Apps for the Atmosphere</p>
143 </header>
144 <main class="tools-list">
145 <a href="teal-plays" class="tool-card">
146 <div class="tool-header">
147 <span class="tool-icon">🎵</span>
148 <span class="tool-name">Teal Plays</span>
149 </div>
150 <div class="tool-description">
151 Live music feed from the Atmosphere. See what everyone is listening to in real-time.
152 </div>
153 </a>
154 <a href="teal-scrobble" class="tool-card">
155 <div class="tool-header">
156 <span class="tool-icon">🎧</span>
157 <span class="tool-name">Teal Scrobble</span>
158 </div>
159 <div class="tool-description">
160 Manually log what you're listening to. Search MusicBrainz and scrobble to Teal.
161 </div>
162 </a>
163 <a href="statusphere" class="tool-card">
164 <div class="tool-header">
165 <span class="tool-icon">😎</span>
166 <span class="tool-name">Statusphere</span>
167 </div>
168 <div class="tool-description">
169 Set your status on the Atmosphere. Share how you're feeling with a single emoji.
170 </div>
171 </a>
172 <a href="lexicon-validator" class="tool-card">
173 <div class="tool-header">
174 <span class="tool-icon" style="color: #0066cc">{ }</span>
175 <span class="tool-name">Lexicon Validator</span>
176 </div>
177 <div class="tool-description">Validate AT Protocol lexicon schemas and records.</div>
178 </a>
179 <a href="lexicon-publisher" class="tool-card">
180 <div class="tool-header">
181 <span class="tool-icon" style="color: #0066cc">{ }</span>
182 <span class="tool-name">Lexicon Publisher</span>
183 </div>
184 <div class="tool-description">Publish lexicon schemas to your PDS.</div>
185 </a>
186 <a href="lexicon-explorer" class="tool-card">
187 <div class="tool-header">
188 <span class="tool-icon" style="color: #0066cc">{ }</span>
189 <span class="tool-name">Lexicon Explorer</span>
190 </div>
191 <div class="tool-description">Browse and discover published ATProto lexicons.</div>
192 </a>
193 <a href="bugs" class="tool-card">
194 <div class="tool-header">
195 <span class="tool-icon">🐛</span>
196 <span class="tool-name">Bug Tracker</span>
197 </div>
198 <div class="tool-description">Browse and submit bugs across the Atmosphere.</div>
199 </a>
200 <a href="tangled-repos" class="tool-card">
201 <div class="tool-header">
202 <span class="tool-icon" style="display: flex; align-items: center"
203 ><svg width="24" height="24" viewBox="0 0 25 25" fill="#000">
204 <path
205 d="m 16.35,24.11 c -0.79,-0.01 -1.38,-0.23 -2.03,-0.63 -0.93,-0.49 -1.64,-1.31 -2.15,-2.22 -0.81,1 -1.89,1.61 -3.1,1.95 -0.51,0.15 -1.41,0.3 -2.91,-0.24 -2.15,-0.72 -3.72,-2.97 -3.54,-5.25 -0.03,-0.95 0.31,-1.88 0.8,-2.67 -1.31,-0.7 -2.37,-1.88 -2.78,-3.32 -0.25,-0.79 -0.24,-1.64 -0.15,-2.45 0.33,-1.92 1.77,-3.58 3.62,-4.18 0.74,-1.68 2.35,-2.94 4.18,-3.19 1.21,-0.17 2.47,0.08 3.53,0.7 1.54,-1.71 4.24,-2.22 6.29,-1.17 1.57,0.75 2.69,2.31 2.96,4.02 1.49,0.6 2.75,1.82 3.24,3.36 0.33,0.96 0.34,2.01 0.13,3 -0.38,1.54 -1.47,2.84 -2.87,3.56 0,0.27 0.9,2.24 0.75,3.73 -0.03,1.86 -1.21,3.62 -2.85,4.48 -0.95,0.56 -2.08,0.55 -3.12,0.54 z m -4.47,-5.35 c 1.32,-0.15 2.19,-1.3 2.86,-2.34 0.32,-0.47 0.56,-1 0.8,-1.51 0.31,0.29 0.58,0.83 1.07,0.96 0.52,0.16 1.13,0.03 1.45,-0.44 0.61,-1.14 0.31,-2.52 -0.05,-3.7 -0.22,-0.68 -0.5,-1.38 -1.05,-1.86 0.12,-0.82 -0.37,-1.66 -1.06,-2.09 -0.59,0.47 -1.49,0.47 -2.06,-0.03 -1.09,1.11 -2.09,1.08 -3.06,0.19 -0.22,-0.2 -0.63,1.21 -2.09,0.41 -0.84,0.7 -1.48,1.38 -2.06,2.35 -0.56,1.05 -1.14,1.98 -1.19,3.11 -0.02,0.66 0.49,1.36 1.2,1.31 0.7,0.06 1.18,-0.63 1.71,-0.92 0.08,0.93 0.17,1.92 0.48,2.83 0.36,1.17 1.63,1.92 2.83,1.75 0.08,-0.01 0.22,-0.02 0.22,-0.02 z m 0.69,-3.5 c -0.64,-0.39 -0.33,-1.25 -0.36,-1.87 0.06,-0.75 0.12,-1.54 0.45,-2.22 0.36,-0.49 1.23,-0.3 1.27,0.33 -0.03,0.63 -0.31,1.25 -0.28,1.91 -0.07,0.54 0.05,1.15 -0.19,1.65 -0.2,0.28 -0.6,0.36 -0.89,0.21 z m -2.81,-0.36 c -0.61,-0.33 -0.41,-1.16 -0.51,-1.73 0.08,-0.67 0.01,-1.51 0.57,-1.98 0.55,-0.38 1.29,0.27 1.03,0.87 -0.27,0.76 -0.09,1.58 -0.09,2.35 -0.1,0.45 -0.59,0.69 -1,0.49 z"
206 transform="translate(-0.43,-0.88)"
207 /></svg
208 ></span>
209 <span class="tool-name">Tangled Repos</span>
210 </div>
211 <div class="tool-description">Browse and search repositories from Tangled.</div>
212 </a>
213 <a href="docs" class="tool-card">
214 <div class="tool-header">
215 <span class="tool-icon">📄</span>
216 <span class="tool-name">Docs</span>
217 </div>
218 <div class="tool-description">Create and share documents.</div>
219 </a>
220 </main>
221 </div>
222 </body>
223</html>