init

2026-04-29 14:59:24 +08:00
parent e2fdaa8fe8
commit 8e96524e0b
81 changed files with 9151 additions and 0 deletions
@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="zh" data-theme="light">  <!-- 可改成 dark、cupcake 等主题 -->
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>daisyUI 5 + Tailwind CSS 4 CDN 示例</title>
+  
+  <!-- daisyUI 5 的核心 CSS（已优化到 ~34kB 压缩后，很适合 CDN 生产使用） -->
+<!-- <script src="
+https://cdn.jsdelivr.net/npm/daisyui@5.5.17/index.min.js
+"></script> -->
+<!-- <link href="
+https://cdn.jsdelivr.net/npm/daisyui@5.5.17/daisyui.min.css
+" rel="stylesheet"> -->
+  
+    <script src="./js/browser@4.js"></script>
+    <link href="./css/daisyui@5.css" rel="stylesheet" type="text/css" />
+    <!-- <link rel="stylesheet" href="/css/tailwind.min.css"> -->
+
+    <!-- <script src="/js/daisyui.index.min.js"></script> -->
+
+
+<!-- <link href="./css/themes.css" rel="stylesheet" type="text/css" /> -->
+  <!-- Tailwind CSS 4 的浏览器运行时引擎（必须放在 daisyUI 后面） -->
+<!-- <script src="
+https://cdn.jsdelivr.net/npm/tailwindcss@4.1.18/dist/lib.min.js
+"></script> -->
+<!-- <link href="
+https://cdn.jsdelivr.net/npm/tailwindcss@4.1.18/index.min.css
+" rel="stylesheet"> -->
+
+</head>
+
+<body class="min-h-screen bg-base-200 flex items-center justify-center p-8">
+
+  <div class="card w-96 bg-base-100 shadow-xl">
+    <figure>
+      <img 
+        src="https://images.unsplash.com/photo-1556745757-8d76bdb6984f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
+        alt="示例图片" 
+      />
+    </figure>
+    <div class="card-body">
+      <h2 class="card-title">daisyUI 5 + Tailwind 4</h2>
+      <p class="text-base-content/80">
+        这是一个纯 CDN 实现的卡片组件示例。<br>
+        无需 Node.js、无需构建步骤，<br>
+        支持所有 daisyUI 组件和 Tailwind 工具类。
+      </p>
+      
+      <div class="card-actions justify-end mt-4">
+        <button class="btn btn-primary">主要按钮</button>
+        <button class="btn btn-outline btn-secondary">次要按钮</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- 一些额外演示元素 -->
+  <div class="mt-12 flex flex-col items-center gap-6">
+    <button class="btn btn-lg btn-accent">大按钮 Accent</button>
+    
+    <div class="badge badge-outline badge-info">Info 徽章</div>
+    <div class="badge badge-success gap-2">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+      </svg>
+      Success
+    </div>
+    
+    <div class="alert alert-warning shadow-lg max-w-md">
+      <span>这是一个警告提示框示例！</span>
+    </div>
+  </div>
+
+</body>
+</html>