<?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">UPBIT 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/upbit/coin_list.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/upbit/coin_list.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/monitoring/upbit/market/market_price.php" 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">현재가</div>
      </div>
      <h3>현재가 모니터링</h3>
      <div class="monitor-card-url"><?php echo G5_URL; ?>/_PAGE/monitoring/upbit/market/<br>market_price.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/monitoring/upbit/market/market_volume.php" 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">거래량</div>
      </div>
      <h3>거래량 모니터링</h3>
      <div class="monitor-card-url"><?php echo G5_URL; ?>/_PAGE/monitoring/upbit/market/<br>market_volume.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/monitoring/upbit/market/upbit.php" 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">통합</div>
      </div>
      <h3>현재가 + 거래량 통합</h3>
      <div class="monitor-card-url"><?php echo G5_URL; ?>/_PAGE/monitoring/upbit/market/<br>upbit.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>

  <!-- 옵저버 섹션 -->
  <div class="section-label">
    <div class="section-dot" style="background: var(--accent-emerald);"></div>
    <span>옵저버</span>
  </div>

  <div class="monitor-grid">

    <!-- 현재가 옵저버 카드 -->
    <a class="monitor-card" href="<?php echo G5_URL; ?>/_PAGE/observer/upbit/observer_price.php" style="border-left: 3px solid var(--accent-emerald); 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 emerald-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"/>
            <circle cx="12" cy="12" r="10"/>
          </svg>
        </div>
        <div class="monitor-tag emerald-tag">현재가</div>
      </div>
      <h3>현재가 옵저버</h3>
      <div class="monitor-card-url"><?php echo G5_URL; ?>/_PAGE/observer/upbit/<br>observer_price.php</div>
      <div class="sparkline">
        <div class="spark-bar emerald-bar" style="height:40%; animation-delay:0.0s;"></div>
        <div class="spark-bar emerald-bar" style="height:65%; animation-delay:0.05s;"></div>
        <div class="spark-bar emerald-bar" style="height:50%; animation-delay:0.1s;"></div>
        <div class="spark-bar emerald-bar" style="height:80%; animation-delay:0.15s;"></div>
        <div class="spark-bar emerald-bar" style="height:60%; animation-delay:0.2s;"></div>
        <div class="spark-bar emerald-bar" style="height:75%; animation-delay:0.25s;"></div>
        <div class="spark-bar emerald-bar" style="height:55%; animation-delay:0.3s;"></div>
        <div class="spark-bar emerald-bar" style="height:90%; animation-delay:0.35s;"></div>
        <div class="spark-bar emerald-bar" style="height:70%; animation-delay:0.4s;"></div>
        <div class="spark-bar emerald-bar" style="height:100%; animation-delay:0.45s;"></div>
      </div>
      <div class="monitor-card-footer">
        <div class="monitor-status emerald-status">
          <span class="status-dot-sm emerald-dot"></span>
          실시간 수집 중
        </div>
        <div class="open-link">열기 →</div>
      </div>
    </a>

    <!-- 거래량 옵저버 카드 -->
    <a class="monitor-card" href="<?php echo G5_URL; ?>/_PAGE/observer/upbit/observer_volume.php" style="border-left: 3px solid var(--accent-amber); 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 amber-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 amber-tag">거래량</div>
      </div>
      <h3>거래량 옵저버</h3>
      <div class="monitor-card-url"><?php echo G5_URL; ?>/_PAGE/observer/upbit/<br>observer_volume.php</div>
      <div class="sparkline">
        <div class="spark-bar amber-bar" style="height:55%; animation-delay:0.0s;"></div>
        <div class="spark-bar amber-bar" style="height:35%; animation-delay:0.05s;"></div>
        <div class="spark-bar amber-bar" style="height:70%; animation-delay:0.1s;"></div>
        <div class="spark-bar amber-bar" style="height:45%; animation-delay:0.15s;"></div>
        <div class="spark-bar amber-bar" style="height:85%; animation-delay:0.2s;"></div>
        <div class="spark-bar amber-bar" style="height:60%; animation-delay:0.25s;"></div>
        <div class="spark-bar amber-bar" style="height:75%; animation-delay:0.3s;"></div>
        <div class="spark-bar amber-bar" style="height:50%; animation-delay:0.35s;"></div>
        <div class="spark-bar amber-bar" style="height:95%; animation-delay:0.4s;"></div>
        <div class="spark-bar amber-bar" style="height:80%; animation-delay:0.45s;"></div>
      </div>
      <div class="monitor-card-footer">
        <div class="monitor-status amber-status">
          <span class="status-dot-sm amber-dot"></span>
          실시간 수집 중
        </div>
        <div class="open-link">열기 →</div>
      </div>
    </a>

  </div>

  <!-- Footer -->
  <div class="page-footer">
    <div class="footer-info" id="footer-date">UPBIT 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 = 'UPBIT MONITORING SYSTEM · ' + d;
  }
  updateClock();
  setInterval(updateClock, 1000);
</script>

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