Iframe
HTML with links
ZIP with files
Column Chart
Geo Map
Line Chart
Pie Chart
Stock Chart
From scratchHTMLcopy
x
1
<!DOCTYPE html>2
<html lang="pt-BR">3
<head>4
<meta charset="UTF-8">5
<meta name="viewport" content="width=device-width, initial-scale=1.0">6
<title>Crypto Tech Dashboard Pro</title>7
<style>8
/* Estilo Futurista High-Tech */9
body {10
font-family: 'Arial', sans-serif;11
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);12
color: #cce5d2;13
margin: 0;14
padding: 20px;15
min-height: 100vh;16
overflow-x: hidden;17
font-size: 16px;18
}19
.header {20
text-align: center;21
margin-bottom: 30px;22
position: relative;23
}24
.header h1 {25
font-size: 2.5rem;26
background: linear-gradient(90deg, #f3a200, #e24533, #6f2d2d);27
-webkit-background-clip: text;28
-webkit-text-fill-color: transparent;29
text-shadow: 0 0 20px rgba(243, 162, 0, 0.5);30
animation: glow 2s infinite alternate;31
}32
@keyframes glow {33
0% { text-shadow: 0 0 10px rgba(243, 162, 0, 0.5); }34
100% { text-shadow: 0 0 30px rgba(243, 162, 0, 1); }35
}36
.dashboard-grid {37
display: grid;38
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));39
gap: 25px;40
max-width: 1400px;41
margin: 0 auto;42
}43
.crypto-list {44
background: rgba(110, 45, 45, 0.15);45
backdrop-filter: blur(12px);46
border-radius: 15px;47
padding: 20px;48
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);49
max-height: 600px;50
overflow-y: auto;51
transition: transform 0.3s ease-in-out;52
}53
.crypto-list:hover {54
transform: scale(1.02);55
}56
.crypto-item {57
display: grid;58
grid-template-columns: 40px 1fr auto;59
align-items: center;60
padding: 15px;61
margin: 10px 0;62
background: rgba(255, 255, 255, 0.05);63
border-radius: 8px;64
transition: transform 0.2s, background 0.3s;65
}66
.crypto-item:hover {67
transform: translateX(10px);68
background: rgba(226, 69, 51, 0.1);69
}70
.crypto-item img {71
width: 30px;72
height: 30px;73
object-fit: contain;74
filter: drop-shadow(0 0 10px rgba(243, 162, 0, 0.5));75
}76
.chart-container {77
grid-column: 1 / -1;78
height: 500px;79
background: rgba(110, 45, 45, 0.1);80
backdrop-filter: blur(12px);81
border-radius: 15px;82
padding: 20px;83
position: relative;84
overflow: hidden;85
}86
.chart-container::before {87
content: '';88
position: absolute;89
top: 0;90
left: 0;91
width: 100%;92
height: 100%;93
background: radial-gradient(circle, rgba(243, 162, 0, 0.1) 10%, transparent 10%);94
animation: scan 5s linear infinite;95
pointer-events: none;96
}97
@keyframes scan {98
0% { transform: translateY(-100%); }99
100% { transform: translateY(100%); }100
}101
.advanced-stats {102
display: grid;103
grid-template-columns: repeat(3, 1fr);104
gap: 15px;105
margin-bottom: 25px;106
}107
.stat-box {108
background: linear-gradient(135deg, #6f2d2d, #e24533);109
padding: 20px;110
border-radius: 12px;111
text-align: center;112
position: relative;113
overflow: hidden;114
}115
.stat-box::before {116
content: '';117
position: absolute;118
top: 0;119
left: 0;120
width: 100%;121
height: 100%;122
background: linear-gradient(90deg, transparent, rgba(243, 162, 0, 0.5), transparent);123
animation: shine 3s infinite;124
}125
@keyframes shine {126
0% { transform: translateX(-100%); }127
100% { transform: translateX(100%); }128
}129
.live-indicator {130
position: absolute;131
top: 20px;132
right: 20px;133
display: flex;134
align-items: center;135
color: #f3a200;136
font-weight: bold;137
}138
.blink {139
animation: pulse 1.5s infinite;140
}141
@keyframes pulse {142
0% { opacity: 0.4; }143
50% { opacity: 1; }144
100% { opacity: 0.4; }145
}146
/* Conversor de Criptomoedas */147
.converter {148
background: rgba(110, 45, 45, 0.15);149
backdrop-filter: blur(12px);150
border-radius: 15px;151
padding: 20px;152
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);153
transition: transform 0.3s ease-in-out;154
}155
.converter:hover {156
transform: scale(1.02);157
}158
.converter h2 {159
font-size: 1.5rem;160
background: linear-gradient(90deg, #f3a200, #e24533);161
-webkit-background-clip: text;162
-webkit-text-fill-color: transparent;163
text-shadow: 0 0 10px rgba(243, 162, 0, 0.5);164
}165
.converter form {166
display: grid;167
grid-template-columns: 1fr 1fr;168
gap: 15px;169
margin-top: 20px;170
}171
.converter input, .converter select, .converter button {172
padding: 10px;173
border: none;174
border-radius: 8px;175
background: rgba(255, 255, 255, 0.1);176
color: #cce5d2;177
font-size: 1rem;178
transition: background 0.3s;179
}180
.converter input:focus, .converter select:focus, .converter button:focus {181
background: rgba(255, 255, 255, 0.2);182
outline: none;183
}184
.converter button {185
grid-column: span 2;186
background: linear-gradient(90deg, #f3a200, #e24533);187
color: #fff;188
font-weight: bold;189
cursor: pointer;190
}191
.converter button:hover {192
background: linear-gradient(90deg, #e24533, #f3a200);193
}194
#conversionResult {195
margin-top: 20px;196
font-size: 1.2rem;197
color: #f3a200;198
text-shadow: 0 0 10px rgba(243, 162, 0, 0.5);199
}200
</style>201
</head>202
<body>203
<div class="header">204
<h1>CRYPTO TECH DASHBOARD PRO</h1>205
<div class="live-indicator">206
<div class="blink">●</div> LIVE DATA STREAMING207
</div>208
</div>209
<div class="dashboard-grid">210
<div class="advanced-stats">211
<div class="stat-box">212
<h3>Total Market Cap</h3>213
<p class="highlight">$2.5T</p>214
</div>215
<div class="stat-box">216
<h3>24h Volume</h3>217
<p class="highlight">$120B</p>218
</div>219
<div class="stat-box">220
<h3>Active Assets</h3>221
<p class="highlight">30,456</p>222
</div>223
</div>224
<div class="chart-container">225
<canvas id="marketChart"></canvas>226
</div>227
<div class="crypto-list">228
<!-- Lista de 50 Criptomoedas -->229
<div class="crypto-item">230
<img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="BTC">231
<span>Bitcoin (BTC)</span>232
<span class="positive">$62,450.00</span>233
</div>234
<div class="crypto-item">235
<img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" alt="ETH">236
<span>Ethereum (ETH)</span>237
<span class="positive">$3,200.00</span>238
</div>239
<div class="crypto-item">240
<img src="https://cryptologos.cc/logos/binance-coin-bnb-logo.png" alt="BNB">241
<span>Binance Coin (BNB)</span>242
<span class="positive">$420.00</span>243
</div>244
<div class="crypto-item">245
<img src="https://cryptologos.cc/logos/cardano-ada-logo.png" alt="ADA">246
<span>Cardano (ADA)</span>247
<span class="negative">$1.20</span>248
</div>249
<div class="crypto-item">250
<img src="https://cryptologos.cc/logos/solana-sol-logo.png" alt="SOL">251
<span>Solana (SOL)</span>252
<span class="positive">$150.00</span>253
</div>254
<div class="crypto-item">255
<img src="https://cryptologos.cc/logos/polkadot-dot-logo.png" alt="DOT">256
<span>Polkadot (DOT)</span>257
<span class="positive">$25.00</span>258
</div>259
<div class="crypto-item">260
<img src="https://cryptologos.cc/logos/chainlink-link-logo.png" alt="LINK">261
<span>Chainlink (LINK)</span>262
<span class="positive">$15.00</span>263
</div>264
<div class="crypto-item">265
<img src="https://cryptologos.cc/logos/litecoin-ltc-logo.png" alt="LTC">266
<span>Litecoin (LTC)</span>267
<span class="positive">$120.00</span>268
</div>269
<div class="crypto-item">270
<img src="https://cryptologos.cc/logos/uniswap-uni-logo.png" alt="UNI">271
<span>Uniswap (UNI)</span>272
<span class="positive">$20.00</span>273
</div>274
<div class="crypto-item">275
<img src="https://cryptologos.cc/logos/aave-aave-logo.png" alt="AAVE">276
<span>Aave (AAVE)</span>277
<span class="positive">$300.00</span>278
</div>279
<div class="crypto-item">280
<img src="https://cryptologos.cc/logos/avalanche-avax-logo.png" alt="AVAX">281
<span>Avalanche (AVAX)</span>282
<span class="positive">$50.00</span>283
</div>284
<div class="crypto-item">285
<img src="https://cryptologos.cc/logos/polygon-matic-logo.png" alt="MATIC">286
<span>Polygon (MATIC)</span>287
<span class="positive">$2.00</span>288
</div>289
<div class="crypto-item">290
<img src="https://cryptologos.cc/logos/algorand-algo-logo.png" alt="ALGO">291
<span>Algorand (ALGO)</span>292
<span class="positive">$1.50</span>293
</div>294
<div class="crypto-item">295
<img src="https://cryptologos.cc/logos/stellar-xlm-logo.png" alt="XLM">296
<span>Stellar (XLM)</span>297
<span class="positive">$0.50</span>298
</div>299
<div class="crypto-item">300
<img src="https://cryptologos.cc/logos/tezos-xtz-logo.png" alt="XTZ">301
<span>Tezos (XTZ)</span>302
<span class="positive">$3.00</span>303
</div>304
<div class="crypto-item">305
<img src="https://cryptologos.cc/logos/cosmos-atom-logo.png" alt="ATOM">306
<span>Cosmos (ATOM)</span>307
<span class="positive">$20.00</span>308
</div>309
<div class="crypto-item">310
<img src="https://cryptologos.cc/logos/vechain-vet-logo.png" alt="VET">311
<span>Vechain (VET)</span>312
<span class="positive">$0.10</span>313
</div>314
<div class="crypto-item">315
<img src="https://cryptologos.cc/logos/tron-trx-logo.png" alt="TRX">316
<span>Tron (TRX)</span>317
<span class="positive">$0.08</span>318
</div>319
<div class="crypto-item">320
<img src="https://cryptologos.cc/logos/filecoin-fil-logo.png" alt="FIL">321
<span>Filecoin (FIL)</span>322
<span class="positive">$10.00</span>323
</div>324
<div class="crypto-item">325
<img src="https://cryptologos.cc/logos/helium-hnt-logo.png" alt="HNT">326
<span>Helium (HNT)</span>327
<span class="positive">$5.00</span>328
</div>329
<div class="crypto-item">330
<img src="https://cryptologos.cc/logos/the-sandbox-sand-logo.png" alt="SAND">331
<span>The Sandbox (SAND)</span>332
<span class="positive">$2.50</span>333
</div>334
<div class="crypto-item">335
<img src="https://cryptologos.cc/logos/decentraland-mana-logo.png" alt="MANA">336
<span>Decentraland (MANA)</span>337
<span class="positive">$1.00</span>338
</div>339
<div class="crypto-item">340
<img src="https://cryptologos.cc/logos/axie-infinity-axs-logo.png" alt="AXS">341
<span>Axie Infinity (AXS)</span>342
<span class="positive">$30.00</span>343
</div>344
<div class="crypto-item">345
<img src="https://cryptologos.cc/logos/chiliz-chz-logo.png" alt="CHZ">346
<span>Chiliz (CHZ)</span>347
<span class="positive">$0.20</span>348
</div>349
<div class="crypto-item">350
<img src="https://cryptologos.cc/logos/enjin-coin-enj-logo.png" alt="ENJ">351
<span>Enjin Coin (ENJ)</span>352
<span class="positive">$0.75</span>353
</div>354
<div class="crypto-item">355
<img src="https://cryptologos.cc/logos/theta-token-theta-logo.png" alt="THETA">356
<span>Theta Token (THETA)</span>357
<span class="positive">$4.00</span>358
</div>359
<div class="crypto-item">360
<img src="https://cryptologos.cc/logos/iota-miota-logo.png" alt="MIOTA">361
<span>IOTA (MIOTA)</span>362
<span class="positive">$1.20</span>363
</div>364
<div class="crypto-item">365
<img src="https://cryptologos.cc/logos/monero-xmr-logo.png" alt="XMR">366
<span>Monero (XMR)</span>367
<span class="positive">$150.00</span>368
</div>369
<div class="crypto-item">370
<img src="https://cryptologos.cc/logos/dogecoin-doge-logo.png" alt="DOGE">371
<span>Dogecoin (DOGE)</span>372
<span class="positive">$0.09</span>373
</div>374
<div class="crypto-item">375
<img src="https://cryptologos.cc/logos/shiba-inu-shib-logo.png" alt="SHIB">376
<span>Shiba Inu (SHIB)</span>377
<span class="positive">$0.00002</span>378
</div>379
</div>380
<div class="converter">381
<h2>Conversor de Criptomoedas</h2>382
<form id="converterForm">383
<label for="amount">Valor:</label>384
<input type="number" id="amount" placeholder="Digite o valor" required>385
<label for="fromCurrency">De:</label>386
<select id="fromCurrency">387
<option value="BTC">Bitcoin (BTC)</option>388
<option value="ETH">Ethereum (ETH)</option>389
<option value="BNB">Binance Coin (BNB)</option>390
<option value="USD">Dólar Americano (USD)</option>391
</select>392
<label for="toCurrency">Para:</label>393
<select id="toCurrency">394
<option value="BTC">Bitcoin (BTC)</option>395
<option value="ETH">Ethereum (ETH)</option>396
<option value="BNB">Binance Coin (BNB)</option>397
<option value="USD">Dólar Americano (USD)</option>398
</select>399
<button type="submit">Converter</button>400
</form>401
<p id="conversionResult"></p>402
</div>403
</div>404
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>405
<script>406
// Configuração do Gráfico Avançado407
const ctx = document.getElementById('marketChart').getContext('2d');408
new Chart(ctx, {409
type: 'line',410
data: {411
labels: Array.from({length: 24}, (_,i) => `${i}:00`),412
datasets: [{413
label: 'Market Cap',414
data: Array.from({length: 24}, () => Math.random() * 100 + 200),415
borderColor: '#f3a200',416
backgroundColor: 'rgba(243, 162, 0, 0.1)',417
borderWidth: 2,418
tension: 0.4419
}]420
},421
options: {422
responsive: true,423
maintainAspectRatio: false,424
plugins: {425
legend: {display: false},426
tooltip: {427
mode: 'index',428
intersect: false429
}430
},431
scales: {432
x: {grid: {color: 'rgba(204, 229, 210, 0.1)'}},433
y: {grid: {color: 'rgba(204, 229, 210, 0.1)'}}434
}435
}436
});437
438
// Simulação de Dados em Tempo Real439
function updateLiveData() {440
document.querySelectorAll('.crypto-item span:last-child').forEach(el => {441
const change = Math.random() > 0.5 ? 1 : -1;442
const value = (Math.random() * 10000 + 30000).toFixed(2);443
el.textContent = `$${value}`;444
el.className = change > 0 ? 'positive' : 'negative';445
});446
}447
setInterval(updateLiveData, 2000);448
449
// Lógica do Conversor de Criptomoedas450
const conversionRates = {451
BTC: 62000, // 1 BTC = $62,000452
ETH: 3200, // 1 ETH = $3,200453
BNB: 420, // 1 BNB = $420454
USD: 1 // 1 USD = $1455
};456
457
document.getElementById('converterForm').addEventListener('submit', function(e) {458
e.preventDefault();459
const amount = parseFloat(document.getElementById('amount').value);460
const fromCurrency = document.getElementById('fromCurrency').value;461
const toCurrency = document.getElementById('toCurrency').value;462
463
if (isNaN(amount)) {464
alert('Por favor, insira um valor válido.');465
return;466
}467
468
const fromRate = conversionRates[fromCurrency];469
const toRate = conversionRates[toCurrency];470
471
const convertedAmount = (amount * fromRate) / toRate;472
document.getElementById('conversionResult').textContent = 473
`${amount} ${fromCurrency} = ${convertedAmount.toFixed(2)} ${toCurrency}`;474
});475
</script>476
</body>477
</html>CSScopy
6
1
html, body, #container {2
width: 100%;3
height: 100%;4
margin: 0;5
padding: 0;6
}JavaScriptcopy
45
1
anychart.onDocumentReady(function () {2
3
// create data4
var data = ([5
["White", 507, 511, 506, 510],6
["Black", 510, 511, 506, 507],7
["Long lower shadow", 508.5, 511, 506, 510],8
["Long upper shadow", 508.5, 511, 506, 507],9
["Hammer", 510, 511, 506, 511],10
["Inverted hammer", 507, 511, 506,506],11
["Spinning top white", 508, 511, 506, 509],12
["Spinning top black", 509, 511, 506, 508],13
["Four Price Doji", 508.5, 508.5, 508.5, 508.5],14
["Long legged doji", 508.5, 511, 506, 508.5],15
["Dragonfly doji", 511, 511, 506, 511],16
["Gravestone doji", 506, 511, 506, 506],17
["Marubozu white", 506, 511, 506, 511],18
["Marubozu black", 511, 511, 506, 506]19
]);20
21
// create a chart22
var chart = anychart.cartesian();23
24
// set the interactivity mode25
chart.interactivity("by-x");26
27
// rotate the labels on the x-axis28
chart.xAxis().labels().rotation(-90);29
30
// create a series, set the data and configure visual settings31
var series = chart.candlestick(data);32
series.fallingFill("black");33
series.fallingStroke("black");34
series.risingFill("white");35
series.risingStroke("black");36
37
// set the interactivity mode38
chart.interactivity("by-x");39
40
// set the container id41
chart.container("container");42
43
// initiate drawing the chart44
chart.draw();45
});