<?php
include_once('./_common.php'); 
include_once(G5_PATH.'/_PAGE/head.php'); 
?>

<link rel="stylesheet" type="text/css" href="http://<?=$_SERVER['HTTP_HOST'];?>/GNU/_PAGE/monitoring/monitoring_upbit.css">


<div class="page-wrapper">

  <!-- Header -->
  <div class="header">
    <div class="header-left">
      <div class="logo-icon">
        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 3h7v7H3zm11 0h7v7h-7zM3 14h7v7H3zm14 3a4 4 0 110-8 4 4 0 010 8z"/>
        </svg>
      </div>
      <div>
        <div class="header-title">바이비트 모니터링 대시보드</div>
        <div class="header-subtitle">BYBIT EXCHANGE MONITORING SYSTEM</div>
      </div>
    </div>
    <div class="header-right">
      <div class="live-badge">
        <span class="live-dot"></span>
        LIVE
      </div>
      <div class="time-display" id="clock">--:--:--</div>
    </div>
  </div>

  <!-- 거래소 정보 섹션 -->
  <div class="section-label">
    <div class="section-dot" style="background: var(--accent-blue);"></div>
    <span>거래소 정보</span>
  </div>

  <a class="info-card" href="<?php echo G5_URL; ?>/_PAGE/Information/coin/bybit/coin_list_v2.php">
    <div class="info-card-left">
      <div class="card-icon-wrap amber-icon">
        <svg viewBox="0 0 24 24" stroke-width="1.8" xmlns="http://www.w3.org/2000/svg" style="stroke:var(--accent-amber); fill:none;">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z"/>
          <circle cx="12" cy="12" r="10"/>
          <path d="M8 11h8M8 13h5"/>
        </svg>
      </div>
      <div class="card-text">
        <h3>바이비트 거래소 정보</h3>
        <div class="card-url"><?php echo G5_URL; ?>/_PAGE/Information/coin/bybit/coin_list_v2.php</div>
      </div>
    </div>
    <div class="card-arrow">→</div>
  </a>

  <!-- 모니터링 섹션 -->
  <div class="section-label">
    <div class="section-dot" style="background: var(--accent-cyan);"></div>
    <span>실시간 모니터링</span>
  </div>

  <div class="monitor-grid">

    <!-- 현재가 카드 -->
    <a class="monitor-card blue-border" href="<?php echo G5_URL; ?>/_PAGE/Information/coin/bybit/coin_list_v2.php?type=usdt" style="border-left: 3px solid var(--accent-blue); border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);">
      <div class="monitor-card-top">
        <div class="monitor-icon blue-icon">
          <svg viewBox="0 0 24 24" stroke-width="1.8" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 1v22M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/>
          </svg>
        </div>
        <div class="monitor-tag blue-tag">USDT</div>
      </div>
      <h3>테더 선형 매매 모니터링</h3>
      <div class="monitor-card-url"><?php echo G5_URL; ?>/_PAGE/Information/coin/bybit/<br>coin_list_v2.php</div>
      <div class="sparkline">
        <div class="spark-bar blue-bar" style="height:35%; animation-delay:0.0s;"></div>
        <div class="spark-bar blue-bar" style="height:55%; animation-delay:0.05s;"></div>
        <div class="spark-bar blue-bar" style="height:45%; animation-delay:0.1s;"></div>
        <div class="spark-bar blue-bar" style="height:70%; animation-delay:0.15s;"></div>
        <div class="spark-bar blue-bar" style="height:60%; animation-delay:0.2s;"></div>
        <div class="spark-bar blue-bar" style="height:80%; animation-delay:0.25s;"></div>
        <div class="spark-bar blue-bar" style="height:65%; animation-delay:0.3s;"></div>
        <div class="spark-bar blue-bar" style="height:90%; animation-delay:0.35s;"></div>
        <div class="spark-bar blue-bar" style="height:75%; animation-delay:0.4s;"></div>
        <div class="spark-bar blue-bar" style="height:100%; animation-delay:0.45s;"></div>
      </div>
      <div class="monitor-card-footer">
        <div class="monitor-status blue-status">
          <span class="status-dot-sm blue-dot"></span>
          실시간 수집 중
        </div>
        <div class="open-link">열기 →</div>
      </div>
    </a>

    <!-- 거래량 카드 -->
    <a class="monitor-card" href="<?php echo G5_URL; ?>/_PAGE/Information/coin/bybit/coin_list_v2.php?type=usd" style="border-left: 3px solid var(--accent-cyan); border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);">
      <div class="monitor-card-top">
        <div class="monitor-icon cyan-icon">
          <svg viewBox="0 0 24 24" stroke-width="1.8" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 3v18h18"/>
            <path d="M18.7 8l-5.1 5.2-2.8-2.7L7 14.3"/>
          </svg>
        </div>
        <div class="monitor-tag cyan-tag">USD</div>
      </div>
      <h3>담보 인버스 달러 모니터링</h3>
      <div class="monitor-card-url"><?php echo G5_URL; ?>/_PAGE/Information/coin/bybit/<br>coin_list_v2.php</div>
      <div class="sparkline">
        <div class="spark-bar cyan-bar" style="height:60%; animation-delay:0.0s;"></div>
        <div class="spark-bar cyan-bar" style="height:40%; animation-delay:0.05s;"></div>
        <div class="spark-bar cyan-bar" style="height:75%; animation-delay:0.1s;"></div>
        <div class="spark-bar cyan-bar" style="height:50%; animation-delay:0.15s;"></div>
        <div class="spark-bar cyan-bar" style="height:85%; animation-delay:0.2s;"></div>
        <div class="spark-bar cyan-bar" style="height:65%; animation-delay:0.25s;"></div>
        <div class="spark-bar cyan-bar" style="height:70%; animation-delay:0.3s;"></div>
        <div class="spark-bar cyan-bar" style="height:55%; animation-delay:0.35s;"></div>
        <div class="spark-bar cyan-bar" style="height:90%; animation-delay:0.4s;"></div>
        <div class="spark-bar cyan-bar" style="height:80%; animation-delay:0.45s;"></div>
      </div>
      <div class="monitor-card-footer">
        <div class="monitor-status cyan-status">
          <span class="status-dot-sm cyan-dot"></span>
          실시간 수집 중
        </div>
        <div class="open-link">열기 →</div>
      </div>
    </a>

    <!-- 현물 카드 -->
    <a class="monitor-card" href="<?php echo G5_URL; ?>/_PAGE/Information/coin/bybit/coin_list_v2.php?type=spot" style="border-left: 3px solid var(--accent-violet); border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);">
      <div class="monitor-card-top">
        <div class="monitor-icon violet-icon">
          <svg viewBox="0 0 24 24" stroke-width="1.8" xmlns="http://www.w3.org/2000/svg">
            <rect x="3" y="3" width="7" height="7" rx="1"/>
            <rect x="14" y="3" width="7" height="7" rx="1"/>
            <rect x="3" y="14" width="7" height="7" rx="1"/>
            <rect x="14" y="14" width="7" height="7" rx="1"/>
          </svg>
        </div>
        <div class="monitor-tag violet-tag">USDT</div>
      </div>
      <h3>현물 매매 모니터링</h3>
      <div class="monitor-card-url"><?php echo G5_URL; ?>/_PAGE/Information/coin/bybit/<br>coin_list_v2.php</div>
      <div class="sparkline">
        <div class="spark-bar violet-bar" style="height:50%; animation-delay:0.0s;"></div>
        <div class="spark-bar violet-bar" style="height:70%; animation-delay:0.05s;"></div>
        <div class="spark-bar violet-bar" style="height:85%; animation-delay:0.1s;"></div>
        <div class="spark-bar violet-bar" style="height:60%; animation-delay:0.15s;"></div>
        <div class="spark-bar violet-bar" style="height:95%; animation-delay:0.2s;"></div>
        <div class="spark-bar violet-bar" style="height:75%; animation-delay:0.25s;"></div>
        <div class="spark-bar violet-bar" style="height:65%; animation-delay:0.3s;"></div>
        <div class="spark-bar violet-bar" style="height:100%; animation-delay:0.35s;"></div>
        <div class="spark-bar violet-bar" style="height:80%; animation-delay:0.4s;"></div>
        <div class="spark-bar violet-bar" style="height:70%; animation-delay:0.45s;"></div>
      </div>
      <div class="monitor-card-footer">
        <div class="monitor-status violet-status">
          <span class="status-dot-sm violet-dot"></span>
          실시간 수집 중
        </div>
        <div class="open-link">열기 →</div>
      </div>
    </a>
  </div>

  <!-- Footer -->
  <div class="page-footer">
    <div class="footer-info" id="footer-date">BYBIT MONITORING SYSTEM · v1.0</div>
    <div class="footer-tags">
      <div class="footer-tag">바이비트 API</div>
      <div class="footer-tag">실시간</div>
      <div class="footer-tag">KRW 마켓</div>
    </div>
  </div>

</div>

<script>
  function updateClock() {
    const now = new Date();
    const t = now.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false });
    const d = now.toLocaleDateString('ko-KR', { year: 'numeric', month: '2-digit', day: '2-digit' });
    document.getElementById('clock').textContent = t;
    document.getElementById('footer-date').textContent = 'BYBIT MONITORING SYSTEM · ' + d;
  }
  updateClock();
  setInterval(updateClock, 1000);
</script>

<?php include_once(G5_PATH.'/_PAGE/tail.php'); ?>