jcreek/LivingDexTracker
1
0
Fork 0
mirror of https://github.com/jcreek/LivingDexTracker.git synced 2026-07-12 18:43:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(#36): Style the landing page

Browse Source
This commit is contained in:
Josh Creek
2024-04-28 16:08:28 +01:00
parent cdab9b4ab5
commit 6a4c6d81b2
2 changed files with 194 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/+layout.svelte
+84 -29
View File
@@ -90,17 +90,52 @@
<header>
<div class="navbar bg-neutral">
<div class="flex-1">
<div class="navbar-start">
<div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost btn-circle">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h7"
/></svg
>
</div>
<ul
class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
>
<li><a href="/about">About</a></li>
<li>
<a href="https://github.com/jcreek/LivingDexTracker" target="_blank">Contribute</a>
</li>
</ul>
</div>
</div>
<div class="navbar-center">
<a class="btn btn-ghost text-xl" href="/">Living Dex Tracker</a>
</div>
<div class="flex-none gap-2">
<div class="form-control">
<input
type="text"
placeholder="Search for a Dex"
class="input input-bordered w-32 md:w-auto"
/>
</div>
<div class="navbar-end">
<button class="btn btn-ghost btn-circle">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/></svg
>
</button>
<div class="dropdown dropdown-end">
<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
<div class="w-10 rounded-full">
@@ -112,6 +147,9 @@
class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box min-w-[13rem] w-auto"
>
{#if localUser}
<li>
<a href="/mydex"> My Dex </a>
</li>
<li>
<a href="/profile"> Profile </a>
</li>
@@ -130,26 +168,43 @@
<slot />
</main>
<footer class="footer p-10 bg-neutral text-neutral-content">
<nav>
<h6 class="footer-title">Services</h6>
<a class="link link-hover">Branding</a>
<a class="link link-hover">Design</a>
<a class="link link-hover">Marketing</a>
<a class="link link-hover">Advertisement</a>
</nav>
<nav>
<h6 class="footer-title">Company</h6>
<a class="link link-hover">About us</a>
<a class="link link-hover">Contact</a>
<a class="link link-hover">Jobs</a>
<a class="link link-hover">Press kit</a>
</nav>
<nav>
<h6 class="footer-title">Legal</h6>
<a class="link link-hover">Terms of use</a>
<a class="link link-hover">Privacy policy</a>
<a class="link link-hover">Cookie policy</a>
<footer class="footer items-center p-4 bg-neutral text-neutral-content">
<aside class="items-center grid-flow-col">
<a href="https://github.com/jcreek/LivingDexTracker" target="_blank">
<svg
width="36"
height="36"
fill-rule="evenodd"
clip-rule="evenodd"
class="fill-current"
viewBox="0 0 120 120"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
/>
</svg>
</a>
<p>
Open source and free to use, forever. We are in no way associated with Nintendo, Game Freak or
The Pokémon Company.
</p>
</aside>
<nav class="grid-flow-col gap-4 md:place-self-center md:justify-self-end">
<a href="https://discord.gg/SQcJkaXDye" target="_blank"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 127.14 96.36"
class="fill-current"
>
<path
d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"
/>
</svg>
</a>
</nav>
</footer>
src/routes/+page.svelte
+110 -81
View File
@@ -15,10 +15,10 @@
onDestroy(unsubscribe);
</script>
<div class="hero min-h-screen bg-base-100">
<div class="hero bg-base-100 my-36">
<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>
<h1 class="text-5xl font-bold">Start Your Pokédex Journey!</h1>
</div>
<div class="card shrink-0 w-full max-w-sm shadow-2xl bg-neutral">
<SignUp {supabase} />
@@ -26,87 +26,116 @@
</div>
</div>
<div class="welcome-banner">
<div class="font-bold max-w-xl mx-auto">
<h2>
Welcome to the Pokedex website, where you can delve into the vast world of Pokémon with ease.
</h2>
</div>
<div
class="md:container md:mx-auto justify-self-center flex justify-center items-center h-full flex-col mb-10"
>
<div class="stats stats-vertical lg:stats-horizontal shadow bg-neutral text-center">
<div class="stat">
<div class="stat-title">Pokémon caught</div>
<div class="stat-value">310K</div>
<div class="stat-desc">Since January 2024</div>
</div>
<div class="colOne"></div>
<div class="one font-bold">
<p>
We're more than just a Pokédex - we're a vibrant community of passionate Pokémon enthusiasts
like you! Explore our extensive database, discover the unique traits of each Pokémon species,
where you can connect with friends and share your Pokémon journey like never before.. okéAtlas
isn't just about information; it's about exploration and discovery. With an intuitive search
function and user-friendly interface, navigating the Pokédex is a breeze. Whether you're
searching by name, type, region, or even specific attributes like height or weight, PokéAtlas
makes it easy to find exactly what you're looking for.
</p>
</div>
<div class="colTwo"></div>
<div class="two font-bold">
<p>
dynamic community features. In addition to browsing the Pokédex, users can create their own
profiles, customize their collections, and connect with fellow trainers from around the world.
Whether you're sharing your latest catches, discussing strategy, or organizing trades and
battles, PokéAtlas provides a vibrant platform for connecting with other Pokémon fans.
<i>Ready to catch 'em all?</i>
</p>
</div>
<img src="/template-welcome-pokedex.png" alt="welcome background" height="100%" width="100%" />
</div>
<div class="stat">
<div class="stat-title">New Users</div>
<div class="stat-value">4,200</div>
<div class="stat-desc">↗︎ 400 (22%)</div>
</div>
<div class="flex justify-center">
<div class="text-4xl text-center font-mono p-8">
<h3>Join Us!</h3>
</div>
<div class="card w-96 bg-base-100 shadow-xl p-16">
<div class="card-body">
<h4 class="card-title">
We invite you to share your thoughts, ideas, and experiences with fellow Trainers from
around the globe
</h4>
<p></p>
<div class="card-actions justify-end">
<a href="discord.com">Discord </a>
</div>
<div class="stat">
<div class="stat-title">Living Dexes Completed</div>
<div class="stat-value">1,200</div>
<div class="stat-desc">↘︎ 90 (14%)</div>
</div>
</div>
<div class="features mt-8">
<h1 class="flex justify-center text-4xl font-bold mb-5">Features</h1>
<ul class="space-y-6">
<li class="p-6 rounded-lg shadow-md bg-neutral">
<div class="flex items-start space-x-4">
<svg
class="w-8 h-8 text-green-500 flex-shrink-0"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"
></path>
</svg>
<div>
<h2 class="text-lg font-semibold">Social</h2>
<p>
Easily share your Pokédex journey with friends, or find theirs. If you'd rather go it
alone, that's okay too!
</p>
</div>
</div>
</li>
<li class="p-6 rounded-lg shadow-md bg-neutral">
<div class="flex items-start space-x-4">
<svg
class="w-8 h-8 text-green-500 flex-shrink-0"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"
></path>
</svg>
<div>
<h2 class="text-lg font-semibold">Free & Open Source</h2>
<p>
Completely open source and free to use, enabling the community to contribute updates
as soon as new Pokémon are released.
</p>
</div>
</div>
</li>
<li class="p-6 rounded-lg shadow-md bg-neutral">
<div class="flex items-start space-x-4">
<svg
class="w-8 h-8 text-green-500 flex-shrink-0"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"
></path>
</svg>
<div>
<h2 class="text-lg font-semibold">Easy to use with advanced filtering</h2>
<p>
If you just want to track your progress completing your Pokédex, you can do that. But
if you are attempting a harder variant, like a Living Origin Forme Dex, you might find
our advanced filtering options helpful for tracking target Pokémon for specific
catching sessions.
</p>
</div>
</div>
</li>
<li class="p-6 rounded-lg shadow-md bg-neutral">
<div class="flex items-start space-x-4">
<svg
class="w-8 h-8 text-green-500 flex-shrink-0"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"
></path>
</svg>
<div>
<h2 class="text-lg font-semibold">100% free</h2>
<p>Did we mention it's completely free to use? Oh, we did? Good. Because it is.</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<style>
.welcome-banner {
position: relative;
}
h2 {
font-size: 40px;
text-align: center;
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
}
.one {
position: absolute;
font-size: 15px;
top: 50%;
left: 10%;
transform: translate(-50%, -50%);
padding-right: 20px;
max-width: calc(50% - 210px);
text-align: right;
}
.two {
position: absolute;
top: 50%;
right: 10%;
transform: translate(50%, -50%);
padding-left: 0px;
max-width: calc(50% - 210px);
text-align: right;
}
</style>