timmy revised this gist 10 months ago. Go to revision
No changes
timmy revised this gist 10 months ago. Go to revision
No changes
timmy revised this gist 1 year ago. Go to revision
1 file changed, 78 insertions
beach_house_card.html(file created)
| @@ -0,0 +1,78 @@ | |||
| 1 | + | <!DOCTYPE html> | |
| 2 | + | <html lang="en"> | |
| 3 | + | <head> | |
| 4 | + | <meta charset="UTF-8"> | |
| 5 | + | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| 6 | + | <title>Beach House Card</title> | |
| 7 | + | <!-- 引入 Tailwind CSS --> | |
| 8 | + | <script src="https://cdn.tailwindcss.com"></script> | |
| 9 | + | <!-- 引入 Lit --> | |
| 10 | + | <script type="module" src="https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm"></script> | |
| 11 | + | </head> | |
| 12 | + | <body class="bg-gray-100 dark:bg-gray-900 flex items-center justify-center min-h-screen"> | |
| 13 | + | <!-- 使用自訂元件 --> | |
| 14 | + | <beach-house-card></beach-house-card> | |
| 15 | + | ||
| 16 | + | <script type="module"> | |
| 17 | + | import { LitElement, html, css } from 'https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm'; | |
| 18 | + | ||
| 19 | + | class BeachHouseCard extends LitElement { | |
| 20 | + | // 禁用 Shadow DOM 以使用 Tailwind CSS 的全域樣式 | |
| 21 | + | createRenderRoot() { | |
| 22 | + | return this; // 渲染到 Light DOM | |
| 23 | + | } | |
| 24 | + | ||
| 25 | + | render() { | |
| 26 | + | return html` | |
| 27 | + | <main class="py-6 px-4 sm:p-6 md:py-10 md:px-8"> | |
| 28 | + | <div class="max-w-4xl mx-auto grid grid-cols-1 lg:max-w-5xl lg:gap-x-20 lg:grid-cols-2"> | |
| 29 | + | <!-- 標題與描述 --> | |
| 30 | + | <div class="relative p-3 col-start-1 row-start-1 flex flex-col-reverse rounded-lg bg-gradient-to-t from-black/75 via-black/0 sm:bg-none sm:row-start-2 sm:p-0 lg:row-start-1"> | |
| 31 | + | <h1 class="mt-1 text-lg font-semibold text-white sm:text-slate-900 md:text-2xl dark:sm:text-white">Beach House in Collingwood</h1> | |
| 32 | + | <p class="text-sm leading-4 font-medium text-white sm:text-slate-500 dark:sm:text-slate-400">Entire house</p> | |
| 33 | + | </div> | |
| 34 | + | <!-- 圖片集 --> | |
| 35 | + | <div class="grid gap-4 col-start-1 col-end-3 row-start-1 sm:mb-6 sm:grid-cols-4 lg:gap-6 lg:col-start-2 lg:row-end-6 lg:row-span-6 lg:mb-0"> | |
| 36 | + | <img src="https://dummyimage.com/640x360/ccc/000&text=Main+House" alt="Main House" class="w-full h-60 object-cover rounded-lg sm:h-52 sm:col-span-2 lg:col-span-full" loading="lazy"> | |
| 37 | + | <img src="https://dummyimage.com/320x180/aaa/000&text=Interior+1" alt="Interior 1" class="hidden w-full h-52 object-cover rounded-lg sm:block sm:col-span-2 md:col-span-1 lg:row-start-2 lg:col-span-2 lg:h-32" loading="lazy"> | |
| 38 | + | <img src="https://dummyimage.com/320x180/bbb/000&text=Interior+2" alt="Interior 2" class="hidden w-full h-52 object-cover rounded-lg md:block lg:row-start-2 lg:col-span-2 lg:h-32" loading="lazy"> | |
| 39 | + | </div> | |
| 40 | + | <!-- 評價與地點 --> | |
| 41 | + | <dl class="mt-4 text-xs font-medium flex items-center row-start-2 sm:mt-1 sm:row-start-3 md:mt-2.5 lg:row-start-2"> | |
| 42 | + | <dt class="sr-only">Reviews</dt> | |
| 43 | + | <dd class="text-indigo-600 flex items-center dark:text-indigo-400"> | |
| 44 | + | <svg width="24" height="24" fill="none" aria-hidden="true" class="mr-1 stroke-current dark:stroke-indigo-500"> | |
| 45 | + | <path d="m12 5 2 5h5l-4 4 2.103 5L12 16l-5.103 3L9 14l-4-4h5l2-5Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
| 46 | + | </svg> | |
| 47 | + | <span>4.89 <span class="text-slate-400 font-normal">(128)</span></span> | |
| 48 | + | </dd> | |
| 49 | + | <dt class="sr-only">Location</dt> | |
| 50 | + | <dd class="flex items-center"> | |
| 51 | + | <svg width="2" height="2" aria-hidden="true" fill="currentColor" class="mx-3 text-slate-300"> | |
| 52 | + | <circle cx="1" cy="1" r="1" /> | |
| 53 | + | </svg> | |
| 54 | + | <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1 text-slate-400 dark:text-slate-500" aria-hidden="true"> | |
| 55 | + | <path d="M18 11.034C18 14.897 12 19 12 19s-6-4.103-6-7.966C6 7.655 8.819 5 12 5s6 2.655 6 6.034Z" /> | |
| 56 | + | <path d="M14 11a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z" /> | |
| 57 | + | </svg> | |
| 58 | + | Collingwood, Ontario | |
| 59 | + | </dd> | |
| 60 | + | </dl> | |
| 61 | + | <!-- 按鈕 --> | |
| 62 | + | <div class="mt-4 col-start-1 row-start-3 self-center sm:mt-0 sm:col-start-2 sm:row-start-2 sm:row-span-2 lg:mt-6 lg:col-start-1 lg:row-start-3 lg:row-end-4"> | |
| 63 | + | <button type="button" class="bg-indigo-600 text-white text-sm leading-6 font-medium py-2 px-3 rounded-lg">Check availability</button> | |
| 64 | + | </div> | |
| 65 | + | <!-- 描述 --> | |
| 66 | + | <p class="mt-4 text-sm leading-6 col-start-1 sm:col-span-2 lg:mt-6 lg:row-start-4 lg:col-span-1 dark:text-slate-400"> | |
| 67 | + | This sunny and spacious room is for those traveling light and looking for a comfy and cosy place to lay their head for a night or two. This beach house sits in a vibrant neighborhood littered with cafes, pubs, restaurants and supermarkets and is close to all the major attractions such as Edinburgh Castle and Arthur's Seat. | |
| 68 | + | </p> | |
| 69 | + | </div> | |
| 70 | + | </main> | |
| 71 | + | `; | |
| 72 | + | } | |
| 73 | + | } | |
| 74 | + | ||
| 75 | + | customElements.define('beach-house-card', BeachHouseCard); | |
| 76 | + | </script> | |
| 77 | + | </body> | |
| 78 | + | </html> | |
Newer
Older