dockerfiles/Fishie-Honesty-UI
1
0
Fork 0
mirror of https://github.com/WhoIsFishie/Fishie-Honesty-UI.git synced 2025-12-17 10:33:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

testing new icons package + shitty navbar done

Browse Source
This commit is contained in:
Elgius
2023-04-15 13:19:47 +05:00
parent ad41c1aadc
commit 74b8694f0f
5 changed files with 81 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/lib/components/navbar.svelte
View File

@@ -1,9 +1,17 @@
<script>
import Icon from 'svelte-icons-pack/Icon.svelte'
import BiArrowBack from "svelte-icons-pack/bi/BiArrowBack";
import BiSolidHome from "svelte-icons-pack/bi/BiSolidHome";
import BsPerson from "svelte-icons-pack/bs/BsPerson";
</script>
<section>
<nav>
</nav>
</section>
<div class='border border-black rounded-lg'>
<div class="p-2">
<ul class="flex flex-row gap-2 items-center justify-between">
<li><Icon src ={BiArrowBack} size={20} /></li>
<li><Icon src={BiSolidHome} size={20} /></li>
<li><Icon src={BsPerson} size={20} /></li>
</ul>
</div>
</div>

2
src/routes/bio/+page.svelte
View File

@@ -36,7 +36,7 @@
<input type="text" placeholder="Instagram" class="input w-full max-w-xs" />
<input type="text" placeholder="Discord" class="input w-full max-w-xs" />
<input type="text" placeholder="Twitter" class="input w-full max-w-xs" />
<input type="text" placeholder="Tik Tok" class="input w-full max-w-xs" />
<input type="text" placeholder="TikTok" class="input w-full max-w-xs" />
<input type="text" placeholder="SnapChat" class="input w-full max-w-xs" />
</div>
</div>

109
src/routes/leaderboard/+page.svelte
View File

@@ -1,66 +1,67 @@
<script>
import Navbar from '../../lib/components/navbar.svelte';
</script>
<section>
<div class="text-center mt-5">
<div class="text-center mt-5">
<h1 class="text-3xl font-bold">Honesty</h1>
<p class="text-sm font-bold">by Fishie</p>
</div>
<div class="mt-10 mb-10 flex justify-center items-center">
<p class="text-sm font-bold">Leaderboard</p>
</div>
<div class="mt-10 mb-10 flex justify-center items-center">
<p class="text-sm font-bold">Leaderboard</p>
</div>
<div class="flex flex-col gap-4 items-center justify-center">
<div class="flex flex-col gap-4 items-center justify-center">
<div class="card w-96 bg-base-100 shadow-xl">
<div class="card-body p-10 rounded-lg">
<div class="avatar">
<div class="w-20 rounded-full">
<img
src="https://plus.unsplash.com/premium_photo-1679596990314-7296548d8acb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
alt="profile pic"
/>
<div />
</div>
<div class="card w-96 bg-base-100 shadow-xl">
<div class="card-body p-10 rounded-lg">
<div class="avatar">
<div class="w-20 rounded-full">
<img
src="https://plus.unsplash.com/premium_photo-1679596990314-7296548d8acb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
alt="profile pic"
/>
<div />
</div>
<h1 class="mr-10">@Username</h1>
</div>
</div>
</div>
<h1 class="mr-10">@Username</h1>
</div>
<div class="card w-96 bg-base-100 shadow-xl">
<div class="card-body p-10 rounded-lg">
<div class="avatar">
<div class="w-20 rounded-full">
<img
src="https://plus.unsplash.com/premium_photo-1679596990314-7296548d8acb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
alt="profile pic"
/>
<div />
</div>
<h1 class="mr-10">@Username</h1>
</div>
</div>
</div>
<div class="card w-96 bg-base-100 shadow-xl">
<div class="card-body p-10 rounded-lg">
<div class="avatar">
<div class="w-20 rounded-full">
<img
src="https://plus.unsplash.com/premium_photo-1679596990314-7296548d8acb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
alt="profile pic"
/>
<div />
</div>
<h1 class="mr-10">@Username</h1>
</div>
</div>
</div>
<div class="container mt-10">
<Navbar />
</div>
</div>
<div class="card w-96 bg-base-100 shadow-xl">
<div class="card-body p-10 rounded-lg">
<div class="avatar">
<div class="w-20 rounded-full">
<img
src="https://plus.unsplash.com/premium_photo-1679596990314-7296548d8acb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
alt="profile pic"
/>
<div />
</div>
<h1 class="mr-10">@Username</h1>
</div>
</div>
</div>
<div class="card w-96 bg-base-100 shadow-xl">
<div class="card-body p-10 rounded-lg">
<div class="avatar">
<div class="w-20 rounded-full">
<img
src="https://plus.unsplash.com/premium_photo-1679596990314-7296548d8acb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
alt="profile pic"
/>
<div />
</div>
<h1 class="mr-10">@Username</h1>
</div>
</div>
</div>
</div>
</section>
</div>
</section>