minorityox.github.io

<title>多資產監控面板 - Cyberpunk 黑底亮綠</title> <style> :root { --bg: #000000; --text: #00ff41; --text-dim: #00cc33; --accent: #00ff9d; --border: #003311; --up: #00ff41; --down: #ff3366; --white: #FFFFFF; --btc-orange: #F7931A; --tsmc-red: #D70000; --nvda-green: #76B900; --tsla-red: #CC0000; --eth-blue: #627EEA; --hype-purple: #0A1F44; } * { margin:0; padding:0; box-sizing:border-box; } body { background: var(--bg); color: var(--text); font-family: 'Oxanium', 'Courier New', monospace; min-height: 100vh; padding: 1.5rem; line-height: 1.5; } h1, h2, h3, .btn { font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; } .monitor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 2rem; margin-bottom: 3rem; } .monitor-card { background: rgba(10, 20, 10, 0.8); border: 1px solid var(--border); border-radius: 12px; padding: 1.8rem; box-shadow: 0 0 30px rgba(0, 255, 65, 0.12); transition: all 0.3s ease; } .monitor-card:hover { border-color: var(--accent); box-shadow: 0 0 40px rgba(0, 255, 65, 0.2); transform: translateY(-6px); } .asset-header { margin-bottom: 1.5rem; text-align: center; display: flex; align-items: center; justify-content: center; gap: 0.6rem; flex-wrap: wrap; } .asset-logo { font-size: 2.0rem; font-weight: 900; text-shadow: 0 0 12px currentColor; font-family: 'Rajdhani', sans-serif; } .btc-logo { color: var(--btc-orange); } .tsmc-logo { color: var(--tsmc-red); } .nvda-logo { color: var(--nvda-green); } .tsla-logo { color: var(--tsla-red); } .eth-logo { color: var(--eth-blue); } .hype-logo { color: var(--hype-purple); } .asset-symbol { font-size: 2.6rem; font-weight: 900; color: var(--white); letter-spacing: 2px; text-shadow: 0 0 15px rgba(255, 255, 255, 0.5); } .asset-fullname { font-size: 1.1rem; color: var(--white); /* 改成純白色 */ font-weight: 500; letter-spacing: 1px; text-shadow: 0 0 10px rgba(255, 255, 255, 0.4); /* 輕微白光，提升可讀性 */ } .monitor-items { display: flex; flex-wrap: wrap; gap: 1.2rem 1.8rem; justify-content: space-between; } .monitor-item { text-align: center; flex: 1 1 120px; min-width: 130px; } .monitor-label { color: var(--white); font-size: 0.9rem; margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 1.2px; text-shadow: 0 0 8px rgba(255, 255, 255, 0.3); } .monitor-value { font-size: 1.8rem; font-weight: 700; letter-spacing: -0.4px; color: var(--text); text-shadow: 0 0 12px rgba(0, 255, 65, 0.7); } .percent-value { font-size: 2.2rem; font-weight: 700; color: var(--text); text-shadow: 0 0 16px var(--up); } .change-up { color: var(--up); text-shadow: 0 0 10px var(--up); } .change-down { color: var(--down); text-shadow: 0 0 10px var(--down); } .container { max-width: 1600px; margin: 0 auto; } .card { background: rgba(10, 10, 10, 0.7); border: 1px solid var(--border); border-radius: 12px; padding: 2rem; margin-bottom: 2rem; box-shadow: 0 0 30px rgba(0, 255, 65, 0.08); transition: all 0.3s ease; } .card:hover { border-color: var(--accent); box-shadow: 0 0 40px rgba(0, 255, 65, 0.15); transform: translateY(-4px); } .btn { display: inline-block; background: transparent; color: var(--text); border: 2px solid var(--text); padding: 0.8rem 1.8rem; border-radius: 50px; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 1.5px; transition: all 0.3s; cursor: pointer; } .btn:hover { background: var(--text); color: #000; box-shadow: 0 0 25px rgba(0, 255, 65, 0.7); } @media (max-width: 1024px) { .monitor-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .asset-header { flex-direction: column; gap: 0.4rem; } } </style>

<h1>多資產監控儀表板</h1>

<div class="monitor-grid">

  <!-- BTC -->
  <div class="monitor-card">
    <div class="asset-header">
      <span class="asset-logo btc-logo">₿</span>
      <span class="asset-symbol">BTC</span>
      <span class="asset-fullname">Bitcoin</span>
    </div>
    <div class="monitor-items">
      <div class="monitor-item">
        <div class="monitor-label">即時價格 (USD)</div>
        <div class="monitor-value">$70,350</div>
      </div>
      <div class="monitor-item">
        <div class="monitor-label">市值</div>
        <div class="monitor-value">$1.406 T</div>
      </div>
      <div class="monitor-item">
        <div class="monitor-label">全球三大資產總佔比</div>
        <div class="monitor-value percent-value change-up">0.88%</div>
      </div>
      <div class="monitor-item">
        <div class="monitor-label">24h 漲跌</div>
        <div class="monitor-value change-up">+0.40%</div>
      </div>
    </div>
  </div>

  <!-- TSMC -->
  <div class="monitor-card">
    <div class="asset-header">
      <span class="asset-logo tsmc-logo">T</span>
      <span class="asset-symbol">TSMC</span>
      <span class="asset-fullname">Taiwan Semiconductor</span>
    </div>
    <div class="monitor-items">
      <div class="monitor-item">
        <div class="monitor-label">即時價格 (USD)</div>
        <div class="monitor-value">$355</div>
      </div>
      <div class="monitor-item">
        <div class="monitor-label">市值</div>
        <div class="monitor-value">$1.84 T</div>
      </div>
      <div class="monitor-item">
        <div class="monitor-label">全球三大資產總佔比</div>
        <div class="monitor-value percent-value change-up">1.16%</div>
      </div>
      <div class="monitor-item">
        <div class="monitor-label">24h 漲跌</div>
        <div class="monitor-value change-up">+1.88%</div>
      </div>
    </div>
  </div>

  <!-- NVDA -->
  <div class="monitor-card">
    <div class="asset-header">
      <span class="asset-logo nvda-logo">N</span>
      <span class="asset-symbol">NVDA</span>
      <span class="asset-fullname">NVIDIA</span>
    </div>
    <div class="monitor-items">
      <div class="monitor-item">
        <div class="monitor-label">即時價格 (USD)</div>
        <div class="monitor-value">$190</div>
      </div>
      <div class="monitor-item">
        <div class="monitor-label">市值</div>
        <div class="monitor-value">$4.62 T</div>
      </div>
      <div class="monitor-item">
        <div class="monitor-label">全球三大資產總佔比</div>
        <div class="monitor-value percent-value change-up">2.91%</div>
      </div>
      <div class="monitor-item">
        <div class="monitor-label">24h 漲跌</div>
        <div class="monitor-value change-up">+2.50%</div>
      </div>
    </div>
  </div>

  <!-- TSLA -->
  <div class="monitor-card">
    <div class="asset-header">
      <span class="asset-logo tsla-logo">TS</span>
      <span class="asset-symbol">TSLA</span>
      <span class="asset-fullname">Tesla</span>
    </div>
    <div class="monitor-items">
      <div class="monitor-item">
        <div class="monitor-label">即時價格 (USD)</div>
        <div class="monitor-value">$417</div>
      </div>
      <div class="monitor-item">
        <div class="monitor-label">市值</div>
        <div class="monitor-value">$1.54 T</div>
      </div>
      <div class="monitor-item">
        <div class="monitor-label">全球三大資產總佔比</div>
        <div class="monitor-value percent-value change-up">0.97%</div>
      </div>
      <div class="monitor-item">
        <div class="monitor-label">24h 漲跌</div>
        <div class="monitor-value change-up">+1.51%</div>
      </div>
    </div>
  </div>

  <!-- ETH -->
  <div class="monitor-card">
    <div class="asset-header">
      <span class="asset-logo eth-logo">Ξ</span>
      <span class="asset-symbol">ETH</span>
      <span class="asset-fullname">Ethereum</span>
    </div>
    <div class="monitor-items">
      <div class="monitor-item">
        <div class="monitor-label">即時價格 (USD)</div>
        <div class="monitor-value">$2,100</div>
      </div>
      <div class="monitor-item">
        <div class="monitor-label">市值</div>
        <div class="monitor-value">$0.255 T</div>
      </div>
      <div class="monitor-item">
        <div class="monitor-label">全球三大資產總佔比</div>
        <div class="monitor-value percent-value change-up">0.16%</div>
      </div>
      <div class="monitor-item">
        <div class="monitor-label">24h 漲跌</div>
        <div class="monitor-value change-up">+1.20%</div>
      </div>
    </div>
  </div>

  <!-- HYPE -->
  <div class="monitor-card">
    <div class="asset-header">
      <span class="asset-logo hype-logo">H</span>
      <span class="asset-symbol">HYPE</span>
      <span class="asset-fullname">Hyperliquid</span>
    </div>
    <div class="monitor-items">
      <div class="monitor-item">
        <div class="monitor-label">即時價格 (USD)</div>
        <div class="monitor-value">$31.50</div>
      </div>
      <div class="monitor-item">
        <div class="monitor-label">市值</div>
        <div class="monitor-value">$0.008 T</div>
      </div>
      <div class="monitor-item">
        <div class="monitor-label">全球三大資產總佔比</div>
        <div class="monitor-value percent-value change-up">0.01%</div>
      </div>
      <div class="monitor-item">
        <div class="monitor-label">24h 漲跌</div>
        <div class="monitor-value change-down">-2.60%</div>
      </div>
    </div>
  </div>

</div>

<div class="card">
  <h2>調整完成</h2>
  <p>現在資產的全名也改成純白色，與縮寫顏色一致，整體標題看起來更統一、乾淨。如果覺得全名太亮（可以調成 #f0f0f0 稍灰）、或想調整字體粗細/間距，再告訴我，我馬上幫你改！</p>
  
  <div style="margin-top: 2rem; text-align: center;">
    <a href="#" class="btn">設定全局警報</a>
    <a href="#" class="btn">新增/移除資產</a>
  </div>
</div>