style: clean up HTML structure and formatting in wizards.vue for improved readability and consistency
This commit is contained in:
parent
2eb9e6ecd5
commit
3b33ff3819
1 changed files with 35 additions and 28 deletions
|
|
@ -5,16 +5,15 @@
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="template-container min-h-screen bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100 py-8"
|
class="template-container min-h-screen bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100 py-8"
|
||||||
style="font-family: 'Ubuntu', 'Ubuntu Mono', monospace">
|
style="font-family: 'Ubuntu', 'Ubuntu Mono', monospace"
|
||||||
|
>
|
||||||
<div class="max-w-6xl mx-auto px-4 relative">
|
<div class="max-w-6xl mx-auto px-4 relative">
|
||||||
<div class="mb-8">
|
<div class="mb-8">
|
||||||
<h1
|
<h1 class="text-3xl font-bold text-neutral-900 dark:text-white mb-2">
|
||||||
class="text-3xl font-bold text-neutral-900 dark:text-white mb-2"
|
|
||||||
Wizards
|
Wizards
|
||||||
</h1>
|
</h1>
|
||||||
<p class="text-neutral-700 dark:text-neutral-200">
|
<p class="text-neutral-700 dark:text-neutral-200">
|
||||||
Fillable forms for cooperative documents. Data saves locally in your
|
Fillable forms for cooperative documents. Data saves locally in your browser.
|
||||||
browser.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -22,14 +21,14 @@
|
||||||
<div
|
<div
|
||||||
v-for="template in templates"
|
v-for="template in templates"
|
||||||
:key="template.id"
|
:key="template.id"
|
||||||
class="template-card h-full flex flex-col">
|
class="template-card h-full flex flex-col"
|
||||||
|
>
|
||||||
|
<div class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
|
||||||
<div
|
<div
|
||||||
class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
|
class="relative bg-white dark:bg-neutral-950 border border-black dark:border-white p-6 h-full flex flex-col"
|
||||||
<div
|
>
|
||||||
class="relative bg-white dark:bg-neutral-950 border border-black dark:border-white p-6 h-full flex flex-col">
|
|
||||||
<div class="mb-4">
|
<div class="mb-4">
|
||||||
<h3
|
<h3 class="text-xl font-semibold text-neutral-900 dark:text-white">
|
||||||
class="text-xl font-semibold text-neutral-900 dark:text-white">
|
|
||||||
{{ template.name }}
|
{{ template.name }}
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -40,7 +39,8 @@
|
||||||
<span
|
<span
|
||||||
v-for="tag in template.tags"
|
v-for="tag in template.tags"
|
||||||
:key="tag"
|
:key="tag"
|
||||||
class="px-2 py-1 text-xs font-medium bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-900 border border-black dark:border-white dither-tag">
|
class="px-2 py-1 text-xs font-medium bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-900 border border-black dark:border-white dither-tag"
|
||||||
|
>
|
||||||
{{ tag }}
|
{{ tag }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -55,7 +55,8 @@
|
||||||
<NuxtLink
|
<NuxtLink
|
||||||
:to="template.path"
|
:to="template.path"
|
||||||
class="flex-1 px-4 py-2 bg-black dark:bg-white text-white dark:text-black text-center font-medium tracking-wider hover:underline"
|
class="flex-1 px-4 py-2 bg-black dark:bg-white text-white dark:text-black text-center font-medium tracking-wider hover:underline"
|
||||||
style="font-family: 'Ubuntu Mono', monospace">
|
style="font-family: 'Ubuntu Mono', monospace"
|
||||||
|
>
|
||||||
START WIZARD
|
START WIZARD
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<NuxtLink
|
<NuxtLink
|
||||||
|
|
@ -63,7 +64,8 @@
|
||||||
:to="template.path"
|
:to="template.path"
|
||||||
class="px-4 py-2 bg-white dark:bg-neutral-950 text-black dark:text-white border border-black dark:border-white hover:bg-white dark:hover:bg-neutral-950 transition-colors bitmap-button"
|
class="px-4 py-2 bg-white dark:bg-neutral-950 text-black dark:text-white border border-black dark:border-white hover:bg-white dark:hover:bg-neutral-950 transition-colors bitmap-button"
|
||||||
title="Continue from saved data"
|
title="Continue from saved data"
|
||||||
style="font-family: 'Ubuntu Mono', monospace">
|
style="font-family: 'Ubuntu Mono', monospace"
|
||||||
|
>
|
||||||
RESUME
|
RESUME
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -74,40 +76,44 @@
|
||||||
<div class="mt-12 help-section">
|
<div class="mt-12 help-section">
|
||||||
<div class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
|
<div class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
|
||||||
<div
|
<div
|
||||||
class="relative bg-white dark:bg-neutral-950 border border-black dark:border-white p-6">
|
class="relative bg-white dark:bg-neutral-950 border border-black dark:border-white p-6"
|
||||||
|
>
|
||||||
<h2
|
<h2
|
||||||
class="text-xl font-semibold text-neutral-900 dark:text-white mb-3"
|
class="text-xl font-semibold text-neutral-900 dark:text-white mb-3"
|
||||||
style="font-family: 'Ubuntu', monospace">
|
style="font-family: 'Ubuntu', monospace"
|
||||||
|
>
|
||||||
How Wizards Work
|
How Wizards Work
|
||||||
</h2>
|
</h2>
|
||||||
<div
|
<div class="grid md:grid-cols-2 gap-6 text-neutral-900 dark:text-neutral-100">
|
||||||
class="grid md:grid-cols-2 gap-6 text-neutral-900 dark:text-neutral-100">
|
|
||||||
<div>
|
<div>
|
||||||
<h3
|
<h3
|
||||||
class="font-medium mb-2 text-neutral-900 dark:text-white"
|
class="font-medium mb-2 text-neutral-900 dark:text-white"
|
||||||
style="font-family: 'Ubuntu Mono', monospace">
|
style="font-family: 'Ubuntu Mono', monospace"
|
||||||
|
>
|
||||||
FILL OUT FORMS
|
FILL OUT FORMS
|
||||||
</h3>
|
</h3>
|
||||||
<p class="text-sm text-neutral-700 dark:text-neutral-200">
|
<p class="text-sm text-neutral-700 dark:text-neutral-200">
|
||||||
Wizards include form fields for all necessary information.
|
Wizards include form fields for all necessary information. Data
|
||||||
Data auto-saves as you type.
|
auto-saves as you type.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3
|
<h3
|
||||||
class="font-medium mb-2 text-neutral-900 dark:text-white"
|
class="font-medium mb-2 text-neutral-900 dark:text-white"
|
||||||
style="font-family: 'Ubuntu Mono', monospace">
|
style="font-family: 'Ubuntu Mono', monospace"
|
||||||
|
>
|
||||||
LOCAL STORAGE
|
LOCAL STORAGE
|
||||||
</h3>
|
</h3>
|
||||||
<p class="text-sm text-neutral-700 dark:text-neutral-200">
|
<p class="text-sm text-neutral-700 dark:text-neutral-200">
|
||||||
All data saves in your browser only. Nothing is sent to
|
All data saves in your browser only. Nothing is sent to external
|
||||||
external servers.
|
servers.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3
|
<h3
|
||||||
class="font-medium mb-2 text-neutral-900 dark:text-white"
|
class="font-medium mb-2 text-neutral-900 dark:text-white"
|
||||||
style="font-family: 'Ubuntu Mono', monospace">
|
style="font-family: 'Ubuntu Mono', monospace"
|
||||||
|
>
|
||||||
EXPORT OPTIONS
|
EXPORT OPTIONS
|
||||||
</h3>
|
</h3>
|
||||||
<p class="text-sm text-neutral-700 dark:text-neutral-200">
|
<p class="text-sm text-neutral-700 dark:text-neutral-200">
|
||||||
|
|
@ -117,12 +123,13 @@
|
||||||
<div>
|
<div>
|
||||||
<h3
|
<h3
|
||||||
class="font-medium mb-2 text-neutral-900 dark:text-white"
|
class="font-medium mb-2 text-neutral-900 dark:text-white"
|
||||||
style="font-family: 'Ubuntu Mono', monospace">
|
style="font-family: 'Ubuntu Mono', monospace"
|
||||||
|
>
|
||||||
RESUME ANYTIME
|
RESUME ANYTIME
|
||||||
</h3>
|
</h3>
|
||||||
<p class="text-sm text-neutral-700 dark:text-neutral-200">
|
<p class="text-sm text-neutral-700 dark:text-neutral-200">
|
||||||
Come back later and your progress will be saved. Clear browser
|
Come back later and your progress will be saved. Clear browser data to
|
||||||
data to start fresh.
|
start fresh.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue