{{template "components/header.html" .}}
{{template "components/preloader.html" .}}
  <div id="main-wrapper">
    <!-- Sidebar Start -->
    {{template "components/sidebar.html" .}}
    <!--  Sidebar End -->
    <div class="page-wrapper">
      <!--  Header Start -->
      {{template "components/topbar.html" .}}
      <!--  Header End -->
      <div class="body-wrapper">
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm-6 col-xl-3">
              <div class="card bg-primary-subtle shadow-none">
                <div class="card-body p-4">
                  <div class="d-flex align-items-center">
                    <div class="round rounded text-bg-primary d-flex align-items-center justify-content-center">
                      <i class="cc BTC text-white fs-7" title="BTC"></i>
                    </div>
                    <h6 class="mb-0 ms-3">BTC</h6>
                    <div class="ms-auto text-primary d-flex align-items-center">
                      <i class="ti ti-trending-up text-primary fs-6 me-1"></i>
                      <span class="fs-2 fw-bold">+ 2.30%</span>
                    </div>
                  </div>
                  <div class="d-flex align-items-center justify-content-between mt-4">
                    <h3 class="mb-0 fw-semibold fs-7">0.1245</h3>
                    <span class="fw-bold">$1,015.00</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-xl-3">
              <div class="card bg-danger-subtle shadow-none">
                <div class="card-body p-4">
                  <div class="d-flex align-items-center">
                    <div class="round rounded text-bg-danger d-flex align-items-center justify-content-center">
                      <i class="cc ETH text-white fs-7" title="ETH"></i>
                    </div>
                    <h6 class="mb-0 ms-3">ETH</h6>
                    <div class="ms-auto text-danger d-flex align-items-center">
                      <i class="ti ti-trending-up text-danger fs-6 me-1"></i>
                      <span class="fs-2 fw-bold">+ 3.20%</span>
                    </div>
                  </div>
                  <div class="d-flex align-items-center justify-content-between mt-4">
                    <h3 class="mb-0 fw-semibold fs-7">0.5620</h3>
                    <span class="fw-bold">$2,110.00</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-xl-3">
              <div class="card bg-success-subtle shadow-none">
                <div class="card-body p-4">
                  <div class="d-flex align-items-center">
                    <div class="round rounded text-bg-success d-flex align-items-center justify-content-center">
                      <i class="cc LTC text-white fs-7" title="LTC"></i>
                    </div>
                    <h6 class="mb-0 ms-3">LTC</h6>
                    <div class="ms-auto text-info d-flex align-items-center">
                      <i class="ti ti-trending-down text-success fs-6 me-1"></i>
                      <span class="fs-2 fw-bold text-success">+ 3.20%</span>
                    </div>
                  </div>
                  <div class="d-flex align-items-center justify-content-between mt-4">
                    <h3 class="mb-0 fw-semibold fs-7">1.200</h3>
                    <span class="fw-bold">$1,100.00</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-xl-3">
              <div class="card bg-warning-subtle shadow-none">
                <div class="card-body p-4">
                  <div class="d-flex align-items-center">
                    <div class="round rounded text-bg-warning d-flex align-items-center justify-content-center">
                      <i class="cc XRP text-white fs-7" title="XRP"></i>
                    </div>
                    <h6 class="mb-0 ms-3">XRP</h6>
                    <div class="ms-auto text-info d-flex align-items-center">
                      <i class="ti ti-trending-down text-warning fs-6 me-1"></i>
                      <span class="fs-2 fw-bold text-warning">+ 2.20%</span>
                    </div>
                  </div>
                  <div class="d-flex align-items-center justify-content-between mt-4">
                    <h3 class="mb-0 fw-semibold fs-7">1.150</h3>
                    <span class="fw-bold">$2,150.00</span>
                  </div>
                </div>
              </div>
            </div>
            
            
            <div class="col-12">
              <div class="card">
                <div class="card-body">
                  <h4 class="card-title fw-semibold">Trade History</h4>
                  <p class="card-subtitle">Trade and the Age of Exploration</p>
                  <div class="table-responsive mt-4">
                    <table class="table table-borderless text-nowrap align-middle mb-0">
                      <tbody>
                        <tr class="bg-light">
                          <td class="rounded-start bg-transparent">
                            <div class="d-flex align-items-center gap-3">
                              <div>
                                <i class="cc BTC fs-7"></i>
                              </div>
                              <div>
                                <h6 class="mb-0">Bitcoin</h6>
                                <span class="fs-3">BTC</span>
                              </div>
                            </div>
                          </td>
                          <td class="bg-transparent"> $981.1254 <i class="ti ti-chevron-down text-danger ms-1 fs-4"></i>
                          </td>
                          <td class="bg-transparent">
                            <i class="cc ETC me-1 text-primary fs-5" title="ETC"></i> 0.23125
                          </td>
                          <td class="bg-transparent">$1.23560 B</td>
                          <td class="bg-transparent">04 Feb 2024</td>
                          <td class="text-end rounded-end bg-transparent">
                            <span class="badge bg-danger">transfer</span>
                          </td>
                        </tr>
                        <tr>
                          <td colspan="6"></td>
                        </tr>
                        <tr class="bg-light">
                          <td class="rounded-start bg-transparent">
                            <div class="d-flex align-items-center gap-3">
                              <div>
                                <i class="cc ETH fs-7"></i>
                              </div>
                              <div>
                                <h6 class="mb-0">Ethereum</h6>
                                <span class="fs-3">ETH</span>
                              </div>
                            </div>
                          </td>
                          <td class="bg-transparent"> $450.1254 <i class="ti ti-chevron-down text-danger ms-1 fs-4"></i>
                          </td>
                          <td class="bg-transparent">
                            <i class="cc ETC me-1 text-primary fs-5" title="ETC"></i> 0.45000
                          </td>
                          <td class="bg-transparent">$3.23560 B</td>
                          <td class="bg-transparent">09 Mar 2024</td>
                          <td class="text-end rounded-end bg-transparent">
                            <span class="badge bg-primary">sell</span>
                          </td>
                        </tr>
                        <tr>
                          <td colspan="6"></td>
                        </tr>
                        <tr class="bg-light">
                          <td class="rounded-start bg-transparent">
                            <div class="d-flex align-items-center gap-3">
                              <div>
                                <i class="cc LTC fs-7"></i>
                              </div>
                              <div>
                                <h6 class="mb-0">Litecoin</h6>
                                <span class="fs-3">LTC</span>
                              </div>
                            </div>
                          </td>
                          <td class="bg-transparent"> $100.1254 <i class="ti ti-chevron-up text-success ms-1 fs-4"></i>
                          </td>
                          <td class="bg-transparent">
                            <i class="cc BTC me-1 text-danger fs-5" title="BTC"></i> 0.56012
                          </td>
                          <td class="bg-transparent">$2.45620 B</td>
                          <td class="bg-transparent">12 Dec 2024</td>
                          <td class="text-end rounded-end bg-transparent">
                            <span class="badge bg-success">buy</span>
                          </td>
                        </tr>
                        <tr>
                          <td colspan="6"></td>
                        </tr>
                        <tr class="bg-light">
                          <td class="rounded-start bg-transparent">
                            <div class="d-flex align-items-center gap-3">
                              <div>
                                <i class="cc XRP fs-7"></i>
                              </div>
                              <div>
                                <h6 class="mb-0">XRP</h6>
                                <span class="fs-3">XRP</span>
                              </div>
                            </div>
                          </td>
                          <td class="bg-transparent"> $450.1254 <i class="ti ti-chevron-down text-danger ms-1 fs-4"></i>
                          </td>
                          <td class="bg-transparent">
                            <i class="cc ETC me-1 text-primary fs-5" title="ETC"></i> 0.45000
                          </td>
                          <td class="bg-transparent">$3.23560 B</td>
                          <td class="bg-transparent">01 Aug 2024</td>
                          <td class="text-end rounded-end bg-transparent">
                            <span class="badge bg-danger">transfer</span>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>



    </div>

    <script type="text/javascript">
         function MarketWebSocket()
         {
            if ("WebSocket" in window)
            {
               
               // 打开一个 web socket
               var ws = new WebSocket("ws://market.senlin.ai:13300/ws");
                
               ws.onopen = function()
               {
                  // Web Socket 已连接上，使用 send() 方法发送数据
                  console.log("Web Socket 已连接上");
               };
                
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  console.log(received_msg);
               };
                
               ws.onclose = function()
               { 
                  // 关闭 websocket
                  console.log("连接已关闭");
               };
            }
            
            else
            {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
         
        MarketWebSocket();
      </script>

{{template "components/footer.html" .}}