body.html
Changed around line 1
+
+
CryptoGlow
+
Live Crypto Market Charts
+
+
+
+
+
+
Bitcoin (BTC)
+
+
+
+
Ethereum (ETH)
+
+
+
+
Cardano (ADA)
+
+
+
+
+
+
+
Stay updated with the latest crypto trends.
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://cryptoglow.scroll.pub
+ metaTags
+ editButton /edit.html
+ title CryptoGlow - Live Crypto Market Charts
+ style.css
+ body.html
+ script.js
readme.scroll
Changed around line 1
+ # 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
script.js
Changed around line 1
+ 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);
style.css
Changed around line 1
+ 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;
+ }
+ }