91 lines
3.8 KiB
HTML
91 lines
3.8 KiB
HTML
<!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>
|
||
|