mirror of
https://github.com/jcreek/LivingDexTracker.git
synced 2026-07-12 18:43:45 +00:00
Make profile page
This commit is contained in:
Amber M
@@ -89,7 +89,7 @@
|
||||
</svelte:head>
|
||||
|
||||
<header>
|
||||
<div class="navbar bg-base-100">
|
||||
<div class="navbar bg-neutral">
|
||||
<div class="flex-1">
|
||||
<a class="btn btn-ghost text-xl" href="/">Living Dex Tracker</a>
|
||||
</div>
|
||||
@@ -104,10 +104,7 @@
|
||||
<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"
|
||||
/>
|
||||
<img alt="usericon" src="/OIG5.jpg" />
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
|
||||
+85
-2
@@ -15,15 +15,98 @@
|
||||
onDestroy(unsubscribe);
|
||||
</script>
|
||||
|
||||
<div class="hero min-h-screen bg-base-200">
|
||||
<div class="hero min-h-screen bg-base-100">
|
||||
<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">
|
||||
<div class="card shrink-0 w-full max-w-sm shadow-2xl bg-neutral">
|
||||
<SignUp {supabase} />
|
||||
</div>
|
||||
</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="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="Join Us 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>
|
||||
</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>
|
||||
|
||||
@@ -1 +1,58 @@
|
||||
<h1>dfftht</h1>
|
||||
<div class="h-screen">
|
||||
<div id="banner">
|
||||
<div id="avatar">
|
||||
<div
|
||||
class="avatar mt-10 ml-20 w-14 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2"
|
||||
>
|
||||
<div class="rounded-full"><img src="/OIG5.jpg" alt="profile icon" /></div>
|
||||
</div>
|
||||
<button class="btn btn-outline btn-primary">Upload new avatar</button>
|
||||
</div>
|
||||
<div id="personal-information">
|
||||
<p class="text-white font-mono text-3xl font-bold">Username</p>
|
||||
<p class="text-white font-mono text-3xl font-bold">Title</p>
|
||||
<p class="text-white font-mono text-3xl font-bold">Level</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="profile-content">
|
||||
<div id="pokemon-collection-summary">
|
||||
<div class="radial-progress top-0 left-0" style="--value:70;" role="progressbar">70%</div>
|
||||
<div class="caught-text top-20 left-30 font-mono text-xl">
|
||||
<p>Total Pokemon Caught</p>
|
||||
</div>
|
||||
|
||||
<h2 class="">Types Collected</h2>
|
||||
<ul>
|
||||
<li class="type-list-item font-mono">Fire</li>
|
||||
</ul>
|
||||
<br />
|
||||
any other relevant statistics or achievements
|
||||
</div>
|
||||
<div id="customisation-options">
|
||||
theme selection
|
||||
<br />
|
||||
profile background
|
||||
<br />
|
||||
any other features that enhance user experience and personalisation
|
||||
</div>
|
||||
<div id="social-sharing">
|
||||
options for users to share their profile or achievements on social media platforms,
|
||||
encouraging engagement and interaction with other users
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#banner {
|
||||
background: rgb(41, 106, 170);
|
||||
background: linear-gradient(0deg, rgba(41, 106, 170, 1) 0%, rgba(123, 225, 255, 1) 100%);
|
||||
}
|
||||
|
||||
#profile-content {
|
||||
background-color: rgb(255, 247, 238);
|
||||
color: black;
|
||||
}
|
||||
.ring {
|
||||
box-shadow: 0 0 0 4px rgb(149, 175, 230);
|
||||
}
|
||||
</style>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Reference in New Issue
Block a user