Certs controller. Split html into fragemnts. Certs html

master
Araozu 2024-03-14 16:18:06 -05:00
parent a7f83e4ca0
commit c2535f7115
5 changed files with 172 additions and 77 deletions

View File

@ -0,0 +1,16 @@
package dev.araozu.eeg_java.certs;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.ui.Model;
@Controller
@RequestMapping(path = "/certs")
public class CertController {
@GetMapping("")
public String index(Model model) {
return "certs";
}
}

View File

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="es" xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/head :: head"></head>
<body>
<div class="grid grid-cols-[5rem_auto]">
<!-- Navigation Rail -->
<div th:replace="fragments/navigation_rail :: div"></div>
<!-- Certs -->
<div>
<div class="grid grid-cols-[16rem_25rem_1fr]">
<!-- Search -->
<div>
<div class="text-center">
<div
class="my-4 inline-block w-[10rem] h-[10rem] rounded-lg bg-c-surface-variant overflow-hidden">
<img class="inline-block w-[10rem] h-[10rem]" src="" />
</div>
</div>
<div>
<form>
<div class="relative max-w-[14rem] mx-auto">
<input
id="search-dni"
class="bg-c-background text-c-on-background border-c-outline border-2 rounded px-2 py-1 w-full
invalid:border-c-error invalid:text-c-error
focus:border-c-primary outline-none font-mono
disabled:opacity-50 disabled:cursor-not-allowed"
type="text"
minLength="8"
maxLength="15"
pattern="[0-9]{8,15}"
placeholder="Número de DNI"
required
/>
<label for="search-dni" class="absolute -top-2 left-2 text-xs bg-c-surface px-1 select-none">DNI</label>
<span
class="absolute top-[2px] right-14 rounded hover:bg-c-surface-variant"
>
<LoadingIcon class="animate-spin" fill="var(--c-on-surface)" />
</span>
<button
type="button"
class="absolute top-1 right-8 rounded hover:bg-c-surface-variant"
>
<i class="ph ph-copy inline-block w-6 text-2xl"></i>
</button>
<button
type="button"
class="absolute top-1 right-1 rounded hover:bg-c-surface-variant"
>
<i class="ph ph-x-circle inline-block w-6 text-2xl"></i>
</button>
</div>
</form>
<p class="relative max-w-[14rem] mx-auto p-1 text-c-error text-sm select-none opacity-0">
Error: {error()}
</p>
<div id="person-search-result"></div>
</div>
</div>
<!-- New Register -->
<div>new register</div>
<!-- Registers -->
<div>registers</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,18 @@
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>EEGSAC - Java</title>
<!-- tailwind & color schemes -->
<link href="/colors.css" rel="stylesheet">
<link href="/main.css" rel="stylesheet">
<!-- htmx -->
<script defer src="https://unpkg.com/htmx.org@1.9.8/dist/htmx.min.js"></script>
<!-- color manager -->
<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>

View File

@ -0,0 +1,59 @@
<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>

View File

@ -1,88 +1,13 @@
<!doctype html> <!doctype html>
<html lang="es" xmlns:th="http://www.thymeleaf.org"> <html lang="es" xmlns:th="http://www.thymeleaf.org">
<head> <head th:replace="fragments/head"></head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>EEGSAC - Java</title>
<!-- tailwind & color schemes -->
<link href="/colors.css" rel="stylesheet">
<link href="/main.css" rel="stylesheet">
<!-- htmx -->
<script defer src="https://unpkg.com/htmx.org@1.9.8/dist/htmx.min.js"></script>
<!-- color manager -->
<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>
<body> <body>
<div class="grid grid-cols-[5rem_auto]"> <div class="grid grid-cols-[5rem_auto]">
<!-- Navigation Rail --> <!-- Navigation Rail -->
<div> <div th:replace="fragments/navigation_rail"></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 --> <!-- Main Content -->
<div class="container"> <div class="container">