single.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
  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. <meta http-equiv="X-UA-Compatible" content="ie=edge, Chrome=1">
  7. <meta http-equiv="Cache-Control" content="no-cache">
  8. <title>ChoozMo AI 分身夢想計畫 | 免費客製您的專屬分身 | 集仕多</title>
  9. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
  10. integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  11. <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.11.2/css/all.css">
  12. <link rel="stylesheet" href="/css/style.css">
  13. <!-- Start of HubSpot Embed Code -->
  14. <!-- <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/20485755.js"></script> -->
  15. <!-- End of HubSpot Embed Code -->
  16. <!-- Google Tag Manager -->
  17. <script>(function (w, d, s, l, i) {
  18. w[l] = w[l] || []; w[l].push({
  19. 'gtm.start':
  20. new Date().getTime(), event: 'gtm.js'
  21. }); var f = d.getElementsByTagName(s)[0],
  22. j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
  23. 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
  24. })(window, document, 'script', 'dataLayer', 'GTM-MTWWP3G');</script>
  25. <!-- End Google Tag Manager -->
  26. <!-- Google tag (gtag.js) -->
  27. <script async src="https://www.googletagmanager.com/gtag/js?id=G-G5H9MMGQFM"></script>
  28. <script>
  29. window.dataLayer = window.dataLayer || [];
  30. function gtag() { dataLayer.push(arguments); }
  31. gtag('js', new Date());
  32. gtag('config', 'G-G5H9MMGQFM');
  33. </script>
  34. <!-- Global site tag (gtag.js) - Google Ads: 474336061 -->
  35. <script async src="https://www.googletagmanager.com/gtag/js?id=AW-474336061"></script>
  36. <script>
  37. window.dataLayer = window.dataLayer || [];
  38. function gtag() { dataLayer.push(arguments); }
  39. gtag('js', new Date());
  40. gtag('config', 'AW-474336061');
  41. </script>
  42. </head>
  43. <body>
  44. {{ partial "navbar.html" . }}
  45. <main id="ai-virtual-star">
  46. <img src="/imgs/dm/ai-virtual-star/cover.webp" alt="AI 分身夢想計畫" class="cover-img">
  47. <img src="/imgs/dm/ai-virtual-star/aivs02.webp" alt="" class="bg-1">
  48. <section class="container px-3 pt-0 header">
  49. <div class="main">
  50. <h2 class="mb-5 title">【史無前例,僅此一次】<br>免費建模大放送!<br>影音創作者快來搶!</h2>
  51. <p>
  52. 創意滿滿的您是不是在煩惱怎麼讓影片更有亮點,<br>或是對於枯燥乏味的週期性短片拍攝感到疲累,<br>最好還能帥到觀眾下巴掉下來?<br>
  53. 現在還覺得成為 AI 網紅很遙遠嗎?<br>是不是想要一個 AI 分身幫您工作呢?<br>現在集仕多免費幫您訂製您的 AI 分身!</p>
  54. <div class="d-flex justify-content-center my-5">
  55. <a href="https://page.line.me/417lsxlz?oat_content=url&openQrModal=true" target="_blank"
  56. class="sign-up-btn">加入 LINE OA 專人介紹</a>
  57. </div>
  58. <h2 class="mt-5 title">活動獎勵:將有機會獲得專屬的 AI 分身建模</h2>
  59. <p class="mb-0">根據所有報名者所提供的企劃,經由團隊篩選過後,最終將選出多位最具潛力的影音創作者<br>為您量身訂做專屬於您的「AI
  60. 分身」,分身可供您製作成影片,並發布於您的頻道中,讓您的頻道形象超級吸睛!<br>
  61. 也歡迎得獎者自帶團隊拍建模的幕後花絮,記錄下獨一無二的建模過程!<br>🎁 凡報名者皆獲得參與禮:算力傳媒專訪一篇
  62. </p>
  63. <img src="/imgs/dm/ai-virtual-star/home.webp" alt="" class="img-fluid my-5">
  64. <p>即便沒選上也沒關係,人人都有獎,所有報名者均可獲得一則專訪機會,分享您的創作故事,提升個人曝光度!<br>詳細請看 <a
  65. href="https://news.aimedium.org/">https://news.aimedium.org/</a></p>
  66. <!-- <p class="mb-0">活動內容:我們將海選出 <strong class="fs-3">3 位</strong> 最具潛力的影音創作者,<br>為您量身設計專屬 「AI 虛擬角色」,讓您的頻道形象煥然一新!</p> -->
  67. </div>
  68. <div class="d-flex justify-content-center my-5">
  69. <a href="https://page.line.me/417lsxlz?oat_content=url&openQrModal=true" target="_blank" class="sign-up-btn">加入
  70. LINE OA 即可報名</a>
  71. </div>
  72. <div class="d-flex flex-column align-items-center">
  73. <!-- <div class="pb-5 mb-5 d-flex flex-column align-items-center">
  74. <h4>🏆 免費打造 AI 分身物</h4>
  75. <div class="d-flex justify-content-center">
  76. <ul class="ps-4" style="list-style: disc;">
  77. <li>專屬設計與建模,提升您的創作特色。</li>
  78. <li>提供建模過程的幕後花絮拍攝,展現創意與科技的精彩結合。</li>
  79. <li>歡迎自帶團隊拍攝幕後花絮,打造更具個人風格的紀錄片!</li>
  80. </ul>
  81. </div>
  82. <h4 class="mt-5">🎁 參與禮:算力傳媒專訪</h4>
  83. <p class="mb-0">所有報名者均可獲得一則專訪機會,分享您的創作故事,提升個人曝光度!</p>
  84. </div> -->
  85. <div class="info">
  86. <h4>參加方式</h4>
  87. <ol class="my-3">
  88. <li>點擊立即報名 →</li>
  89. <li>加入官方 LINE →</li>
  90. <li>告訴我們您的姓名/單位 →</li>
  91. <li>把您的超狂想法告訴我們:免費建了AI 分身後,您想做什麼?</li>
  92. </ol>
  93. <p class="mb-0">我們就收到您的報名啦~很簡單吧!完全免報名費用</p>
  94. <!-- <p>參加方式很簡單!只要</p>
  95. <p class="d-none d-md-block fw-bold mb-0">🎯 點擊立即報名 → 加入官方 LINE → 傳一段文字告訴我們:免費建了 AI 分身後,您想做什麼?</p>
  96. <p class="d-block d-md-none fw-bold text-center mt-3 mb-0">🎯 點擊立即報名 🎯<br> ↓ <br>加入官方 LINE<br> ↓
  97. <br>傳一段文字告訴我們:<br>免費建了 AI 分身後,您想做什麼?
  98. </p> -->
  99. </div>
  100. <div class="w-100 d-flex justify-content-center mt-5 pt-5">
  101. <button class="d-flex justify-content-center align-items-center activity-btn">
  102. <span>點擊展開活動詳情</span>
  103. <div class="ms-3 arrow-wave">
  104. <span></span>
  105. <span></span>
  106. </div>
  107. </button>
  108. </div>
  109. <div class="row align-items-center mt-5 activity-info">
  110. <div class="col-lg-6 d-flex flex-column align-items-center">
  111. <h4>活動流程</h4>
  112. <ol class="pb-4 pb-lg-0 pe-2 pe-lg-3">
  113. <li>決選會依照評比標準,挑選3位創作者免費建模!</li>
  114. <li>您可以獲得:
  115. <ul>
  116. <li>✔️ 進 AI 虛擬攝影棚錄製的機會<br><small>(攝影棚位於 ChoozMo 總公司,竹北高鐵站走路 3 分鐘即可到達)</small></li>
  117. <li>✔️ 一支虛擬攝影棚拍攝的作品,後續 AI 分身還可以用來製作更多主題影片!</li>
  118. </ul>
  119. </li>
  120. <li>作品完成後,您會獲得完整授權使用作品,請分享到 FB 或自有頻道宣傳並設定公開</li>
  121. </ol>
  122. </div>
  123. <div class="col-lg-6 d-flex flex-column align-items-center line-item">
  124. <h4 class="mt-4 mt-lg-5">活動資訊</h4>
  125. <ul class="px-lg-3 line-bottom">
  126. <li>
  127. 📅 活動報名日期:<strong class="d-block fs-4">2025 年 01月 24 日~2025 年 02 月 07 日</strong>
  128. </li>
  129. <li>
  130. 📅 報名截止:2025 年 02 月 07 日 23:59 p.m.
  131. </li>
  132. <li>📅 結果公布:2025 年 02 月 14 日</li>
  133. </ul>
  134. <h4 class="mt-5 mt-lg-4">評分標準</h4>
  135. <ul class="px-lg-3">
  136. <li>
  137. <p class="mb-0 fw-bold text-center">🌟 創意與吸引力(50%)</p>
  138. <small class="d-block text-center">您使用 AI 分身的用途是否有創意?<br>能否快速吸引注意,展現您的獨特構想?</small>
  139. </li>
  140. <li class="mt-3">
  141. <p class="mb-0 fw-bold text-center">💡 影響力與公益性(50%)</p>
  142. <small class="d-block text-center">您使用 AI 分身的方式是否能傳遞正向價值,或對社會產生積極影響?</small>
  143. </li>
  144. </ul>
  145. </div>
  146. </div>
  147. </div>
  148. <!-- <div class="d-flex justify-content-center my-5">
  149. <a href="https://page.line.me/417lsxlz?oat_content=url&openQrModal=true" target="_blank" class="sign-up-btn">加入 LINE OA 即可報名</a>
  150. </div> -->
  151. <div class="row align-items-center py-5">
  152. <div class="col-lg-6">
  153. <img src="/imgs/dm/ai-virtual-star/aivs04.webp" alt="" class="img-fluid">
  154. </div>
  155. <div class="col-lg-6 mt-5 mt-lg-0 d-flex flex-column align-items-center">
  156. <h4>您是不是我們要找的人?</h4>
  157. <ul>
  158. <li>
  159. ✔️ 不需要高知名度,您的<strong>潛力</strong>和<strong>創意</strong>才是我們的目標!
  160. </li>
  161. <li>
  162. ✔️ 有挑戰性和天馬空的企劃等待實現!
  163. </li>
  164. </ul>
  165. </div>
  166. </div>
  167. <div class="row align-items-center py-5">
  168. <div class="col-lg-6 d-flex flex-column align-items-center mb-5 mb-lg-0">
  169. <h4>為什麼要來?</h4>
  170. <ul>
  171. <li>
  172. ✨ 當您完成 AI 分身建模,大量製作影片內容都沒問題!
  173. </li>
  174. <li>
  175. ✨ 未被選上也能透過優惠方案輕鬆入手,實現您的創作夢想!
  176. </li>
  177. <li>
  178. ✨ 我們有滿滿的經驗與資源,別懷疑了,心動不如馬上報名!
  179. </li>
  180. </ul>
  181. </div>
  182. <div class="col-lg-6">
  183. <img src="/imgs/dm/ai-virtual-star/aivs05.webp" alt="" class="img-fluid">
  184. </div>
  185. </div>
  186. <div class="row align-items-center py-5">
  187. <div class="col-lg-6">
  188. <img src="/imgs/dm/ai-virtual-star/aivs06.webp" alt="" class="img-fluid">
  189. </div>
  190. <div class="col-lg-6 mt-5 mt-lg-0 d-flex flex-column align-items-center">
  191. <h4>ChoozMo 電視台水準?<br>這樣您要參加了嗎?🎥</h4>
  192. <p class="text-center">我們與多家電視台有多次合作經驗,也參與過眾多 AI 活動,作品品質絕對無庸置疑,連大螢幕播放都沒問題!</p>
  193. </div>
  194. </div>
  195. <div class="d-flex flex-column align-items-center">
  196. <h3 class="title">AI 分身是什麼?<h3>
  197. <p class="text-center px-lg-5">
  198. 是透過 AI 生成技術創建的虛擬角色,具有類似人類的外觀、行為和互動能力。<br>這些分身可以用於模擬真人的行為,並應用於多種場景中,例如電視台 AI 主播「克隆娟」,就是我們最典型的實際應用。
  199. </p>
  200. <img src="/imgs/dm/ai-virtual-star/aivs08.webp" alt="" class="img-fluid">
  201. </div>
  202. <div class="d-flex flex-column align-items-center py-5 position-relative">
  203. <img src="/imgs/dm/ai-virtual-star/aivs09.webp" alt="" class="bg-2">
  204. <div class="position-relative" style="z-index: 100;">
  205. <h2 class="mb-3 title">用 AI 科技實現頻道大躍進!</h2>
  206. <p class="text-center">您是否曾想過擁有一個專屬的 AI 分身,為您的頻道創造無限可能?<br>現在機會來了!只要您有需求,歡迎一起參與免費 AI 分身建模計畫!</p>
  207. <div class="row mt-5 justify-content-center align-items-center">
  208. <div class="col-lg-4 text-center mb-3 mb-lg-0">
  209. <h4>科技 x 創意的視覺震撼</h4>
  210. <p>
  211. 製作團隊會引導您完成所有製作需求<br>
  212. 我們將您的想像化為現實,讓每個創作者都能感受到 AI 時代的無限魅力!
  213. </p>
  214. </div>
  215. <div class="col-lg-4">
  216. <img src="/imgs/dm/ai-virtual-star/aivs07.webp" alt="" class="img-fluid">
  217. </div>
  218. </div>
  219. </div>
  220. </div>
  221. <div class="d-flex justify-content-center mb-lg-5">
  222. <a href="https://page.line.me/417lsxlz?oat_content=url&openQrModal=true" target="_blank" class="sign-up-btn">加入
  223. LINE OA 即可報名</a>
  224. </div>
  225. <div id="form">
  226. {{ partial "form-main.html" . }}
  227. </div>
  228. </section>
  229. </main>
  230. {{ partial "footer.html" . }}
  231. <script type="application/javascript">
  232. var doNotTrack = false;
  233. if (!doNotTrack) {
  234. (function (i, s, o, g, r, a, m) {
  235. i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
  236. (i[r].q = i[r].q || []).push(arguments)
  237. }, i[r].l = 1 * new Date(); a = s.createElement(o),
  238. m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
  239. })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
  240. ga('create', 'UA-153100602-5', 'auto');
  241. ga('send', 'pageview');
  242. }
  243. </script>
  244. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
  245. integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
  246. crossorigin="anonymous"></script>
  247. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
  248. integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
  249. crossorigin="anonymous"></script>
  250. <script>
  251. console.log('>>', $(".activity-btn"));
  252. $('.activity-btn').on('click', function () {
  253. // 切換箭頭方向
  254. $('.arrow-wave').toggleClass('active');
  255. // 展開或收起內容
  256. $('.activity-info').toggleClass('active');
  257. })
  258. </script>
  259. </body>
  260. </html>