Feat: Frontend

This commit is contained in:
Bruno
2023-05-16 20:37:28 +02:00
parent e0bf5dc02a
commit 6bbf58d35d
7 changed files with 217 additions and 5 deletions
+13 -5
View File
@@ -2,14 +2,22 @@
import '$styles/tailwind.css';
const pages = [
{ name: 'Home', icon: 'home', path: '/attendee' },
{ name: 'Chat', icon: 'chat', path: '/attendee/chat' },
{ name: 'Networking', icon: 'social', path: '/attendee/networking' },
{ name: 'Calendar', icon: 'calendar', path: '/attendee/calendar' }
{ name: 'Dashboard', path: '/' },
{ name: 'Settings', path: '/settings' },
{ name: 'About', path: '/about' },
{ name: 'Docs', path: '/docs' },
{ name: 'Contact', path: '/contact' }
] as const;
</script>
<div class="bg-[#0B2A37] h-screen w-screen">
<div />
<div class="flex flex-row items-center px-20">
<img class="w-40" src="/icons/Logo.svg" alt="Logo" />
<div class="w-full justify-between flex px-5 lg:px-40 text-lg text-white">
{#each pages as link}
<a href={link.path}>{link.name}</a>
{/each}
</div>
</div>
<slot />
</div>
+24
View File
@@ -0,0 +1,24 @@
<script lang="ts">
let numberOfAccessPoints = 0;
let numberOfAccessPointsUp = 0;
</script>
<div class="height">
<div class="bg-[#05171E] rounded-lg w-3/4 h-full mx-auto mt-20 py-4 px-20">
<div class="text-white text-center text-3xl">Dashboard</div>
<div class="flex flex-row text-white mt-20 text-xl">
<div class="pr-2">Access point amount :</div>
<div>{numberOfAccessPoints}</div>
</div>
<div class="flex flex-row text-white mt-20 text-xl">
<div class="pr-2">Access points up :</div>
<div>{numberOfAccessPointsUp}</div>
</div>
</div>
</div>
<style>
.height {
height: calc(100vh - 14rem);
}
</style>
+17
View File
@@ -0,0 +1,17 @@
<div class="height">
<div class="bg-[#05171E] rounded-lg w-3/4 h-full mx-auto mt-20 py-4 px-20">
<div class="text-white text-center text-3xl">About</div>
<div class="flex flex-row text-white mt-20 text-xl">
This project was made by the Pátek team during the 2023 Junior AT&T Hackathon.
</div>
<div class="flex flex-row text-white mt-20 text-xl">
Its an open-source management tool for access points with
</div>
</div>
</div>
<style>
.height {
height: calc(100vh - 14rem);
}
</style>
+12
View File
@@ -0,0 +1,12 @@
<div class="height">
<div class="bg-[#05171E] rounded-lg w-3/4 h-full mx-auto mt-20 py-4 px-20">
<div class="text-white text-center text-3xl">Contact</div>
<div class="flex flex-row text-white mt-20 text-xl">patek@gbl.cz</div>
</div>
</div>
<style>
.height {
height: calc(100vh - 14rem);
}
</style>
+19
View File
@@ -0,0 +1,19 @@
<div class="height">
<div class="bg-[#05171E] rounded-lg w-3/4 h-full mx-auto mt-20 py-4 px-20">
<div class="text-white text-center text-3xl">Docs</div>
<div class="flex flex-row text-white mt-20 text-xl">
dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy
text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy
text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy
text dummy text
</div>
</div>
</div>
<style>
.height {
height: calc(100vh - 14rem);
}
</style>
+26
View File
@@ -0,0 +1,26 @@
<div class="height">
<div class="bg-[#05171E] rounded-lg w-3/4 h-full mx-auto mt-20 py-4 px-20">
<div class="text-white text-center text-3xl">Settings</div>
<table class="text-white border mx-auto mt-10">
<tr>
<th class="title">ID</th>
<th class="title">Name</th>
<th class="title">Type</th>
<th class="title">Location</th>
<th class="title">IP address</th>
</tr>
</table>
<div class="flex justify-center mt-10">
<button class="text-white py-2 px-10 bg-[#1D3920] rounded-xl"> Add access point </button>
</div>
</div>
</div>
<style>
.height {
height: calc(100vh - 14rem);
}
.title {
@apply py-2 px-10 bg-[#5B5B5B] border;
}
</style>