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_tailwind_card_example.html
+++ b/caddy/www/lit_tailwind_card_example.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Lit with Tailwind CSS</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 min-h-screen flex items-center justify-center">
+  <!-- 自訂元件 -->
+  <my-component></my-component>
+
+  <script type="module">
+    import { LitElement, html, css } from 'https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm';
+
+    class MyComponent extends LitElement {
+      // 禁用 Shadow DOM 讓 Tailwind CSS 生效
+      createRenderRoot() {
+        return this; // 渲染到 Light DOM
+      }
+
+      render() {
+        return html`
+          <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
+            <div class="md:flex">
+              <div class="md:shrink-0">
+                <img class="h-48 w-full object-cover md:h-full md:w-48" src="https://via.placeholder.com/150" alt="Placeholder Image">
+              </div>
+              <div class="p-8">
+                <h1 class="block mt-1 text-lg leading-tight font-bold text-blue-500">Welcome to Tailwind with Lit</h1>
+                <p class="mt-2 text-gray-500">
+                  This is a responsive card layout built using Tailwind CSS with LitElement. You can add content, images, and interactions as needed.
+                </p>
+                <div class="mt-4">
+                  <button class="px-4 py-2 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700">
+                    Action 1
+                  </button>
+                  <button class="px-4 py-2 ml-2 bg-gray-300 text-gray-700 font-semibold rounded-lg shadow-md hover:bg-gray-400">
+                    Action 2
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        `;
+      }
+    }
+
+    customElements.define('my-component', MyComponent);
+  </script>
+</body>
+</html>
+