[READ-ONLY] Mirror of https://github.com/flo-bit/bluesky-visualizers. visualizing bluesky live data in different ways
flo-bit.dev/bluesky-visualizers/
bluesky
svelte
visualizations
Merge pull request #10 from Moshyfawn/feat/connections-3d-form-semnatics
Add form semantics
+23
-14
+23
-14
src/routes/connections-3d/+page.svelte
+23
-14
src/routes/connections-3d/+page.svelte
···
176
176
<div bind:this={element} class="w-full h-full"></div>
177
177
178
178
<div class="mx-auto flex max-w-2xl flex-col gap-4 px-4 pt-16 text-white">
179
+
<p class="my-4 text-sm font-semibold">
180
+
See the connections between the last 150 people you followed (if they followed each other as
181
+
part of their last 150 follows)
182
+
</p>
179
183
180
-
<div class="text-sm font-semibold my-4">see the connections between the last 150 people you followed (if they followed each other as part of their last 150 follows)</div>
181
-
<div class="text-lg font-semibold">enter a handle:</div>
184
+
<form method="POST" on:submit|preventDefault={loadUser}>
185
+
<label for="handle-input" class="mb-2 block text-lg font-semibold">Enter a handle:</label>
186
+
<input
187
+
id="handle-input"
188
+
bind:value={handle}
189
+
class="block w-full rounded-md border-0 bg-base-900 py-1.5 text-base-900 shadow-sm ring-1 ring-inset ring-base-300 placeholder:text-base-400 focus:ring-2 focus:ring-inset focus:ring-accent-600 dark:text-base-100 dark:ring-base-700 dark:placeholder:text-base-600 dark:focus:ring-accent-500 sm:text-sm/6"
190
+
placeholder="yourname.blsky.social"
191
+
type="text"
192
+
required
193
+
/>
182
194
183
-
<input
184
-
bind:value={handle}
185
-
class="block w-full rounded-md border-0 bg-base-900 py-1.5 text-base-900 shadow-sm ring-1 ring-inset ring-base-300 placeholder:text-base-400 focus:ring-2 focus:ring-inset focus:ring-accent-600 dark:focus:ring-accent-500 sm:text-sm/6 dark:text-base-100 dark:ring-base-700 dark:placeholder:text-base-600"
186
-
placeholder="yourname.blsky.social"
187
-
/>
188
-
189
-
<button
190
-
disabled={loading}
191
-
class="inline-flex w-full justify-center rounded-md bg-accent-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-accent-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-600 disabled:opacity-50"
192
-
onclick={loadUser}>resolve</button
193
-
>
195
+
<button
196
+
type="submit"
197
+
disabled={loading}
198
+
class="mt-4 inline-flex w-full justify-center rounded-md bg-accent-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-accent-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-600 disabled:opacity-50"
199
+
>
200
+
Resolve
201
+
</button>
202
+
</form>
194
203
195
204
{#if loading}
196
-
<div class="text-sm font-semibold">loading... please wait</div>
205
+
<p class="text-sm font-semibold" aria-live="polite">Loading... please wait</p>
197
206
{/if}
198
207
</div>