Initial commit: caddy static file server workspace

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-23 19:33:50 +08:00
commit a98b21114c
1438 changed files with 15044 additions and 0 deletions
--- a/caddy/www/lit_form_example.html
+++ b/caddy/www/lit_form_example.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Lit Form Example</title>
+  <!-- 引入 Tailwind CSS -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- 引入 Lit -->
+  <script type="module" src="https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm"></script>
+</head>
+<body class="bg-gray-100 flex items-center justify-center min-h-screen">
+  <!-- 使用自訂元件 -->
+  <custom-form></custom-form>
+
+  <script type="module">
+    import { LitElement, html, css } from 'https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm';
+
+    class CustomForm extends LitElement {
+      // 禁用 Shadow DOM，讓 Tailwind CSS 全域樣式生效
+      createRenderRoot() {
+        return this; // 渲染到 Light DOM
+      }
+
+      render() {
+        return html`
+          <form class="max-w-md w-full bg-white p-6 rounded-lg shadow-lg">
+            <!-- Username -->
+            <label class="block mb-4">
+              <span class="block text-sm font-medium text-slate-700">Username</span>
+              <input
+                type="text"
+                value="tbone"
+                disabled
+                class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
+                  focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
+                  disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none
+                  invalid:border-pink-500 invalid:text-pink-600
+                  focus:invalid:border-pink-500 focus:invalid:ring-pink-500"
+              />
+            </label>
+
+            <!-- Email -->
+            <label class="block mb-4">
+              <span class="block text-sm font-medium text-slate-700">Email</span>
+              <input
+                type="email"
+                placeholder="yourname@example.com"
+                class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
+                  focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
+                  invalid:border-pink-500 invalid:text-pink-600
+                  focus:invalid:border-pink-500 focus:invalid:ring-pink-500"
+              />
+            </label>
+
+            <!-- Password -->
+            <label class="block mb-4">
+              <span class="block text-sm font-medium text-slate-700">Password</span>
+              <input
+                type="password"
+                placeholder="Enter your password"
+                class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
+                  focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
+                  invalid:border-pink-500 invalid:text-pink-600
+                  focus:invalid:border-pink-500 focus:invalid:ring-pink-500"
+              />
+            </label>
+
+            <!-- Submit Button -->
+            <button
+              type="submit"
+              class="mt-4 w-full bg-sky-500 hover:bg-sky-600 text-white font-medium py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-sky-400"
+            >
+              Submit
+            </button>
+          </form>
+        `;
+      }
+    }
+
+    customElements.define('custom-form', CustomForm);
+  </script>
+</body>
+</html>
+