Integrate Alpine & Htmx extensions
This commit is contained in:
parent
c2535f7115
commit
151a2be1c4
BIN
src/main/resources/static/android-chrome-192x192.png
Normal file
BIN
src/main/resources/static/android-chrome-192x192.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 12 KiB |
BIN
src/main/resources/static/android-chrome-512x512.png
Normal file
BIN
src/main/resources/static/android-chrome-512x512.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 32 KiB |
BIN
src/main/resources/static/apple-touch-icon.png
Normal file
BIN
src/main/resources/static/apple-touch-icon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 11 KiB |
BIN
src/main/resources/static/favicon-16x16.png
Normal file
BIN
src/main/resources/static/favicon-16x16.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 526 B |
BIN
src/main/resources/static/favicon-32x32.png
Normal file
BIN
src/main/resources/static/favicon-32x32.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.3 KiB |
BIN
src/main/resources/static/favicon.ico
Normal file
BIN
src/main/resources/static/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 15 KiB |
1
src/main/resources/static/site.webmanifest
Normal file
1
src/main/resources/static/site.webmanifest
Normal file
@ -0,0 +1 @@
|
||||
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
|
@ -1,9 +1,9 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es" xmlns:th="http://www.thymeleaf.org">
|
||||
|
||||
<head th:replace="fragments/head :: head"></head>
|
||||
<head th:replace="fragments/head"></head>
|
||||
|
||||
<body>
|
||||
<body hx-ext="response-targets, class-tools, loading-states">
|
||||
<div class="grid grid-cols-[5rem_auto]">
|
||||
<!-- Navigation Rail -->
|
||||
<div th:replace="fragments/navigation_rail :: div"></div>
|
||||
@ -19,43 +19,39 @@
|
||||
<img class="inline-block w-[10rem] h-[10rem]" src="" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<form>
|
||||
<div x-data="{user_dni: ''}">
|
||||
<form
|
||||
hx-get="/certs/person" hx-target="#person-search-result"
|
||||
hx-target-4*="#person-search-result"
|
||||
hx-swap="outerHTML"
|
||||
>
|
||||
<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
|
||||
<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
|
||||
/>
|
||||
disabled:opacity-50 disabled:cursor-not-allowed" type="text" minLength="8"
|
||||
maxLength="15" pattern="[0-9]{8,15}" placeholder="Número de DNI" x-model="user_dni"
|
||||
required />
|
||||
|
||||
<label for="search-dni" class="absolute -top-2 left-2 text-xs bg-c-surface px-1 select-none">DNI</label>
|
||||
<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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
|
||||
<button type="submit" class="hidden"
|
||||
x-effect="user_dni.length >= 8? $el.click() : null"
|
||||
>
|
||||
Buscar
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p class="relative max-w-[14rem] mx-auto p-1 text-c-error text-sm select-none opacity-0">
|
||||
|
@ -11,8 +11,13 @@
|
||||
|
||||
<!-- htmx -->
|
||||
<script defer src="https://unpkg.com/htmx.org@1.9.8/dist/htmx.min.js"></script>
|
||||
<script defer src="https://unpkg.com/htmx.org/dist/ext/response-targets.js"></script>
|
||||
<script defer src="https://unpkg.com/htmx.org/dist/ext/class-tools.js"></script>
|
||||
<script defer src="https://unpkg.com/htmx.org/dist/ext/loading-states.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" />
|
||||
<!-- Alpinejs -->
|
||||
<script src="https://unpkg.com/alpinejs" defer></script>
|
||||
</head>
|
Loading…
Reference in New Issue
Block a user