commit 54828b108743078693e97329e6e084e96de684a3
Author: root <root@hub.scroll.pub> Date: 2024-12-27 13:06:34 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..061f8e9 --- /dev/null +++ b/body.html @@ -0,0 +1,25 @@ +<header> + <h1>CryptoGlow</h1> + <p>Live Crypto Market Charts</p> +</header> + +<main> + <section class="chart-container"> + <div class="chart" id="btc-chart"> + <h2>Bitcoin (BTC)</h2> + <canvas id="btcCanvas"></canvas> + </div> + <div class="chart" id="eth-chart"> + <h2>Ethereum (ETH)</h2> + <canvas id="ethCanvas"></canvas> + </div> + <div class="chart" id="ada-chart"> + <h2>Cardano (ADA)</h2> + <canvas id="adaCanvas"></canvas> + </div> + </section> +</main> + +<footer> + <p>Stay updated with the latest crypto trends.</p> +</footer> \ No newline at end of file diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..2b1e743 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://cryptoglow.scroll.pub +metaTags +editButton /edit.html +title CryptoGlow - Live Crypto Market Charts +style.css +body.html +script.js \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..ab2f627 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# cryptoglow.scroll.pub +Website generated by DeepSeek from prompt: Create a website that has a live charts from the crypto market. Be creative and mae it fancy \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..ceacf3e --- /dev/null +++ b/script.js @@ -0,0 +1,60 @@ +function getRandomData() { + const data = []; + let lastValue = Math.random() * 100; + for (let i = 0; i < 30; i++) { + lastValue += (Math.random() - 0.5) * 10; + data.push(lastValue); + } + return data; +} + +function createChart(canvasId, label) { + const ctx = document.getElementById(canvasId).getContext('2d'); + return new Chart(ctx, { + type: 'line', + data: { + labels: Array.from({ length: 30 }, (_, i) => i + 1), + datasets: [{ + label: label, + data: getRandomData(), + borderColor: '#ff7e5f', + backgroundColor: 'rgba(255, 126, 95, 0.1)', + borderWidth: 2, + pointRadius: 0, + tension: 0.4 + }] + }, + options: { + responsive: true, + maintainAspectRatio: false, + scales: { + x: { + display: false + }, + y: { + display: false + } + }, + plugins: { + legend: { + display: false + } + } + } + }); +} + +const btcChart = createChart('btcCanvas', 'BTC'); +const ethChart = createChart('ethCanvas', 'ETH'); +const adaChart = createChart('adaCanvas', 'ADA'); + +setInterval(() => { + btcChart.data.datasets[0].data = getRandomData(); + btcChart.update(); + + ethChart.data.datasets[0].data = getRandomData(); + ethChart.update(); + + adaChart.data.datasets[0].data = getRandomData(); + adaChart.update(); +}, 5000); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..e738ef1 --- /dev/null +++ b/style.css @@ -0,0 +1,87 @@ +body { + font-family: 'Arial', sans-serif; + background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); + color: #fff; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 100vh; +} + +header { + text-align: center; + padding: 2rem; +} + +header h1 { + font-size: 3rem; + margin: 0; + background: linear-gradient(90deg, #ff7e5f, #feb47b); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +header p { + font-size: 1.2rem; + margin: 0.5rem 0 0; +} + +main { + width: 90%; + max-width: 1200px; + margin: 2rem auto; +} + +.chart-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.chart { + background: rgba(255, 255, 255, 0.1); + border-radius: 10px; + padding: 1.5rem; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); + transition: transform 0.3s ease; +} + +.chart:hover { + transform: translateY(-10px); +} + +.chart h2 { + font-size: 1.5rem; + margin-bottom: 1rem; + color: #ff7e5f; +} + +canvas { + width: 100%; + height: 200px; +} + +footer { + text-align: center; + padding: 1rem; + margin-top: 2rem; + font-size: 0.9rem; + color: #ccc; +} + +@media (max-width: 768px) { + header h1 { + font-size: 2rem; + } + + header p { + font-size: 1rem; + } + + .chart-container { + grid-template-columns: 1fr; + } +} \ No newline at end of file