@extends('layouts.app')

@section('content')

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8 main-area">
            <h1 style="text-align: center;">
                健康知識學起來 輕鬆領取桃園幣
            </h1>
        </div>
    </div>
    <div style="height:20px;">&nbsp;</div>

    <div class="row justify-content-center">
        <div class="col-md-8 main-area">
            <h3 style="color: brown">【健康知識學起來 輕鬆領取桃園幣活動額滿公告】</h3>
            <p>
                感謝各位的熱情參與，本項活動反應熱烈，目前兌換名額已全數額滿！敬請持續關注後續活動資訊，謝謝您的支持與配合！
            </p>
            <p>&nbsp;</p>
            
            <h3>健康識能有獎徵答活動</h3>
            <p>
                為提升市民慢性病防治識能， 
                透過線上答題互動學習正確衛教資訊，
                全數答對即可獲得桃園幣！
            </p>
            <h3>一、活動規則</h3>
            
            <ol>
                <li>
                    活動期間<br>
                    114 年 6 月 12 日至 9 月 30 日（名額上限為 5,000 名）。
                </li>
                <li>
                    參加對象<br>
                    持有桃園市民卡的民眾。
                </li>
                <li>
                    參加方式<br>
                    步驟一｜進入活動平台指定頁面（串接至桃園市民卡）。<br>
                    步驟二｜完成5題衛教問答。<br>
                    步驟三｜答題次數不限，直到全數答對為止。
                </li>
                <li>
                    活動好禮<br>
                    全數答對者可獲得50點桃園幣（限額5,000名）。
                </li>
                <li>
                    活動提醒<br>
                    •	同一市民卡僅限兌換一次獎勵。<br>
                    •	得獎者名單將公布於活動平台，桃園幣將自動匯入 APP 帳戶。
                </li>
            </ol>

            <h3>二、注意事項</h3>
            <ol>
                <li>
                    桃園幣將自動匯入帳號，同一帳號僅限<span style="color:red;">兌換一次</span>獎勵。
                </li>
                <li>
                    活動<span style="color:red;">結束</span>或<span style="color:red;">額滿</span>時，
                    答題<span style="color:red;">入口將自動關閉</span>。
                </li>
            </ol>
            <p>&nbsp;</p>
            <a class="btn btn-success" href="{{asset('assets/images/health_literacy_comic_01.jpg')}}" target="_blank">下載懶人包(另開視窗)</a>
            <a class="btn btn-success" href="{{asset('assets/images/health_literacy_intro_01.jpg')}}" target="_blank">下載簡章(另開視窗)</a>
            
        </div>
    </div>
    <div>&nbsp;</div>
    <div class="row justify-content-center">
        <div class="col-md-8 main-area">
            <h3 style="text-align: center;">
                活動參加辦法
            </h3>
            <h3 style="text-align: center;">
                第一步 - 下載桃園市民卡APP
            </h3>
            <h3 style="text-align: center;">
                <img src="{{asset('assets/images/app_ios.png')}}" height="36" />
                <img src="{{asset('assets/images/app_aos.png')}}" height="36" />                
            </h3>
            <h3 style="text-align: center;">
                <img src="{{asset('assets/images/TYAPP-Download-QRcode.png')}}" height="150" />
            </h3>
            <h3 style="text-align: center;">
                第二步 - 註冊桃園市民卡APP會員
            </h3>
            <h3 style="text-align: center;">
                <img src="{{asset('assets/images/TYAPP-Reg-Info.jpg')}}" height="150" />
            </h3>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" id="staticBackdrop-btn-close" class="btn-close" data-bs-dismiss="modal" aria-label="關閉"></button>
        <label for="staticBackdrop-btn-close">
            <img src="{{asset('assets/images/health_literacy_comic_01.jpg')}}" width="100%">
        </label>
        
      </div>
    </div>
  </div>
</div>

@endsection

@section('script')
<script>
    $(document).ready(function(){
        $('#staticBackdrop').modal('show');
        
    });
</script>
@endsection