timmy/42_104
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: caddy static file server workspace

Browse Source 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Timmy
2026-06-23 19:33:50 +08:00
commit a98b21114c
1438 changed files with 15044 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
caddy/www/product_card.html Normal file
View File

@@ -0,0 +1,90 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Card</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">
<!-- 使用自訂元件 -->
<product-card></product-card>
<script type="module">
import { LitElement, html, css } from 'https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm';
class ProductCard extends LitElement {
// 禁用 Shadow DOM，讓 Tailwind CSS 生效
createRenderRoot() {
return this; // 渲染到 Light DOM
}
render() {
return html`
<div class="flex font-sans bg-white shadow-lg rounded-lg overflow-hidden max-w-4xl">
<!-- 左側圖片 -->
<div class="flex-none w-1/3 relative">
<img src="https://dummyimage.com/300x400/ccc/000&text=Product+Image" alt="Product Image" class="absolute inset-0 w-full h-full object-cover" loading="lazy" />
</div>
<!-- 右側內容 -->
<form class="flex-auto p-6">
<div class="flex flex-wrap items-center">
<h1 class="flex-auto text-2xl font-bold text-slate-900">
Modern Utility Jacket
</h1>
<div class="text-xl font-semibold text-slate-500">
$129.00
</div>
<div class="w-full text-sm text-green-600 mt-2">
In stock and ready to ship
</div>
</div>
<div class="flex items-baseline mt-4 mb-6 pb-6 border-b border-slate-200">
<div class="space-x-2 flex text-sm">
<!-- 尺寸選擇 -->
${['XS', 'S', 'M', 'L', 'XL'].map(
(size) => html`
<label>
<input class="sr-only peer" name="size" type="radio" value="${size.toLowerCase()}" />
<div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
${size}
</div>
</label>
`
)}
</div>
</div>
<!-- 行動按鈕 -->
<div class="flex space-x-4 mb-6 text-sm font-medium">
<div class="flex-auto flex space-x-4">
<button class="h-10 px-6 font-semibold rounded-md bg-blue-500 text-white hover:bg-blue-600" type="submit">
Buy now
</button>
<button class="h-10 px-6 font-semibold rounded-md border border-slate-200 text-slate-900 hover:bg-gray-100" type="button">
Add to bag
</button>
</div>
<button class="flex-none flex items-center justify-center w-10 h-10 rounded-md text-slate-300 border border-slate-200 hover:text-red-500 hover:border-red-500" type="button" aria-label="Like">
<svg width="24" height="24" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" />
</svg>
</button>
</div>
<!-- 說明文字 -->
<p class="text-sm text-slate-700">
Free shipping on orders over $100.
</p>
</form>
</div>
`;
}
}
customElements.define('product-card', ProductCard);
</script>
</body>
</html>