<!DOCTYPE html>
<html lang="en">

<head>
    <!-- gọi tới fragment header đã được thiết kế sẵn -->
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<link rel="stylesheet" href="/static/css/style1.css">
<link rel="stylesheet" href="/static/css/chart.css">
<script src="/static/js/config/config.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<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=Roboto:wght@100;200;300;400;500;700;900&display=swap"
    rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@100;200;300;400;500;700;900&display=swap"
    rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<script src="https://kit.fontawesome.com/b8486ae86f.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,300,0,0" />
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="/static/js/lib/cleave.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.polyfills.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />

<script src="/static/js/lib/moment.min.js"></script>
<!-- Sau đó, nhúng moment-timezone -->
<script src="/static/js/lib/moment-timezone-with-data-10-year-range.min.js"></script>

<title>Aladin</title>
<script>
    var shinobi = {

    }
</script>
<script src="/static/production/shinobi_2.js"></script>
</head>

<body>
<div class="navbar">
    <div class="navbar-brand ml-4">
  <button id="menu-btn"><img id="burger-menu" src="/static/image/icon/menu_no_fill.svg" alt=""></button>
  <a class="navbar-item ml-2" href="">
    <img id="logo-icon" src="/static/image/icon/logo.8e5334db.svg" width="112" height="28">
  </a>
</div>
<div class="menu-items mr-5">
  <div class="dropdown is-hoverable moduledropdown" style="visibility: hidden">
    <div class="dropdown-trigger">
      <button class="button" aria-haspopup="true" aria-controls="dropdown-menu3">
        <span class="material-symbols-outlined">
          settings
        </span>
        <span>Module</span>
      </button>
    </div>
    <div class="dropdown-menu" id="dropdown-menu3" role="menu">
      <div id="user_module" class="dropdown-content">
      </div>
    </div>
  </div>
  <a class="icons-menu " href="/private/support">
    <img src="/static/image/icon/support_no_fill.svg " alt="">
  </a>
  <a class="icons-menu" href="/private/notifications" style="position: relative;">
    <img src="/static/image/icon/notifications_no_fill.svg" alt="">
    <span id="notification_count" class="icon-button__badge">0</span>
  </a>
  <div class="icons-menu dropdown is-right">
    <div class="dropdown-trigger">
      <img class="headeravatar avatar is-clickable image-round" src="/static/image/icon/avatar_default.svg" width="34px"
        height="34px" alt="">
    </div>
    <div class="user_menu dropdown-menu p-2" id="dropdown-user" role="menu">
      <div class="">
        <div class="userinfo dropdown-item columns is-align-items-center m-0">
          <div class="column is-4">
            <img class="headeravatar image-round" style="width: 67px;
                    height: 67px;" src="/static/image/icon/avatar_default.svg" alt="">
          </div>
          <div class="column">
            <p id="user_headername"></p>
            <p id="user_headeremail"></p>
          </div>
        </div>
        <a href="/private/userinformation" class="myinfopage dropdown-item dropdown-child columns m-0 my-1">
          <img class="column p-0" src="/static/image/icon/my_info_no_fill.svg" alt="">
          <div class="column is-9">Thông tin của tôi</div>
        </a>
        <a href="/private/changepassword" class="changepasspage dropdown-item dropdown-child columns m-0 my-1">
          <img class="column p-0" src="/static/image/icon/password.svg" alt="">
          <div class="column is-9">Đổi mật khẩu</div>
        </a>
        <a id="logout" class="dropdown-item dropdown-child columns m-0 my-1">
          <img class="column p-0" src="/static/image/icon/logout_fill.svg" alt="">
          <div class="column is-9">Đăng xuất</div>
        </a>
      </div>
    </div>
  </div>

</div>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    shinobi.headerinforender.build();
  });
</script>
</div>

<!--  --><!--  --><!--  --><style>    #product-list {        /* display: flex; */        /* flex-wrap: wrap; */    }    .column {        display: flex;        flex-direction: column;    }    .card {        display: flex;        flex-direction: column;        flex: 1;    }    .card-content {        flex: 1;    }    .title {        text-align: center;    }    .logo {        display: flex;        justify-content: center;        align-items: center;        height: 128px;        margin: 1%;    }    .logo img {        width: 128px;        height: 128px;        object-fit: contain;    }    html {        background-color: white;    }    .navbar {        background-color: white;    }    .fit-content {        width: fit-content;    }    </style><section class="ldp-section" style="   background-image: url(/static/image/background/ldp-background-1.png);">    <div class="coulmns" style=" width: 100%;">        <div class="column is-5" style="margin-top: 20vh;">            <h1 class="ldp-text-header" style="font-size: 60px;">ALADIN FINANCE</h1>            <div style="margin: 5vh 0px;">                <span style="font-size: 25px; ">Nền tảng chuyên cung cấp hệ thống giao dịch chứng khoán giả lập</span>                <span style="font-size: 30px; white-space: nowrap;"> </span>            </div>            <button class="ldp-button" onclick="location.href='page/register'">Đăng ký ngay</button>        </div>    </div></section><div class="main" style="justify-content: center;    padding: 1.25rem;">    <div class="body_page" style="width: 90%; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); border: 1px solid #ddd;">        <section class="section product-list-section">            <div class="container">                <h1 class="title">Danh sách sản phẩm</h1>                <div id="product-list" class="columns is-multiline is-centered"></div>            </div>        </section>        <section id="payment-section" class="section payment-section" style="display: none;">            <div class="container columns">                <div id="qr-code-container" class="has-text-centered column is-4"></div>                <div class="content column">                    <h3 class="subtitle">Hướng dẫn thanh toán:</h3>                    <ol>                        <li>Mở ứng dụng ngân hàng trên điện thoại của bạn.</li>                        <li>Chọn tính năng <strong>Quét mã QR</strong> trên ứng dụng.</li>                        <li>Quét mã QR ở trên để thanh toán.</li>                    </ol>                    <p class="has-text-danger">*Sau khi thanh toán thành công, vui lòng kiểm đơn hàng trong trang Đơn                        hàng của                        tôi.</p>                </div>                <div class="notification">                    <h3 class="subtitle">Thông tin chuyển khoản:</h3>                    <div>                        <strong>Ngân hàng:</strong> VIETCOMBANK<br>                        <strong>Tên người thụ hưởng:</strong> CONG TY CO PHAN ALADIN<br>                        <strong>Số tài khoản:</strong> 4441347<br>                        <strong>Nội dung chuyển khoản:</strong> <span id="order_payment_id"></span>                    </div>                </div>            </div>        </section>    </div></div><section class="ldp-section" style="   background-image: url(/static/image/background/ldp-background-2.png);">    <div class="coulmns" style=" width: 100%;">        <div class="column is-5">            <h1 class="ldp-text-header" style="font-size: 40px;">VỀ CHÚNG TÔI </h1>            <div style="margin: 5vh 0px;">                <span class="ldp-text-content" style="font-size: 20px; ">Aladin Finance là nền tảng chuyên cung cấp hệ                    thống giao dịch chứng khoán giả lập với các nguyên tắc giao dịch tương tự như thị trường thật giúp                    nhà đầu tư mới có cơ hội luyện tập giao dịch thực chiến, bắt đầu từng bước làm quen với những biến                    động trên thị trường chứng khoán Việt Nam, cách thức khớp lệnh và giao dịch; nhà đầu tư lâu năm có                    cơ hội kiểm định phương pháp mới mà không cần phải bỏ ra chi phí lớn.</span>            </div>            <button class="ldp-button" onclick="location.href='page/register'">Trải nghiệm ngay</button>        </div>    </div></section><section class="ldp-section" style="   background-image: url(/static/image/background/ldp-background-3.png);">    <div class="columns is-centered" style="width: 100%;">        <div class="column has-text-centered " style=" margin-top: 30vh;">            <h1 class="ldp-text-header" style="font-size: 40px;">TỔ CHỨC GIÁO DỤC</h1>            <span style="font-size: 20px; margin: 5vh 0px;text-align: center;">                Tại nền tảng Aladin, các tổ chức có thể tổ chức các cuộc thi đầu tư chứng khoán và thiết lập nhiều tùy                chọn để tạo sân chơi cho nhà đầu tư thi đua xếp hạng. Aladin sẽ cung cấp những thống kê cần thiết về                hiệu quả đầu tư trong cuộc thi giúp nhà đầu tư dễ dàng quan sát các biến động và kết quả của cuộc thi                của mình để đạt hiệu quả đầu tư tốt nhất.                Hiện tại, Aladin đã hợp tác với nhiều trường đại học trên toàn quốc để đem lại sân chơi có ích cho sinh                viên đam mê tài chính như UEL, FTU, UEH, UEF, RMIT, VLU,...            </span>        </div>    </div>    <div class="columns is-multiline is-centered">        <div class="column is-2 logo">            <img src="/static/image/logo/logo-rmit.png">        </div>        <div class="column is-2 logo">            <img src="/static/image/logo/logo-uel.png">        </div>        <div class="column is-2 logo">            <img src="/static/image/logo/logo-uef.png">        </div>        <div class="column is-2 logo">            <img src="/static/image/logo/logo-ueh.png">        </div>        <div class="column is-2 logo">            <img src="/static/image/logo/logo-ftu.png">        </div>        <div class="column is-2 logo">            <img src="/static/image/logo/logo-vl.png">        </div>        <div class="column is-2 logo">            <img src="/static/image/logo/logo-stu.png">        </div>        <div class="column is-2 logo">            <img src="/static/image/logo/logo-ntt.png">        </div>        <div class="column is-2 logo">            <img src="/static/image/logo/logo-ih.png">        </div>        <div class="column is-2 logo">            <img src="/static/image/logo/logo-hub.png">        </div>    </div></section><section class="ldp-section" id="ldp-section-4" style="   background-image: url(/static/image/background/ldp-background-5-v2.png);"></section><script>    document.addEventListener('DOMContentLoaded', () => {        shinobi.products.build();    });</script>
<div class="column  copy-right has-text-centered" style="background-color: #002366; color: #FFFFFF;">
    <b>© 2019 - Bản quyền của Công Ty Cổ Phần Aladin</b>
    <p>Giấy chứng nhận Đăng ký Kinh doanh số 0315516581 do Sở Kế
        hoạch và Đầu tư Thành phố Hồ Chí Minh cấp ngày 20/02/2019</p>
    <p>Tầng 6, Tòa nhà Mê Linh Point Tower, Số 2 Ngô Đức Kế, P.Bến
        Nghé, Quận 1, TP.HCM</p>
    <p class=" ">
        Tel: 0819.31.7989<span class="has-padding-right-1rem"></span> Email:
        contact@aladin.finance
    </p>
</div>
<script>
    document.addEventListener('DOMContentLoader', () => {
        shinobi.footer.build();
    })
</script>
<div class="trading_box" id="placeOrder_box">
    <div class="header_box columns m-0">
        <div class="column is-4 ml-3 has-text-weight-bold">Đặt lệnh</div>
        <div class="column mr-3 is-flex is-justify-content-space-between px-0">
            <button id="btn_buy" class="button is-success px-5">Mua</button>
            <button id="btn_sell" class="button is-danger px-5">Bán</button>
            <img id="close_box" class="is-clickable" src="/static/image/icon/close.svg" width="20px" height="20px"
                alt="">
        </div>
    </div>
    <div class="input_info columns m-0 mx-3 my-4">
        <p class="column is-5">Mã cuộc thi</p>
        <div class="select is-fullwidth">
            <select class="competitionTradeInfo" id="placeOrder_box_select">

            </select>
        </div>
    </div>
    <div class="trading_info columns m-0 mx-3 is-3">
        <div class="column is-4">
            <p>Trần:</p>
            <p>Tham chiếu:</p>
        </div>
        <div class="column has-text-right">
            <p id="ceiling">-</p>
            <p id="ref">-</p>
        </div>
        <div class="column is-4">
            <p>Sàn:</p>
            <p>Giá khớp:</p>
        </div>
        <div class="column has-text-right">
            <p id="floor">-</p>
            <p id="matchprice">-</p>
        </div>
    </div>
    <div class="input_info columns m-0 mx-3 my-1">
        <p class="column is-5">Mã CK</p>
        <input id="stocksymbol" class="input column" type="text" style="text-transform:uppercase" name=""
            placeholder="Nhập mã">
    </div>
    <div class="input_info columns m-0 mx-3 my-1">
        <p class="column is-5">Loại lệnh</p>
        <div class="select is-fullwidth">
            <select id="ordertype">
                <option value="LO">LO</option>
                <option value="ATO">ATO</option>
                <option value="ATC">ATC</option>
                <option value="MP">MP</option>
                <option value="CONDITION">Lệnh điều kiện</option>
            </select>
        </div>
    </div>
    <div class="input_info columns m-0 mx-3 my-1">
        <p class="column is-5">Giá</p>
        <input id="orderprice" class="input column" type="number" name="" placeholder="Giá x 1000">
    </div>
    <div class="input_info columns m-0 mx-3 my-1">
        <p class="column is-5">Khối lượng</p>
        <input id="orderquantity" class="input column" type="number" name="" placeholder="Khối lượng x 1 cổ phiếu">
    </div>

    <div class="input_info columns m-0 mx-3 my-1 groupConditionPrice hidden">
        <p class="column is-5">Giá kích hoạt</p>
        <div class="column is-flex p-0">
            <div class="select is-arrowless mr-2" style="width: 20%;">
                <select id="conditionOperator">
                    <option value="=">&#61;</option>
                    <option value=">">&#62;</option>
                    <option value=">=">&#8805;</option>
                    <option value="&#60;">&#60;</option>
                    <option value="&#8804;">&#8804;</option>
                </select>
            </div>
            <input id="conditionPrice" class="input" type="number" name="" placeholder="Giá kích hoạt">
        </div>
    </div>

    <div class="input_info columns m-0 mx-3 my-1 groupExpirationDate hidden">
        <p class="column is-5">Ngày kích hoạt</p>
        <input id="expirationDate" class="input column" type="text" name="" placeholder="Chọn ngày">
    </div>

    <div class="input_info columns m-0 mx-3 my-1">
        <p class="column is-5"></p>
        <p class="hidden">Khả dụng:</p>
    </div>

    <div class="has-text-centered my-4">
        <button id="btn_order" class="button is-success px-6">Đặt lệnh MUA</button>
    </div>

</div>
<script src="/static/js/render/trading_box.js"></script>
<div id="shinobinotification" class="notification  shinobinotification">
    <button class="delete"></button>
    <div class="notificationcontent"></div> 
</div>
<script>
    document.addEventListener('DOMContentLoaded',()=>{
        shinobi.trading_box.build();
        shinobi.usermenu.build();
        shinobi.sidebar.build();
        shinobi.logout.build();
    })
</script>
</body>

</html>