Add index.html

2026-04-04 17:38:52 +00:00
parent ff1978ecf9
commit e5d87b2a97
1 changed files with 55 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,55 @@
+<!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>