slices.network
Tools for the Atmosphere
tools.slices.network
quickslice
atproto
html
chadtmiller.com
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 </head>
114 <body>
115 <div id="app">
116 <header>
117 <svg class="logo" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
118 <defs>
119 <linearGradient id="board1" x1="0%" y1="0%" x2="100%" y2="100%">
120 <stop offset="0%" stop-color="#FF6347" />
121 <stop offset="100%" stop-color="#FF4500" />
122 </linearGradient>
123 <linearGradient id="board2" x1="0%" y1="0%" x2="100%" y2="100%">
124 <stop offset="0%" stop-color="#00CED1" />
125 <stop offset="100%" stop-color="#4682B4" />
126 </linearGradient>
127 </defs>
128 <g transform="translate(64, 64)">
129 <ellipse cx="0" cy="-28" rx="50" ry="20" fill="url(#board1)" />
130 <ellipse cx="0" cy="0" rx="60" ry="20" fill="url(#board2)" />
131 <ellipse cx="0" cy="28" rx="40" ry="20" fill="#32CD32" />
132 </g>
133 </svg>
134 <h1>Tools</h1>
135 <p class="tagline">Apps for the Atmosphere</p>
136 </header>
137 <main class="tools-list">
138 <a href="teal-plays" class="tool-card">
139 <div class="tool-header">
140 <span class="tool-icon">🎵</span>
141 <span class="tool-name">Teal Plays</span>
142 </div>
143 <div class="tool-description">
144 Live music feed from the Atmosphere. See what everyone is listening to in real-time.
145 </div>
146 </a>
147 <a href="statusphere" class="tool-card">
148 <div class="tool-header">
149 <span class="tool-icon">😎</span>
150 <span class="tool-name">Statusphere</span>
151 </div>
152 <div class="tool-description">
153 Set your status on the Atmosphere. Share how you're feeling with a single emoji.
154 </div>
155 </a>
156 <a href="lexicon-validator" class="tool-card">
157 <div class="tool-header">
158 <span class="tool-icon" style="color: #0066cc">{ }</span>
159 <span class="tool-name">Lexicon Validator</span>
160 </div>
161 <div class="tool-description">Validate AT Protocol lexicon schemas and records.</div>
162 </a>
163 </main>
164 </div>
165 </body>
166</html>