@extends('layouts.work')

@section('title', '技術工具 - 經濟部產業發展署工業安全網站')

@section('styles')
    <link href="{{ asset('css/tools.css') }}?d=20250408" rel="stylesheet">
    <link href="{{ asset('css/sm_tables.css') }}" rel="stylesheet">
    <style type="text/css">
        @media screen and (max-width: 992px) {
            .bg-bulletin {
                padding: 11px;
            }
        }
    </style> 
@endsection

@section('content')
<div class='container-fluid position-relative'>
    
    {{-- 網頁版 --}}
    <div class="link-event">
        <!-- <hr size="8px" align="center" width="100%" color="black"> -->

        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mt-2">
                <li class="breadcrumb-item"><a class="dynamic-link" href="/">首頁</a></li>
                <li class="breadcrumb-item active" aria-current="page">技術工具</li>
            </ol>
        </nav>

        <a href="#C" class='sr-only-main' accesskey="C" name="C" title="主要內容區塊">:::</a>
    </div>
       
    <div class='row'>
        <h2>
            <picture>
                <source srcset="{{ asset('img/sm/手機版banner_技術工具點陣化.svg') }}" media="(max-width: 992px)">
                <img src="{{ asset('img/技術工具/經濟部產業發展署元件_banner_技術工具.png') }}" alt="技術工具" title="技術工具" style="width:100%;">
            </picture>
        </h2>
    </div>

    {{-- 手機版 --}}
    <div class="titlelink">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb m-0">
                <li class="breadcrumb-item"><a class="dynamic-link" href="/">首頁</a></li>
                <li class="breadcrumb-item active" aria-current="page">技術工具</li>
            </ol>
        </nav>
    </div>

    <filter-board :tpage={{ $tpage }}></filter-board>

    <noscript>
        <div class='text-center'>
            <p>此網頁需要支援 JavaScript 才能正確運行，請先至你的瀏覽器設定中開啟 JavaScript。</p>
        </div>
    </noscript>
</div>
@endsection

@section('script')
    <script src="{{ asset('js/togglebtn.js')}}"></script>
@endsection