Create index page

This commit is contained in:
Araozu 2024-03-14 15:46:46 -05:00
parent 8b1c18ae8d
commit a7f83e4ca0
2 changed files with 75 additions and 5 deletions

View File

@ -1,4 +1,4 @@
package dev.araozu.eeg_java.controller; package dev.araozu.eeg_java.index;
import org.springframework.ui.Model; import org.springframework.ui.Model;
import org.springframework.stereotype.Controller; import org.springframework.stereotype.Controller;

View File

@ -1,5 +1,6 @@
<!doctype html> <!doctype html>
<html lang="es" xmlns:th="http://www.thymeleaf.org"> <html lang="es" xmlns:th="http://www.thymeleaf.org">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" <meta name="viewport"
@ -15,12 +16,81 @@
<script defer src="https://unpkg.com/htmx.org@1.9.8/dist/htmx.min.js"></script> <script defer src="https://unpkg.com/htmx.org@1.9.8/dist/htmx.min.js"></script>
<!-- color manager --> <!-- color manager -->
<script defer src="/colorManager.js"></script> <script defer src="/colorManager.js"></script>
<!-- Phosphor icons -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@phosphor-icons/web@2.0.3/src/regular/style.css" />
</head> </head>
<body> <body>
<h1 class="font-black text-4xl p-4 m-4 border-2 border-[black] rounded-md bg-c-surface-variant text-c-on-surface-variant"> <div class="grid grid-cols-[5rem_auto]">
Java forever and ever <!-- Navigation Rail -->
</h1> <div>
<div class="flex flex-col justify-center items-center h-screen overflow-x-hidden">
<a class="my-3 text-center group hover:bg-c-surface-variant rounded-xl transition-colors
max-w-[4rem] inline-block select-none" href="/">
<div
class="p-1 inline-block group-[.active]:bg-c-surface-variant min-w-[4rem] rounded-full transition-colors">
<i class="ph ph-house"></i>
</div>
<span class="text-sm">
Inicio
</span>
</a>
<a class="my-3 text-center group hover:bg-c-surface-variant rounded-xl transition-colors
max-w-[4rem] inline-block select-none" href="/certs">
<div
class="p-1 inline-block group-[.active]:bg-c-surface-variant min-w-[4rem] rounded-full transition-colors">
<i class="ph ph-file-doc"></i>
</div>
<span class="text-sm">
Certs
</span>
</a>
<a class="my-3 text-center group hover:bg-c-surface-variant rounded-xl transition-colors
max-w-[4rem] inline-block select-none" href="/accesos">
<div
class="p-1 inline-block group-[.active]:bg-c-surface-variant min-w-[4rem] rounded-full transition-colors">
<i class="ph ph-password"></i>
</div>
<span class="text-sm">
Accesos
</span>
</a>
<a class="my-3 text-center group hover:bg-c-surface-variant rounded-xl transition-colors
max-w-[4rem] inline-block select-none" href="/escaneos">
<div
class="p-1 inline-block group-[.active]:bg-c-surface-variant min-w-[4rem] rounded-full transition-colors">
<i class="ph ph-scan"></i>
</div>
<span class="text-sm">
Escaneos
</span>
</a>
<a class="my-3 text-center group hover:bg-c-surface-variant rounded-xl transition-colors
max-w-[4rem] inline-block select-none" href="/reportes">
<div
class="p-1 inline-block group-[.active]:bg-c-surface-variant min-w-[4rem] rounded-full transition-colors">
<i class="ph ph-chart-scatter"></i>
</div>
<span class="text-sm">
Reportes
</span>
</a>
</div>
</div>
<!-- Main Content -->
<div class="container">
<h1 class="text-2xl py-4 font-bold">Página principal</h1>
<p>Selecciona uno de los botones en la barra lateral para acceder a la funcionalidad.</p>
</div>
</div>
</body> </body>
</html> </html>