Browse Source

update ai-virtual-star

SyuanYu 1 month ago
parent
commit
ae22e0ace8

+ 66 - 38
layouts/ai-virtual-star/single.html

@@ -6,7 +6,7 @@
   <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>
+  <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">
@@ -50,25 +50,43 @@
 <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/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>
+        <h2 class="mb-5 title">【史無前例,僅此一次】<br>免費建模大放送!<br>影音創作者快來搶!</h2>
 
         <p>
-          創意滿滿的您是不是在煩惱怎麼讓影片更有亮點,還能帥到觀眾下巴掉下來?<br>
-          別再想破頭了,我們這裡有個超狂手法,<br>就是幫您的頻道加入科技感的AI虛擬人物,而且只需要一小時的拍攝時間!</p>
+          創意滿滿的您是不是在煩惱怎麼讓影片更有亮點,<br>或是對於枯燥乏味的週期性短片拍攝感到疲累,<br>最好還能帥到觀眾下巴掉下來?<br>
+          現在還覺得成為 AI 網紅很遙遠嗎?<br>是不是想要一個 AI 虛擬分身幫您工作呢?<br>現在集仕多免費幫您訂製您的 AI 分身!</p>
 
-        <p class="mb-0">活動內容:我們將海選出 <strong class="fs-3">3 位</strong> 最具潛力的影音創作者,<br>為您量身設計專屬 「AI 虛擬角色」,讓您的頻道形象煥然一新!</p>
+        <h2 class="mt-5 title">活動獎勵:前三名將獲得專屬的 AI 虛擬分身建模</h2>
+
+        <p class="mb-0">根據所有報名者所提供的企劃,經由團隊篩選過後,最終將選出 3 位最具潛力的影音創作者<br>為您量身訂做專屬於您的
+          「AI虛擬分身」,分身可供您製作成影片,並發布於您的頻道中,讓您的頻道形象超級吸睛!<br>
+          也歡迎得獎者自帶團隊拍建模的幕後花絮,記錄下獨一無二的建模過程!<br>🎁 凡報名者皆獲得參與禮:算力傳媒專訪一篇
+        </p>
+
+        <img src="/imgs/dm/ai-virtual-star/home.webp" alt="" class="img-fluid my-5">
+
+        <p>即便沒選上也沒關係,人人都有獎,所有報名者均可獲得一則專訪機會,分享您的創作故事,提升個人曝光度!<br>詳細請看 <a
+            href="https://news.aimedium.org/">https://news.aimedium.org/</a></p>
+
+
+        <!-- <p class="mb-0">活動內容:我們將海選出 <strong class="fs-3">3 位</strong> 最具潛力的影音創作者,<br>為您量身設計專屬 「AI 虛擬角色」,讓您的頻道形象煥然一新!</p> -->
+      </div>
+
+      <div class="d-flex justify-content-center my-5">
+        <a href="https://page.line.me/417lsxlz?oat_content=url&openQrModal=true" target="_blank" class="sign-up-btn">加
+          LINE OA 即可報名</a>
       </div>
 
       <div class="d-flex flex-column align-items-center">
-        <div class="py-5 my-5 d-flex flex-column align-items-center">
-          <h4>🏆 免費打造 AI 虛擬人物</h4>
+        <!-- <div class="pb-5 mb-5 d-flex flex-column align-items-center">
+          <h4>🏆 免費打造 AI 虛擬分身物</h4>
           <div class="d-flex justify-content-center">
             <ul class="ps-4" style="list-style: disc;">
               <li>專屬設計與建模,提升您的創作特色。</li>
@@ -79,16 +97,26 @@
 
           <h4 class="mt-5">🎁 參與禮:算力傳媒專訪</h4>
           <p class="mb-0">所有報名者均可獲得一則專訪機會,分享您的創作故事,提升個人曝光度!</p>
-        </div>
+        </div> -->
 
         <div class="info">
-          <p>參加方式很簡單!只要</p>
+          <h4>參加方式</h4>
+          <ol class="my-3">
+            <li>點擊立即報名 →</li>
+            <li>加入官方 LINE →</li>
+            <li>告訴我們您的姓名/單位 →</li>
+            <li>把您的超狂想法告訴我們:免費建了AI 虛擬分身後,您想做什麼?</li>
+          </ol>
+
+          <p class="mb-0">我們就收到您的報名啦~很簡單吧!完全免報名費用</p>
+
+          <!-- <p>參加方式很簡單!只要</p>
 
-          <p class="d-none d-md-block fw-bold mb-0">🎯 點擊立即報名 → 加入官方 LINE → 傳一段文字告訴我們:免費建了 AI 虛擬人後,您想做什麼?</p>
+          <p class="d-none d-md-block fw-bold mb-0">🎯 點擊立即報名 → 加入官方 LINE → 傳一段文字告訴我們:免費建了 AI 虛擬分身後,您想做什麼?</p>
 
           <p class="d-block d-md-none fw-bold text-center mt-3 mb-0">🎯 點擊立即報名 🎯<br> ↓ <br>加入官方 LINE<br> ↓
-            <br>傳一段文字告訴我們:<br>免費建了 AI 虛擬人後,您想做什麼?
-          </p>
+            <br>傳一段文字告訴我們:<br>免費建了 AI 虛擬分身後,您想做什麼?
+          </p> -->
         </div>
 
         <div class="row align-items-center mt-5">
@@ -100,7 +128,7 @@
               <li>您可以獲得:
                 <ul>
                   <li>✔️ 進 AI 虛擬攝影棚錄製的機會<br><small>(攝影棚位於 ChoozMo 總公司,竹北高鐵站走路 3 分鐘即可到達)</small></li>
-                  <li>✔️ 一支虛擬攝影棚拍攝的作品,後續 AI 虛擬還可以用來製作更多主題影片!</li>
+                  <li>✔️ 一支虛擬攝影棚拍攝的作品,後續 AI 虛擬分身還可以用來製作更多主題影片!</li>
                 </ul>
               </li>
               <li>作品完成後,您會獲得完整授權使用作品,請分享到 FB 或自有頻道宣傳並設定公開</li>
@@ -112,12 +140,12 @@
 
             <ul class="px-lg-3 line-bottom">
               <li>
-                報名日期:2025 / 01 / 24 ~ 2025 / 02 / 07
+                📅 活動報名日期:<strong class="d-block fs-4">2025 年 01月 24 日~2025 年 02 月 07 日</strong>
               </li>
               <li>
-                報名截止:2025 / 02 / 07 晚上 11:59
+                📅 報名截止:2025 年 02 月 07 日 23:59 p.m.
               </li>
-              <li>結果公布:2025 / 02 / 14</li>
+              <li>📅 結果公布:2025 年 02 月 14 日</li>
             </ul>
 
             <h4 class="mt-5 mt-lg-4">評分標準</h4>
@@ -125,11 +153,11 @@
             <ul class="px-lg-3">
               <li>
                 <p class="mb-0 fw-bold text-center">🌟 創意與吸引力(50%)</p>
-                <small>您使用 AI 虛擬人的用途是否有創意?能否快速吸引注意,展現您的獨特構想?</small>
+                <small class="d-block text-center">您使用 AI 虛擬分身的用途是否有創意?<br>能否快速吸引注意,展現您的獨特構想?</small>
               </li>
               <li class="mt-3">
                 <p class="mb-0 fw-bold text-center">💡 影響力與公益性(50%)</p>
-                <small>您使用 AI 虛擬人的方式是否能傳遞正向價值,或對社會產生積極影響?</small>
+                <small class="d-block text-center">您使用 AI 虛擬分身的方式是否能傳遞正向價值,或對社會產生積極影響?</small>
               </li>
             </ul>
           </div>
@@ -137,18 +165,8 @@
       </div>
 
       <div class="d-flex justify-content-center my-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">
+        <a href="https://page.line.me/417lsxlz?oat_content=url&openQrModal=true" target="_blank" class="sign-up-btn">加
+          LINE OA 即可報名</a>
       </div>
 
       <div class="row align-items-center py-5">
@@ -164,7 +182,7 @@
               ✔️ 不需要高知名度,您的<strong>潛力</strong>和<strong>創意</strong>才是我們的目標!
             </li>
             <li>
-              ✔️ 想讓影音內容更吸睛、更具個人特色
+              ✔️ 有挑戰性和天馬空的企劃等待實現
             </li>
           </ul>
         </div>
@@ -175,7 +193,7 @@
           <h4>為什麼要來?</h4>
           <ul>
             <li>
-              ✨ 當您完成 AI 虛擬建模,大量製作影片內容都沒問題!
+              ✨ 當您完成 AI 虛擬分身建模,大量製作影片內容都沒問題!
             </li>
             <li>
               ✨ 未被選上也能透過優惠方案輕鬆入手,實現您的創作夢想!
@@ -197,18 +215,28 @@
         </div>
 
         <div class="col-lg-6 mt-5 mt-lg-0 d-flex flex-column align-items-center">
-          <h4>ChoozMo 電視台水準?</h4>
+          <h4>ChoozMo 電視台水準?<br>這樣您要參加了嗎?🎥</h4>
 
-          <p class="text-center">我們與多家電視台有多次合作經驗,<br>作品品質絕對無庸置疑,連大螢幕播放都沒問題!</p>
+          <p class="text-center">我們與多家電視台有多次合作經驗,也參與過眾多 AI 活動,作品品質絕對無庸置疑,連大螢幕播放都沒問題!</p>
         </div>
       </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="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>
+          <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">
@@ -227,8 +255,8 @@
       </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>
+        <a href="https://page.line.me/417lsxlz?oat_content=url&openQrModal=true" target="_blank" class="sign-up-btn">加
+          LINE OA 即可報名</a>
       </div>
 
       <div id="form">

+ 12 - 5
static/css/style.css

@@ -5634,7 +5634,7 @@
 @media (max-width: 575px) {
   #video-editing .header .main p,
   #ai-virtual-star .header .main p {
-    font-size: 0.85rem;
+    font-size: 1rem;
   }
 }
 #video-editing .header h2,
@@ -5650,14 +5650,21 @@
   color: #fff;
   background-color: #172228;
 }
+#ai-virtual-star p,
+#ai-virtual-star li {
+  line-height: 3;
+}
 #ai-virtual-star .cover-img {
   width: 100vw;
   margin-top: 75px;
   -o-object-fit: cover;
      object-fit: cover;
 }
+#ai-virtual-star a {
+  color: #3cd3b9;
+}
 #ai-virtual-star h2 {
-  font-size: 3rem;
+  font-size: 2.75rem;
   line-height: 1.8;
 }
 @media (max-width: 1200px) {
@@ -5688,6 +5695,7 @@
   font-weight: bold;
   font-size: 1.75rem;
   margin-bottom: 1.5rem;
+  line-height: 2;
 }
 @media (max-width: 575px) {
   #ai-virtual-star h4 {
@@ -5700,7 +5708,7 @@
   list-style: none;
 }
 #ai-virtual-star ul li {
-  line-height: 2;
+  line-height: 3;
 }
 #ai-virtual-star small {
   font-size: 1rem;
@@ -5742,8 +5750,7 @@
     padding: 2rem;
   }
 }
-#ai-virtual-star .info h4,
-#ai-virtual-star .info p {
+#ai-virtual-star .info h4 {
   text-align: center;
 }
 #ai-virtual-star .line-bottom {

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


+ 24 - 13
static/css/style.scss

@@ -1938,6 +1938,7 @@
 }
 
 @media (max-width: 767px) {
+
   // .header {
   //   height: 70vh;
   // }
@@ -2724,7 +2725,7 @@
   }
 
   .card-content {
-    & > div {
+    &>div {
       display: flex;
       flex-direction: column;
       // border: 2px solid #ffebe2;
@@ -4001,7 +4002,7 @@
       filter: invert(33%) sepia(55%) saturate(2232%) hue-rotate(357deg) brightness(102%) contrast(89%);
     }
 
-    .content > div {
+    .content>div {
       margin-bottom: 40px;
       padding: 0px 15px;
       border-left: 1px solid rgba(0, 0, 0, 0.125);
@@ -4403,7 +4404,7 @@
     .row {
       padding: 0 5vw;
 
-      & > div {
+      &>div {
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -4994,15 +4995,15 @@
       }
     }
 
-    .table-striped > tbody > tr:nth-child(odd) > td,
-    .table-striped > tbody > tr:nth-child(odd) > th {
+    .table-striped>tbody>tr:nth-child(odd)>td,
+    .table-striped>tbody>tr:nth-child(odd)>th {
       box-shadow: none;
       background-color: #fdeae1;
       border-bottom-width: 0px !important;
     }
 
-    .table-striped > tbody > tr:nth-child(even) > td,
-    .table-striped > tbody > tr:nth-child(even) > th {
+    .table-striped>tbody>tr:nth-child(even)>td,
+    .table-striped>tbody>tr:nth-child(even)>th {
       border-bottom-width: 0px !important;
     }
 
@@ -6159,6 +6160,7 @@
 
 #video-editing,
 #ai-virtual-star {
+
   p,
   li {
     font-size: 1.25rem;
@@ -6184,7 +6186,7 @@
         font-weight: bold;
 
         @media (max-width: 575px) {
-          font-size: 0.85rem;
+          font-size: 1rem;
         }
       }
     }
@@ -6202,14 +6204,23 @@
   color: #fff;
   background-color: #172228;
 
+  p,
+  li {
+    line-height: 3;
+  }
+
   .cover-img {
     width: 100vw;
     margin-top: 75px;
     object-fit: cover;
   }
 
+  a {
+    color: #3cd3b9;
+  }
+
   h2 {
-    font-size: 3rem;
+    font-size: 2.75rem;
     line-height: 1.8;
 
     @media (max-width: 1200px) {
@@ -6238,6 +6249,7 @@
     font-weight: bold;
     font-size: 1.75rem;
     margin-bottom: 1.5rem;
+    line-height: 2;
 
     @media (max-width: 575px) {
       font-size: 1.5rem;
@@ -6250,7 +6262,7 @@
     list-style: none;
 
     li {
-      line-height: 2;
+      line-height: 3;
     }
   }
 
@@ -6295,8 +6307,7 @@
       padding: 2rem;
     }
 
-    h4,
-    p {
+    h4 {
       text-align: center;
     }
   }
@@ -6353,4 +6364,4 @@
       }
     }
   }
-}
+}

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


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


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