Something went wrong. Try again.
Tools for the Atmosphere tools.slices.network
quickslice atproto html
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Tools</title> <style> /* CSS Reset */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
:root { --bg-primary: #fafaf9; --bg-card: #ffffff; --text-primary: #1c1917; --text-secondary: #78716c; --accent: #7c3aed; --border: #e7e5e4; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; padding: 3rem 1rem; }
#app { max-width: 500px; margin: 0 auto; }
header { text-align: center; margin-bottom: 2.5rem; }
.logo { width: 64px; height: 64px; margin: 0 auto 1rem; }
header h1 { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.25rem; }
.tagline { color: var(--text-secondary); font-size: 0.875rem; }
.tools-list { display: flex; flex-direction: column; gap: 0.75rem; }
.tool-card { display: block; background: var(--bg-card); border-radius: 0.75rem; padding: 1.25rem; border: 1px solid var(--border); text-decoration: none; transition: box-shadow 0.15s, transform 0.15s; }
.tool-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }
.tool-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.tool-icon { font-size: 1.5rem; }
.tool-name { font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.tool-description { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.4; } </style> <script src="https://cdn.jsdelivr.net/gh/bigmoves/elements@v0.1.0/dist/elements.min.js"></script> </head> <body> <div id="app"> <header> <svg class="logo" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="board1" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#FF6347" /> <stop offset="100%" stop-color="#FF4500" /> </linearGradient> <linearGradient id="board2" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#00CED1" /> <stop offset="100%" stop-color="#4682B4" /> </linearGradient> </defs> <g transform="translate(64, 64)"> <ellipse cx="0" cy="-28" rx="50" ry="20" fill="url(#board1)" /> <ellipse cx="0" cy="0" rx="60" ry="20" fill="url(#board2)" /> <ellipse cx="0" cy="28" rx="40" ry="20" fill="#32CD32" /> </g> </svg> <h1>Tools</h1> <qs-tangled-stars handle="slices.network" repo="tools" instance="https://quickslice-production-ddc3.up.railway.app" style="margin-bottom: 0.75rem" ></qs-tangled-stars> <p class="tagline">Apps for the Atmosphere</p> </header> <main class="tools-list"> <a href="teal-plays" class="tool-card"> <div class="tool-header"> <span class="tool-icon">🎵</span> <span class="tool-name">Teal Plays</span> </div> <div class="tool-description"> Live music feed from the Atmosphere. See what everyone is listening to in real-time. </div> </a> <a href="teal-scrobble" class="tool-card"> <div class="tool-header"> <span class="tool-icon">🎧</span> <span class="tool-name">Teal Scrobble</span> </div> <div class="tool-description"> Manually log what you're listening to. Search MusicBrainz and scrobble to Teal. </div> </a> <a href="statusphere" class="tool-card"> <div class="tool-header"> <span class="tool-icon">😎</span> <span class="tool-name">Statusphere</span> </div> <div class="tool-description"> Set your status on the Atmosphere. Share how you're feeling with a single emoji. </div> </a> <a href="lexicon-validator" class="tool-card"> <div class="tool-header"> <span class="tool-icon" style="color: #0066cc">{ }</span> <span class="tool-name">Lexicon Validator</span> </div> <div class="tool-description">Validate AT Protocol lexicon schemas and records.</div> </a> <a href="lexicon-publisher" class="tool-card"> <div class="tool-header"> <span class="tool-icon" style="color: #0066cc">{ }</span> <span class="tool-name">Lexicon Publisher</span> </div> <div class="tool-description">Publish lexicon schemas to your PDS.</div> </a> <a href="lexicon-explorer" class="tool-card"> <div class="tool-header"> <span class="tool-icon" style="color: #0066cc">{ }</span> <span class="tool-name">Lexicon Explorer</span> </div> <div class="tool-description">Browse and discover published ATProto lexicons.</div> </a> <a href="bugs" class="tool-card"> <div class="tool-header"> <span class="tool-icon">🐛</span> <span class="tool-name">Bug Tracker</span> </div> <div class="tool-description">Browse and submit bugs across the Atmosphere.</div> </a> <a href="tangled-repos" class="tool-card"> <div class="tool-header"> <span class="tool-icon" style="display: flex; align-items: center" ><svg width="24" height="24" viewBox="0 0 25 25" fill="#000"> <path 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" transform="translate(-0.43,-0.88)" /></svg ></span> <span class="tool-name">Tangled Repos</span> </div> <div class="tool-description">Browse and search repositories from Tangled.</div> </a> <a href="docs" class="tool-card"> <div class="tool-header"> <span class="tool-icon">📄</span> <span class="tool-name">Docs</span> </div> <div class="tool-description">Create and share documents.</div> </a> </main> </div> </body></html>