Phase 3: HTMX inline tag editing, swap animations, loading indicators, Alpine phone validation

This commit is contained in:
2026-08-07 18:18:49 +10:00
parent e264125214
commit aa023cf89e
9 changed files with 87 additions and 9 deletions

View File

@@ -8,6 +8,15 @@
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<style>
/* HTMX swap/settle animations */
.htmx-swapping { opacity: 0; transition: opacity 150ms ease-out; }
.htmx-settling { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-settling.show { opacity: 1; }
.fade-row { transition: opacity 200ms ease-out; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.htmx-indicator { opacity: 0; transition: opacity 150ms ease-in; }
</style>
</head>
<body class="min-h-full bg-stone-100 text-stone-900 antialiased">
<nav class="bg-stone-900 text-white">