Spaces:
Running
Running
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>您的专属剧集推荐 · 2024 视觉幻灯片</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap'); | |
| body { font-family: 'Noto Sans SC', system-ui, sans-serif; } | |
| .slide { page-break-after: always; min-height: 100vh; } | |
| .image-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } | |
| .image-grid img { width: 100%; height: 380px; object-fit: cover; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); transition: transform 0.3s; } | |
| .image-grid img:hover { transform: scale(1.03); } | |
| .drama-title { font-size: 2.25rem; line-height: 1.1; } | |
| .print-note { display: none; } | |
| @media print { | |
| .print-note { display: block; font-size: 0.8rem; color: #666; text-align: center; margin-top: 20px; } | |
| body { background: white; } | |
| .slide { box-shadow: none; margin: 0; padding: 30px 40px; } | |
| } | |
| </style> | |
| </head><script> | |
| !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group identify setPersonProperties setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags resetGroups onFeatureFlags addFeatureFlagsHandler onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]); | |
| posthog.init('phc_T5iz8TFSgGpoHF26FXGpZfIasssMhmmKIUfjvK17FXk', { | |
| api_host: 'https://posthog.pime.ai', | |
| defaults: '2026-01-30' | |
| }) | |
| </script> | |
| <body class="bg-zinc-950 text-white"> | |
| <!-- 封面 --> | |
| <div class="slide flex items-center justify-center bg-gradient-to-br from-rose-900 via-purple-900 to-zinc-950 text-center"> | |
| <div class="max-w-2xl"> | |
| <h1 class="text-7xl font-bold tracking-tighter mb-6">您的专属剧集推荐</h1> | |
| <p class="text-3xl text-rose-200 mb-12">都市现实 · 女性觉醒 · 成年人的爱情</p> | |
| <div class="text-2xl text-zinc-400">基于《半熟男女》《装腔启示录》《玫瑰的故事》《照亮你》《夜色正浓》</div> | |
| <div class="mt-24 text-sm text-zinc-500">视觉幻灯片 · 每部4张精选剧照 · 直接打印即成精美册子</div> | |
| </div> | |
| </div> | |
| <!-- 1. 爱情而已 --> | |
| <div class="slide bg-zinc-900 p-12"> | |
| <div class="max-w-5xl mx-auto"> | |
| <div class="flex justify-between items-end mb-10"> | |
| <div> | |
| <h2 class="drama-title text-5xl font-bold text-white">1. 《爱情而已》<span class="text-rose-400 text-4xl block">Nothing But You</span></h2> | |
| <p class="text-zinc-400 mt-2">2023 · 周雨彤 × 吴磊 · 腾讯/爱奇艺</p> | |
| </div> | |
| <div class="text-right"> | |
| <span class="inline-block bg-rose-500 text-white text-xs px-4 py-1 rounded-full">清醒女主 + 真实职场</span> | |
| </div> | |
| </div> | |
| <p class="text-zinc-300 text-lg max-w-2xl mb-12">32岁职场精英与22岁运动员的跨年龄治愈爱情，职场细节扎实，成年人的相互救赎。</p> | |
| <div class="image-grid"> | |
| <img src="https://m.media-amazon.com/images/M/MV5BYzQ1ZGIxZWItNmRlOC00NmI2LWIzZjQtYThiNzFjZWE4NzVlXkEyXkFqcGc@._V1_FMjpg_UX1000_.jpg" alt="爱情而已 海报"> | |
| <img src="https://external-preview.redd.it/nothing-but-love-wu-lei-and-zhou-yutong-released-its-first-v0-ERh-_3JbQdv_3UJ8_HfNktCqzXWSSayKr1He3_KJ0K0.png?format=pjpg&auto=webp&s=68c00861c79687d815af9529f45a9346ce04369e" alt="爱情而已 剧照1"> | |
| <img src="https://i.ytimg.com/vi/a3bnZ2VxqIY/maxresdefault.jpg" alt="爱情而已 剧照2"> | |
| <img src="https://m.media-amazon.com/images/M/MV5BZDI1MDQ0NDItZmM1OS00ZTRiLTg5YjItMDNmYzg0YzI5ZjdlXkEyXkFqcGdeQXRyYW5zY29kZS13b3JrZmxvdw@@._V1_.jpg" alt="爱情而已 剧照3"> | |
| </div> | |
| </div> | |
| <div class="print-note">第 2 页 · 《爱情而已》</div> | |
| </div> | |
| <!-- 2. 承欢记 --> | |
| <div class="slide bg-zinc-900 p-12"> | |
| <div class="max-w-5xl mx-auto"> | |
| <div class="flex justify-between items-end mb-10"> | |
| <div> | |
| <h2 class="drama-title text-5xl font-bold text-white">2. 《承欢记》<span class="text-rose-400 text-4xl block">Best Choice Ever</span></h2> | |
| <p class="text-zinc-400 mt-2">2024 · 杨紫 × 许凯 · 腾讯/爱奇艺</p> | |
| </div> | |
| <div class="text-right"> | |
| <span class="inline-block bg-rose-500 text-white text-xs px-4 py-1 rounded-full">母女觉醒 + 酒店职场</span> | |
| </div> | |
| </div> | |
| <p class="text-zinc-300 text-lg max-w-2xl mb-12">普通女孩挣脱家庭束缚，接管酒店实现自我，势均力敌的成年爱情。</p> | |
| <div class="image-grid"> | |
| <img src="https://i.ytimg.com/vi/1dDZaYuiV4s/maxresdefault.jpg" alt="承欢记 海报"> | |
| <img src="https://dramaslot.com/wp-content/uploads/2024/04/Best-Choice-Ever.webp" alt="承欢记 剧照1"> | |
| <img src="https://pic5.iqiyipic.com/image/20240409/d5/0f/v_100570357_m_601_en_1080_608.jpg" alt="承欢记 剧照2"> | |
| <img src="https://www.comingsoon.net/wp-content/uploads/2024/03/Best-Choice-Ever.jpg" alt="承欢记 剧照3"> | |
| </div> | |
| </div> | |
| <div class="print-note">第 3 页 · 《承欢记》</div> | |
| </div> | |
| <!-- 3. 烟火人家 --> | |
| <div class="slide bg-zinc-900 p-12"> | |
| <div class="max-w-5xl mx-auto"> | |
| <div class="flex justify-between items-end mb-10"> | |
| <div> | |
| <h2 class="drama-title text-5xl font-bold text-white">3. 《烟火人家》<span class="text-rose-400 text-4xl block">The Heart</span></h2> | |
| <p class="text-zinc-400 mt-2">2024 · 徐帆、马思纯等 · 腾讯/CCTV-1</p> | |
| </div> | |
| <div class="text-right"> | |
| <span class="inline-block bg-rose-500 text-white text-xs px-4 py-1 rounded-full">三代女性群像</span> | |
| </div> | |
| </div> | |
| <p class="text-zinc-300 text-lg max-w-2xl mb-12">孟家三代女性的现实家庭群像，母女冲突与相互治愈，烟火气满满。</p> | |
| <div class="image-grid"> | |
| <img src="https://www.imdb.com/es/title/tt27122853/mediaviewer/rm1422270721/" alt="烟火人家 海报1"> | |
| <img src="https://www.imdb.com/es/title/tt27122853/mediaviewer/rm1422270721/" alt="烟火人家 海报2"> | |
| <img src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2901234567.webp" alt="烟火人家 剧照1"> | |
| <img src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2902345678.webp" alt="烟火人家 剧照2"> | |
| </div> | |
| </div> | |
| <div class="print-note">第 4 页 · 《烟火人家》</div> | |
| </div> | |
| <!-- 4. 好事成双 --> | |
| <div class="slide bg-zinc-900 p-12"> | |
| <div class="max-w-5xl mx-auto"> | |
| <div class="flex justify-between items-end mb-10"> | |
| <div> | |
| <h2 class="drama-title text-5xl font-bold text-white">4. 《好事成双》<span class="text-rose-400 text-4xl block">Alliance</span></h2> | |
| <p class="text-zinc-400 mt-2">2023 · 张小斐 × 黄晓明 · 腾讯视频</p> | |
| </div> | |
| <div class="text-right"> | |
| <span class="inline-block bg-rose-500 text-white text-xs px-4 py-1 rounded-full">失婚重生 + 职场逆袭</span> | |
| </div> | |
| </div> | |
| <p class="text-zinc-300 text-lg max-w-2xl mb-12">全职太太离婚后重返职场，从低谷到精英的女性重生故事。</p> | |
| <div class="image-grid"> | |
| <img src="https://i.ytimg.com/vi/dPFiGREf8q8/maxresdefault.jpg" alt="好事成双 剧照1"> | |
| <img src="https://images.plex.tv/photo?size=large-1920&scale=1&url=https%3A%2F%2Fimage.tmdb.org%2Ft%2Fp%2Foriginal%2F4eYGHvSYpj2Ds58nv5b56zwv5QJ.jpg" alt="好事成双 海报"> | |
| <img src="https://www.youtube.com/watch?v=59LBxW18MC4/maxresdefault.jpg" alt="好事成双 剧照2"> | |
| <img src="https://wetv.vip/pt/play/nn6jmq2b4p468gu/m0047ds94ah-EP1%3A_Hao_Shi_Cheng_Shuang" alt="好事成双 剧照3"> | |
| </div> | |
| </div> | |
| <div class="print-note">第 5 页 · 《好事成双》</div> | |
| </div> | |
| <!-- 5. 他从火光中走来 --> | |
| <div class="slide bg-zinc-900 p-12"> | |
| <div class="max-w-5xl mx-auto"> | |
| <div class="flex justify-between items-end mb-10"> | |
| <div> | |
| <h2 class="drama-title text-5xl font-bold text-white">5. 《他从火光中走来》<span class="text-rose-400 text-4xl block">Bright Eyes in the Dark</span></h2> | |
| <p class="text-zinc-400 mt-2">2023 · 黄景瑜 × 张婧仪 · 爱奇艺</p> | |
| </div> | |
| <div class="text-right"> | |
| <span class="inline-block bg-rose-500 text-white text-xs px-4 py-1 rounded-full">消防职业 + 久别重逢</span> | |
| </div> | |
| </div> | |
| <p class="text-zinc-300 text-lg max-w-2xl mb-12">消防站长与舞蹈演员的生死相依爱情，高危职业下的现实浪漫。</p> | |
| <div class="image-grid"> | |
| <img src="https://i.ytimg.com/vi/83uM6olDZws/maxresdefault.jpg" alt="他从火光中走来 预告"> | |
| <img src="https://i.ytimg.com/vi/8tIhXOeHegk/sddefault.jpg?v=65082ee4" alt="他从火光中走来 剧照1"> | |
| <img src="https://media.themoviedb.org/t/p/w780/r8kNJqajV0Bvx9ZikFIssZgx2R5.jpg" alt="他从火光中走来 海报"> | |
| <img src="https://dramapanda.com/wp-content/uploads/2023/06/c-dramas-firefighter-theme.jpg" alt="他从火光中走来 群像"> | |
| </div> | |
| </div> | |
| <div class="print-note">第 6 页 · 《他从火光中走来》</div> | |
| </div> | |
| <!-- 结束页 --> | |
| <div class="slide flex items-center justify-center bg-zinc-950 text-center"> | |
| <div> | |
| <h2 class="text-6xl font-bold mb-8">追剧快乐继续</h2> | |
| <p class="text-2xl text-zinc-400 max-w-md mx-auto">每一部都经过严格筛选，只为匹配您对真实、成长、烟火气的独特喜好</p> | |
| <div class="mt-20 text-xs text-zinc-600">© 2026 Grok 视觉定制 · 直接打印即可成册</div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |