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

Make profile page

Browse Source
This commit is contained in:
Amber M
2024-04-28 13:15:48 +01:00
parent 548e918fd9
commit e6b4cc84bc
4 changed files with 146 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/profile/+page.svelte
+58 -1
View File
@@ -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>