@extends('layouts.auth')

@section('styles')

    <style>
        body {
            background-color: #dcecf1;
            font-size: 1.3rem;
        }

        .carousel-inner {
            height: 90vh;
        }

        .page_photo {
            width: 60vw;
            margin-top: 2vw;
            margin-left: 5vw;
            border: 2px dashed #7cb9ec;
            border-radius: 5px;
            box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
        }

        .page_text {
            position: absolute;
            right: 10vw;
            top: 10vh;
            left: auto;
            bottom: auto;
            color: #fff;
            text-align: center;
        }

        .sh {
            font-weight: bold;
            text-shadow: -1px -1px 0 #ffffff,
                1px -1px 0 #ffffff,
                -1px 1px 0 #ffffff,
                1px 1px 0 #ffffff;
        }

        p {
            width: 20vw;
            text-align: left;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            padding: 10px;
        }

        .brown {
            color: #774828;
        }

        .pink {
            color: #ec7caf;
        }

        .orange {
            color: #ff8800;
        }

        .blue {
            color: #376ed4;
        }

        .purple {
            color: #802dc4;
        }

        .green {
            color: #21a05a;
        }

        .red {
            color: #ff7171;
        }

        .fir_photo {
            margin-top: -4vh;
            margin-left: 5vw;
            width: 90%;
        }
        .carousel-control-next, .carousel-control-prev {
            width: 5%;
        }
        .carousel-control-prev-icon,.carousel-control-next-icon{
            filter: invert(1);
        }
        @media (max-width: 951px) {

            .page_photo {
                width: 95%;
                margin-top: 2vw;
                margin-left: 2.5%;
            }

            .page_text {
                position: static;
                width: 95%;
                margin-left: 2.5%;
                margin-top: 2vw;
            }

            p {
                width: 98%;
            }
            .fir_photo {
                object-fit: cover;
                width: 100%;
                height: 70vh;
                margin-top: auto;
                margin-left: auto;
            }
        }
    </style>
@endsection
@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
    </script>
    <script></script>
@endsection

@section('content')
    <div>

        <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
                    aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
                    aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
                    aria-label="Slide 3"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"
                    aria-label="Slide 3"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4"
                    aria-label="Slide 4"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="5"
                    aria-label="Slide 5"></button>
            </div>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="img/info/background.png" class="fir_photo" alt="...">
                    <div class="page_text">
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="img\info\page01.png" class="page_photo" alt="...">
                    <div class="page_text">
                        <h2 class='sh brown'><img src='img\事業單位基本資料_元件_Icon_適法性分析.svg' width="50px"> 適法性分析</h2>
                        <h4 class='sh pink'>自動對法規 管理好方便</h4>
                        <p>系統化分析廠內職安衛法規的符合度，將自動提示改善項目與建議，提升工安管理效率。</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="img\info\page02.png" class="page_photo" alt="...">
                    <div class="page_text">
                        <h2 class='sh purple'><img src='img\事業單位基本資料_元件_Icon_機械設備自動檢查.svg' width="50px"> 機械設備自動檢查</h2>
                        <h4 class='sh orange'>自檢做得好 安全沒煩惱</h4>
                        <p>針對廠內常用機械設備之自動檢查(如固定式起重機、堆高機..等)，提供即將到期之提醒。</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="img\info\page03.png" class="page_photo" alt="...">
                    <div class="page_text">
                        <h2 class='sh red'><img src='img\事業單位基本資料_元件_Icon_作業環境監測.svg' width="50px"> 作業環境監測</h2>
                        <h4 class='sh blue'>職場須作測 保護你我他</h4>
                        <p>針對作業場所，須實施作業環境監測(如有機溶劑、特定化學物質、高溫..等)，提供監測頻率即將到期之提醒。</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="img\info\page04.png" class="page_photo" alt="...">
                    <div class="page_text">
                        <h2 class='sh orange'><img src='img\事業單位基本資料_元件_Icon_健康檢查.svg' width="50px"> 健康檢查</h2>
                        <h4 class='sh green'>定期做檢查 健康有保障</h4>
                        <p>(a) 針對在職勞工【定期健康檢查】或特別危害健康作業<br>(b) (如有機溶劑、噪音、游離輻射、粉塵、高溫、特定化學物質..等)之【特別健康檢查】，提供檢查頻率即將到期之提醒。</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="img\info\page05.png" class="page_photo" alt="...">
                    <div class="page_text">
                        <h2 class='sh green'><img src='img\事業單位基本資料_元件_Icon_人員證照與教育訓練.svg' width="50px"> 人員證照與教育訓練</h2>
                        <h4 class='sh purple'>員工訓練好 職災沒煩惱</h4>
                        <p>針對人員證照資格及擔任不同性質之勞工(如業務主管、安全衛生管理人員、特殊作業人員、一般勞工等)，提供在職回訓時間即將到期之提醒。</p>
                    </div>
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
                data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
                data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>

    </div>
@endsection