choozmo
/
SP_Glass


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>process</title>


    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <link rel="stylesheet" href="./style.css">
</head>

<body style="background-color: #000;">
    <section id="sec01" style="height: 100vh;" class="sec01">
        <audio style="display: none;" src="./img/And Just Like That.mp3" autoplay controls></audio>

        <div class="card border-0">
            <img src="./img/BG_04.webp" class="card-img img-fluid" alt="...">
            <div class="card-img-overlay pb-0">
                <a style="text-decoration: none; position: absolute; top:15px;" href="./index.html"> <img style="width: 80px;"
                        src="./img/btn/118561.png" alt=""></a>
                <div class="text-center">
                    <p style="font-size: 48px;color:#fff;" class="propertytitle fw-bold">回收玻璃用途</p>
                </div>
                <div>
                    <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/application/bt05_01.mp4" type="video/mp4">
                                    </video>
                                </div>
                            </div>
                        </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/application/bt05_02.mp4" type="video/mp4">
                                    </video>
                                </div>
                            </div>
                        </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/application/bt05_03.mp4" type="video/mp4">
                                    </video>
                                </div>
                            </div>
                        </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/application/bt05_04.mp4" type="video/mp4">
                                    </video>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>

        </div>


    </section>


    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
        integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
        integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
        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>
        var next3 = document.getElementById('sec01');
        var items3 = document.getElementsByClassName('bg-item3');
        var index = 0;

        function btnNext2() {
            index++;

            if (index > 3) index = 0;
            console.log(index);

            ShowItems3();
        };

        next3.onclick = btnNext2;

        console.log(items3)

        function ShowItems3() {
            // 迴圈執行，將每張項目的類別bg-active移除
            for (var i = 0; i < items3.length; i++) {
                items3[i].classList.remove("bg-active");
            }
            // 將要顯示的項目添加bg-active類別
            items3[index].classList.add("bg-active");
            // $('.bg-item').fadeIn();

        };
    </script>
</body>

</html>