← dovizdolar.com| WASM widget demo| 1 · Haber sitesi 2 · Trading panosu 3 · Kuyumcu vitrini 4 · Kur terminali 5 · Kripto terminali 6 · Duvar panosu| CSS dokümantasyonu Kodu oluştur
Bu sayfadaki fiyatlar gerçek ve canlı. Üç demo da birebir aynı HTML'i üretir — aradaki fark yalnızca CSS'tir. Sayfa kaynağını inceleyebilirsiniz.

Kripto Terminali

20 sembol · 4 panel · çoklu-kaynak median · TL
MajörTL
Katman-1 / ÖdemeTL
Altyapı / DeFiTL
DiğerTL
Kaynak Kırılımı — BTC / ETH · her borsanın kendi kotasyonuTL

1. HTML (gövdeye yapıştırın)

<!-- 4 panel × 5 sembol = 20 satır. Yön oku ::after ile CSS'ten eklenir (DOM'da yok):
     .dd-w-row[data-dir="up"] .dd-w-ask::after --> content: " \25B2" -->
<div class="dd-widget" data-semboller="bitcoin,ethereum,solana,ripple,cardano"
     data-para="try" data-tema="unstyled" data-baslik="0"></div>

<script src="https://dovizdolar.com/w.js" async></script>

2. CSS (bu görünümü veren kod — tamamı sizde)

<style>
body{background:#07090d;color:#b9c6d8;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
.k{max-width:1180px;margin:0 auto;padding:14px 14px 40px}
.k-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
  border-bottom:2px solid #1b2430;padding-bottom:10px;margin-bottom:14px}
.k-top h1{margin:0;font-size:15px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#31d0aa}
.k-top .meta{font-size:11px;color:#5d6c82;letter-spacing:.08em}
.k-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:820px){.k-grid{grid-template-columns:1fr}}
.box{border:1px solid #1b2430;background:#0b0f16}
.box-h{background:#101720;padding:6px 11px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#31d0aa;border-bottom:1px solid #1b2430;display:flex;justify-content:space-between}
.box-h em{font-style:normal;color:#4d5b70}

/* ---- widget: monospace terminal satırları ---- */
.dd-w-row{display:grid;grid-template-columns:1fr 92px 92px;gap:6px;padding:5px 11px;
  border-bottom:1px solid #10161f;font-variant-numeric:tabular-nums}
.dd-w-row:last-of-type{border-bottom:0}
.dd-w-name{color:#8fa1bd;text-transform:uppercase;font-size:11px;letter-spacing:.05em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-w-bid{text-align:right;color:#5d6c82}
.dd-w-ask{text-align:right;font-weight:700;color:#dbe4f0}
.dd-w-row[data-dir="up"] .dd-w-ask{color:#31d0aa}
.dd-w-row[data-dir="up"] .dd-w-ask::after{content:" \25B2";font-size:8px;vertical-align:middle}
.dd-w-row[data-dir="down"] .dd-w-ask{color:#ff6b7a}
.dd-w-row[data-dir="down"] .dd-w-ask::after{content:" \25BC";font-size:8px;vertical-align:middle}
.dd-w-stale{opacity:.4}
.dd-w-credit{display:block;padding:5px 11px;font-size:10px;color:#3f4b5e;text-decoration:none;border-top:1px solid #1b2430}
.dd-w-time{display:none}
.dd-w-err{padding:10px 11px;color:#4d5b70}
/* ---- kaynak kırılımı ---- */
.dd-w-src{display:grid;grid-template-columns:1fr 92px 92px;gap:6px;padding:3px 11px 3px 24px;
  border-bottom:1px solid #0d1219;font-size:10.5px;color:#5d6c82;font-variant-numeric:tabular-nums}
.dd-w-src-name{text-transform:uppercase;letter-spacing:.06em}
.dd-w-src-name::before{content:"· "}
.dd-w-src-bid,.dd-w-src-ask{text-align:right}
.dd-w-src[data-dir="up"] .dd-w-src-ask{color:#31d0aa}
.dd-w-src[data-dir="down"] .dd-w-src-ask{color:#ff6b7a}
</style>

Sembolleri, para birimini ve temayı data-* öznitelikleriyle değiştirirsiniz. Tüm sınıfların anlamı için CSS dokümantasyonuna bakın.