update

about.html

@@ -22,28 +22,39 @@
             <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>
+                        <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%" class="propertytitle text-dark fw-bold">關於春池玻璃</p>
+                        <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; font-size: 14px;"
-                            class="text-center py-3 border d-flex align-items-center justify-content-center">
-                            <div style="width: 80%;">
-                                <p class="text-dark px-0">春池玻璃實業有限公司，目前跨足於工業原料、科技建材、文化藝術與觀光工廠。本業為專業回收玻璃與再處理之企業，總公司在台灣新竹，並擁有三家相關企業。目前每年回收並處理超過10萬噸的春池玻璃，目前為全台最具規模之廢棄玻璃回收業者。其企業理念為永續經營，綠色創新。在2015更獲得根留台灣，展望全球之「金根獎」之殊榮。蔡總統英文更在2016年九月親自參訪春池玻璃觀光工廠，並給予極高評價，稱春池玻璃為台灣「循環經濟」之典範。</p>
-                                <p class="text-dark px-0">春池玻璃創辦人吳春池，自1961年起，投入玻璃產業至今已超過50載。目前春池玻璃在新竹與苗栗有五座廢玻璃處理、再加工廠，回收的廢玻璃約占台灣的七成。其目標致力於把有限的資源，不停的循環使用，使其變成永續的材料，走出台灣循環經濟的下一條路。</p>
+                        <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>
-            <h1 class="text-center">動畫影片</h1>
-        
+            <!-- <div style="margin-top: 100px;">
+                <video style="width: 100%;" autoplay muted loop playsinline>
+                    <source src="./img/春池動畫.mp4" type="video/mp4">
+                </video>
+            </div> -->
+
+
         </div>
-        
+
 
     </section>
 

application.html

@@ -29,43 +29,91 @@
                         <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="bg-item3 bg-active px-3">
-                                <h1 class="text-center">1.科技建材</h1>
-                                <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
-                                <p class="text-start">
-                                    將回收玻璃變身為高科技綠建材，經濟效益頓時躍升。
-                                    可作為燒製地磚、輕質骨材、發泡玻璃、管路回填料等建材之原料;
-                                    亦有少部分運用於掺於青中用於鋪設道路。由於顏色、顆粒的多樣，加上..</p>
+                    <div class="process-box px-0">
+                        <div class="bg-item3 bg-active">
+                            <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">
+                                        <h1 class="text-center">1.科技建材</h1>
+                                        <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
+                                        <p class="text-start">
+                                            將回收玻璃變身為高科技綠建材，經濟效益頓時躍升。
+                                            可作為燒製地磚、輕質骨材、發泡玻璃、管路回填料等建材之原料;
+                                            亦有少部分運用於掺於青中用於鋪設道路。由於顏色、顆粒的多樣，加上..</p>
+                                    </div>
+                                </div>
+                                <div style="margin-top: 10px;">
+                                    <video style="width: 100%;" autoplay muted loop playsinline>
+                                        <source src="./img/process/bt_01_0001-0280.mkv" type="video/mp4">
+                                    </video>
+                                </div>
                             </div>
-                            <div class="bg-item3 px-3">
-                                <h1 class="text-center">2.耐火磚</h1>
-                                <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
-                                <p class="text-start">透過高科技不斷創新研發、提升防火技術，以減少火災生命及財產損失。此種回收玻璃重量約一般磚頭的1/8，材質輕，又有耐震、隔熱、防火、隔音效果，是高效能的隔熱節能減碳建材。
-                                    價格與一般磚頭差不多。
-                                    </p>
+                        </div>
+                        <div class="bg-item3">
+                            <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">
+                                        <h1 class="text-center">2.耐火磚</h1>
+                                        <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
+                                        <p class="text-start">透過高科技不斷創新研發、提升防火技術，以減少火災生命及財產損失。此種回收玻璃重量約一般磚頭的1/8，材質輕，又有耐震、隔熱、防火、隔音效果，是高效能的隔熱節能減碳建材。
+                                            價格與一般磚頭差不多。
+                                            </p>
+                                    </div>
+                                </div>
+                                <div style="margin-top: 10px;">
+                                    <video style="width: 100%;" autoplay muted loop playsinline>
+                                        <source src="./img/process/bt_02_0001-0250.mkv" type="video/mp4">
+                                    </video>
+                                </div>
                             </div>
-                            <div class="bg-item3 px-3">
-                                <h1 class="text-center">3.玻璃製品</h1>
-                                <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
-                                <p class="text-start">玻璃回收利潤低，春池透過玻璃的回收再製，將原本已經廢棄的玻璃，重新賦予它們新的價值，透過自動化系統，可大量製作圓瓶、透明、咬霧、方瓶、特殊瓶、圓罐、方罐等再製品，為廢棄玻璃創造，永續的高經濟價值。
-                                </p>
+                        </div>
+                        <div class="bg-item3">
+                            <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">
+                                        <h1 class="text-center">3.玻璃製品</h1>
+                                        <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
+                                        <p class="text-start">玻璃回收利潤低，春池透過玻璃的回收再製，將原本已經廢棄的玻璃，重新賦予它們新的價值，透過自動化系統，可大量製作圓瓶、透明、咬霧、方瓶、特殊瓶、圓罐、方罐等再製品，為廢棄玻璃創造，永續的高經濟價值。
+                                        </p>
+                                    </div>
+                                </div>
+                                <div style="margin-top: 10px;">
+                                    <video style="width: 100%;" autoplay muted loop playsinline>
+                                        <source src="./img/process/bt_03_0001-0300.mkv" type="video/mp4">
+                                    </video>
+                                </div>
                             </div>
-                            <div class="bg-item3 px-3">
-                                <h1 class="text-center">4.藝術玻璃</h1>
-                                <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
-                                <p class="text-start">春池綠能玻璃傳承新竹地區玻璃藝術產業，每一件作品皆為手工精製，擁有四十餘年經歷的工藝師傅，發揮精湛的技藝，創作出春池玻璃獨有的藝術作品，春池手工吹製玻璃、工藝製品，如今已成功開發多款多元運用性的玻璃，產品的轉換效率不斷被提升，精益求精，追求卓越。
-                                </p>
+                        </div>
+                        <div class="bg-item3">
+                            <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">
+                                        <h1 class="text-center">4.藝術玻璃</h1>
+                                        <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
+                                        <p class="text-start">春池綠能玻璃傳承新竹地區玻璃藝術產業，每一件作品皆為手工精製，擁有四十餘年經歷的工藝師傅，發揮精湛的技藝，創作出春池玻璃獨有的藝術作品，春池手工吹製玻璃、工藝製品，如今已成功開發多款多元運用性的玻璃，產品的轉換效率不斷被提升，精益求精，追求卓越。
+                                        </p>
+                                    </div>
+                                </div>
+                                <div style="margin-top: 10px;">
+                                    <video style="width: 100%;" autoplay muted loop playsinline>
+                                        <source src="./img/process/bt_04_0001-0250.mkv" type="video/mp4">
+                                    </video>
+                                </div>
                             </div>
                         </div>
                     </div>
+                   
 
                 </div>
             </div>
-            <h1 class="text-center">動畫影片</h1>
 
         </div>
 

glass-art.html

@@ -37,11 +37,16 @@
                                 <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>
-            <h1 class="text-center">動畫影片</h1>
+           
 
         </div>
 

index.html

@@ -31,9 +31,9 @@
                     </div>
                 </div> -->
                 <ul class="px-0">
-                    <li><img src="./img/bgsec03.png" class="itemimg01 card-img img-fluid" alt="..."></li>
-                    <li><img src="./img/bgsec02.png" class="itemimg01 card-img img-fluid" alt="..."></li>
-                    <li><img src="./img/bgsec01.png" class="itemimg01 card-img img-fluid" alt="..."></li>
+                    <li><img src="./img/bgsec01.webp" class="itemimg01 card-img img-fluid" alt="..."></li>
+                    <li><img src="./img/bgsec02.webp" class="itemimg01 card-img img-fluid" alt="..."></li>
+                    <li><img src="./img/bgsec03.webp" class="itemimg01 card-img img-fluid" alt="..."></li>
                 </ul>
             </div>
             <div id="nextPage" class="card-img-overlay pt-5">
@@ -86,7 +86,7 @@
         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="./goto.js"></script>
+    <!-- <script src="./goto.js"></script> -->
 </body>
 
 </html>

process1.html

@@ -29,50 +29,120 @@
                         <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="bg-item3 bg-active px-3">
-                                <h1 class="text-center">1.回收的玻璃山</h1>
-                                <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
-                                <p class="text-start">
-                                    35噸賓士大卡車正滿載碎玻璃，一批一批到入廠區，形成滿滿的玻璃山，而每個月卻會有200～300個貨櫃的廢玻璃出口到海外，這些不是垃圾，而是可以再利用的重要原料。</p>
+                    <div class="process-box px-0">
+                        <div class="bg-item3 bg-active">
+                            <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">
+                                        <h1 class="text-center">1.回收的玻璃山</h1>
+                                        <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
+                                        <p class="text-start">
+                                            35噸賓士大卡車正滿載碎玻璃，一批一批到入廠區，形成滿滿的玻璃山，而每個月卻會有200～300個貨櫃的廢玻璃出口到海外，這些不是垃圾，而是可以再利用的重要原料。</p>
+                                    </div>
+                                </div>
+                                <h1 class="text-center mt-5">動畫影片1</h1>
+
+                                <!-- <div style="margin-top: 10px;">
+                                    <video style="width: 100%;" autoplay muted loop playsinline>
+                                        <source src="./img/process/bt_01_0001-0280.mkv" type="video/mp4">
+                                    </video>
+                                </div> -->
                             </div>
-                            <div class="bg-item3 px-3">
-                                <h1 class="text-center">2.回收廢棄玻璃</h1>
-                                <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
-                                <p class="text-start">利用廢棄玻璃製成亮彩琉璃、綠建材，實用又兼具環保。</p>
+                        </div>
+                        <div class="bg-item3">
+                            <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">
+                                        <h1 class="text-center">2.回收廢棄玻璃</h1>
+                                        <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
+                                        <p class="text-start">利用廢棄玻璃製成亮彩琉璃、綠建材，實用又兼具環保。</p>
+                                    </div>
+                                </div>
+                                <h1 class="text-center mt-5">動畫影片2</h1>
+
+                                <!-- <div style="margin-top: 10px;">
+                                    <video style="width: 100%;" autoplay muted loop playsinline>
+                                        <source src="./img/process/bt_02_0001-0250.mkv" type="video/mp4">
+                                    </video>
+                                </div> -->
                             </div>
-                            <div class="bg-item3 px-3">
-                                <h1 class="text-center">3.人工初步分類</h1>
-                                <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
-                                <p class="text-start">人工檢查 、分色、去除非金屬雜物。</p>
+                        </div>
+                        <div class="bg-item3">
+                            <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">
+                                        <h1 class="text-center">3.人工初步分類</h1>
+                                        <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
+                                        <p class="text-start">人工檢查 、分色、去除非金屬雜物。</p>
+                                    </div>
+                                </div>
+                                <h1 class="text-center mt-5">動畫影片3</h1>
+
+                                <!-- <div style="margin-top: 10px;">
+                                    <video style="width: 100%;" autoplay muted loop playsinline>
+                                        <source src="./img/process/bt_03_0001-0300.mkv" type="video/mp4">
+                                    </video>
+                                </div> -->
                             </div>
-                            <div class="bg-item3 px-3">
-                                <h1 class="text-center">4.去除雜質磁選</h1>
-                                <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
-                                <p class="text-start">以磁選機去除含鐵雜質，洗滌。
-                                </p>
+                        </div>
+                        <div class="bg-item3">
+                            <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">
+                                        <h1 class="text-center">4.去除雜質磁選</h1>
+                                        <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
+                                        <p class="text-start">以磁選機去除含鐵雜質，洗滌。
+                                        </p>
+                                    </div>
+                                </div>
+                                <h1 class="text-center mt-5">動畫影片4</h1>
+
+                                <!-- <div style="margin-top: 10px;">
+                                    <video style="width: 100%;" autoplay muted loop playsinline>
+                                        <source src="./img/process/bt_04_0001-0250.mkv" type="video/mp4">
+                                    </video>
+                                </div> -->
                             </div>
-                            <div class="bg-item3 px-3">
-                                <h1 class="text-center">5.二次破碎、玻璃碎屑</h1>
-                                <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
-                                <p class="text-start">再經機械磨碎至玻璃窯爐熔燒。</p>
+                        </div>
+                        <div class="bg-item3">
+                            <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">
+                                        <h1 class="text-center">5.二次破碎、玻璃碎屑</h1>
+                                        <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
+                                        <p class="text-start">再經機械磨碎至玻璃窯爐熔燒。</p>
+                                    </div>
+                                </div>
+                                <h1 class="text-center mt-5">動畫影片5</h1>
                             </div>
-                            <div class="bg-item3 px-3">
-                                <h1 class="text-center">6.二次破碎、玻璃碎屑</h1>
-                                <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
-                                <p class="text-start">
-                                    把具有傷害性的破碎玻璃鋒利面，全數熔合成無傷害性、高強度的圓面粒子，顆粒粒徑由零點六厘米至十二厘米。玻璃破屑溶燒後，重新利用、創造新品，循環再生。</p>
+                        </div>
+                        <div class="bg-item3">
+                            <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">
+                                        <h1 class="text-center">6.二次破碎、玻璃碎屑</h1>
+                                        <p class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
+                                        <p class="text-start">把具有傷害性的破碎玻璃鋒利面，全數熔合成無傷害性、高強度的圓面粒子，顆粒粒徑由零點六厘米至十二厘米。玻璃破屑溶燒後，重新利用、創造新品，循環再生。</p>
+                                    </div>
+                                </div>
+                                <h1 class="text-center mt-5">動畫影片6</h1>
                             </div>
                         </div>
                     </div>
-
                 </div>
             </div>
-            <h1 class="text-center">動畫影片</h1>
-
         </div>
 
 

property.html

@@ -26,7 +26,7 @@
                                 src="./img/Button_Home.png" alt=""></a>
                     </div>
                     <div class="col-10">
-                        <p style="font-size: 48px;position: relative; left:25%" class="propertytitle text-dark fw-bold">
+                        <p style="font-size: 48px;position: relative; left:25%;" class="propertytitle text-dark fw-bold">
                             玻璃特性</p>
                     </div>
                     <div style="margin-top: -20px;" class="pb-4">