https://a1.ekbis.blog/index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, viewport-fit=cover">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <meta name="theme-color" content="#ffffff">
  <link rel="icon" href="img/favicon.png">
  <title>Ekbis</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/framework7-bundle.css">
  <!--<link rel="stylesheet" href="css/f7.css">-->
  <link rel="stylesheet" href="css/framework7-icons.css">
  <!--<link rel="stylesheet" href="css/style.css?v=10">-->
  <link rel="stylesheet" href="css/m1.css?v=1">
  <link rel="stylesheet" href="css/custom.css?v=1">
  <!--<link rel="stylesheet" href="css/custom_btn.css">-->
  <link rel="stylesheet" href="css/custom_margin.css?v=1">
</head>

<body class="color-deeporange">
  <div id="app">
    <div class="panel panel-right panel-push panel-init">
      <h2>Cart</h2>
    </div>
    <div class="views tabs">
      <div id="tab-home" class="tab tab-home view view-init tab-active view-main">
        <div class="page" data-name="tab_home">
          <div class="navbar navbar-large">
            <div class="navbar-bg">
            </div>
            <div class="navbar-inner">
              <div class="left">
                <a href="/account/" class="link icon-only navbar-profile">
                  <img class="user_avatar" src="" alt="">
                </a>
              </div>
              <div class="title">Home</div>
              <div class="title-large">
                <div class="title-large-text">Home</div>
              </div>
              <div class="right">
                <a href="#" id="myTheme" onClick="changeTheme()" class="link icon-only switch-theme">
                  <i class="icon f7-icons">moon_stars</i>
                </a>
                <a href="/timeline/" class="link icon-only">
                  <i class="icon f7-icons">arrowtriangle_right_circle</i>
                </a>
                <a href="#" onClick="reload()" class="link icon-only">
                  <i class="icon f7-icons">arrow_2_squarepath</i>
                </a>
              </div>
            </div>
          </div>
          <div class="page-content" id="home_tab_content" data-ptr-mousewheel="true">
            <swiper-container class="full-width swiper_01" slides-per-view="2.4" space-between="15" slides-offset-after="15" slides-offset-before="15" speed="400" id="home_latest">
            </swiper-container>
            <div class="list detailed-list list-dividers full-width">
              <ul id="home_who">
              </ul>
            </div>
            <div id="home_site">
            </div>
            <swiper-container class="full-width swiper_02" slides-per-view="2.4" space-between="15" slides-offset-after="15" slides-offset-before="15" speed="400" id="home_by_stock">
            </swiper-container>
            <div id="home_section">
            </div>
          </div>
        </div>
      </div>
      <div id="tab-channel" class="tab tab-channel view view-init">
        <div class="page page-tab_channel" data-name="tab_channel">
          <div class="navbar navbar-large">
            <div class="navbar-bg">
            </div>
            <div class="navbar-inner">
              <div class="left">
                <a href="/account/" class="link icon-only navbar-profile">
                  <img class="user_avatar" src="" alt="">
                </a>
              </div>
              <div class="title">Channel</div>
              <div class="title-large">
                <div class="title-large-text">Channel</div>
              </div>
              <div class="right">
                <a href="#" id="myTheme" onClick="changeTheme()" class="link icon-only switch-theme">
                  <i class="icon f7-icons">moon_stars</i>
                </a>
                <a href="/timeline/" class="link icon-only">
                  <i class="icon f7-icons">arrowtriangle_right_circle</i>
                </a>
                <a href="#" onClick="reload()" class="link icon-only">
                  <i class="icon f7-icons">arrow_2_squarepath</i>
                </a>
              </div>
            </div>
          </div>
          <div class="page-content" id="channel_tab_content" data-ptr-mousewheel="true">
          </div>
        </div>
      </div>
      <div id="tab-category" class="tab tab-category view view-init">
        <div class="page page-tab_category" data-name="tab_category">
          <div class="navbar navbar-large">
            <div class="navbar-bg">
            </div>
            <div class="navbar-inner">
              <div class="left">
                <a href="/account/" class="link icon-only navbar-profile">
                  <img class="user_avatar" src="" alt="">
                </a>
              </div>
              <div class="title">Category</div>
              <div class="title-large">
                <div class="title-large-text">Category</div>
              </div>
              <div class="right">
                <a href="#" id="myTheme" onClick="changeTheme()" class="link icon-only switch-theme">
                  <i class="icon f7-icons">moon_stars</i>
                </a>
                <a href="/timeline/" class="link icon-only">
                  <i class="icon f7-icons">arrowtriangle_right_circle</i>
                </a>
                <a href="#" onClick="reload()" class="link icon-only">
                  <i class="icon f7-icons">arrow_2_squarepath</i>
                </a>
              </div>
            </div>
          </div>
          <div class="page-content" id="category_tab_content" data-ptr-mousewheel="true">
          </div>
        </div>
      </div>
      <div id="tab-who" class="tab tab-who view view-init">
        <div class="page page-tab_who" data-name="tab_who">
          <div class="navbar navbar-large">
            <div class="navbar-bg">
            </div>
            <div class="navbar-inner">
              <div class="left">
                <a href="/account/" class="link icon-only navbar-profile">
                  <img class="user_avatar" src="" alt="">
                </a>
              </div>
              <div class="title">Who</div>
              <div class="title-large">
                <div class="title-large-text">Who</div>
              </div>
              <div class="right">
                <a href="#" id="myTheme" onClick="changeTheme()" class="link icon-only switch-theme">
                  <i class="icon f7-icons">moon_stars</i>
                </a>
                <a href="/timeline/" class="link icon-only">
                  <i class="icon f7-icons">arrowtriangle_right_circle</i>
                </a>
                <a href="#" onClick="reload()" class="link icon-only">
                  <i class="icon f7-icons">arrow_2_squarepath</i>
                </a>
              </div>
            </div>
          </div>
          <div class="page-content" id="who_tab_content" data-ptr-mousewheel="true">
          </div>
        </div>
      </div>
      <div id="tab-search" class="tab tab-search view view-init">
        <div class="page page-tab_search" data-name="tab_search">
          <div class="navbar navbar-large">
            <div class="navbar-bg">
            </div>
            <div class="navbar-inner">
              <div class="left">
                <a href="/account/" class="link icon-only navbar-profile">
                  <img class="user_avatar" src="" alt="">
                </a>
              </div>
              <div class="title">Search</div>
              <div class="title-large">
                <div class="title-large-text">Search</div>
              </div>
              <div class="subnavbar">
                <form data-search-container=".search-list_search" data-search-in=".item-title" class="searchbar searchbar-init">
                  <div class="searchbar-inner">
                    <div class="searchbar-input-wrap">
                      <input type="search" placeholder="Search" />
                      <i class="searchbar-icon"></i>
                      <span class="input-clear-button">
                      </span>
                    </div>
                    <span class="searchbar-disable-button">Cancel</span>
                  </div>
                </form>
              </div>
              <div class="right">
                <a href="#" id="myTheme" onClick="changeTheme()" class="link icon-only switch-theme">
                  <i class="icon f7-icons">moon_stars</i>
                </a>
                <a href="/timeline/" class="link icon-only">
                  <i class="icon f7-icons">arrowtriangle_right_circle</i>
                </a>
                <a href="#" onClick="reload()" class="link icon-only">
                  <i class="icon f7-icons">arrow_2_squarepath</i>
                </a>
              </div>
            </div>
          </div>
          <div class="page-content" id="search_tab_content" data-ptr-mousewheel="true">
          </div>
        </div>
      </div>
      <div id="tab-more" class="tab tab-more view view-init">
        <div class="page page-tab_more" data-name="tab_more">
          <div class="navbar navbar-large">
            <div class="navbar-bg">
            </div>
            <div class="navbar-inner">
              <div class="left">
                <a href="/account/" class="link icon-only navbar-profile">
                  <img class="user_avatar" src="" alt="">
                </a>
              </div>
              <div class="title">More Info</div>
              <div class="title-large">
                <div class="title-large-text">More Info</div>
              </div>
              <div class="right">
                <a href="#" id="myTheme" onClick="changeTheme()" class="link icon-only switch-theme">
                  <i class="icon f7-icons">moon_stars</i>
                </a>
                <a href="/timeline/" class="link icon-only">
                  <i class="icon f7-icons">arrowtriangle_right_circle</i>
                </a>
                <a href="#" onClick="reload()" class="link icon-only">
                  <i class="icon f7-icons">arrow_2_squarepath</i>
                </a>
              </div>
            </div>
          </div>
          <div class="page-content" data-ptr-mousewheel="true">
            <div class="light-gray-title">Application</div>
            <div class="list links-list colored-icons-list list-outline list-dividers full-width">
              <ul>
                <li>
                  <a href="/about_us/">
                    <div class="colored-icon red">
                      <i class="icon f7-icons">music_albums_fill</i>
                    </div>
                    <span data-lang="about_as">About Us</span>
                  </a>
                </li>
                <li>
                  <a href="/faq/">
                    <div class="colored-icon red">
                      <i class="icon f7-icons">arrow_up_to_line_alt</i>
                    </div>
                    <span data-lang="faq">FAQ</span>
                  </a>
                </li>
                <li>
                  <a href="/terms/">
                    <div class="colored-icon red">
                      <i class="icon f7-icons">light_min</i>
                    </div>
                    <span data-lang="terms">Term & Condition</span>
                  </a>
                </li>
                <li>
                  <a href="/privacy/">
                    <div class="colored-icon red">
                      <i class="icon f7-icons">stopwatch_fill</i>
                    </div>
                    <span data-lang="privacy">Privacy Polecy</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div id="toolbar_bottom" class="toolbar tabbar tabbar-icons toolbar-bottom">
        <div class="toolbar-inner">
          <a href="#tab-home" class="tab-link">
            <i class="icon f7-icons">house</i>
            <span data-lang="home" class="tabbar-label">
            </span>
          </a>
          <a href="#tab-channel" class="tab-link">
            <i class="icon f7-icons">cube</i>
            <span data-lang="channel" class="tabbar-label">
            </span>
          </a>
          <a href="#tab-category" class="tab-link">
            <i class="icon f7-icons">doc_text_search</i>
            <span data-lang="category" class="tabbar-label">
            </span>
          </a>
          <a href="#tab-who" class="tab-link">
            <i class="icon f7-icons">person</i>
            <span data-lang="who" class="tabbar-label">
            </span>
          </a>
          <a href="#tab-search" class="tab-link">
            <i class="icon f7-icons">search</i>
            <span data-lang="search" class="tabbar-label">
            </span>
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="sheet-modal sheet m_language" data-name="m_language">
    <div class="toolbar">
      <div class="toolbar-inner">
        <div class="left">
        </div>
        <div class="right">
          <a href="#" class="icon-only sheet-close">
            <i class="icon f7-icons">multiply_square</i>
          </a>
        </div>
      </div>
    </div>
    <div class="sheet-modal-inner">
      <div class="block">
        <p class="mb-4" id="r_lang"></p>
      </div>
    </div>
  </div>
  <div class="popup p_cart" style="display: none;">
    <div class="toolbar">
      <div class="toolbar-inner">
        <div class="left">
        </div>
        <div class="right">
          <a href="#" class="icon-only popup-close">
            <i class="icon f7-icons">multiply_square</i>
          </a>
        </div>
      </div>
    </div>
    <div class="page">
      <div class="page-content popup-demo">
        <div class="popup-content">
          <h1 data-lang="cart">Cart</h1>
          <p data-lang="cart_msg">Enjoy ad-free browsing, priority customer support, early access to new features and updates, personalized recommendations, and special discounts on premium content or services.</p>
        </div>
        <a href="#" class="button button-fill color-dark popup-close">Close Popup</a>
      </div>
    </div>
  </div>
  <script src="js/framework7-bundle.min.js"></script>
  <!--<script src="js/f7.js"></script>-->
  <script src="js/jquery-3.5.1.min.js"></script>
  <script src="js/routes.js"></script>
  <script src="js/lang.js"></script>
  <script src="js/req.js"></script>
  <script src="js/utils.js"></script>
  <script src="js/app.js"></script>
  <script src="js/account.js"></script>
  <script src="js/item.js"></script>
  <script src="js/cart.js"></script>
</body>

</html>

https://a1.ekbis.blog/pages/about_us.html
<div class="page page-about_us no-toolbar" data-name="about_us">
    <div class="navbar navbar-large">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon f7-icons arrow-back">arrow_left</i>
          </a>
        </div>
      <div id="ptitle_about_us" class="title">About Us</div>
      <div class="title-large">
        <div id="ptitle_large_about_us" class="title-large-text">About Us</div>
      </div>
        <div class="right">          
        </div>
      </div>
    </div>
    <div class="page-content" id="about_us_content">
    <p>
  <a href="#" class="button bg-dark">dark</a>
  <a href="#" class="button bg-primary">primary</a>
  <a href="#" class="button bg-secondary">secondary</a>
  <a href="#" class="button bg-info">info</a>
  <a href="#" class="button bg-success">success</a>
  <a href="#" class="button bg-warning">warning</a>
  <a href="#" class="button bg-danger">danger</a>
</p>
  </div>
</div>

https://a1.ekbis.blog/pages/account.html
<div class="page page-account" data-name="account">
    <div class="navbar navbar-large">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon f7-icons arrow-back">arrow_left</i>
          </a>
        </div>
      <div id="ptitle_account" class="title">Account</div>
      <div class="title-large">
        <div id="ptitle_large_account" class="title-large-text">Account</div>
      </div>
        <div class="right">          
        </div>
      </div>
    </div>
    <div class="page-content">
    <div class="profile-header">
  <div id="user_img" class="profile-image">
  </div>
  <div id="user_name" class="profile-name">
  </div>
  <div id="user_subtitle" class="profile-subtitle">
  </div>
</div>
<div class="list links-list colored-icons-list list-outline list-dividers full-width">
  <ul>
    <li>
      <a href="/interest/">
        <div class="colored-icon red">
          <i class="icon f7-icons">cursor_rays</i>
        </div>
        <span data-lang="interest">
        </span>
      </a>
    </li>
    <li>
      <a href="/password_change/">
        <div class="colored-icon red">
          <i class="icon f7-icons">light_min</i>
        </div>
        <span data-lang="password_change">Password Change</span>
      </a>
    </li>
    <li>
      <a href="/account_edit/">
        <div class="colored-icon red">
          <i class="icon f7-icons">stopwatch_fill</i>
        </div>
        <span data-lang="account_edit">Edit Account</span>
      </a>
    </li>
    <li>
      <a href="/account_delete/">
        <div class="colored-icon red">
          <i class="icon f7-icons">trash_circle_fill</i>
        </div>
        <span data-lang="account_delete">Delete Account</span>
      </a>
    </li>
    <li>
      <a href="#" onClick="delete_log()">
        <div class="colored-icon red">
          <i class="icon f7-icons">at_circle_fill</i>
        </div>
        <span data-lang="delete_log">
        </span>
      </a>
    </li>
    <!--
    <li>
      <a href="#" onClick="email_check()">
        <div class="colored-icon red">
          <i class="icon f7-icons">at_circle_fill</i>
        </div>
        <span data-lang="email_check">
        </span>
      </a>
    </li>
    -->
    <li>
      <a href="#" class="sheet-open" data-sheet=".m_language">
        <div class="colored-icon red">
          <i class="icon f7-icons">textformat_alt</i>
        </div>
        <span data-lang="language">
        </span>
        <div data-lang="language_name" class="item-after mr-15">
        </div>
      </a>
    </li>
    <li id="account_img_menu">
    </li>
  </ul>
</div>
<div class="centered-text">
  <a href="#" data-lang="logout" onClick="signout()" class="button bg-danger">Logout</a>
</div>
  </div>
</div>

https://a1.ekbis.blog/pages/account_delete.html
<div class="page page-account_delete" data-name="account_delete">
    <div class="navbar navbar-large">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon f7-icons arrow-back">arrow_left</i>
          </a>
        </div>
      <div class="title">Delete Account</div>
      <div class="title-large">
        <div class="title-large-text">Delete Account</div>
      </div>
        <div class="right">          
        </div>
      </div>
    </div>
    <div class="page-content">
    <form class="mt-40 mb-40">
  <input type="hidden" id="id" value="">
  <input type="hidden" id="no_telp" value="">
  <label data-lang="email" for="email">Email</label>
  <input type="text" id="email_4" name="email_4" value="" placeholder="example@email.com">
  <label data-lang="reason" for="comment">Reason</label>
  <textarea id="reason_4" data-ph_lang="comment" placeholder="Your comment here" id="comment">
  </textarea>
  <a href="#" data-lang="save" id="account_delete_button" class="button button-fill">Save</a>
</form>
  </div>
</div>

https://a1.ekbis.blog/pages/account_edit.html
<div class="page page-account_edit" data-name="account_edit">
    <div class="navbar navbar-large">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon f7-icons arrow-back">arrow_left</i>
          </a>
        </div>
      <div class="title">Edit Account</div>
      <div class="title-large">
        <div class="title-large-text">Edit Account</div>
      </div>
        <div class="right">          
        </div>
      </div>
    </div>
    <div class="page-content">
    <form class="mt-40 mb-20">
  <input type="hidden" id="a2_id" placeholder="Id" value="">
  <label data-lang="gelar" for="r_gelar">Gelar</label>
  <p id="r_gelar"></p>
  <div class="grid grid-cols-2 grid-gap grid-no-margin">
    <div>
      <label data-lang="first_name" for="firstname">First Name</label>
      <input type="text" data-ph_lang="first_name" id="a2_first_name" name="firstname" placeholder="First Name">
    </div>
    <div>
      <label data-lang="last_name" for="lastname">Last Name</label>
      <input type="text" data-ph_lang="last_name" id="a2_last_name" name="lastname" placeholder="Last Name">
    </div>
  </div>
  <label data-lang="sex" for="r_sex">Jenis Kelamin</label>
  <p id="r_sex"></p>
  <label for="a2_dob" data-lang="dob">Tgl Lahir</label>
  <input type="date" id="a2_dob" data-ph_lang="dob" placeholder="Tgl Lahir" value="">
  <label for="a2_no_telp" data-lang="phone">No Telp</label>
  <input type="text" id="a2_no_telp" data-ph_lang="phone" placeholder="No Telp" value="">
  <label for="a2_alamat" data-lang="address">Alamat</label>
  <input type="text" id="a2_alamat" data-ph_lang="address" placeholder="Alamat" value="">
  <label for="a2_kodepos" data-lang="postcode">Kodepos</label>
  <input type="text" id="a2_kodepos" data-ph_lang="postcode" placeholder="Kodepos" value="">
  <div class="grid grid-cols-2 grid-gap grid-no-margin">
    <div>
      <label data-lang="rt" for="rt">RT</label>
      <input data-ph_lang="rt" type="text" id="a2_rt" name="rt" placeholder="RT">
    </div>
    <div>
      <label data-lang="rw" for="rw">RW</label>
      <input type="text" data-ph_lang="rw" id="a2_rw" name="rw" placeholder="RW">
    </div>
  </div>
  <label data-lang="village" for="a2_kelurahan">Kelurahan</label>
  <input type="text" data-ph_lang="village" id="a2_kelurahan" placeholder="Kelurahan" value="">
  <label data-lang="distict" for="a2_kecamatan">Kecamatan</label>
  <input data-ph_lang="distict" type="text" id="a2_kecamatan" placeholder="Kecamatan" value="">
  <label data-lang="city" for="a2_kabupaten">Kabupaten</label>
  <input data-ph_lang="city" type="text" id="a2_kabupaten" placeholder="Kabupaten" value="">
  <div class="centered-text">
    <a href="#" id="account_edit_button" class="button button-fill mb-30" data-lang="save">Save</a>
  </div>
</form>
  </div>
</div>

https://a1.ekbis.blog/pages/blank.html
<template>
  <div class="page page-blank" data-name="blank">
    <div class="navbar navbar-large">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon f7-icons arrow-back">arrow_left</i>
          </a>
        </div>
      <div class="title">Blank</div>
      <div class="title-large">
        <div class="title-large-text">Blank</div>
      </div>
        <div class="right">          
        </div>
      </div>
    </div>
    <div class="page-content">
    
    </div>
  </div>
</template>

https://a1.ekbis.blog/pages/faq.html
<template>
  <div class="page page-faq no-toolbar" data-name="faq">
    <div class="navbar navbar-large">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon f7-icons arrow-back">arrow_left</i>
          </a>
        </div>
      <div class="title">FAQ</div>
      <div class="title-large">
        <div class="title-large-text">FAQ</div>
      </div>
        <div class="right">          
        </div>
      </div>
    </div>
    <div class="page-content" id="faq_content">
    <a href="#" class="button button-fill color-dark photo-browser-demo">Open Photo Browser</a>
    </div>
  </div>
</template>

https://a1.ekbis.blog/pages/home.html

https://a1.ekbis.blog/pages/icons.html
<template>
  <div class="page page-icons no-toolbar" data-name="icons">
    <div class="navbar navbar-large">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon f7-icons arrow-back">arrow_left</i>
          </a>
        </div>
      <div class="title">Icons F7</div>
      <div class="title-large">
        <div class="title-large-text">Icons F7</div>
      </div>
      <div class="subnavbar">
        <form data-search-container=".search-list_icons" data-search-in=".item-title" class="searchbar searchbar-init">
          <div class="searchbar-inner">
            <div class="searchbar-input-wrap">
              <input type="search" placeholder="Search" />
              <i class="searchbar-icon"></i>
              <span class="input-clear-button"></span>
            </div>
            <span class="searchbar-disable-button">Cancel</span>
          </div>
        </form>
      </div>
        <div class="right">          
        </div>
      </div>
    </div>
    <div class="page-content" id="icons_content">
    
    </div>
  </div>
</template>

https://a1.ekbis.blog/pages/image_upload.html
<div class="page page-image_upload" data-name="image_upload">
    <div class="navbar navbar-large">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon f7-icons arrow-back">arrow_left</i>
          </a>
        </div>
      <div class="title">Image</div>
      <div class="title-large">
        <div class="title-large-text">Image</div>
      </div>
        <div class="right">          
        </div>
      </div>
    </div>
    <div class="page-content" id="image_upload_content">
    
  </div>
</div>

https://a1.ekbis.blog/pages/interest.html
<div class="page page-interest" data-name="interest">
    <div class="navbar navbar-large">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon f7-icons arrow-back">arrow_left</i>
          </a>
        </div>
      <div id="ptitle_interest" class="title">Select Interest</div>
      <div class="title-large">
        <div id="ptitle_large_interest" class="title-large-text">Select Interest</div>
      </div>
        <div class="right">          
        </div>
      </div>
    </div>
    <div class="page-content" id="interest_content">
    
  </div>
</div>

https://a1.ekbis.blog/pages/item.html

https://a1.ekbis.blog/pages/item_detail.html
<div class="page page-item_detail no-toolbar" data-name="item_detail">
    <div class="navbar navbar-large">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon f7-icons arrow-back">arrow_left</i>
          </a>
        </div>
      <div id="ptitle_item_detail" class="title">Item Detail</div>
      <div class="title-large">
        <div id="ptitle_large_item_detail" class="title-large-text">Item Detail</div>
      </div>
        <div class="right">          
        </div>
      </div>
    </div>
    <div class="page-content" id="item_detail_content">
    
  </div>
</div>

https://a1.ekbis.blog/pages/landing.html
<div class="page page-landing no-toolbar" data-name="landing">
    <div class="navbar navbar-large">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon f7-icons arrow-back">arrow_left</i>
          </a>
        </div>
        <div class="right">          
        </div>
      </div>
    </div>
    <div class="page-content">
      <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
    </div>
  </div>
  </div>
</div>

https://a1.ekbis.blog/pages/list_page.html
<div class="page page-list_page no-toolbar" data-name="list_page">
    <div class="navbar navbar-large">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon f7-icons arrow-back">arrow_left</i>
          </a>
        </div>
      <div id="ptitle_list_page" class="title">List</div>
      <div class="title-large">
        <div id="ptitle_large_list_page" class="title-large-text">List</div>
      </div>
        <div class="right">          
        </div>
      </div>
    </div>
    <div class="page-content" id="list_page_content">
    
  </div>
</div>

https://a1.ekbis.blog/pages/more.html

https://a1.ekbis.blog/pages/new_release.html

https://a1.ekbis.blog/pages/onboarding.html
<div class="page page-onboarding no-toolbar" data-name="onboarding">
    <div class="page-content">
        <swiper-container pagination class="swiper-onboarding full-width" space-between="50">
      <swiper-slide>
        <img src="https://yui.xioyuna.com/template/img/illustrations/onboarding-2.svg" alt="">
        <div class="onboarding-title">Welcome to our Travel App!</div>
        <div class="onboarding-subtitle">Plan your trips, discover new destinations, and make unforgettable memories
          with our intuitive travel app.</div>
      </swiper-slide>
      <swiper-slide>
        <img src="https://yui.xioyuna.com/template/img/illustrations/onboarding-3.svg" alt="">
        <div class="onboarding-title">Explore the World of Adventure!</div>
        <div class="onboarding-subtitle">Discover exciting activities, find hidden gems, and embark on thrilling
          experiences with our comprehensive travel app.</div>
      </swiper-slide>
      <swiper-slide>
        <img src="https://yui.xioyuna.com/template/img/illustrations/onboarding-1.svg" alt="">
        <div class="onboarding-title">Seamlessly Plan Your Travels!</div>
        <div class="onboarding-subtitle">Book flights, and access personalized recommendations for a stress-free travel
          experience.</div>
      </swiper-slide>
    </swiper-container>
    <a href="#" class="button button-fill color-dark onboarding-next-button">
      Next
      <i class="icon f7-icons">arrow_right</i>
    </a>
  </div>
</div>

https://a1.ekbis.blog/pages/password_change.html
<div class="page page-password_change" data-name="password_change">
    <div class="navbar navbar-large">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon f7-icons arrow-back">arrow_left</i>
          </a>
        </div>
      <div class="title">Change Password</div>
      <div class="title-large">
        <div class="title-large-text">Change Password</div>
      </div>
        <div class="right">          
        </div>
      </div>
    </div>
    <div class="page-content">
    <form class="mt-40 mb-40">
  <label data-lang="password_current" for="password22">Current Password</label>
  <input data-ph_lang="password_current" type="password" id="password22" name="password22" placeholder="Current Password">
  <label data-lang="password_new" for="password22">New Password</label>
  <input data-ph_lang="password_new" type="password" id="newpassword22" name="newpassword22" placeholder="Current Password">
  <label data-lang="password_repeat" for="password22">Repeat New Password</label>
  <input data-ph_lang="password_repeat" type="password" id="confirmpassword22" name="confirmpassword22" placeholder="Current Password">
  <p class="mt-0">
    <a href="#" data-lang="show_password" onclick="toggle_password_change()" id="cp_show_password"></a>
  </p>
  <div class="centered-text">
    <button data-lang="save" id="password_change_button" class="button button-fill">
    </button>
  </div>
  </form
  </div>
</div>

https://a1.ekbis.blog/pages/password_forgot.html
<div class="page page-password_forgot no-toolbar" data-name="password_forgot">
    <div class="navbar navbar-large">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
      <div id="ptitle_password_forgot" class="title">Password Forgot</div>
      <div class="title-large">
        <div id="ptitle_large_password_forgot" class="title-large-text">Password Forgot</div>
      </div>
        <div class="right">          
          <a href="#" id="myTheme" onClick="changeTheme()" class="link icon-only switch-theme">
  <i class="icon f7-icons">moon_stars</i>
</a> 
        </div>
      </div>
    </div>
    <div class="page-content">
    <form class="mt-40">
  <label data-lang="email" for="emailForgot">
  </label>
  <input data-ph_lang="email" type="text" id="emailForgot" name="email" placeholder="Email">
  <div class="centered-text">
    <a href="#" data-lang="password_reset" id="password_forgot_button" class="button button-fill fw-800"></a>
  </div>
</form>
<p class="grid grid-cols-2 grid-gap grid-buttons-demo mt-15">
  <a href="/signin/" data-lang="signin" class="link"></a>
  <a href="/signup/" data-lang="signup" class="link"></a>
</p>
  </div>
</div>

https://a1.ekbis.blog/pages/person_edit.html
<div class="page page-person_edit" data-name="person_edit">
    <div class="navbar navbar-large">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon f7-icons arrow-back">arrow_left</i>
          </a>
        </div>
      <div class="title">Profile Edit</div>
      <div class="title-large">
        <div class="title-large-text">Profile Edit</div>
      </div>
        <div class="right">          
        </div>
      </div>
    </div>
    <div class="page-content">
    <form class="mt-40 mb-20">
  <input type="hidden" id="p9_id" value="">
  <label for="p9_name">Name</label>
  <input type="text" id="p9_name" placeholder="Name" value="">
  <label for="p9_initial">Initial</label>
  <input type="text" id="p9_initial" placeholder="Initial" value="">
  <label for="p9_email">Email</label>
  <input type="text" id="p9_email" placeholder="Email" value="">
  <label for="p9_city">City</label>
  <input type="text" id="p9_city" placeholder="City" value="">
  <label for="p9_phone">Phone</label>
  <input type="text" id="p9_phone" placeholder="Phone" value="">
  <label for="p9_nik">Nik</label>
  <input type="text" id="p9_nik" placeholder="Nik" value="">
  <label for="p9_npwp">Npwp</label>
  <input type="text" id="p9_npwp" placeholder="Npwp" value="">
  <label for="p9_address">Address</label>
  <input type="text" id="p9_address" placeholder="Address" value="">
  <label for="p9_postcode">Postcode</label>
  <input type="text" id="p9_postcode" placeholder="Postcode" value="">
  <label for="p9_company_id">Company Id</label>
  <input type="text" id="p9_company_id" placeholder="Company Id" value="">
  <div class="centered-text">
    <a href="#" id="person_edit_button" class="btn btn-primary btn-block fw-700 mb-30">Save</a>
  </div>
</form>
  </div>
</div>

https://a1.ekbis.blog/pages/privacy.html
<div class="page page-privacy no-toolbar" data-name="privacy">
    <div class="navbar navbar-large">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon f7-icons arrow-back">arrow_left</i>
          </a>
        </div>
      <div class="title">Privacy Polecy</div>
      <div class="title-large">
        <div class="title-large-text">Privacy Polecy</div>
      </div>
        <div class="right">          
        </div>
      </div>
    </div>
    <div class="page-content">
    <p>This is a blank page. You can add as many pages as you want in your app and build them using all the components and features included in the template.</p>
<p>You can then link the pages to any classical link or button to open it.</p>
  </div>
</div>

https://a1.ekbis.blog/pages/settings.html
<div class="page page-settings no-toolbar" data-name="settings">
    <div class="navbar navbar-large">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon f7-icons arrow-back">arrow_left</i>
          </a>
        </div>
      <div class="title">Settings</div>
      <div class="title-large">
        <div class="title-large-text">Settings</div>
      </div>
        <div class="right">          
        </div>
      </div>
    </div>
    <div class="page-content">
    <div class="settings-header">
  <div class="settings-image">
    <img src="https://yui.xioyuna.com/template/img/avatars/1.jpg" alt="">
    <a href="#" class="link edit-profile-image">
      <i class="icon f7-icons">pencil</i>
    </a>
  </div>
  <div class="settings-name">Noah Campbell</div>
  <div class="settings-email">ncampbell@envato.com</div>
</div>
<div class="list links-list colored-icons-list settings-list list-outline list-dividers full-width">
  <ul>
    <li>
      <a href="#">
        <div class="colored-icon blue">
          <i class="icon f7-icons">globe</i>
        </div>Language
        <div class="item-after">English</div>
      </a>
    </li>
    <li class="item-content">
      <div class="item-inner">
        <div class="colored-icon red">
          <i class="icon f7-icons">bell_fill</i>
        </div>
        <div class="item-title">Notifications</div>
        <div class="item-after">
          <label class="toggle toggle-init color-green">
            <input type="checkbox" checked="">
            <span class="toggle-icon">
            </span>
          </label>
        </div>
      </div>
    </li>
    <li class="item-content">
      <div class="item-inner">
        <div class="colored-icon orange">
          <i class="icon f7-icons">location_fill</i>
        </div>
        <div class="item-title">Location</div>
        <div class="item-after">
          <label class="toggle toggle-init color-green">
            <input type="checkbox" checked="">
            <span class="toggle-icon">
            </span>
          </label>
        </div>
      </div>
    </li>
    <li class="item-content">
      <div class="item-inner">
        <div class="colored-icon blue">
          <i class="icon f7-icons">hand_raised_fill</i>
        </div>
        <div class="item-title">Private Mode</div>
        <div class="item-after">
          <label class="toggle toggle-init color-green">
            <input type="checkbox">
            <span class="toggle-icon">
            </span>
          </label>
        </div>
      </div>
    </li>
    <li class="item-content">
      <div class="item-inner">
        <div class="colored-icon pink">
          <i class="icon f7-icons">speaker_2_fill</i>
        </div>
        <div class="item-title">Sounds</div>
        <div class="item-after">
          <label class="toggle toggle-init color-green">
            <input type="checkbox" checked="">
            <span class="toggle-icon">
            </span>
          </label>
        </div>
      </div>
    </li>
    <li>
      <a href="#">
        <div class="colored-icon blue">
          <i class="icon f7-icons">shield_lefthalf_fill</i>
        </div>Privacy & Security</a>
    </li>
    <li>
      <a href="#">
        <div class="colored-icon orange">
          <i class="icon f7-icons">arrow_2_circlepath</i>
        </div>Updates
        <div class="item-after">Automatic</div>
      </a>
    </li>
    <li>
      <a href="#">
        <div class="colored-icon gray">
          <i class="icon f7-icons">gear</i>
        </div>Version
        <div class="item-after">v2.3.7</div>
      </a>
    </li>
    <li>
      <a href="#">
        <div class="colored-icon green">
          <i class="icon f7-icons">doc_text_fill</i>
        </div>Terms Of Service</a>
    </li>
    <li>
      <a href="#">
        <div class="colored-icon purple">
          <i class="icon f7-icons">star_fill</i>
        </div>Rate The App</a>
    </li>
  </ul>
</div>
  </div>
</div>

https://a1.ekbis.blog/pages/signin.html
<div class="page page-signin no-toolbar" data-name="signin">
    <div class="navbar navbar-large">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
      <div id="ptitle_signin" class="title">Sign In</div>
      <div class="title-large">
        <div id="ptitle_large_signin" class="title-large-text">Sign In</div>
      </div>
        <div class="right">          
          <a href="#" id="myTheme" onClick="changeTheme()" class="link icon-only switch-theme">
  <i class="icon f7-icons">moon_stars</i>
</a> 
        </div>
      </div>
    </div>
    <div class="page-content">
    <form class="mt-40">
  <label data-lang="email" for="loginEmail">
  </label>
  <input type="text" id="loginEmail" data-ph_lang="email" placeholder="" value="">
  <label data-lang="password" for="loginPassword">
  </label>
  <input type="password" id="loginPassword" data-ph_lang="password" placeholder="" value="">
  <p class="mt-0">
    <a href="#" onclick="toggle_signin()" data-lang="show_password" id="signin_btn_show_password"></a>
  </p>
  <p>
    <label class="checkbox checkbox-inline">
      <input type="checkbox" id="remember_me" name="remember_me">
      <i class="icon-checkbox"></i>
    </label>
    <span data-lang="remember_me">
    </span>
  </p>
  <div class="centered-text">
    <a href="#" data-lang="signin" id="signin_button" class="button button-fill fw-800"></a>
  </div>
</form>
<p class="grid grid-cols-2 grid-gap grid-buttons-demo mt-15">
  <a href="/password_forgot/" data-lang="password_forgot" class="link"></a>
  <a href="/signup/" data-lang="signup" class="link"></a>
</p>
  </div>
</div>

https://a1.ekbis.blog/pages/signup.html
<div class="page page-signup no-toolbar" data-name="signup">
    <div class="navbar navbar-large">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
      <div id="ptitle_signup" class="title">SignUp</div>
      <div class="title-large">
        <div id="ptitle_large_signup" class="title-large-text">SignUp</div>
      </div>
        <div class="right">          
          <a href="#" id="myTheme" onClick="changeTheme()" class="link icon-only switch-theme">
  <i class="icon f7-icons">moon_stars</i>
</a> 
        </div>
      </div>
    </div>
    <div class="page-content">
    <form class="mt-40">
  <label data-lang="email" for="reg_email">
  </label>
  <input type="text" id="reg_email" data-ph_lang="email" placeholder="Email" value="">
  <div class="grid grid-cols-2 grid-gap grid-no-margin">
    <div>
      <label data-lang="first_name" for="reg_first_name">
      </label>
      <input type="text" id="reg_first_name" data-ph_lang="first_name" placeholder="" value="">
    </div>
    <div>
      <label data-lang="last_name" for="reg_last_name">
      </label>
      <input type="text" id="reg_last_name" data-ph_lang="last_name" placeholder="" value="">
    </div>
  </div>
  <label data-lang="phone" for="reg_phone">
  </label>
  <input type="text" id="reg_phone" data-ph_lang="phone" placeholder="" value="">
  <div class="grid grid-cols-2 grid-gap grid-no-margin">
    <div>
      <label data-lang="password" for="reg_password">Password</label>
      <input type="password" id="reg_password" data-ph_lang="password" placeholder="Password" value="">
    </div>
    <div>
      <label data-lang="password_repeat" for="reg_password_repeat">Password Repeat</label>
      <input type="password" id="reg_password_repeat" data-ph_lang="password_repeat" placeholder="Password Repeat" value="">
    </div>
  </div>
  <p class="mt-0">
    <a href="#" onclick="toggle_signup()" data-lang="show_password" id="reg_show_password"></a>
  </p>
  <p>
    <label class="checkbox checkbox-inline">
      <input id="terms" value="1" type="checkbox" checked="checked">
      <i class="icon-checkbox"></i>
    </label>Accept
    <a href="/terms/" data-lang="terms" class="link"></a>&
    <a href="/terms/" data-lang="privacy" class="link"></a>
  </p>
  <div class="centered-text">
    <a href="#" data-lang="save" id="signup_button" class="button button-fill fw-800"></a>
  </div>
</form>
<p class="grid grid-cols-2 grid-gap grid-buttons-demo mt-15">
  <a href="/password_forgot/" data-lang="password_forgot" class="link"></a>
  <a href="/signin/" data-lang="signin" class="link"></a>
</p>
  </div>
</div>

https://a1.ekbis.blog/pages/single.html
<div class="page page-single no-toolbar" data-name="single">
    <div class="navbar navbar-large">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon f7-icons arrow-back">arrow_left</i>
          </a>
        </div>
      <div class="title">Single</div>
      <div class="title-large">
        <div class="title-large-text">Single</div>
      </div>
        <div class="right">          
        </div>
      </div>
    </div>
    <div class="page-content">
    <div class="single-post-date">September 27, 2023</div>
<h1 class="single-post-title">The Exciting Future of Gaming Technology</h1>
<img src="https://yui.xioyuna.com/template/img/cards/1.jpg" alt="" class="single-cover-image">
<span class="single-post-category">Technology</span>
<span class="single-post-category">Gaming</span>
<div class="single-post-content">
  <p>Gaming technology has come a long way since the days of Pong and Space Invaders. Today’s gamers have access to a wide variety of consoles, PCs, and mobile devices, all of which offer immersive experiences that rival those of traditional forms of entertainment. But what does the future hold for gaming technology? Let’s take a look.</p>
  <h2>Virtual and Augmented Reality</h2>
  <p>Virtual and augmented reality are two of the most exciting developments in gaming technology. These technologies offer gamers a completely immersive experience, where they can explore virtual worlds and interact with objects in real-time.</p>
  <p>While virtual reality has been around for a few years now, the technology is still in its early stages. In the coming years, we can expect to see more advanced VR headsets and hardware, which will offer gamers an even more realistic experience.</p>
  <h2>Cloud Gaming: The Future of Gaming Access</h2>
  <p>Cloud gaming is another exciting development in gaming technology. This technology allows gamers to stream games from servers, eliminating the need for a powerful console or PC. This means that gamers will be able to play high-quality games on lower-end devices, which will make gaming more accessible than ever before.</p>
  <img src="https://yui.xioyuna.com/template/img/cards/4.jpg" alt="">
  <p>As internet speeds continue to improve, we can expect cloud gaming to become even more popular. Some major players in the gaming industry, such as Google and Microsoft, have already launched their own cloud gaming services, and it’s likely that other companies will follow suit.</p>
  <h2>The Rise of Mobile Gaming</h2>
  <p>Mobile gaming has exploded in popularity in recent years, with millions of people playing games on their smartphones and tablets. While mobile games were once seen as simple and casual, the rise of more advanced mobile hardware and software has led to the development of high-quality mobile games that rival those on consoles and PCs.</p>
  <p>In the future, we can expect to see even more advanced mobile games, with more complex gameplay and graphics. As smartphones and tablets continue to evolve, mobile gaming will become an even more important part of the gaming industry.</p>
  <h2>Conclusion</h2>
  <p>The future of gaming technology is incredibly exciting, with new developments and innovations emerging all the time. From virtual and augmented reality to cloud gaming, artificial intelligence, and mobile gaming, gamers can expect to enjoy even more immersive and engaging experiences in the years to come.</p>
</div>
<div class="single-post-author">
  <img src="https://yui.xioyuna.com/template/img/avatars/11.jpg" alt="">
  <div class="author-details">
    <div class="author-name">Emily Wilson
      <i class="icon f7-icons text-color-blue verified-badge">checkmark_seal_fill</i>
    </div>
    <div class="author-description">Author & Journalist</div>
  </div>
  <a href="#" class="button button-fill button-round color-dark button-icon-left author-follow">
    <i class="icon f7-icons">plus</i>Follow</a>
</div>
<h2 class="title-bottom-line">Comments
  <span class="badge color-dark comment-count">23</span>
</h2>
<div class="comment-list">
  <div class="comment">
    <img src="https://yui.xioyuna.com/template/img/avatars/3.jpg" alt="">
    <div class="comment-infos">
      <div class="comment-header">
        <div class="comment-header-left">
          <div class="author-name">Noah Campbell</div>
          <div class="comment-date">• 12m</div>
        </div>
        <div class="comment-options">
          <a href="#" class="link">
            <i class="icon f7-icons">ellipsis_vertical</i>
          </a>
        </div>
      </div>
      <div class="comment-text">Great article! You made some really good points and I appreciate the time and effort you put into it, thank you.</div>
    </div>
  </div>
  <div class="comment">
    <img src="https://yui.xioyuna.com/template/img/avatars/6.jpg" alt="">
    <div class="comment-infos">
      <div class="comment-header">
        <div class="comment-header-left">
          <div class="author-name">Mia Sullivan</div>
          <div class="comment-date">• 40m</div>
        </div>
        <div class="comment-options">
          <a href="#" class="link">
            <i class="icon f7-icons">ellipsis_vertical</i>
          </a>
        </div>
      </div>
      <div class="comment-text">I couldn't agree more with your perspective on this topic. It's refreshing to see someone who thinks outside the box and challenges the status quo. Great article.</div>
    </div>
  </div>
  <div class="comment comment-reply">
    <img src="https://yui.xioyuna.com/template/img/avatars/2.jpg" alt="">
    <div class="comment-infos">
      <div class="comment-header">
        <div class="comment-header-left">
          <div class="author-name">Liam Evans</div>
          <div class="comment-date">• 13m</div>
        </div>
        <div class="comment-options">
          <a href="#" class="link">
            <i class="icon f7-icons">ellipsis_vertical</i>
          </a>
        </div>
      </div>
      <div class="comment-text">I totally agree! It's a refreshing change from the polarizing discourse we often see everywhere.</div>
    </div>
  </div>
  <div class="comment">
    <img src="https://yui.xioyuna.com/template/img/avatars/4.jpg" alt="">
    <div class="comment-infos">
      <div class="comment-header">
        <div class="comment-header-left">
          <div class="author-name">William Taylor</div>
          <div class="comment-date">• 2h</div>
        </div>
        <div class="comment-options">
          <a href="#" class="link">
            <i class="icon f7-icons">ellipsis_vertical</i>
          </a>
        </div>
      </div>
      <div class="comment-text">This is a topic that I've been passionate about for a long time, and I appreciate the way you articulated your thoughts and opinions on the matter.</div>
    </div>
  </div>
  <div class="comment">
    <img src="https://yui.xioyuna.com/template/img/avatars/5.jpg" alt="">
    <div class="comment-infos">
      <div class="comment-header">
        <div class="comment-header-left">
          <div class="author-name">Ethan Jameson</div>
          <div class="comment-date">• 1d</div>
        </div>
        <div class="comment-options">
          <a href="#" class="link">
            <i class="icon f7-icons">ellipsis_vertical</i>
          </a>
        </div>
      </div>
      <div class="comment-text">As someone who has experienced this firsthand, I can tell you that you're spot on with your analysis. Thank you for shedding light on this important issue.</div>
    </div>
  </div>
</div>
<h2 class="title-bottom-line">Leave a Comment</h2>
<form>
  <div class="grid grid-cols-2 grid-gap no-margin">
    <input type="text" id="name" name="name" placeholder="Your Name">
    <input type="email" id="email-2" name="email-2" placeholder="Your Email">
  </div>
  <textarea placeholder="Your comment here" id="comment">
  </textarea>
  <a href="#" class="button button-fill button-round color-dark">Send</a>
</form>
  </div>
</div>

https://a1.ekbis.blog/pages/terms.html
<div class="page page-terms no-toolbar" data-name="terms">
    <div class="navbar navbar-large">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon f7-icons arrow-back">arrow_left</i>
          </a>
        </div>
      <div id="ptitle_terms" class="title">Term & Condition</div>
      <div class="title-large">
        <div id="ptitle_large_terms" class="title-large-text">Term & Condition</div>
      </div>
        <div class="right">          
        </div>
      </div>
    </div>
    <div class="page-content">
    <p>This is a blank page. You can add as many pages as you want in your app and build them using all the components and features included in the template.</p>
<p>You can then link the pages to any classical link or button to open it.</p>
  </div>
</div>

https://a1.ekbis.blog/pages/timeline.html
<div class="page page-timeline no-toolbar" data-name="timeline">
    <div class="navbar navbar-large">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon f7-icons arrow-back">arrow_left</i>
          </a>
        </div>
        <div class="right">          
        </div>
      </div>
    </div>
    <div class="page-content" id="timeline_content">
    <div class="swiper-container swiper-timeline time-slider full-width">
  <div class="swiper-wrapper" id="timeline_swiper_wraper">
  </div>
</div>
  </div>
</div>

https://a1.ekbis.blog/js/account.js


$(document).on('page:beforein', '.page[data-name="account"]', async function(e) {
  console.log('app account ready')
  let uimg = get_localstorage('member_img');
  let it=uimg.data;
  let usr = get_localstorage('member');
  let dt=usr.data;
  let t_avatar=`<img src="`+it[0].url.small+`" alt="`+dt.nama_member+`">`;
  let t_menu=`
  <a href="/image_upload/member/`+dt.id+`" class="image_upload" data-image="`+it[0].url.small+`">
    <div class="colored-icon red">
      <i class="icon f7-icons">camera_fill</i>
    </div><span data-lang="image_profile"></span></a>`;
  let t_img=`<a class="image_upload" data-image="`+it[0].url.small+`" href="/image_upload/member/`+dt.id+`"><img src="`+it[0].url.small+`" alt="`+dt.nama_member+`" class="img image"></a>`;
  $("#account_img_menu").html(t_menu); 
  $("#user_img").html(t_img); 
  $("#user_avatar").html(t_avatar);   
});

$(document).on('page:init', '.page[data-name="account_delete"]', async function (e) {
  console.log('app account_delete ready')
  let user=get_localstorage('member');
  let dt=user.data;
  // Example of how to fill in the form fields with the provided data
  document.querySelector('#email_4').value = dt.email || '';
  document.querySelector('#id').value = dt.id || '';
  document.querySelector('#no_telp').value = dt.no_telp || '';
})

$$(document).on('page:init', '.page[data-name="account_delete"]', function(e) {
  $$(document).off("click", "#account_delete_button").on("click", "#account_delete_button", function(e) {
    e.preventDefault();
    const id = $('#id').val();
    const reason = $('#reason_4').val().trim();
    const email= $('#email_4').val().trim();
    const no_telp= $('#no_telp').val().trim();
    console.log(reason)
    let req = {
      reason,id,email,no_telp
    }
    if (!reason) {
      app.dialog.alert("Reason are required", "Error");
      return
    }    
    if (!email) {
      app.dialog.alert("Email are required", "Error");
      return
    }    
   account_delete(req);
  });
})

$(document).on('page:init', '.page[data-name="account_edit"]', async function (e) {
  console.log('app account_edit ready')
  let user=get_localstorage('member');
  let dt=user.data;
  //console.log(dt)
  document.querySelector('#a2_id').value = dt.id || '';
  document.querySelector('#a2_no_telp').value = dt.no_telp || '';
  document.querySelector('#a2_first_name').value = dt.first_name || '';
  document.querySelector('#a2_last_name').value = dt.last_name || '';
  document.querySelector('#a2_kecamatan').value = dt.kecamatan || '';
  document.querySelector('#a2_kabupaten').value = dt.kabupaten || '';
  document.querySelector('#a2_kelurahan').value = dt.kelurahan || '';
  document.querySelector('#a2_alamat').value = dt.alamat || '';
  document.querySelector('#a2_kodepos').value = dt.kodepos || '';
  document.querySelector('#a2_rt').value = dt.rt || '';
  document.querySelector('#a2_rw').value = dt.rw || '';
  document.querySelector('#a2_dob').value = dt.dob || '';
  let t_gelar='';
  for(let c=1;c<5;c++) {
    if(dt.gelar==c) {
      t_gelar +=`<label class="radio" style="margin-left: 5px">
      <input value="`+c+`" type="radio" checked name="a2_gelar">
      <i class="icon-radio"></i>
    </label>`+ar.gelar[c];
    } else {
      t_gelar +=`<label class="radio" style="margin-left: 5px">
      <input value="`+c+`" type="radio" name="a2_gelar">
      <i class="icon-radio"></i>
    </label>`+ar.gelar[c];
    }
  }
  $("#r_gelar").html(t_gelar);
  let t_sex='';
  for(let c=1;c<3;c++) {
    if(dt.sex==c) {
      t_sex +=`<label class="radio" style="margin-left: 5px">
      <input value="`+c+`" type="radio" checked name="a2_sex">
      <i class="icon-radio"></i>
    </label>`+ar.sex[c];
    } else {
      t_sex +=`<label class="radio" style="margin-left: 5px">
      <input value="`+c+`" type="radio" name="a2_sex">
      <i class="icon-radio"></i>
    </label>`+ar.sex[c];
    }
  }
  $("#r_sex").html(t_sex);  
})

$$(document).on('page:init', '.page[data-name="account_edit"]', function(e) {
  $(document).off("click", "#account_edit_button").on("click", "#account_edit_button", function(e) {
    e.preventDefault();
    let id = $('#a2_id').val();
    let no_telp = $('#a2_no_telp').val();
    let first_name = $('#a2_first_name').val();
    let last_name = $('#a2_last_name').val();
    let kecamatan = $('#a2_kecamatan').val();
    let kabupaten = $('#a2_kabupaten').val();
    let kelurahan = $('#a2_kelurahan').val();
    let alamat = $('#a2_alamat').val();
    let kodepos = $('#a2_kodepos').val();
    let rt = $('#a2_rt').val();
    let rw = $('#a2_rw').val();
    let dob = $('#a2_dob').val();
    let sex = $('input[name="a2_sex"]:checked').val();
    let gelar = $('input[name="a2_gelar"]:checked').val();
    let req = {
      id,no_telp,first_name,last_name,kecamatan,kabupaten,kelurahan,alamat,kodepos,rt,rw,dob,sex,gelar
    };
    if (!sex) {
      app.dialog.alert("Sex are required", "Edit Account Errors");
      return
    }
    if (!no_telp) {
      app.dialog.alert("Phone are required", "Edit Account Errors");
      return
    }
    if (!first_name) {
      app.dialog.alert("firstname are required", "Edit Account Errors");
      return
    }
    account_edit(req);
  });
});

$(document).on('page:init', '.page[data-name="address"]', async function (e) {
  console.log('app address ready')
  var view = app.views.current

  let js = JSON.parse(localStorage.getItem('t01_user'));
  let dt = js.data.address;
  //console.log(dt)
  var strHtml = `<div class="list detailed-list list-dividers full-width">
      <ul>`;
  for(let i=0;i<dt.length;i++) {
    strHtml += `
<li>
<div class="item-link item-content">
    
    <div class="item-inner">
      <div class="item-title">
        <div class="item-name"><b>`+dt[i].label+` [`+dt[i].name+`, `+dt[i].phone+`]</b></div>
        <div class="item-footer">`+dt[i].address+`, `+dt[i].rt+`, `+dt[i].rw+`, `+dt[i].no+`, `+dt[i].kel+`, `+dt[i].kec+`, `+dt[i].city+`, `+dt[i].postcode+`</div>
      </div>
      <div class="item-after event-time">
      <a href="/address_edit/`+dt[i].id+`" data-id="`+dt[i].id+`" class="badge bg-primary btn-f300">edit</a>
      <a data-id="`+dt[i].id+`" class="badge bg-danger btn-f300 ml-2 user_address_delete">del</a>
      </div>
    </div>
   </div>
</li>   
    `;
  }
   strHtml += `
   </ul></div>`;  
  //console.log(strHtml)
  $$("#address_content").html(strHtml);
})

$$(document).on('page:init', '.page[data-name="address_add"]', function(e) {
  $(document).off("click", "#address_add_button").on("click", "#address_add_button", function(e) {
  console.log('app address add click ready')
    e.preventDefault();
    let user = JSON.parse(localStorage.getItem('t01_user'));
    const label = $('#ad_label').val();
    const name = $('#ad_name').val();
    const phone = $('#ad_phone').val();
    const address = $('#ad_address').val();
    const rt = $('#ad_rt').val();
    const rw = $('#ad_rw').val();
    const no = $('#ad_no').val();
    const postcode = $('#ad_postcode').val();
    const kel = $('#ad_kel').val();
    const kec = $('#ad_kec').val();
    const city = $('#ad_city').val();
    const gmap = $('#ad_gmap').val();
    const remark = $('#ad_remark').val();
    const token=user.sess_token;
    const uuid=user.uuid;
    let req = {
      label,name,uuid,token,phone,address,rt,rw,no,postcode,kel,kec,city,gmap,remark
    }
    if (name && phone && address && no && gmap) {
      address_add(req);
    } else {
      app.dialog.alert("All fields are required", "Add Address Errors");
    }
  });
})

// Delete useraddress
$(document).on('click', '.user_address_delete', async function (e) {
  console.log('app user_address_delete ready')
  const aid = $(e.target).attr('data-id');
  const user = JSON.parse(localStorage.getItem('t01_user'));
  const token=user.sess_token;
  const uuid=user.uuid;
  let req = {
    uuid,token,aid
  }
  //console.log(req)  
  // confirm dialog
  app.dialog.confirm('Are you sure you want to delete this address?', 'Delete Address', async function () {
      app.preloader.show()
      if (aid && uuid) {
        user_address_delete(req,'adrs_'+aid);
      } 
  })
})

$(document).on('page:beforein', '.page[data-name="address_edit"]', async function (e) {
  console.log('app address_edit ready')
  var aid = e.detail.route.params.id
  //console.log(aid)
  let js = JSON.parse(localStorage.getItem('t01_user'));
  let dt = js.data.address;  
  for(let i=0;i<dt.length;i++) {
    if(dt[i].id==aid) {
      document.querySelector('#a2_label').value = dt[i].label || '';
      document.querySelector('#a2_name').value = dt[i].name || '';
      document.querySelector('#a2_phone').value = dt[i].phone || '';
      document.querySelector('#a2_address').value = dt[i].address || '';
      document.querySelector('#a2_rt').value = dt[i].rt || '';
      document.querySelector('#a2_rw').value = dt[i].rw || '';
      document.querySelector('#a2_no').value = dt[i].no || '';
      document.querySelector('#a2_postcode').value = dt[i].postcode || '';
      document.querySelector('#a2_kel').value = dt[i].kel || '';
      document.querySelector('#a2_kec').value = dt[i].kec || '';
      document.querySelector('#a2_city').value = dt[i].city || '';
      document.querySelector('#a2_gmap').value = dt[i].gmap || '';
      document.querySelector('#a2_remark').value = dt[i].remark || '';
      document.querySelector('#a2_id').value = dt[i].id || '';
    }
  }
});

$$(document).on('page:init', '.page[data-name="address_edit"]', function(e) {
  $(document).off("click", "#address_edit_button").on("click", "#address_edit_button", function(e) {
    e.preventDefault();
    let user = JSON.parse(localStorage.getItem('t01_user'));
    const label = $('#a2_label').val();
    const name = $('#a2_name').val();
    const phone = $('#a2_phone').val();
    const address = $('#a2_address').val();
    const rt = $('#a2_rt').val();
    const rw = $('#a2_rw').val();
    const no = $('#a2_no').val();
    const postcode = $('#a2_postcode').val();
    const kel = $('#a2_kel').val();
    const kec = $('#a2_kec').val();
    const city = $('#a2_city').val();
    const gmap = $('#a2_gmap').val();
    const remark = $('#a2_remark').val();
    const aid = $('#a2_id').val();
    const token=user.sess_token;
    const uuid=user.uuid;
    let req = {
      uuid,token,label,name,phone,address,rt,rw,no,postcode,kel,kec,city,gmap,remark,aid
    }
    if (name && phone && address && no && gmap) {
      address_edit(req);
    } else {
      app.dialog.alert("All fields are required", "Edit Address Errors");
    }
  });
})

$(document).on('page:beforein', '.page[data-name="interest"]', async function (e) {
  console.log('app inteest ready')
  //console.log(ar.interest)
  let ct2=get_localstorage('sites');
  let ct=ct2.data;

  let dt2=get_localstorage('sections');
  let dt=dt2.data;
  //console.log(dt2)
  
  let btn =`<h2 data-lang="channel">Channel</h2>`;
  ct.forEach((v,i)=>{
    if(v.select==0) {
    btn +=`
  <a href="#" id="channel_${v.id}" onClick="click_channel(${v.id},'${i}')" class="interest">
  ${v.title}
  <span class="badge bg-color-primary">${v.count}</span>
  </a>
    `;
    } else {
    btn +=`
  <a href="#" id="channel_${v.id}" onClick="click_channel(${v.id},'${i}')" class="interest selected">
  ${v.title}
  <span class="badge bg-color-primary">${v.count}</span>
  </a>
    `;
    }    
  });
  btn +=`<h2 data-lang="category">Category</h2>`;  
  dt.forEach((v,i)=>{
    if(v.select==0) {
    btn +=`
  <a href="#" id="category_${v.id}" onClick="click_category(${v.id},'${i}')" class="interest">
  ${v.title}
  <span class="badge bg-color-primary">${v.count}</span>
  </a>
    `;
    } else {
    btn +=`
  <a href="#" id="category_${v.id}" onClick="click_category(${v.id},'${i}')" class="interest selected">
  ${v.title}
  <span class="badge bg-color-primary">${v.count}</span>
  </a>
    `;
    }    
  });
  btn +=``;
  $("#interest_content").html(btn); 
  
});

$$(document).on('page:init', '.page[data-name="password_change"]', function(e) {
  $(document).off("click", "#password_change").on("click", "#password_change_button", function(e) {
  e.preventDefault();
  console.log('app password_change ready')
  let user=get_localstorage('member');
  let dt=user.data;
    var password = $("#password22").val();
    var newpassword = $("#newpassword22").val();
    var confirmPwd = $("#confirmpassword22").val();
    let uid=dt.id;
    let req = {
      uid,
      password,
      newpassword
    }
    if (!password) {
      app.dialog.alert("Password are required", "Errors");
      return
    }    
    if (!newpassword) {
      app.dialog.alert("New Password are required", "Errors");
      return
    }    
    if (!confirmPwd) {
      app.dialog.alert("Confirm New Password are required", "Errors");
      return
    }    
    if(newpassword!=confirmPwd) {
      app.dialog.alert("New Password & Confirm New Password not match", "Errors");
      return      
    }
    password_change(req);
  });
})

$$(document).on('page:init', '.page[data-name="password_forgot"]', function(e) {
  $(document).off("click", "#password_forgot_button").on("click", "#password_forgot_button", function(e) {
  console.log('app password_forgot ready')
    e.preventDefault();
    var email = $("#emailForgot").val();
    let req = {
      email
    }
    if (email) {
      password_forgot(req);
    } else {
      app.dialog.alert("Please enter your email", "Forgot Password Errors");
    }
  });
})

$$(document).on('page:init', '.page[data-name="signup"]', function(e) {
  $(document).off("click", "#signup_button").on("click", "#signup_button", function(e) {
  console.log('app signup ready')
    e.preventDefault();
    let email = $("#reg_email").val();
    let password = $("#reg_password").val();
    let confirmpwd = $("#reg_confirmpwd").val();
    let firstname = $("#reg_firstname").val();
    let lastname = $("#reg_lastname").val();
    let phone = $("#reg_phone").val();
    let terms = $("#terms").val();
    let errMsg = "";
    let req = {
      email,
      password,
      confirmpwd,
      firstname,
      lastname,
      phone
    };
    if (email && password && confirmpwd && firstname && lastname && phone && terms) {
      if (confirmpwd === password) {
        signup(req);
      } else {
        app.dialog.alert("Passwords do not match", "Sign Up Errors");
      }
    } else {
      app.dialog.alert("All fields are required", "Sign Up Errors");
    }
  });
});

https://a1.ekbis.blog/js/app.js
var $$ = Dom7;
var app = new Framework7({
  root: '#app', // App root element
  id: 'com.a1.news',
  el: '#app',
  name: 'Framework7', // App name
  theme: 'ios',
  routes: routes,
});
const config = {
  storage_key: 'a1n3s'
};
let ar = {
  'lang': [{"code":"id","lang":"Indonesia"},{"code":"en","lang":"English"}],
  'sex': {1:'Laki-laki',2:'Perempuan'},
  'gelar': {1:'Tuan',2:'Nyonya',3:'Nona',4:'Anak'},
  'interest': ['Analisis','Banking','Bisnis','Bursa','Business','Digital','Economics','Economy','Ekbis','Ekonomi','Energi','Enterpreneurship','Entrepreneur','Finance','Finansial','Fintech','Global','Industri','Infrastruktur','Investasi','Keuangan','Loker','Makro','Market','Moneter','Money','Opini','Pangan','Peluangusaha','Perencanaan','Personalfinance','Properti','Research','Riil','Sawit','Sustainability','Syariah','Teknologi','Valas']
};
//console.log(ar.interest)
function checkConnection(url) {}
var auth_data_member = get_localstorage('member');
if(auth_data_member.status==true) {
  console.log(auth_data_member.status)
  document.getElementById('toolbar_bottom').style.display = 'block';
  let dt=auth_data_member.data;
  //console.log(dt) 
  console.log('is logged')
  account_image_reload();
  $("#user_name").html(dt.nama_member); 
  $("#user_subtitle").html(dt.email); 
  home_latest();
  tab_content_channel();
  tab_content_category();
  tab_content_who();
  home_site();
  home_section();
  home_who();
} else {
  //document.getElementById('signout').style.display = 'none'; 
  document.getElementById('toolbar_bottom').style.display = 'none'; 
  console.log('not logged')
  app.views.main.router.navigate('/signin/');
}

var dl = get_localstorage('lang');
if(dl.status==true) {
  let lang=dl.data;
  console.log(lang);
  lang_change(lang)
} else {
  let lang='id';
  console.log(lang);
  lang_change(lang)
}

var th = get_localstorage('theme');
if(th.status==true && th.data=='dark') {
  $$('.switch-theme i')['text']('sun_max');
  $$('body')['toggleClass']('dark');
} else {
  $$('.switch-theme i')['text']('moon_stars');
}

$$(document)['on']('photobrowser:open photobrowser:close', function() {
  !$$('body')['hasClass']('dark') && window['parent']['postMessage']('switchTheme', window['location']['origin']);
});

$(document).on('click', '.image_upload', async function (e) {
  const image= e.target.closest('.image_upload').dataset.image;
  setTimeout(() => {
    //console.log(image)
    if (image) {
      $$('input[name="item_image"]').closest('.custom-file-upload').find('label').css('background-image', `url('${image}')`)
      $$('input[name="item_image"]').closest('.custom-file-upload').find('label').css('background-size', 'contain')
      $$('input[name="item_image"]').closest('.custom-file-upload').find('label').css('background-position', 'center')
      $$('input[name="item_image"]').closest('.custom-file-upload').find('label').css('background-repeat', 'no-repeat')
    }
  }, 300)    
})

$(document).on('page:beforein', '.page[data-name="image_upload"]', async function(e) {
  console.log('app image_upload ready')
  var tbl = e.detail.route.params.cat;
  var id = e.detail.route.params.id;
  console.log(id + ', ' + tbl);  
  var strHtml = `
<div class="custom-file-upload item" id="fileUpload">
  <input type="hidden" id="a8_id" value="` + id + `">
  <input type="hidden" id="a8_tbl" value="` + tbl + `">
  <input type="file" id="fileuploadInput" name="item_image" />
  <label for="fileuploadInput">
  </label>
</div>
<div data-lang="tap_to_upload" class="centered-text mb-15">${text.tap_to_upload}</div>
<div class="centered-text">
  <a href="#" id="image_upload_button" data-lang="save" class="btn btn-primary fw-700">${text.save}</a>
</div>`;
  $$("#image_upload_content").html(strHtml);  
});

$(document).on('change', 'input#fileuploadInput', function(e) {
  const file = e.target.files[0]
  const reader = new FileReader()
  reader.onload = function(e) {
    document.querySelector('.custom-file-upload label').style.backgroundImage = `url('${e.target.result}')`
    document.querySelector('.custom-file-upload label').style.backgroundSize = 'cover'
  }
  reader.readAsDataURL(file)
})

$(document).on('change', 'input[name="item_image"]', function(e) {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onload = function(event) {
    //console.log($('.custom-file-upload.item'));
    $('.custom-file-upload.item')
      .find('label')
      .css('background-image', `url('${event.target.result}')`)
      .css('background-size', 'cover');
  };
  if (file) {
    reader.readAsDataURL(file);
  }
});

$$(document).on('click', '#image_upload_button', async function() {
  var view = app.views.current
  const id = $('#a8_id').val();
  const tbl = $('#a8_tbl').val();
  const item_image = $('input[name="item_image"]').prop('files')[0]
  let itemImgBase64 = null
  if (item_image) {
    // Wrap the FileReader in a Promise to wait for it to complete
    itemImgBase64 = await new Promise((resolve, reject) => {
      const reader = new FileReader()
      reader.readAsDataURL(item_image)
      reader.onload = () => resolve(reader.result)
      reader.onerror = () => reject(new Error('Failed to read image as base64'))
    })
    //console.log(itemImgBase64)
  }
  if (itemImgBase64) {
    let img_data= itemImgBase64;
    let req = {
      id,tbl,img_data
    }
    try {
      app.preloader.show()
      let promises = [];
      if (req) {
        console.log(req)  
        promises.push(image_upload(req))
      }
      const responses = await Promise.all(promises)
      app.preloader.hide()
    } catch (error) {
      app.preloader.hide()
      app.dialog.alert(res.message, 'Upload Image Error');
    }
  }
});

$(document).on('page:beforein', '.page[data-name="landing"]', async function (e) {
  console.log('app landing ready')
  var swiper = new Swiper(".mySwiper", 
{
      // Optional parameters
      direction: 'horizontal',
      loop: true, // Loop the slides

      // Autoplay configuration
      autoplay: {
        delay: 3000, // Time in milliseconds between slides (e.g., 3 seconds)
        disableOnInteraction: false, // Continue autoplay even after user interaction
      },

      // If you need pagination
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },

      // If you need navigation buttons
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    }
);
  
  
});

$(document).on('sheet:open', '.sheet[data-name="m_language"]', async function (e) {
  console.log('app form_lang ready')
  let dt1=get_localstorage('lang');
  let dt=dt1.data;
  console.log(dt)
  console.log(ar.lang)
  let t_lang=``;
  ar.lang.forEach((v,i)=>{
    if(dt==v.code) {
      t_lang +=`<label class="radio mr-6" style="margin-left: 5px">
      <input value="`+v.code+`" onChange="lang_change('${v.code}')" type="radio" checked name="lang">
      <i class="icon-radio"></i>
    </label>`+v.lang;
    } else {
      t_lang +=`<label class="radio mr-6" style="margin-left: 5px">
      <input value="`+v.code+`" onChange="lang_change('${v.code}')" type="radio" name="lang">
      <i class="icon-radio"></i>
    </label>`+v.lang;
    }
  })
  $("#r_lang").html(t_lang);
});

/*
$(document).on('page:beforein', '.page[data-name="new_release"]', async function (e) {
  console.log('app new_release ready')
  //var aid = e.detail.route.params.id
  //console.log(aid)
  //items_pria();
  let dt2=get_localstorage('item_pria');
  let dt=dt2.data.by_create_at.bysort.data;
  console.log(dt)  
  
  var content = `<div class="grid grid-cols-2 grid-gap">`;
  dt.forEach(v => {
    content +=`
  <a href="/p/by_create_at/${v.id}" data-href="/p/by_create_at/${v.id}" class="card card-with-footer">
      <img src="${v.img}" alt="${v.name} ${v.pid}">
      <div class="card-footer">
        <div class="card-category bg-color-white">${v.brand}</div>
        <p>${v.rp_min}</p>
      </div>
  </a>      
    `;
  });
  content +=`</div>`;
  $("#new_release_content").html(content);
  
});
*/

$$(document)['on']('page:init', '.page[data-name="onboarding"]', function(e) {
  const _0x120dc9 = document['querySelector']('.swiper-onboarding');
  $$('.onboarding-next-button')['on']('click', () => {
    const _0x26252c = _0x120dc9['swiper']['slides']['length'],
      _0x5fe4a1 = _0x120dc9['swiper']['activeIndex'] + 0x1;
    console['log'](_0x5fe4a1 + ' / ' + _0x26252c);
    if (_0x5fe4a1 == _0x26252c) {
      app['views']['current']['router']['back']();
      return;
    }
    _0x120dc9['swiper']['slideNext'](), _0x5fe4a1 == _0x26252c - 0x1 && $$('.onboarding-next-button')['text']('Start!');
  });
});

$$(document)['on']('page:init', '.page[data-name="item_detail"]', function(e) {
   var fp = app['photoBrowser']['create']({
      'photos': [
    "https://im1.ahi9.com/item/BAE160/241205100851-bae160.jpeg",
    "https://im1.ahi9.com/item/BAE160/241205100853-bae160.jpeg",
    "https://im1.ahi9.com/item/BAE160/241205102140-bae160.jpeg",
    "https://im1.ahi9.com/item/BAE160/241205102142-bae160.jpeg",
    "https://im1.ahi9.com/item/BAE160/241205102145-bae160.jpeg",
    "https://im1.ahi9.com/item/BAE160/241205102218-bae160.jpeg",
    "https://im1.ahi9.com/item/BAE160/241205102240-bae160.jpeg",
    "https://im1.ahi9.com/item/BAE160/241205102636-bae160-black.jpeg",
    "https://im1.ahi9.com/item/BAE160/241205102932-bae160-lavender.jpeg",
    "https://im1.ahi9.com/item/BAE160/241205102951-bae160-rosewood.jpeg"
],
      'theme': 'dark'
    });
  $$('.photo-browser-demo')['on']('click', function() {
    fp['open']();
  });
});

$('#remember_me').click(function() {
  if($('#remember_me').is(':checked')) {
    localStorage.username = $('#user_name').val();
    localStorage.password = $('#password').val();
    localStorage.chkbx = $('#remember_me').val();
  } else {
    localStorage.username = '';
    localStorage.password = '';
    localStorage.chkbx = '';
  }
});

$$(document).on('page:init', '.page[data-name="signin"]', function(e) {
  $(document).off("click", "#signin_button").on("click", "#signin_button", function(e) {
  console.log('app signin-2 ready')
  //console.log(lang)
    e.preventDefault();  
    var email = $("#loginEmail").val();
    var password = $("#loginPassword").val();
    let req = {
      email,
      password
    }
    if (email && password) {
      signin(req);
    } else {
      app.dialog.alert("Please enter your username and password", "Login Errors");
    }
  });
})

https://a1.ekbis.blog/js/cart.js



https://a1.ekbis.blog/js/item.js


function changeSize() {
  var rn = document.getElementById("myRange");
  var bt = document.getElementById("bodytext");
  //let bt=$$('#bodytext')
  bt.className = ''; 
  bt.className = 'fz-'+rn.value; 
}

$(document).on('page:beforein', '.page[data-name="item_detail"]', async function(e) {
  console.log('app item_detail ready')
  var cat = e.detail.route.params.cat;
  var id = e.detail.route.params.id;

  //console.log(id + ', ' + cat);  
  let dt2 = get_localstorage('byid');
  let dt = dt2.data;
  //console.log(dt)
  for(let a = 0; a < dt.length; a++) {
    if(dt[a].id == id) {
      let item = dt[a];
      //console.log(item)
      let top_img = `
<div class="card-image">
  <img src="${item.img}" id="item_img_${dt.id}" alt="">
</div>`;
      let content = ``;
      content += `<h1>${item.title}</h1>`;
      content += top_img;
  if(item.section) {
      content += `<p class="single-post-category">${item.section}</p>`;
  }    
      content += `<p class="lead mt-12 mb-12">${item.summary}</p>`;
      content +=`
<div class="slidecontainer">
  <input onChange="changeSize('myText')" type="range" min="12" max="20" value="15" class="size-slider" id="myRange">  
</div>      `;
      content += `<span id="bodytext" class="fz-15">${item.bodytext}</span>`;
      content += `<h3>Tag</h3>`;
      content += `<p>${item.tag}</p>`;
      $("#ptitle_item_detail").html(item.site);
      $("#ptitle_large_item_detail").html('<span class="single-post-channel">'+item.site+'</span>');
      $("#item_detail_content").html(content);
    }
  }
});

$(document).on('page:beforein', '.page[data-name="list_page"]', async function(e) {
  console.log('app list_page ready')
  var cat = e.detail.route.params.cat;
  var id = e.detail.route.params.id;
  console.log(id + ', ' + cat); 
  let dt2=get_localstorage(cat);
  let dt=dt2.data[id];
    
  var content = ``;
  content +=`
  <a href="/p/byid/${dt.items[0].id}" class="card">
      <div class="card-image">
        <img src="${dt.items[0].img}" alt="">
        <div class="card-image-footer">
          <h2>${dt.items[0].title}</h2>
          <div class="card-author">
            <img src="${dt.icon_url}" alt="">
            <span>${dt.title}</span>
          </div>
        </div>
      </div>
    </a>  
  `;
  content +=`<div class="post-list">`;
  //dt.items.forEach(v => {
  for(let a=1;a<dt.items.length;a++) {
    content +=`
  <a href="/p/byid/${dt.items[a].id}" class="link post-horizontal">
    <div class="infos">`;
    if(dt.items[a].section) {
    content +=`<div class="post-category">${dt.items[a].section}</div>`;
    }      
    content +=`<div class="post-title">${dt.items[a].title}</div>
      <div class="post-date">`+InDayHour(dt.items[a].publish_at)+` ago </div>
    </div>
    <div class="post-image">
      <img src="${dt.items[a].img}" alt="">
    </div>
  </a>
    `;
  };
  content +=`</div>`;

  $("#ptitle_list_page").html(dt.title);
  $("#ptitle_large_list_page").html(dt.title);
  $("#list_page_content").html(content);
});

$$("#tab-search" ).on('tab:show', function() {
  let dt2=get_localstorage('byid');
  let dt=dt2.data;  
  var $tabEl = $(this);
  //var tabId = $tabEl.attr('id');
  console.log('app tab_search ready');
  let search=document.querySelector("#tab-search > div.navbars > div > div.navbar-inner > div.subnavbar > form > div > div > input");
  search.addEventListener('change', function() {
    let q=this.value;
    console.log(q);
    if(q.length>3) {
      let res = search_data(dt, 'title', q)
      console.log(res.data)
      let r2=res.data;
      let dv = Object.keys(res.data);
      console.log(dv.length)
      console.log(dv[0])
      content =`<div class="post-list">`;    
      dv.forEach((v) => {
       content +=`
  <a href="/p/byid/${r2[v].id}" class="link post-horizontal">
    <div class="infos">`;
       if(r2[v].section) {
        content +=`<div class="post-category">${r2[v].section}</div>`;
       }      
       content +=`<div class="post-title">${r2[v].title}</div>
      <div class="post-date">`+InDayHour(r2[v].publish_at)+` ago </div>
    </div>
    <div class="post-image">
      <img src="${r2[v].img}" alt="">
    </div>
  </a>
    `;
      });
      content +=`</div>`;
      $("#search_tab_content").html(content);    
    }  
  });
})

$(document).on('page:beforein', '.page[data-name="timeline"]', async function (e) {
  console.log('app timeline ready')
  let dt2=get_localstorage('latest');
  let dt=dt2.data;
  //var content = `<div class="swiper-pagination"></div>`;
  var content = ``;
  //dt.forEach(v => {
  for(let a=0;a<30;a++){
    content +=`
    <div class="swiper-slide">
    <div class="timeline-slide">
      <a href="p/latest_byid/${dt[a].id}" data-href="p/latest_byid/${dt[a].id}" class="card card-1x1"  style="border-radius:0;">
        <div class="card-image">
          <img src="${dt[a].img}" alt="${dt[a].title}">
          <div class="card-image-footer">
            <h2 class="timel">${dt[a].title}</h2>
            <div class="card-author">`;
    if(dt[a].icon_url) {        
    content +=`<img src="${dt[a].icon_url}" alt="">`;
    }
    content +=`<span>`;
    if(dt[a].section) {        
    content +=`${dt[a].section}, `;
    }
    content +=`${dt[a].site} | ${InDayHour(dt[a].publish_at)}</span>`;
    content +=`</div>
          </div>
        
        </div>
        <div class="card-footer">
        <h3 class="timel">${dt[a].summary}</h3>
        </div>
      </a>
      </div>
    </div>
      `;
  };
  content +=``;

  $("#timeline_swiper_wraper").html(content); 

  var swiper = new Swiper(".swiper-timeline", {
    // Optional parameters
    direction: 'horizontal',
    loop: true, // Loop the slides
    // Autoplay configuration
    
    autoplay: {
      delay: 5000, // Time in milliseconds between slides (e.g., 3 seconds)
      disableOnInteraction: false, // Continue autoplay even after user interaction
    }, 
    /* */
    // If you need pagination
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
  });    
});

https://a1.ekbis.blog/js/lang.js
var trans_text={"en":{"about_as":"About As","about_us_title":"About Us","account":"Account","account_delete":"Account Delete","account_delete_title":"Account Delete","account_edit":"Account Edit","account_edit_title":"Account Edit","add":"Add","address":"Address","add_to_cart":"Add to cart","all_images":"All Images","cancel":"Cancel","cart":"Cart","cart_msg":"Cart Msg","category":"Category","channel":"Channel","city":"City","colors":"Colors","delete_log":"Delete Log","distict":"Distict","dob":"Dob","email":"Email","email_check":"Email Check","explore":"Explore","faq":"Faq","faq_title":"FAQ","first_name":"First Name","gelar":"Gelar","hide_password":"Hide Password","home":"Home","image_profile":"Image Profile","interest":"Interest","item_detail_title":"Item Detail","language":"Langauge","language_name":"English","last_name":"Last Name","logout":"Logout","more":"More","new_release_title":"New Release","password":"Password","password_change":"Password Change","password_change_title":"Password Change","password_current":"Password Current","password_forgot":"Password Forgot","password_forgot_title":"Password Forgot","password_new":"Password New","password_repeat":"Password Repeat","password_reset":"Password Reset","phone":"Phone","postcode":"Postcode","privacy":"Privacy Policy","privacy_title":"Privacy Policy","product":"Product","reason":"Reason","remember_me":"Remember Me","rt":"RT","rw":"RW","save":"Save","search":"Search","settings_title":"Settings","sex":"Sex","show_password":"Show Password","signin":"Signin","signin_title":"Signin","signup":"Signup","signup_title":"Signup","single_title":"Single","size":"Size","size_chart":"Size Chart","tap_to_upload":"Tap to Upload","term":"Terms and Conditions","terms":"Terms and Conditions","terms_title":"Terms and Conditions","village":"Village","who":"Who"},"id":{"about_as":"Tentang Kami","about_us_title":"Tentang Kami","account":"Akun","account_delete":"Hapus Akun","account_delete_title":"Hapus Akun","account_edit":"Edit Akun","account_edit_title":"Edit Akun","add":"Tambah","address":"Alamat","add_to_cart":"Tambahken ke Cart","all_images":"Semua Foto","cancel":"Batal","cart":"Cart","cart_msg":"","category":"Kategori","channel":"Channel","city":"Kota/Kabupaten","colors":"Warna","delete_log":"Hapus Log","distict":"Kecamatan","dob":"Tanggal Lahir","email":"Surel","email_check":"Cek Email","explore":"Eksplor","faq":"Pertanyaan ","faq_title":"Koleksi Pertanyaan ","first_name":"Nama Depan","gelar":"Gelar/Sebutan","hide_password":"Samarkan Kata Sandi","home":"Home","image_profile":"Foto Profil","interest":"Minat","item_detail_title":"Detail","language":"Bahasa","language_name":"Indonesia","last_name":"Nama Belakang","logout":"Keluar","more":"lebih banyak","new_release_title":"Rilis Baru","password":"Kata Sandi","password_change":"Ubah Kata Sandi","password_change_title":"Ubah Kata sandi","password_current":"Kata Sandi Saat Ini","password_forgot":"Lupa Password","password_forgot_title":"Lupa Kata Sandi?","password_new":"Kata Sandi Baru","password_repeat":"Ulangi Kata Sandi","password_reset":"Reset Kata Sandi","phone":"WhatsApp/Telp","postcode":"Kode Pos","privacy":"Ketentuan Privasi","privacy_title":"Ketentuan Privasi","product":"Produk","reason":"Alasan Penghapusan Akun","remember_me":"Ingat Saya","rt":"RT","rw":"RW","save":"Simpan","search":"Cari","settings_title":"Pengaturan","sex":"Jenis Kelamin","show_password":"Tampilan Kata Sandi","signin":"Masuk","signin_title":"Masuk","signup":"Daftar","signup_title":"Daftar","single_title":"Artikel Tunggal","size":"Ukuran","size_chart":"Tabel Ukuran","tap_to_upload":"Klik untuk Uanggah Foto","term":"Syarat ","terms":"Syarat ","terms_title":"Syarat ","village":"Desa/Keluarahan","who":"Siapa"}};

https://a1.ekbis.blog/js/req.js
let base_url = "https://cpapp.ekbis.blog/api/v2/";

function account_delete(req) {
  app.preloader.show();
  $.ajax({
    type: "post",
    url: base_url + 'account_delete',
    data: req,
    success: (res) => {
      if (res.success) {
        remove_localstorage('member');
        app.preloader.hide();
        app.dialog.alert('Delete Account Successfully', 'Delete Account');
        app.views.main.router.navigate('/');
        window.location.reload();
      } else {
        app.preloader.hide();
        app.dialog.alert(res.message, 'Delete Account Error');
      }
    }
  })
}

function account_edit(req) {
  app.preloader.show();
  $.ajax({
    type: "post",
    url: base_url + 'account_edit',
    data: req,
    success: (res) => {
      if (res.success) {
        remove_localstorage('member');
        set_localstorage('member',res.member.data)
        app.preloader.hide();
        showToast('Update Account Successfully');
      } else {
        app.preloader.hide();
        app.dialog.alert(res.message, 'Edit Account Error');
      }
    }
  })
}

function address_add(req) {
  app.preloader.show();
  $.ajax({
    type: "post",
    url: base_url + 'address_add',
    data: req,
    success: (res) => {
      if (res.status) {
        app.preloader.hide();
        localStorage.setItem('t01_user', JSON.stringify({
          uuid: res.data.uuid,
          email: res.data.email,
          sess_token: res.data.token,
          data: res.data
        }))
        showToast('Add address successfully');
        app.views.main.router.navigate('/address/');
      } else {
        app.preloader.hide();
        app.dialog.alert(res.message, 'Add Address Error');
      }
    }
  })
}

function user_address_delete(req,elId) {
  app.preloader.show();
  $.ajax({
    type: "post",
    url: base_url + 'address_delete',
    data: req,
    success: (res) => {
      if (res.status) {
          app.preloader.hide();
          app.dialog.alert("Address deleted successfully", "Success");
          $("#"+elId).remove();
          localStorage.setItem('t01_user', JSON.stringify({
            uuid: res.data.uuid,
            email: res.data.email,
            sess_token: res.data.token,
            data: res.data
          }))
      } else {
          app.preloader.hide();
          app.dialog.alert("Failed to delete address", "Error");
      }
    }
  })
}

function address_edit(req) {
  app.preloader.show();
  $.ajax({
    type: "post",
    url: base_url + 'address_edit',
    data: req,
    success: (res) => {
      if (res.status) {
        app.preloader.hide();
        localStorage.setItem('t01_user', JSON.stringify({
          uuid: res.data.uuid,
          email: res.data.email,
          sess_token: res.data.token,
          data: res.data
        }))
        showToast('Update User Address Successfully');
        //app.views.main.router.navigate('/address/');
      } else {
        app.preloader.hide();
        app.dialog.alert(res.message, 'Add Address Error');
      }
    }
  })
}

function delete_log() {
localStorage.clear();
/*
 remove_localstorage('member');
 remove_localstorage('member_img');
 remove_localstorage('byid');
 remove_localstorage('lang');
 remove_localstorage('latest');
 //a1n3s_latest_bysection
 remove_localstorage('letest_bysection');
 remove_localstorage('latest_bysite');
 remove_localstorage('sections');
 remove_localstorage('sites');
 remove_localstorage('theme');
 remove_localstorage('letest_bysection');
 */
}

function email_check() {
  //app.preloader.show();
  let dt2=get_localstorage('member');
  let req={'email':dt2.data.email,'name':dt2.data.nama_member};
  console.log(req)
  
  $.ajax({
    type: "post",
    url: base_url + 'email_cek',
    data: req,
    success: (res) => {
      if (res.success) {
        app.preloader.hide();
        app.dialog.alert('Email Check Success','Email Check');
        //app.views.main.router.navigate('/');
      } else {
        app.preloader.hide();
        app.dialog.alert(res.message, 'Email Check');
      }
    }
  })
  
}

function image_upload(req) {
  app.preloader.show();
  $.ajax({
    type: "POST",
    url: base_url + 'image_upload',
    data: req,
    success: (res) => {
      if (res.success) {
        app.preloader.hide();
        app.dialog.alert('Update/Upload Image Successfully', 'Upluad Image');
        if(req.tbl=='member') {
          set_localstorage('member_img',res.data);
          account_image_reload();
        }
      } else {
        app.preloader.hide();
        app.dialog.alert(res.message, 'Upload Image Error');
      }
    }
  })
}

function latest() {
  app.preloader.show();
  $.ajax({
    type: "post",
    url: base_url+'news/?limit=36',
    success: (res) => {
      if (res.success) {
        app.preloader.hide();
        remove_localstorage('latest');
        set_localstorage('latest',res.data)
        //set_localstorage('latest_byid',res.byid);
        //set_localstorage('byid',res.byid)
        localstorage_InsUpdate('byid',res.byid)
        //showToast('get Item '+name+' Success');
      } else {
        app.preloader.hide();
        app.dialog.alert(res.message, 'Error get latest');
      }
    }
  })
}

function latest_bysection() {
  app.preloader.show('multi');
  $.ajax({
    type: "post",
    url: base_url+'latest_bysection',
    success: (res) => {
      if (res.success) {
        app.preloader.hide();
        remove_localstorage('latest_bysection');
        set_localstorage('latest_bysection',res.data);
        //set_localstorage('latest_bysection_byid',res.byid);
        localstorage_InsUpdate('byid',res.byid);
        //showToast('get Item '+name+' Success');
      } else {
        app.preloader.hide();
        app.dialog.alert(res.message, 'Error get latest_bysite');
      }
    }
  })
}

function latest_bysite() {
  app.preloader.show('multi');
  $.ajax({
    type: "post",
    url: base_url+'latest_bysite',
    success: (res) => {
      if (res.success) {
        app.preloader.hide();
        remove_localstorage('latest_bysite');
        set_localstorage('latest_bysite',res.data);
        //set_localstorage('latest_bysite_byid',res.byid);
        localstorage_InsUpdate('byid',res.byid);
        //showToast('get Item '+name+' Success');
      } else {
        app.preloader.hide();
        app.dialog.alert(res.message, 'Error get latest_bysite');
      }
    }
  })
}

function latest_bywho() {
  app.preloader.show();
  $.ajax({
    type: "post",
    url: base_url+'latest_bywho',
    success: (res) => {
      if (res.success) {
        app.preloader.hide();
        remove_localstorage('latest_bywho');
        set_localstorage('latest_bywho',res.data);
        //set_localstorage('latest_bysite_byid',res.byid);
        localstorage_InsUpdate('byid',res.byid);
        //showToast('get Item '+name+' Success');
      } else {
        app.preloader.hide();
        app.dialog.alert(res.message, 'Error get latest_bysite');
      }
    }
  })
}

function news(limit='',page='',site='',section='',q='',tag='') {
  app.preloader.show('multi');
  $.ajax({
    type: "post",
    url: base_url+'news/?limit='+limit+'&page='+page+'&site='+site+'&section='+section+'&q='+q+'&tag='+tag,
    success: (res) => {
      if (res.success) {
        app.preloader.hide();
        return res;
        //remove_localstorage('sites');
        //set_localstorage('sites',res)
        //showToast('get Item '+name+' Success');
      } else {
        app.preloader.hide();
        app.dialog.alert(res.message, 'Error get news');
      }
    }
  })
}

function news_bysite(id) {
  app.preloader.show('multi');
  $.ajax({
    type: "post",
    url: base_url+'news/?limit=100&site='+id,
    success: (res) => {
      if (res.success) {
        app.preloader.hide();
        set_localstorage('site_'+id,res.data);
        localstorage_InsUpdate('byid',res.byid);
      } else {
        app.preloader.hide();
        app.dialog.alert(res.message, 'Error get latest');
      }
    }
  })
}

function password_cek(req) {
  app.preloader.show('multi');
  $.ajax({
    type: "post",
    url: base_url + 'password_cek',
    data: req,
    success: (res) => {
      if (res.success) {
        showToast('Change Password Success');
      } else {
        app.preloader.hide();
        app.dialog.alert(res.message, 'Error');
      }
    }
  })
}

function password_change(req) {
  app.preloader.show();
  $.ajax({
    type: "post",
    data: req,
    url: base_url + 'password_change',
    success: (res) => {
      if (res.success) {
        //remove_localstorage('member');
        app.preloader.hide();
        showToast('Change Password Success');
        //app.views.main.router.navigate('/');
      } else {
        app.preloader.hide();
        app.dialog.alert(res.message, 'Error');
      }
    }
  })
}

function password_forgot(req) {
  app.preloader.show();
  $.ajax({
    type: "POST",
    url: base_url + 'password_forgot',
    data: req,
    success: (res) => {
      if (res.status) {
        app.preloader.hide();
        app.dialog.alert(res.message, 'Password Forgot');
      } else {
        app.preloader.hide();
        app.dialog.alert(res.message, 'Password Forgot Error');
      }
    }
  })
}

function reload() {
  app.preloader.show();
  remove_localstorage('byid');
  sites();  
  sections(); 
  latest_bysite();
  latest();
  latest_bysection();
  latest_bywho();
  who();
  setTimeout(() => {
    home_latest();
    tab_content_channel();
    tab_content_category();
    tab_content_who();
    home_site();
    home_section();
    home_who();
  }, 1500);

  setTimeout(() => {
    app.preloader.hide();
  }, 3500);
}

function sections() {
  app.preloader.show('multi');
  $.ajax({
    type: "post",
    url: base_url+'sections',
    success: (res) => {
      if (res.success) {
        app.preloader.hide();
        
        let dt=get_localstorage('sections') || [];
        if(dt.status==false) {        
          set_localstorage('sections',res.data)
        }
        //showToast('get Item '+name+' Success');
      } else {
        app.preloader.hide();
        app.dialog.alert(res.message, 'Error get sections');
      }
    }
  })
}

function signin(req) {
  app.preloader.show('multi');
  $.ajax({
    type: "post",
    url: base_url + 'signin',
    data: req,
    success: (res) => {
      if (res.success) {
        remove_localstorage('member');
        remove_localstorage('member_img');
        set_localstorage('member',res.member.data);
        set_localstorage('member_img',res.img.data);  
        sites();  
        sections(); 
        latest_bysite();
        latest();
        latest_bysection();
        latest_bywho();
        who();  
        //news(24,'','','','','');
        setTimeout(() => {
          app.preloader.hide();
          app.views.main.router.navigate('/');
          window.location.reload();
          console.log('app index ready')
        }, 1500);
               
      } else {
        app.preloader.hide();
        app.dialog.alert(res.message, 'Login Failed');
      }
    }
  })
}

function signup(req) {
  app.preloader.show();
  $.ajax({
    type: "post",
    url: base_url + 'signup',
    data: req,
    success: (res) => {
      if (res.success) {
        remove_localstorage('member');
        set_localstorage('member',res.member.data)
        app.preloader.hide();
        app.views.main.router.navigate('/');
      } else {
        app.preloader.hide();
        app.dialog.alert(res.message, 'SignUp Failed');
      }
    }
  })
}

function sites() {
  app.preloader.show('multi');
  $.ajax({
    type: "post",
    url: base_url+'sites',
    success: (res) => {
      if (res.success) {
        app.preloader.hide();
        let dt=get_localstorage('sites') || [];
        if(dt.status==false) {        
          set_localstorage('sites',res.data)
        }
        //showToast('get Item '+name+' Success');
      } else {
        app.preloader.hide();
        app.dialog.alert(res.message, 'Error get sites');
      }
    }
  })
}

function who() {
  app.preloader.show();
  $.ajax({
    type: "post",
    url: base_url+'who',
    success: (res) => {
      if (res.success) {
        app.preloader.hide();
        let dt=get_localstorage('who') || [];
        if(dt.status==false) {        
          set_localstorage('who',res.data)
        }
        //showToast('get Item '+name+' Success');
      } else {
        app.preloader.hide();
        app.dialog.alert(res.message, 'Error get who');
      }
    }
  })
}


module.exports = {
 account_delete,
 account_edit,
 address_add,
 address_delete,
 address_edit,
 delete_log,
 email_check,
 image_upload,
 latest,
 latest_bysection,
 latest_bysite,
 latest_bywho,
 news,
 news_bysite,
 password_cek,
 password_change,
 password_forgot,
 reload,
 sections,
 signin,
 signup,
 sites,
 who,
};

https://a1.ekbis.blog/js/routes.js

var routes = [
  { path: '/', url: './index.html', name: 'start'},
  { path: '/about_us/', url: './pages/about_us.html', name: 'about_us'},
  { path: '/account/', url: './pages/account.html', name: 'account'},
  { path: '/account_delete/', url: './pages/account_delete.html', name: 'account_delete'},
  { path: '/account_edit/', url: './pages/account_edit.html', name: 'account_edit'},
  { path: '/blank/', componentUrl: './pages/blank.html', name: 'blank'},
  { path: '/faq/', componentUrl: './pages/faq.html', name: 'faq'},
  { path: '/home/', url: './.html', name: 'home'},
  { path: '/icons/', componentUrl: './pages/icons.html', name: 'icons'},
  { path: '/image_upload/:cat/:id', url: './pages/image_upload.html', name: 'image_upload'},
  { path: '/interest/', url: './pages/interest.html', name: 'interest'},
  { path: '/item', url: './.html', name: 'item'},
  { path: '/p/:cat/:id', url: './pages/item_detail.html', name: 'item_detail'},
  { path: '/landing/', url: './pages/landing.html', name: 'landing'},
  { path: '/list_page/:cat/:id', url: './pages/list_page.html', name: 'list_page'},
  { path: '/more/', componentUrl: './.html', name: 'more'},
  { path: '/new_release/', url: './.html', name: 'new_release'},
  { path: '/onboarding/', url: './pages/onborading.html', name: 'onboarding'},
  { path: '/password_change/', url: './pages/password_change.html', name: 'password_change'},
  { path: '/password_forgot/', url: './pages/password_forgot.html', name: 'password_forgot'},
  { path: '/person_edit/:id', url: './pages/person_edit.html', name: 'person_edit'},
  { path: '/privacy/', url: './pages/privacy.html', name: 'privacy'},
  { path: '/settings/', url: './pages/settings.html', name: 'settings'},
  { path: '/signin/', url: './pages/signin.html', name: 'signin'},
  { path: '/signup/', url: './pages/signup.html', name: 'signup'},
  { path: '/single/', url: './pages/single.html', name: 'single'},
  { path: '/terms/', url: './pages/terms.html', name: 'terms'},
  { path: '/timeline/', url: './pages/timeline.html', name: 'timeline'},
  { path: '(.*)', url: './pages/blank.html'}];

https://a1.ekbis.blog/js/utils.js
function timeOut(num = 30000) {
  setTimeout(() => {
    app.preloader.hide();
    app.dialog.alert('Operation timed out...', 'Time Out');
  }, num)
}
function promiseTimeout(ms, promise) {
  // Create a promise that rejects in <ms> milliseconds
  let timeout = new Promise((resolve, reject) => {
    let id = setTimeout(() => {
      clearTimeout(id);
      reject('Operation timed out in ' + (ms / 1000) + 's')
    }, ms)
  })
  // Returns a race between our timeout and the passed in promise
  return Promise.race([
    promise,
    timeout
  ])
}
String.prototype.replaceAt = function(index, char) {
  return this.substr(0, index - 1) + char + this.substr(index + char.length);
}

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}



function showToast(message, type = 'Message', position = 'bottom') {
  app.toast.create({
    text: message,
    position: position,
    closeTimeout: 2000,
  }).open()
}

function account_image_reload() {
  let uimg = get_localstorage('member_img');
  let it=uimg.data;
  let usr = get_localstorage('member');
  let dt=usr.data;
  let t_menu=`
  <a href="/image_upload/member/`+dt.id+`" class="image_upload" data-image="`+it[0].url.small+`">
    <div class="colored-icon red">
      <i class="icon f7-icons">camera_fill</i>
    </div><span data-lang="image_profile"></span></a>`;
  let t_img=`<a class="image_upload" data-image="`+it[0].url.small+`" href="/image_upload/member/`+dt.id+`"><img src="`+it[0].url.small+`" alt="`+dt.nama_member+`" class="img image"></a>`;
  $("#account_img_menu").html(t_menu); 
  $("#user_img").html(t_img); 
  let cid = document.getElementsByClassName('user_avatar');
  for (let i = 0; i < cid.length; i++) {
    cid[i].setAttribute('src',it[0].url.small);
    cid[i].setAttribute('alt',dt.nama_member);
  }  
}

const array_combine = (arr1, arr2, key) => {
  // Combine both arrays
  const combinedArray = [...arr1, ...arr2];

  // Use reduce to group objects by the unique key
  const reduced = combinedArray.reduce((acc, current) => {
    const keyValue = current[key];
    // If a value with this key already exists, merge it, otherwise, add it
    acc[keyValue] = acc[keyValue] ? { ...acc[keyValue], ...current } : { ...current };
    return acc;
  }, {});

  // Return the values of the resulting object as an array
  return Object.values(reduced);
};

function changeTheme() {
  let cid = document.getElementById('myTheme');
  console.log('app change_theme ready');
  //console.log(cid.children.length)
  //console.log(cid.children[0].innerText)
  if(cid.children[0].innerText=='moon_stars') {
    set_localstorage('theme','dark');
    $$('.switch-theme i')['text']('sun_max');
    $$('body')['toggleClass']('dark');    
  } else {
    set_localstorage('theme','');
    document.body.classList.remove('dark');
    $$('.switch-theme i')['text']('moon_stars');
  }
}

function click_category(id,i) {
  let cid = document.getElementById('category_'+id);
  //console.log(cid)
  //console.log(title)
  if (cid.classList.contains('selected')) {
    cid.classList.remove('selected');
    localstorage_update('sections',i,0);
  } else {
    cid.classList.add('selected');
    localstorage_update('sections',i,1);
  }   
}

function click_channel(id,i) {
  let cid = document.getElementById('channel_'+id);
  //console.log(cid)
  //console.log(title)
  if (cid.classList.contains('selected')) {
    cid.classList.remove('selected');
    localstorage_update('sites',i,0);
  } else {
    cid.classList.add('selected');
    localstorage_update('sites',i,1);
  }   
}

function copy_text(event) {
  let text = event.target.getAttribute('data-clipboard-text');
  if(text === null) return {
    status: false,
    data: {}
  };
  let temp = document.createElement('textarea');
  temp.value = text;
  document.body.appendChild(temp);
  temp.select();
  document.execCommand('copy');
  document.body.removeChild(temp);
  alertPages('success', 'Berhasil menyalin teks', 2000)
  return {
    status: true,
    data: text
  }
}

function empty(objOrArr) {
  if(Array.isArray(objOrArr)) {
    return objOrArr.length === 0;
  } else if(typeof objOrArr === 'object' && objOrArr !== null) {
    return Object.keys(objOrArr).length === 0 && objOrArr.constructor === Object;
  } else {
    return false;
  }
}

function home_latest() {
  let dt2=get_localstorage('latest');
  let dt=dt2.data;
  console.log('home_latest ready')
  //console.log(dt2)
  
  var content = ``;
  //dt.forEach(v => {
  for(let a=0;a<6;a++){
    content +=`
  <swiper-slide>
    <a href="p/latest_byid/${dt[a].id}" data-href="p/latest/${dt[a].id}" class="card card-movie">
      <div class="card-image">
        <img src="${dt[a].img}" alt="${dt[a].title}">        
         <div class="card-movie-rating">
         <i class="icon f7-icons text-color-yellow">clock_fill</i>
         ${InDayHour(dt[a].publish_at)}</div>
      </div>
    </a>
  </swiper-slide>
    `;
  };
  content +=``;
  $("#home_latest").html(content);
  
}

function home_section() {
  let dt2=get_localstorage('sections');
  let dt=dt2.data;
  console.log('home_section ready')
  //console.log(dt)
  const ds = dt.filter(d => d.select === 1);
  //console.log(ds)
  var content = ``;
  ds.forEach(v => {
  //for(let a=0;a<6;a++){
    content +=`
    <div class="section-title">
    ${v.title}<a href="/list_page/latest_bysection/${v.id}" class="link">View All</a>
    </div>`;
    content +=list_item_bysection(v.id);
  });
  $("#home_section").html(content);  
}

function home_site() {
  let dt2=get_localstorage('sites');
  let dt=dt2.data;
  console.log('home_site ready')
  //console.log(dt)
  const ds = dt.filter(d => d.select === 1);
  //console.log(ds)
  var content = ``;
  ds.forEach(v => {
  //for(let a=0;a<6;a++){
    content +=`
    <div class="section-title">
    ${v.title}<a href="/list_page/latest_bysite/${v.id}" class="link">View All</a>
    </div>`;
    content +=list_item_bysite(v.id);
  });
  $("#home_site").html(content);  
}

function home_who() {
  let dt2=get_localstorage('who');
  let dt=dt2.data;
  console.log('home_who ready')
  //console.log(dt)
  const ds = dt.filter(d => d.select === 0);
  //console.log(ds)
  var content = ``;
  ds.forEach(v => {
  //for(let a=0;a<6;a++){
    content +=`
    <li>
      <a href="list_page/latest_bywho/${v.id}" data-link="list_page/latest_bywho/${v.id}" class="item-link item-content">
        <div class="item-media">
          <img src="${v.img}" class="event-thumbnail" alt="${v.name}">
        </div>
        <div class="item-inner">
          <div class="item-title">
            <div class="item-name">${v.name}</div>
            <div class="item-footer"></div>
          </div>
          <div class="item-after">
            <span class="badge bg-color-primary">${v.daily_count}</span>
          </div>
        </div>
      </a>
    </li>`;
  });
  $("#home_who").html(content);  
}

function InDayHour(pub_at) {
  const now = new Date()/1000;
  const diffseconds = now - pub_at;
  const totalMinutes = diffseconds / 60;
  const totalHours = diffseconds / (60 * 60);
  const days = Math.floor(totalHours / 24);
  const hours = Math.floor(totalHours % 24);
  const minutes = Math.floor(totalMinutes % 60);
  let ret=``;
  if(days>0) {
    ret +=days+`d, `;
  }
  if(hours>0) {
    ret +=hours+`h, `;
  }
  if(minutes>0) {
    ret +=minutes+`m`;
  }
  return ret;
}

function swiper_byzoom(Id) {
  var swiper2 = app.swiper.create(Id, {
  modules: [Zoom, Navigation],
  zoom: {
    maxRatio: 4, // Set the maximum zoom level
    minRatio: 1, // Set the minimum zoom level
  },
    speed: 400,
    spaceBetween: 10,
    slidesPerView: 1,
    autoplay: {
      delay: 4000,
      disableOnInteraction: false
    }
  });
}
/*
  var mySwiper = new Swiper('.swiper-timeline', {
    autoplay: true,
    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
      renderBullet: function(index, className) {
        return '<span class="' + className + '"> <span class="text-nv">' + (menu[index]) + '</span></span>';
      },
    },

  })
*/
function init_swiper(Id) {
  var swiper1 = app.swiper.create(Id, {
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
    },
    speed: 400,
    spaceBetween: 10,
    slidesPerView: 1,
    autoplay: {
      delay: 4000,
      disableOnInteraction: false
    }
  });
}

function InsertUpdateArray(arr, newItem, keyProperty) {
  let updated = false;
  const newArr = arr.map(item => {
    if (item[keyProperty] === newItem[keyProperty]) {
      updated = true;
      return { ...item, ...newItem }; // Merge new item properties with existing
    }
    return item;
  });

  if (!updated) {
    newArr.push(newItem); // Add new item if not found
  }
  return newArr;
}

function lang_change(lang) {
  remove_localstorage('lang');
  set_localstorage('lang',lang)
  console.log('set lang to: '+lang)
  Text(lang);
  document.querySelectorAll("[data-lang]").forEach(el=> {
    transText(el, lang)
  });
  document.querySelectorAll("[data-ph_lang]").forEach(el=> {
    transPlaceholder(el, lang)
  });  
  
$(document).on('page:beforein', async function(e) {
  //console.log('page:beforein')
  document.querySelectorAll("[data-lang]").forEach(el=> {
    transText(el, lang)
  });
  document.querySelectorAll("[data-ph_lang]").forEach(el=> {
    transPlaceholder(el, lang)
  });
});
};

function list_item_bysection(id) {
  let dt2=get_localstorage('latest_bysection');
  let dt=dt2.data[id];
  //console.log('list_bysite ready')
  //console.log(dt)  
  
  var content = ``;
  content +=`
  <a href="/p/latest_bysection_byid/${dt.items[0].id}" class="card">
      <div class="card-image">
        <img src="${dt.items[0].img}" alt="">
        <div class="card-image-footer">
          <h2>${dt.items[0].title}</h2>
          <div class="card-author">
            <img src="${dt.icon_url}" alt="">
            <span>${dt.title}</span>
          </div>
        </div>
      </div>
    </a>  
  `;
  content +=`<div class="post-list">`;
  //dt.items.forEach(v => {
  for(let a=1;a<3;a++) {
    content +=`
  <a href="/p/latest_bysection_byid/${dt.items[a].id}" class="link post-horizontal">
    <div class="infos">`;
    if(dt.items[a].section) {
    content +=`<div class="post-category">${dt.items[a].section}</div>`;
    }      
    content +=`<div class="post-title">${dt.items[a].title}</div>
      <div class="post-date">`+InDayHour(dt.items[a].publish_at)+` ago </div>
    </div>
    <div class="post-image">
      <img src="${dt.items[a].img}" alt="">
    </div>
  </a>
    `;
  };
  content +=`</div>`;
  return content;
}

function list_item_bysite(id) {
  let dt2=get_localstorage('latest_bysite');
  let dt=dt2.data[id];
  //console.log('list_bysite ready')
  //console.log(dt)  
  
  var content = ``;
  content +=`
  <a href="/p/latest_bysite_byid/${dt.items[0].id}" class="card">
      <div class="card-image">
        <img src="${dt.items[0].img}" alt="">
        <div class="card-image-footer">
          <h2>${dt.items[0].title}</h2>
          <div class="card-author">
            <img src="${dt.icon_url}" alt="">
            <span>${dt.title}</span>
          </div>
        </div>
      </div>
    </a>  
  `;
  content +=`<div class="post-list">`;
  //dt.items.forEach(v => {
  for(let a=1;a<4;a++) {
    content +=`
  <a href="/p/latest_bysite_byid/${dt.items[a].id}" class="link post-horizontal">
    <div class="infos">`;
    if(dt.items[a].section) {
    content +=`<div class="post-category">${dt.items[a].section}</div>`;
    }      
    content +=`<div class="post-title">${dt.items[a].title}</div>
      <div class="post-date">`+InDayHour(dt.items[a].publish_at)+` ago </div>
    </div>
    <div class="post-image">
      <img src="${dt.items[a].img}" alt="">
    </div>
  </a>
    `;
  };
  content +=`</div>`;
  return content;
}

function list_item_bywho(id) {
  let dt2=get_localstorage('latest_bywho');
  let dt=dt2.data[id];
  //console.log('list_bysite ready')
  //console.log(dt)  
  
  var content = ``;
  content +=`
  <a href="/p/byid/${dt.items[0].id}" class="card">
      <div class="card-image">
        <img src="${dt.items[0].img}" alt="">
        <div class="card-image-footer">
          <h2>${dt.items[0].title}</h2>
          <div class="card-author">
            <img src="${dt.icon_url}" alt="">
            <span>${dt.title}</span>
          </div>
        </div>
      </div>
    </a>  
  `;
  content +=`<div class="post-list">`;
  //dt.items.forEach(v => {
  for(let a=1;a<4;a++) {
    content +=`
  <a href="/p/byid/${dt.items[a].id}" class="link post-horizontal">
    <div class="infos">`;
    if(dt.items[a].section) {
    content +=`<div class="post-category">${dt.items[a].section}</div>`;
    }      
    content +=`<div class="post-title">${dt.items[a].title}</div>
      <div class="post-date">`+InDayHour(dt.items[a].publish_at)+` ago </div>
    </div>
    <div class="post-image">
      <img src="${dt.items[a].img}" alt="">
    </div>
  </a>
    `;
  };
  content +=`</div>`;
  return content;
}

function list_page(cat,id) {
  let dt2=get_localstorage('latest_bysite');
  let dt=dt2.data[id];
  //console.log('list_bysite ready')
  //console.log(dt)  
  
  var content = ``;
  content +=`
  <a href="/p/latest_bysite_byid/${dt.items[0].id}" class="card">
      <div class="card-image">
        <img src="${dt.items[0].img}" alt="">
        <div class="card-image-footer">
          <h2>${dt.items[0].title}</h2>
          <div class="card-author">
            <img src="${dt.icon_url}" alt="">
            <span>${dt.title}</span>
          </div>
        </div>
      </div>
    </a>  
  `;
  content +=`<div class="post-list">`;
  //dt.items.forEach(v => {
  for(let a=1;a<4;a++) {
    content +=`
  <a href="/p/latest_bysite_byid/${dt.items[a].id}" class="link post-horizontal">
    <div class="infos">`;
    if(dt.items[a].section) {
    content +=`<div class="post-category">${dt.items[a].section}</div>`;
    }      
    content +=`<div class="post-title">${dt.items[a].title}</div>
      <div class="post-date">`+InDayHour(dt.items[a].publish_at)+` ago </div>
    </div>
    <div class="post-image">
      <img src="${dt.items[a].img}" alt="">
    </div>
  </a>
    `;
  };
  content +=`</div>`;
  return content;
}

function get_localstorage(key, params = {}) {
  let key2 = config.storage_key + "_" + key;
  let value = localStorage.getItem(key2);
  if(value === null) return {
    status: false,
    data: {}
  };
  if(value === "undefined") return {
    status: false,
    data: {}
  };
  if(value === "") return {
    status: false,
    data: {}
  };
  if(value === "{}") return {
    status: false,
    data: {}
  };
  if(value === "[]") return {
    status: false,
    data: {}
  };
  if(JSON.parse(value) === null) return {
    status: false,
    data: {}
  };
  return {
    status: true,
    data: JSON.parse(value)
  };
}

function localstorage_InsUpdate(name,val){
  let dt=get_localstorage(name) || [];
  //console.log(val)
  //console.log(dt)
  if(dt.status==true) {
    let dt2=array_combine(dt.data,val,'id');
    //console.log(dt2)
    set_localstorage(name, dt2);  
  } else {
    //console.log(data)
    set_localstorage(name, val);  
  }
}

function remove_localstorage(key) {
  let key2 = config.storage_key + "_" + key
  localStorage.removeItem(key2)
}

function set_localstorage(key, value) {
  let key2 = config.storage_key + "_" + key;
  localStorage.setItem(key2, JSON.stringify(value));
  return {
    status: true,
    data: value
  };
}

function localstorage_update(name,i,val){
  let dt2=get_localstorage(name) || [];
  //console.log(val)
  //console.log('id update: '+i+', val:'+val)
  if(dt2.status==true) {
    let dt=dt2.data;
    //console.log('awal')
    //console.log(dt)
    dt[i].select=val;
    //console.log('setelah update')
    //console.log(dt)
    set_localstorage(name, dt);  
  } 
}

function search_data(data, key, search) {
  let result = {};
  Object.keys(data).forEach(function(index) {
    let temp = data[index];
    if(temp[key].toLowerCase().indexOf(search.toLowerCase()) !== -1) {
      result[index] = temp;
    }
  });
  return {
    status: true,
    data: result
  };
}

function signout() {
  console.log('signout')
  remove_localstorage('member');
  remove_localstorage('member_img');
  app.views.main.router.navigate('/signin/');
  window.location.reload();
};

function SortByAmount(ulid, liclass, by) {
  var $wrap = $('#' + ulid);
  if (by == 'asc') {
    $wrap.find('.' + liclass).sort(function(a, b) {
      return +a.dataset.amount -
        +b.dataset.amount;
    }).appendTo($wrap);
  } else {
    $wrap.find('.' + liclass).sort(function(b, a) {
      return +a.dataset.amount -
        +b.dataset.amount;
    }).appendTo($wrap);
  }
}

function SortByDate(ulid, liclass, by) {
  var $wrap = $('#' + ulid);
  if (by == 'asc') {
    $wrap.find('.' + liclass).sort(function(a, b) {
      return +a.dataset.date -
        +b.dataset.date;
    }).appendTo($wrap);
  } else {
    $wrap.find('.' + liclass).sort(function(b, a) {
      return +a.dataset.date -
        +b.dataset.date;
    }).appendTo($wrap);
  }
}

function SortById(ulid, liclass, by) {
  var $wrap = $('#' + ulid);
  if (by == 'asc') {
    $wrap.find('.' + liclass).sort(function(a, b) {
      return +a.dataset.id -
        +b.dataset.id;
    }).appendTo($wrap);
  } else {
    $wrap.find('.' + liclass).sort(function(b, a) {
      return +a.dataset.id -
        +b.dataset.id;
    }).appendTo($wrap);
  }
}

function SortByName(ulid, liclass, by) {
  var $wrap = $('#' + ulid);
  if (by == 'asc') {
    $wrap.find('.' + liclass).sort(function(a, b) {
      return +a.dataset.name -
        +b.dataset.name;
    }).appendTo($wrap);
  } else {
    $wrap.find('.' + liclass).sort(function(b, a) {
      return +a.dataset.name -
        +b.dataset.name;
    }).appendTo($wrap);
  }
}

function SortBySeq(ulid, liclass, by) {
  var $wrap = $('#' + ulid);
  if (by == 'asc') {
    $wrap.find('.' + liclass).sort(function(a, b) {
      return +a.dataset.seq -
        +b.dataset.seq;
    }).appendTo($wrap);
  } else {
    $wrap.find('.' + liclass).sort(function(b, a) {
      return +a.dataset.seq -
        +b.dataset.seq;
    }).appendTo($wrap);
  }
}

function tab_content_category() {
  let dt2=get_localstorage('sections');
  let dt=dt2.data;
  console.log('tab_content_category ready')
  //console.log(dt)
  //const result = words.filter((word) => word.length > 6);
  const ds = dt.filter(d => d.select === 1);
  const dv = dt.filter(d => d.select === 0);
  //console.log(ds)
  var content = ``;
  /*
  ds.forEach(v => {
  //for(let a=0;a<6;a++){
    content +=`
    <div class="section-title">
    ${v.title}<a href="/c/${v.id}" class="link">View All</a>
    </div>`;
    //content +=list_bysite(v.id);
  });
  */
  content +=``;
  content +=``;
  dv.forEach(v => {
    content +=`
    <div class="section-title">
    ${v.title}<a href="/list_page/latest_bysection/${v.id}" class="link">View All</a>
    </div>`;
    content +=list_item_bysection(v.id);
  });
  content +=``;
  
  $("#category_tab_content").html(content);
  
}

function tab_content_channel() {
  let dt2=get_localstorage('sites');
  let dt=dt2.data;
  console.log('tab_content_channel ready')
  //console.log(dt)
  //const result = words.filter((word) => word.length > 6);
  const ds = dt.filter(d => d.select === 1);
  const dv = dt.filter(d => d.select === 0);
  //console.log(ds)
  
  var content = ``;
  /*
  ds.forEach(v => {
  //for(let a=0;a<6;a++){
    content +=`
    <div class="section-title">
    ${v.title}<a href="/c/${v.id}" class="link">View All</a>
    </div>`;
    content +=list_bysite(v.id);
  });
  */
  content +=``;
  content +=``;
  dv.forEach(v => {
    content +=`
    <div class="section-title">
    ${v.title}<a href="/list_page/latest_bysite/${v.id}" class="link">View All</a>
    </div>`;
    content +=list_item_bysite(v.id);
  });
  content +=``;
  
  $("#channel_tab_content").html(content);
  
}

function tab_content_search() {
  let dt2=get_localstorage('byid');
  let dt=dt2.data;
  console.log('tab_content_search ready')
  //console.log(dt)

  var content = ``;
  content +=``;
  content +=`
<div class="container mt-60">
  <div class="searchbar-backdrop"></div>
  <div class="list list-strong-ios list-outline-ios list-dividers-ios simple-list searchbar-not-found">
    <ul>
      <li>Nothing found</li>
    </ul>
  </div>
  <div class=" search-list_icons searchbar-found list media-list list-outline-ios list-strong-ios list-dividers-ios">
    <ul>  
  `;
  dt.forEach(v => {
    content +=`
    <a href="p/byid/${v.id}">
      <li>
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">${v.title}</div>
              <div class="item-after">${v.summary}</div>
            </div>
          </div>
      </li>
    </a>  
    `;
  });
  content +=`
    </ul>
  </div>
</div>  
  `;
  $("#search_tab_content").html(content);  
}

function tab_content_who() {
  let dt2=get_localstorage('who');
  let dt=dt2.data;
  console.log('tab_content_who ready')
  //console.log(dt)
  //const result = words.filter((word) => word.length > 6);
  const ds = dt.filter(d => d.select === 1);
  const dv = dt.filter(d => d.select === 0);
  //console.log(ds)
  
  var content = ``;
  content +=``;
  content +=``;
  dt.forEach(v => {
    content +=`
    <div class="section-title">
    ${v.name}<a href="/list_page/latest_bywho/${v.id}" class="link">View All</a>
    </div>`;
    content +=list_item_bywho(v.id);
  });
  content +=``;
  $("#who_tab_content").html(content);  
}

function Text(lang) {
  console.log('app text ready')
  text = trans_text[lang];
  console.log(text)
  document.querySelectorAll("[data-lang]").forEach(el=> {
    transText(el, lang)
  });
  document.querySelectorAll("[data-ph_lang]").forEach(el=> {
    transPlaceholder(el, lang)
  });   
};

function textCapitalize(text) {
  if(typeof text === 'string') {
    text = text.trim();
    text = text.toLowerCase().split(' ').map(function(word) {
      return word.charAt(0).toUpperCase() + word.slice(1);
    }).join(' ');
  }
  return text;
}

function toggle_password_change() {
  const p1 = document.getElementById('password22');
  const p2 = document.getElementById('newpassword22');
  const p3 = document.getElementById('confirmpassword22');
  const type = p1.getAttribute('type') === 'password' ? 'text' : 'password';
  p1.setAttribute('type', type);
  p2.setAttribute('type', type);
  p3.setAttribute('type', type);
  let btn_html='';
  if(type=='text') {
    btn_html +=text.hide_password;
  } else {
    btn_html +=text.show_password;
  }
  $('#cp_show_password').html(btn_html)
}

function toggle_signin() {
  const passwordInput = document.getElementById('loginPassword');
  const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
  passwordInput.setAttribute('type', type);
  let btn_html='';
  if(type=='text') {
    btn_html +=text.hide_password;
  } else {
    btn_html +=text.show_password;
  }
  $('#signin_btn_show_password').html(btn_html)
}

function toggle_signup() {
  const reg_password= document.getElementById('reg_password');
  const reg_password_repeat= document.getElementById('reg_password_repeat');
  const type = reg_password.getAttribute('type') === 'password' ? 'text' : 'password';
  reg_password.setAttribute('type', type);
  reg_password_repeat.setAttribute('type', type);
  let btn_html='';
  if(type=='text') {
    btn_html +=text.hide_password;
  } else {
    btn_html +=text.show_password;
  }
  $('#reg_show_password').html(btn_html)
}

function transPlaceholder(el,lang) {
  const key = el.getAttribute("data-ph_lang");
  if (key && trans_text[lang] && trans_text[lang][key]) {
    //el.innerText = trans_text[lang][key];
    //console.log(key)
    el.setAttribute('placeholder',trans_text[lang][key])
  }
}

function transText(el,lang) {
  const key = el.getAttribute("data-lang");
  if (key && trans_text[lang] && trans_text[lang][key]) {
    el.innerText = trans_text[lang][key];
  }
}