Skip to content

Commit

Permalink
Merge pull request OpenTekHub#130 from priyashuu/gh-pages
Browse files Browse the repository at this point in the history 
change the ui of the navbar
  • Loading branch information
@Harish-2003
Harish-2003 authored Oct 12, 2024
2 parents 233ec5c + d15f195 commit 0fe671d
Show file tree
Hide file tree
Showing 3 changed files with 244 additions and 65 deletions.
176 changes: 123 additions & 53 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,51 +7,72 @@
<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:[email protected]&family=Gowun+Batang:wght@400;700&family=Mate+SC&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<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
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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />

<link rel="stylesheet" href="styles.css">
</head>
<!-- <ul class="menu-items">
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#faq">FAQs</a></li>
<li><a href="#">Contact Us</a></li>
</ul> -->

<body>

<nav class="navbar">
<div class="navbar-container container">
<div class="hamburger-lines" onclick="toggleMenu()">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
<ul class="menu-items">
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#faq">FAQs</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<h1 class="logo">OpenTekHub Blockchain </h1>
<div class="tabs-container">
<ul id="tabs" class="tabs">
<li class="tab "><a href="#" class="color">Home</a></li>
<li class="tab"><a href="#about">About</a></li>
<li class="tab"><a href="#faq">FAQS</a></li>
<li class="tab"><a href="#">Contact Us</a></li>
<li id="cursor" class="cursor"></li>
</ul>
</div>
<div class="theme-switch" id="theme-switch"></div>
<h1 class="logo">OpenTekHub Blockchain Repository</h1>
</div>

</nav>


<div class="central">
<p class="tagline">Explore the Blockchain implementation and predict the latest cryptocurrency prices.</p>

<section id="crypto-price-predictor">
<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">
<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>
<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" alt="Telegram logo" id="Telegram">@TrackCryptoPriceBot</a></h3>
<h3><a href="https://t.me/trackingcryptopricerbot" class="bot-link"><img src="public/Telegram.png"
alt="Telegram logo" id="Telegram">@TrackCryptoPriceBot</a></h3>
</div>
</section>
</div>
Expand All @@ -60,9 +81,9 @@ <h3><a href="https://t.me/trackingcryptopricerbot" class="bot-link"><img src="pu
<header class="header">
<h1>About Us</h1>
</header>

<section id="about" class="about section">

<video autoplay muted loop class="background-video">
<source src="public/about-bgvideo.mp4" type="video/mp4">
</video>
Expand All @@ -73,12 +94,12 @@ <h1>About Us</h1>
</p>
<div class="content">
<p>
At OpenTekHub, we are passionate about leveraging blockchain technology to create innovative
solutions that empower industries and individuals. Our Blockchain repository is part of the
Winter of Blockchain (WoB) initiative, designed to provide an open-source platform for
learning and collaboration within the blockchain community. With a focus on developing
cryptocurrency features like price prediction, we aim to create a comprehensive educational
resource for developers and blockchain enthusiasts alike. Join us on our journey to explore,
At OpenTekHub, we are passionate about leveraging blockchain technology to create innovative
solutions that empower industries and individuals. Our Blockchain repository is part of the
Winter of Blockchain (WoB) initiative, designed to provide an open-source platform for
learning and collaboration within the blockchain community. With a focus on developing
cryptocurrency features like price prediction, we aim to create a comprehensive educational
resource for developers and blockchain enthusiasts alike. Join us on our journey to explore,
contribute, and innovate in the realm of blockchain technology.
</p>
</div>
Expand All @@ -90,25 +111,29 @@ <h1>About Us</h1>
<div class="card">
<span>01</span>
<h4>Cryptocurrency Price Prediction</h4>
<p>Utilize advanced algorithms to predict cryptocurrency prices, enabling informed investment decisions.</p>
<p>Utilize advanced algorithms to predict cryptocurrency prices, enabling informed investment decisions.
</p>
</div>

<div class="card">
<span>02</span>
<h4>Telegram Bot Integration</h4>
<p>Engage users with a Telegram bot that provides real-time updates on cryptocurrency prices and project developments.</p>
<p>Engage users with a Telegram bot that provides real-time updates on cryptocurrency prices and project
developments.</p>
</div>

<div class="card">
<span>03</span>
<h4>Open-source Collaboration</h4>
<p>Join our open-source platform to collaborate on blockchain projects, sharing knowledge and contributing to innovations.</p>
<p>Join our open-source platform to collaborate on blockchain projects, sharing knowledge and
contributing to innovations.</p>
</div>

<div class="card">
<span>04</span>
<h4>Educational Resources</h4>
<p>Access comprehensive educational materials and tutorials to enhance your understanding of blockchain technology.</p>
<p>Access comprehensive educational materials and tutorials to enhance your understanding of blockchain
technology.</p>
</div>
</div>
</section>
Expand All @@ -127,44 +152,56 @@ <h1>Frequently Asked Questions</h1>
<div class='faq'>
<input id='faq-a' type='checkbox'>
<label for='faq-a'>
<p class="faq-heading">🤔 What is cryptocurrency?</p>
<div class='faq-arrow'></div>
<p class="faq-text">Cryptocurrency is a type of digital or virtual currency that uses cryptography for security. It operates on decentralized networks based on blockchain technology, making it secure and difficult to counterfeit.</p>
<p class="faq-heading">🤔 What is cryptocurrency?</p>
<div class='faq-arrow'></div>
<p class="faq-text">Cryptocurrency is a type of digital or virtual currency that uses cryptography for
security. It operates on decentralized networks based on blockchain technology, making it secure and
difficult to counterfeit.</p>
</label>

<input id='faq-b' type='checkbox'>
<label for='faq-b'>
<p class="faq-heading">📜 What is blockchain technology?</p>
<div class='faq-arrow'></div>
<p class="faq-text">Blockchain is a distributed ledger technology that securely records transactions across many computers. This ensures that the recorded transactions cannot be altered retroactively, providing transparency and security.</p>
<p class="faq-heading">📜 What is blockchain technology?</p>
<div class='faq-arrow'></div>
<p class="faq-text">Blockchain is a distributed ledger technology that securely records transactions
across many computers. This ensures that the recorded transactions cannot be altered retroactively,
providing transparency and security.</p>
</label>

<input id='faq-c' type='checkbox'>
<label for='faq-c'>
<p class="faq-heading">📈 What is the cryptocurrency price predictor feature?</p>
<div class='faq-arrow'></div>
<p class="faq-text">The cryptocurrency price predictor feature uses historical data and machine learning algorithms to forecast future prices of various cryptocurrencies, helping users make informed investment decisions.</p>
<p class="faq-heading">📈 What is the cryptocurrency price predictor feature?</p>
<div class='faq-arrow'></div>
<p class="faq-text">The cryptocurrency price predictor feature uses historical data and machine learning
algorithms to forecast future prices of various cryptocurrencies, helping users make informed
investment decisions.</p>
</label>

<input id='faq-d' type='checkbox'>
<label for='faq-d'>
<p class="faq-heading">🤖 How does the Telegram bot work?</p>
<div class='faq-arrow'></div>
<p class="faq-text">The Telegram bot allows users to track cryptocurrency prices and receive updates directly in their Telegram app. Users can query prices, receive alerts on significant changes, and interact with the bot for the latest market information.</p>
<p class="faq-heading">🤖 How does the Telegram bot work?</p>
<div class='faq-arrow'></div>
<p class="faq-text">The Telegram bot allows users to track cryptocurrency prices and receive updates
directly in their Telegram app. Users can query prices, receive alerts on significant changes, and
interact with the bot for the latest market information.</p>
</label>

<input id='faq-e' type='checkbox'>
<label for='faq-e'>
<p class="faq-heading">🛡️ Is participating in this project safe?</p>
<div class='faq-arrow'></div>
<p class="faq-text">Absolutely! Contributing to this open-source project is safe and secure. Your contributions and interactions within the community are protected, ensuring a collaborative environment.</p>
<p class="faq-heading">🛡️ Is participating in this project safe?</p>
<div class='faq-arrow'></div>
<p class="faq-text">Absolutely! Contributing to this open-source project is safe and secure. Your
contributions and interactions within the community are protected, ensuring a collaborative
environment.</p>
</label>

<input id='faq-f' type='checkbox'>
<label for='faq-f'>
<p class="faq-heading">🛠️ What do I need to contribute?</p>
<div class='faq-arrow'></div>
<p class="faq-text">To contribute, you don't need to provide access to your personal accounts or sensitive information. All you need is a GitHub account and some enthusiasm for blockchain and cryptocurrency!</p>
<p class="faq-heading">🛠️ What do I need to contribute?</p>
<div class='faq-arrow'></div>
<p class="faq-text">To contribute, you don't need to provide access to your personal accounts or
sensitive information. All you need is a GitHub account and some enthusiasm for blockchain and
cryptocurrency!</p>
</label>
</div>
</section>
Expand All @@ -174,7 +211,8 @@ <h1>Frequently Asked Questions</h1>
<div class="left">
<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"><i class="fa-brands fa-github"></i>BlockChain Repository</a>
<a href="https://github.com/OpenTekHub/blockchain" target="_blank"><i
class="fa-brands fa-github"></i>BlockChain Repository</a>
</div>

<div class="right">
Expand All @@ -183,12 +221,44 @@ <h2>Connect with us</h2>
<a href="/"><i class="fa-brands fa-twitter"></i></i></a>
<a href="/"><i class="fa-brands fa-facebook"></i></a>
</div>

</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="script.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const tabs = document.querySelectorAll('.tab');
const cursor = document.querySelector('.cursor');
const tabsContainer = document.querySelector('.tabs');

tabs.forEach(tab => {
tab.addEventListener('mouseover', function () {

const tabRect = tab.getBoundingClientRect();
const containerRect = tabsContainer.getBoundingClientRect();


cursor.style.width = `${tabRect.width}px`;
cursor.style.left = `${tabRect.left - containerRect.left}px`;
cursor.style.opacity = 1;

tab.querySelector('a').style.color = 'white';
});

tab.addEventListener('mouseleave', function () {

cursor.style.opacity = 0;


tab.querySelector('a').style.color = 'black';
});
});
});
</script>


</body>

</html>
</html>
51 changes: 50 additions & 1 deletion script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -293,6 +293,55 @@ document.addEventListener('DOMContentLoaded', () => {
delay: 1.9
});
});
// =======





const tabs = document.querySelectorAll('.tab');
const cursor = document.getElementById('cursor');

tabs.forEach(tab => {
tab.addEventListener('mouseenter', () => {
const tabCoords = tab.getBoundingClientRect();
cursor.style.width = `${tabCoords.width}px`;
cursor.style.transform = `translate(${tabCoords.left}px, -50%)`;
cursor.style.opacity = 1; // Show cursor
});

tab.addEventListener('mouseleave', () => {
cursor.style.opacity = 0; // Hide cursor
});
});


document.addEventListener('DOMContentLoaded', function () {
const tabs = document.querySelectorAll('.tab');
const cursor = document.querySelector('.cursor');
const tabsContainer = document.querySelector('.tabs');

tabs.forEach(tab => {
tab.addEventListener('mouseover', function () {
// Get the tab's bounding box
const tabRect = tab.getBoundingClientRect();
const containerRect = tabsContainer.getBoundingClientRect();

// Move the cursor to the hovered tab
cursor.style.width = `${tabRect.width}px`; // Use backticks for template literals
cursor.style.left = `${tabRect.left - containerRect.left}px`; // Use backticks for left calculation
cursor.style.opacity = 1; // Show the cursor

// Change tab text to white while the cursor is over it
tab.querySelector('a').style.color = 'blue'; // Ensure the anchor's color changes
});

tab.addEventListener('mouseleave', function () {
// Hide the cursor after hover ends
cursor.style.opacity = 0;

// Reset the tab text color to black
tab.querySelector('a').style.color = 'white'; // Reset anchor's color
});
});
});

Loading

0 comments on commit 0fe671d

Please sign in to comment.