zzstoatzz.io
interactive intro to open social
at-me.zzstoatzz.io
1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>@me - explore your atproto identity</title>
7 <link rel="icon" type="image/svg+xml" href="/favicon.svg">
8
9 <!-- Open Graph / Facebook -->
10 <meta property="og:type" content="website">
11 <meta property="og:url" content="https://at-me.wisp.place/">
12 <meta property="og:title" content="@me - explore your atproto identity">
13 <meta property="og:description" content="visualize your decentralized identity and see what apps have stored data in your Personal Data Server">
14 <meta property="og:image" content="https://at-me.wisp.place/og-image.png">
15
16 <!-- Twitter -->
17 <meta property="twitter:card" content="summary_large_image">
18 <meta property="twitter:url" content="https://at-me.wisp.place/">
19 <meta property="twitter:title" content="@me - explore your atproto identity">
20 <meta property="twitter:description" content="visualize your decentralized identity and see what apps have stored data in your Personal Data Server">
21 <meta property="twitter:image" content="https://at-me.wisp.place/og-image.png">
22</head>
23<body>
24 <div class="atmosphere" id="atmosphere"></div>
25
26 <div class="container">
27 <div class="search-card">
28 <h1>@me</h1>
29 <div class="subtitle">explore the atmosphere</div>
30 <form id="searchForm" onsubmit="event.preventDefault(); handleSearch();">
31 <div class="input-wrapper">
32 <input type="text" id="handleInput" placeholder="enter any handle" autofocus autocomplete="off" autocapitalize="off" spellcheck="false">
33 <span class="search-spinner" id="searchSpinner" style="display: none;">...</span>
34 <div class="autocomplete-results" id="autocompleteResults"></div>
35 </div>
36 <button type="submit">explore</button>
37 </form>
38
39 <div class="divider">try these</div>
40 <div class="suggestions">
41 <button class="suggestion-btn" onclick="viewHandle('why.bsky.team')">why.bsky.team</button>
42 <button class="suggestion-btn" onclick="viewHandle('baileytownsend.dev')">baileytownsend.dev</button>
43 <button class="suggestion-btn" onclick="viewHandle('bad-example.com')">bad-example.com</button>
44 <button class="suggestion-btn" onclick="viewHandle('void.comind.network')">void.comind.network</button>
45 </div>
46
47 <button type="button" class="info-toggle" onclick="toggleInfo()">what is this?</button>
48
49 <div class="info-content" id="infoContent">
50 <div class="info-section">
51 <h3>you should own your data</h3>
52 <p>today's social platforms own your data. built 10k followers? wrote years of posts? if you leave, you lose it all. you don't own your network - they do.</p>
53
54 <h3>what if social media worked like email?</h3>
55 <p>with email, you can switch from gmail to protonmail and keep your contacts. same idea here: your posts and followers live on your own server (called a <a href="https://atproto.com/guides/data-repos" target="_blank" rel="noopener noreferrer">Personal Data Server</a>). apps like <a href="https://bsky.app" target="_blank" rel="noopener noreferrer">bluesky</a> just connect to it.</p>
56
57 <h3>see it in action</h3>
58 <p>enter any handle above to see how <a href="https://atproto.com" target="_blank" rel="noopener noreferrer">atproto</a> stores their social data.</p>
59 </div>
60 </div>
61 </div>
62 </div>
63
64 <div class="footer">
65 by <a href="https://bsky.app/profile/zzstoatzz.io" target="_blank" rel="noopener noreferrer">@zzstoatzz.io</a>
66 </div>
67
68 <script type="module" src="/src/landing/main.js"></script>
69</body>
70</html>