generated from damir/go_app_template
55 lines
2.4 KiB
HTML
55 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Go + HTMX Demo</title>
|
||
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
</head>
|
||
<body class="bg-gray-100 p-8">
|
||
<div class="max-w-2xl mx-auto bg-white p-6 rounded-lg shadow-md">
|
||
<h1 class="text-2xl font-bold mb-4">Go + HTMX Интерактив</h1>
|
||
|
||
<section class="mb-8 p-4 border rounded">
|
||
<h2 class="text-lg font-semibold">1. Обновление времени</h2>
|
||
<div id="time-display" class="my-2 text-blue-600 font-mono">
|
||
Нажми кнопку, чтобы узнать время
|
||
</div>
|
||
<button hx-get="/get-time"
|
||
hx-target="#time-display"
|
||
class="bg-blue-500 text-white px-4 py-2 rounded">
|
||
Обновить время
|
||
</button>
|
||
</section>
|
||
|
||
<section class="mb-8 p-4 border rounded">
|
||
<h2 class="text-lg font-semibold">2. Добавление данных (POST)</h2>
|
||
<form hx-post="/add-item"
|
||
hx-target="#item-list"
|
||
hx-swap="beforeend"
|
||
hx-on::after-request="this.reset()"
|
||
class="flex gap-2 my-2">
|
||
<input type="text" name="item" placeholder="Что купить?" required
|
||
class="border p-2 flex-grow rounded">
|
||
<button type="submit" class="bg-green-500 text-white px-4 py-2 rounded">Добавить</button>
|
||
</form>
|
||
<ul id="item-list" class="list-disc pl-5 space-y-1">
|
||
</ul>
|
||
</section>
|
||
|
||
<section class="mb-8 p-4 border rounded">
|
||
<h2 class="text-lg font-semibold">3. Удаление с подтверждением</h2>
|
||
<div class="p-3 bg-red-50 border border-red-200 rounded flex justify-between items-center" id="danger-zone">
|
||
<span>Секретный объект</span>
|
||
<button hx-delete="/delete-danger"
|
||
hx-confirm="Вы уверены, что хотите удалить это?"
|
||
hx-target="#danger-zone"
|
||
hx-swap="outerHTML"
|
||
class="text-red-600 font-bold">
|
||
Удалить
|
||
</button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</body>
|
||
</html> |