Tools for the Atmosphere tools.slices.network
quickslice atproto html

fix: update links and readme

+137 -1
+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
··· 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>