Browse Source

video update

jeter20131220 3 năm trước cách đây
mục cha
commit
ab0659dc64

+ 18 - 22
about.html

@@ -18,32 +18,28 @@
 <body>
     <section class="sec01">
         <div class="card border-0">
-            <img src="./img/T1.png" class="card-img img-fluid" alt="...">
+            <img src="./img/T1.webp" class="card-img img-fluid" alt="...">
             <div class="card-img-overlay pb-0">
-                <div style="float: left;">
-                    <a style="text-decoration: none;" href="./index.html"> <img style="width: 80px;"
-                        src="./img/Button_Home.png" alt=""></a>
-                    </div>
-                <div class="text-center me-5">
-                    <div>
-                        <p style="font-size: 48px"
-                            class="propertytitle text-dark fw-bold">關於春池玻璃</p>
-                    </div>
+                <a style="text-decoration: none; position: absolute; top:15px;" href="./index.html">
+                    <img style="width: 80px;" src="./img/Button_Home.png" alt="">
+                </a>
+                <div class="text-center">
+                    <p style="font-size: 48px" class="propertytitle text-dark fw-bold">關於春池玻璃</p>
                 </div>
-                    <div style="margin-top: -20px;" class="pb-5">
-                        <img style="position: relative; z-index: 2; top:15px;" class="img-fluid px-0 w-100"
-                            src="./img/line.png" alt="">
-                        <div style="background:	#FFFFFF;" class="py-3 border">
-                            <div style="margin:0 auto; width: 95%;">
-                                <p style="font-size: 22px;" class="text-dark px-0 mb-5">
-                                    春池玻璃實業有限公司,目前跨足於工業原料、科技建材、文化藝術與觀光工廠。本業為專業回收玻璃與再處理之企業,總公司在台灣新竹,並擁有三家相關企業。目前每年回收並處理超過10萬噸的春池玻璃,目前為全台最具規模之廢棄玻璃回收業者。其企業理念為永續經營,綠色創新。在2015更獲得根留台灣,展望全球之「金根獎」之殊榮。蔡總統英文更在2016年九月親自參訪春池玻璃觀光工廠,並給予極高評價,稱春池玻璃為台灣「循環經濟」之典範。
-                                </p>
-                                <p style="font-size: 22px;" class="text-dark px-0">
-                                    春池玻璃創辦人吳春池,自1961年起,投入玻璃產業至今已超過50載。目前春池玻璃在新竹與苗栗有五座廢玻璃處理、再加工廠,回收的廢玻璃約占台灣的七成。其目標致力於把有限的資源,不停的循環使用,使其變成永續的材料,走出台灣循環經濟的下一條路。
-                                </p>
-                            </div>
+                <div style="margin-top: -20px;" class="pb-5">
+                    <img style="position: relative; z-index: 2; top:15px;" class="img-fluid px-0 w-100"
+                        src="./img/line.png" alt="">
+                    <div style="background:	#FFFFFF;" class="py-3 border">
+                        <div style="margin:0 auto; width: 95%;">
+                            <p style="font-size: 22px;" class="text-dark px-0 mb-5">
+                                春池玻璃實業有限公司,目前跨足於工業原料、科技建材、文化藝術與觀光工廠。本業為專業回收玻璃與再處理之企業,總公司在台灣新竹,並擁有三家相關企業。目前每年回收並處理超過10萬噸的春池玻璃,目前為全台最具規模之廢棄玻璃回收業者。其企業理念為永續經營,綠色創新。在2015更獲得根留台灣,展望全球之「金根獎」之殊榮。蔡總統英文更在2016年九月親自參訪春池玻璃觀光工廠,並給予極高評價,稱春池玻璃為台灣「循環經濟」之典範。
+                            </p>
+                            <p style="font-size: 22px;" class="text-dark px-0">
+                                春池玻璃創辦人吳春池,自1961年起,投入玻璃產業至今已超過50載。目前春池玻璃在新竹與苗栗有五座廢玻璃處理、再加工廠,回收的廢玻璃約占台灣的七成。其目標致力於把有限的資源,不停的循環使用,使其變成永續的材料,走出台灣循環經濟的下一條路。
+                            </p>
                         </div>
                     </div>
+                </div>
 
             </div>
             <!-- <div style="margin-top: 100px;">

+ 12 - 14
application.html

@@ -18,17 +18,12 @@
 <body>
     <section id="sec01" style="height: 100vh;" class="sec01">
         <div class="card border-0">
-            <img src="./img/T1.png" class="card-img img-fluid" alt="...">
+            <img src="./img/T1.webp" class="card-img img-fluid" alt="...">
             <div class="card-img-overlay pb-0">
-                <div style="float: left;">
-                    <a style="text-decoration: none;" href="./index.html"> <img style="width: 80px;"
+                <a style="text-decoration: none; position: absolute; top:15px;" href="./index.html"> <img style="width: 80px;"
                         src="./img/Button_Home.png" alt=""></a>
-                    </div>
-                <div class="text-center me-5">
-                    <div>
-                        <p style="font-size: 48px"
-                            class="propertytitle text-dark fw-bold">回收玻璃用途</p>
-                    </div>
+                <div class="text-center">
+                    <p style="font-size: 48px" class="propertytitle text-dark fw-bold">回收玻璃用途</p>
                 </div>
                 <div>
                     <div class="process-box px-0">
@@ -61,9 +56,10 @@
                                     <div class="px-3">
                                         <h1 class="text-center">2.耐火磚</h1>
                                         <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
-                                        <p class="text-start">透過高科技不斷創新研發、提升防火技術,以減少火災生命及財產損失。此種回收玻璃重量約一般磚頭的1/8,材質輕,又有耐震、隔熱、防火、隔音效果,是高效能的隔熱節能減碳建材。
+                                        <p class="text-start">
+                                            透過高科技不斷創新研發、提升防火技術,以減少火災生命及財產損失。此種回收玻璃重量約一般磚頭的1/8,材質輕,又有耐震、隔熱、防火、隔音效果,是高效能的隔熱節能減碳建材。
                                             價格與一般磚頭差不多。
-                                            </p>
+                                        </p>
                                     </div>
                                 </div>
                                 <div style="margin-top: 10px;">
@@ -81,7 +77,8 @@
                                     <div class="px-3">
                                         <h1 class="text-center">3.玻璃製品</h1>
                                         <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
-                                        <p class="text-start">玻璃回收利潤低,春池透過玻璃的回收再製,將原本已經廢棄的玻璃,重新賦予它們新的價值,透過自動化系統,可大量製作圓瓶、透明、咬霧、方瓶、特殊瓶、圓罐、方罐等再製品,為廢棄玻璃創造,永續的高經濟價值。
+                                        <p class="text-start">
+                                            玻璃回收利潤低,春池透過玻璃的回收再製,將原本已經廢棄的玻璃,重新賦予它們新的價值,透過自動化系統,可大量製作圓瓶、透明、咬霧、方瓶、特殊瓶、圓罐、方罐等再製品,為廢棄玻璃創造,永續的高經濟價值。
                                         </p>
                                     </div>
                                 </div>
@@ -100,7 +97,8 @@
                                     <div class="px-3">
                                         <h1 class="text-center">4.藝術玻璃</h1>
                                         <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
-                                        <p class="text-start">春池綠能玻璃傳承新竹地區玻璃藝術產業,每一件作品皆為手工精製,擁有四十餘年經歷的工藝師傅,發揮精湛的技藝,創作出春池玻璃獨有的藝術作品,春池手工吹製玻璃、工藝製品,如今已成功開發多款多元運用性的玻璃,產品的轉換效率不斷被提升,精益求精,追求卓越。
+                                        <p class="text-start">
+                                            春池綠能玻璃傳承新竹地區玻璃藝術產業,每一件作品皆為手工精製,擁有四十餘年經歷的工藝師傅,發揮精湛的技藝,創作出春池玻璃獨有的藝術作品,春池手工吹製玻璃、工藝製品,如今已成功開發多款多元運用性的玻璃,產品的轉換效率不斷被提升,精益求精,追求卓越。
                                         </p>
                                     </div>
                                 </div>
@@ -112,7 +110,7 @@
                             </div>
                         </div>
                     </div>
-                   
+
 
                 </div>
             </div>

+ 19 - 24
glass-art.html

@@ -18,35 +18,30 @@
 <body>
     <section id="sec01" style="height: 100vh;" class="sec01">
         <div class="card border-0">
-            <img src="./img/T1.png" class="card-img img-fluid" alt="...">
+            <img src="./img/T1.webp" class="card-img img-fluid" alt="...">
             <div class="card-img-overlay pb-0">
-                <div class="row px-0 mx-0">
-                    <div class="col-2">
-                        <a style="text-decoration: none;" href="./index.html"> <img style="width: 80px;"
-                                src="./img/Button_Home.png" alt=""></a>
-                    </div>
-                    <div class="col-10">
-                        <p style="font-size: 48px;position: relative; left:15%; width: 50%;"
-                            class="propertytitle text-dark fw-bold">回收玻璃藝術</p>
-                    </div>
-                    <div style="margin-top: -20px;" class="pb-5">
-                        <img style="position: relative; z-index: 2; top:15px;" class="img-fluid px-0 w-100"
-                            src="./img/line.png" alt="">
-                        <div style="background:	#FFFFFF;" class="text-center py-3 border">
-                            <div class="px-3">
-                                <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
-                            </div>
-                        </div>
-                        <div style="margin-top: 30px;">
-                            <video style="width: 100%;" autoplay muted loop playsinline>
-                                <source src="./img/glass-art/春池動畫.mp4" type="video/mp4">
-                            </video>
+                <a style="text-decoration: none; position: absolute; top:15px;" href="./index.html">
+                    <img style="width: 80px;" src="./img/Button_Home.png" alt="">
+                </a>
+                <div class="text-center">
+                    <p style="font-size: 48px" class="propertytitle text-dark fw-bold">回收玻璃藝術</p>
+                </div>
+                <div style="margin-top: -20px;" class="pb-5">
+                    <img style="position: relative; z-index: 2; top:15px;" class="img-fluid px-0 w-100"
+                        src="./img/line.png" alt="">
+                    <div style="background:	#FFFFFF;" class="text-center py-3 border">
+                        <div class="px-3">
+                            <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
                         </div>
                     </div>
-
+                    <div style="margin-top: 30px;">
+                        <video style="width: 100%;" autoplay muted loop playsinline>
+                            <source src="./img/glass-art/春池動畫.mp4" type="video/mp4">
+                        </video>
+                    </div>
                 </div>
             </div>
-           
+
 
         </div>
 

+ 4 - 0
gotovideo.js

@@ -0,0 +1,4 @@
+// $(".video-img").click(function () {
+//     var videosrc = $(this).data("info");
+//     $('.youtube-video').attr('src', `https://www.youtube.com/embed//${videosrc}?autoplay=1`);
+// });

BIN
img/T1.webp


BIN
img/video/1005_YT封面_NFT.webp


BIN
img/video/1006_YT封面_NFT.webp


BIN
img/video/1007_YT封面_NFT.webp


BIN
img/video/SPRING POOL GLASS W GLASS PROJECT - INFINITY STRAW.webp


BIN
img/video/SPRING POOL GLASS W春池計畫_W GLASS PROJECT.webp


BIN
img/video/SPRING POOL GLASS | W Hotel x W Glass Project W春池計畫.webp


BIN
img/video/春池玻璃 x 曾志偉- 忠泰Home2025想家計畫.webp


BIN
img/video/春池玻璃 |接班硬世代 三人紀實頻道.webp


BIN
img/video/春池玻璃X三鶯部落 用回收玻璃創造笑容 原住民自力造屋.webp


BIN
img/video/春池玻璃X杜祖業 用回收玻璃創造新意義 (城市篇).webp


BIN
img/video/春池玻璃X格式 2017文博會主題館 我們在文化裡爆炸.webp


BIN
img/video/春池玻璃X蔡英文 蔡總統蒞臨春池玻璃 20160919.webp


+ 446 - 0
lan.js

@@ -0,0 +1,446 @@
+//設定cookie
+function setCookie(name,value)
+{
+    var Days = 30;
+    var exp = new Date();
+    exp.setTime(exp.getTime() + Days*24*60*60*1000);
+    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
+}
+
+//獲取cookie
+function getCookie(name)
+{
+    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
+    if(arr=document.cookie.match(reg))
+    return unescape(arr[2]);
+    else
+    return null;
+}
+
+// 讀取語系設定
+let lang = localStorage.getItem('lan');
+
+console.log('目前語系設定: ' + lang); // test
+
+if(lang == null) {
+    console.log('未設定語系'); // test
+    
+    // 自動設定語系
+    var userlang = window.navigator.userLanguage || window.navigator.language;
+    userlang = userlang.toLowerCase();
+
+    console.log('userlang: ' + userlang); // test
+
+    if (userlang == 'zh-tw') {
+        console.log('自動設定語系: 繁體中文');
+        lang = 'zh';
+    } else if (userlang == 'en-us') {
+        console.log('自動設定語系: 英文');
+        lang = 'en';
+    } else if (userlang == 'zh-cn') {
+        console.log('自動設定語系: 繁體中文');
+        lang = 'zh';
+    } else {
+        console.log('自動設定語系: 繁體中文');
+        lang = 'zh';
+    }
+}
+
+var zh = {
+    "logleftbox1": "將你的生活、創作 、宣傳做成影片",
+    "logleftbox2": "開始使用 AI Spokesgirl",
+    "make_video" : "影片製作",
+    "make_slides" : "投影影片製作",
+    "make_video_long": "長影片製作",
+    "make_video_eng": "純英文影片製作",
+    "login" : "登入",
+    "login_link" : "立即登入",
+    "user_profile": "會員資料",
+    "logout": "登出",
+    "logout-m": "<i class='fas fa-sign-out-alt text-white me-3'></i>登&emsp;&ensp;出",
+    "en": "English",
+    "zh": "中文",
+    "choose_character": "選擇人物",
+    "usage_intro": "使用說明",
+    "history": "歷史紀錄",
+    "preview_videos": "預覽影片",
+    "video_link":  "影片連結",
+    "video_title": "標題",
+    "p_choose_character": "請選擇人物",
+    "lines": "台詞",
+    "img_link": "影像連結",
+    "content": "內容素材",
+    "processing_progress": "處理進度",
+    "usage_intro": "使用說明",
+    "one_line_to_one_img": "1. 一句台詞請對應提供一個影像連結做為搭配",
+    "sup_img_profile": "2. 影像連結檔案格式支援:",
+    "submit_to_wait": "3. 點選“送出”之後需等待一段影片製作的時間,請您耐心等候,待製作完畢可於通知網址查看",
+    "add_eng": "加入英文:",
+    "submit": "送出",
+    "privacy_term": "同意隱私政策及使用條款",
+    "newHere": "還沒有帳號?",
+    "oldHere": "已經有帳號?",
+    "goRegister": "註冊",
+    "goRegister_link": "立即註冊",
+    "pricing" : "早鳥方案",
+    "pricing-m" : "<i class='fas fa-tags me-2'></i>&ensp;早鳥方案",
+    "errorEmail": "請輸入正確E-mail",
+    "errorPsd": "密碼至少為4個字元",
+    "used": "已使用",
+    "left": "未使用",
+    "sec": "秒",
+    "username": "帳號/用戶名稱",
+    "password": "密碼",
+    "resetPsd": "更改密碼",
+    "forgotPsd": "忘記密碼",
+    "details": "查看詳情",
+    "refill": "我要加值",
+    "Createsthtoday": "今天要做甚麼影片呢?",
+    "date": "日期",
+    "video_duration": "影片時間",
+    "slide_link": "SLIDE 連結",
+    "new_pwd": "新密碼",
+    "confirm_pwd": "驗證碼",
+    "pricing_lan": "語言選擇: 中文 | 英文",
+    "pricing_avatars": "多款預設AI代言主播任你選",
+    "pricing_content": "畫面素材支援: 圖檔 | 影檔 | 簡報",
+    "pricing_discount": "限時優惠",
+    "pricing_checkout": "立即查看",
+    "mins": "分鐘",
+    "launch_special": "早鳥方案",
+    "index_li1_1": "支援中英文內容",
+    "index_li1_2": "可加入字幕",
+    "index_li2_1": "無人物肖像權問題",
+    "index_li2_2": "人物表情、動作自然",
+    "index_li2_3": "因應主題,選擇合適人物",
+    "index_li3_1": "可上傳圖片或是影片作為背景",
+    "index_li3_2": "可輸入文字腳本及投影片",
+    "index_action": "想要快速製作影音內容?立即註冊,開始創作!",
+    "follow_us": "關注我們",
+    "contact_name": "集仕多股份有限公司",
+    "address": "新竹縣竹北市復興二路229號9樓之9",
+    "contact_tel": "聯絡電話",
+    "contact_mail": "聯絡信箱",
+    "draft_edit": "編輯",
+    "drafts": "草稿夾",
+    "save_draft_btn": "存為草稿",
+    "upload_file": "上傳檔案",
+    "intro_img": "static/img/intro2.jpg",
+    "no_draft": "目前沒有草稿喔",
+    "trial_title": "想要免費獲得更多時間額度?",
+    "trial_txt": "透過社群分享專屬連結,邀請好友註冊 AI Spokesgirl,凡是好友透過連結註冊成功,您可以免費獲得2分鐘製作額度。",
+    "share": "分享",
+    "close": "關閉",
+    "steps_title": "步驟快速合成影片",
+    "steps_no1": "選擇AI人物",
+    "steps_no2": "輸入腳本文字",
+    "steps_no3": "輸入圖片素材",
+    "try_it_out": "立即開始",
+    "demo_link": "./make_video.html",
+    "usecase_1": "產品介紹",
+    "usecase_2": "教育培訓",
+    "usecase_3": "氣象播報",
+    "usecase_4": "新聞播報",
+    "usecase_5": "個人內容創作",
+    "usecase_6": "觀光導覽",
+    "usecase_7": "展覽導覽",
+    "usecase_8": "廣告行銷",
+    "usecase_9": "機構資訊宣導",
+    "hero_title": "製作影片 一鍵合成",
+    "hero_txt1": "輸入文字素材,即速產生影片",
+    "hero_txt2": "創作影片,不再需要錄影機、演員、麥克風繁雜器材。",
+    "hero_txt3": "大幅省下時間、人力、器材成本。",
+    "feature": "大特色",
+    "feature_no1_title1": "輸入文字腳本及素材",
+    "feature_no1_title2": "一鍵輸出合成影片",
+    "feature_no2_title": "多位AI虛擬人物選擇",
+    "feature_no3_title": "投影片轉製為影片",
+    "feature_no4_title": "多語言支援",
+    "feature_no1_li1": "只需等待數分鐘即產製完成",
+    "feature_no1_li2": "可上傳圖片或是影片作為背景",
+    "feature_no1_li3": "生成MP4檔",
+    "feature_no2_li1": "無人物肖像權問題",
+    "feature_no2_li2": "人物表情、動作自然",
+    "feature_no2_li3": "因應主題,選擇合適人物",
+    "feature_no3_li1": "輸入文字腳本及投影片連結,一鍵完成影片",
+    "feature_no3_li2": "生成MP4檔",
+    "feature_no4_li1": "支援中英文內容",
+    "feature_no4_li2": "可加入字幕",
+    "make_video_hand": "手動製作影片",
+    "make_video_auto": "自動影片製作",
+    "make_video_trial": "免費註冊使用",
+    "application":"實際應用",
+    "5G_network": "5G網路",
+    "metaverse": "元宇宙",
+    "local_news": "地方日報",
+    "index-about": "簡介",
+    "index-features": "特色",
+    "index-videos": "影片導覽",
+    "index-steps": "使用流程",
+    "index-usecases": "應用情境",
+    "index-demo": "即時展示",
+    "time-lapse": "操作影片",
+    "index_title1": "強大的Ai虛擬代言人",
+    "index_title2": "快速生成影片工具",
+    "make_video_txt1": "文字轉影片,輕鬆完成",
+    "make_video_txt2": "無需演員及相機,一鍵生成影片",
+    "make_video_auto_txt": "選擇日期,一鍵自動完成氣象報導影片",
+    "selectDate": "選擇您想製作的日期",
+    "Previewweathers": "氣象報導影片內容預覽"
+
+};
+
+var en = {
+    "logleftbox1": "Make your first video for promotion, creation and life today",
+    "logleftbox2": "Let's get started with AI Spokesgirl",
+    "make_video" : "Make Videos",
+    "make_slides" : "Make Videos By Slides",
+    "make_video_long": "Make Long Videos",
+    "make_video_eng": "Make English Video",
+    "login" : "Login",
+    "login_link" : "Login",
+    "user_profile": "User Profile",
+    "logout": "Logout",
+    "en": "English",
+    "zh": "中文",
+    "choose_character": "Choose Character",
+    "usage_intro": "Usage Introduction",
+    "history": "History",
+    "preview_videos": "Preview Videos",
+    "video_link":  "Video Link",
+    "video_title": "Video Title",
+    "p_choose_character": "Choose Character",
+    "lines": "Lines",
+    "img_link": "Image Link",
+    "content": "Content",
+    "processing_progress": "Processing Progress",
+    "usage_intro": "Usage Introduction",
+    "one_line_to_one_img": "1. Please Provide an Image Link Corresponding to a Line as a Collocation",
+    "sup_img_profile": "2. Supported File Format:",
+    "submit_to_wait": "3. After Clicking Submit, You Will Need To Wait For A Period Of Time For The Production Of The Video. Please Wait Patiently. You Can Check It At The Notification URL When The Production Is Completed.",
+    "add_eng": "Allow English Lines:",
+    "submit": "Submit",
+    "privacy_term": "I Agree to privacy policy and terms of use.",
+    "newHere": "New here?",
+    "oldHere": "Already have an account?",
+    "goRegister": "REGISTER",
+    "goRegister_link": "REGISTER",
+    "pricing" : "Pricing",
+    "errorEmail": "Please enter valid Email format.",
+    "errorPsd": "Passwords must be at least 4 characters long.",
+    "used": "Already Used",
+    "left": "Left",
+    "sec": "Sec",
+    "username": "User Name",
+    "password": "Password",
+    "resetPsd": "Reset Password",
+    "forgotPsd": "Forgot Password",
+    "details": "Details",
+    "refill": "Refill",
+    "Createsthtoday": "Create something today!",
+    "date": "Date",
+    "video_duration": "Duration",
+    "slide_link": "SLIDE Link",
+    "new_pwd": "New Password",
+    "confirm_pwd": "Confirmation Code",
+    "pricing_lan": "Language Options: Ch | Eng",
+    "pricing_avatars": "Over 6 Avatars Available",
+    "pricing_content": "You can upload: images, MP4, slides",
+    "pricing_discount": "Special Discount",
+    "pricing_checkout": "Check it out",
+    "mins": "Minutes",
+    "launch_special": "Launch special",
+    "index_li1_1": "Support english & chinese content",
+    "index_li1_2": "Caption included",
+    "index_li2_1": "Free of portrait rights",
+    "index_li2_2": "Natural facial expression",
+    "index_li2_3": "Choose built-in avatars for your need",
+    "index_li3_1": "Generate videos from text",
+    "index_li3_2": "Upload images, video, slides as backgrounds",
+    "index_action": "Want to make video faster? Sign up to start creating!",
+    "follow_us": "Follow us",
+    "contact_name": "Choozmo Inc.",
+    "address": "Rm. 9, 9F., No. 229, Fuxing 2nd Rd., Zhubei City, Hsinchu County 302052, Taiwan (R.O.C.)",
+    "contact_tel": "Tel",
+    "contact_mail": "Email",
+    "draft_edit": "Edit",
+    "drafts": "Drafts",
+    "save_draft_btn": "Save as Draft",
+    "upload_file": "Upload",
+    "intro_img": "static/img/intro_en.png",
+    "no_draft": "No drafts yet.",
+    "trial_title": "Want to get more minutes?",
+    "trial_txt": "Invite your friends to AI Spokesgirl and for each eligible one that signs up from your referral, we'll give you 2 more minutes free!",
+    "share": "Share:",
+    "close": "Close",
+    "steps_title": "easy steps to create a video",
+    "steps_no1": "Select AI avatar",
+    "steps_no2": "Type in script",
+    "steps_no3": "Upload images/videos",
+    "try_it_out": "Try it out",
+    "demo_link": "./make_video_eng.html",
+    "usecase_1": "Product Walkthrough",
+    "usecase_2": "Learning & Development",
+    "usecase_3": "Weather Report",
+    "usecase_4": "News Report",
+    "usecase_5": "Personal Creation",
+    "usecase_6": "Sightseeing Guide",
+    "usecase_7": "Museum Guide",
+    "usecase_8": "Marketing",
+    "usecase_9": "Agencies Info",
+    "hero_title": "Create AI video at a click!",
+    "hero_txt1": "No more actors, cameras and microphones.",
+    "hero_txt2": "Make a video by typing and clicking in 3 steps.",
+    "hero_txt3": "AI Spokesgirl saves you time and money.",
+    "feature": "Features",
+    "feature_no1_title1": "Type in script",
+    "feature_no1_title2": "Produce video at a click",
+    "feature_no2_title": "Over 6 Avatars Available",
+    "feature_no3_title": "Slides to video",
+    "feature_no4_title": "Language Options: Ch | Eng",
+    "feature_no1_li1": "In minutes, you can get a video.",
+    "feature_no1_li2": "Upload images, video, slides as backgrounds",
+    "feature_no1_li3": "Generate videos from text",
+    "feature_no2_li1": "Free of portrait rights",
+    "feature_no2_li2": "Natural facial expression",
+    "feature_no2_li3": "Choose built-in avatars for your need",
+    "feature_no3_li1": "Type in slide link ",
+    "feature_no3_li2": "Get downloadable MP4 video",
+    "feature_no4_li1": "Support english & chinese content",
+    "feature_no4_li2": "Caption included",
+    "make_video_hand": "Make Video",
+    "make_video_auto": "Auto Video Maker",
+    "make_video_trial": "Free Trial",
+    "5G_network": "5G Network",
+    "application":"Application",
+    "metaverse": "Metaverse",
+    "local_news": "Local News",
+    "index-about": "About",
+    "index-features": "Features",
+    "index-videos": "Samples",
+    "index-steps": "Steps",
+    "index-usecases": "Use Cases",
+    "index-demo": "Try it",
+    "time-lapse": "Time-lapse: Steps",
+    "index_title1": "Flexible AI Spokesgirl Solution",
+    "index_title2": "Create Video in Minutes",
+    "make_video_txt1": "Transfer text to video at a click",
+    "make_video_txt2": "No more actors and camera needed. Create a video at a click.",
+    "make_video_auto_txt": "Select a date. We'll crawl data and make a whether report video automatically!",
+    "selectDate": "Select A Date",
+    "Previewweathers": "Auto Content Preview"
+};
+
+function switchLanContent(val){
+    $('[set-lan]').each(function(){
+        var me = $(this);
+        var a = me.attr('set-lan').split(':');
+        var p = a[0];   //文字放置位置
+        var m = a[1];   //文字標示
+        
+        //用虎選擇語言後保存在cookie中,這裡讀取cooikes的語言版本
+        // var lan = getCookie('lan');
+       // console.log(lan);
+        //選取語言文字
+        switch(val){
+            case 'zh':
+                var t = zh[m];  
+                break;
+            case 'en':
+                var t = en[m];
+                break;
+            default:
+                var t = zh[m];
+        }
+    
+        //所選語言沒有就換
+        if(t==undefined) t = en[m];
+        if(t==undefined) t = zh[m];
+    
+        if(t==undefined) return true;   //都沒有就跳出
+    
+        //文字放置位置有(html,val等,可以自己添加)
+        switch(p){
+            case 'html':
+                me.html(t);
+                break;
+            case 'placeholder':
+                me.attr('placeholder', t);
+                console.log("placeholder");
+            case 'val':
+            case 'value':
+                me.val(t);
+                break;
+            case 'img':
+                me.attr('src', t);
+                break;
+            case 'href':
+                me.attr('href', t);
+            default:
+                me.html(t);
+        }
+    
+    });
+}
+
+changeLang(lang);
+function changeLang(val) {
+    localStorage.setItem('lan', `${val}`);
+    // setCookie('lan', val);
+    switchLanContent(val);
+}
+
+// 4. 轉換
+function changeLan(val) {
+    var val = val.value;
+    console.log(`val: ${val}`);
+    localStorage.setItem('lan', `${val}`);
+    // setCookie('lan', val);
+    switchLanContent(val);
+}
+
+
+
+// js裡面的轉換
+function get_lan(m)
+{
+    //獲取文字
+    var lan = getCookie('lan');     //語言版本
+    //選取語言文字
+    switch(lan){
+        case 'zh':
+            var t = zh[m];
+            break;
+        case 'hk':
+            var t = hk[m];
+            break;
+        default:
+            var t = en[m];
+    }
+
+    //如果沒有找到就轉換其他語言
+    if(t==undefined) t = zh[m];
+    if(t==undefined) t = en[m];
+    if(t==undefined) t = hk[m];
+
+    if(t==undefined) t = m; //如果還是沒有就直接用標示
+
+    return t;
+}
+
+function direct() {
+    console.log(lang);
+    if(lang == 'en') {
+        window.location.href = './make_video_eng.html';
+    } else {
+        window.location.href = './make_video.html';
+    }
+}
+
+function directAuto(){
+    if(lang == 'en') {
+        window.location.href = './autoMaker_v.html';
+    } else {
+        window.location.href = './autoMaker_v.html';
+    }
+}

+ 12 - 13
process1.html

@@ -18,18 +18,14 @@
 <body>
     <section id="sec01" style="height: 100vh;" class="sec01">
         <div class="card border-0">
-            <img src="./img/T1.png" class="card-img img-fluid" alt="...">
-        
+            <img src="./img/T1.webp" class="card-img img-fluid" alt="...">
+
             <div class="card-img-overlay pb-0">
-                <div style="float: left;">
-                    <a style="text-decoration: none;" href="./index.html"> <img style="width: 80px;"
-                        src="./img/Button_Home.png" alt=""></a>
-                    </div>
-                <div class="text-center me-5">
-                    <div>
-                        <p style="font-size: 48px"
-                            class="propertytitle text-dark fw-bold">回收玻璃流程</p>
-                    </div>
+                <a style="text-decoration: none; position: absolute; top:15px;" href="./index.html"> 
+                    <img style="width: 80px;" src="./img/Button_Home.png" alt="">
+                </a>
+                <div class="text-center">
+                    <p style="font-size: 48px" class="propertytitle text-dark fw-bold">回收玻璃流程</p>
                 </div>
                 <div>
                     <div class="process-box px-0">
@@ -42,7 +38,8 @@
                                         <h1 class="text-center">1.回收的玻璃山</h1>
                                         <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
                                         <p class="text-start">
-                                            35噸賓士大卡車正滿載碎玻璃,一批一批到入廠區,形成滿滿的玻璃山,而每個月卻會有200~300個貨櫃的廢玻璃出口到海外,這些不是垃圾,而是可以再利用的重要原料。</p>
+                                            35噸賓士大卡車正滿載碎玻璃,一批一批到入廠區,形成滿滿的玻璃山,而每個月卻會有200~300個貨櫃的廢玻璃出口到海外,這些不是垃圾,而是可以再利用的重要原料。
+                                        </p>
                                     </div>
                                 </div>
                                 <!-- <h1 class="text-center mt-5">動畫影片1</h1> -->
@@ -136,7 +133,9 @@
                                     <div class="px-3">
                                         <h1 class="text-center">6.二次破碎、玻璃碎屑</h1>
                                         <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
-                                        <p class="text-start">把具有傷害性的破碎玻璃鋒利面,全數熔合成無傷害性、高強度的圓面粒子,顆粒粒徑由零點六厘米至十二厘米。玻璃破屑溶燒後,重新利用、創造新品,循環再生。</p>
+                                        <p class="text-start">
+                                            把具有傷害性的破碎玻璃鋒利面,全數熔合成無傷害性、高強度的圓面粒子,顆粒粒徑由零點六厘米至十二厘米。玻璃破屑溶燒後,重新利用、創造新品,循環再生。
+                                        </p>
                                     </div>
                                 </div>
                                 <h1 class="text-center mt-5">動畫影片6</h1>

+ 382 - 89
video-2.html

@@ -18,103 +18,380 @@
 <body>
     <section class="sec01">
         <div class="card border-0">
-            <img src="./img/T1.png" class="card-img img-fluid" alt="...">
+            <img src="./img/T1.webp" class="card-img img-fluid" alt="...">
             <div class="card-img-overlay pb-0">
-                <div style="float: left;">
-                    <a style="text-decoration: none;" href="./index.html"> <img style="width: 80px;"
-                        src="./img/Button_Home.png" alt=""></a>
+                <a style="text-decoration: none; position: absolute; top:15px;" href="./index.html">
+                    <img style="width: 80px;" src="./img/Button_Home.png" alt="">
+                </a>
+                <div class="text-center">
+                    <p style="font-size: 48px; -webkit-text-stroke:0.7px #fff;" class="propertytitle text-dark fw-bold">
+                        影片導覽</p>
+                </div>
+                <div style="margin-top: -10px;" class="pb-5">
+                    <img style="position: relative; z-index: 2; top:15px;" class="img-fluid px-0 w-100"
+                        src="./img/line.png" alt="">
+                    <div style="background:	#FFFFFF;" class="py-3 border">
+                        <div style="margin:0 auto; width: 95%;">
+                            <p style="font-size: 22px;" class="text-dark px-0 mb-5">
+                                春池玻璃 |接班硬世代 三人紀實頻道
+                            </p>
+
+                        </div>
+                    </div>
+                </div>
+                <!-- <div class="tab-content px-0" id="myTabContent">
+                    <div class="tab-pane fade show active text-dark" id="home" role="tabpanel"
+                        aria-labelledby="home-tab">
+                        <style>
+                            .embed-container {
+                                position: relative;
+                                padding-bottom: 56.25%;
+                                height: 0;
+                                overflow: hidden;
+                                max-width: 100%;
+                            }
+
+                            .embed-container iframe,
+                            .embed-container object,
+                            .embed-container embed {
+                                position: absolute;
+                                top: 0;
+                                left: 0;
+                                width: 100%;
+                                height: 100%;
+                            }
+                        </style>
+                        <div class='embed-container'><iframe src='https://www.youtube.com/embed//M1N7eTCah_w'
+                                frameborder='0' allowfullscreen></iframe></div>
                     </div>
-                <div class="text-center me-5">
-                    <div>
-                        <p style="font-size: 48px; -webkit-text-stroke:0.7px #fff;"
-                            class="propertytitle text-dark fw-bold">影片導覽</p>
+                    <div class="tab-pane fade text-dark" id="profile" role="tabpanel" aria-labelledby="profile-tab">
+                        <style>
+                            .embed-container {
+                                position: relative;
+                                padding-bottom: 56.25%;
+                                height: 0;
+                                overflow: hidden;
+                                max-width: 100%;
+                            }
+
+                            .embed-container iframe,
+                            .embed-container object,
+                            .embed-container embed {
+                                position: absolute;
+                                top: 0;
+                                left: 0;
+                                width: 100%;
+                                height: 100%;
+                            }
+                        </style>
+                        <div class='embed-container'><iframe src='https://www.youtube.com/embed//oMRck77uSLo'
+                                frameborder='0' allowfullscreen></iframe></div>
+                    </div>
+                    <div class="tab-pane fade text-dark" id="contact" role="tabpanel" aria-labelledby="contact-tab">
+                        <style>
+                            .embed-container {
+                                position: relative;
+                                padding-bottom: 56.25%;
+                                height: 0;
+                                overflow: hidden;
+                                max-width: 100%;
+                            }
+
+                            .embed-container iframe,
+                            .embed-container object,
+                            .embed-container embed {
+                                position: absolute;
+                                top: 0;
+                                left: 0;
+                                width: 100%;
+                                height: 100%;
+                            }
+                        </style>
+                        <div class='embed-container'><iframe src='https://www.youtube.com/embed//Bc27sD2XeyE'
+                                frameborder='0' allowfullscreen></iframe></div>
+                    </div>
+                    <div class="tab-pane fade text-dark" id="contact1" role="tabpanel" aria-labelledby="contact-tab">
+                        <style>
+                            .embed-container {
+                                position: relative;
+                                padding-bottom: 56.25%;
+                                height: 0;
+                                overflow: hidden;
+                                max-width: 100%;
+                            }
+
+                            .embed-container iframe,
+                            .embed-container object,
+                            .embed-container embed {
+                                position: absolute;
+                                top: 0;
+                                left: 0;
+                                width: 100%;
+                                height: 100%;
+                            }
+                        </style>
+                        <div class='embed-container'><iframe src='https://www.youtube.com/embed//Bc27sD2XeyE'
+                                frameborder='0' allowfullscreen></iframe></div>
+
+                    </div>
+                    <div class="tab-pane fade text-dark" id="contact2" role="tabpanel" aria-labelledby="contact-tab">
+                        <style>
+                            .embed-container {
+                                position: relative;
+                                padding-bottom: 56.25%;
+                                height: 0;
+                                overflow: hidden;
+                                max-width: 100%;
+                            }
+
+                            .embed-container iframe,
+                            .embed-container object,
+                            .embed-container embed {
+                                position: absolute;
+                                top: 0;
+                                left: 0;
+                                width: 100%;
+                                height: 100%;
+                            }
+                        </style>
+                        <div class='embed-container'><iframe src='https://www.youtube.com/embed//M1N7eTCah_w'
+                                frameborder='0' allowfullscreen></iframe></div>
+
+                    </div>
+                    <div class="tab-pane fade text-dark" id="contact3" role="tabpanel" aria-labelledby="contact-tab">
+                        <style>
+                            .embed-container {
+                                position: relative;
+                                padding-bottom: 56.25%;
+                                height: 0;
+                                overflow: hidden;
+                                max-width: 100%;
+                            }
+
+                            .embed-container iframe,
+                            .embed-container object,
+                            .embed-container embed {
+                                position: absolute;
+                                top: 0;
+                                left: 0;
+                                width: 100%;
+                                height: 100%;
+                            }
+                        </style>
+                        <div class='embed-container'><iframe src='https://www.youtube.com/embed//oMRck77uSLo'
+                                frameborder='0' allowfullscreen></iframe></div>
+
+                    </div>
+                    <div class="tab-pane fade text-dark" id="contact4" role="tabpanel" aria-labelledby="contact-tab">
+                        <style>
+                            .embed-container {
+                                position: relative;
+                                padding-bottom: 56.25%;
+                                height: 0;
+                                overflow: hidden;
+                                max-width: 100%;
+                            }
+
+                            .embed-container iframe,
+                            .embed-container object,
+                            .embed-container embed {
+                                position: absolute;
+                                top: 0;
+                                left: 0;
+                                width: 100%;
+                                height: 100%;
+                            }
+                        </style>
+                        <div class='embed-container'><iframe src='https://www.youtube.com/embed//oMRck77uSLo'
+                                frameborder='0' allowfullscreen></iframe></div>
+
                     </div>
+                    <div class="tab-pane fade text-dark" id="contact5" role="tabpanel" aria-labelledby="contact-tab">
+                        <style>
+                            .embed-container {
+                                position: relative;
+                                padding-bottom: 56.25%;
+                                height: 0;
+                                overflow: hidden;
+                                max-width: 100%;
+                            }
+
+                            .embed-container iframe,
+                            .embed-container object,
+                            .embed-container embed {
+                                position: absolute;
+                                top: 0;
+                                left: 0;
+                                width: 100%;
+                                height: 100%;
+                            }
+                        </style>
+                        <div class='embed-container'><iframe src='https://www.youtube.com/embed//oMRck77uSLo'
+                                frameborder='0' allowfullscreen></iframe></div>
+
+                    </div>
+                    <div class="tab-pane fade text-dark" id="contact6" role="tabpanel" aria-labelledby="contact-tab">
+                        <style>
+                            .embed-container {
+                                position: relative;
+                                padding-bottom: 56.25%;
+                                height: 0;
+                                overflow: hidden;
+                                max-width: 100%;
+                            }
+
+                            .embed-container iframe,
+                            .embed-container object,
+                            .embed-container embed {
+                                position: absolute;
+                                top: 0;
+                                left: 0;
+                                width: 100%;
+                                height: 100%;
+                            }
+                        </style>
+                        <div class='embed-container'><iframe src='https://www.youtube.com/embed//oMRck77uSLo'
+                                frameborder='0' allowfullscreen></iframe></div>
+
+                    </div>
+                    
                 </div>
-                    <div style="margin-top: -20px;" class="pb-5">
-                        <img style="position: relative; z-index: 2; top:15px;" class="img-fluid px-0 w-100"
-                            src="./img/line.png" alt="">
-                        <div style="background:	#FFFFFF;" class="py-3 border">
-                            <div style="margin:0 auto; width: 95%;">
-                                <p style="font-size: 22px;" class="text-dark px-0 mb-5">
-                                    春池玻璃 |接班硬世代 三人紀實頻道
-                                </p>
-                              
-                            </div>
-                        </div>
+                <div class="d-flex justify-content-center text-center mt-3">
+                    <div style="width: 95%; margin:0 auto">
+                        <ul class="nav nav-pills" id="myTab" role="tablist">
+                            <li class="nav-item p-2" role="presentation">
+                                <div class="nav-link active border-0 bg-transparent text-dark px-0" id="home-tab"
+                                    data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab"
+                                    aria-controls="home" aria-selected="true"><img width="216"
+                                        src="./img/video/SPRING POOL GLASS  W GLASS PROJECT - INFINITY STRAW.webp"
+                                        alt="">
+                                </div>
+                            </li>
+                            <li class="nav-item p-2" role="presentation">
+                                <div class="nav-link border-0 bg-transparent text-dark px-0" id="profile-tab"
+                                    data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab"
+                                    aria-controls="profile" aria-selected="false"><img width="216"
+                                        src="./img/video/SPRING POOL GLASS  W春池計畫_W GLASS PROJECT.webp" alt="">
+                                </div>
+                            </li>
+                            <li class="nav-item p-2" role="presentation">
+                                <div class="nav-link border-0 bg-transparent text-dark px-0" id="profile-tab"
+                                    data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab"
+                                    aria-controls="profile" aria-selected="false"><img width="216"
+                                        src="./img/video/SPRING POOL GLASS | W Hotel x W Glass Project W春池計畫.webp"
+                                        alt=""></div>
+                            </li>
+                            <li class="nav-item p-2" role="presentation">
+                                <div class="nav-link border-0 bg-transparent text-dark px-0" id="contact-tab"
+                                    data-bs-toggle="tab" data-bs-target="#contact1" type="button" role="tab"
+                                    aria-controls="contact" aria-selected="false"><img width="216"
+                                        src="./img/video/春池玻璃 x 曾志偉- 忠泰Home2025想家計畫.webp" alt="">
+                                </div>
+                            </li>
+                            <li class="nav-item p-2" role="presentation">
+                                <div class="nav-link border-0 bg-transparent text-dark px-0" id="contact-tab"
+                                    data-bs-toggle="tab" data-bs-target="#contact2" type="button" role="tab"
+                                    aria-controls="contact" aria-selected="false"><img width="216"
+                                        src="./img/video/春池玻璃 |接班硬世代 三人紀實頻道.webp" alt="">
+                                </div>
+                            </li>
+                            <li class="nav-item p-2" role="presentation">
+                                <div class="nav-link border-0 bg-transparent text-dark px-0" id="contact-tab"
+                                    data-bs-toggle="tab" data-bs-target="#contact3" type="button" role="tab"
+                                    aria-controls="contact" aria-selected="false"><img width="216"
+                                        src="./img/video/春池玻璃X三鶯部落 用回收玻璃創造笑容 原住民自力造屋.webp" alt="">
+                                </div>
+                            </li>
+                            <li class="nav-item p-2" role="presentation">
+                                <div class="nav-link border-0 bg-transparent text-dark px-0" id="profile-tab"
+                                    data-bs-toggle="tab" data-bs-target="#contact4" type="button" role="tab"
+                                    aria-controls="profile" aria-selected="false"><img width="216"
+                                        src="./img/video/春池玻璃X杜祖業 用回收玻璃創造新意義 (城市篇).webp" alt="">
+                                </div>
+                            </li>
+                            <li class="nav-item p-2" role="presentation">
+                                <div class="nav-link border-0 bg-transparent text-dark px-0" id="profile-tab"
+                                    data-bs-toggle="tab" data-bs-target="#contact5" type="button" role="tab"
+                                    aria-controls="profile" aria-selected="false"><img width="216"
+                                        src="./img/video/春池玻璃X格式 2017文博會主題館 我們在文化裡爆炸.webp" alt="">
+                                </div>
+                            </li>
+                            <li class="nav-item p-2" role="presentation">
+                                <div class="nav-link border-0 bg-transparent text-dark px-0" id="profile-tab"
+                                    data-bs-toggle="tab" data-bs-target="#contact6" type="button" role="tab"
+                                    aria-controls="profile" aria-selected="false"><img width="216"
+                                        src="./img/video/春池玻璃X蔡英文 蔡總統蒞臨春池玻璃 20160919.webp" alt="">
+                                </div>
+                            </li>
+
+                        </ul>
                     </div>
-                    <div class="tab-content px-0" id="myTabContent">
-                        <div class="tab-pane fade show active text-dark" id="home" role="tabpanel"
-                            aria-labelledby="home-tab">
-                            <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//M1N7eTCah_w' frameborder='0' allowfullscreen></iframe></div>
+                </div> -->
+
+
+                <div>
+                    <style>
+                        .embed-container {
+                            position: relative;
+                            padding-bottom: 56.25%;
+                            height: 0;
+                            overflow: hidden;
+                            max-width: 100%;
+                        }
+
+                        .embed-container iframe,
+                        .embed-container object,
+                        .embed-container embed {
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            width: 100%;
+                            height: 100%;
+                        }
+                    </style>
+                    <div class='embed-container'><iframe class='youtube-video'
+                            src='https://www.youtube.com/embed//_hNmjXJ6lNM?autoplay=1' frameborder='0' allowfullscreen
+                            height="394" allow="autoplay;"></iframe></div>
+                </div>
+                <div class='video-cover mt-3'>
+                    <div class="row px-0 mx-0">
+                        <div class="col-4 p-2">
+                            <img class="video-img img-fluid" data-info="_hNmjXJ6lNM"
+                                src="./img/video/SPRING POOL GLASS  W GLASS PROJECT - INFINITY STRAW.webp" alt="">
                         </div>
-                        <div class="tab-pane fade text-dark" id="profile" role="tabpanel" aria-labelledby="profile-tab">
-                            <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//oMRck77uSLo' frameborder='0' allowfullscreen></iframe></div>
+                        <div class="col-4 p-2">
+                            <img class="video-img img-fluid" data-info="y87GknOuwaI"
+                                src="./img/video/SPRING POOL GLASS  W春池計畫_W GLASS PROJECT.webp" alt="">
                         </div>
-                        <div class="tab-pane fade text-dark" id="contact" role="tabpanel" aria-labelledby="contact-tab">
-                            <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//Bc27sD2XeyE' frameborder='0' allowfullscreen></iframe></div>
+                        <div class="col-4 p-2">
+                            <img class="video-img img-fluid" data-info="_sxluHDac-Q"
+                                src="./img/video/SPRING POOL GLASS | W Hotel x W Glass Project W春池計畫.webp" alt="">
                         </div>
-                        <div class="tab-pane fade text-dark" id="contact1" role="tabpanel" aria-labelledby="contact-tab">
-                            <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//Bc27sD2XeyE' frameborder='0' allowfullscreen></iframe></div>
-    
+                        <div class="col-4 p-2">
+                            <img class="video-img img-fluid" data-info="ieDVIEjBQe0"
+                                src="./img/video/春池玻璃 x 曾志偉- 忠泰Home2025想家計畫.webp" alt="">
                         </div>
-                        <div class="tab-pane fade text-dark" id="contact2" role="tabpanel" aria-labelledby="contact-tab">
-                            <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//M1N7eTCah_w' frameborder='0' allowfullscreen></iframe></div>
-    
+                        <div class="col-4 p-2">
+                            <img class="video-img img-fluid" data-info="6TPo1hG-4eA"
+                                src="./img/video/春池玻璃 |接班硬世代 三人紀實頻道.webp" alt="">
                         </div>
-                        <div class="tab-pane fade text-dark" id="contact3" role="tabpanel" aria-labelledby="contact-tab">
-                            <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//oMRck77uSLo' frameborder='0' allowfullscreen></iframe></div>
-                            
+                        <div class="col-4 p-2">
+                            <img class="video-img img-fluid" data-info="9hteKpRwc-E" src="./img/video/春池玻璃X三鶯部落 用回收玻璃創造笑容 原住民自力造屋.webp" alt="">
                         </div>
-                    </div>
-                    <div class="d-flex justify-content-center text-center mt-3">
-                        <div  style="width: 95%; margin:0 auto">
-                            <ul class="nav nav-pills" id="myTab" role="tablist">
-                                <li class="nav-item p-2" role="presentation">
-                                    <div class="nav-link active border-0 bg-transparent text-dark px-0" id="home-tab"
-                                        data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab"
-                                        aria-controls="home" aria-selected="true"><img src="./img/1633409116610.jpg" alt="">
-                                    </div>
-                                </li>
-                                <li class="nav-item p-2" role="presentation">
-                                    <div class="nav-link border-0 bg-transparent text-dark px-0" id="profile-tab"
-                                        data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab"
-                                        aria-controls="profile" aria-selected="false"><img width="216"
-                                            src="./img/1633409172788.jpg" alt=""></div>
-                                </li>
-                                <li class="nav-item p-2" role="presentation">
-                                    <div class="nav-link border-0 bg-transparent text-dark px-0" id="contact-tab"
-                                        data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab"
-                                        aria-controls="contact" aria-selected="false"><img width="216"
-                                            src="./img/1633409158555.jpg" alt=""></div>
-                                </li>
-                                <li class="nav-item p-2" role="presentation">
-                                    <div class="nav-link border-0 bg-transparent text-dark px-0" id="contact-tab"
-                                        data-bs-toggle="tab" data-bs-target="#contact1" type="button" role="tab"
-                                        aria-controls="contact" aria-selected="false"><img width="216"
-                                            src="./img/1633409158555.jpg" alt=""></div>
-                                </li>
-                                <li class="nav-item p-2" role="presentation">
-                                    <div class="nav-link border-0 bg-transparent text-dark px-0" id="contact-tab"
-                                        data-bs-toggle="tab" data-bs-target="#contact2" type="button" role="tab"
-                                        aria-controls="contact" aria-selected="false"><img width="216"
-                                            src="./img/1633409116610.jpg" alt=""></div>
-                                </li>
-                                <li class="nav-item p-2" role="presentation">
-                                    <div class="nav-link border-0 bg-transparent text-dark px-0" id="profile-tab"
-                                        data-bs-toggle="tab" data-bs-target="#contact3" type="button" role="tab"
-                                        aria-controls="profile" aria-selected="false"><img width="216"
-                                            src="./img/1633409172788.jpg" alt=""></div>
-                                </li>
-                            </ul>
+                        <div class="col-4 p-2">
+                            <img class="video-img img-fluid" data-info="92x1O51Ielc" src="./img/video/春池玻璃X杜祖業 用回收玻璃創造新意義 (城市篇).webp" alt="">
+                        </div>
+                        <div class="col-4 p-2">
+                            <img class="video-img img-fluid" data-info="XsKFEj2H73s" src="./img/video/春池玻璃X格式 2017文博會主題館 我們在文化裡爆炸.webp" alt="">
+                        </div>
+                        <div class="col-4 p-2">
+                            <img class="video-img img-fluid" data-info="H2RFuRN_aO8" src="./img/video/春池玻璃X蔡英文 蔡總統蒞臨春池玻璃 20160919.webp" alt="">
                         </div>
                     </div>
-
+                </div>
+              
             </div>
-            <!-- <div style="margin-top: 100px;">
-                <video style="width: 100%;" autoplay muted loop playsinline>
-                    <source src="./img/春池動畫.mp4" type="video/mp4">
-                </video>
-            </div> -->
+   
 
 
         </div>
@@ -122,16 +399,32 @@
 
     </section>
 
-
-
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
-        integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
+    <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.1.1/dist/js/bootstrap.min.js"
-        integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
+        integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
         crossorigin="anonymous"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="./lan.js"></script>
+    <script>
+        $(".video-img").click(function () {
+            var videosrc = $(this).data("info");
+            $('.youtube-video').attr('src', `https://www.youtube.com/embed//${videosrc}?autoplay=1`);
+        });
+
+        // $(".usecase-imgfr").click(function () {
+        //     let ytid = $(this).data('ytid');
+        //     $('.youtube-video').attr('src', `https://www.youtube.com/embed//${ytid}?autoplay=1`);
+        // });
+        $(".btn-close").click(function () {
+            $('.youtube-video').attr('src', ``);
+        });
+        $('#exampleModal').on('hidden.bs.modal', function () {
+            $('.youtube-video').attr('src', ``);
+        });
+    </script>
 </body>
 
 </html>

+ 1 - 1
video.html

@@ -23,7 +23,7 @@
                     <a style="text-decoration: none;" href="./index.html"> <img style="width: 80px;"
                         src="./img/Button_Home.png" alt=""></a>
                     </div>
-                <div class="text-center me-5">
+                <div class="text-center">
                     <div>
                         <p style="font-size: 48px"
                             class="propertytitle text-dark fw-bold">影片導覽</p>