mirror of
https://github.com/jcreek/LivingDexTracker.git
synced 2026-07-13 02:53:45 +00:00
Create a header
This commit is contained in:
Amber M
+1
-1
@@ -1,5 +1,5 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="en" data-theme="dracula">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
|
||||
@@ -28,36 +28,32 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex flex-row gap-x-2">
|
||||
<label class="input input-bordered flex items-center gap-2">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
class="w-4 h-4 opacity-70"
|
||||
><path
|
||||
d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z"
|
||||
/><path
|
||||
d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z"
|
||||
/></svg
|
||||
>
|
||||
<input type="text" class="grow" placeholder="Email" bind:value={email} />
|
||||
</label>
|
||||
|
||||
<label class="input input-bordered flex items-center gap-2">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
class="w-4 h-4 opacity-70"
|
||||
><path
|
||||
fill-rule="evenodd"
|
||||
d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
|
||||
clip-rule="evenodd"
|
||||
/></svg
|
||||
>
|
||||
<input type="password" class="grow" bind:value={password} placeholder="Password" />
|
||||
</label>
|
||||
|
||||
<button class="btn btn-primary" on:click={signUpNewUser}>Sign Up</button>
|
||||
</div>
|
||||
<form class="card-body">
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Email</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="email"
|
||||
class="input input-bordered"
|
||||
required
|
||||
bind:value={email}
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Password</span>
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="password"
|
||||
class="input input-bordered"
|
||||
required
|
||||
bind:value={password}
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control mt-6">
|
||||
<button class="btn btn btn-primary" on:click={signUpNewUser}>Sign Up</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -2,6 +2,42 @@
|
||||
import 'tailwindcss/tailwind.css';
|
||||
</script>
|
||||
|
||||
<header>
|
||||
<div class="navbar bg-base-100">
|
||||
<div class="flex-1">
|
||||
<a class="btn btn-ghost text-xl">Pokedex Tracker</a>
|
||||
</div>
|
||||
<div class="flex-none gap-2">
|
||||
<div class="form-control">
|
||||
<input type="text" placeholder="Search" class="input input-bordered w-24 md:w-auto" />
|
||||
</div>
|
||||
<div class="dropdown dropdown-end">
|
||||
<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
|
||||
<div class="w-10 rounded-full">
|
||||
<img
|
||||
alt="Tailwind CSS Navbar component"
|
||||
src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52"
|
||||
>
|
||||
<li>
|
||||
<a class="justify-between">
|
||||
Profile
|
||||
<span class="badge">New</span>
|
||||
</a>
|
||||
</li>
|
||||
<li><a>Settings</a></li>
|
||||
<li><a>Logout</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
+11
-5
@@ -47,14 +47,20 @@
|
||||
<span>Welcome back {userEmail}</span>
|
||||
<br />
|
||||
{/if}
|
||||
<SignUp {supabase} />
|
||||
<br />
|
||||
<SignIn {supabase} on:signedIn={setUserEmail} />
|
||||
<br />
|
||||
<SignOut {supabase} on:signedOut={setUserEmail} />
|
||||
|
||||
<div>
|
||||
<PokemonSprite pokedexNumber={666} form={'poke-ball'} />
|
||||
<PokemonSprite pokedexNumber={666} form={''} />
|
||||
<PokemonSprite pokedexNumber={'003'} form={''} />
|
||||
<div class="hero min-h-screen bg-base-200">
|
||||
<div class="hero-content flex-col lg:flex-row-reverse">
|
||||
<div class="text-center lg:text-left">
|
||||
<h1 class="text-5xl font-bold">Start Your Pokemon Journey!</h1>
|
||||
</div>
|
||||
<div class="card shrink-0 w-full max-w-sm shadow-2xl bg-base-100">
|
||||
<SignUp {supabase} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p></p>
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
<h1>dfftht</h1>
|
||||
+4
-1
@@ -4,5 +4,8 @@ export default {
|
||||
theme: {
|
||||
extend: {}
|
||||
},
|
||||
plugins: [require('daisyui')]
|
||||
plugins: [require('daisyui')],
|
||||
daisyui: {
|
||||
themes: ['light', 'dark', 'dracula']
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user