ACIL FM

Pilih semua

Nama	Ukuran	Aksi
static	-	Open
templates	-	Open
app.py	4.19 MB	View DL Edit
index.html	13.7 MB	View DL Edit
main.js	14.13 MB	View DL Edit

Edit file: /home/benbot/.trash/market_ranking5/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>withgot · 9:16 Market Board</title>

/* 9:16 canvas */
  .wrap{max-width:1200px;margin:0 auto;padding:12px}
  .stage{
    aspect-ratio:9/16; width:100%; border:1px solid var(--line); border-radius:16px;
    overflow:hidden; display:flex; flex-direction:column; background:var(--bg);
    box-shadow:0 10px 30px rgba(0,0,0,.18);
  }
  .scroll{flex:1; overflow:auto}
  .sec{padding:12px 14px}
  .card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px}

/* #1 Brand + Time ONE BAR (200px) */
  .brandTimeBar{
    height:200px; display:grid; grid-template-columns:1fr; align-items:center; position:relative;
    background:var(--panel); border:1px solid var(--line); border-radius:12px;
  }
  .brandLeft{
    position:absolute; left:20px; top:50%; transform:translateY(-50%);
    display:flex; align-items:center; gap:12px;
  }
  .bb{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:#111827;border:1px solid #1f2937;color:#fff;font-weight:900}
  .brandName{font-weight:900; letter-spacing:-.3px; font-size: clamp(24px, 4.5vw, 44px)}
  .brandSub{color:var(--muted); font-weight:700; font-size: clamp(12px,1.8vw,18px); margin-left:6px}

.timeCenter{
    text-align:center; width:100%;
    font-weight:900; letter-spacing:-.5px; line-height:1.05;
    font-variant-numeric:tabular-nums;
    font-size: clamp(36px, 12vw, 140px);
  }
  .tz{display:block; margin-top:8px; color:var(--muted); font-weight:700; font-size: clamp(12px, 2.3vw, 22px)}

/* Section titles / dividers */
  .title{font-weight:900; letter-spacing:-.2px; margin:0 0 8px}
  .divider{display:flex; align-items:center; gap:12px; margin:8px 0 12px}
  .divider .line{height:1px; background:linear-gradient(90deg,transparent,var(--divider),transparent); flex:1}
  .divider .tag{font-size:12px; color:#cbd5e1; background:#0d131a; border:1px solid var(--line); padding:4px 10px; border-radius:999px}

/* 3–4) Boards: Bar chart + Marquee */
  .board{display:grid; gap:10px}
  .barWrap{background:#0d131a; border:1px solid var(--line); border-radius:12px; padding:10px}
  .barTitle{margin:0 0 8px; font-size:13px; color:var(--muted)}
  .bar{height:16px; border-radius:999px; overflow:hidden; border:1px solid var(--line); background:#0e141b; position:relative}
  .bar > div{height:100%; position:absolute; top:0}
  .bar .up{left:0; background:var(--up)}
  .bar .mid{background:#64748b}
  .bar .dn{background:var(--down)}

.bmets{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
  .pill{padding:6px 10px; border-radius:999px; border:1px dashed var(--line); color:var(--muted); background:#0e141b}
  .pill .v{color:var(--ink); font-weight:800; margin-left:6px}

.marquee{position:relative; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#0d131a}
  .rail{display:flex; gap:16px; white-space:nowrap; will-change:transform; padding:8px 0}
  .chip{display:inline-flex; gap:8px; align-items:center; background:#141c26; border:1px solid var(--line);
        border-radius:999px; padding:6px 10px; color:var(--ink)}
  .chip .pct{font-variant-numeric:tabular-nums; font-weight:800}
  .up .pct{color:var(--up)} .down .pct{color:var(--down)}

/* Tables (Spread & Price Comparison) */
  .tableWrap{overflow-x:auto; border:1px solid var(--line); border-radius:10px}
  table{border-collapse:separate; border-spacing:0; width:100%; min-width:900px; background:var(--panel)}
  thead th{position:sticky; top:0; background:#0e141b; border-bottom:1px solid var(--line); font-weight:700; text-align:left}
  th,td{padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap}
  td.left, th.left{text-align:left}
  td.num,  th.num{text-align:right; font-variant-numeric:tabular-nums}
  .pos{color:var(--up)} .neg{color:var(--down)}

/* helpers */
  .mt6{margin-top:6px} .mt8{margin-top:8px} .mt12{margin-top:12px}
  .note{font-size:12px; color:var(--muted)}
</style>
</head>
<body>
  <div class="wrap">
    <div class="stage">
      <div class="scroll">

<section class="sec">
          <div class="brandTimeBar">
            <div class="brandLeft">
              <div class="bb">W</div>
              <div>
                <span class="brandName">withgot</span>
                <span class="brandSub">· Data Provider</span>
              </div>
            </div>
            <div class="timeCenter">
              <span id="laClock">--:--:--</span>
              <span class="tz" id="laTz">Los Angeles</span>
            </div>
          </div>
        </section>

<section class="sec">
          <h2 class="title">Spot Market Overview</h2>
          <div class="board">
            <div class="barWrap">
              <p class="barTitle">Up / Flat / Down (by symbols)</p>
              <div class="bar">
                <div id="spotUpBar"  class="up"  style="width:0%"></div>
                <div id="spotMidBar" class="mid" style="width:0%"></div>
                <div id="spotDnBar"  class="dn"  style="width:0%"></div>
              </div>
              <div class="bmets">
                <div class="pill">Up(%) <span class="v" id="spotUpPct">0</span></div>
                <div class="pill">Flat(%) <span class="v" id="spotMidPct">0</span></div>
                <div class="pill">Down(%) <span class="v" id="spotDnPct">0</span></div>
                <div class="pill">Up symbols <span class="v" id="spotUpCnt">0</span></div>
                <div class="pill">Flat symbols <span class="v" id="spotMidCnt">0</span></div>
                <div class="pill">Down symbols <span class="v" id="spotDnCnt">0</span></div>
                <div class="pill">Total symbols <span class="v" id="spotTotal">0</span></div>
              </div>
            </div>

<section class="sec">
          <h2 class="title">Futures Market Overview</h2>
          <div class="board">
            <div class="barWrap">
              <p class="barTitle">Up / Flat / Down (by symbols)</p>
              <div class="bar">
                <div id="futUpBar"  class="up"  style="width:0%"></div>
                <div id="futMidBar" class="mid" style="width:0%"></div>
                <div id="futDnBar"  class="dn"  style="width:0%"></div>
              </div>
              <div class="bmets">
                <div class="pill">Up(%) <span class="v" id="futUpPct">0</span></div>
                <div class="pill">Flat(%) <span class="v" id="futMidPct">0</span></div>
                <div class="pill">Down(%) <span class="v" id="futDnPct">0</span></div>
                <div class="pill">Up symbols <span class="v" id="futUpCnt">0</span></div>
                <div class="pill">Flat symbols <span class="v" id="futMidCnt">0</span></div>
                <div class="pill">Down symbols <span class="v" id="futDnCnt">0</span></div>
                <div class="pill">Total symbols <span class="v" id="futTotal">0</span></div>
              </div>
            </div>

<section class="sec">
          <h2 class="title">Symbols with the Longest Spread over 24h</h2>

<div class="card">
            <div class="divider"><div class="line"></div><div class="tag">Top 5 · Spread ↑</div><div class="line"></div></div>
            <div class="tableWrap">
              <table>
                <thead>
                  <tr>
                    <th class="left">Rank</th>
                    <th class="left">Group</th>
                    <th class="left">Symbol</th>
                    <th class="num">Price</th>
                    <th class="num">Fut%</th>
                    <th class="num">Spot%</th>
                    <th class="num">Volume (USDT)</th>
                    <th class="num">24h High</th>
                    <th class="left">High Time</th>
                    <th class="num">24h Low</th>
                    <th class="left">Low Time</th>
                  </tr>
                </thead>
                <tbody id="spreadUpTbody"></tbody>
              </table>
            </div>
          </div>

<div class="divider mt12"><div class="line"></div><div class="tag">Section Divider</div><div class="line"></div></div>

<div class="card">
            <div class="divider"><div class="line"></div><div class="tag">Top 5 · Spread ↓</div><div class="line"></div></div>
            <div class="tableWrap">
              <table>
                <thead>
                  <tr>
                    <th class="left">Rank</th>
                    <th class="left">Group</th>
                    <th class="left">Symbol</th>
                    <th class="num">Price</th>
                    <th class="num">Fut%</th>
                    <th class="num">Spot%</th>
                    <th class="num">Volume (USDT)</th>
                    <th class="num">24h High</th>
                    <th class="left">High Time</th>
                    <th class="num">24h Low</th>
                    <th class="left">Low Time</th>
                  </tr>
                </thead>
                <tbody id="spreadDnTbody"></tbody>
              </table>
            </div>
          </div>
        </section>

<section class="sec">
          <h2 class="title">Price Comparison · 24h Ranking Top 5</h2>

<div class="card">
            <div class="divider"><div class="line"></div><div class="tag">Top 5 Gainers (24h)</div><div class="line"></div></div>
            <div class="tableWrap">
              <table>
                <thead>
                  <tr>
                    <th class="left">Rank</th>
                    <th class="left">Group</th>
                    <th class="left">Symbol</th>
                    <th class="num">Price</th>
                    <th class="num">Fut%</th>
                    <th class="num">Spot%</th>
                    <th class="num">Volume (USDT)</th>
                    <th class="num">24h High</th>
                    <th class="left">High Time</th>
                    <th class="num">24h Low</th>
                    <th class="left">Low Time</th>
                  </tr>
                </thead>
                <tbody id="pcUpTbody"></tbody>
              </table>
            </div>
          </div>

<div class="divider mt12"><div class="line"></div><div class="tag">Section Divider</div><div class="line"></div></div>

<div class="card">
            <div class="divider"><div class="line"></div><div class="tag">Top 5 Losers (24h)</div><div class="line"></div></div>
            <div class="tableWrap">
              <table>
                <thead>
                  <tr>
                    <th class="left">Rank</th>
                    <th class="left">Group</th>
                    <th class="left">Symbol</th>
                    <th class="num">Price</th>
                    <th class="num">Fut%</th>
                    <th class="num">Spot%</th>
                    <th class="num">Volume (USDT)</th>
                    <th class="num">24h High</th>
                    <th class="left">High Time</th>
                    <th class="num">24h Low</th>
                    <th class="left">Low Time</th>
                  </tr>
                </thead>
                <tbody id="pcDnTbody"></tbody>
              </table>
            </div>
          </div>
        </section>

<section class="sec note">Auto refresh ≤ 0.5s via Flask proxy. Data: Bitget public endpoints.</section>
      </div>
    </div>
  </div>

<audio id="bgm" src="/static/bgm_hope.mp3" autoplay loop></audio>

<script src="/static/main.js" defer></script>
</body>
</html>

Batal

Isi Zip:

Create