first commit

resources/views/health_literacy.blade.php

@@ -0,0 +1,117 @@
+@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>健康識能有獎徵答活動</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