spy4x/gb-lux
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui: Map display with location of devices

Browse Source
This commit is contained in:
Eirene 2024-01-28 15:43:54 +08:00
parent e726997708
commit 26a5f88dcb
2 changed files with 96 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
apps/front/src/routes/+page.svelte
View File

@ -2,6 +2,7 @@
import Table from '$lib/client/components/table.svelte'; import Table from '$lib/client/components/table.svelte';
</script> </script>
<section class="space-y-6 lg:space-y-10">
<!-- Pinned projects --> <!-- Pinned projects -->
<ul role="list" class="grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8"> <ul role="list" class="grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8">
<li class="overflow-hidden rounded-xl border border-gray-200 bg-white"> <li class="overflow-hidden rounded-xl border border-gray-200 bg-white">
@ -91,6 +92,29 @@
</li> </li>
</ul> </ul>
<div class="mt-10"> <!--Map-->
<Table/> <div class="relative overflow-hidden rounded-xl border border-gray-200 bg-white">
<img class="brightness-90" src="../img/map.png" width="2414" height="2008" alt="Map example">
<ul>
<li class="absolute top-60 left-[30rem]">
<span class="relative size-6 flex items-center justify-center text-white bg-green-600 rounded-full">
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" />
</svg>
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
</span>
</li>
<li class="absolute top-80 left-[35rem]">
<span class="relative size-6 flex items-center justify-center text-white bg-red-600 rounded-full">
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" />
</svg>
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
</span>
</li>
</ul>
</div> </div>
<Table/>
</section>

BIN
apps/front/static/img/map.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 MiB