slices.network
Tools for the Atmosphere
tools.slices.network
quickslice
atproto
html
fix: update links and readme
chadtmiller.com
+137
-1
+2
-1
README.md
+2
-1
README.md
···
4
4
5
5
## Tools
6
6
7
-
- [statusphere](https://tools.slices.network/statusphere) - Statusphere client
7
+
- [Teal Plays](https://tools.slices.network/teal-plays) - Live music feed from the Atmosphere
8
+
- [Statusphere](https://tools.slices.network/statusphere) - Set your status on the Atmosphere
+135
index.html
+135
index.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
+
*, *::before, *::after { box-sizing: border-box; }
10
+
* { margin: 0; }
11
+
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
12
+
13
+
:root {
14
+
--bg-primary: #fafaf9;
15
+
--bg-card: #ffffff;
16
+
--text-primary: #1c1917;
17
+
--text-secondary: #78716c;
18
+
--accent: #7c3aed;
19
+
--border: #e7e5e4;
20
+
}
21
+
22
+
body {
23
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
24
+
background: var(--bg-primary);
25
+
color: var(--text-primary);
26
+
min-height: 100vh;
27
+
padding: 3rem 1rem;
28
+
}
29
+
30
+
#app { max-width: 500px; margin: 0 auto; }
31
+
32
+
header { text-align: center; margin-bottom: 2.5rem; }
33
+
34
+
.logo {
35
+
width: 64px;
36
+
height: 64px;
37
+
margin: 0 auto 1rem;
38
+
}
39
+
40
+
header h1 {
41
+
font-size: 1.75rem;
42
+
font-weight: 700;
43
+
color: var(--text-primary);
44
+
margin-bottom: 0.25rem;
45
+
}
46
+
47
+
.tagline { color: var(--text-secondary); font-size: 0.875rem; }
48
+
49
+
.tools-list {
50
+
display: flex;
51
+
flex-direction: column;
52
+
gap: 0.75rem;
53
+
}
54
+
55
+
.tool-card {
56
+
display: block;
57
+
background: var(--bg-card);
58
+
border-radius: 0.75rem;
59
+
padding: 1.25rem;
60
+
border: 1px solid var(--border);
61
+
text-decoration: none;
62
+
transition: box-shadow 0.15s, transform 0.15s;
63
+
}
64
+
65
+
.tool-card:hover {
66
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
67
+
transform: translateY(-2px);
68
+
}
69
+
70
+
.tool-header {
71
+
display: flex;
72
+
align-items: center;
73
+
gap: 0.75rem;
74
+
margin-bottom: 0.5rem;
75
+
}
76
+
77
+
.tool-icon {
78
+
font-size: 1.5rem;
79
+
}
80
+
81
+
.tool-name {
82
+
font-size: 1rem;
83
+
font-weight: 600;
84
+
color: var(--text-primary);
85
+
}
86
+
87
+
.tool-description {
88
+
color: var(--text-secondary);
89
+
font-size: 0.875rem;
90
+
line-height: 1.4;
91
+
}
92
+
</style>
93
+
</head>
94
+
<body>
95
+
<div id="app">
96
+
<header>
97
+
<svg class="logo" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
98
+
<defs>
99
+
<linearGradient id="board1" x1="0%" y1="0%" x2="100%" y2="100%">
100
+
<stop offset="0%" stop-color="#FF6347" />
101
+
<stop offset="100%" stop-color="#FF4500" />
102
+
</linearGradient>
103
+
<linearGradient id="board2" x1="0%" y1="0%" x2="100%" y2="100%">
104
+
<stop offset="0%" stop-color="#00CED1" />
105
+
<stop offset="100%" stop-color="#4682B4" />
106
+
</linearGradient>
107
+
</defs>
108
+
<g transform="translate(64, 64)">
109
+
<ellipse cx="0" cy="-28" rx="50" ry="20" fill="url(#board1)" />
110
+
<ellipse cx="0" cy="0" rx="60" ry="20" fill="url(#board2)" />
111
+
<ellipse cx="0" cy="28" rx="40" ry="20" fill="#32CD32" />
112
+
</g>
113
+
</svg>
114
+
<h1>Tools</h1>
115
+
<p class="tagline">Apps for the Atmosphere</p>
116
+
</header>
117
+
<main class="tools-list">
118
+
<a href="teal-plays" class="tool-card">
119
+
<div class="tool-header">
120
+
<span class="tool-icon">🎵</span>
121
+
<span class="tool-name">Teal Plays</span>
122
+
</div>
123
+
<div class="tool-description">Live music feed from the Atmosphere. See what everyone is listening to in real-time.</div>
124
+
</a>
125
+
<a href="statusphere" class="tool-card">
126
+
<div class="tool-header">
127
+
<span class="tool-icon">😎</span>
128
+
<span class="tool-name">Statusphere</span>
129
+
</div>
130
+
<div class="tool-description">Set your status on the Atmosphere. Share how you're feeling with a single emoji.</div>
131
+
</a>
132
+
</main>
133
+
</div>
134
+
</body>
135
+
</html>