Spaces:

offerpk3
/

redeyeportfolio

Running

App Files Files Community

offerpk3 commited on Jun 26, 2025

Commit

6f46e4a

verified ·

1 Parent(s): f1c4333

Update index.html

Browse files

Files changed (1) hide show

index.html +619 -19

index.html CHANGED Viewed

@@ -1,19 +1,619 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Red Eye Portfolio</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
+  <script>
+    tailwind.config = {
+      darkMode: 'class',
+      theme: {
+        extend: {
+          colors: {
+            'primary': '#6d28d9',
+            'primary-dark': '#5b21b6',
+            'secondary': '#1e293b',
+            'secondary-dark': '#0f172a',
+          },
+          animation: {
+            'float': 'float 3s ease-in-out infinite',
+            'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+          },
+          keyframes: {
+            float: {
+              '0%, 100%': { transform: 'translateY(0)' },
+              '50%': { transform: 'translateY(-10px)' },
+            }
+          }
+        }
+      }
+    }
+  </script>
+</head>
+<body class="bg-secondary text-white font-sans transition-colors duration-500 min-h-screen" id="body">
+  <!-- Navigation -->
+  <nav class="bg-secondary-dark p-4 sticky top-0 z-50 shadow-lg">
+    <div class="container mx-auto flex justify-between items-center">
+      <div class="flex items-center space-x-2">
+        <div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center">
+          <i class="fas fa-eye text-white"></i>
+        </div>
+        <span class="text-xl font-bold">Red Eye</span>
+      </div>
+      <div class="hidden md:flex space-x-6">
+        <a href="#projects" class="hover:text-primary transition">Projects</a>
+        <a href="#crypto" class="hover:text-primary transition">Crypto</a>
+        <a href="#skills" class="hover:text-primary transition">Skills</a>
+        <a href="#contact" class="hover:text-primary transition">Contact</a>
+      </div>
+      <div class="flex items-center space-x-4">
+        <button onclick="toggleTheme()" class="p-2 rounded-full bg-secondary hover:bg-primary transition">
+          <i class="fas fa-moon" id="theme-icon"></i>
+        </button>
+        <button class="md:hidden p-2 rounded-full bg-secondary hover:bg-primary transition" id="mobile-menu-button">
+          <i class="fas fa-bars"></i>
+        </button>
+      </div>
+    </div>
+    <!-- Mobile menu -->
+    <div class="md:hidden hidden bg-secondary-dark p-4" id="mobile-menu">
+      <div class="flex flex-col space-y-3">
+        <a href="#projects" class="hover:text-primary transition">Projects</a>
+        <a href="#crypto" class="hover:text-primary transition">Crypto</a>
+        <a href="#skills" class="hover:text-primary transition">Skills</a>
+        <a href="#contact" class="hover:text-primary transition">Contact</a>
+      </div>
+    </div>
+  </nav>
+  <!-- Hero Section -->
+  <section class="py-20 px-4">
+    <div class="container mx-auto flex flex-col md:flex-row items-center">
+      <div class="md:w-1/2 mb-10 md:mb-0">
+        <h1 class="text-5xl font-bold mb-4">👨‍💻 Red Eye</h1>
+        <h2 class="text-3xl text-primary mb-6">Vibe Coder & Crypto Enthusiast</h2>
+        <p class="text-lg mb-8 text-gray-300">Building innovative solutions at the intersection of AI, blockchain, and web technologies.</p>
+        <div class="flex space-x-4">
+          <a href="#projects" class="bg-primary hover:bg-primary-dark px-6 py-3 rounded-lg font-medium transition transform hover:scale-105">
+            View Projects
+          </a>
+          <a href="#contact" class="border border-primary text-primary hover:bg-primary hover:text-white px-6 py-3 rounded-lg font-medium transition transform hover:scale-105">
+            Contact Me
+          </a>
+        </div>
+      </div>
+      <div class="md:w-1/2 flex justify-center">
+        <div class="relative">
+          <div class="w-64 h-64 bg-primary rounded-full opacity-20 absolute -top-10 -left-10 animate-pulse-slow"></div>
+          <div class="w-64 h-64 bg-primary rounded-full opacity-20 absolute -bottom-10 -right-10 animate-pulse-slow"></div>
+          <img src="https://images.unsplash.com/photo-1571171637578-41bc2dd41cd2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
+               alt="Developer"
+               class="relative z-10 w-64 h-64 rounded-full object-cover border-4 border-primary shadow-xl animate-float">
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Projects -->
+  <section id="projects" class="py-16 bg-secondary-dark px-4">
+    <div class="container mx-auto">
+      <h2 class="text-3xl font-bold mb-12 text-center">
+        <span class="border-b-4 border-primary pb-2">🚀 My Projects</span>
+      </h2>
+      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <!-- Project 1 -->
+        <div class="bg-secondary rounded-xl overflow-hidden shadow-lg transform transition hover:scale-105 hover:shadow-xl">
+          <div class="h-48 bg-gradient-to-r from-primary to-purple-600 flex items-center justify-center">
+            <i class="fas fa-credit-card text-white text-6xl"></i>
+          </div>
+          <div class="p-6">
+            <h3 class="text-xl font-bold mb-2">AI Card Generator</h3>
+            <p class="text-gray-300 mb-4">Generate test cards, validate BINs, simulate fraud with 1-click. Perfect for developers and QA teams.</p>
+            <div class="flex flex-wrap gap-2 mb-4">
+              <span class="bg-primary-dark text-xs px-3 py-1 rounded-full">AI</span>
+              <span class="bg-primary-dark text-xs px-3 py-1 rounded-full">Fintech</span>
+              <span class="bg-primary-dark text-xs px-3 py-1 rounded-full">Security</span>
+            </div>
+            <a href="#" class="text-primary hover:underline font-medium">View Project →</a>
+          </div>
+        </div>
+        <!-- Project 2 -->
+        <div class="bg-secondary rounded-xl overflow-hidden shadow-lg transform transition hover:scale-105 hover:shadow-xl">
+          <div class="h-48 bg-gradient-to-r from-blue-500 to-blue-700 flex items-center justify-center">
+            <i class="fab fa-telegram text-white text-6xl"></i>
+          </div>
+          <div class="p-6">
+            <h3 class="text-xl font-bold mb-2">Crypto Tracker Bot</h3>
+            <p class="text-gray-300 mb-4">Live price bot for Telegram using CoinGecko API with customizable alerts and portfolio tracking.</p>
+            <div class="flex flex-wrap gap-2 mb-4">
+              <span class="bg-primary-dark text-xs px-3 py-1 rounded-full">Crypto</span>
+              <span class="bg-primary-dark text-xs px-3 py-1 rounded-full">Telegram</span>
+              <span class="bg-primary-dark text-xs px-3 py-1 rounded-full">API</span>
+            </div>
+            <a href="#" class="text-primary hover:underline font-medium">View Project →</a>
+          </div>
+        </div>
+        <!-- Project 3 -->
+        <div class="bg-secondary rounded-xl overflow-hidden shadow-lg transform transition hover:scale-105 hover:shadow-xl">
+          <div class="h-48 bg-gradient-to-r from-green-500 to-green-700 flex items-center justify-center">
+            <i class="fas fa-wallet text-white text-6xl"></i>
+          </div>
+          <div class="p-6">
+            <h3 class="text-xl font-bold mb-2">DeFi Dashboard</h3>
+            <p class="text-gray-300 mb-4">Track your DeFi investments across multiple chains with real-time analytics and performance metrics.</p>
+            <div class="flex flex-wrap gap-2 mb-4">
+              <span class="bg-primary-dark text-xs px-3 py-1 rounded-full">DeFi</span>
+              <span class="bg-primary-dark text-xs px-3 py-1 rounded-full">Blockchain</span>
+              <span class="bg-primary-dark text-xs px-3 py-1 rounded-full">Analytics</span>
+            </div>
+            <a href="#" class="text-primary hover:underline font-medium">View Project →</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Skills -->
+  <section id="skills" class="py-16 px-4">
+    <div class="container mx-auto">
+      <h2 class="text-3xl font-bold mb-12 text-center">
+        <span class="border-b-4 border-primary pb-2">🛠️ My Skills</span>
+      </h2>
+      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+        <!-- Skill 1 -->
+        <div class="bg-secondary rounded-xl p-6 text-center shadow-lg hover:shadow-primary/20 transition">
+          <div class="w-20 h-20 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
+            <i class="fab fa-js text-white text-3xl"></i>
+          </div>
+          <h3 class="text-xl font-bold mb-2">JavaScript</h3>
+          <p class="text-gray-300">Modern ES6+, Node.js, Express, React, Vue</p>
+          <div class="mt-4 h-2 bg-gray-700 rounded-full">
+            <div class="h-2 bg-primary rounded-full" style="width: 90%"></div>
+          </div>
+        </div>
+        <!-- Skill 2 -->
+        <div class="bg-secondary rounded-xl p-6 text-center shadow-lg hover:shadow-primary/20 transition">
+          <div class="w-20 h-20 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
+            <i class="fas fa-server text-white text-3xl"></i>
+          </div>
+          <h3 class="text-xl font-bold mb-2">Backend</h3>
+          <p class="text-gray-300">Node.js, Python, Django, REST APIs, GraphQL</p>
+          <div class="mt-4 h-2 bg-gray-700 rounded-full">
+            <div class="h-2 bg-primary rounded-full" style="width: 85%"></div>
+          </div>
+        </div>
+        <!-- Skill 3 -->
+        <div class="bg-secondary rounded-xl p-6 text-center shadow-lg hover:shadow-primary/20 transition">
+          <div class="w-20 h-20 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
+            <i class="fab fa-ethereum text-white text-3xl"></i>
+          </div>
+          <h3 class="text-xl font-bold mb-2">Blockchain</h3>
+          <p class="text-gray-300">Solidity, Web3.js, Ethers.js, Smart Contracts</p>
+          <div class="mt-4 h-2 bg-gray-700 rounded-full">
+            <div class="h-2 bg-primary rounded-full" style="width: 80%"></div>
+          </div>
+        </div>
+        <!-- Skill 4 -->
+        <div class="bg-secondary rounded-xl p-6 text-center shadow-lg hover:shadow-primary/20 transition">
+          <div class="w-20 h-20 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
+            <i class="fas fa-robot text-white text-3xl"></i>
+          </div>
+          <h3 class="text-xl font-bold mb-2">AI/ML</h3>
+          <p class="text-gray-300">Python, TensorFlow, NLP, Computer Vision</p>
+          <div class="mt-4 h-2 bg-gray-700 rounded-full">
+            <div class="h-2 bg-primary rounded-full" style="width: 75%"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Live Crypto Prices -->
+  <section id="crypto" class="py-16 bg-secondary-dark px-4">
+    <div class="container mx-auto">
+      <h2 class="text-3xl font-bold mb-12 text-center">
+        <span class="border-b-4 border-primary pb-2">📈 Live Crypto Prices</span>
+      </h2>
+      <div class="mb-8 flex justify-center">
+        <div class="relative w-full max-w-md">
+          <input type="text" id="crypto-search" placeholder="Search cryptocurrencies..."
+                 class="w-full bg-secondary border border-gray-600 rounded-lg py-3 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-primary">
+          <i class="fas fa-search absolute left-3 top-3.5 text-gray-400"></i>
+        </div>
+      </div>
+      <div id="crypto-prices" class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4 mb-12"></div>
+      <div class="bg-white rounded-xl p-6 shadow-lg">
+        <div class="flex justify-between items-center mb-4">
+          <h3 class="text-2xl font-bold text-gray-800">Bitcoin (BTC) 7-Day Chart</h3>
+          <div class="flex space-x-2">
+            <button class="bg-gray-200 hover:bg-gray-300 px-3 py-1 rounded text-sm text-gray-800" onclick="updateChart('7')">7D</button>
+            <button class="bg-gray-200 hover:bg-gray-300 px-3 py-1 rounded text-sm text-gray-800" onclick="updateChart('30')">30D</button>
+            <button class="bg-gray-200 hover:bg-gray-300 px-3 py-1 rounded text-sm text-gray-800" onclick="updateChart('90')">90D</button>
+          </div>
+        </div>
+        <canvas id="btcChart" class="w-full h-80"></canvas>
+      </div>
+    </div>
+  </section>
+  <!-- Contact -->
+  <section id="contact" class="py-16 px-4">
+    <div class="container mx-auto max-w-4xl">
+      <h2 class="text-3xl font-bold mb-12 text-center">
+        <span class="border-b-4 border-primary pb-2">📬 Contact Me</span>
+      </h2>
+      <div class="bg-secondary rounded-xl shadow-lg overflow-hidden">
+        <div class="md:flex">
+          <div class="md:w-1/2 bg-gradient-to-br from-primary to-purple-600 p-8 text-white">
+            <h3 class="text-2xl font-bold mb-4">Let's work together</h3>
+            <p class="mb-6">Have a project in mind or want to discuss potential opportunities? Feel free to reach out!</p>
+            <div class="space-y-4">
+              <div class="flex items-center space-x-3">
+                <i class="fas fa-envelope"></i>
+                <span>contact@redeye.dev</span>
+              </div>
+              <div class="flex items-center space-x-3">
+                <i class="fab fa-telegram"></i>
+                <span>@redeyecoder</span>
+              </div>
+              <div class="flex items-center space-x-3">
+                <i class="fab fa-github"></i>
+                <span>github.com/redeye</span>
+              </div>
+            </div>
+            <div class="mt-8 flex space-x-4">
+              <a href="#" class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center hover:bg-white/30 transition">
+                <i class="fab fa-twitter"></i>
+              </a>
+              <a href="#" class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center hover:bg-white/30 transition">
+                <i class="fab fa-linkedin-in"></i>
+              </a>
+              <a href="#" class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center hover:bg-white/30 transition">
+                <i class="fab fa-github"></i>
+              </a>
+            </div>
+          </div>
+          <div class="md:w-1/2 p-8">
+            <form class="space-y-4">
+              <div>
+                <label for="name" class="block text-sm font-medium mb-1">Name</label>
+                <input type="text" id="name" class="w-full bg-secondary border border-gray-600 rounded-lg py-2 px-3 focus:outline-none focus:ring-2 focus:ring-primary">
+              </div>
+              <div>
+                <label for="email" class="block text-sm font-medium mb-1">Email</label>
+                <input type="email" id="email" class="w-full bg-secondary border border-gray-600 rounded-lg py-2 px-3 focus:outline-none focus:ring-2 focus:ring-primary">
+              </div>
+              <div>
+                <label for="message" class="block text-sm font-medium mb-1">Message</label>
+                <textarea id="message" rows="4" class="w-full bg-secondary border border-gray-600 rounded-lg py-2 px-3 focus:outline-none focus:ring-2 focus:ring-primary"></textarea>
+              </div>
+              <button type="submit" class="w-full bg-primary hover:bg-primary-dark py-3 rounded-lg font-medium transition transform hover:scale-105">
+                Send Message
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Footer -->
+  <footer class="bg-secondary-dark py-8 px-4">
+    <div class="container mx-auto">
+      <div class="flex flex-col md:flex-row justify-between items-center">
+        <div class="flex items-center space-x-2 mb-4 md:mb-0">
+          <div class="w-8 h-8 bg-primary rounded-full flex items-center justify-center">
+            <i class="fas fa-eye text-white text-sm"></i>
+          </div>
+          <span class="font-bold">Red Eye</span>
+        </div>
+        <div class="flex space-x-6">
+          <a href="#" class="hover:text-primary transition">Home</a>
+          <a href="#projects" class="hover:text-primary transition">Projects</a>
+          <a href="#crypto" class="hover:text-primary transition">Crypto</a>
+          <a href="#contact" class="hover:text-primary transition">Contact</a>
+        </div>
+      </div>
+      <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
+        <p>© 2023 Red Eye. All rights reserved.</p>
+      </div>
+    </div>
+  </footer>
+  <script>
+    // Theme toggle
+    function toggleTheme() {
+      const body = document.getElementById('body');
+      const themeIcon = document.getElementById('theme-icon');
+      body.classList.toggle('bg-secondary');
+      body.classList.toggle('bg-gray-100');
+      body.classList.toggle('text-white');
+      body.classList.toggle('text-gray-800');
+      if (themeIcon.classList.contains('fa-moon')) {
+        themeIcon.classList.remove('fa-moon');
+        themeIcon.classList.add('fa-sun');
+      } else {
+        themeIcon.classList.remove('fa-sun');
+        themeIcon.classList.add('fa-moon');
+      }
+    }
+    // Mobile menu toggle
+    const mobileMenuButton = document.getElementById('mobile-menu-button');
+    const mobileMenu = document.getElementById('mobile-menu');
+    mobileMenuButton.addEventListener('click', () => {
+      mobileMenu.classList.toggle('hidden');
+    });
+    // Crypto data
+    const ids = [
+      "bitcoin", "ethereum", "binancecoin", "dogecoin", "solana",
+      "cardano", "polkadot", "litecoin", "tron", "avalanche",
+      "ripple", "chainlink", "stellar", "uniswap", "polygon"
+    ];
+    const logos = {
+      bitcoin: "https://cryptologos.cc/logos/bitcoin-btc-logo.png",
+      ethereum: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
+      binancecoin: "https://cryptologos.cc/logos/binance-coin-bnb-logo.png",
+      dogecoin: "https://cryptologos.cc/logos/dogecoin-doge-logo.png",
+      solana: "https://cryptologos.cc/logos/solana-sol-logo.png",
+      cardano: "https://cryptologos.cc/logos/cardano-ada-logo.png",
+      polkadot: "https://cryptologos.cc/logos/polkadot-new-dot-logo.png",
+      litecoin: "https://cryptologos.cc/logos/litecoin-ltc-logo.png",
+      tron: "https://cryptologos.cc/logos/tron-trx-logo.png",
+      avalanche: "https://cryptologos.cc/logos/avalanche-avax-logo.png",
+      ripple: "https://cryptologos.cc/logos/xrp-xrp-logo.png",
+      chainlink: "https://cryptologos.cc/logos/chainlink-link-logo.png",
+      stellar: "https://cryptologos.cc/logos/stellar-xlm-logo.png",
+      uniswap: "https://cryptologos.cc/logos/uniswap-uni-logo.png",
+      polygon: "https://cryptologos.cc/logos/polygon-matic-logo.png"
+    };
+    let btcChart = null;
+    async function getCryptoPrices() {
+      const priceDiv = document.getElementById("crypto-prices");
+      const searchInput = document.getElementById("crypto-search");
+      const searchTerm = searchInput ? searchInput.value.toLowerCase() : '';
+      try {
+        const url = `https://api.coingecko.com/api/v3/simple/price?ids=${ids.join(',')}&vs_currencies=usd&include_24hr_change=true`;
+        const res = await fetch(url);
+        const data = await res.json();
+        priceDiv.innerHTML = "";
+        ids.forEach(id => {
+          const coin = data[id];
+          if (!coin) return;
+          const name = id.charAt(0).toUpperCase() + id.slice(1);
+          if (searchTerm && !name.toLowerCase().includes(searchTerm)) return;
+          const price = coin.usd !== undefined ? `$${coin.usd.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}` : 'N/A';
+          const change24h = coin.usd_24h_change !== undefined ? coin.usd_24h_change.toFixed(2) : 0;
+          const logo = logos[id];
+          const changeClass = change24h >= 0 ? 'text-green-500' : 'text-red-500';
+          const changeIcon = change24h >= 0 ? 'fa-arrow-up' : 'fa-arrow-down';
+          priceDiv.innerHTML += `
+            <div class="bg-secondary rounded-lg p-4 shadow hover:shadow-lg transition">
+              <div class="flex items-center space-x-3 mb-2">
+                <img src="${logo}" alt="${name} Logo" class="w-8 h-8 rounded-full">
+                <div>
+                  <strong>${name}</strong>
+                  <div class="text-xs text-gray-400">${id.toUpperCase()}</div>
+                </div>
+              </div>
+              <div class="flex justify-between items-center">
+                <span class="font-medium">${price}</span>
+                <span class="text-sm ${changeClass}">
+                  <i class="fas ${changeIcon}"></i> ${Math.abs(change24h)}%
+                </span>
+              </div>
+            </div>`;
+        });
+        if (priceDiv.innerHTML === "") {
+          priceDiv.innerHTML = `<div class="col-span-full text-center py-8 text-gray-400">No cryptocurrencies found matching "${searchTerm}"</div>`;
+        }
+      } catch (err) {
+        console.error("Price Fetch Error:", err);
+        priceDiv.innerHTML = `
+          <div class="col-span-full text-center py-8">
+            <div class="inline-block bg-red-500/20 text-red-500 px-4 py-2 rounded-lg">
+              <i class="fas fa-exclamation-triangle mr-2"></i> Failed to fetch prices. Try again shortly.
+            </div>
+          </div>`;
+      }
+    }
+    async function drawChart(days = '7') {
+      try {
+        const res = await fetch(`https://api.coingecko.com/api/v3/coins/bitcoin/market_chart?vs_currency=usd&days=${days}`);
+        const data = await res.json();
+        // Process data
+        const prices = data.prices;
+        const labels = [];
+        const values = [];
+        // Reduce data points for better performance with large datasets
+        const step = Math.max(1, Math.floor(prices.length / 30));
+        for (let i = 0; i < prices.length; i += step) {
+          const date = new Date(prices[i][0]);
+          labels.push(date.toLocaleDateString());
+          values.push(prices[i][1]);
+        }
+        // Get current theme
+        const isDark = document.getElementById('body').classList.contains('bg-secondary');
+        // Get or create chart
+        const ctx = document.getElementById('btcChart').getContext('2d');
+        if (btcChart) {
+          btcChart.data.labels = labels;
+          btcChart.data.datasets[0].data = values;
+          btcChart.update();
+        } else {
+          btcChart = new Chart(ctx, {
+            type: 'line',
+            data: {
+              labels,
+              datasets: [{
+                label: 'Bitcoin Price (USD)',
+                data: values,
+                fill: true,
+                backgroundColor: 'rgba(109, 40, 217, 0.1)',
+                borderColor: 'rgba(109, 40, 217, 1)',
+                borderWidth: 2,
+                pointRadius: 0,
+                tension: 0.4
+              }]
+            },
+            options: {
+              responsive: true,
+              maintainAspectRatio: false,
+              plugins: {
+                legend: {
+                  display: false
+                },
+                tooltip: {
+                  mode: 'index',
+                  intersect: false,
+                  backgroundColor: isDark ? '#1e293b' : '#ffffff',
+                  titleColor: isDark ? '#ffffff' : '#000000',
+                  bodyColor: isDark ? '#e2e8f0' : '#4b5563',
+                  borderColor: isDark ? '#334155' : '#e5e7eb',
+                  borderWidth: 1,
+                  padding: 12,
+                  callbacks: {
+                    label: function(context) {
+                      return `$${context.parsed.y.toLocaleString()}`;
+                    }
+                  }
+                }
+              },
+              scales: {
+                x: {
+                  grid: {
+                    display: false,
+                    color: isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
+                  },
+                  ticks: {
+                    color: isDark ? '#94a3b8' : '#64748b'
+                  }
+                },
+                y: {
+                  grid: {
+                    color: isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
+                  },
+                  ticks: {
+                    color: isDark ? '#94a3b8' : '#64748b',
+                    callback: function(value) {
+                      return '$' + value.toLocaleString();
+                    }
+                  }
+                }
+              }
+            }
+          });
+        }
+      } catch (err) {
+        console.error("Chart Fetch Error:", err);
+      }
+    }
+    function updateChart(days) {
+      drawChart(days);
+    }
+    // Initialize
+    document.addEventListener('DOMContentLoaded', () => {
+      getCryptoPrices();
+      drawChart();
+      // Search functionality
+      const searchInput = document.getElementById('crypto-search');
+      if (searchInput) {
+        searchInput.addEventListener('input', () => {
+          getCryptoPrices();
+        });
+      }
+    });
+    // Update prices every minute
+    setInterval(getCryptoPrices, 60000);
+  </script>
+  <style>
+    /* Custom scrollbar */
+    ::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+    ::-webkit-scrollbar-track {
+      background: #1e293b;
+    }
+    ::-webkit-scrollbar-thumb {
+      background: #6d28d9;
+      border-radius: 4px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: #5b21b6;
+    }
+    /* Smooth scrolling */
+    html {
+      scroll-behavior: smooth;
+    }
+    /* Animation for crypto cards */
+    @keyframes fade-in {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .animate-fade-in {
+      animation: fade-in 0.5s ease-in-out;
+    }
+    /* Gradient text */
+    .gradient-text {
+      background: linear-gradient(90deg, #6d28d9, #9333ea);
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+    }
+  </style>
+</body>
+</html>