choozmo
/
New-Bhouse-Web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499
							<!DOCTYPE html>
<html lang="en">
  <head>
    {{ partial "headers.html" . }}
  </head>

  <body>
    <!-- <div class="header-template"></div> -->
    {{ partial "nav.html" . }}

    <section class="bhouseweb_loc_banner">
      <div class="card bg-transparent text-white border-0 rounded-0">
        <img
          src="/img/bn_portfolio2x.png"
          class="banner-img card-img"
          alt="..."
        />
        <div class="d-flex justify-content-end bt_container">
          <div class="bt_slogan text-center">
            <img src="/img/chevron-double-down (1).svg" alt="" />
          </div>
        </div>
        <img
          class="bt_slogan_portfolio"
          src="/img/bt_slogan_portfolio_h@2x.png"
          alt=""
        />
      </div>
    </section>
    <div class="bhouseweb_loc_content">
      <section class="bhouseweb_loc_sec01">
        <div class="bhouseweb_loc_box">
          <p class="fw-bold m-0">類型</p>
          <div class="bhouseweb_loc_type">
            <input style="opacity: 0;" class="type ms-1" type="radio" id="m_全部類型" name="m_type" value="全部類型" checked/>
            <label for="m_全部類型" class="bhouseweb_item_type select">全部</label>
            <input style="opacity: 0;" class="type ms-1" type="radio" id="m_大樓" name="m_type" value="大樓" />
            <label for="m_大樓" class="bhouseweb_item_type">大樓</label>
            <input style="opacity: 0;" class="type ms-1" type="radio" id="m_透天" name="m_type"  value="透天" />
            <label for="m_透天" class="bhouseweb_item_type">透天</label>
          </div>
        </div>
        <div class="bhouseweb_loc_box">
          <p class="fw-bold m-0">坪數</p>
          <div class="bhouseweb_loc_type">
            <input style="opacity: 0;" class="ping ms-1" type="radio" id="m_全部坪數" name="m_ping" value="全部坪數" checked/>
            <label class="bhouseweb_item_type select" for="m_全部坪數">全部</label>    
        
            <input style="opacity: 0;" class="ping ms-1" type="radio" id="m_20坪以下" name="m_ping" value="20坪以下" />
            <label class="bhouseweb_item_type" for="m_20坪以下">20坪以下</label>    
        
            <input style="opacity: 0;" class="ping ms-1" type="radio" id="m_20-35坪" name="m_ping" value="20-35坪" />
            <label class="bhouseweb_item_type" for="m_20-35坪">20-35坪</label>    
        
            <input style="opacity: 0;" class="ping ms-1" type="radio" id="m_36-50坪" name="m_ping" value="36-50坪" />
            <label class="bhouseweb_item_type" for="m_36-50坪">36-50坪</label>    
        
            <input style="opacity: 0;" class="ping ms-1" type="radio" id="m_51坪以上" name="m_ping" value="51坪以上" />
            <label class="bhouseweb_item_type" for="m_51坪以上">51坪以上</label>

            <!-- <a class="bhouseweb_item_type select">全部</a>
            <a class="bhouseweb_item_type">20坪以下</a>
            <a class="bhouseweb_item_type">20-35坪</a>
            <a class="bhouseweb_item_type">36-50坪</a>
            <a class="bhouseweb_item_type">50坪以上</a>
            <a class="bhouseweb_item_type">50坪以上</a>
            <a class="bhouseweb_item_type">50坪以上</a>
            <a class="bhouseweb_item_type">50坪以上</a> -->
          </div>
        </div>
        <div class="bhouseweb_loc_box">
          <p class="fw-bold m-0">預算</p>
          <div class="bhouseweb_loc_type">
            <input style="opacity: 0;" class="budget ms-1" type="radio" id="m_全部預算" name="m_budget" value="全部預算" checked/>
            <label class="bhouseweb_item_type select" for="m_全部預算">全部</label>    
        
            <input style="opacity: 0;" class="budget ms-1" type="radio" id="m_59萬以下" name="m_budget" value="59萬以下" />
            <label class="bhouseweb_item_type" for="m_59萬以下">59萬以下</label>    
        
            <input style="opacity: 0;" class="budget ms-1" type="radio" id="m_60-79萬" name="m_budget" value="60-79萬" />
            <label class="bhouseweb_item_type" for="m_60-79萬">60-79萬</label>    
        
            <input style="opacity: 0;" class="budget ms-1" type="radio" id="m_80-99萬" name="m_budget" value="80-99萬" />
            <label class="bhouseweb_item_type" for="m_80-99萬">80-99萬</label>    
        
            <input style="opacity: 0;" class="budget ms-1" type="radio" id="m_100萬以上" name="m_budget" value="100萬以上" />
            <label class="bhouseweb_item_type" for="m_100萬以上">100萬以上</label>

            <!-- <a class="bhouseweb_item_type">全部</a>
            <a class="bhouseweb_item_type">59萬以下</a>
            <a class="bhouseweb_item_type">60-79萬</a>
            <a class="bhouseweb_item_type">80-99萬</a>
            <a class="bhouseweb_item_type">100萬</a> -->
          </div>
        </div>
        <div class="bhouseweb_loc_box">
          <p class="fw-bold m-0">格局</p>
          <div class="bhouseweb_loc_type">
            <input style="opacity: 0;" class="rooms ms-1" type="radio" id="m_全部格局" name="m_rooms" value="全部格局" checked/>
            <label class="bhouseweb_item_type select" for="m_全部格局">全部</label>    
        
            <input style="opacity: 0;" class="rooms ms-1" type="radio" id="m_兩房" name="m_rooms" value="兩房" />
            <label class="bhouseweb_item_type" for="m_兩房">兩房</label>    
        
            <input style="opacity: 0;" class="rooms ms-1" type="radio" id="m_三房" name="m_rooms" value="三房" />
            <label class="bhouseweb_item_type" for="m_三房">三房</label>    
        
            <input style="opacity: 0;" class="rooms ms-1" type="radio" id="m_四房" name="m_rooms" value="四房" />
            <label class="bhouseweb_item_type" for="m_四房">四房</label>    
        
            <input style="opacity: 0;" class="rooms ms-1" type="radio" id="m_四房以上" name="m_rooms" value="四房以上" />
            <label class="bhouseweb_item_type" for="m_四房以上">四房以上</label>

            <!-- <a class="bhouseweb_item_type">全部</a>
            <a class="bhouseweb_item_type">兩房</a>
            <a class="bhouseweb_item_type">三房</a>
            <a class="bhouseweb_item_type">四房</a>
            <a class="bhouseweb_item_type">四房以上</a> -->
          </div>
        </div>
      </section>

      <section class="p-1">
        <div class="bhouseweb_loc_search_box">
          <form class="bhouseweb_search_form d-flex">
            <div class="bhouseweb_search_img">
              <i class="fas fa-search"></i>
            </div>
            <input id="bhouseweb_search" class="me-md-2" type="search" placeholder="搜 尋「北 歐 風」「工 業 風」「三 代 同 堂」「寵 物」" aria-label="Search"/>
            <!-- <button class="btn btn-outline-success" type="submit">Search</button> -->
          </form>
        </div>
      </section>
    </div>
    <hr class="bhouseweb_loc_line" />
    <div class="bhouseweb_loc_content" style="overflow-x: hidden">
      <div class="bhouseweb_loc_sec02">
        <div class="update_info row px-0 mx-0" id="articleList">
          {{ $paginator := .Paginate .Data.Pages }} {{ range $paginator.Pages }}
          <div class="col-12 col-sm-6 p-1">
            <div class="bhouseweb_loc_sec02_card secimg mx-0 px-0 border-0">
              <a href="{{ .RelPermalink }}">
                <img
                  class="img-fluid"
                  src="{{ .Params.Image | relURL }}"
                  alt=""
                />
                <div class="slide_item_text">
                  <p>{{ replace .Title "｜小寶優居・成家故事" "" }}</p>
                </div>
                <div class="sec02-p-dec p-1 mt-1 text-center">
                  <h5 class="card-title">
                    {{ replace .Title "｜小寶優居・成家故事" "" }}
                  </h5>
                  <p class="card-text">{{ .Description | safeHTML }}</p>
                </div>
              </a>
            </div>
          </div>
          {{ end }}
          <!-- <div class="col-6 col-md-6 p-1">
          <div class="bhouseweb_loc_sec02_card secimg mx-0 px-0 border-0">
            <a href="/simple_korean_style_hous.html">
              <img src="/img/collection/0c90a5a4fb84164b6e8a60147aa31122.webp" alt="">
              <div class="sec02-p-dec p-1 mt-1 text-center">
                <h5 class="card-title">工飯程店師微的醺大好玩c h具i</h5>
                <p class="card-text">新北 吳工程師|新成屋</p>
                <p class="card-text">兩房兩廳|28坪</p>
                <p class="card-text">總預算80萬</p>
              </div>
            </a>
          </div>
        </div>
        <div class="col-6 col-md-6 p-1">
          <div class="bhouseweb_loc_sec02_card secimg mx-0 px-0 border-0">
            <a href="/simple_korean_style_hous.html">
              <img src="/img/collection/3d272248107bdc7d610ee640fae3b182_1.webp" alt="">
              <div class="sec02-p-dec p-1 mt-1 text-center">
                <h5 class="card-title">工飯程店師微的醺大好玩c h具i</h5>
                <p class="card-text">新北 吳工程師|新成屋</p>
                <p class="card-text">兩房兩廳|28坪</p>
                <p class="card-text">總預算80萬</p>
              </div>
            </a>
          </div>
        </div>
        <div class="col-6 col-md-6 p-1">
          <div class="bhouseweb_loc_sec02_card secimg mx-0 px-0 border-0">
            <a href="/simple_korean_style_hous.html">
              <img src="/img/collection/50a125ea19c3bdeb9a8bd17533ce993d.webp" alt="">
              <div class="sec02-p-dec p-1 mt-1 text-center">
                <h5 class="card-title">工飯程店師微的醺大好玩c h具i</h5>
                <p class="card-text">新北 吳工程師|新成屋</p>
                <p class="card-text">兩房兩廳|28坪</p>
                <p class="card-text">總預算80萬</p>
              </div>
            </a>
          </div>
        </div>
        <div class="col-6 col-md-6 p-1">
          <div class="bhouseweb_loc_sec02_card secimg mx-0 px-0 border-0">
            <a href="/simple_korean_style_hous.html">
              <img src="/img/collection/6bb85ba684ed447a4d82e0da5d93f9e6.webp" alt="">
              <div class="sec02-p-dec p-1 mt-1 text-center">
                <h5 class="card-title">工飯程店師微的醺大好玩c h具i</h5>
                <p class="card-text">新北 吳工程師|新成屋</p>
                <p class="card-text">兩房兩廳|28坪</p>
                <p class="card-text">總預算80萬</p>
              </div>
            </a>
          </div>
        </div>
        <div class="col-6 col-md-6 p-1">
          <div class="bhouseweb_loc_sec02_card secimg mx-0 px-0 border-0">
            <a href="/simple_korean_style_hous.html">
              <img src="/img/collection/46c0c37fe8aff39685a3955c32e95a34.webp" alt="">
              <div class="sec02-p-dec p-1 mt-1 text-center">
                <h5 class="card-title">工飯程店師微的醺大好玩c h具i</h5>
                <p class="card-text">新北 吳工程師|新成屋</p>
                <p class="card-text">兩房兩廳|28坪</p>
                <p class="card-text">總預算80萬</p>
              </div>
            </a>
          </div>
        </div>
        <div class="col-6 col-md-6 p-1">
          <div class="bhouseweb_loc_sec02_card secimg mx-0 px-0 border-0">
            <a href="/simple_korean_style_hous.html">
              <img src="/img/collection/db978b041a9ea14bc66b68c81e768fa6.webp" alt="">
              <div class="sec02-p-dec p-1 mt-1 text-center">
                <h5 class="card-title">工飯程店師微的醺大好玩c h具i</h5>
                <p class="card-text">新北 吳工程師|新成屋</p>
                <p class="card-text">兩房兩廳|28坪</p>
                <p class="card-text">總預算80萬</p>
              </div>
            </a>
          </div>
        </div>
        <div class="col-6 col-md-6 p-1">
          <div class="bhouseweb_loc_sec02_card secimg mx-0 px-0 border-0">
            <a href="/simple_korean_style_hous.html">
              <img src="/img/collection/09d9615f19d41ca754897860c7958800.webp" alt="">
              <div class="sec02-p-dec p-1 mt-1 text-center">
                <h5 class="card-title">工飯程店師微的醺大好玩c h具i</h5>
                <p class="card-text">新北 吳工程師|新成屋</p>
                <p class="card-text">兩房兩廳|28坪</p>
                <p class="card-text">總預算80萬</p>
              </div>
            </a>
          </div>
        </div>
        <div class="col-6 col-md-6 p-1">
          <div class="bhouseweb_loc_sec02_card secimg mx-0 px-0 border-0">
            <a href="/simple_korean_style_hous.html">
              <img src="/img/collection/09d9615f19d41ca754897860c7958800.webp" alt="">
              <div class="sec02-p-dec p-1 mt-1 text-center">
                <h5 class="card-title">工飯程店師微的醺大好玩c h具i</h5>
                <p class="card-text">新北 吳工程師|新成屋</p>
                <p class="card-text">兩房兩廳|28坪</p>
                <p class="card-text">總預算80萬</p>
              </div>
            </a>
          </div>
        </div>
        <div class="col-6 col-md-6 p-1">
          <div class="bhouseweb_loc_sec02_card secimg mx-0 px-0 border-0">
            <a href="/simple_korean_style_hous.html">
              <img src="/img/collection/09d9615f19d41ca754897860c7958800.webp" alt="">
              <div class="sec02-p-dec p-1 mt-1 text-center">
                <h5 class="card-title">工飯程店師微的醺大好玩c h具i</h5>
                <p class="card-text">新北 吳工程師|新成屋</p>
                <p class="card-text">兩房兩廳|28坪</p>
                <p class="card-text">總預算80萬</p>
              </div>
            </a>
          </div>
        </div>
        <div class="col-6 col-md-6 p-1">
          <div class="bhouseweb_loc_sec02_card secimg mx-0 px-0 border-0">
            <a href="/simple_korean_style_hous.html">
              <img src="/img/collection/0c90a5a4fb84164b6e8a60147aa31122.webp" alt="">
              <div class="sec02-p-dec p-1 mt-1 text-center">
                <h5 class="card-title">工飯程店師微的醺大好玩c h具i</h5>
                <p class="card-text">新北 吳工程師|新成屋</p>
                <p class="card-text">兩房兩廳|28坪</p>
                <p class="card-text">總預算80萬</p>
              </div>
            </a>
          </div>
        </div>
        <div class="col-6 col-md-6 p-1">
          <div class="bhouseweb_loc_sec02_card secimg mx-0 px-0 border-0">
            <a href="/simple_korean_style_hous.html">
              <img src="/img/collection/3d272248107bdc7d610ee640fae3b182_1.webp" alt="">
              <div class="sec02-p-dec p-1 mt-1 text-center">
                <h5 class="card-title">工飯程店師微的醺大好玩c h具i</h5>
                <p class="card-text">新北 吳工程師|新成屋</p>
                <p class="card-text">兩房兩廳|28坪</p>
                <p class="card-text">總預算80萬</p>
              </div>
            </a>
          </div>
        </div>
        <div class="col-6 col-md-6 p-1">
          <div class="bhouseweb_loc_sec02_card secimg mx-0 px-0 border-0">
            <a href="/simple_korean_style_hous.html">
              <img src="/img/collection/50a125ea19c3bdeb9a8bd17533ce993d.webp" alt="">
              <div class="sec02-p-dec p-1 mt-1 text-center">
                <h5 class="card-title">工飯程店師微的醺大好玩c h具i</h5>
                <p class="card-text">新北 吳工程師|新成屋</p>
                <p class="card-text">兩房兩廳|28坪</p>
                <p class="card-text">總預算80萬</p>
              </div>
            </a>
          </div>
        </div>
        <div class="col-6 col-md-6 p-1">
          <div class="bhouseweb_loc_sec02_card secimg mx-0 px-0 border-0">
            <a href="/simple_korean_style_hous.html">
              <img src="/img/collection/6bb85ba684ed447a4d82e0da5d93f9e6.webp" alt="">
              <div class="sec02-p-dec p-1 mt-1 text-center">
                <h5 class="card-title">工飯程店師微的醺大好玩c h具i</h5>
                <p class="card-text">新北 吳工程師|新成屋</p>
                <p class="card-text">兩房兩廳|28坪</p>
                <p class="card-text">總預算80萬</p>
              </div>
            </a>
          </div>
        </div>
        <div class="col-6 col-md-6 p-1">
          <div class="bhouseweb_loc_sec02_card secimg mx-0 px-0 border-0">
            <a href="/simple_korean_style_hous.html">
              <img src="/img/collection/46c0c37fe8aff39685a3955c32e95a34.webp" alt="">
              <div class="sec02-p-dec p-1 mt-1 text-center">
                <h5 class="card-title">工飯程店師微的醺大好玩c h具i</h5>
                <p class="card-text">新北 吳工程師|新成屋</p>
                <p class="card-text">兩房兩廳|28坪</p>
                <p class="card-text">總預算80萬</p>
              </div>
            </a>
          </div>
        </div>
        <div class="col-6 col-md-6 p-1">
          <div class="bhouseweb_loc_sec02_card secimg mx-0 px-0 border-0">
            <a href="/simple_korean_style_hous.html">
              <img src="/img/collection/bdf492075d06c9353aa1523bcb9c0837.webp" alt="">
              <div class="sec02-p-dec p-1 mt-1 text-center">
                <h5 class="card-title">工飯程店師微的醺大好玩c h具i</h5>
                <p class="card-text">新北 吳工程師|新成屋</p>
                <p class="card-text">兩房兩廳|28坪</p>
                <p class="card-text">總預算80萬</p>
              </div>
            </a>
          </div>
        </div>
        <div class="col-6 col-md-6 p-1">
          <div class="bhouseweb_loc_sec02_card secimg mx-0 px-0 border-0">
            <a href="/simple_korean_style_hous.html">
              <img
                src="/img/collection/20_taiwanese_ping_slightly_sweet_milk_tea_color_beautiful_house_on_instagram_in_changhua.webp"
                alt="">
              <div class="sec02-p-dec p-1 mt-1 text-center">
                <h5 class="card-title">工飯程店師微的醺大好玩c h具i</h5>
                <p class="card-text">新北 吳工程師|新成屋</p>
                <p class="card-text">兩房兩廳|28坪</p>
                <p class="card-text">總預算80萬</p>
              </div>
            </a>
          </div>
        </div>
        <div class="col-6 col-md-6 p-1">
          <div class="bhouseweb_loc_sec02_card secimg mx-0 px-0 border-0">
            <a href="/simple_korean_style_hous.html">
              <img
                src="/img/collection/17_taiwanese_ping_tile_porch_muji_industrial_mixed_style_house_in_taichung.webp"
                alt="">
              <div class="sec02-p-dec p-1 mt-1 text-center">
                <h5 class="card-title">工飯程店師微的醺大好玩c h具i</h5>
                <p class="card-text">新北 吳工程師|新成屋</p>
                <p class="card-text">兩房兩廳|28坪</p>
                <p class="card-text">總預算80萬</p>
              </div>
            </a>
          </div>
        </div> -->
        </div>
      </div>
    </div>

    <p class="article__readMore text-center fw-bold my-3">
      看更多案例
      <span style="font-size: 16px" class="fw-normal me-2"> &or;</span>
    </p>

    <!-- <div class="footer-template"></div> -->

    {{ partial "footer.html" . }}

    <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
    integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
    crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

  <script async defer src="./js/index.js"></script> -->
  <script src="/js/cz_filter.js"></script>
    {{ partial "scripts.html" . }}
    <script>
      window.onload = function () {
  document.getElementById('bhouseweb_search').value = '';

  // 取得 apiData
  let contentsData = [];
  // let category = localStorage.getItem('category');

  (function getContentsData() {
    // 線上版網址 http://192.53.174.202:9001/api/
    // 本地端網址 http://localhost:9001/api/
    fetch('http://192.53.174.202:9001/api/contents?url=/collection').then(res => res.json()).then(list => {
      contentsData = list;
      console.log('contentsData', contentsData);
      // filterCategory();
    })
  })();

  let matchContent = "";

  // 增加延遲(待輸入完成後再進行搜尋)
  function delay(fn, ms) {
    let timer = 0
    return function (...args) {
      clearTimeout(timer)
      timer = setTimeout(fn.bind(this, ...args), ms || 0)
    }
  }
console.log($('bhouseweb_search'));
  // 搜尋
  $('#bhouseweb_search').keyup(delay(function (e) {
    console.log(1)
    console.log('Time elapsed!', this.value);
    // 取得輸入框的值
    let inputVal = $('#bhouseweb_search').val();
    matchContent = "";
    let falseItem = [];
    contentsData.map((item, index) => {
      // 搜尋特定分類文章
      // if (item.categories) {
      //   if (item.categories.includes(category)) {
      // 搜尋所有分類文章
      if (item.title.includes(inputVal) || item.description.includes(inputVal)) {
        matchContent +=  ` 
        <div class="col-12 col-sm-6 p-1"> \
          <div class="bhouseweb_loc_sec02_card secimg mx-0 px-0 border-0"> \
            <a href="${item.url}"> \
              <img \
                alt="${item.title}" \
                src="${item.image}" \
                layout="responsive"> \
              <img> \
            <div class="slide_item_text"> \
                <p>${item.title}</p>\
            </div>  \
            <div class="sec02-p-dec p-1 mt-1 text-center">\
              <h5 class="card-title">${item.title}</h5>\
              <p>${item.description}</p>\
            </div>\
            </div> \
          </a> \
          </div> \
        </div>`;

      } else {
            falseItem.push(item);
          }
        if (falseItem.length === contentsData.length) {
        matchContent = `
        <div class="alert d-flex align-items-center" role="alert" style="max-width: 300px;margin: 0 auto 25px;justify-content: center;">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" style="color: #808e4c;" viewBox="0 0 16 16" role="img" aria-label="Warning:">
            <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
          </svg>
          <div>
            找不到符合條件的作品集
          </div>
        </div>
        `;
      }
      //   }
      // }
    })
    document.getElementById("articleList").innerHTML = matchContent;
  }, 500));
}
    </script>
  </body>
</html>