foxwitch.net
forked from
handle.invalid/ATernative.to
Discover AT Protocol alternatives to popular social media platforms -- https://aternative.to/
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, viewport-fit=cover" />
6 <meta name="description" content="Discover AT Protocol alternatives to popular social media platforms." />
7 <title>ATernative.to</title>
8 <link rel="stylesheet" href="main.css" />
9 </head>
10 <body class="flex min-h-screen items-center justify-center font-sans">
11 <div class="mx-auto w-full max-w-3xl pt-6">
12 <h1 class="mb-3 text-center text-2xl font-bold text-gray-800">ATernative.to</h1>
13 <p class="mb-6 text-center text-gray-600">Discover AT Protocol alternatives to popular social media platforms</p>
14 <div class="flex-auto columns-2 text-center text-gray-500 not-sm:hidden">
15 <p>Traditional Platform</p>
16 <p>ATProto Platform</p>
17 </div>
18 <div class="space-y-5">
19 <div tabindex="0" class="flex flex-col rounded-lg p-4 text-center shadow-md duration-200 hover:scale-[1.03] sm:flex-row">
20 <a class="m-auto flex-1" href="https://x.com">
21 <p class="font-semibold text-gray-800">X.com (Twitter)</p>
22 </a>
23 <div class="my-2 h-px w-full bg-gray-200 sm:h-10 sm:w-px"></div>
24 <a class="m-auto flex-1" href="https://bsky.app">
25 <p class="font-medium text-gray-800">Bluesky</p>
26 </a>
27 </div>
28 <div tabindex="0" class="flex flex-col rounded-lg p-4 text-center shadow-md duration-200 hover:scale-[1.03] sm:flex-row">
29 <a class="m-auto flex-1" href="https://www.instagram.com">
30 <p class="font-semibold text-gray-800">Instagram</p>
31 </a>
32 <div class="my-2 h-px w-full bg-gray-200 sm:h-10 sm:w-px"></div>
33 <div class="m-auto flex-1">
34 <div class="columns-2">
35 <a class="m-auto flex-1" href="https://pinksky.app/">
36 <p class="font-medium text-gray-800">Pinksky</p>
37 </a>
38 <a class="m-auto flex-1" href="https://apps.apple.com/us/app/flashes-for-bluesky/id6741443033">
39 <p class="font-medium text-gray-800">Flashes (iOS Only)</p>
40 </a>
41 </div>
42 </div>
43 </div>
44 <div tabindex="0" class="flex flex-col rounded-lg p-4 text-center shadow-md duration-200 hover:scale-[1.03] sm:flex-row">
45 <a class="m-auto flex-1" href="https://tiktok.com">
46 <p class="font-medium text-gray-800">TikTok</p>
47 </a>
48 <div class="my-2 h-px w-full bg-gray-200 sm:h-10 sm:w-px"></div>
49 <a class="m-auto flex-1" href="https://skylight.social">
50 <p class="font-medium text-gray-800">Skylight</p>
51 </a>
52 </div>
53 <div tabindex="0" class="flex flex-col rounded-lg p-4 text-center shadow-md duration-200 hover:scale-[1.03] sm:flex-row">
54 <a class="m-auto flex-1" href="https://medium.com/">
55 <p class="font-medium text-gray-800">Medium</p>
56 </a>
57 <div class="my-2 h-px w-full bg-gray-200 sm:h-10 sm:w-px"></div>
58 <div class="m-auto flex-1">
59 <div class="columns-2">
60 <a class="m-auto flex-1" href="https://leaflet.pub/">
61 <p class="font-medium text-gray-800">Leaflet</p>
62 </a>
63 <a class="m-auto flex-1" href="https://whtwnd.com/">
64 <p class="font-medium text-gray-800">Whitewind</p>
65 </a>
66 </div>
67 </div>
68 </div>
69 <div tabindex="0" class="flex flex-col rounded-lg p-4 text-center shadow-md duration-200 hover:scale-[1.03] sm:flex-row">
70 <a class="m-auto flex-1" href="https://reddit.com">
71 <p class="font-medium text-gray-800">Reddit</p>
72 </a>
73 <div class="my-2 h-px w-full bg-gray-200 sm:h-10 sm:w-px"></div>
74 <a class="m-auto flex-1" href="https://nooki.me">
75 <p class="font-medium text-gray-800">Nooki</p>
76 </a>
77 </div>
78 <div tabindex="0" class="flex flex-col rounded-lg p-4 text-center shadow-md duration-200 hover:scale-[1.03] sm:flex-row">
79 <a class="m-auto flex-1" href="https://github.com">
80 <p class="font-medium text-gray-800">GitHub</p>
81 </a>
82 <div class="my-2 h-px w-full bg-gray-200 sm:h-10 sm:w-px"></div>
83 <a class="m-auto flex-1" href="https://tangled.org">
84 <p class="font-medium text-gray-800">Tangled</p>
85 </a>
86 </div>
87 <div tabindex="0" class="flex flex-col rounded-lg p-4 text-center shadow-md duration-200 hover:scale-[1.03] sm:flex-row">
88 <a class="m-auto flex-1" href="https://www.pinterest.com/">
89 <p class="font-medium text-gray-800">Pinterest</p>
90 </a>
91 <div class="my-2 h-px w-full bg-gray-200 sm:h-10 sm:w-px"></div>
92 <a class="m-auto flex-1" href="https://scrapboard.org/">
93 <p class="font-medium text-gray-800">Scrapboard</p>
94 </a>
95 </div>
96 <div tabindex="0" class="flex flex-col rounded-lg p-4 text-center shadow-md duration-200 hover:scale-[1.03] sm:flex-row">
97 <a class="m-auto flex-1" href="https://www.twitch.tv">
98 <p class="font-medium text-gray-800">Twitch</p>
99 </a>
100 <div class="my-2 h-px w-full bg-gray-200 sm:h-10 sm:w-px"></div>
101 <a class="m-auto flex-1" href="https://stream.place">
102 <p class="font-medium text-gray-800">Streamplace</p>
103 </a>
104 </div>
105 <div tabindex="0" class="flex flex-col rounded-lg p-4 text-center shadow-md duration-200 hover:scale-[1.03] sm:flex-row">
106 <a class="m-auto flex-1" href="https://www.linkedin.com">
107 <p class="font-medium text-gray-800">LinkedIn</p>
108 </a>
109 <div class="my-2 h-px w-full bg-gray-200 sm:h-10 sm:w-px"></div>
110 <div class="m-auto flex-1">
111 <div class="columns-2">
112 <a class="m-auto flex-1" href="https://atwork.place/">
113 <p class="font-medium text-gray-800">at://work</p>
114 </a>
115 <a class="m-auto flex-1" href="https://beta.protopro.blue/">
116 <p class="font-medium text-gray-800">ProtoPro</p>
117 </a>
118 </div>
119 </div>
120 </div>
121 <div tabindex="0" class="flex flex-col rounded-lg p-4 text-center shadow-md duration-200 hover:scale-[1.03] sm:flex-row">
122 <a class="m-auto flex-1" href="https://www.allrecipes.com/">
123 <p class="font-medium text-gray-800">AllRecipes</p>
124 </a>
125 <div class="my-2 h-px w-full bg-gray-200 sm:h-10 sm:w-px"></div>
126 <a class="m-auto flex-1" href="https://recipe.exchange/">
127 <p class="font-medium text-gray-800">Recipe.exchange</p>
128 </a>
129 </div>
130 <div tabindex="0" class="flex flex-col rounded-lg p-4 text-center shadow-md duration-200 hover:scale-[1.03] sm:flex-row">
131 <a class="m-auto flex-1" href="https://linktr.ee/">
132 <p class="font-medium text-gray-800">LinkTree</p>
133 </a>
134 <div class="my-2 h-px w-full bg-gray-200 sm:h-10 sm:w-px"></div>
135 <a class="m-auto flex-1" href="https://linkat.blue/">
136 <p class="font-medium text-gray-800">Linkat</p>
137 </a>
138 </div>
139 <div tabindex="0" class="flex flex-col rounded-lg p-4 text-center shadow-md duration-200 hover:scale-[1.03] sm:flex-row">
140 <a class="m-auto flex-1" href="https://www.meetup.com/">
141 <p class="font-medium text-gray-800">Meetup</p>
142 </a>
143 <div class="my-2 h-px w-full bg-gray-200 sm:h-10 sm:w-px"></div>
144 <a class="m-auto flex-1" href="https://smokesignal.events/">
145 <p class="font-medium text-gray-800">Smoke Signal</p>
146 </a>
147 </div>
148 <div tabindex="0" class="flex flex-col rounded-lg p-4 text-center shadow-md duration-200 hover:scale-[1.03] sm:flex-row">
149 <p class="m-auto flex-1 font-medium text-gray-800">Pocket (rip)</p>
150 <div class="my-2 h-px w-full bg-gray-200 sm:h-10 sm:w-px"></div>
151 <a class="m-auto flex-1" href="https://kipclip.com/">
152 <p class="font-medium text-gray-800">Kipclip</p>
153 </a>
154 </div>
155 <div tabindex="0" class="flex flex-col rounded-lg p-4 text-center shadow-md duration-200 hover:scale-[1.03] sm:flex-row">
156 <p class="m-auto flex-1 font-medium text-gray-800">IMDb, IGDB, Letterboxd, Goodreads</p>
157 <div class="my-2 h-px w-full bg-gray-200 sm:h-10 sm:w-px"></div>
158 <a class="m-auto flex-1" href="https://popfeed.social/">
159 <p class="font-medium text-gray-800">Popfeed</p>
160 </a>
161 </div>
162 <div tabindex="0" class="flex flex-col rounded-lg p-4 text-center shadow-md duration-200 hover:scale-[1.03] sm:flex-row">
163 <p class="m-auto flex-1 font-medium text-gray-800">Messenger, WhatsApp, Telegram, etc.</p>
164 <div class="my-2 h-px w-full bg-gray-200 sm:h-10 sm:w-px"></div>
165 <a class="m-auto flex-1" href="https://www.germnetwork.com/">
166 <p class="font-medium text-gray-800">Germ</p>
167 </a>
168 </div>
169 <div tabindex="0" class="flex flex-col rounded-lg p-4 text-center shadow-md duration-200 hover:scale-[1.03] sm:flex-row">
170 <a class="m-auto flex-1" href="https://news.ycombinator.com//">
171 <p class="font-medium text-gray-800">Hacker News</p>
172 </a>
173 <div class="my-2 h-px w-full bg-gray-200 sm:h-10 sm:w-px"></div>
174 <a class="m-auto flex-1" href="https://frontpage.fyi/">
175 <p class="font-medium text-gray-800">Frontpage</p>
176 </a>
177 </div>
178 </div>
179 <footer>
180 <div class="flex-1 mt-8">
181 <p class="text-center">Made by <a href=https://bsky.app/profile/cat.from.legal>@cat.from.legal</a></p>
182 <p class="text-center mb-2"><a href=https://tangled.org/@cat.from.legal/ATernative.to>Submit new platform suggestions and bug reports on Tangled.</a></p>
183 </div>
184 </footer>
185 </div>
186 </body>
187</html>