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 the atmosphere</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="see your atmosphere account — one account, all your apps and data">
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="see your atmosphere account — one account, all your apps and data">
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>one account for everything</h3>
52 <p>on most platforms, your posts, followers, and data are locked inside each app. if you leave, you start over.</p>
53
54 <h3>not here</h3>
55 <p>in <a href="https://augment.ink/the-everything-account" target="_blank" rel="noopener noreferrer">the atmosphere</a>, you have one account that works across every app. your data belongs to you — apps just connect to it. switch apps anytime and take everything with you.</p>
56
57 <h3>see it for yourself</h3>
58 <p>enter any handle above to see what apps and data are connected to their account.</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>