Refine the main UI (add search button)

This commit is contained in:
Andrea Fazzi 2023-06-30 18:20:42 +02:00
parent 6d40444de0
commit 931ba4ec68
2 changed files with 212 additions and 190 deletions

View file

@ -25,23 +25,11 @@
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
Discord <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
</a> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
<a </svg>
class="btn btn-sm variant-ghost-surface"
href="https://twitter.com/SkeletonUI" <span>Search</span>
target="_blank"
rel="noreferrer"
>
Twitter
</a>
<a
class="btn btn-sm variant-ghost-surface"
href="https://github.com/skeletonlabs/skeleton"
target="_blank"
rel="noreferrer"
>
GitHub
</a> </a>
</svelte:fragment> </svelte:fragment>
</AppBar> </AppBar>

View file

@ -1,18 +1,15 @@
<!-- YOU CAN DELETE EVERYTHING IN THIS PAGE --> <!-- YOU CAN DELETE EVERYTHING IN THIS PAGE -->
<div class="h-full flex flex-col"> <div class="h-full flex flex-col">
<div class="card p-4 m-4 font-heading-token">
<div class="card p-4 m-4 font-heading-token">
<header class="p-3 flex justify-end"> <header class="p-3 flex justify-end">
<span class="badge variant-filled"><h1 class="text-xs">1ad25d0000</h1></span> <span class="badge variant-filled"><h1 class="text-xs">1ad25d0000</h1></span>
</header> </header>
<hr class="opacity-50" /> <hr class="opacity-50" />
<p class="p-4"> <p class="p-4">
Per intensità di corrente elettrica si intende Per intensità di corrente elettrica si intende
</p> </p>
<form id="question1"> <form id="question1">
<div class="space-y-2 p-4"> <div class="space-y-2 p-4">
<label class="flex items-center space-x-2"> <label class="flex items-center space-x-2">
@ -36,14 +33,13 @@
<hr class="opacity-50" /> <hr class="opacity-50" />
<footer class="p-3 flex justify-start items-center space-x-4"> <footer class="p-3 flex justify-start items-center space-x-4">
<div class="flex-auto flex gap-1"> <div class="flex-auto flex gap-1">
<span class="badge chip variant-filled-tertiary">#foo</span> <span class="badge chip variant-filled-tertiary">#corrente</span>
<span class="badge variant-filled-tertiary">#bar</span> <span class="badge chip variant-filled-tertiary">#quinte</span>
<span class="badge variant-filled-tertiary">#biz</span> <span class="badge chip variant-filled-tertiary">#circuiti</span>
</div> </div>
<div class="flex-auto flex justify-end"> <div class="flex-auto flex justify-end">
<small>Created on {new Date().toLocaleDateString()}</small> <small>Created on {new Date().toLocaleDateString()}</small>
</div> </div>
</footer> </footer>
</div> </div>
@ -51,9 +47,7 @@
<header class="p-3 flex justify-end"> <header class="p-3 flex justify-end">
<span class="badge variant-filled"><h1 class="text-xs">1ad25d0000</h1></span> <span class="badge variant-filled"><h1 class="text-xs">1ad25d0000</h1></span>
</header> </header>
<hr class="opacity-50" /> <hr class="opacity-50" />
<p class="p-4"> <p class="p-4">
Affinché in un circuito possa circolare corrente continua, il generatore di tensione Affinché in un circuito possa circolare corrente continua, il generatore di tensione
</p> </p>
@ -82,16 +76,56 @@
<footer class="p-3 flex justify-start items-center space-x-4"> <footer class="p-3 flex justify-start items-center space-x-4">
<div class="flex-auto flex gap-1"> <div class="flex-auto flex gap-1">
<span class="badge variant-filled-tertiary">#foo</span> <span class="badge chip variant-filled-tertiary">#corrente</span>
<span class="badge variant-filled-tertiary">#bar</span> <span class="badge chip variant-filled-tertiary">#quinte</span>
<span class="badge variant-filled-tertiary">#biz</span> <span class="badge chip variant-filled-tertiary">#circuiti</span>
</div> </div>
<div class="flex-auto flex justify-end"> <div class="flex-auto flex justify-end">
<small>Created on {new Date().toLocaleDateString()}</small> <small>Created on {new Date().toLocaleDateString()}</small>
</div> </div>
</footer> </footer>
</div> </div>
<div class="card p-4 m-4 font-heading-token">
<header class="p-3 flex justify-end">
<span class="badge variant-filled"><h1 class="text-xs">1ad25d0000</h1></span>
</header>
<hr class="opacity-50" />
<p class="p-4">
Affinché in un circuito possa circolare corrente continua, il generatore di tensione
</p>
<form id="question_2">
<div class="space-y-2 p-4">
<label class="flex items-center space-x-2">
<input class="radio" type="radio" checked name="radio-direct" value="1" />
<p>Fornisce una potenza pari a quella dissipata per effetto Joule</p>
</label>
<label class="flex items-center space-x-2">
<input class="radio" type="radio" name="radio-direct" value="2" />
<p>Fornisce una potenza minore a quella dissipata per effetto Joule</p>
</label>
<label class="flex items-center space-x-2">
<input class="radio" type="radio" name="radio-direct" value="3" />
<p>Rallenta le cariche elettriche</p>
</label>
<label class="flex items-center space-x-2">
<input class="radio" type="radio" name="radio-direct" value="3" />
<p>Dev'essere spento</p>
</label>
</div>
</form>
<footer class="p-3 flex justify-start items-center space-x-4">
<div class="flex-auto flex gap-1">
<span class="badge chip variant-filled-tertiary">#corrente</span>
<span class="badge chip variant-filled-tertiary">#quinte</span>
<span class="badge chip variant-filled-tertiary">#circuiti</span>
</div>
<div class="flex-auto flex justify-end">
<small>Created on {new Date().toLocaleDateString()}</small>
</div>
</footer>
</div>
</div> </div>