Skip to content

Commit

Permalink
Revert "changed the complete ui of the webpage and added a static air…
Browse files Browse the repository at this point in the history
…drop secion and contract button"
  • Loading branch information
Harish-2003 authored Oct 2, 2024
1 parent 4949921 commit d31af87
Show file tree
Hide file tree
Showing 7 changed files with 117 additions and 408 deletions.
90 changes: 17 additions & 73 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

<!DOCTYPE html>
<html lang="en">

Expand All @@ -7,100 +6,45 @@
<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=Bebas+Neue&family=Monofett&family=Teko:[email protected]&family=Handjet:[email protected]&family=Fredoka:[email protected]&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=Fredoka:[email protected]&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>

<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">
<p class="tagline">Explore the Blockchain implementation and predict the latest cryptocurrency prices.</p>

<section id="crypto-price-predictor">
<img src="public/predict.png" id="icon3" alt="prediction icon">
<h2 >Crypto Price Predictor</h2>
<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" autocomplete="off" >
<div id="crypto-suggestions"></div>
<input type="text" id="crypto" name="crypto">
<button id="predict-btn">Predict Price</button>



<div id="crypto-suggestions"></div>
</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"> <img src="public/telegram.png" onclick="" id="Telegram" alt="telegram-bot">@TrackCryptoPriceBot</a></h3>
<p class="bot-text">Track prices with our Telegram bot</p>
<h3><a href="https://t.me/trackingcryptopricerbot" class="bot-link">@TrackCryptoPriceBot</a></h3>
</div>
</section>
</div>
<div id="airdrop-section">
<h3>Upcoming Airdrops</h3>
<div id="airdrop-list"></div>
</div>

<script src="script.js"></script>
<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>
</body>

</html>
</html>
Binary file removed public/Telegram.png
Binary file not shown.
Binary file removed public/airdrop.png
Binary file not shown.
Binary file removed public/image1.png
Binary file not shown.
Binary file removed public/predict.png
Binary file not shown.
67 changes: 0 additions & 67 deletions script.js
Original file line number Diff line number Diff line change
Expand Up @@ -104,38 +104,6 @@ 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');
Expand Down Expand Up @@ -190,38 +158,3 @@ 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();
});
Loading

0 comments on commit d31af87

Please sign in to comment.