feat: implement Hotel Service Wi-Fi intro page with Swiper slider and HTML content display

2025-06-20 02:04:49 +08:00
parent d865fca058
commit 53b498d881
42 changed files with 1562 additions and 283 deletions
--- a/03_source/mobile/src/api/getHtmlContent.tsx
+++ b/03_source/mobile/src/api/getHtmlContent.tsx
@@ -0,0 +1,119 @@
+import React from 'react';
+
+const testHtml = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    .asscent-color1 { color: #800000 }
+    .text-deep-grey {color: rgb(0,0,0)}
+    .text-grey {color: rgb(0,0,0, 0.6)}
+    .text-smoothing {opacity: 0.8}
+    h1 { font-size: 1.2rem}
+    h2 { font-size: 1.1rem}
+    h3 { font-size: 1rem}
+    h4 { font-size: 0.8rem}
+    h5 { font-size: 0.7rem}
+    h6 { font-size: 0.6rem}
+
+    .quote {
+      background-color: rgba(231, 76, 60, 0.05);
+      padding: 1rem; border-radius: 5px;
+      border-left: 5px solid #800000;
+      width: 90%;
+      margin: 1rem auto;
+      line-height:2rem;
+    }
+  </style>
+</head>
+
+<body style="padding: 0; margin: 0; box-sizing: border-box;" class="text-smoothing">
+  <div class="text-grey" style="font-size: 0.8rem; text-align: center">
+    全館Wi-Fiをご利用いただけます。（無料）
+  </div>
+
+  <div class="quote">
+    <div>■ ID: hello_user</div>
+    <div>■ Password: my-best-password</div>
+  </div>
+
+<h3 class="asscent-color1">HELLOWORLD HOTELでは、</h3>
+<p>全客室・宴会場の一部に</p>
+<p>有線LAN接続によるインターネット</p>
+<p>接続環境を開業時より</p>
+<p>導入しておりましたが、</p>
+<p>さらなる利便性向上を図るため、</p>
+<p>このたび、ロビー・客室フロアに無線LAN</p>
+<p>アクセスポイントを設置し、</p>
+<p>各客室内でもWi-Fi接続による</p>
+<p>インターネットを利用できる</p>
+<p>環境を構築いたしました。</p>
+<p>より快適なWi-Fi接続サービスによる</p>
+<p>無料のインターネット接続を</p>
+<p>ご利用いただけます。</p>
+
+
+<h4 class="asscent-color1">■ ご利用いただける端末</h4>
+<p>・LAN / 無線LAN（Wi-Fi規格）アダプタ内蔵PC</p>
+<p>・WindowsXP以上、Mac OSX以上のOSを搭載したPC</p>
+<p>・無線LAN（Wi-Fi規格）対応のiOS機器（iPhone・iPad等）</p>
+<p>・無線LAN（Wi-Fi規格）のAndroid機器（スマートフォン・タブレットPC等）</p>
+
+<h4 class="asscent-color1">■ Wi-Fi接続サービスの規格・接続</h4>
+<p>IEEE802.11 n/b/gの規格に準拠しており、同時使用が可能です。</p>
+<p>ネットアクセスポイントにつきましては、各ホテルSSIDをフロントにてご案内いたします。</p>
+
+<h4 class="asscent-color1">■ 各ホテル内でインターネット接続サービスが可能なエリア</h4>
+<p>・全客室内（有線LAN・Wi-Fi接続）</p>
+<p>・フロント前ロビー（Wi-Fi接続）</p>
+<p>・各宴会場（有線LAN接続）</p>
+
+<h4 class="asscent-color1">■ ご注意</h4>
+<p>※有線・無線LANを通してインターネット接続サービスを無料でご利用いただけます。</p>
+<p>※Wi-Fi接続サービスは、ホテルのSSIDが発出されている場所でご利用になれますが、場所により電波の届かないエリア、もしくは電波が弱くご利用が難しい場合もあります。</p>
+<p>※ご利用に際してのセキュリティ設定は、お客様ご自身の責任において行っていただくようにお願いいたします。</p>
+<p>※本サービスのご利用・予期せぬ停止や不良が原因となり発生した損失や損害については、ホテルは一切の責任は負いかねますので、予めご了承ください。</p>
+<p>※ネット対戦ゲーム、大容量ファイルの送受信など、回線を長時間占有してのご利用は、他のお客様のご迷惑となりますので、ご遠慮ください。</p>
+
+<h1>待進變果沒致友環健問水法代人苦天。📅📍🎻</h1>
+<h2>待進變果沒致友環健問水法代人苦天。📅📍🎻</h2>
+<h3>待進變果沒致友環健問水法代人苦天。📅📍🎻</h3>
+<h4>待進變果沒致友環健問水法代人苦天。📅📍🎻</h4>
+<h5>待進變果沒致友環健問水法代人苦天。📅📍🎻</h5>
+<h6>待進變果沒致友環健問水法代人苦天。📅📍🎻</h6>
+
+<p>
+  業立臺四即文善公作有往，等怕準命小電個。
+  査今聞光洋後化外財強主職。
+  🌲🔯🍣💵 🐪👫🐈📅📍🎻💼 🐣🍖🐻📩🍨. 🎇👬💨
+</p>
+
+
+<h1>Lorem Ipsum: Usage, Common examples, Translation, Variants and technical information📅📍🎻</h1>
+<h2>Lorem Ipsum: Usage, Common examples, Translation, Variants and technical information📅📍🎻</h2>
+<h3>Lorem Ipsum: Usage, Common examples, Translation, Variants and technical information📅📍🎻</h3>
+<h4>Lorem Ipsum: Usage, Common examples, Translation, Variants and technical information📅📍🎻</h4>
+<h5>Lorem Ipsum: Usage, Common examples, Translation, Variants and technical information📅📍🎻</h5>
+<h6>Lorem Ipsum: Usage, Common examples, Translation, Variants and technical information📅📍🎻</h6>
+
+<p>
+  Lorem Ipsum: Usage, Common examples, Translation, Variants and technical information
+  Essay: Lorem Ipsum--when, and when not to use it
+  🌲🔯🍣💵 🐪👫🐈📅📍🎻💼 🐣🍖🐻📩🍨. 🎇👬💨
+</p>
+
+<p>📤🏮👀🍮 💃👪👦🌀🌶📈 🍵📊💓🐧🎢👃 🍕🌛🔎🔋🎣🍃 🎡👩📔🍈💭 🎣👅🔽📟📑💋</p>
+
+</body>
+</html>`.trim();
+
+function getHtmlContent(): Promise<string> {
+  return new Promise((res, rej) => {
+    res(testHtml);
+  });
+}
+
+export default getHtmlContent;