OpenTekHub · Harish-2003 · Oct 2, 2024 · Oct 2, 2024
diff --git a/index.html b/index.html
@@ -1,3 +1,4 @@
+
 <!DOCTYPE html>
 <html lang="en">
 
@@ -6,45 +7,100 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>OpenTekHub Blockchain Repo</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Gowun+Batang:wght@400;700&family=Mate+SC&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Monofett&family=Teko:wght@300..700&family=Handjet:wght@100..900&family=Fredoka:wght@300..700&family=Gowun+Batang:wght@400;700&family=Mate+SC&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="styles.css">
 </head>
 
+
+
 <body>
+    <script>
+          document.addEventListener('DOMContentLoaded', function() {
+        const fadeElements = document.querySelectorAll('.fade-in');
+
+        function checkVisibility() {
+            const triggerBottom = window.innerHeight / 5 * 4;
+
+            fadeElements.forEach(element => {
+                const box = element.getBoundingClientRect();
+                if (box.top < triggerBottom) {
+                    element.classList.add('visible');
+                } else {
+                    element.classList.remove('visible');
+                }
+            });
+        }
+
+        window.addEventListener('scroll', checkVisibility);
+        checkVisibility(); 
+    });
+         document.addEventListener("DOMContentLoaded", function() {
+        const text = "Explore the Blockchain implementation and predict the latest cryptocurrency prices.";
+        const container = document.getElementsByClassName("tagline")[0];  
+
+        function animatetext() {
+            [...text].forEach((letter, index) => {
+                const span = document.createElement('span');
+                span.textContent = letter;
+                span.style.opacity = 0; 
+                span.style.transition = 'opacity 0.5s';  
+                container.appendChild(span);
+
+                setTimeout(() => {
+                    span.style.opacity = 1;  
+                }, index * 100);  
+            });
+        }
+
+        animatetext();
+    });
+
+    </script>
+
     <header class="header">
         <h1>OpenTekHub Blockchain Repository</h1>
+        <button class="contract">Contact Us</button>
     </header>
 
-    <div class="central">
-        <p class="tagline">Explore the Blockchain implementation and predict the latest cryptocurrency prices.</p>
+    <h1 id="main">Discover the Latest <span>Airdrop$</span> <br><span id="space"> and</span > <span> crypto</span> Prices!</h1>
+    <img src="public/image1.png" alt="icons" id="icon1">
+    <img src="public/airdrop.png" alt="icons" id="icon2">
+
+    <div class="tagline"></div>
 
+    <div class="central">
         <section id="crypto-price-predictor">
-            <h2>Crypto Price Predictor</h2>
+            <img src="public/predict.png" id="icon3" alt="prediction icon">
+            <h2 >Crypto Price Predictor</h2>
             <div id="crypto-form">
                 <label for="crypto">Enter Cryptocurrency Symbol (e.g., BITCOIN(BTC), ETHERUM(ETH)):</label>
-                <input type="text" id="crypto" name="crypto">
-                <button id="predict-btn">Predict Price</button>
+                <input type="text" id="crypto" name="crypto" autocomplete="off" >
                 <div id="crypto-suggestions"></div>
+                <button id="predict-btn">Predict Price</button>
+
+
+
             </div>
             <div id="price-result">
                 <h3>Predicted Price:</h3>
                 <p id="price"></p>
+                <div id="market-details"></div> 
+
             </div>
             <div id="telegram-bot">
-                <p class="bot-text">Track prices with our Telegram bot</p>
-                <h3><a href="https://t.me/trackingcryptopricerbot" class="bot-link">@TrackCryptoPriceBot</a></h3>
+               <p class="bot-text"> Track prices with our Telegram bot</p>
+
+                <h3><a href="https://t.me/trackingcryptopricerbot"  class="bot-link"> <img src="public/telegram.png" onclick="" id="Telegram" alt="telegram-bot">@TrackCryptoPriceBot</a></h3>
             </div>
         </section>
     </div>
+    <div id="airdrop-section">
+        <h3>Upcoming Airdrops</h3>
+        <div id="airdrop-list"></div>
+    </div>
 
-    <section id="repo-info">
-        <h2>About the Repository</h2>
-        <p>This repository demonstrates blockchain prices using api and javascript.</p>
-        <a href="https://github.com/OpenTekHub/blockchain" target="_blank">Visit the Repo</a>
-    </section>
-
-    <script src="script.js"></script>
+  <script src="script.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/public/Telegram.png b/public/Telegram.png
diff --git a/public/airdrop.png b/public/airdrop.png
diff --git a/public/image1.png b/public/image1.png
diff --git a/public/predict.png b/public/predict.png
diff --git a/script.js b/script.js
@@ -104,6 +104,38 @@ const cryptoMap = {
     'LISTA': 'lista',
     'RENDER': 'render',
 };
+const airdrops = [
+    {
+        name: 'MoonToken Airdrop',
+        symbol: 'MOON',
+        date: 'October 10, 2024',
+        reward: '100 MOON tokens'
+    },
+    {
+        name: 'SolarCoin Airdrop',
+        symbol: 'SOLAR',
+        date: 'October 15, 2024',
+        reward: '50 SOLAR tokens'
+    },
+    {
+        name: 'Stellar Drop',
+        symbol: 'STELLAR',
+        date: 'October 20, 2024',
+        reward: '75 STELLAR tokens'
+    },
+    {
+        name: 'MarsCoin Airdrop',
+        symbol: 'MARS',
+        date: 'October 25, 2024',
+        reward: '200 MARS tokens'
+    },
+    {
+        name: 'Venus Airdrop',
+        symbol: 'VENUS',
+        date: 'October 30, 2024',
+        reward: '150 VENUS tokens'
+    }
+];
 
 const cryptoInput = document.getElementById('crypto');
 const suggestionsBox = document.getElementById('crypto-suggestions');
@@ -158,3 +190,38 @@ document.getElementById('predict-btn').addEventListener('click', function() {
         document.getElementById("price").innerText = "Please enter a valid cryptocurrency symbol.";
     }
 });
+const text="Explore the Blockchain implementation and predict the latest cryptocurrency prices."
+const container=document.getElementsByClassName("tagline");
+function animatetext(){
+    [...text].forEach((letter,index)=>{
+        const span=document.createElement('span');
+        span.textContent=letter;
+        span.id=index;
+        container.appendChild(span);
+        setTimeout(()=>{
+            span.style.opacity = 1; 
+        }, index * 100);
+        })
+
+}
+function displayAirdrops() {
+    const airdropList = document.getElementById('airdrop-list');
+    airdropList.innerHTML = ''; 
+
+    airdrops.forEach(airdrop => {
+        const airdropItem = document.createElement('div');
+        airdropItem.className = 'airdrop-item';
+
+        airdropItem.innerHTML = `
+            <h4 style="color:#FFEB55;letter-spacing:2px">${airdrop.name} (${airdrop.symbol})</h4>
+            <p><strong>Date:</strong> ${airdrop.date}</p>
+            <p><strong>Reward:</strong> ${airdrop.reward}</p>
+        `;
+
+        airdropList.appendChild(airdropItem);
+    });
+}
+
+window.addEventListener('DOMContentLoaded', function() {
+    displayAirdrops();
+});