重构首页，增加预约查询、价格表、联系我们页面

application/config/routes.php

@@ -51,7 +51,7 @@
 
 require_once __DIR__ . '/../helpers/routes_helper.php';
 
-$route['default_controller'] = 'booking';
+$route['default_controller'] = 'home';
 
 $route['404_override'] = '';
 

application/controllers/Home.php

@@ -0,0 +1,55 @@
+<?php defined('BASEPATH') or exit('No direct script access allowed');
+
+/**
+ * Home Page controller.
+ *
+ * @package Controllers
+ */
+class Home extends EA_Controller
+{
+    /**
+     * Render the booking page.
+     *
+     * This method creates the appointment book wizard.
+     */
+    public function index(): void
+    {
+        if (!is_app_installed()) {
+            redirect('installation');
+
+            return;
+        }
+
+        $company_name = setting('company_name');
+        $company_logo = setting('company_logo');
+        $company_color = setting('company_color');
+        $google_analytics_code = setting('google_analytics_code');
+        $matomo_analytics_url = setting('matomo_analytics_url');
+        $matomo_analytics_site_id = setting('matomo_analytics_site_id');
+        $display_login_button = setting('display_login_button');
+        $theme = request('theme', setting('theme', 'default'));
+
+        if (empty($theme) || !file_exists(__DIR__ . '/../../assets/css/themes/' . $theme . '.min.css')) {
+            $theme = 'default';
+        }    
+
+        script_vars([
+            'future_booking_limit' => setting('future_booking_limit'),
+            'default_language' => setting('default_language'),
+        ]);
+
+        html_vars([
+            'theme' => $theme,
+            'company_name' => $company_name,
+            'company_logo' => $company_logo,
+            'company_color' => $company_color === '#ffffff' ? '' : $company_color,
+            'display_login_button' => $display_login_button,
+            'google_analytics_code' => $google_analytics_code,
+            'matomo_analytics_url' => $matomo_analytics_url,
+            'matomo_analytics_site_id' => $matomo_analytics_site_id,
+        ]);
+
+        $this->load->view('pages/home');
+    }
+
+}

application/controllers/Home_contact.php

@@ -0,0 +1,55 @@
+<?php defined('BASEPATH') or exit('No direct script access allowed');
+
+/**
+ * Home Page controller.
+ *
+ * @package Controllers
+ */
+class Home_contact extends EA_Controller
+{
+    /**
+     * Render the booking page.
+     *
+     * This method creates the appointment book wizard.
+     */
+    public function index(): void
+    {
+        if (!is_app_installed()) {
+            redirect('installation');
+
+            return;
+        }
+
+        $company_name = setting('company_name');
+        $company_logo = setting('company_logo');
+        $company_color = setting('company_color');
+        $google_analytics_code = setting('google_analytics_code');
+        $matomo_analytics_url = setting('matomo_analytics_url');
+        $matomo_analytics_site_id = setting('matomo_analytics_site_id');
+        $display_login_button = setting('display_login_button');
+        $theme = request('theme', setting('theme', 'default'));
+
+        if (empty($theme) || !file_exists(__DIR__ . '/../../assets/css/themes/' . $theme . '.min.css')) {
+            $theme = 'default';
+        }    
+
+        script_vars([
+            'future_booking_limit' => setting('future_booking_limit'),
+            'default_language' => setting('default_language'),
+        ]);
+
+        html_vars([
+            'theme' => $theme,
+            'company_name' => $company_name,
+            'company_logo' => $company_logo,
+            'company_color' => $company_color === '#ffffff' ? '' : $company_color,
+            'display_login_button' => $display_login_button,
+            'google_analytics_code' => $google_analytics_code,
+            'matomo_analytics_url' => $matomo_analytics_url,
+            'matomo_analytics_site_id' => $matomo_analytics_site_id,
+        ]);
+
+        $this->load->view('pages/home_contact');
+    }
+
+}

application/controllers/Home_price.php

@@ -0,0 +1,55 @@
+<?php defined('BASEPATH') or exit('No direct script access allowed');
+
+/**
+ * Home Page controller.
+ *
+ * @package Controllers
+ */
+class Home_price extends EA_Controller
+{
+    /**
+     * Render the booking page.
+     *
+     * This method creates the appointment book wizard.
+     */
+    public function index(): void
+    {
+        if (!is_app_installed()) {
+            redirect('installation');
+
+            return;
+        }
+
+        $company_name = setting('company_name');
+        $company_logo = setting('company_logo');
+        $company_color = setting('company_color');
+        $google_analytics_code = setting('google_analytics_code');
+        $matomo_analytics_url = setting('matomo_analytics_url');
+        $matomo_analytics_site_id = setting('matomo_analytics_site_id');
+        $display_login_button = setting('display_login_button');
+        $theme = request('theme', setting('theme', 'default'));
+
+        if (empty($theme) || !file_exists(__DIR__ . '/../../assets/css/themes/' . $theme . '.min.css')) {
+            $theme = 'default';
+        }    
+
+        script_vars([
+            'future_booking_limit' => setting('future_booking_limit'),
+            'default_language' => setting('default_language'),
+        ]);
+
+        html_vars([
+            'theme' => $theme,
+            'company_name' => $company_name,
+            'company_logo' => $company_logo,
+            'company_color' => $company_color === '#ffffff' ? '' : $company_color,
+            'display_login_button' => $display_login_button,
+            'google_analytics_code' => $google_analytics_code,
+            'matomo_analytics_url' => $matomo_analytics_url,
+            'matomo_analytics_site_id' => $matomo_analytics_site_id,
+        ]);
+
+        $this->load->view('pages/home_price');
+    }
+
+}

application/controllers/Home_search.php

@@ -0,0 +1,55 @@
+<?php defined('BASEPATH') or exit('No direct script access allowed');
+
+/**
+ * Home Page controller.
+ *
+ * @package Controllers
+ */
+class Home_search extends EA_Controller
+{
+    /**
+     * Render the booking page.
+     *
+     * This method creates the appointment book wizard.
+     */
+    public function index(): void
+    {
+        if (!is_app_installed()) {
+            redirect('installation');
+
+            return;
+        }
+
+        $company_name = setting('company_name');
+        $company_logo = setting('company_logo');
+        $company_color = setting('company_color');
+        $google_analytics_code = setting('google_analytics_code');
+        $matomo_analytics_url = setting('matomo_analytics_url');
+        $matomo_analytics_site_id = setting('matomo_analytics_site_id');
+        $display_login_button = setting('display_login_button');
+        $theme = request('theme', setting('theme', 'default'));
+
+        if (empty($theme) || !file_exists(__DIR__ . '/../../assets/css/themes/' . $theme . '.min.css')) {
+            $theme = 'default';
+        }    
+
+        script_vars([
+            'future_booking_limit' => setting('future_booking_limit'),
+            'default_language' => setting('default_language'),
+        ]);
+
+        html_vars([
+            'theme' => $theme,
+            'company_name' => $company_name,
+            'company_logo' => $company_logo,
+            'company_color' => $company_color === '#ffffff' ? '' : $company_color,
+            'display_login_button' => $display_login_button,
+            'google_analytics_code' => $google_analytics_code,
+            'matomo_analytics_url' => $matomo_analytics_url,
+            'matomo_analytics_site_id' => $matomo_analytics_site_id,
+        ]);
+
+        $this->load->view('pages/home_search');
+    }
+
+}

application/language/Chinese(Simplified)/translations_lang.php

@@ -483,4 +483,12 @@ $lang['fields'] = '字段';
 $lang['invalid_credentials_provided'] = '提供的凭证无效，请重试。';
 $lang['calendar_url'] = '日历 URL';
 $lang['please_select'] = '请选择';
+
+//2024-08-07
+$lang['home_appointment_button'] = '马上预约';
+$lang['home_search_button'] = '预约查询';
+$lang['home_price_button'] = '价格表';
+$lang['home_contact_button'] = '联系我们';
+$lang['please_select_service'] = '请选择(必选)';
+
 // End

application/language/Chinese(Traditional)/translations_lang.php

@@ -483,4 +483,11 @@ $lang['fields'] = '字段';
 $lang['invalid_credentials_provided'] = '提供的憑證無效，請重試。 ';
 $lang['calendar_url'] = '日曆 URL';
 $lang['please_select'] = '請選擇';
+
+//2024-08-07
+$lang['home_appointment_button'] = '馬上預約';
+$lang['home_search_button'] = '預約查詢';
+$lang['home_price_button'] = '價格表';
+$lang['home_contact_button'] = '聯絡我們';
+$lang['please_select_service'] = '請選擇(必填)';
 // End

application/language/English/translations_lang.php

@@ -483,4 +483,11 @@ $lang['fields'] = 'Fields';
 $lang['invalid_credentials_provided'] = 'Invalid credentials provided, please try again.';
 $lang['calendar_url'] = 'Calendar URL';
 $lang['please_select'] = 'Please Select';
+
+//2024-08-07
+$lang['home_appointment_button'] = 'Book Now';
+$lang['home_search_button'] = 'Enquiry';
+$lang['home_price_button'] = 'Price List';
+$lang['home_contact_button'] = 'Contact Us';
+$lang['please_select_service'] = 'Please Select(*)';
 // End

application/views/components/booking_header.php

@@ -8,7 +8,10 @@
 
 <div id="header">
     <div id="company-name">
-        <img src="<?= vars('company_logo') ?: base_url('assets/img/logo.png') ?>" alt="logo" id="company-logo">
+
+        <a href="<?= site_url('/') ?>">
+            <img src="<?= vars('company_logo') ?: base_url('assets/img/logo.png') ?>" alt="logo" id="company-logo">
+        </a>
 
         <span>
             <?= e($company_name) ?>

application/views/components/booking_info_step.php

@@ -54,19 +54,6 @@
                     </div>
                 <?php endif; ?>
 
-                <?php if ($display_email): ?>
-                    <div class="mb-3">
-                        <label for="email" class="form-label">
-                            <?= lang('email') ?>
-                            <?php if ($require_email): ?>
-                                <span class="text-danger">*</span>
-                            <?php endif; ?>
-                        </label>
-                        <input type="text" id="email"
-                               class="<?= $require_email ? 'required' : '' ?> form-control" maxlength="120"/>
-                    </div>
-                <?php endif; ?>
-
                 <?php if ($display_phone_number): ?>
                     <div class="mb-3">
                         <label for="phone-number" class="form-label">
@@ -80,6 +67,19 @@
                     </div>
                 <?php endif; ?>
 
+                <?php if ($display_email): ?>
+                    <div class="mb-3">
+                        <label for="email" class="form-label">
+                            <?= lang('email') ?>
+                            <?php if ($require_email): ?>
+                                <span class="text-danger">*</span>
+                            <?php endif; ?>
+                        </label>
+                        <input type="text" id="email"
+                               class="<?= $require_email ? 'required' : '' ?> form-control" maxlength="120"/>
+                    </div>
+                <?php endif; ?>
+
                 <?php slot('info_first_column'); ?>
 
                 <?php component('custom_fields'); ?>

application/views/components/booking_type_step.php

@@ -18,8 +18,8 @@
                     </label>
 
                     <select id="select-service" class="form-select">
-                        <option value="">
+                        <option value="22">
-                            <?= lang('please_select') ?>
+                            <?= lang('please_select') ?> (預設：其它)
                         </option>
                         <?php
                         // Group services by category, only if there is at least one service with a parent category.
@@ -87,7 +87,7 @@
 
                     <select id="select-provider" class="form-select">
                         <option value="">
-                            <?= lang('please_select') ?>
+                            <?= lang('please_select_service') ?>
                         </option>
                     </select>
                 </div>

application/views/components/home_contact_header.php

@@ -0,0 +1,28 @@
+<?php
+/**
+ * Local variables.
+ *
+ * @var string $company_name
+ */
+?>
+
+<div id="header">
+    <div id="company-name">
+
+        <a href="<?= site_url('/') ?>">
+            <img src="<?= vars('company_logo') ?: base_url('assets/img/logo.png') ?>" alt="logo" id="company-logo">
+        </a>
+
+        <span>
+            <?= e($company_name) ?>
+        </span>
+
+        <div class="d-flex justify-content-center justify-content-md-start">
+            <span class="display-selected-service me-1 pe-1">
+                香港現代中醫中藥協會
+            </span>
+        </div>
+
+    </div>
+</div>
+

application/views/components/home_header.php

@@ -0,0 +1,27 @@
+<?php
+/**
+ * Local variables.
+ *
+ * @var string $company_name
+ */
+?>
+
+<div id="header">
+    <div id="company-name">
+
+        <a href="<?= site_url('/') ?>">
+            <img src="<?= vars('company_logo') ?: base_url('assets/img/logo.png') ?>" alt="logo" id="company-logo">
+        </a>
+
+        <span>
+            <?= e($company_name) ?>
+        </span>
+
+        <div class="d-flex justify-content-center justify-content-md-start">
+            <span class="display-selected-service me-1 pe-1">
+                香港現代中醫中藥協會
+            </span>
+        </div>
+
+    </div>
+</div>

application/views/components/home_price_header.php

@@ -0,0 +1,27 @@
+<?php
+/**
+ * Local variables.
+ *
+ * @var string $company_name
+ */
+?>
+
+<div id="header">
+    <div id="company-name">
+
+        <a href="<?= site_url('/') ?>">
+            <img src="<?= vars('company_logo') ?: base_url('assets/img/logo.png') ?>" alt="logo" id="company-logo">
+        </a>
+
+        <span>
+            <?= e($company_name) ?>
+        </span>
+
+        <div class="d-flex justify-content-center justify-content-md-start">
+            <span class="display-selected-service me-1 pe-1">
+                香港現代中醫中藥協會
+            </span>
+        </div>
+
+    </div>
+</div>

application/views/components/home_search_header.php

@@ -0,0 +1,28 @@
+<?php
+/**
+ * Local variables.
+ *
+ * @var string $company_name
+ */
+?>
+
+<div id="header">
+    <div id="company-name">
+
+        <a href="<?= site_url('/') ?>">
+            <img src="<?= vars('company_logo') ?: base_url('assets/img/logo.png') ?>" alt="logo" id="company-logo">
+        </a>
+
+        <span>
+            <?= e($company_name) ?>
+        </span>
+
+        <div class="d-flex justify-content-center justify-content-md-start">
+            <span class="display-selected-service me-1 pe-1">
+                香港現代中醫中藥協會
+            </span>
+        </div>
+
+    </div>
+</div>
+

application/views/layouts/home_contact_layout.php

@@ -0,0 +1,121 @@
+<!doctype html>
+<html lang="<?= config('language_code') ?>">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <meta name="theme-color" content="#35A768">
+    <meta name="google" content="notranslate">
+
+    <meta property="og:title" content="<?= lang('page_title') . ' ' . vars('company_name') ?> | TFE Group"/>
+    <meta property="og:url" content="<?= base_url() ?>">
+    <meta property="og:image" content="<?= base_url('assets/img/social-card.png') ?>"/>
+    <meta property="og:type" content="website">
+
+    <?php slot('meta'); ?>
+
+    <title><?= lang('page_title') . ' ' . vars('company_name') ?> | TFE Group</title>
+
+    <link rel="icon" type="image/x-icon" href="<?= asset_url('assets/img/favicon.ico') ?>">
+    <link rel="icon" sizes="192x192" href="<?= asset_url('assets/img/logo.png') ?>">
+
+    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/cookieconsent/cookieconsent.min.css') ?>">
+    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/flatpickr/flatpickr.min.css') ?>">
+    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/flatpickr/material_green.min.css') ?>">
+    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/themes/' . vars('theme') . '.css') ?>">
+    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/general.css') ?>">
+    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/layouts/booking_layout.css') ?>">
+
+    <?php component('company_color_style', ['company_color' => vars('company_color')]); ?>
+
+    <?php slot('styles'); ?>
+
+    <style>
+        .contact-info {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            margin-top: 20px;
+            min-height: 580px;
+        }
+        .contact-info p {
+            margin: 5px 0;
+        }
+    </style>
+</head>
+
+<body>
+<div id="main" class="container">
+    <div class="row wrapper">
+        <div id="book-appointment-wizard" class="col-12 col-lg-10 col-xl-8 col-xxl-7">
+            <?php component('home_header', [
+                'company_name' => vars('company_name'),
+                'company_logo' => vars('company_logo'),
+            ]); ?>
+
+            <div class="contact-info">
+                <p>盈啟中醫</p>
+                <p>地址: 荃灣荃豐中心商場1樓B83號鋪 (荃灣站B2出口, 天橋層)</p>
+                <p>電話: 5592-4328</p>
+                <p>
+                    <img src="<?= asset_url('assets/img/whatsapp-qr-code.png') ?>" alt="WhatsApp QR Code" style="width: 150px;">
+                </p>
+            </div>
+
+            <?php component('booking_footer', ['display_login_button' => vars('display_login_button')]); ?>
+        </div>
+    </div>
+</div>
+
+<?php if (vars('display_cookie_notice') === '1'): ?>
+    <?php component('cookie_notice_modal', ['cookie_notice_content' => vars('cookie_notice_content')]); ?>
+<?php endif; ?>
+
+<?php if (vars('display_terms_and_conditions') === '1'): ?>
+    <?php component('terms_and_conditions_modal', [
+        'terms_and_conditions_content' => vars('terms_and_conditions_content'),
+    ]); ?>
+<?php endif; ?>
+
+<?php if (vars('display_privacy_policy') === '1'): ?>
+    <?php component('privacy_policy_modal', ['privacy_policy_content' => vars('privacy_policy_content')]); ?>
+<?php endif; ?>
+
+<script src="<?= asset_url('assets/vendor/jquery/jquery.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/cookieconsent/cookieconsent.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/@popperjs-core/popper.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/bootstrap/bootstrap.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/moment/moment.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/moment-timezone/moment-timezone-with-data.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/@fortawesome-fontawesome-free/fontawesome.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/@fortawesome-fontawesome-free/solid.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/tippy.js/tippy-bundle.umd.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/flatpickr/flatpickr.min.js') ?>"></script>
+
+<script src="<?= asset_url('assets/js/app.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/date.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/file.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/http.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/lang.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/message.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/string.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/url.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/validation.js') ?>"></script>
+<script src="<?= asset_url('assets/js/layouts/booking_layout.js') ?>"></script>
+<script src="<?= asset_url('assets/js/http/localization_http_client.js') ?>"></script>
+
+<?php component('js_vars_script'); ?>
+<?php component('js_lang_script'); ?>
+
+<?php component('google_analytics_script', ['google_analytics_code' => vars('google_analytics_code')]); ?>
+<?php component('matomo_analytics_script', [
+    'matomo_analytics_url' => vars('matomo_analytics_url'),
+    'matomo_analytics_site_id' => vars('matomo_analytics_site_id'),
+]); ?>
+
+<?php slot('scripts'); ?>
+
+</body>
+</html>

application/views/layouts/home_layout.php

@@ -0,0 +1,174 @@
+<!doctype html>
+<html lang="<?= config('language_code') ?>">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <meta name="theme-color" content="#35A768">
+    <meta name="google" content="notranslate">
+
+    <meta property="og:title" content="<?= lang('page_title') . ' ' . vars('company_name') ?> | TFE Group"/>
+    <meta property="og:url" content="<?= base_url() ?>">
+    <meta property="og:image" content="<?= base_url('assets/img/social-card.png') ?>"/>
+    <meta property="og:type" content="website">
+
+    <?php slot('meta'); ?>
+
+    <title><?= lang('page_title') . ' ' . vars('company_name') ?> | TFE Group</title>
+
+    <link rel="icon" type="image/x-icon" href="<?= asset_url('assets/img/favicon.ico') ?>">
+    <link rel="icon" sizes="192x192" href="<?= asset_url('assets/img/logo.png') ?>">
+
+    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/cookieconsent/cookieconsent.min.css') ?>">
+    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/flatpickr/flatpickr.min.css') ?>">
+    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/flatpickr/material_green.min.css') ?>">
+    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/themes/' . vars('theme') . '.css') ?>">
+    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/general.css') ?>">
+    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/layouts/booking_layout.css') ?>">
+
+    <?php component('company_color_style', ['company_color' => vars('company_color')]); ?>
+
+    <?php slot('styles'); ?>
+
+    <style>
+        .icon-container-wrapper {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            /* height: 72.8vh; This makes the container fill the full height of the viewport */
+            flex-direction: column;
+            min-height: 589px; /* This ensures the container has a minimum height */
+        }
+        .icon-container {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-around;
+            width: 100%; /* Ensure it takes the full width available */
+            max-width: 600px; /* Optional: limit the max width */
+        }
+        .icon-button {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            text-align: center;
+            margin: 20px;
+            padding: 20px;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            width: 150px;
+            height: 150px;
+            transition: background-color 0.3s;
+        }
+        .icon-button i {
+            font-size: 56px;
+            margin-bottom: 20px;
+        }
+        .icon-button span {
+            margin-top: 10px;
+        }
+        .icon-button:hover {
+            background-color: #429a82;
+        }
+        .icon-button .svg-inline--fa {
+            width: 38px; /* Adjust the size as needed */
+            height: 38px; /* Adjust the size as needed */
+        }
+    </style>
+</head>
+
+<body>
+<div id="main" class="container">
+    <div class="row wrapper">
+        <div id="book-appointment-wizard" class="col-12 col-lg-10 col-xl-8 col-xxl-7">
+            <?php component('home_header', [
+                'company_name' => vars('company_name'),
+                'company_logo' => vars('company_logo'),
+            ]); ?>
+
+            <div class="icon-container-wrapper">
+                <div class="icon-container">
+                    <a href="<?= site_url('booking') ?>" class="icon-button btn btn-light">
+                        <i class="fas fa-calendar-plus"></i>
+                        <span>
+                            <?= lang('home_appointment_button') ?>
+                        </span>
+                    </a>
+                    <a href="<?= site_url('home_search') ?>" class="icon-button btn btn-light">
+                        <i class="fas fa-search"></i>
+                        <span>
+                            <?= lang('home_search_button') ?>
+                        </span>
+                    </a>
+                </div>
+                <div class="icon-container">   
+                    <a href="<?= site_url('home_price') ?>" class="icon-button btn btn-light">
+                        <i class="fas fa-dollar-sign"></i>
+                        <span>
+                            <?= lang('home_price_button') ?>
+                        </span>
+                    </a>
+                    <a href="<?= site_url('home_contact') ?>" class="icon-button btn btn-light">
+                        <i class="fas fa-phone-volume"></i>
+                        <span>
+                            <?= lang('home_contact_button') ?>
+                        </span>
+                    </a>
+                </div>
+            </div>
+
+            <?php component('booking_footer', ['display_login_button' => vars('display_login_button')]); ?>
+        </div>
+    </div>
+</div>
+
+<?php if (vars('display_cookie_notice') === '1'): ?>
+    <?php component('cookie_notice_modal', ['cookie_notice_content' => vars('cookie_notice_content')]); ?>
+<?php endif; ?>
+
+<?php if (vars('display_terms_and_conditions') === '1'): ?>
+    <?php component('terms_and_conditions_modal', [
+        'terms_and_conditions_content' => vars('terms_and_conditions_content'),
+    ]); ?>
+<?php endif; ?>
+
+<?php if (vars('display_privacy_policy') === '1'): ?>
+    <?php component('privacy_policy_modal', ['privacy_policy_content' => vars('privacy_policy_content')]); ?>
+<?php endif; ?>
+
+<script src="<?= asset_url('assets/vendor/jquery/jquery.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/cookieconsent/cookieconsent.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/@popperjs-core/popper.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/bootstrap/bootstrap.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/moment/moment.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/moment-timezone/moment-timezone-with-data.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/@fortawesome-fontawesome-free/fontawesome.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/@fortawesome-fontawesome-free/solid.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/tippy.js/tippy-bundle.umd.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/flatpickr/flatpickr.min.js') ?>"></script>
+
+<script src="<?= asset_url('assets/js/app.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/date.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/file.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/http.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/lang.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/message.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/string.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/url.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/validation.js') ?>"></script>
+<script src="<?= asset_url('assets/js/layouts/booking_layout.js') ?>"></script>
+<script src="<?= asset_url('assets/js/http/localization_http_client.js') ?>"></script>
+
+<?php component('js_vars_script'); ?>
+<?php component('js_lang_script'); ?>
+
+<?php component('google_analytics_script', ['google_analytics_code' => vars('google_analytics_code')]); ?>
+<?php component('matomo_analytics_script', [
+    'matomo_analytics_url' => vars('matomo_analytics_url'),
+    'matomo_analytics_site_id' => vars('matomo_analytics_site_id'),
+]); ?>
+
+<?php slot('scripts'); ?>
+
+</body>
+</html>

application/views/layouts/home_price_layout.php

@@ -0,0 +1,225 @@
+<!doctype html>
+<html lang="<?= config('language_code') ?>">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <meta name="theme-color" content="#35A768">
+    <meta name="google" content="notranslate">
+
+    <meta property="og:title" content="<?= lang('page_title') . ' ' . vars('company_name') ?> | TFE Group"/>
+    <meta property="og:url" content="<?= base_url() ?>">
+    <meta property="og:image" content="<?= base_url('assets/img/social-card.png') ?>"/>
+    <meta property="og:type" content="website">
+
+    <?php slot('meta'); ?>
+
+    <title><?= lang('page_title') . ' ' . vars('company_name') ?> | TFE Group</title>
+
+    <link rel="icon" type="image/x-icon" href="<?= asset_url('assets/img/favicon.ico') ?>">
+    <link rel="icon" sizes="192x192" href="<?= asset_url('assets/img/logo.png') ?>">
+
+    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/cookieconsent/cookieconsent.min.css') ?>">
+    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/flatpickr/flatpickr.min.css') ?>">
+    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/flatpickr/material_green.min.css') ?>">
+    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/themes/' . vars('theme') . '.css') ?>">
+    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/general.css') ?>">
+    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/layouts/booking_layout.css') ?>">
+
+    <?php component('company_color_style', ['company_color' => vars('company_color')]); ?>
+
+    <?php slot('styles'); ?>
+
+    <style>
+        .price-table {
+            width: 100%;
+            margin: 0 auto;
+            border-collapse: collapse;
+        }
+        .price-table th {
+            padding: 8px;
+            border-bottom: 2px solid #429a82;
+            text-align: left;
+            background-color: #f4f4f4;
+        }
+        .price-table td {
+            padding: 8px;
+            /* border-bottom: 1px solid #429a82; */
+        }
+        .price-table .section-title {
+            font-size: 1.2em;
+            font-weight: bold;
+            padding-top: 16px;
+        }
+        .price-table .price {
+            text-align: left;
+        }
+        .price-table .star-text{
+            text-align: left;
+            font-size: 0.9em;
+            padding: 0 0 0 20px;
+            color: #666666;
+        }
+        .price-table td:not(.price, .star-text)::before {
+            content: "• ";
+            color: black;
+        }
+        
+        
+    </style>
+</head>
+
+<body>
+<div id="main" class="container">
+    <div class="row wrapper">
+        <div id="book-appointment-wizard" class="col-12 col-lg-10 col-xl-8 col-xxl-7">
+            <?php component('home_header', [
+                'company_name' => vars('company_name'),
+                'company_logo' => vars('company_logo'),
+            ]); ?>
+
+            <table class="price-table">
+                <thead>
+                    <tr>
+                        <th colspan="2" class="section-title">藥物治療</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>診金</td>
+                        <td class="price">$100</td>
+                    </tr>
+                    <tr>
+                        <td>中藥濃縮顆粒</td>
+                        <td class="price">$100/天</td>
+                        
+                    </tr>
+                </tbody>
+                <thead>
+                    <tr>
+                        <th colspan="2" class="section-title">手法治療</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td class="col-8">針灸 (多+1個部位/專科針灸*)</td>
+                        <td class="price">$360 (+$130/項)</td>
+                    </tr>
+                    <tr>
+                        <td class="star-text">*專科針灸:腫瘤科、分解黏連針法、火針丶溫針灸丶皮針、刺血療法</td>                        
+                    </tr>
+                    <tr>
+                        <td>手法治療</td>
+                        <td class="price">$130</td>
+                    </tr>
+                    <tr>
+                        <td>肌筋膜療法手法 (多+1個部位)</td>
+                        <td class="price">$360 (+$180)</td>
+                    </tr>
+                    <tr>
+                        <td>運動拔罐 (多+1個部位)</td>
+                        <td class="price">$360 (+$180)</td>
+                    </tr>
+                    <tr>
+                        <td>正骨整脊 (多+1個部位)</td>
+                        <td class="price">$360 (+$180)</td>
+                    </tr>
+                    <tr>
+                        <td>專業推拿* (60分鐘)</td>
+                        <td class="price">$420</td>
+                    </tr>
+                    <tr>
+                        <td class="star-text">*經註冊中醫師診斷後由專業推拿師執行, 其後以30分鐘計算</td>                        
+                    </tr>
+                </tbody>
+                <thead>
+                    <tr>
+                        <th colspan="2" class="section-title">外敷治療</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>藥灸</td>
+                        <td class="price">$100</td>
+                    </tr>
+                    <tr>
+                        <td>跌打</td>
+                        <td class="price">$360/部位</td>
+                    </tr>
+                    <tr>
+                        <td>耳穴療法</td>
+                        <td class="price">$120</td>
+                    </tr>
+                </tbody>
+                <thead>
+                    <tr>
+                        <th colspan="2" class="section-title">其他治療</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>美顏針灸</td>
+                        <td class="price">$680/項</td>
+                    </tr>
+                    <tr>
+                        <td>減肥腹針</td>
+                        <td class="price">$680/項</td>
+                    </tr>
+                </tbody>
+            </table>
+
+            <?php component('booking_footer', ['display_login_button' => vars('display_login_button')]); ?>
+        </div>
+    </div>
+</div>
+
+<?php if (vars('display_cookie_notice') === '1'): ?>
+    <?php component('cookie_notice_modal', ['cookie_notice_content' => vars('cookie_notice_content')]); ?>
+<?php endif; ?>
+
+<?php if (vars('display_terms_and_conditions') === '1'): ?>
+    <?php component('terms_and_conditions_modal', [
+        'terms_and_conditions_content' => vars('terms_and_conditions_content'),
+    ]); ?>
+<?php endif; ?>
+
+<?php if (vars('display_privacy_policy') === '1'): ?>
+    <?php component('privacy_policy_modal', ['privacy_policy_content' => vars('privacy_policy_content')]); ?>
+<?php endif; ?>
+
+<script src="<?= asset_url('assets/vendor/jquery/jquery.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/cookieconsent/cookieconsent.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/@popperjs-core/popper.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/bootstrap/bootstrap.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/moment/moment.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/moment-timezone/moment-timezone-with-data.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/@fortawesome-fontawesome-free/fontawesome.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/@fortawesome-fontawesome-free/solid.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/tippy.js/tippy-bundle.umd.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/flatpickr/flatpickr.min.js') ?>"></script>
+
+<script src="<?= asset_url('assets/js/app.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/date.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/file.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/http.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/lang.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/message.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/string.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/url.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/validation.js') ?>"></script>
+<script src="<?= asset_url('assets/js/layouts/booking_layout.js') ?>"></script>
+<script src="<?= asset_url('assets/js/http/localization_http_client.js') ?>"></script>
+
+<?php component('js_vars_script'); ?>
+<?php component('js_lang_script'); ?>
+
+<?php component('google_analytics_script', ['google_analytics_code' => vars('google_analytics_code')]); ?>
+<?php component('matomo_analytics_script', [
+    'matomo_analytics_url' => vars('matomo_analytics_url'),
+    'matomo_analytics_site_id' => vars('matomo_analytics_site_id'),
+]); ?>
+
+<?php slot('scripts'); ?>
+
+</body>
+</html>

application/views/layouts/home_search_layout.php

@@ -0,0 +1,147 @@
+<!doctype html>
+<html lang="<?= config('language_code') ?>">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <meta name="theme-color" content="#35A768">
+    <meta name="google" content="notranslate">
+
+    <meta property="og:title" content="<?= lang('page_title') . ' ' . vars('company_name') ?> | TFE Group"/>
+    <meta property="og:url" content="<?= base_url() ?>">
+    <meta property="og:image" content="<?= base_url('assets/img/social-card.png') ?>"/>
+    <meta property="og:type" content="website">
+
+    <?php slot('meta'); ?>
+
+    <title><?= lang('page_title') . ' ' . vars('company_name') ?> | TFE Group</title>
+
+    <link rel="icon" type="image/x-icon" href="<?= asset_url('assets/img/favicon.ico') ?>">
+    <link rel="icon" sizes="192x192" href="<?= asset_url('assets/img/logo.png') ?>">
+
+    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/cookieconsent/cookieconsent.min.css') ?>">
+    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/flatpickr/flatpickr.min.css') ?>">
+    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/flatpickr/material_green.min.css') ?>">
+    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/themes/' . vars('theme') . '.css') ?>">
+    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/general.css') ?>">
+    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/layouts/booking_layout.css') ?>">
+
+    <?php component('company_color_style', ['company_color' => vars('company_color')]); ?>
+
+    <?php slot('styles'); ?>
+
+    <style>
+        .icon-container-wrapper {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            /* height: 72.8vh; This makes the container fill the full height of the viewport */
+            flex-direction: column;
+            min-height: 589px; /* This ensures the container has a minimum height */
+        }
+        .icon-container {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-around;
+            width: 100%; /* Ensure it takes the full width available */
+            max-width: 600px; /* Optional: limit the max width */
+        }
+        .icon-button {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            text-align: center;
+            margin: 20px;
+            padding: 20px;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            width: 150px;
+            height: 150px;
+            transition: background-color 0.3s;
+        }
+        .icon-button i {
+            font-size: 56px;
+            margin-bottom: 20px;
+        }
+        .icon-button span {
+            margin-top: 10px;
+        }
+        .icon-button:hover {
+            background-color: #429a82;
+        }
+        .icon-button .svg-inline--fa {
+            width: 38px; /* Adjust the size as needed */
+            height: 38px; /* Adjust the size as needed */
+        }
+    </style>
+</head>
+
+<body>
+<div id="main" class="container">
+    <div class="row wrapper">
+        <div id="book-appointment-wizard" class="col-12 col-lg-10 col-xl-8 col-xxl-7">
+            <?php component('home_header', [
+                'company_name' => vars('company_name'),
+                'company_logo' => vars('company_logo'),
+            ]); ?>
+
+            <div class="icon-container-wrapper">
+                搜索结果为空！
+            </div>
+
+            <?php component('booking_footer', ['display_login_button' => vars('display_login_button')]); ?>
+        </div>
+    </div>
+</div>
+
+<?php if (vars('display_cookie_notice') === '1'): ?>
+    <?php component('cookie_notice_modal', ['cookie_notice_content' => vars('cookie_notice_content')]); ?>
+<?php endif; ?>
+
+<?php if (vars('display_terms_and_conditions') === '1'): ?>
+    <?php component('terms_and_conditions_modal', [
+        'terms_and_conditions_content' => vars('terms_and_conditions_content'),
+    ]); ?>
+<?php endif; ?>
+
+<?php if (vars('display_privacy_policy') === '1'): ?>
+    <?php component('privacy_policy_modal', ['privacy_policy_content' => vars('privacy_policy_content')]); ?>
+<?php endif; ?>
+
+<script src="<?= asset_url('assets/vendor/jquery/jquery.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/cookieconsent/cookieconsent.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/@popperjs-core/popper.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/bootstrap/bootstrap.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/moment/moment.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/moment-timezone/moment-timezone-with-data.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/@fortawesome-fontawesome-free/fontawesome.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/@fortawesome-fontawesome-free/solid.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/tippy.js/tippy-bundle.umd.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/flatpickr/flatpickr.min.js') ?>"></script>
+
+<script src="<?= asset_url('assets/js/app.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/date.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/file.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/http.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/lang.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/message.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/string.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/url.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/validation.js') ?>"></script>
+<script src="<?= asset_url('assets/js/layouts/booking_layout.js') ?>"></script>
+<script src="<?= asset_url('assets/js/http/localization_http_client.js') ?>"></script>
+
+<?php component('js_vars_script'); ?>
+<?php component('js_lang_script'); ?>
+
+<?php component('google_analytics_script', ['google_analytics_code' => vars('google_analytics_code')]); ?>
+<?php component('matomo_analytics_script', [
+    'matomo_analytics_url' => vars('matomo_analytics_url'),
+    'matomo_analytics_site_id' => vars('matomo_analytics_site_id'),
+]); ?>
+
+<?php slot('scripts'); ?>
+
+</body>
+</html>

application/views/pages/home.php

@@ -0,0 +1,18 @@
+<?php extend('layouts/home_layout'); ?>
+
+<?php section('content'); ?>
+<?php end_section('content'); ?>
+
+<?php section('scripts'); ?>
+
+<script src="<?= asset_url('assets/js/utils/date.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/lang.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/message.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/string.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/validation.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/ui.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/url.js') ?>"></script>
+<script src="<?= asset_url('assets/js/http/booking_http_client.js') ?>"></script>
+<script src="<?= asset_url('assets/js/pages/booking.js') ?>"></script>
+
+<?php end_section('scripts'); ?>

application/views/pages/home_contact.php

@@ -0,0 +1,18 @@
+<?php extend('layouts/home_contact_layout'); ?>
+
+<?php section('content'); ?>
+<?php end_section('content'); ?>
+
+<?php section('scripts'); ?>
+
+<script src="<?= asset_url('assets/js/utils/date.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/lang.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/message.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/string.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/validation.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/ui.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/url.js') ?>"></script>
+<script src="<?= asset_url('assets/js/http/booking_http_client.js') ?>"></script>
+<script src="<?= asset_url('assets/js/pages/booking.js') ?>"></script>
+
+<?php end_section('scripts'); ?>

application/views/pages/home_price.php

@@ -0,0 +1,18 @@
+<?php extend('layouts/home_price_layout'); ?>
+
+<?php section('content'); ?>
+<?php end_section('content'); ?>
+
+<?php section('scripts'); ?>
+
+<script src="<?= asset_url('assets/js/utils/date.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/lang.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/message.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/string.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/validation.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/ui.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/url.js') ?>"></script>
+<script src="<?= asset_url('assets/js/http/booking_http_client.js') ?>"></script>
+<script src="<?= asset_url('assets/js/pages/booking.js') ?>"></script>
+
+<?php end_section('scripts'); ?>

application/views/pages/home_search.php

@@ -0,0 +1,18 @@
+<?php extend('layouts/home_search_layout'); ?>
+
+<?php section('content'); ?>
+<?php end_section('content'); ?>
+
+<?php section('scripts'); ?>
+
+<script src="<?= asset_url('assets/js/utils/date.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/lang.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/message.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/string.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/validation.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/ui.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/url.js') ?>"></script>
+<script src="<?= asset_url('assets/js/http/booking_http_client.js') ?>"></script>
+<script src="<?= asset_url('assets/js/pages/booking.js') ?>"></script>
+
+<?php end_section('scripts'); ?>

assets/js/pages/booking.js

@@ -358,7 +358,7 @@ App.Pages.Booking = (function () {
 
             $selectProvider.empty();
 
-            $selectProvider.append(new Option(lang('please_select'), ''));
+            $selectProvider.append(new Option(lang('please_select_service'), ''));
 
             const isChinese = (text) => /[\u4e00-\u9fa5]/.test(text);