Feat: Frontend
This commit is contained in:
parent
e0bf5dc02a
commit
6bbf58d35d
106
Frontend/src/components/Icons.svelte
Normal file
106
Frontend/src/components/Icons.svelte
Normal file
@ -0,0 +1,106 @@
|
||||
<script context="module" lang="ts">
|
||||
export type IconValues =
|
||||
| 'analytics'
|
||||
| 'back'
|
||||
| 'building'
|
||||
| 'calendar'
|
||||
| 'calendarView'
|
||||
| 'camera'
|
||||
| 'chart'
|
||||
| 'chat'
|
||||
| 'chat-small'
|
||||
| 'check'
|
||||
| 'check-big'
|
||||
| 'checklist'
|
||||
| 'chevron'
|
||||
| 'cloud'
|
||||
| 'company'
|
||||
| 'cross'
|
||||
| 'dots-horizontal'
|
||||
| 'dots-vertical'
|
||||
| 'edit'
|
||||
| 'eye'
|
||||
| 'eye-off'
|
||||
| 'filter-lines'
|
||||
| 'hamburger'
|
||||
| 'hash'
|
||||
| 'help'
|
||||
| 'heart-hand'
|
||||
| 'home'
|
||||
| 'listView'
|
||||
| 'lock'
|
||||
| 'logout'
|
||||
| 'map'
|
||||
| 'microphone'
|
||||
| 'notification-box'
|
||||
| 'people'
|
||||
| 'plus'
|
||||
| 'plus-circle'
|
||||
| 'profile'
|
||||
| 'publish'
|
||||
| 'qrcode'
|
||||
| 'schedule'
|
||||
| 'search'
|
||||
| 'share'
|
||||
| 'settings'
|
||||
| 'send'
|
||||
| 'social'
|
||||
| 'support'
|
||||
| 'table'
|
||||
| 'trash'
|
||||
| 'upload'
|
||||
| 'user-circle'
|
||||
| 'user-default'
|
||||
| 'user-down'
|
||||
| 'user-plus'
|
||||
| 'user-remove'
|
||||
| 'verified'
|
||||
| 'socials/Twitter'
|
||||
| 'socials/LinkedIn';
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export var icon: IconValues;
|
||||
export var active: boolean = false;
|
||||
export var inactive: boolean = false;
|
||||
export var black: boolean = false;
|
||||
export var white: boolean = false;
|
||||
export var rotate = 0;
|
||||
|
||||
let className = '';
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="icon {className}"
|
||||
class:active
|
||||
class:inactive
|
||||
style:mask="url(/images/icons/{icon}.svg) no-repeat center"
|
||||
style:-webkit-mask="url(/images/icons/{icon}.svg) no-repeat center"
|
||||
style:transform="rotate({rotate}deg)"
|
||||
class:black
|
||||
class:white
|
||||
on:click
|
||||
on:dblclick
|
||||
on:keydown
|
||||
on:keypress
|
||||
on:keyup
|
||||
/>
|
||||
|
||||
<style>
|
||||
.icon {
|
||||
@apply w-8 h-8 bg-current origin-center rounded-[100%];
|
||||
}
|
||||
.icon.active {
|
||||
@apply bg-primary;
|
||||
}
|
||||
.icon.black {
|
||||
@apply bg-black;
|
||||
}
|
||||
.icon.inactive {
|
||||
@apply bg-gray-700;
|
||||
}
|
||||
.icon.white {
|
||||
@apply bg-white;
|
||||
}
|
||||
</style>
|
||||
@ -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>
|
||||
|
||||
@ -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
Frontend/src/routes/about/+page.svelte
Normal file
17
Frontend/src/routes/about/+page.svelte
Normal 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">
|
||||
It’s an open-source management tool for access points with
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.height {
|
||||
height: calc(100vh - 14rem);
|
||||
}
|
||||
</style>
|
||||
12
Frontend/src/routes/contact/+page.svelte
Normal file
12
Frontend/src/routes/contact/+page.svelte
Normal 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
Frontend/src/routes/docs/+page.svelte
Normal file
19
Frontend/src/routes/docs/+page.svelte
Normal 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
Frontend/src/routes/settings/+page.svelte
Normal file
26
Frontend/src/routes/settings/+page.svelte
Normal 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>
|
||||
Loading…
Reference in New Issue
Block a user