Warning: Undefined array key "language" in /volume1/web/blog_view.php on line 69

Warning: Undefined array key "lan_code" in /volume1/web/blog_view.php on line 71

Warning: Undefined array key "lan" in /volume1/web/blog_view.php on line 72

Warning: Undefined array key "lan" in /volume1/web/blog_view.php on line 74

Warning: Trying to access array offset on value of type null in /volume1/web/blog_view.php on line 74

Warning: Undefined array key "lan" in /volume1/web/blog_view.php on line 74

Warning: Trying to access array offset on value of type null in /volume1/web/blog_view.php on line 74

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 71

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 72

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 71

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 71

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 79

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 71

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 75

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 71

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 74

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 71

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 73

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 71

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 72

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 71

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 71

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 82

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 71

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 81

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 71

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 80

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 71

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 78

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 71

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 77

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 71

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 76

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 71

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 75

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 71

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 82

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 71

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 80

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 71

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 77

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 71

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 74

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 71

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 72

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 71

Warning: Trying to access array offset on value of type null in /volume1/web/blog_tree.php on line 80

Warning: Trying to access array offset on value of type null in /volume1/web/put_products.php on line 30

Warning: Attempt to read property "plaintext" on array in /volume1/web/put_products.php on line 33

Warning: Trying to access array offset on value of type null in /volume1/web/put_products.php on line 37

Warning: Trying to access array offset on value of type null in /volume1/web/put_products.php on line 30

Warning: Attempt to read property "plaintext" on array in /volume1/web/put_products.php on line 33

Warning: Trying to access array offset on value of type null in /volume1/web/put_products.php on line 37

Warning: Undefined array key "lan" in /volume1/web/blog_view.php on line 125

Warning: Trying to access array offset on value of type null in /volume1/web/blog_view.php on line 125

Warning: Undefined array key "lan" in /volume1/web/blog_view.php on line 126

Warning: Trying to access array offset on value of type null in /volume1/web/blog_view.php on line 126
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta content="ie=edge" http-equiv="x-ua-compatible">
            <meta property="og:url"                content="https://faith.tw/blog_view.php?id=40" />
                                <meta property="og:title"               content="☀️新的編輯器組件" />
                                <meta property="og:description"         content="TinyMCE是一款很強大的編輯器喔～" />
                                <meta property="og:image"               content="https://faith.tw/userfiles/images/web_design.png" />
                                <meta property="og:image:width"         content="1024" />
                                <meta property="og:image:height"        content="1024" />
                                <meta property="og:type"                content="article" />
        <meta property="fb:app_id" content="" />
    <title>SlimWeb</title>

    
    <!-- Font Awesome -->
    <link rel="shortcut icon" href="https://faith.tw/userfiles/web/images/logo.png" type="img/x-icon">
    <link rel="stylesheet" href="https://faith.tw/css/all.min.css">

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Slab:wght@100&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Carattere&family=Reggae+One&display=swap" rel="stylesheet">

    <link href="https://faith.tw/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://faith.tw/css/mdb.min.css" rel="stylesheet">
    <link href="https://faith.tw/css/standard_style.css?id=" rel="stylesheet">

    <link href="https://faith.tw/css/thumb.css?id=" rel="stylesheet">
    <link href="https://faith.tw/userfiles/notion.css" rel="stylesheet">
    

    <link href="https://faith.tw/css/fonts.css" rel="stylesheet">
    

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/spectrum-colorpicker2/dist/spectrum.min.css">

    <link href="https://faith.tw/css/element_display.css" rel="stylesheet">
    <link rel="stylesheet" href="https://faith.tw/css/jquery.scrollbar.css">
    <link rel="stylesheet" href="https://faith.tw/css/owl.carousel.min.css">
    <link rel="stylesheet" href="https://faith.tw/css/owl.theme.default.min.css">

    <link rel="stylesheet" href="https://faith.tw/userfiles/web/js/tinymce/skins/ui/oxide-dark/content.min.css">

    
    
    
    <script src="//s3-ap-northeast-1.amazonaws.com/justfont-user-script/jf-65182.js"></script>

    <script>
        if ('scrollRestoration' in history) {
            history.scrollRestoration = 'manual';
          }
    </script>

</head>
<style>


        :root { 
            --page_name1: url(https://faith.tw/userfiles/web/images/1.webp);
            --page_name2: url(https://faith.tw/userfiles/web/images/2.webp);
        }

        .d-cart:hover>.dropdown-menu, .x-cart:hover>.dropdown-menu {
          display: block;
        }

        .d-cart>.dropdown-menu {
            min-width: 25rem;
        }

        .dropdown-menu p {
            font-size:  .9rem;
        }

        .dribbble-ic {
            position: absolute;
            right: 0;
            margin-top: -15px;
        }



    </style>


                <link rel="stylesheet" href="https://faith.tw/userfiles/web/css/custom_variables.css">
           <link rel="stylesheet" href="https://faith.tw/userfiles/web/css/custom_style.css">
        

    <body class="scrollbar square scrollbar-lady-lips thin">

    <script type="text/javascript" src="https://faith.tw/js/jquery.min.js"></script>

    
    <script type="text/javascript" src="https://faith.tw/js/popper.js"></script>
    <script type="text/javascript" src="https://faith.tw/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://faith.tw/js/mdb.min.js"></script>
    <script type="text/javascript" src="https://faith.tw/js/lightbox.js"></script>
    <script src="https://faith.tw/js/imask.js" type="text/javascript"></script>
        <script src="https://faith.tw/js/jss.min.js" type="text/javascript"></script>
    <script src="https://faith.tw/js/jquery.cloud9carousel.js" type="text/javascript"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/spectrum-colorpicker2/dist/spectrum.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap-detect-breakpoint/src/bootstrap-detect-breakpoint.js"></script>

    <script type="text/javascript" src="https://faith.tw/js/jquery.bootstrap-autohidingnavbar.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/MotionPathPlugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
     
    <script src="https://faith.tw/js/ScrollSmoother.min.js"></script>
    <script src="https://faith.tw/js/GSDevTools.min.js"></script>
    <script src="https://faith.tw/js/SplitText.min.js"></script>

    <script src="https://faith.tw/js/owl.carousel.js"></script>

    <div id="mdb-preloader" class="flex-center">
        <div id="preloader-markup">
        </div>
    </div>

    <form id="cartform" action="https://faith.tw/cart.php" method="POST">
        <input type="hidden" name="cart" id="cart">
    </form>


    
                    <nav class="navbar nav1 navbar-expand-md navbar-dark nav_background fixed-top scrolling-navbar py-0 px-1">
        
                <div class="container-fluid d-flex justify-content-end">
                        <!-- Brand -->
                    <a class="navbar-brand" href="https://faith.tw/">
                     <picture>
                        
                        <img class="logo" alt="SlimWeb" src="https://faith.tw/userfiles/web/images/logo.png">
                     </picture>
                        
                    <a href="#" id="showside" data-activates="slide-out" class="navbtn pl-0 d-block d-xl-none button-collapse nav_text"><i class="fas fa-bars fa-1x"></i></a>


                    <a class="nav-link waves-effect nav_text d-none d-xl-block py-3">
                            
                    </a>


                                            <form class="form-inline ml-auto d-none pr-2 d-md-flex" method="POST" action="https://faith.tw/search.php">
                            <div class="md-form my-0">
                              <input class="form-control pt-0 nav_text" name="key" type="text" placeholder="" aria-label="Search" required>
                            </div>
                            <button class="btn btn-link nav_text btn-md p-0 m-0" type="submit"><i class="fas fa-search"></i></button>
                        </form>
                    

                    

                                                                <a href="https://faith.tw/order_search.php" class="nav-link waves-effect nav_text d-none d-xl-block py-3">
                            <div class="lighter"></div>
                        
                        </a>
                     

                    
                        <a class="nav-link waves-effect mycart nav_text ml-auto ml-md-2 p-0 d-xl-none mr-2">
                            <span class="badge badge-pill blue cart_count">0</span>
                            <i class="fad fa-shopping-cart fa-lg pl-0"></i>
                        </a>

                        <li class="nav-item dropdown d-cart d-none d-xl-block">

                            <a class="nav-link nav_text waves-effect mycart ml-auto dropdown-toggle" id="mlink">
                                <span class="badge badge-pill blue cart_count">0</span>
                                <i class="fad fa-shopping-cart fa-lg pl-0"></i>
                            </a>

                            <div class="dropdown-menu dropdown-menu-right p-0" aria-labelledby="mlink"></div>

                        </li>

                    
                    
                                                                                            	       <button class="btn btn-link navbtn nav_text waves-effect px-0" data-toggle="modal" data-target="#loginmodal">
                                    <i class="fas fa-user"></i> 
                                </button>
                            
                        
                                     </div>
            </nav>


         
    

    <div id="smooth-wrapper" class="m-0 p-0">
        <div id="smooth-content" class="m-0 p-0">

        


        

    

    
  
<div class="container-fluid p-0 position-relative overflow-hidden ">   

            <div id="height_patch"></div>
    


        

    
        <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,500&display=swap" rel="stylesheet">
        <link href="https://faith.tw/userfiles/files/e_component.css" rel="stylesheet"><link rel="stylesheet" href="https://gods.tw/css/flipdown.min.css" crossorigin="anonymous" referrerpolicy="no-referrer">
        <script type="text/javascript" src="https://faith.tw/userfiles/files/e_component.js"></script><script src="https://gods.tw/js/flipdown.min.js"></script><script src="https://faith.tw/userfiles/files/time_limited.js"></script>

        <section id="blogbox">
          <div class="container my-3 py-3 my-md-4 py-md-4">
            <div class="row">
   
                <div class="col-12 mt-0 mt-lg-4">
                 
                <div class="row">
                    <div class="col-12 pl-0">
                        <p class="font-weight-bold"><a href="index.php"><i class="fas fa-home fa-lg mr-1"></i></a> / <a href="./blogs.php"></a> / 新的編輯器組件
                    </div>
                    <div class="col-12">
                        <picture>
                            
                            <img alt="" src="https://faith.tw/userfiles/images/web_design.png" class="z-depth-1" style="width: 100%">
                        </picture>
                    </div>
                    <div class="col-12 title_col mt-5">
                        <h4 class="font-weight-bold clabel mb-0">
                                                        新的編輯器組件
                        </h4>
                        <p class="prodname my-2 font-weight-bold">
                                                        TinyMCE是一款很強大的編輯器喔～
                        </p>
                    </div>
                    <div class="col-12">
                        <hr>
                    </div>

                        
                            <div class="row d-flex px-3">
                                <div id="infobox" class="col-12 mb-5 custom_block px-lg-5">
                                    <h1 class="h4-responsive blog_title">新的編輯器TinyMCE即將登場</h1><p>有感於SlimWeb後台內原本的編輯器功能不是很足，所以將會用網路上很知名的 TinyMCE 編輯器來取代，主要用於專欄與區塊，目前已將區塊編輯器內的一些模組轉移到這個編輯器下面使用，下面的這些區塊都是在編輯器上～一鍵產生的。</p><p>我目前寫專欄也都使用這個編輯器，哪邊感覺不順手就改一改，TinyMCE是很棒的編輯器模組，主要是可以針對需要做功能的深化，希望以後用戶也能用得順心～～ <br>當然我也會做教學影片～<em class="fa-duotone fa-face-smile-tongue fa-xl fa-fw" style="color: #423e3c;"> </em></p><p><br></p><div id="c_28768" class="row p_card e_component" data-sname="卡片-大" style="border: none;"><div class="col-12 qa_item"><!-- Card --><div class="card card-cascade wider reverse"><!-- Card image --><div class="view view-cascade overlay"><img class="card-img-top img-fluid" src="https://faith.tw/admin/../userfiles/images/a_girl_with_short_hair_sits_at_a_wooden_desk_gazing_thoughtfully_at_an_imac_computer_displaying_a_p_vmk3ctiazl7mpculku8b_1.webp" alt="Card image cap" width="1376" height="768"> <a href="#!"> </a></div><!-- Card content --><div class="card-body card-body-cascade text-center"><!-- Title --><h4 class="card-title"><strong>My adventure</strong></h4><!-- Subtitle --><h6 class="font-weight-bold indigo-text py-2">Photography</h6><!-- Text --><p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem perspiciatis voluptatum a, quo nobis, non commodi quia repellendus sequi nulla voluptatem dicta reprehenderit, placeat laborum ut beatae ullam suscipit veniam.</p><!-- Linkedin --><!-- Twitter --><!-- Dribbble --></div></div><!-- Card --></div></div><p><br></p><div id="c_31714" class="row ani_title justify-content-center e_component" style="border: none;" data-sname="動畫標題"><div class="col-12 text-center"><p>Every dog has his day <em class="h1-responsive display-3 font-weight-bold"> SlimWeb <br class="d-sm-none">& <br class="d-sm-none">SlimGPT </em> — Strike while the iron is hot —</p></div></div><div id="c_29635" class="people_info row justify-content-center e_component" style="border: none;" data-sname="人物介紹"><div class="col-12"><h1 class="col-12"><strong> <span class="pb-3" style="font-size: 28px;">除了看美女，我們還能用AI做什麼</span> </strong> <br><em class="mt-3">如果還沒想到，那就～先看美女吧</em></h1></div><div class="col-md-6 col-lg-4 mb-4 people_item"><div class="p-4"><div class="avatar w-100 d-flex justify-content-center align-items-center"><img class="img-fluid rounded-circle z-depth-1 img1" src="https://faith.tw/admin/../userfiles/images/dream_girl.webp?1731193571114" width="512" height="512"></div><div class="text-center mt-3"><h6 class="font-weight-bold pt-2 sub1"><em class="fa-regular fa-face-grin-wink fa-2x fa-fw" style="color: #423e3c;"> </em>Atina Chung</h6><p class="content1"><small> <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em> </small></p></div></div></div><div class="col-md-6 col-lg-4 mb-4 people_item"><div class="p-4"><div class="avatar w-100 d-flex justify-content-center align-items-center"><img class="img-fluid rounded-circle z-depth-1 img1" src="../userfiles/images/tp1.webp" width="395" height="395"></div><div class="text-center mt-3"><h6 class="font-weight-bold pt-2 sub1"><em class="fa-regular fa-face-grin-wink fa-2x fa-fw" style="color: #423e3c;"> </em>Atina Chung</h6><p class="content1"><small> <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em> </small></p></div></div></div><div class="col-md-6 col-lg-4 mb-4 people_item"><div class="p-4"><div class="avatar w-100 d-flex justify-content-center align-items-center"><img class="img-fluid rounded-circle z-depth-1 img1" src="../userfiles/images/girl2.webp" width="1066" height="1042"></div><div class="text-center mt-3"><h6 class="font-weight-bold pt-2 sub1"><em class="fa-regular fa-face-grin-wink fa-2x fa-fw" style="color: #423e3c;"> </em>Atina Chung</h6><p class="content1"><small> <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em> </small></p></div></div></div><div class="col-md-6 col-lg-4 mb-4 people_item"><div class="p-4"><div class="avatar w-100 d-flex justify-content-center align-items-center"><img class="img-fluid rounded-circle z-depth-1 img1" src="../userfiles/images/blobid0.webp" width="400" height="400"></div><div class="text-center mt-3"><h6 class="font-weight-bold pt-2 sub1"><em class="fa-regular fa-face-grin-wink fa-2x fa-fw" style="color: #423e3c;"> </em>Atina Chung</h6><p class="content1"><small> <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em> </small></p></div></div></div><div class="col-md-6 col-lg-4 mb-4 people_item"><div class="p-4"><div class="avatar w-100 d-flex justify-content-center align-items-center"><img class="img-fluid rounded-circle z-depth-2 img1" src="../userfiles/images/blobid1.webp" width="400" height="400"></div><div class="text-center mt-3"><h6 class="font-weight-bold pt-2 sub1"><em class="fa-regular fa-face-grin-wink fa-2x fa-fw" style="color: #423e3c;"> </em>Atina Chung</h6><p class="content1"><small> <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em> </small></p></div></div></div><div class="col-md-6 col-lg-4 mb-4 people_item"><div class="p-4"><div class="avatar w-100 d-flex justify-content-center align-items-center"><img class="img-fluid rounded-circle z-depth-1 img1" src="../userfiles/images/blobid2.webp" width="400" height="400"></div><div class="text-center mt-3"><h6 class="font-weight-bold pt-2 sub1"><em class="fa-regular fa-face-grin-wink fa-2x fa-fw" style="color: #423e3c;"> </em>Atina Chung</h6><p class="content1"><small> <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em> </small></p></div></div></div></div><p><br></p><p><br></p><div id="c_84786" class="row justify-content-center recmmand e_component" style="border: none;" data-sname="專家推薦">
    <div class="col-md-10">
        <div class="card">
            <div class="card-body m-3">
                <div class="row flex-center">
                    <div class="col-lg-4 d-flex mb-2 align-items-center">
                        <div class="avatar mx-4 w-100 white d-flex justify-content-center align-items-center"><img class="rounded-circle img-fluid z-depth-1" src="https://faith.tw/userfiles/web/images/blobid2.png" alt=""></div>
                    </div>
                    <div class="col-lg-8">
                        <h1>Style Two <em>Example Tagline Text</em></h1>
<br>                        我家小雪滴滴來我家一個半月，從她處領養，目前2歲，最近開始會一直咬，咬鞋，墊子，給他玩具不太玩，啃咬玩具也一下就丟一旁，之前不跳上沙發，現在在不注意時會跳（如圖），尿尿有教在廁所定點，但時而可以，時而不行。這是我第二次養小雪，前一隻並不會亂咬，請問可以怎麼解呢？
                        <h5 class="font-weight-bold lead mb-2 text-right"><a href="https://gods.tw" class="stretched_link"> <strong>Anna Smith</strong> </a></h5>
                        <h6 class="font-weight-bold mb-0 text-right">Product manager</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><p><br></p><p><br></p><p><!-- <script src="https://gods.tw/js/flipdown.min.js"></script> --><!-- <script src="https://faith.tw/userfiles/files/time_limited.js"></script> --><!-- <link rel="stylesheet" href="https://gods.tw/css/flipdown.min.css"> --></p><div id="c_76848" class="row time_limited justify-content-center e_component" style="border: none;" data-sname="限時搶購"><div class="col-lg-6 my-lg-auto"><h3 class="font-weight-bold mb-4">SlimWeb最後搶購機會</h3><div class="flipbox"><div class="flipdown"><br></div></div><p>作為一款功能做齊全，價格最低廉的電商系統，SlimWeb將於明年1月1日起調整價格，如果您還沒有入手，請把握最後購買機會～</p><div class="limited_info">搶購到期日 <button class="btn btn-outline-dark sdate_limited waves-effect waves-light">  2024-12-31 22:00:00  </button>    商品ID <button class="btn btn-outline-dark sprod_id waves-effect waves-light">  856  </button></div><button class="btn btn-blue-grey add1_cart mx-0 waves-effect waves-light" data-img="https://faith.tw/products/prod_web.png" data-pname="SlimWeb" data-pid="856">立刻購買</button></div><div class="col-lg-6 d-flex align-items-center"><div class="view mx-auto"><img class="img-fluid get_product z-depth-3" src="../products/prod_web.png" alt="SlimWeb" width="296" height="429" data-pid="856" data-img="https://faith.tw/products/prod_web.png"></div></div></div><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><div id="c_95274" class="row qacontent justify-content-center e_component" style="border: none;" data-sname="Q&A"><div class="col-12"><h3 class="font-weight-bold mb-2 w-100 text-center">Frequently Asked Questions</h3><hr class="w-100"><!-- Section description --><p class="lead mx-auto mb-5 text-center">Got a question? We've got answers. If you have some other questions, see our support center.</p></div><div class="col-md-6 col-lg-4 mb-4 qa_item"><h5 class="font-weight-normal mb-3 ">Is this a secure site for purchases?</h5><p>Absolutely! We work with top payment companies which guarantees your safety and security. All billing information is stored on our payment processing partner which has the most stringent level of certification available in the payments industry.</p></div><div class="col-md-6 col-lg-4 mb-4 qa_item"><h5 class="font-weight-normal mb-3 ">Is this a secure site for purchases?</h5><p>Absolutely! We work with top payment companies which guarantees your safety and security. All billing information is stored on our payment processing partner which has the most stringent level of certification available in the payments industry.</p></div><div class="col-md-6 col-lg-4 mb-4 qa_item"><h5 class="font-weight-normal mb-3 ">Is this a secure site for purchases?</h5><p>Absolutely! We work with top payment companies which guarantees your safety and security. All billing information is stored on our payment processing partner which has the most stringent level of certification available in the payments industry.</p></div><div class="col-md-6 col-lg-4 mb-4 qa_item"><h5 class="font-weight-normal mb-3 ">Is this a secure site for purchases?</h5><p>Absolutely! We work with top payment companies which guarantees your safety and security. All billing information is stored on our payment processing partner which has the most stringent level of certification available in the payments industry.</p></div><div class="col-md-6 col-lg-4 mb-4 qa_item"><h5 class="font-weight-normal mb-3 ">Is this a secure site for purchases?</h5><p>Absolutely! We work with top payment companies which guarantees your safety and security. All billing information is stored on our payment processing partner which has the most stringent level of certification available in the payments industry.</p></div><div class="col-md-6 col-lg-4 mb-4 qa_item"><h5 class="font-weight-normal mb-3 ">Is this a secure site for purchases?</h5><p>Absolutely! We work with top payment companies which guarantees your safety and security. All billing information is stored on our payment processing partner which has the most stringent level of certification available in the payments industry.</p></div><div class="col-md-6 col-lg-4 mb-4 qa_item"><h5 class="font-weight-normal mb-3 ">Is this a secure site for purchases?</h5><p>Absolutely! We work with top payment companies which guarantees your safety and security. All billing information is stored on our payment processing partner which has the most stringent level of certification available in the payments industry.</p></div><div class="col-md-6 col-lg-4 mb-4 qa_item"><h5 class="font-weight-normal mb-3 ">Is this a secure site for purchases?</h5><p>Absolutely! We work with top payment companies which guarantees your safety and security. All billing information is stored on our payment processing partner which has the most stringent level of certification available in the payments industry.</p></div><div class="col-md-6 col-lg-4 mb-4 qa_item"><h5 class="font-weight-normal mb-3 ">Is this a secure site for purchases?</h5><p>Absolutely! We work with top payment companies which guarantees your safety and security. All billing information is stored on our payment processing partner which has the most stringent level of certification available in the payments industry.</p></div></div><p><br></p><div id="c_89339" class="row focusprod justify-content-center e_component" style="border: none;" data-sname="重點商品"><div class="col-12"><h2 class="text-center font-weight-bold mb-4 pb-2 w-100">Why is it <span id="mce_1_start" style="overflow: hidden; line-height: 0px;"></span>so great?</h2><!-- Section description --><h5 class="text-center lead mx-auto mb-5 content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</h5></div><!-- Grid column --><div class="col-lg-5 text-center"><img class="img-fluid" src="../userfiles/images/tp3.webp" alt="Sample image"></div><!-- Grid column --><!-- Grid column --><div class="col-lg-7"><!-- Grid row --><div class="row mb-3"><!-- Grid column --><div class="col-1 mt-md-4"><em class="fas fa-share fa-lg indigo-text"> </em></div><!-- Grid column --><!-- Grid column --><div class="col-xl-10 col-md-11 col-10 mt-md-4"><h5 class="font-weight-bold mb-3 sub1">Safety</h5><p class="content1">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.</p></div><!-- Grid column --></div><!-- Grid row --><!-- Grid row --><div class="row mb-3"><!-- Grid column --><div class="col-1"><em class="fas fa-share fa-lg indigo-text"> </em></div><!-- Grid column --><!-- Grid column --><div class="col-xl-10 col-md-11 col-10"><h5 class="font-weight-bold mb-3 sub2">Technology</h5><p class="content2">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.</p></div><!-- Grid column --></div><!-- Grid row --><!--Grid row--><div class="row"><!-- Grid column --><div class="col-1"><em class="fas fa-share fa-lg indigo-text"> </em></div><!-- Grid column --><!-- Grid column --><div class="col-xl-10 col-md-11 col-10"><h5 class="font-weight-bold mb-3 sub3">Finance</h5><p class="mb-0 content3">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.</p></div><!-- Grid column --></div><!--Grid row--><div class="row mb-3 d-none d-lg-flex"><!-- Grid column --><div class="col-1"><em class="fas fa-share fa-lg indigo-text"> </em></div><!-- Grid column --><!-- Grid column --><div class="col-xl-10 col-md-11 col-10"><h5 class="font-weight-bold mb-3 sub2">Technology</h5><p class="content2">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.</p></div><!-- Grid column --></div><!-- Grid row --><!--Grid row--><div class="row mb-3 d-none d-lg-flex"><!-- Grid column --><div class="col-1"><em class="fas fa-share fa-lg indigo-text"> </em></div><!-- Grid column --><!-- Grid column --><div class="col-xl-10 col-md-11 col-10"><h5 class="font-weight-bold mb-3 sub2">Technology</h5><p class="content2">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.</p></div><!-- Grid column --></div><!-- Grid row --><!--Grid row--></div><!--Grid column--></div><p><!-- Grid row --></p><p><br></p><p><br></p><div id="c_72103" class="row justify-content-center stepinfo e_component" style="border: none;" data-sname="步驟說明"><div class="col-12"><h3 class="font-weight-bold text-center pb-1 w-100">Three Eas<spanid="mce_2_start"style="overflow: hidden; line-height: 0px;"></span>y Steps</h3><p class="lead text-center mb-4 content w-100">Explore the best MDB template in the market in a short 1-minute video.</p></div><div class="col-lg-6 mb-4 text-center"><img class="img-fluid" src="../userfiles/images/imac_girl.png" alt="SlimWeb"></div><div class="col-lg-6 mb-4"><ol class="step pl-0"><li class="step-element pb-0"><div class="step-number"><span class="number">1</span></div><div class="step-excerpt"><h6 class="font-weight-bold mb-3 sub1">Write your requirements</h6><p class="content1">Think the or organization same proposal to affected heard reclined in be it reassuring.</p></div></li><li class="step-element pb-0"><div class="step-number"><span class="number">2</span></div><div class="step-excerpt"><h6 class="font-weight-bold mb-3 sub2">Sign the contract</h6><p class="content2">Think the or organization same proposal to affected heard reclined in be it reassuring.</p></div></li><li class="step-element pb-0"><div class="step-number"><span class="number">3</span></div><div class="step-excerpt"><h6 class="font-weight-bold mb-3 sub3">We start developing</h6><p class="content3">Think the or organization same proposal to affected heard reclined in be it reassuring.</p></div></li></ol></div></div><p><br></p><p><br></p><div id="c_21669" class="row pricebox justify-content-center e_component" style="border: none;" data-sname="價格說明1"><div class="col-12"><h2 class="font-weight-bold pb-2 text-center">Our pricing plans</h2><hr class="w-25 border-bottom border-danger"><!-- Section description --><h4 class="text-muted h4-responsive text-center mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4></div><!-- Grid column --><div class="col-lg-4 col-md-12 mb-4"><!-- Pricing card --><div class="card pricing-card"><!-- Price --><div class="price header white-text blue rounded-top"><h2 class="number">10</h2><div class="version"><h5 class="mb-0">Basic</h5></div></div><!-- Features --><div class="card-body striped mb-1"><ul><li><p class="mt-2">20 GB Of Storage</p></li><li><p>2 Email Accounts</p></li><li><p>24h Tech Support</p></li><li><p>300 GB Bandwidth</p></li><li><p>User Management</p></li></ul><button data-pid="856" class="btn btn-blue waves-effect waves-light get_product">購買</button></div><!-- Features --></div><!-- Pricing card --></div><!-- Grid column --><!-- Grid column --><div class="col-lg-4 col-md-6 mb-4"><!-- Pricing card --><div class="card pricing-card"><!-- Price --><div class="price header white-text indigo rounded-top"><h2 class="number">20</h2><div class="version"><h5 class="mb-0">Pro</h5></div></div><!-- Features --><div class="card-body striped mb-1"><ul><li><p class="mt-2">20 GB Of Storage</p></li><li><p>4 Email Accounts</p></li><li><p>24h Tech Support</p></li><li><p>300 GB Bandwidth</p></li><li><p>User Management</p></li></ul><button class="btn btn-indigo waves-effect waves-light">Buy now</button></div><!-- Features --></div><!-- Pricing card --></div><!-- Grid column --><!-- Grid column --><div class="col-lg-4 col-md-6 mb-4"><!-- Pricing card --><div class="card pricing-card"><!-- Price --><div class="price header white-text deep-purple rounded-top"><h2 class="number">30</h2><div class="version"><h5 class="mb-0">Enterprise</h5></div></div><!-- Features --><div class="card-body striped mb-1"><ul><li><p class="mt-2">30 GB Of Storage</p></li><li><p>5 Email Accounts</p></li><li><p>24h Tech Support</p></li><li><p>300 GB Bandwidth</p></li><li><p>User Management</p></li></ul><button class="btn btn-deep-purple waves-effect waves-light">Buy now</button></div><!-- Features --></div><!-- Pricing card --></div><!-- Grid column --></div><p><!-- Grid row --></p><p><br></p><p><br></p><div id="c_82736" class="row pricebox2 justify-content-center e_component" style="border: none;" data-sname="價格說明2"><div class="col-12"><h2 class="font-weight-bold pb-2 text-center">Our pricing plans</h2><hr class="w-25 border-bottom border-danger"><!-- Section description --><h4 class="text-muted h4-responsive text-center mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4></div><!-- Grid column --><div class="col-lg-4 col-md-12 mb-4"><!-- Pricing card --><div class="card pricing-card white-text"><!-- Price --><div class="aqua-gradient rounded-top"><h4 class="option">BASIC</h4></div><!-- Features --><div class="card-body striped green-striped card-background px-5"><h2 class="my-4 pb-3 h1">20$</h2><ul><li><p><strong>1</strong> project</p></li><li><p><strong>100</strong> components</p></li><li><p><strong>150</strong> features</p></li><li><p><strong>200</strong> members</p></li></ul><button class="mb-3 mt-3 btn aqua-gradient btn-rounded waves-effect waves-light">Buy now</button></div><!-- Features --></div><!-- Pricing card --></div><!-- Grid column --><!-- Grid column --><div class="col-lg-4 col-md-6 mb-4"><!-- Pricing card --><div class="card pricing-card white-text"><!-- Price --><div class="peach-gradient rounded-top"><h4 class="option">PRO</h4></div><!-- Features --><div class="card-body striped orange-striped card-background px-5"><h2 class="my-4 pb-3 h1">80$</h2><ul><li><p><strong>1</strong> project</p></li><li><p><strong>100</strong> components</p></li><li><p><strong>150</strong> features</p></li><li><p><strong>200</strong> members</p></li></ul><button class="mb-3 mt-3 btn peach-gradient btn-rounded waves-effect waves-light">Buy now</button></div><!-- Features --></div><!-- Pricing card --></div><!-- Grid column --><!-- Grid column --><div class="col-lg-4 col-md-6 mb-4"><!-- Pricing card --><div class="card pricing-card white-text"><!-- Price --><div class="purple-gradient rounded-top"><h4 class="option">ENTERPRISE</h4></div><!-- Features --><div class="card-body striped purple-striped card-background px-5"><h2 class="my-4 pb-3 h1">100$</h2><ul><li><p><strong>1</strong> project</p></li><li><p><strong>100</strong> components</p></li><li><p><strong>150</strong> features</p></li><li><p><strong>200</strong> members</p></li></ul><button class="mb-3 mt-3 btn purple-gradient btn-rounded waves-effect waves-light">Buy now</button></div><!-- Features --></div><!-- Pricing card --></div></div><p><br></p><p><br></p><div id="c_42106" class="row justify-content-center askform e_component" style="border: none;" data-sname="問券調查"><!--Grid column--><div class="col-md-6 p-3 p-md-5 z-depth-1"><!-- Default form contact --><form class="text-center" action="#!"><h3 class="font-weight-bold mb-4">問券調查</h3><!-- Name --> <input id="defaultContactFormName" class="form-control mb-4" type="text" placeholder="Name"> <!-- Email --> <input id="defaultContactFormEmail" class="form-control mb-4" type="email" placeholder="E-mail"> <!-- Subject --> <label class="active">Subject</label><select class="browser-default custom-select mb-4"><option disabled="disabled" value="">Choose option</option><option selected="selected" value="1">Feedback</option><option value="2">Report a bug</option><option value="3">Feature request</option><option value="4">Feature request</option></select><!-- Message --><div class="form-group"><textarea id="exampleFormControlTextarea2" class="form-control rounded-0" rows="3" placeholder="Message"></textarea></div><!-- Copy --><div class="custom-control custom-checkbox mb-4"><input id="defaultContactFormCopy" class="custom-control-input" type="checkbox"> <label class="custom-control-label" for="defaultContactFormCopy">Send me a copy of this message</label></div><!-- Send button --> <button class="btn btn-info btn-block waves-effect waves-light" type="submit">Send</button></form><!-- Default form contact --></div><!--Grid column--></div><p><br></p><p><br></p><div id="c_64848" class="row addressinfo justify-content-center e_component" style="border: none;" data-sname="地圖資訊"><div class="col-md-6"><!-- Google Maps --><div id="map-within-card-2" class="map-container rounded-left" style="height: 300px;"><div class="z-depth-1-half map-container" style="height: 300px;"><span contenteditable="false" style="border: 0;" class="mce-preview-object mce-object-iframe"> <span contenteditable="false" style="border: 0;"class="mce-preview-object mce-object-iframe"><iframe src="https://maps.google.com/maps?q=台北市中山區林森北路100號&t=&z=13&ie=UTF8&iwloc=&output=embed" style="border: 0;" allowfullscreen="allowfullscreen" frameborder="0" referrerpolicy="no-referrer-when-downgrade"></iframe><span class="mce-shim"></span></span> </span></div></div><!-- Google Maps --></div><div class="col-10 col-md-4 mx-auto align-self-center py-4"><h6 class="font-weight-bold grey-text text-uppercase small">Head Office</h6><h5 class="font-weight-normal mb-4">Seattle, WA</h5><p class="text-muted font-weight-light">2651 Main Street, Suit 124 <br>Seattle, WA, 98101</p><p class="text-muted font-weight-light mb-0">Phone: +1 987 123 6548 <br>Email: hello@thetheme.io</p></div></div><p><br></p><p><br></p><p><!-- Grid row --></p><p><!-- Grid row --></p><p><br></p><div id="c_31635" class="row d_card e_component" data-sname="卡片-中" style="border: none;"><div class="col-md-6 qa_item my-2 my-md-3"><!-- Card --><div class="card promoting-card"><!-- Card content --><div class="card-body d-flex flex-row"><!-- Avatar --> <img class="rounded-circle img-fluid mr-3" style="width: 50px; height: 50px !important;" src="../userfiles/images/blobid2.webp" alt="avatar"> <!-- Content --><div><!-- Title --><h4 class="card-title font-weight-bold mb-0">SlimWeb</h4><!-- Subtitle --><p class="card-text"><em class="far fa-clock pr-2"> </em>2024/11/11</p></div></div><!-- Card image --><div class="view overlay"><img class="card-img-top img-fluid rounded-0" src="../userfiles/images/a_girl_with_short_hair_sits_at_a_wooden_desk_gazing_thoughtfully_at_an_imac_computer_displaying_a_p_nf6b0m34in1qpvrff39y_2.webp" alt="Card image cap"> <a href="#!"> </a></div><!-- Card content --><div class="card-body"><div class="collapse-content"><!-- Text --><p id="coll0" class="card-text collapse">你身邊是否有這種朋友,常聽他在靠北創業多累多折磨,可每次要找他的時候,不是在國外,就是在出國的路上～。 <br>也許你們會像大多數人一樣漸行漸遠,回到各自的生活圈,即便他不是那種誇張的大富大貴,你心裡也清楚彼此不再是同一個圈子的人了,你可以嘆一聲～人各有命,然後回去上班, <br><br>或者嘗試改變一下自己的思維,去想想那些你從未懷疑過的事,例如你曾被朋友同學,甚至家人說過個性不適合創業,或許太保守,或許太過神經大條,總之～就是不適合,久而久之你也就認為自己是這樣了... <br><br>但～真的是這樣嗎?</p><!-- Button --> <a class="btn btn-flat red-text p-1 my-1 mr-0 mml-1 collapsed waves-effect" href="#coll0" data-toggle="collapse" aria-expanded="false" aria-controls="coll0"> </a> <em class="fas fa-share-alt text-muted float-right p-1 my-1" title="Share this post" data-toggle="tooltip" data-placement="top"> </em> <em class="fas fa-heart text-muted float-right p-1 my-1 mr-3" title="I like it" data-toggle="tooltip" data-placement="top"> </em></div></div></div><!-- Card --></div><div class="col-md-6 qa_item my-2 my-md-3"><!-- Card --><div class="card promoting-card"><!-- Card content --><div class="card-body d-flex flex-row"><!-- Avatar --> <img class="rounded-circle img-fluid mr-3" style="width: 50px; height: 50px !important;" src="../userfiles/images/blobid2.webp" alt="avatar"> <!-- Content --><div><!-- Title --><h4 class="card-title font-weight-bold mb-0">SlimWeb</h4><!-- Subtitle --><p class="card-text"><em class="far fa-clock pr-2"> </em>2024/11/11</p></div></div><!-- Card image --><div class="view overlay"><img class="card-img-top img-fluid rounded-0" src="../userfiles/images/a_girl_with_short_hair_sits_at_a_wooden_desk_gazing_thoughtfully_at_an_imac_computer_displaying_a_p_nf6b0m34in1qpvrff39y_2.webp" alt="Card image cap"> <a href="#!"> </a></div><!-- Card content --><div class="card-body"><div class="collapse-content"><!-- Text --><p id="coll1" class="card-text collapse">你身邊是否有這種朋友,常聽他在靠北創業多累多折磨,可每次要找他的時候,不是在國外,就是在出國的路上～。 <br>也許你們會像大多數人一樣漸行漸遠,回到各自的生活圈,即便他不是那種誇張的大富大貴,你心裡也清楚彼此不再是同一個圈子的人了,你可以嘆一聲～人各有命,然後回去上班, <br><br>或者嘗試改變一下自己的思維,去想想那些你從未懷疑過的事,例如你曾被朋友同學,甚至家人說過個性不適合創業,或許太保守,或許太過神經大條,總之～就是不適合,久而久之你也就認為自己是這樣了... <br><br>但～真的是這樣嗎?</p><!-- Button --> <a class="btn btn-flat red-text p-1 my-1 mr-0 mml-1 collapsed waves-effect" href="#coll1" data-toggle="collapse" aria-expanded="false" aria-controls="coll1"> </a> <em class="fas fa-share-alt text-muted float-right p-1 my-1" title="Share this post" data-toggle="tooltip" data-placement="top"> </em> <em class="fas fa-heart text-muted float-right p-1 my-1 mr-3" title="I like it" data-toggle="tooltip" data-placement="top"> </em></div></div></div><!-- Card --></div></div><p><br></p><div id="c_15768" class="row order_card e_component" style="border: none;" data-sname="時段卡"><div class="col-md-6 qa_item my-3"><div class="card booking-card v-2"><!-- Card image --><div class="view overlay"><img class="card-img-top img-fluid" style="height: 220px;" src="../userfiles/images/spa.png" alt="Card image cap"></div><!-- Card content --><div class="card-body"><a href="#"> <img class="rounded-circle img-fluid" style="position: absolute; border: solid 12px white; right: 20px; top: 110px; width: 200px; height: 200px;" src="../userfiles/images/dream_girl.webp" alt="SlimWeb"> </a> <!-- Title --><h4 class="card-title font-weight-bold"><a>Alice</a></h4><!-- Data --><ul class="list-unstyled list-inline rating"><li class="list-inline-item mr-0"><em class="fa fa-star"> </em></li><li class="list-inline-item mr-0"><em class="fa fa-star"> </em></li><li class="list-inline-item mr-0"><em class="fa fa-star"> </em></li><li class="list-inline-item mr-0"><em class="fa fa-star"> </em></li><li class="list-inline-item mr-0"><em class="fa fa-star"> </em></li></ul><!-- Text --><p class="card-text" style="line-height: 1.6rem;">本店口碑最好的5星級老師，您見過後絕對會有萬念俱灰，了無生趣的超棒感覺。 <br>優良的技術絕對讓您從狀況極佳變為全殘，只要您沒被整死，本店就贈送免費使用券，直到您被整死為止，還在等什麼～！！！</p><hr class="my-4"><p class="h5-responsive font-weight-bold mb-4">可預約時段<em class="fa-regular fa-clock fa-xl fa-fw" style="color: #423e3c;"> </em></p><ul class="list-unstyled d-flex justify-content-start mb-0"><li>星期二 ～ 星期五</li><li><div class="chip ml-3 waves-effect">10:00AM</div></li><li><div class="chip ml-0 mr-0 waves-effect">6:00PM</div></li></ul><ul class="list-unstyled d-flex justify-content-start mb-0"><li>星期六 ～ 星期日</li><li><div class="chip ml-3 waves-effect">9:00AM</div></li><li><div class="chip ml-0 mr-0 waves-effect">7:00PM</div></li></ul><ul class="list-unstyled d-flex justify-content-start mb-0"><li>下週一</li><li><div class="chip ml-3 waves-effect">休假</div></li></ul></div></div></div><div class="col-md-6 qa_item my-3"><div class="card booking-card v-2"><!-- Card image --><div class="view overlay"><img class="card-img-top img-fluid" style="height: 220px;" src="../userfiles/images/spa.png" alt="Card image cap"></div><!-- Card content --><div class="card-body"><a href="#"> <img class="rounded-circle img-fluid" style="position: absolute; border: solid 12px white; right: 20px; top: 110px; width: 200px; height: 200px;" src="../userfiles/images/dream_girl.webp" alt="SlimWeb"> </a> <!-- Title --><h4 class="card-title font-weight-bold"><a>Alice</a></h4><!-- Data --><ul class="list-unstyled list-inline rating"><li class="list-inline-item mr-0"><em class="fa fa-star"> </em></li><li class="list-inline-item mr-0"><em class="fa fa-star"> </em></li><li class="list-inline-item mr-0"><em class="fa fa-star"> </em></li><li class="list-inline-item mr-0"><em class="fa fa-star"> </em></li><li class="list-inline-item mr-0"><em class="fa fa-star"> </em></li></ul><!-- Text --><p class="card-text" style="line-height: 1.6rem;">本店口碑最好的5星級老師，您見過後絕對會有萬念俱灰，了無生趣的超棒感覺。 <br>優良的技術絕對讓您從狀況極佳變為全殘，只要您沒被整死，本店就贈送免費使用券，直到您被整死為止，還在等什麼～！！！</p><hr class="my-4"><p class="h5-responsive font-weight-bold mb-4">可預約時段<em class="fa-regular fa-clock fa-xl fa-fw" style="color: #423e3c;"> </em></p><ul class="list-unstyled d-flex justify-content-start mb-0"><li>星期二 ～ 星期五</li><li><div class="chip ml-3 waves-effect">10:00AM</div></li><li><div class="chip ml-0 mr-0 waves-effect">6:00PM</div></li></ul><ul class="list-unstyled d-flex justify-content-start mb-0"><li>星期六 ～ 星期日</li><li><div class="chip ml-3 waves-effect">9:00AM</div></li><li><div class="chip ml-0 mr-0 waves-effect">7:00PM</div></li></ul><ul class="list-unstyled d-flex justify-content-start mb-0"><li>下週一</li><li><div class="chip ml-3 waves-effect">休假</div></li></ul></div></div></div></div><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><div id="c_58035" class="row prodpoint justify-content-center e_component" style="border: none;" data-sname="強勢商品"><div class="col-12"><!-- Section heading --><h2 class="text-center font-weight-bold mb-4 pb-2">Why is it so great?</h2><!-- Section description --><p class="text-center lead grey-text mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p></div><!-- Grid column --><div class="col-md-4"><!-- Grid row --><div class="row mb-3"><!-- Grid column --><div class="col-2"><em class="fas fa-2x fa-flag-checkered deep-purple-text"> </em></div><!-- Grid column --><!-- Grid column --><div class="col-10"><h5 class="font-weight-bold mb-3">International</h5><p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p></div><!-- Grid column --></div><!-- Grid row --><!-- Grid row --><div class="row mb-3"><!-- Grid column --><div class="col-2"><em class="fas fa-2x fa-flask deep-purple-text"> </em></div><!-- Grid column --><!-- Grid column --><div class="col-10"><h5 class="font-weight-bold mb-3">Experimental</h5><p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p></div><!-- Grid column --></div><!-- Grid row --><!-- Grid row --><div class="row mb-md-0 mb-3"><!-- Grid column --><div class="col-2"><em class="fas fa-2x fa-glass-martini deep-purple-text"> </em></div><!-- Grid column --><!-- Grid column --><div class="col-10"><h5 class="font-weight-bold mb-3">Relaxing</h5><p class="grey-text mb-md-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p></div><!-- Grid column --></div><!-- Grid row --></div><!-- Grid column --><!-- Grid column --><div class="col-md-4 text-center"><img class="img-fluid" src="../userfiles/images/tp3.webp" alt="Sample image" width="804" height="1363"></div><!-- Grid column --><!-- Grid column --><div class="col-md-4"><!-- Grid row --><div class="row mb-3"><!-- Grid column --><div class="col-2"><em class="far fa-2x fa-heart deep-purple-text"> </em></div><!-- Grid column --><!-- Grid column --><div class="col-10"><h5 class="font-weight-bold mb-3">Beloved</h5><p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p></div><!-- Grid column --></div><!-- Grid row --><!-- Grid row --><div class="row mb-3"><!-- Grid column --><div class="col-2"><em class="fas fa-2x fa-bolt deep-purple-text"> </em></div><!-- Grid column --><!-- Grid column --><div class="col-10"><h5 class="font-weight-bold mb-3">Rapid</h5><p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p></div><!-- Grid column --></div><!-- Grid row --><!-- Grid row --><div class="row"><!-- Grid column --><div class="col-2"><em class="fas fa-2x fa-magic deep-purple-text"> </em></div><!-- Grid column --><!-- Grid column --><div class="col-10"><h5 class="font-weight-bold mb-3">Magical</h5><p class="grey-text mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p></div><!-- Grid column --></div><!-- Grid row --></div><!-- Grid column --></div><div id="c_80844" class="row ani_title2 justify-content-center e_component" style="border: none;" data-sname="動畫標題2"><div class="col-12 d-flex"><h1 class="h1-responsive display-3 font-weight-bold">SlimWeb&SlimGPT</h1></div></div><p><br></p><p><br></p><div class="w-100 d-flex mt-5"><div class="d-flex ml-auto"><img id="bobo" class="img-fluid mr-2" src="https://gods.tw/images/bobo.png" alt="SlimWeb Developer Eric"><div class="media-body my-auto"><blockquote class="blockquote my-auto"><span class="mb-0 jinghong" style="line-height: 2rem; font-family: jinghong;">一個在五濁亂世中 <br>    不願靠話術生存的工程師 </span><footer class="blockquote-footer my-2 text-right">Eric Chen</footer></blockquote></div></div></div><span class="text-right d-block blog_date"><i class="fad fa-feather-alt fa-lg fa-fw mr-1"></i>Last update on 2024-12-25 01:26:00</span><span class="text-right d-block blog_date"><i class="fad fa-file-certificate fa-fw fa-lg mr-1"></i>Publish on 2024-12-24 01:26:00</span><hr><p class="clabel my-4"><i class="fas fa-glasses-alt fa-lg mr-2"></i>More Related...</p><a href="blog_view.php?id=20" class="chip btn-blue-grey waves-effect white-text"><span class="lan_label zh-TW">網站概念-新手必讀</span> <span class="lan_label zh-CN">网站概念-新手必读</span> <span class="lan_label en">Website concept-newbie must read</span> <span class="lan_label ja">ウェブサイトのコンセプト - 初心者必読</span></a><a href="blog_view.php?id=22" class="chip btn-blue-grey waves-effect white-text">為什麼您需要一個網站？</a><a href="blog_view.php?id=26" class="chip btn-blue-grey waves-effect white-text">使用SlimWeb～需要再請設計師做美術嗎？</a><a href="blog_view.php?id=38" class="chip btn-blue-grey waves-effect white-text">當有人說了一堆你不適合創業的理由</a>
                                </div>
                            </div>
 

                        
                    
                                        <div class="col-12">
                        <div class="fb-comments" data-href="https://faith.tw/blog_view.php?id=40" data-numposts="5" data-width="100%"></div>
                    </div>
                                        <div class="col-12 text-center mb-5">
                        <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Ffaith.tw%2Fblog_view.php%3Fid%3D40&amp;src=sdkpreparse" class="btn-floating btn-share"><i class="fab fa-facebook-f fa-lg"></i></a>
                        <a target="_blank" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Ffaith.tw%2Fblog_view.php%3Fid%3D40" class="btn-floating btn-share"><i class="fab fa-twitter fa-lg"></i></a>
                        <a target="_blank" href="https://social-plugins.line.me/lineit/share?url=https%3A%2F%2Ffaith.tw%2Fblog_view.php%3Fid%3D40" class="btn-floating btn-share"><i class="fab fa-line fa-lg"></i></a>
                    </div>
                </div>
              </div>
            </div>
                <div class="row text-left px-2">
                            <div class="col-12 title_col">
                                <h4 class="clabel mb-0"></h4>
                                <span class="elabel font-weight-bold"></span>
                                <hr class="mt-1">
                            </div>
                        </div>
                <div id="blog_md_list" class="row d-none d-md-flex mt-4 px-4">
                    <div data-price="1" data-views="564" data-pid="858" id="pid858" class="pre_card s2026022419482737 col-6 col-xl-3 col-lg-4 p-1 p-sm-2">
					        <div class="card mb-2 p-1">
					          <a class="position-relative">
					           <div class="owl-carousel owl-theme" data-pid="858">
					          	<picture class="item get_product" data-pid="858" data-img="https://faith.tw/userfiles/web/images/slimgpt1.webp"><source class="owl-lazy" data-srcset="https://faith.tw/userfiles/web/images/slimgpt1.webp" type="image/webp"><img class="thumb thumb_box owl-lazy" alt="" data-src="https://faith.tw/userfiles/web/images/slimgpt1.webp"></picture>
					          	</div>
					          <div class="views"><i class="fad fa-eye mr-1"></i>564</div>
					          	<img class="hot_pic" loading="lazy" src="./images/hot.png">
					          </a>

					          <div class="card-body card-back pt-2 px-1 px-md-4">
					            <h3 class="h3-responsive my-1 price">
				            	<span class="sprice-text font-weight-bold">
			    	            	<strong>$1</strong>
			    	          	</span>
			    	          	
			    	        </h3>

					            <p class="prodname"></p>
					            <div class="text-center cart_box">
					            	<img src="https://faith.tw/images/cart.png" class="pink_cart">
					            	<button data-pid="858" data-img="https://faith.tw/userfiles/web/images/slimgpt1.webp" data-pname="" class="btn btn-blue-grey btn-md add1_cart"><i class="fad fa-shopping-cart fa-lg mr-1"></i></button>
					            </div>
					          </div>
					        </div>
					      </div><div data-price="29999" data-views="1018" data-pid="856" id="pid856" class="pre_card s2026022419482737 col-6 col-xl-3 col-lg-4 p-1 p-sm-2">
					        <div class="card mb-2 p-1">
					          <a class="position-relative">
					           <div class="owl-carousel owl-theme" data-pid="856">
					          	<picture class="item get_product" data-pid="856" data-img="https://faith.tw/userfiles/web/images/slimweb3.webp"><source class="owl-lazy" data-srcset="https://faith.tw/userfiles/web/images/slimweb3.webp" type="image/webp"><img class="thumb thumb_box owl-lazy" alt="" data-src="https://faith.tw/userfiles/web/images/slimweb3.webp"></picture><picture class="item get_product" data-pid="856" data-img="https://faith.tw/userfiles/web/images/slimweb3.webp"><source class="owl-lazy" data-srcset="https://faith.tw/userfiles/web/images/slimweb4.webp" type="image/webp"><img class="thumb thumb_box owl-lazy" alt="" data-src="https://faith.tw/userfiles/web/images/slimweb4.webp"></picture><picture class="item get_product" data-pid="856" data-img="https://faith.tw/userfiles/web/images/slimweb3.webp"><source class="owl-lazy" data-srcset="https://faith.tw/userfiles/web/images/slimweb5.webp" type="image/webp"><img class="thumb thumb_box owl-lazy" alt="" data-src="https://faith.tw/userfiles/web/images/slimweb5.webp"></picture>
					          	</div>
					          <div class="views"><i class="fad fa-eye mr-1"></i>1018</div>
					          	<img class="hot_pic" loading="lazy" src="./images/hot.png"><img class="sale_pic" loading="lazy"  src="./images/sale.png">
					          </a>

					          <div class="card-body card-back pt-2 px-1 px-md-4">
					            <h3 class="h3-responsive my-1 price">
				            	<span class="sprice-text font-weight-bold">
			    	            	<strong>$29,999</strong>
			    	          	</span>
			    	          	<span class="price-text">
			    	            <small>
			    	              <s>$39,999</s>
			    	            </small>
			    	          </span>
			    	          
			    	        </h3>

					            <p class="prodname"></p>
					            <div class="text-center cart_box">
					            	<img src="https://faith.tw/images/cart.png" class="pink_cart">
					            	<button data-pid="856" data-img="https://faith.tw/userfiles/web/images/slimweb3.webp" data-pname="" class="btn btn-blue-grey btn-md add1_cart"><i class="fad fa-shopping-cart fa-lg mr-1"></i></button>
					            </div>
					          </div>
					        </div>
					      </div>
                </div>
                <div class="row d-md-none">
                    <ul class="list-unstyled w-100 p-3" id="blog_sm_list">
                        <li data-price="1" data-views="564" data-pid="858" id="pid858" class="media mb-4 pb-4">
							<picture>
							
						    	<img height="80" loading="lazy" class="d-flex mr-3 z-depth-1-half get_product" src="https://faith.tw/userfiles/web/images/slimgpt1.webp" data-pid="858" data-img="https://faith.tw/userfiles/web/images/slimgpt1.webp" alt="">
						    </picture>
						    <div class="media-body align-self-center">
						      <p class="mt-0 mb-1 font-weight-bold prodname get_product" data-pid="858" data-img="https://faith.tw/userfiles/web/images/slimgpt1.webp"></p>
						      <h3 class="h3-responsive my-1 price">
				            	<span class="sprice-text font-weight-bold">
			    	            	<strong>$1</strong>
			    	          	</span>
			    	          	
			    	        </h3>
    						</div>
    						<div class="text-center cart_box">
    							<img src="https://faith.tw/images/cart.png" class="pink_cart">
    							<button data-pid="858" class="btn btn-blue-grey btn-md px-3 mt-auto add1_cart"><i class="fad fa-shopping-cart fa-lg mr-1"></i></button>
    						</div>
 						 </li><li data-price="29999" data-views="1018" data-pid="856" id="pid856" class="media mb-4 pb-4">
							<picture>
							
						    	<img height="80" loading="lazy" class="d-flex mr-3 z-depth-1-half get_product" src="https://faith.tw/userfiles/web/images/slimweb3.webp" data-pid="856" data-img="https://faith.tw/userfiles/web/images/slimweb3.webp" alt="">
						    </picture>
						    <div class="media-body align-self-center">
						      <p class="mt-0 mb-1 font-weight-bold prodname get_product" data-pid="856" data-img="https://faith.tw/userfiles/web/images/slimweb3.webp"></p>
						      <h3 class="h3-responsive my-1 price">
				            	<span class="sprice-text font-weight-bold">
			    	            	<strong>$29,999</strong>
			    	          	</span>
			    	          	<span class="price-text">
			    	            <small>
			    	              <s>$39,999</s>
			    	            </small>
			    	          </span>
			    	          
			    	        </h3>
    						</div>
    						<div class="text-center cart_box">
    							<img src="https://faith.tw/images/cart.png" class="pink_cart">
    							<button data-pid="856" class="btn btn-blue-grey btn-md px-3 mt-auto add1_cart"><i class="fad fa-shopping-cart fa-lg mr-1"></i></button>
    						</div>
 						 </li>
                    </div>
                </div>

                <div id="mdb-lightbox-ui"></div>

            </div>
        </section>

        <script type="text/javascript" src="./js/blog_animation.js"></script>

        <script type="text/javascript">

            window.addEventListener("load", function () {
                document.querySelectorAll('[href*="https://line.me/ti/"]').forEach(function (i) {
                    i.addEventListener('click', function () {
                        gtag('event', 'conversion', {'send_to': 'AW-1030098754/qk1FCMTB4KIaEMKemOsD'});
                    })
                })
            })


            jQuery(document).ready(function($) {
                if ($.trim($('#blog_md_list').html()) !== ''){
                    console.log('1');
                    $('#blog_md_list .owl-carousel').owlCarousel({
                        loop: true,
                        margin: 20,
                        stagePadding: 0,
                        smartSpeed: 450,
                        nav: true,
                        lazyLoad: true,
                        navText:["<div class='nav-btn prev-slide'><i class='fas fa-chevron-left fa-lg'></i></div>","<div class='nav-btn next-slide'><i class='fas fa-chevron-right fa-lg'></i></div>"],
                        items: 1
                    });

                    $('#blog_md_list picture').removeClass('get_product').addClass('get_related');
                    $('#blog_md_list button.get_product').removeClass('get_product').addClass('get_related');

                    $('#blog_md_list .owl-carousel').hover(function(){
                        // var owl     =   $(this).get(0);
                        $(this).trigger('play.owl.autoplay',[1000]);
                    }, function(){
                        // console.log('hover out');
                        $(this).trigger('stop.owl.autoplay');
                    })
                }

                if ($.trim($('#blog_sm_list').html()) !== ''){
                    $('#blog_sm_list img').removeClass('get_product').addClass('get_related');
                    $('#blog_sm_list p').removeClass('get_product').addClass('get_related');
                    $('#blog_sm_list button.get_product').removeClass('get_product').addClass('get_related');
                }
            });

            //iPad 無法被判斷，所以當資料判定大小為2且infobox不顯示，就判定為ipad, 重新進入並帶device參數
            if (bootstrapDetectBreakpoint().index === 2 && !$('#infobox').is(':visible')){
                console.log('here');
                let url = 'https://'+document.location.hostname+document.location.pathname+document.location.search+'&device=pad';
                //console.log(url);
                window.location.href = url;
            }
        </script>
        

  

 


    <div class="container my-5">
    	<div id="view_history" class="row d-none">
    	    <div class="col-12 px-4">
    	        <span id="view_history_label" class="btn-blue-grey mb-0"></span>
    	        <hr class="mt-0">
    	    </div>
    	    <div id="views" class="col-12 text-center">
    	    </div>
    	</div>
    </div>

    <div class="d-none">
        <h1>網頁設計</h1><h2>電子商務</h2><h3>智能客服</h3><h4>CSS</h4><h5>智能客服</h5>
    </div>


    
            <!-- Footer -->
            <footer class="page-footer font-small">
                <!-- Footer Elements -->
                <div class="container">
                    <!-- Grid row-->
                    <div class="row py-4">
                    	                    		                    		                    	                        <div class="col-md-6 mb-4 mb-md-0 ">
                            <div class="z-depth-1-half map-container" style="height: 200px">
                                <iframe src="https://maps.google.com/maps?q=台北市內湖區康樂街186巷100號&t=&z=13&ie=UTF8&iwloc=&output=embed" referrerpolicy="no-referrer-when-downgrade"  frameborder="0" style="border:0" allowfullscreen></iframe>
                            </div>
                        </div>
                        <div class="col-md-6 my-auto text-center">
                            
                                <div class="mx-auto" style="max-width: 400px;">
                                    <small class="footer-text d-block mb-2 float-left">
                                        <i class="far fa-envelope mr-1"></i>
                                    </small>
                                    <div class="input-group input-group-sm mb-3">
                                      <input type="text" id="email" class="form-control" placeholder="">
                                      <div class="input-group-append">
                                        <button class="btn footer-copyright footer-text m-0 px-3 z-depth-0 waves-effect" type="button" id="newsletter"></button>
                                      </div>
                                    </div>
                                </div>
                            
                                                            <p class="footer-text">
                                	<i class="fas fa-map-marker-alt fa-fw fa-lg mr-1"></i>台北市內湖區康樂街186巷100號
                                </p>
                            
                            
                                    	                    <a href="tel:0226346000" class="footer-text d-block my-2">
        	                    	<i class="fas fa-phone-volume fa-fw fa-lg mr-1"></i>0226346000
        	                    </a>
                            
                                                            <a href="tel:0975892729" class="footer-text d-block my-2">
                                    <i class="fa-solid fa-mobile-signal-out fa-fw fa-lg mr-1"></i>0975892729
                                </a>
                            
                                    	                    <a target="_blank" href="mailto:eric.chen1972@gmail.com" class="btn-floating btn-share">
        	                    	<i class="fas footer-text fa-at fa-lg"></i>
        	                    </a>
        	                
        	                                            <a target="_blank" href="https://line.me/ti/p/ekr53MoZc6" class="btn-floating btn-share">
                            	<i class="fab footer-text fa-line fa-lg"></i>
                            </a>
                            
                                    	                    <a target="_blank" href="https://www.facebook.com/desperate.dj" class="btn-floating btn-share">
        	                    	<i class="fab footer-text fa-facebook-f fa-lg"></i>
        	                    </a>
                            
                            
                            
                                    	                    <a target="_blank" href="https://gods.tw/" class="btn-floating btn-share">
        	                    	<i class="fab footer-text fa-instagram fa-lg"></i>
        	                    </a>
                            
                            
                        </div>
                        
                    </div>
                    <!-- Grid row-->
                </div>

                <!-- Footer Elements -->
                <!-- Copyright -->
                <div class="footer-copyright footer-text text-center py-3 font-weight-bold">© 2021 Copyright:
                    <a class="pr-2 footer-text font-weight-bold" href="index.php"> SlimWeb</a> | <a target="_blank" href="announce.php" class="pl-2 footer-text font-weight-bold"></a>
                </div>
                <!-- Copyright -->
            </footer>


    <!-- Footer -->
    


        </div><!--   End container-fluid -->

     </div><!--  End Smooth Content  -->




</div><!--  End Smooth Wrap  --> 


<!-- Sidebar navigation -->
    <div id="slide-out" class="side-nav card-back">
        <ul class="custom-scrollbar" style="padding-top:80px">
             <form class="form-row py-2 w-100 d-sm-none" method="POST" action="https://faith.tw/search.php">

                                     <div class="col-10">
                         <div class="md-form my-0 px-3">
                           <input class="form-control pt-0" name="key" type="text" placeholder="" aria-label="Search" required>
                         </div>
                     </div>
                     <div class="col-2">
                     <button class="btn btn-link clabel btn-lg p-0 m-0" type="submit"><i class="fas fa-search"></i></button>
                     </div>
                                  
                 <div class="col-12 px-3">
                    
                    
                    
                 </div>
             </form>

             

             
             
                     
                
             

        </ul>
    </div>
    <!--/. Sidebar navigation -->

    <script>
        //jQuery(document).ready(function($) {

            //console.log('base_ready');

            // $('#showside').sideNav2({
            //     onOpen: function(){
            //         if (window.smoother !== undefined){
            //             window.smoother.paused(true);
            //         } else {
            //             $('html').css('overflow-y', 'hidden');
            //         }
            //     },
            //     onClose: function(){
            //         if (window.smoother !== undefined){
            //             window.smoother.paused(false);
            //         } else {
            //             $('html').css('overflow-y', 'auto');
            //         }
            //     }
            // });
            // // SideNav Scrollbar Initialization
            // var sideNavScrollbar = document.querySelector('.custom-scrollbar');
            // var ps = new PerfectScrollbar(sideNavScrollbar);

            

        //});
    </script>


    <div id="mdb-lightbox-ui"></div>

    <button id="totop" class="btn btn-floating btn-share"><i class="fas fa-chevron-up fa-lg"></i></button>


    <div id="tmp" class="d-none"></div>
    <div id="fb-root"></div>
    
    <div id="fb-customer-chat" class="fb-customerchat"></div>

        <div id="modal_area">
        <div class="modal fade top pt-xl-5 scrollbar square scrollbar-lady-lips thin" id="pmodal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-full" role="document">
                <div class="modal-content">
                    
                    <div class="modal-body p-2">
                        <div id="loading" class="grey-text text-center" style="margin-top:200px"><i class="fas fa-circle-notch fa-spin fa-5x"></i></div>
                    </div>
                    
                </div>
            </div>
        </div>

    <div class="modal fade top pt-xl-5 scrollbar square scrollbar-lady-lips thin" id="blog_nav_modal" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog modal-full" role="document">
              <div class="modal-content">

                <div class="modal-header">
                  <picture>
                     <img class="logo mr-3" alt="SlimWeb" src="https://faith.tw/userfiles/web/images/logo.png">
                  </picture>
                  <h4 class="modal-title my-auto">
                    
                </h4>
                
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                  
                  <div class="modal-body px-4 pt-0">
                      
                  </div>
                  
              </div>
          </div>
      </div>

  <div class="modal fade" id="loginmodal" tabindex="-1" role="dialog" aria-labelledby="mylogin"
      aria-hidden="true">

      <!-- Change class .modal-sm to change the size of the modal -->
      <div class="modal-dialog modal-md" role="document">


        <div class="modal-content">
          <div class="modal-header">
            <picture>
          	   <img class="logo mr-3" alt="SlimWeb" src="https://faith.tw/userfiles/web/images/logo.png">
            </picture>
            <h4 class="modal-title my-auto" id="mylogin">
            	
            	<span class="elabel font-weight-bold d-block" style="font-size:.9rem"></span>
        	</h4>
        	
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <form id="loginform">
            <div class="modal-body p-4">
               
               	<div class="form-row">

               	    <div class="input-group">
               	      <div class="input-group-prepend">
               	        <label class="input-group-text"><i class="fas fa-user fa-fw"></i></label>
               	      </div>
               	        <input type="text" id="phone" maxlength="10" minlength="10" name="phone" class="form-control" placeholder="" required>
               	    </div>

               	    <div class="input-group mt-3">
               	      <div class="input-group-prepend">
               	        <label class="input-group-text"><i class="fas fa-key fa-fw"></i></label>
               	      </div>
               	        <input type="password" minlength="6" maxlength="12" name="password" id="password" class="form-control" placeholder="" required>
               	    </div>

                    <div class="custom-control custom-checkbox mt-3 mr-auto">
                      <input type="checkbox" class="custom-control-input" id="remember">
                      <label class="custom-control-label" for="remember"></label>
                    </div>


                    <a id="reglink" class="ml-auto mt-3 gray-text" style="padding-right:20px; border-right:1px solid gray"><i class="fas fa-user mr-1"></i></a>

                    
               	      <a id="passlink" class="mt-3 gray-text" style="padding-left:20px"><i class="fas fa-unlock mr-1"></i></a>
                    


                    <div class="btn-group btn-block mt-3">
                                            
                                               <a id="linelogin" href="https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id=1656198092&redirect_uri=https://faith.tw/line_callback.php&state=none&scope=openid%20profile" type="button" class="btn btn-success px-2"><i class="fab fa-line fa-lg mr-2"></i></a>
                                          </div>

                                          <div id="google_login" class="mx-auto mt-3"></div>
                      


               	 </div>

            </div>
            <div class="modal-footer">

                	<div class="btn-group btn-block">
                  	<button type="button" class="btn btn-blue-grey px-2" data-dismiss="modal"><i class="fas fa-times mr-2"></i></button>
                  	<button type="submit" id="login_submit" class="btn btn-blue-grey px-2"><i class="fas fa-sign-in-alt fa-lg mr-2"></i></button>
                  </div>

            </div>

          </form>
        </div>
      </div>

    </div>


    <div class="modal fade" id="regmodal" tabindex="-1" role="dialog" aria-labelledby="myreg" aria-hidden="true">

        <!-- Change class .modal-sm to change the size of the modal -->
        <div class="modal-dialog modal-md" role="document">


          <div class="modal-content">
            <div class="modal-header">
            <picture>
                <img class="logo mr-3" alt="SlimWeb" src="https://faith.tw/userfiles/web/images/logo.png">
            </picture>
              <h4 class="modal-title my-auto" id="myreg">
                
                <span class="elabel font-weight-bold d-block" style="font-size:.9rem"></span>
            </h4>
            
              <button type="button" class="close close_reg" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>

            <form id="regform">
              <div class="modal-body p-4">
                 
                  <div class="form-row">

                    <input type="hidden" name="fb_id" value="0">
                    <input type="hidden" name="line_id" value="0">
                    <input type="hidden" name="google_id" value="0">
                    <input type="hidden" name="member_pic">
                    <input type="hidden" name="reg_mode" value="2">

                      <div class="input-group">
                        <div class="input-group-prepend">
                          <label class="input-group-text" type="button"><i class="fas fa-user fa-fw"></i></label>
                        </div>
                          <input type="text" minlength="2" maxlength="24" name="username" class="form-control" placeholder="" required>
                      </div>


                      <div class="input-group mt-3">
                        <div class="input-group-prepend">
                          <label class="input-group-text" type="button"><i class="fas fa-mobile-alt fa-fw"></i></label>
                        </div>
                          <input type="text" minlength="10" maxlength="10" id="account" name="account" class="form-control" placeholder="" required>
                      </div>

                      <div class="input-group mt-3">
                        <div class="input-group-prepend">
                          <label class="input-group-text" type="button"><i class="fa-solid fa-envelope fa-fw"></i></label>
                        </div>
                          <input type="email" minlength="6" maxlength="64" id="reg_email" name="reg_email" class="form-control" placeholder="email" required>
                      </div>

                      <div id="passgroup" class="input-group mt-3">
                        <div class="input-group-prepend">
                          <label class="input-group-text"><i class="fas fa-key fa-fw"></i></label>
                        </div>
                          <input type="password" minlength="6" maxlength="12" name="regpassword" class="form-control" placeholder="" required>
                      </div>


                        <div class="col-12 col-md-6">
                                                      <div class="input-group mt-4">
                              <div class="custom-control custom-radio custom-control-inline">
                                <input type="radio" class="custom-control-input" id="boy" value="1" name="sex" checked>
                                <label class="custom-control-label" for="boy"></label>
                              </div>


                              <div class="custom-control custom-radio custom-control-inline">
                                <input type="radio" class="custom-control-input" id="girl" value="0" name="sex">
                                <label class="custom-control-label" for="girl"></label>
                              </div>

                            </div>
                                                  </div>

                        <div class="col-12 col-md-6">

                                                        <div class="input-group mt-3">
                                <div class="input-group-prepend">
                                    <label class="input-group-text" for="birth"></label>
                                </div>
                                <select class="browser-default custom-select" id="birth" name="birth">
                                    <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>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                    <option value="9">9</option>
                                    <option value="10">10</option>
                                    <option value="11">11</option>
                                    <option value="12">12</option>
                                </select>
                            </div>
                          
                        </div>

                      <div class="input-group mt-3">
                        <img id="captcha" class="img-fluid mx-auto" src="https://faith.tw/securimage/securimage_show.php" alt="CAPTCHA Image" />
                      </div>

                      <div class="input-group mt-3">
                        <div class="input-group-prepend">
                          <label class="input-group-text"><i class="fas fa-shield-alt fa-fw"></i></label>
                        </div>
                          <input type="text" minlength="4" size="10" name="captcha_code" class="form-control" placeholder="" required>

                        <div class="input-group-append">
                          <a class="input-group-text" href="#" onclick="document.getElementById('captcha').src = 'https://faith.tw/securimage/securimage_show.php?' + Math.random(); return false"><i class="fas fa-sync-alt fa-fw"></i></a>
                        </div>

                      </div>

                   </div>

                 
                    </div>
                    <div class="modal-footer">
                      <div class="btn-group btn-block">
                        <button type="button" class="btn btn-blue-grey close_reg" data-dismiss="modal"><i class="fas fa-times mr-2"></i></button>
                        <button id="reg_submit" type="submit" class="btn btn-blue-grey"><i class="fas fa-sign-in-alt fa-lg mr-2"></i></button>
                      </div>
                    </div>

                </form>
          </div>
        </div>

      </div>


        <div class="modal fade" id="passmodal" tabindex="-1" role="dialog" aria-labelledby="mypass" aria-hidden="true">

            <!-- Change class .modal-sm to change the size of the modal -->
            <div class="modal-dialog modal-md" role="document">

              <div class="modal-content">
                <div class="modal-header">
                  <picture>
                    <img class="logo mr-3" alt="SlimWeb" src="https://faith.tw/userfiles/web/images/logo.png">
                  </picture>
                  <h4 class="modal-title my-auto" id="mypass">
                    
                    <span class="elabel font-weight-bold d-block" style="font-size:.9rem"></span>
                </h4>
                
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <form id="forgotform">
                      <div class="modal-body p-4">
                          <div class="form-row">
                              <div class="input-group">
                                <div class="input-group-prepend">
                                  <label class="input-group-text"><i class="fas fa-user fa-fw"></i></label>
                                </div>
                                  <input type="email" minlength="6" id="fmail" name="fmail" class="form-control" placeholder="Email" required>
                              </div>

                              <small class="mt-3 ml-auto gray-text"></small>

                           </div>
                      </div>
                      <div class="modal-footer text-right">
                          <button type="submit" class="btn btn-blue-grey"><i class="fas fa-sign-in-alt fa-lg mr-2"></i></button>
                      </div>
                </form>
            </div>
        </div>

          </div>


          <div class="modal fade" id="annmodal" tabindex="-1" role="dialog" aria-labelledby="myann" aria-hidden="true">

              <!-- Change class .modal-sm to change the size of the modal -->
              <div class="modal-dialog modal-lg" role="document">


                <div class="modal-content">
                  <div class="modal-header">
                  <picture>
                      <img class="logo mr-3" alt="SlimWeb" src="https://faith.tw/userfiles/web/images/logo.png">
                  </picture>
                    <h4 class="modal-title my-auto" id="myann">
                      
                      <span class="elabel font-weight-bold d-block" style="font-size:.9rem">Terms of Service</span>
                  </h4>
                  
                    <button type="button" class="close close_reg" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body p-4">
                     <div class="container my-4 py-4">
<div class="row">
<div class="col-12 title_col">
   <h4 class="clabel mb-0">
    <span class="lan_label zh-TW">服務條款</span>
    <span class="lan_label zh-CN">服务条款</span>
    <span class="lan_label en">Terms of Service</span>
    <span class="lan_label ja">利用規約</span></h4>
   <span class="elabel font-weight-bold lan_label zh-TW zh-CN ja">Terms of Service</span>
<hr class="mt-1">
</div>
<div class="col-12 px-2">
<span class="lan_label zh-TW"><p>本網頁所載的所有資料、商標、標誌、圖像、短片、聲音檔案、連結及其他資料等（以下簡稱「資料」），只供參考之用，寶貝花園有限公司（以下簡稱「本公司」）將會隨時更改資料，並由本公司決定而不作另行通知。雖然本公司已盡力確保本網頁的資料準確性，但本公司不會明示或隱含保證該等資料均為準確無誤。本公司不會對任何錯誤或遺漏承擔責任。<br>

                本公司不會對使用或任何人士使用本網頁而引致任何損害（包括但不限於電腦病毒、系統固障、資料損失）承擔任何賠償。本網頁可能會連結至其他機構所提供的網頁，但這些網頁並不是由本公司所控制。本公司不會對這些網頁所顯示的內容作出任何保證或承擔任何責任。閣下如瀏覽這些網頁，將要自己承擔後果。</p>

                <h5>1. 個資</h5>
                <p>本公司及其加盟店有權於用戶發生違規狀態時公布用戶之姓名、照片等相關資訊不做另行通知
                </p>

                <h5>2. 版權</h5>
                <p>本網站的所有資料屬本公司及聯營公司專屬財產，均受知識產權法例及權利（包括但不限於保護版權的法例）所保障。根據此法例及權利，任何未經授權使用的資料均屬侵權行為。在未經本公司明確同意下，本網站資料之全部或部份均不可被使用、複印、銷售、傳送、修改、發表、儲存或以其他方式利用作任何用途。</p>

                <h5>3. 責任限制</h5>
                <p>在任何情況下，本公司及聯營公司並不須就閣下或任何人士由於直接或間接進入或使用本網站，並就此內容上或任何產品、資訊或服務，而招致的任何損失或損害負上任何責任（不論基於合約、侵權行為（包括疏忽）或其他方面的）。在不限制以上條文的一般性之原則及任何情況下，本公司及聯營公司並不須就閣下進入或使用本網站的任何附帶引起、特殊或相應而生之任何種類的損害作出賠償，包括但不限於利潤損失、營業受阻、營業資料損失或其他經濟損失、人身傷害或死亡。</p>

                <h5>4. 一般性賠償</h5>
                <p>閣下同意，若由於閣下違反本免責聲明及／或使用本網站或服務的關係或原因，令本公司及聯營公司招致或蒙受任何損失、索償、法律責任、損害、要求、費用及支出（包括所有的律師費用），閣下將為本公司及聯營公司抗辯、對本公司及聯營公司作出賠償，及保障本公司及聯營公司不受損害。</p>

                <h5>5. 管轄法律</h5>
                <p>本免責聲明受台灣法律約束及按照台灣法律進行詮釋。閣下同意接受台灣地區法院非專有審判權的管轄。</p>

                <h5>6. 活動免責聲明</h5>
                <p>在任何情況下，本公司不負責閣下之人身安全，財產安全，本公司及聯營公司並不須就閣下進入或使用本網站的任何附帶引起、特殊或相應而生之任何種類的損害作出賠償。<br>

                </p><h5>7. 免責聲明更新</h5>
                <p>在給予或不給予事先通知下，本公司保留隨時更新本免責聲明的權利，任何更改於本網站發佈時，立即生效。請閣下在每次瀏覽本網站時，務必查看此免責聲明。如閣下繼續使用本網站，即代表閣下同意接受更改後的免責聲明約束。<br>

                若中英文版本有差異之處，以英文版本為準。<br></p><h5>8. 私隱政策<br></h5><p style="font-size: 14.4px;"><span style="font-size: 14.4px;">閣下於本公司網站內所填入之資料，將被本公司保存於資料庫內，用於商品寄送聯繫、商品推薦聯繫。</span><br>閣下可透過電話及線上客服，要求本公司刪除您的個人資訊，這些訊息詳細項目為，姓名、電話、地址、購物紀錄。</p></span>
<span class="lan_label zh-CN"><p>本网页所载的所有资料、商标、标志、图像、短片、声音档案、连结及其他资料等（以下简称“资料”），只供参考之用，宝贝花园有限公司（以下简称“本公司”）将会随时更改资料，并由本公司决定而不作另行通知。虽然本公司已尽力确保本网页的资料准确性，但本公司不会明示或隐含保证该等资料均为准确无误。本公司不会对任何错误或遗漏承担责任。<br>

                本公司不会对使用或任何人士使用本网页而引致任何损害（包括但不限于电脑病毒、系统固障、资料损失）承担任何赔偿。本网页可能会连结至其他机构所提供的网页，但这些网页并不是由本公司所控制。本公司不会对这些网页所显示的内容作出任何保证或承担任何责任。阁下如浏览这些网页，将要自己承担后果。</p>

                <h5>1. 个资</h5>
                <p>本公司及其加盟店有权于用户发生违规状态时公布用户之姓名、照片等相关资讯不做另行通知
                </p>

                <h5>2. 版权</h5>
                <p>本网站的所有资料属本公司及联营公司专属财产，均受知识产权法例及权利（包括但不限于保护版权的法例）所保障。根据此法例及权利，任何未经授权使用的资料均属侵权行为。在未经本公司明确同意下，本网站资料之全部或部份均不可被使用、复印、销售、传送、修改、发表、储存或以其他方式利用作任何用途。</p>

                <h5>3. 责任限制</h5>
                <p>在任何情况下，本公司及联营公司并不须就阁下或任何人士由于直接或间接进入或使用本网站，并就此内容上或任何产品、资讯或服务，而招致的任何损失或损害负上任何责任（不论基于合约、侵权行为（包括疏忽）或其他方面的）。在不限制以上条文的一般性之原则及任何情况下，本公司及联营公司并不须就阁下进入或使用本网站的任何附带引起、特殊或相应而生之任何种类的损害作出赔偿，包括但不限于利润损失、营业受阻、营业资料损失或其他经济损失、人身伤害或死亡。</p>

                <h5>4. 一般性赔偿</h5>
                <p>阁下同意，若由于阁下违反本免责声明及／或使用本网站或服务的关系或原因，令本公司及联营公司招致或蒙受任何损失、索偿、法律责任、损害、要求、费用及支出（包括所有的律师费用），阁下将为本公司及联营公司抗辩、对本公司及联营公司作出赔偿，及保障本公司及联营公司不受损害。</p>

                <h5>5. 管辖法律</h5>
                <p>本免责声明受台湾法律约束及按照台湾法律进行诠释。阁下同意接受台湾地区法院非专有审判权的管辖。</p>

                <h5>6. 活动免责声明</h5>
                <p>在任何情况下，本公司不负责阁下之人身安全，财产安全，本公司及联营公司并不须就阁下进入或使用本网站的任何附带引起、特殊或相应而生之任何种类的损害作出赔偿。<br>

                </p><h5>7. 免责声明更新</h5>
                <p>在给予或不给予事先通知下，本公司保留随时更新本免责声明的权利，任何更改于本网站发布时，立即生效。请阁下在每次浏览本网站时，务必查看此免责声明。如阁下继续使用本网站，即代表阁下同意接受更改后的免责声明约束。<br>

                若中英文版本有差异之处，以英文版本为准。<br></p><h5>8. 私隐政策<br></h5><p style="font-size: 14.4px;"><span style="font-size: 14.4px;">阁下于本公司网站内所填入之资料，将被本公司保存于资料库内，用于商品寄送联系、商品推荐联系。</span><br>阁下可透过电话及线上客服，要求本公司删除您的个人资讯，这些讯息详细项目为，姓名、电话、地址、购物纪录。</p></span>
<span class="lan_label en"><p>All information, trademarks, logos, images, short videos, sound files, links and other information (hereinafter referred to as the "Information") contained on this website are for reference only. Baby Garden Co., Ltd. (hereinafter referred to as "the Company") will change the information at any time and it will be decided by the Company without prior notice. Although the Company has tried its best to ensure the accuracy of the information on this website, the Company does not expressly or implicitly guarantee that the information is accurate. The Company will not be responsible for any errors or omissions. <br>

                 The Company will not be liable for any damages (including but not limited to computer viruses, system failures, and data loss) caused by the use or use of this website by anyone. This webpage may be linked to webpages provided by other organizations, but these webpages are not controlled by our company. The Company does not make any warranty or assume any responsibility for the content displayed on these web pages. If you browse these pages, you will bear the consequences at your own risk. </p>

                 <h5>1. Personal information</h5>
                 <p>The company and its franchise stores have the right to publish the user's name, photo and other relevant information without prior notice when the user violates the rules.
                 </p>

                 <h5>2. Copyright</h5>
                 <p>All information on this website is the exclusive property of the company and its associated companies and is protected by intellectual property laws and rights (including but not limited to laws protecting copyrights). Any unauthorized use of the material is an infringement under this legislation and rights. Without the express consent of the Company, all or part of the information on this website may not be used, copied, sold, transmitted, modified, published, stored or otherwise exploited for any purpose. </p>

                 <h5>3. Limitation of Liability</h5>
                 <p>Under no circumstances shall the Company and its associated companies be liable for any loss or damage incurred by you or any other person due to direct or indirect access or use of this website, the content or any products, information or services. any liability (whether based in contract, tort (including negligence) or otherwise). Without limiting the generality of the above provisions and under any circumstances, the Company and its associated companies shall not be liable for any incidental, special or consequential damages of any kind arising from your access to or use of this website, including but not limited to Not limited to loss of profits, business interruption, loss of business information or other economic losses, personal injury or death. </p>

                 <h5>4. General damages</h5>
                 <p>You agree that if our company and its associated companies incur or suffer any losses, claims, liabilities, damages, demands, costs and expenses due to or arising out of your breach of this disclaimer and/or use of this website or services (Including all attorneys' fees), you will defend, indemnify, and protect the company and its associated companies from damage. </p>

                 <h5>5. Governing law</h5>
                 <p>This disclaimer shall be governed by and construed in accordance with the laws of Taiwan. You agree to submit to the non-exclusive jurisdiction of the courts of Taiwan. </p>

                 <h5>6. Event Disclaimer</h5>
                 <p>Under any circumstances, our company is not responsible for your personal safety or property safety. Our company and its associated companies are not responsible for any incidental, special or consequential damages of any kind arising from your access to or use of this website. Make compensation. <br>

                 </p><h5>7. Disclaimer Update</h5>
                 <p>The Company reserves the right to update this disclaimer at any time with or without prior notice. Any changes will be effective immediately when they are posted on this website. Please be sure to review this disclaimer each time you visit this website. If you continue to use this website, you agree to be bound by the changed disclaimer. <br>

                 If there is any discrepancy between the Chinese and English versions, the English version shall prevail. <br></p><h5>8. Privacy Policy<br></h5><p style="font-size: 14.4px;"><span style="font-size: 14.4px;"> The information you fill in on our company's website will be stored in our database and used for product shipping and product recommendation contact. </span><br>You can request the company to delete your personal information through telephone and online customer service. The detailed items of these information are name, phone number, address, and shopping records. </p></span>
<span class="lan_label ja"><p>このウェブサイトに含まれるすべての情報、商標、ロゴ、画像、ショートビデオ、サウンドファイル、リンク、およびその他の情報（以下「情報」といいます）は、参照のみを目的としています。株式会社ガーデン（以下「当社」といいます）は、予告なく当社の判断により随時情報を変更させていただきます。 当社は、本ウェブサイト上の情報の正確性を確保するために最善を尽くしておりますが、情報が正確であることを明示的または黙示的に保証するものではありません。 当社は、いかなる誤りまたは脱落についても責任を負いません。 <br>

                 当社は、どなたによる本ウェブサイトの利用または利用によって生じたいかなる損害（コンピュータウイルス、システム障害、データの損失などを含みますがこれらに限定されません）についても責任を負いません。 このウェブページは、他の組織が提供するウェブページにリンクされている場合がありますが、これらのウェブページは当社が管理するものではありません。 当社は、これらのウェブページに表示される内容について、いかなる保証もせず、いかなる責任も負わないものとします。 これらのページを閲覧する場合、その結果はご自身の責任で負うことになります。 </p>

                 <h5>1. 個人情報</h5>
                 <p>当社およびその加盟店は、ユーザーが規約に違反した場合、予告なくユーザーの名前、写真、その他関連情報を公開する権利を有します。
                 </p>

                 <h5>2. 著作権</h5>
                 <p>この Web サイト上のすべての情報は、当社およびその関連会社の独占的財産であり、知的財産法および知的財産権 (著作権を保護する法律を含むがこれに限定されない) によって保護されています。 素材の不正使用は、この法律および権利に基づく侵害となります。 当社の明示的な同意がない限り、このウェブサイト上の情報の全部または一部を、いかなる目的においても使用、コピー、販売、送信、修正、出版、保存、その他悪用することはできません。 </p>

                 <h5>3. 責任の制限</h5>
                 <p>いかなる状況においても、当社およびその関連会社は、この Web サイト、コンテンツ、製品、情報、またはサービスへの直接的または間接的なアクセスまたは使用によってお客様またはその他の者が被った損失または損害に対して責任を負いません。責任（契約、不法行為（過失を含む）またはその他に基づくかどうか）。 上記の規定の一般性を制限することなく、いかなる状況においても、当社およびその関連会社は、本ウェブサイトへのアクセスまたは使用から生じるあらゆる種類の付随的、特別または結果的損害（以下を含むがこれに限定されない）に対して責任を負わないものとします。利益の損失、事業の中断、ビジネス情報の損失、またはその他の経済的損失、人身傷害または死亡に限定されません。 </p>

                 <h5>4. 一般的な損害</h5>
                 <p>お客様は、お客様による本免責条項の違反および/または本 Web サイトまたはサービスの使用により、またはそれらに起因して、当社およびその関連会社が損失、請求、責任、損害、要求、コストおよび費用を被る、または被る場合に同意するものとします。 (すべての弁護士費用を含む)、あなたは会社およびその関連会社を弁護し、補償し、損害から保護するものとします。 </p>

                 <h5>5. 準拠法</h5>
                 <p>この免責事項は、台湾の法律に準拠し、同法に従って解釈されるものとします。 あなたは台湾の裁判所の非専属管轄権に従うことに同意するものとします。 </p>

                 <h5>6. イベントに関する免責事項</h5>
                 <p>いかなる状況においても、当社はお客様の個人の安全または財産の安全について責任を負いません。当社およびその関連会社は、お客様による本 Web サイトへのアクセスまたは使用から生じるいかなる種類の付随的、特別または派生的損害についても責任を負いません。 . 補償をする。 <br>

                 </p><h5>7. 免責事項の更新</h5>
                 <p>当社は、予告の有無にかかわらず、いつでもこの免責事項を更新する権利を留保します。変更は、この Web サイトに掲載された時点で直ちに有効になります。 このウェブサイトにアクセスするたびに、この免責事項を必ずお読みください。 このウェブサイトの使用を継続する場合は、変更された免責事項に拘束されることに同意したことになります。 <br>

                 中国語版と英語版の間に矛盾がある場合は、英語版が優先されます。 <br></p><h5>8. プライバシー ポリシー<br></h5><p style="font-size: 14.4px;"><span style="font-size: 14.4px;">当社ウェブサイトでご入力いただいた情報は当社のデータベースに保管され、商品の発送や商品のお勧めのご連絡に利用させていただきます。 </span><br>氏名、電話番号、住所、お買物履歴などの個人情報の詳細につきましては、お電話やインターネットのカスタマーサービスを通じて当社に対し削除のご依頼が可能です。 </p></span></div></div></div>
                  </div>
                  <div class="modal-footer text-right">
                    
                      <button id="agree" type="button" class="btn btn-blue-grey"></button>
                    
                  </div>
                </div>
              </div>

            </div>


       <div class="modal fade" id="codemodal" tabindex="-1" role="dialog" aria-labelledby="mycodes" aria-hidden="true">
           <div class="modal-dialog modal-md" role="document">

             <div class="modal-content">
               <div class="modal-header">
               <picture>
                    <img class="logo mr-3" alt="SlimWeb" src="https://faith.tw/userfiles/web/images/logo.png">
               </picture>
                  <h4 class="modal-title my-auto" id="mycode">
                   <span id="tit1"></span>
                   <span class="elabel font-weight-bold d-block" id="tit2" style="font-size:.9rem"></span>
                  </h4>
               
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                   <span aria-hidden="true">&times;</span>
                 </button>

               </div>

               <div class="modal-body p-4">
                   <div class="form-row">

                       <div class="input-group">
                         <div class="input-group-prepend">
                           <label class="input-group-text"><i class="fas fa-key fa-fw"></i></label>
                         </div>
                           <input type="text" name="vcode" class="form-control" placeholder="">
                       </div>

                       <small class="mt-3 ml-auto gray-text"></small>

                    </div>
               </div>
               <div class="modal-footer text-right">
                   <button id="code_btn" type="button" class="btn btn-blue-grey"><i class="fas fa-sign-in-alt fa-lg mr-2"></i></button>
               </div>
           </div>
       </div>
     </div>




       <div class="modal fade" id="welcomemodal" tabindex="-1" role="dialog" aria-labelledby="welcome" aria-hidden="true">
           <div class="modal-dialog modal-md" role="document">

             <div class="modal-content">
               <div class="modal-header">
               <picture>
                 <img class="logo mr-3" alt="SlimWeb" src="https://faith.tw/userfiles/web/images/logo.png">
               </picture>
                  <h4 class="modal-title my-auto" id="welcome">
                   
                   <span class="elabel font-weight-bold d-block" style="font-size:.9rem"></span>
                  </h4>
               
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                   <span aria-hidden="true">&times;</span>
                 </button>

               </div>

               <div class="modal-body p-4 text-center">
                   <p class="gray-text mb-5 mt-4"></p>
               </div>
               
           </div>
       </div>
     </div>



     <div class="modal fade" id="newsmodal" tabindex="-1" role="dialog" aria-labelledby="news" aria-hidden="true">
         <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
             <div class="modal-content">
                 <a class="btn-floating btn-blue-grey btn-sm" data-dismiss="modal" type="button" role="button"><i class="fas fa-times"></i></a>
                 <div class="modal-body text-center custom_block">
                     <img alt="最新消息" class="img-fluid" src="">
                 </div>
             </div>
         </div>
     </div>
    </div>

    




    <script>
        var product_mode    =   0;
        var lan101  =   '';
        var lan110  =   '';
        var lan111  =   '';
        var lan14  =   '';
        var lan112  =   '';
        var lan13  =   '';
        var lan106  =   '';
        var lan71  =   '';
        var lan72  =   '';
        var lan73  =   '';
        var lan74  =   '';
        var lan75  =   '';
        var lan76  =   '';
        var lan95  =   '';
        var lan100  =  '';
        var lan19  =   '';
        var lan194  =   '';
        var lan195  =   '';
        var lan197  =   '';
        var lan203  =   '';
        var lan204  =   '';

        var input_limited   =   '';
        var conv_mode       =   '';
        var conv_limited    =   '';

        var is_index        =   '';
        var weburl          =   'https://faith.tw/';

        var lan_code        =   '';

        //console.log(lan_code);

    </script>

            <script src="https://accounts.google.com/gsi/client" async defer></script>
    
    <script type="text/javascript" src="https://faith.tw/js/main.js?id="></script>
    <script src="https://faith.tw/js/jquery.scrollTo.min.js"></script>

    

    

    
    
    <script>

    //var window.smoother    =   undefined;
    let snap_enabled    =   true;

    jQuery(document).ready(function($) {

        if (bootstrapDetectBreakpoint().index <= 3){
            $('nav.navbar.nav1.fixed-top').autoHidingNavbar();
        }

        if (bootstrapDetectBreakpoint().index <= 2){
            $('.container').removeAttr('data-speed').removeAttr('data-lag');
        }

       

        
        
            function handleCredentialResponse(response) {
                       //console.log("Encoded JWT ID token: " + response.credential);
                       var responsePayload = parseJwt(response.credential);
                       var url = 'https://'+document.location.hostname+'/google_login.php';
                       $.post(url, {google_id: responsePayload.sub, picture: responsePayload.picture}, function(data){
                           //console.log(data);
                           var result = JSON.parse(data);

                           if (result['err_msg'] === 'NO'){

                               $('input[name=google_id]').val(responsePayload.sub);
                               $('input[name=username]').val(responsePayload.name);
                               $('input[name=member_pic]').val(responsePayload.picture);

                               $('input[name=regpassword]').prop('required', false);
                               $('#passgroup').hide();

                               $('input[name=reg_email]').val(responsePayload.email);

                               $('#loginmodal').on('hidden.bs.modal', function(){
                                  $('#loginmodal').off('hidden');

                                  if ($.trim($('#annmodal .modal-body').text()) !== ''){
                                        $('#annmodal').modal();
                                  } else {
                                        $('#regmodal').modal();
                                  }

                               });

                               $('#loginmodal').modal('hide');

                               return;
                           }

                           if (result.err_msg !== 'OK'){
                               toastr.error(result.err_msg);
                               return;
                           }
                           
                           location.reload();
                       })
                    }


            window.onload = function () {
              google.accounts.id.initialize({
                client_id: "260673809767-ao7adnp7o5d3gs277tkd39u94sbm9mqa.apps.googleusercontent.com",
                callback: handleCredentialResponse
              });
              google.accounts.id.renderButton(
                document.getElementById("google_login"),
                { theme: "outline", size: "larage" }  // customization attributes
              );
              //google.accounts.id.prompt(); // also display the One Tap dialog

              //check_win_size_a();
            }


            function parseJwt (token) {
               var base64Url = token.split('.')[1];
               var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
              var jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
                return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
              }).join(''));

              return JSON.parse(jsonPayload);
            };


        

    });


    (function(d, s, id){
         var js, fjs = d.getElementsByTagName(s)[0];
         if (d.getElementById(id)) {return;}
         js = d.createElement(s); js.id = id;
         js.src = "https://connect.facebook.net/en_US/sdk.js";
         fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));

   

    // (function(d, s, id) {
    //   var js, fjs = d.getElementsByTagName(s)[0];
    //   if (d.getElementById(id)) return;
    //   js = d.createElement(s); js.id = id;
    //   js.src = 'https://connect.facebook.net/zh_TW/sdk/xfbml.customerchat.js';
    //   fjs.parentNode.insertBefore(js, fjs);
    // }(document, 'script', 'facebook-jssdk'));
    

    
    
         
    
        

    function validateEmail(email) {
        const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(String(email).toLowerCase());
    }

    $('#newsletter').on('click', function(){
        var email = $('#email').val();
        if ($.trim(email) === ''){
            toastr.error('');
            return;
        }

        if (!validateEmail(email)){
            toastr.error('');
            return;
        }

        $.post('news_mail.php', {email: email}, function(data){
            var result = JSON.parse(data);

            if (result.err_msg === '-2'){
                toastr.error('');
                return false;
            }

            if (result.err_msg !== 'OK'){
                toastr.error(result.err_msg);
                return false;
            }

            toastr.success('');
        });
        
    });


    function set_theme_ani(){
        
            init_light_btn();

            gsap.set('#full_menu', { y: '-=100vh' });

             $('#menu_btn').on('click', function(){

                gsap.fromTo('#full_menu',{
                    y: '-=100%',
                }, {
                    y: 0,
                    duration: .6,
                    autoAlpha: 1,
                    ease: 'back.out(1)',
                    onComplete: function(){
                        // __lockY = $('#full_menu').offset().top;
                        // console.log(__lockY);
                        // $('html').css('overflow', 'hidden');
                        if (window.smoother !== undefined){
                            window.smoother.paused(true);
                        } else {
                            $('html').css('overflow-y', 'hidden');
                        }
                    }
                })


             })

        $('#close_menu_btn').on('click', function(){

            let ani_menu =  gsap.to('#full_menu', {
                    y: '-=100%',
                    duration: 1,
                    delay: .5,
                    //autoAlpha: 0,
                    ease: 'back.in(1)',
                    onComplete: function(){
                        //ani_menu.revert();
                        if (window.smoother !== undefined){
                            window.smoother.paused(false);
                        } else {
                            $('body').css('overflow-y', 'auto');
                        }
                    }
                })

             })


             ScrollTrigger.create({
               trigger: "#menu_group",
               start: "top-=25px  top",  // 當選單距離頂部等於 navbar 高度時開始固定
               //endTrigger: ".footer-copyright", 
               end: "max",             // 到頁面底部
               pin: true,
               scrub: true, 
               //markers: true,   
               pinType: "transform",
               invalidateOnRefresh: true,
               pinReparent: true,
               anticipatePin: 1,                   // 固定元素
               pinSpacing: false,                // 不產生額外空間
               //normalizeScroll: true,
               //refreshPriority: 100,
               // onUpdate: function(){
               //      if (!ScrollTrigger.isInViewport('#menu_btn')){
               //              console.log('Button Gone');
               //              ScrollTrigger.refresh();
               //      }
               // },
               onLeave: function(){
                //console.log('leave');
               },
                onEnterBack: function(){
                //console.log('enter back');
              }                  // 開發時顯示標記，正式環境請移除
             });

             ScrollTrigger.refresh();


             var main_last  =    null;
             var sub_last   =   null;

            if ($('#main_class_column').length > 0){
                 $('#main_class_column').on('mouseenter', 'h4', function(){

                    $('#sub_class_column').html($('.prod_sublist', this).html());
                    $('#result_column').html('');

                    $('#sub_class_column .last_target').removeClass('last_target');
                    $('#main_class_column .last_target').removeClass('last_target');

                    }).on('mouseleave', 'h4', function() {
                    // 滑出時的處理
                        $(this).addClass('last_target');
                    
                });
            }


             $('#sub_class_column').on('mouseenter', 'h4', function(){

                    let sid =   $(this).data('sid');
                    $('#sub_class_column .last_target').removeClass('last_target');
                    $.post('https://'+document.location.hostname+'/get_prod_info.php', {sid: sid}, function(data){
                        var result = JSON.parse(data);
                        //console.log(result);
                        if (result.err_msg !== 'OK'){
                            toastr.error(result.err_msg);
                            return false;
                        }

                        let list    =   '';
                        $.each(result.prod_list, function(i, item){

                            let url = 'https://' + document.location.hostname + '/sub.php?man=' + item.main_id + '&sub=' + item.sub_id + '&pid=' +item.id;
                            list += '<h4 class="p-3 mb-0 d-flex" data-img="' + result.imgs[i] + '"><a class="d-block w-100" href="' +url +'">';

                            list += '<h6 class="font-weight-bold">' +item.pname + '</h6>';
                            list += '<div class="d-flex pt-2">';

                            price = item.price;
                            if (item.sprice > 0) price = item.sprice;

                            list += '<small>$' + price + '</small>';
                            list += '<small class="ml-auto"><i class="fa-duotone fa-regular fa-eye"></i> ' + item.views + '</small></div></a></h4>';
                        })

                        list += '<p class="mt-3 text-right">更多商品請至分類目錄內瀏覽</p>';

                        //list += '</div>';

                        ///console.log(list);

                        $('#result_column').html(list);
                        $('span.lan_label:not(.'+result.lan_code+')').remove();

                    })

                    
             }).on('mouseleave', 'h4', function() {
                // 滑出時的處理
                    $(this).addClass('last_target')
                
            });



             $('#result_column').on('mouseenter', 'h4', function(){
                if ($('#main_class_column').length > 0){
                    $('#main_class_column').removeClass('d-block').addClass('d-none');
                }
                $('#sub_class_column').removeClass('d-block').addClass('d-none');

                let image = '<img alt="SlimWeb" src="' + $(this).data('img') + '">'
                $('#img_column').html(image).removeClass('d-none').addClass('d-flex');

             }).on('mouseleave', 'h4', function() {

                $('#img_column').removeClass('d-flex').addClass('d-none');

                if ($('#main_class_column').length > 0){
                    $('#main_class_column').removeClass('d-none').addClass('d-block');
                }

                $('#sub_class_column').removeClass('d-none').addClass('d-block');
             })

    }

    window.addEventListener('pageshow', function(){
        ScrollTrigger.refresh();
    });


    $(window).on('load', function(){
         window.scrollTo(0, 0);
         $('span.lan_label:not(.'+lan_code+')').remove();

         // ScrollTrigger.normalizeScroll({
         //   allowNestedScroll: true, // 內層可捲
         //   lockAxis: true           // 僅用主要軸向
         // });

         console.log('base_base_load');

         const page_name =  "";


        if ($('#full_menu').length > 0 && $('.custom_page').length === 0){
            set_theme_ani();
        }


    })

    </script>

    
    
        <style>
    #gpt_inputbox .input-group-text:hover {
        color: #08a0f7;
    }

    #gpt_inputbox .input-group-text {
        cursor: pointer;
    }

    .talk {
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 8px;
        font-size: .9rem;
        font-weight: 400;
    }

    #avatar {
        z-index: 99;
    }

    .usr_talk {
        background: #ddf2ff;
    }

    .frieren_talk {
        background: #ffe3f3;
    }

    #frieren_modal span.nav-link.active {
        color: #007bff;
    }

    #ques_acc span {
        color: #007bff;
        cursor: pointer;
    }

    #frieren_modal .modal-header {
        position: absolute;
        top: 5px;
        right: 10px;
        box-shadow: none;
    }
</style>

<div class="modal fade right m-0" id="frieren_modal" tabindex="-1" aria-labelledby="myModalLabel" data-backdrop="true" style="display: block;" role="dialog" aria-modal="true">

    <div class="modal-dialog modal-full-height modal-right modal-notify d-flex flex-column h-100" role="document">
              <!--Content-->
        <div class="modal-content h-100">
                <!--Header-->
                <div class="modal-header py-2">

                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" class="text-dark">×</span>
                  </button>
                </div>

                <nav class="p-2 d-none" id="service_nav">
                  <div class="nav nav-tabs" id="nav-tab" role="tablist">
                    <span class="nav-item nav-link" id="frieren-tab" data-toggle="tab" href="#page1" role="tab"
                      aria-controls="nav-home" aria-selected="true"><i class="fad fa-user-headset fa-lg"></i> 智能客服</span>
                    <span class="nav-item nav-link active" id="ques-tab" data-toggle="tab" href="#page2" role="tab"
                      aria-controls="nav-profile" aria-selected="false"><i class="fad fa-life-ring fa-lg"></i> 常見問題</span>
                  </div>
                </nav>

                <!--Body-->
                <div class="modal-body p-0" style="overflow-y:auto">

                    <div class="aspect-box" id="service_video">
                        <video id="frieren_service">
                            <source src="" type="video/mp4" />
                        </video>
                    </div>

                    <div id="service_content" class="d-none pb-2">
                        
                        <div class="tab-content pt-1 h-100">
                          <div class="tab-pane fade" id="page1" role="tabpanel" aria-labelledby="nav-home-tab">
                                                      </div>
                          <div class="tab-pane fade show active" id="page2" role="tabpanel" aria-labelledby="nav-profile-tab">
                            <div class="accordion md-accordion bg-white h-100" id="ques_acc" role="tablist" aria-multiselectable="true">
                                                        </div>
                          </div>

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

                     <div id="gpt_inputbox" class="input-group input-group-sm line_shadow_down mx-auto p-4">

                        <div class="progress md-progress py-0 my-1" style="display:none">
                            <div id="record_progress" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>

                         <div class="input-group-prepend">
                             <div class="input-group-text bg-white clabel">
                             <i class="fas fa-comment-dots fa-lg fa-flip-horizontal"></i>
                             </div>
                        </div>
                         <input type="text" class="form-control px-2" id="gpt_input" name="gpt_input">

                          <div class="input-group-append">
                             <div class="input-group-text bg-white clabel" id="record_btn">
                                 <i class="fas fa-microphone-stand fa-lg"></i>
                             </div>
                         </div>


                         <div class="input-group-append">
                            <div class="input-group-text bg-white clabel" id="send_btn">
                                <i class="fas fa-paper-plane fa-lg"></i>
                            </div>
                        </div>

                        <small class="d-block w-100 text-center pt-2"><a class="text-blue" target="_blank" href="https://gods.tw">SlimWeb</a> / <a class="text-blue" target="_blank" href="https://openai.com/">OpenAI</a>
                                   </small>

                    </div>

                </div>

        </div>
              <!--/.Content-->
    </div>
</div>

          <div id="avatar" data-toggle="modal" data-target="#frieren_modal">
             <img src="" class="rounded-circle z-depth-1 img-fluid">
         </div>

         <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

         <script>
             $('#avatar').on('click', function(){
                if ($('#service_video').length > 0){
                    $('#service_video').show();
                    $('#service_content, #service_nav').removeClass('d-block').addClass('d-none');
                    $('#frieren_service').get(0).play();
                }
             })

             $('#frieren_service').on('ended', function(e) {
                $('#service_video').remove();
                $('#service_content, #service_nav').removeClass('d-none').addClass('d-block');
             })

             $('#frieren_modal').on('show.bs.modal', function(){
                $('html').css('overflowY', 'hidden');
                $('#frieren_modal').css('zIndex', 1049);
             })

            $('#frieren_modal').on('hide.bs.modal', function(){
                $('html').css('overflowY', 'auto');
                if ($('#service_video').length > 0){
                    $('#frieren_service').get(0).pause();
                }
            })

            $('#frieren_modal .modal-body').on({
                   mouseenter: function () {
                    if (window.smoother !== undefined){
                       smoother.paused(true);
                    } else {
                        $('html').css('overflow-y', 'hidden');
                    }
                   },
                   mouseleave: function () {
                    if (window.smoother !== undefined){
                       smoother.paused(false);
                    } else {
                        $('html').css('overflow-y', 'auto');
                    }
                   }
               });



            function hasDivTag(str) {
                return /<\/?[a-z][\s\S]*>/i.test(str);
            }

            function scrollToBottom(selector) {
                const el = $(selector)[0];
                if (!el) return;
                el.scrollTop = el.scrollHeight;
            }


            $('#send_btn').on('click', function(){

                $('#frieren-tab').trigger('click');

                 let content    =   $('#gpt_input').val();
                 if ($.trim(content) === '') return;
                 //let input_cnt  =   100;
                 let input_cnt  =   ;
                 if (content.length > parseInt(input_cnt) ) {
                   toastr.error('一次最多傳送'+input_cnt+'個字元');
                   return;
                 }


                chat_history.list.push({
                    role: 'user',
                    content: content + ' [' + getCurrentDatetimeWithWeekday() + ']'
                })

                chat_history.user_prefer =  get_user_prefer();


                 $('#send_btn').html('<i class="fas fa-circle-notch fa-spin fa-lg ml-1"></i>').addClass('disabled');

                 $('#page1').append('<div class="usr_talk talk">'+content+'</div><img src="./images/thinking.gif" alt="SlimWeb Thinkin" width="120px" id="ai_thinking">');
                 $('#gpt_input').val('');

                 setTimeout(() => scrollToBottom('#frieren_modal .modal-body'), 500); 

                 $.post('https://'+window.location.host+'/frieren_service.php', {content: JSON.stringify(chat_history)}, function(data){
                    var result = JSON.parse(data);

                    if (result.err_msg !== 'OK'){
                        console.log(result.err_msg);
                        toastr.error(result.err_msg);
                        return;
                    }

                    chat_history.list.push({
                        role: 'assistant',
                        content: result.content
                    })

                    while (chat_history.list.length > 6) {
                        // 刪到下一個 user 為止
                        chat_history.list.shift();

                        if (chat_history.list[0]?.role === 'assistant') {
                            chat_history.list.shift();
                        }
                    }

                    chat_history.user_prefer = null;
                    localStorage.setItem('chat_history', JSON.stringify(chat_history));

                    $('#send_btn').html('<i class="fas fa-paper-plane fa-lg"></i>').removeClass('disabled');
                    $('#ai_thinking').remove();

                    let f_content = result.content;

                    if (!hasDivTag(f_content)){
                         f_content = marked.parse(result.content)
                     }

                    $('#page1').append('<div class="frieren_talk talk">'+f_content+'</div>');

                    if ($('#page1').is(':visible')){
                        setTimeout(() => scrollToBottom('#frieren_modal .modal-body'), 500); 
                    } else {
                        show_bubble(f_content);
                    }

                 })
            });

            $("#gpt_input").keypress(function(e) {
                if (e.keyCode === 13){
                    if ($('#send_btn').hasClass('disabled')) return;
                    $('#send_btn').trigger('click');
                }
            });


        jQuery(document).ready(function($) {

            let audioChunks = [];
            let mediaRecorder;
            let audioBlob;
            let countdownInterval;

            $('.frieren_talk').each(function(){
                let raw = $(this).html();   // 注意：這裡一定要用 html()

                    if (hasDivTag(raw)) {
                        // 裡面本來就是 HTML，直接跳過
                        return;
                    }
                $(this).html(marked.parse(raw));
            })

            $('#record_btn').on('click', function(){
                if (!$('.md-progress').is(':visible')){

                    navigator.mediaDevices.getUserMedia({ audio: true }).then(function(stream) {

                            $(this).html('<i class="fas fa-stop-circle fa-lg pink-text"></i>');
                            $('.md-progress').show();

                             // 清空之前的錄音數據
                             audioChunks = [];
                             
                             // 創建 MediaRecorder 實例
                             mediaRecorder = new MediaRecorder(stream);
                             
                             // 當有新的錄音數據可用時
                             mediaRecorder.ondataavailable = function(e) {
                               audioChunks.push(e.data);
                             };

                             // 錄音結束時
                             mediaRecorder.onstop = function() {
                               // 停止所有音軌
                               stream.getTracks().forEach(track => track.stop());
                               // 處理錄音數據
                               processRecording();
                             };

                             mediaRecorder.start();

                                let timeRemaining = 0;
                                countdownInterval = setInterval(function() {
                                         timeRemaining++;
                                         $('#record_progress').css('width', timeRemaining * 6 + '%');
                                         if (timeRemaining >= 20) {
                                           clearInterval(countdownInterval);
                                           $('#record_btn').trigger('click');
                                         }
                                       }, 1000);

                            })
                            .catch(function(err) {
                                    console.log('No Microphone permission');
                                  });

                } else {
                    clearInterval(countdownInterval);
                    $('.md-progress').hide();
                    $('#record_progress').css('width', '0%');
                    $(this).html('<i class="fas fa-microphone-stand fa-lg"></i>');

                    if (mediaRecorder && mediaRecorder.state !== 'inactive') {
                        mediaRecorder.stop();
                    }
                }
            })


            function processRecording() {
                audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
                audioUrl = URL.createObjectURL(audioBlob);

                if (!audioBlob) return;

                $('#page1').append('<audio src="'+audioUrl+'" controls></audio></div><img src="./images/thinking.gif" width="120px" alt="SlimWeb Thinkin" id="ai_thinking">');

                setTimeout(() => scrollToBottom('#frieren_modal .modal-body'), 500); 

                chat_history.user_prefer =  get_user_prefer();

                const formData = new FormData();
                formData.append('audio', audioBlob, 'recording.wav');
                formData.append('content', JSON.stringify(chat_history));

                $('#gpt_input').val('');
                $('#send_btn').html('<i class="fas fa-circle-notch fa-spin fa-lg ml-1"></i>').addClass('disabled');

                $.ajax({
                      url: 'frieren_service.php',
                      type: 'POST',
                      data: formData,
                      processData: false,  // 不處理數據
                      contentType: false,  // 不設置內容類型
                      success: function(data) {
                        var result = JSON.parse(data);

                        $('#send_btn').html('<i class="fas fa-paper-plane fa-lg"></i>').removeClass('disabled');

                        $('#ai_thinking').remove();

                        chat_history.list.push({
                            role: 'user',
                            content: result.audio_text
                        })

                        chat_history.list.push({
                            role: 'assistant',
                            content: result.content
                        })

                       while (chat_history.list.length > 6) {
                           // 刪到下一個 user 為止
                           chat_history.list.shift();

                           if (chat_history.list[0]?.role === 'assistant') {
                               chat_history.list.shift();
                           }
                       }

                        chat_history.user_prefer = null;
                        localStorage.setItem('chat_history', JSON.stringify(chat_history));

                        let f_content = result.content;

                        if (!hasDivTag(f_content)){
                             f_content = marked.parse(result.content)
                         }

                        $('#page1').append('<div class="frieren_talk talk">'+f_content+'</div>');



                        if ($('#page1').is(':visible')){
                            setTimeout(() => scrollToBottom('#frieren_modal .modal-body'), 500); 
                        } else {
                            show_bubble(f_content);
                        }

                      },
                      error: function(xhr, status, error) {
                        console.error('上傳失敗:', error);
                      }
                    });

            }


        });
         </script>
    

</body>

</html>