Browse Source

add ai-virtual-star

SyuanYu 1 month ago
parent
commit
ac1654cec1

+ 235 - 0
layouts/ai-virtual-star/single.html

@@ -0,0 +1,235 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge, Chrome=1">
+  <meta http-equiv="Cache-Control" content="no-cache">
+  <title>ChoozMo AI 虛擬人夢想計畫 | 免費客製您的專屬虛擬人 | 集仕多</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+  <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.11.2/css/all.css">
+  <link rel="stylesheet" href="/css/style.css">
+  <!-- Start of HubSpot Embed Code -->
+  <!-- <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/20485755.js"></script> -->
+  <!-- End of HubSpot Embed Code -->
+
+  <!-- Google Tag Manager -->
+  <script>(function (w, d, s, l, i) {
+      w[l] = w[l] || []; w[l].push({
+        'gtm.start':
+          new Date().getTime(), event: 'gtm.js'
+      }); var f = d.getElementsByTagName(s)[0],
+        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
+          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
+    })(window, document, 'script', 'dataLayer', 'GTM-MTWWP3G');</script>
+  <!-- End Google Tag Manager -->
+
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-G5H9MMGQFM"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() { dataLayer.push(arguments); }
+    gtag('js', new Date());
+
+    gtag('config', 'G-G5H9MMGQFM');
+  </script>
+
+  <!-- Global site tag (gtag.js) - Google Ads: 474336061 -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=AW-474336061"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() { dataLayer.push(arguments); }
+    gtag('js', new Date());
+
+    gtag('config', 'AW-474336061');
+  </script>
+</head>
+
+<body>
+  {{ partial "navbar.html" . }}
+  <main id="ai-virtual-star">
+    <img src="/imgs/dm/ai-virtual-star/aivs01.webp" alt="AI 虛擬人夢想計畫" class="cover-img">
+
+    <img src="/imgs/dm/ai-virtual-star/aivs02.webp" alt="" class="bg-1">
+
+    <section class="container px-3 pt-0 header">
+      <div class="main">
+
+        <h2 class="mb-5 title">【僅此一次】AI 虛擬人免費建模大放送!<br>影音創作者快來搶!</h2>
+
+        <p>
+          創意滿滿的您是不是在煩惱怎麼讓影片更有亮點,還能帥到觀眾下巴掉下來?<br>
+          別再想破頭了,我們這裡有個超狂手法,<br>就是幫您的頻道加入科技感的AI虛擬人物,而且只需要一小時的拍攝時間!</p>
+
+        <p>活動內容:我們將海選出 <strong class="fs-3">3位</strong> 具有潛力的影音創作者,幫您免費打造「AI虛擬人物」,並應用到您的影片中,讓您的影音頻道結合現代科技,吸引觀眾的目光!</p>
+      </div>
+
+      <div class="d-flex flex-column align-items-center">
+        <div class="info">
+          <p> 參加方式很簡單!只要
+          </p>
+
+          <p class="fw-bold pb-0">🎯 點擊立即報名 → 加入官方LINE → 提供頻道網址 或 一部原創作品</p>
+        </div>
+
+        <div class="row align-items-center">
+          <div class="col-lg-6 d-flex flex-column align-items-center border-item">
+            <h4>活動流程</h4>
+
+            <ol class="pb-4 pb-lg-0 pe-2 pe-lg-5">
+              <li>決選會依照評比標準,挑選3位創作者免費建模!</li>
+              <li>你可以獲得:
+                <ul>
+                  <li>✔️ 進 AI 虛擬攝影棚錄製的機會<br><small>(攝影棚位於 ChoozMo 總公司,竹北高鐵站走路 3 分鐘即可到達)</small></li>
+                  <li>✔️ 一支虛擬攝影棚拍攝的作品,後續 AI 虛擬人還可以用來製作更多主題影片!</li>
+                </ul>
+              </li>
+              <li>作品完成後,您會獲得完整授權使用作品,請分享到 FB 或自有頻道宣傳並設定公開</li>
+            </ol>
+          </div>
+
+          <div class="col-lg-6 d-flex flex-column align-items-center">
+            <h4 class="mt-5">活動資訊</h4>
+
+            <ul class="px-lg-5">
+              <li>
+                報名日期:2025 / 01 / 24 ~ 2025 / 02 / 07
+              </li>
+              <li>
+                報名截止:2025 / 02 / 07 晚上 11:59
+              </li>
+              <li>結果公布:2025 / 02 / 14</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <div class="d-flex justify-content-center my-lg-5">
+        <a href="https://page.line.me/417lsxlz?oat_content=url&openQrModal=true" target="_blank"
+          class="sign-up-btn">立即報名</a>
+      </div>
+
+      <div class="d-flex flex-column align-items-center">
+        <h3 class="title">AI 虛擬人是什麼?<h3>
+
+            <p class="text-center px-lg-5">
+              是透過 AI 生成技術創建的虛擬角色,具有類似人類的外觀、行為和互動能力。<br>這些虛擬人可以用於模擬真人的行為,並應用於多種場景中,例如電視台 AI 主播「克隆娟」,就是我們最典型的實際應用。
+            </p>
+
+            <img src="/imgs/dm/ai-virtual-star/aivs08.webp" alt="" class="img-fluid">
+      </div>
+
+      <div class="row align-items-center py-5">
+        <div class="col-lg-6">
+          <img src="/imgs/dm/ai-virtual-star/aivs04.webp" alt="" class="img-fluid">
+        </div>
+
+        <div class="col-lg-6 mt-5 mt-lg-0 d-flex flex-column align-items-center">
+          <h4>您是不是我們要找的人?</h4>
+
+          <ul>
+            <li>
+              ✔️ 不需要高知名度,您的<strong>潛力</strong>和<strong>創意</strong>才是我們的目標!
+            </li>
+            <li>
+              ✔️ 想讓影音內容更吸睛、更具個人特色!
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="row align-items-center py-5">
+        <div class="col-lg-6 d-flex flex-column align-items-center mb-5 mb-lg-0">
+          <h4>為什麼要來?</h4>
+          <ul>
+            <li>
+              ✨ 當您完成 AI 虛擬人建模,大量製作影片內容都沒問題!
+            </li>
+            <li>
+              ✨ 未被選上也能透過優惠方案輕鬆入手,實現您的創作夢想!
+            </li>
+            <li>
+              ✨ 我們有滿滿的經驗與資源,別懷疑了,心動不如馬上報名!
+            </li>
+          </ul>
+        </div>
+
+        <div class="col-lg-6">
+          <img src="/imgs/dm/ai-virtual-star/aivs05.webp" alt="" class="img-fluid">
+        </div>
+      </div>
+
+      <div class="row align-items-center py-5">
+        <div class="col-lg-6">
+          <img src="/imgs/dm/ai-virtual-star/aivs06.webp" alt="" class="img-fluid">
+        </div>
+
+        <div class="col-lg-6 mt-5 mt-lg-0 d-flex flex-column align-items-center">
+          <h4>ChoozMo 電視台水準?</h4>
+
+          <p class="text-center">我們與多家電視台有多次合作經驗,<br>作品品質絕對無庸置疑,連大螢幕播放都沒問題!</p>
+        </div>
+      </div>
+
+      <div class="d-flex flex-column align-items-center py-5 position-relative">
+        <img src="/imgs/dm/ai-virtual-star/aivs09.webp" alt="" class="bg-2">
+
+        <div class="position-relative" style="z-index: 100;">
+          <h2 class="mb-3 title">用 AI 科技實現頻道大躍進!</h2>
+          <p class="text-center">您是否曾想過擁有一個專屬的 AI 虛擬分身,為您的頻道創造無限可能?<br>現在機會來了!只要您有需求,歡迎一起參與免費 AI 虛擬人建模計畫!</p>
+
+          <div class="row mt-5 justify-content-center align-items-center">
+            <div class="col-lg-4 text-center mb-3 mb-lg-0">
+              <h4>科技 x 創意的視覺震撼</h4>
+              <p>
+                製作團隊會引導您完成所有製作需求<br>
+                我們將您的想像化為現實,讓每個創作者都能感受到 AI 時代的無限魅力!
+              </p>
+            </div>
+
+            <div class="col-lg-4">
+              <img src="/imgs/dm/ai-virtual-star/aivs07.webp" alt="" class="img-fluid">
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="d-flex justify-content-center mb-lg-5">
+        <a href="https://page.line.me/417lsxlz?oat_content=url&openQrModal=true" target="_blank"
+          class="sign-up-btn">立即報名</a>
+      </div>
+
+      <div id="form">
+        {{ partial "form-main.html" . }}
+      </div>
+
+    </section>
+  </main>
+
+  {{ partial "footer.html" . }}
+
+  <script type="application/javascript">
+    var doNotTrack = false;
+    if (!doNotTrack) {
+      (function (i, s, o, g, r, a, m) {
+        i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
+          (i[r].q = i[r].q || []).push(arguments)
+        }, i[r].l = 1 * new Date(); a = s.createElement(o),
+          m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
+      })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
+      ga('create', 'UA-153100602-5', 'auto');
+
+      ga('send', 'pageview');
+    }
+  </script>
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
+    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
+    crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
+    integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
+    crossorigin="anonymous"></script>
+</body>
+
+</html>

+ 158 - 13
static/css/style.css

@@ -5602,38 +5602,183 @@
 }
 
 #video-editing p,
-#video-editing li {
+#video-editing li,
+#ai-virtual-star p,
+#ai-virtual-star li {
   font-size: 1.25rem;
   line-height: 2;
 }
 @media (max-width: 767px) {
   #video-editing p,
-  #video-editing li {
+  #video-editing li,
+  #ai-virtual-star p,
+  #ai-virtual-star li {
     font-size: 1rem;
-    line-height: 1.8;
   }
 }
-#video-editing .cover-img {
-  width: 100%;
-  padding-bottom: 3rem;
+#video-editing .header,
+#ai-virtual-star .header {
+  padding: 3rem 0;
 }
-@media (max-width: 767px) {
-  #video-editing .header {
-    padding: 3rem 0;
-  }
+#video-editing .header .cover-img,
+#ai-virtual-star .header .cover-img {
+  width: 100%;
+  padding-bottom: 2rem;
 }
-#video-editing .header .main p {
+#video-editing .header .main p,
+#ai-virtual-star .header .main p {
   margin-bottom: 2rem;
   text-align: center;
   font-weight: bold;
 }
 @media (max-width: 575px) {
-  #video-editing .header .main p {
+  #video-editing .header .main p,
+  #ai-virtual-star .header .main p {
     font-size: 0.85rem;
   }
 }
 #video-editing .header h2,
-#video-editing .header h3 {
+#video-editing .header h3,
+#ai-virtual-star .header h2,
+#ai-virtual-star .header h3 {
   font-weight: bold;
   margin-bottom: 1rem;
+}
+
+#ai-virtual-star {
+  overflow: hidden;
+  color: #fff;
+  background-color: #172228;
+}
+#ai-virtual-star .cover-img {
+  width: 100vw;
+  margin-top: 75px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+#ai-virtual-star h2 {
+  font-size: 3rem;
+  line-height: 1.8;
+}
+@media (max-width: 1200px) {
+  #ai-virtual-star h2 {
+    font-size: 2rem;
+  }
+}
+@media (max-width: 575px) {
+  #ai-virtual-star h2 {
+    font-size: 1.75rem;
+  }
+}
+#ai-virtual-star h3 {
+  font-size: 2.5rem;
+  line-height: 1.8;
+}
+@media (max-width: 1200px) {
+  #ai-virtual-star h3 {
+    font-size: 1.75rem;
+  }
+}
+@media (max-width: 575px) {
+  #ai-virtual-star h3 {
+    font-size: 1.5rem;
+  }
+}
+#ai-virtual-star h4 {
+  font-weight: bold;
+  font-size: 1.75rem;
+  margin-bottom: 2rem;
+}
+@media (max-width: 575px) {
+  #ai-virtual-star h4 {
+    font-size: 1.5rem;
+  }
+}
+#ai-virtual-star ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+#ai-virtual-star ul li {
+  line-height: 2.5;
+}
+#ai-virtual-star small {
+  font-size: 0.875rem;
+}
+#ai-virtual-star .bg-1,
+#ai-virtual-star .bg-2 {
+  position: absolute;
+  opacity: 0.7;
+}
+#ai-virtual-star .bg-1 {
+  max-width: 100%;
+  right: 0;
+  top: 170%;
+}
+@media (max-width: 575px) {
+  #ai-virtual-star .bg-1 {
+    max-width: 180%;
+  }
+}
+#ai-virtual-star .bg-2 {
+  max-width: 130%;
+  top: -15%;
+  left: -20%;
+}
+@media (max-width: 575px) {
+  #ai-virtual-star .bg-2 {
+    max-width: 180%;
+    left: -60%;
+  }
+}
+#ai-virtual-star .info {
+  margin: 2rem auto 4rem;
+  padding: 2rem 4rem;
+  text-align: center;
+  border-radius: 20px;
+  border: 2px solid #3cd3b9;
+}
+@media (max-width: 575px) {
+  #ai-virtual-star .info {
+    padding: 1rem;
+  }
+}
+#ai-virtual-star .border-item {
+  border-right: 2px solid #3cd3b9;
+}
+@media (max-width: 991px) {
+  #ai-virtual-star .border-item {
+    border-right: none;
+    border-bottom: 2px solid #3cd3b9;
+  }
+}
+#ai-virtual-star .title {
+  text-align: center;
+  color: #3cd3b9;
+  letter-spacing: 1px;
+}
+#ai-virtual-star .sign-up-btn {
+  display: block;
+  margin: 3rem auto;
+  padding: 1rem 3rem;
+  border-radius: 10px;
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #fff;
+  background-color: #3cd3b9;
+  text-decoration: none;
+  transition: all 0.3s;
+}
+#ai-virtual-star .sign-up-btn:hover {
+  opacity: 0.8;
+}
+#ai-virtual-star #form {
+  margin: 0 0.5rem;
+}
+#ai-virtual-star #form .news-form {
+  color: #000;
+  background-color: #fff;
+}
+#ai-virtual-star #form .news-form .title {
+  color: #000;
 }/*# sourceMappingURL=style.css.map */

File diff suppressed because it is too large
+ 0 - 0
static/css/style.css.map


+ 153 - 9
static/css/style.scss

@@ -6157,7 +6157,8 @@
   }
 }
 
-#video-editing {
+#video-editing,
+#ai-virtual-star {
   p,
   li {
     font-size: 1.25rem;
@@ -6165,18 +6166,15 @@
 
     @media (max-width: 767px) {
       font-size: 1rem;
-      line-height: 1.8;
     }
   }
 
-  .cover-img {
-    width: 100%;
-    padding-bottom: 3rem;
-  }
-
   .header {
-    @media (max-width: 767px) {
-      padding: 3rem 0;
+    padding: 3rem 0;
+
+    .cover-img {
+      width: 100%;
+      padding-bottom: 2rem;
     }
 
     .main {
@@ -6198,3 +6196,149 @@
     }
   }
 }
+
+#ai-virtual-star {
+  overflow: hidden;
+  color: #fff;
+  background-color: #172228;
+
+  .cover-img {
+    width: 100vw;
+    margin-top: 75px;
+    object-fit: cover;
+  }
+
+  h2 {
+    font-size: 3rem;
+    line-height: 1.8;
+
+    @media (max-width: 1200px) {
+      font-size: 2rem;
+    }
+
+    @media (max-width: 575px) {
+      font-size: 1.75rem;
+    }
+  }
+
+  h3 {
+    font-size: 2.5rem;
+    line-height: 1.8;
+
+    @media (max-width: 1200px) {
+      font-size: 1.75rem;
+    }
+
+    @media (max-width: 575px) {
+      font-size: 1.5rem;
+    }
+  }
+
+  h4 {
+    font-weight: bold;
+    font-size: 1.75rem;
+    margin-bottom: 2rem;
+
+    @media (max-width: 575px) {
+      font-size: 1.5rem;
+    }
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    li {
+      line-height: 2.5;
+    }
+  }
+
+  small {
+    font-size: 0.875rem;
+  }
+
+  .bg-1,
+  .bg-2 {
+    position: absolute;
+    opacity: 0.7;
+  }
+
+  .bg-1 {
+    max-width: 100%;
+    right: 0;
+    top: 170%;
+
+    @media (max-width: 575px) {
+      max-width: 180%;
+    }
+  }
+
+  .bg-2 {
+    max-width: 130%;
+    top: -15%;
+    left: -20%;
+
+    @media (max-width: 575px) {
+      max-width: 180%;
+      left: -60%;
+    }
+  }
+
+  .info {
+    margin: 2rem auto 4rem;
+    padding: 2rem 4rem;
+    text-align: center;
+    border-radius: 20px;
+    border: 2px solid #3cd3b9;
+
+    @media (max-width: 575px) {
+      padding: 1rem;
+    }
+  }
+
+  .border-item {
+    border-right: 2px solid #3cd3b9;
+
+    @media (max-width: 991px) {
+      border-right: none;
+      border-bottom: 2px solid #3cd3b9;
+    }
+  }
+
+  .title {
+    text-align: center;
+    color: #3cd3b9;
+    letter-spacing: 1px;
+  }
+
+  .sign-up-btn {
+    display: block;
+    margin: 3rem auto;
+    padding: 1rem 3rem;
+    border-radius: 10px;
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #fff;
+    background-color: #3cd3b9;
+    text-decoration: none;
+    transition: all 0.3s;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  #form {
+    margin: 0 .5rem;
+
+    .news-form {
+      color: #000;
+      background-color: #fff;
+
+      .title {
+        color: #000;
+      }
+    }
+  }
+}

BIN
static/imgs/dm/ai-virtual-star/aivs01.webp


BIN
static/imgs/dm/ai-virtual-star/aivs02.webp


BIN
static/imgs/dm/ai-virtual-star/aivs03.webp


BIN
static/imgs/dm/ai-virtual-star/aivs04.webp


BIN
static/imgs/dm/ai-virtual-star/aivs05.webp


BIN
static/imgs/dm/ai-virtual-star/aivs06.webp


BIN
static/imgs/dm/ai-virtual-star/aivs07.webp


BIN
static/imgs/dm/ai-virtual-star/aivs08.webp


BIN
static/imgs/dm/ai-virtual-star/aivs09.webp


+ 5 - 0
webSite/content/ai-virtual-star/index.md

@@ -0,0 +1,5 @@
++++
+title = "AI 虛擬人夢想計畫"
+type = "ai-virtual-star"  # 指定內容類型
+layout = "single"         # 對應模板名稱為 single.html
++++

Some files were not shown because too many files changed in this diff