<?php
include_once 'src/inc/db/function.php';
?>
<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <?php include_once "template_css.php"; ?>
   <!--  <title>資料服務</title> -->

    <style>
        .title-type {
            color: #053170;
            font-weight: bold;
            margin: 15px 10px 4px;
            position: relative;
            padding-left: 10px;
            /* 為左側線條留出空間 */
        }

        .title-type::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 3px;
            height: 14px;
            background-color: #053170;
            margin-top: 3px;
            /* 根據需求調整垂直位置 */
        }

        .data-title {
            /* font-weight: bold; */
            font-family: Microsoft JhengHei;
            font-size: 20px;
            font-weight: 700;
            /*  line-height: 26.6px;
            letter-spacing: 0.1em;
            text-align: left; */

        }

        .data-info {
            margin-bottom: 15px;
        }

        .data-badge {
            color: #0050AE;
            border: 1px solid;
        }

        .data-title1 {
            display: block;
            font-family: Microsoft JhengHei;
            font-size: 20px;
            font-weight: 700;
            text-decoration: none;
            /* 移除下劃線 */
            color: #333;
            cursor: pointer;
            transition: color 0.3s ease;
            /* 添加過渡效果 */
        }

        .data-title1:hover {
            color: #007bff;
            /* 鼠標懸停時變色 */
        }
    </style>
</head>

<body class="d-flex flex-column min-vh-100">
    <!--BEGIN HEADER-->
    <?php include_once "template_header.php"; ?>
    <!--END HEADER-->

    <!--BEGIN SIDEBAR-->
    <?php include_once "template_sidebar.php"; ?>
    <!--END SIDEBAR-->

    <main id="main" class="main">
        <div class="pagetitle d-flex  justify-content-between align-items-center">
            <nav >
                <ol class="breadcrumb">
                    <li class="breadcrumb-item "><a href="index.php"><i class="bi bi-house-door-fill"></i> 首頁</a></li>
                    <li class="breadcrumb-item active">資料服務</li>
                </ol>
            </nav>
            <span class="float: right;">
                <a href="#" class="btn btn-sm  btn-outline-primary"><i class="bi bi-arrow-90deg-left"></i> 回上一頁</a>
            </span>
        </div>
        <div class="row mb-3" style="background-color: #EAF5FF; height: 116px; border-radius: 8px; display: flex; flex-direction: column; justify-content: center;  text-align: left;">
            <div class="input-group mb-2" style="width: 50%;">
                <input type="text" name="member_id" class="form-control" placeholder="請輸入關鍵字搜尋...">
                <!--  <span class="input-group-text"></span> -->
                <button type="submit" class="input-group-text" title="Search"><i class="bi bi-search"></i></button>
            </div>
            <span style="margin-left: 1rem;">熱門關鍵字：OOO</span>
        </div>
        <section class="section">
            <div class="row ">
                <div class="col-md-2 card" style="min-width:200px;">
                    <div class="title-type">資料類別</div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item"><input type="checkbox" id="checkbox1" name="checkbox1" value="風力">&nbsp;氣象</li>
                        <li class="list-group-item"><input type="checkbox" id="checkbox3" name="checkbox2" value="波浪">&nbsp;波浪</li>
                        <li class="list-group-item"><input type="checkbox" id="checkbox3" name="checkbox3" value="波浪">&nbsp;洋流</li>
                        <li class="list-group-item"><input type="checkbox" id="checkbox3" name="checkbox4" value="波浪">&nbsp;地(震測)</li>
                    </ul>
                    <hr style="background-color: #CFCFCF;margin-bottom: 5px; ">
                    <div class="title-type">資料時間</div>
                    <div class=" form-group ">
                        <span>開始時間</span><br>
                        <div class="d-flex mb-2">
                            <select class="form-select" id="start" name="start" style="width:55%">
                                <option value="">年份</option>
                                <option value="2020">2020</option>
                                <option value="2021">2021</option>
                                <option value="2022">2022</option>
                                <option value="2023">2023</option>
                                <option value="2024">2024</option>
                            </select>
                            <select class="form-select" id="end" name="end" style="width:45%;min-width:80px;">
                                <option value="">月份</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                            </select>
                        </div>
                        <span>結束時間</span><br>
                        <div class="d-flex ">
                            <select class="form-select" id="start" name="start" style="width:55%">
                                <option value="">年份</option>
                                <option value="2020">2020</option>
                                <option value="2021">2021</option>
                                <option value="2022">2022</option>
                                <option value="2023">2023</option>
                                <option value="2024">2024</option>
                            </select>
                            <select class="form-select" id="end" name="end" style="width:45%;min-width:80px;">
                                <option value="">月份</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                            </select>
                        </div>
                    </div>
                    <hr style="background-color: #CFCFCF;margin-bottom: 5px; ">
                    <div class="title-type">資料格式</div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <input type="checkbox" id="checkbox1" name="checkbox1" value="CSV">&nbsp;CSV
                            </div>
                            <span>10</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <input type="checkbox" id="checkbox2" name="checkbox2" value="grib2">&nbsp;grib2
                            </div>
                            <span>2</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <input type="checkbox" id="checkbox3" name="checkbox3" value="SEG-Y">&nbsp;SEG-Y
                            </div>
                            <span>0</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <input type="checkbox" id="checkbox4" name="checkbox4" value="nc4">&nbsp;nc4
                            </div>
                            <span>5</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <input type="checkbox" id="checkbox5" name="checkbox5" value="NC">&nbsp;NC
                            </div>
                            <span>15</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <input type="checkbox" id="checkbox6" name="checkbox6" value="WRF">&nbsp;WRF
                            </div>
                            <span>20</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <input type="checkbox" id="checkbox7" name="checkbox7" value="STL">&nbsp;STL
                            </div>
                            <span>10</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <input type="checkbox" id="checkbox8" name="checkbox8" value="ZIP">&nbsp;ZIP
                            </div>
                            <span>0</span>
                        </li>
                    </ul>

                </div>
                <div class="col" style=" flex-grow: 1;">
                    <div class="row mb-3">
                        <div class="col-md-8 d-flex justify-content-start align-items-end">
                            <!--  <span style="font-weight: bold;">搜尋條件</span>
                            <span style="display: inline-block; background-color: white; border: 1px solid grey; color: grey; padding: 1px; border-radius: 4px;">海洋</span><br>
                            <br> -->                         
                            <span style=" margin-left:1rem;">共160筆</span>
                            <!-- 符合搜尋資料 -->
                        </div>
                        <div class="col-md-4 d-flex justify-content-end  align-right">
                            <select class="form-select-sm">
                                <option selected disabled>關聯</option>
                                <option value="latest_update">最新更新時間</option>
                                <option value="stroke_count_desc">首字筆畫多至少</option>
                                <option value="stroke_count_asc">首字筆畫少至多</option>
                                <option value="views_desc">瀏覽人數多至少</option>
                            </select>
                        </div>
                    </div>
                    <div class="card card-body">
                        <a href="DataList_in.php" class="data-title1">資料標題資料標題</a>
                        <p class="data-info">摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
                        <div class="row mb-2">
                            <div class="col-md-6">
                                <div class=" mb-1"><strong>資料編號：</strong>WD-20240401365</div>
                                <div class=" mb-1"><strong>資料提供單位：</strong>OOOO研究中心</div>
                                <div class=" mb-1"><strong>資料期間：</strong>2020-12 至 2021-05</div>
                                <div><strong>資料授權方式：</strong>依政府資料開放平臺使用規範</div>
                            </div>
                            <div class="col-md-6 ">
                                <p><i class="bi bi-eye-fill "></i><span class="me-4"> 10 </span><i class="bi bi-calendar-fill"></i> 2024-04-01 11:00更新</p>
                                <p>
                                    <span class="badge data-badge">CSV</span>
                                    <span class="badge data-badge">grib2</span>
                                </p>
                                <div class="d-flex justify-content-start align-items-end">
                                    <button class="btn btn-sm btn-secondary me-1">原始資料</button>
                                    <button class="btn btn-sm btn-secondary me-1">模組成果</button>
                                    <button class="btn btn-sm btn-secondary me-1">資料使用 / 模擬教學 </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card card-body">
                        <div class="data-title"><a href="DataList_in.php" class="data-title1">資料標題資料標題</a></div>
                        <p class="data-info">摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
                        <div class="row mb-2">
                            <div class="col-md-6">
                                <div class=" mb-1"><strong>資料編號：</strong>WD-20240401365</div>
                                <div class=" mb-1"><strong>資料提供單位：</strong>OOOO研究中心</div>
                                <div class=" mb-1"><strong>資料期間：</strong>2020</div>
                                <div><strong>資料授權方式：</strong>依政府資料開放平臺使用規範</div>
                            </div>
                            <div class="col-md-6 ">
                                <p><i class="bi bi-eye-fill "></i><span class="me-4"> 10 </span><i class="bi bi-calendar-fill"></i> 2024-04-01 11:00更新</p>
                                <p>

                                    <span class="badge data-badge">grib2</span>
                                </p>
                                <div class="d-flex justify-content-start align-items-end">
                                    <button class="btn btn-sm btn-secondary me-1">原始資料</button>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card card-body">
                        <div class="data-title">資料標題資料標題</div>
                        <p class="data-info">摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
                        <div class="row mb-2">
                            <div class="col-md-6">
                                <div class=" mb-1"><strong>資料編號：</strong>WD-20240401365</div>
                                <div class=" mb-1"><strong>資料提供單位：</strong>OOOO研究中心</div>
                                <div class=" mb-1"><strong>資料期間：</strong>2020-12 至 2021-05</div>
                                <div><strong>資料授權方式：</strong>依政府資料開放平臺使用規範</div>
                            </div>
                            <div class="col-md-6 ">
                                <p><i class="bi bi-eye-fill "></i><span class="me-4"> 10 </span><i class="bi bi-calendar-fill"></i> 2024-04-01 11:00更新</p>
                                <p>
                                    <span class="badge data-badge">STL</span>
                                </p>
                                <div class="d-flex justify-content-start align-items-end">
                                    <button class="btn btn-sm btn-secondary me-1">原始資料</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card card-body">
                        <div class="data-title">資料標題資料標題</div>
                        <p class="data-info">摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
                        <div class="row mb-2">
                            <div class="col-md-6">
                                <div class=" mb-1"><strong>資料編號：</strong>WD-20240401365</div>
                                <div class=" mb-1"><strong>資料提供單位：</strong>OOOO研究中心</div>
                                <div class=" mb-1"><strong>資料期間：</strong>2020-12 至 2021-05</div>
                                <div><strong>資料授權方式：</strong>依政府資料開放平臺使用規範</div>
                            </div>
                            <div class="col-md-6 ">
                                <p><i class="bi bi-eye-fill "></i><span class="me-4"> 10 </span><i class="bi bi-calendar-fill"></i> 2024-04-01 11:00更新</p>
                                <p>
                                    <span class="badge data-badge">STL</span>
                                </p>
                                <div class="d-flex justify-content-start align-items-end">
                                    <button class="btn btn-sm btn-secondary me-1">模組成果</button>
                                    <button class="btn btn-sm btn-secondary me-1">資料使用 / 模擬教學 </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--  <div style="margin-top: 10px;background-color: #ffffff; height: 220px; border-radius: 8px; margin-right: 5px; display: flex; flex-direction: column; box-shadow: 0 2px 4px rgba(0,0,0,0.1); text-align: left; cursor: pointer;" onclick="window.location.href='DataList_in.php'">
                        <div style="margin-left: 15px;margin-top: 15px;margin-right: 15px;">
                            <span style="font-weight: bold;">最新研究成果公佈</span><br>
                            <span style="display: inline-block; ">最新研究成果公佈最新研究成果公佈最新研究成果公佈最新研究成果公佈最新研究成果公佈最新研究成果公佈最新研究成果公佈最新研究成果公佈最新研究成果公佈最新研究成果公佈最新研究成果公佈最新研究成果公佈最新研究成果公佈</span>
                        </div>
                        <div class="row" tyle="margin-left: 15px;margin-top: 15px;margin-right: 15px;">
                            <div class="col-md-5" style="margin-left: 15px;margin-top: 15px;margin-right: 15px;">
                                <div class="col-md-8">
                                    <span>資料編號：WD-20240401365</span><br>
                                </div>
                                <div class="col-md-8">
                                    <span>資料來源：oooo研究中心</span><br>
                                </div>
                                <div class="col-md-8">
                                    <span>資料年份：2012-12 至 2021-05</span><br>
                                </div>
                                <div class="col-md-12">
                                    <span>資料授權樣式：依政府資料開放平臺使用規範</span>
                                </div>
                            </div>

                            <div class="col-md-6" style="margin-left: 15px;margin-top: 15px;margin-right: 15px;">
                                <span> 👁️‍🗨️10 📅 2024/04/04 11:00 更新</span><br>
                                <span style="display: inline-block; background-color: white; border: 1px solid grey; color: grey; padding: 5px; border-radius: 4px;">CSV</span><br>
                                <button style="margin-top: 5px;background-color: #4d4d4d; border: 1px solid grey; color: white; padding: 5px 10px; border-radius: 4px; cursor: pointer;">原始資料</button>
                                <button style="margin-top: 5px;background-color: #4d4d4d; border: 1px solid grey; color: white; padding: 5px 10px; border-radius: 4px; cursor: pointer;">模擬成果</button>
                                <button style="margin-top: 5px;background-color: #4d4d4d; border: 1px solid grey; color: white; padding: 5px 10px; border-radius: 4px; cursor: pointer;">資料使用/模擬教學</button>

                            </div>
                        </div>
                    </div> -->


                    <div style="display: flex; justify-content: center; align-items: center; margin-top: 20px;">
                        共20頁 每頁10筆
                        <span style="background-color: #CDCDCD; padding: 5px 10px; margin: 0 5px; border-radius: 25px;">1</span>
                        <span style="padding: 5px 10px; margin: 0 5px; cursor: pointer;">2</span>
                        <span style="padding: 5px 10px; margin: 0 5px; cursor: pointer;">3</span>
                        <span style="padding: 5px 10px; margin: 0 5px; cursor: pointer;">4</span>
                        <span style="padding: 5px 10px; margin: 0 5px; cursor: pointer;">...</span>
                        <span style="padding: 5px 10px; margin: 0 5px; cursor: pointer;">&gt;</span>
                    </div>
                </div>

            </div>

        </section>

    </main>
   <!--  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
 -->
    <?php include_once "template_footer.php"; ?>
    <script>
        showSidebar("sidebar", "DataList");
    </script>



</body>


</html>