diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..155422b --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5503 +} \ No newline at end of file diff --git a/Assets/moon.png b/Assets/moon.png new file mode 100644 index 0000000..c39c90d Binary files /dev/null and b/Assets/moon.png differ diff --git a/Assets/sun.png b/Assets/sun.png new file mode 100644 index 0000000..9ad0caa Binary files /dev/null and b/Assets/sun.png differ diff --git a/index.html b/index.html index 26c7686..1b57325 100644 --- a/index.html +++ b/index.html @@ -12,39 +12,170 @@ -
-

OpenTekHub Blockchain Repository

-
+ +

Explore the Blockchain implementation and predict the latest cryptocurrency prices.

- +

Crypto Price Predictor

-
+ +

Predicted Price:

-

Track prices with our Telegram bot

-

@TrackCryptoPriceBot

+ +

Track prices with our Telegram bot

+

Telegram logo@TrackCryptoPriceBot

+ +
+

About Us

+
+ +
+ + +
+ +

+ Empowering Blockchain Innovations Through Technology +

+
+

+ 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. +

+
+
+ + +
+
+
+ 01 +

Cryptocurrency Price Prediction

+

Utilize advanced algorithms to predict cryptocurrency prices, enabling informed investment decisions.

+
+ +
+ 02 +

Telegram Bot Integration

+

Engage users with a Telegram bot that provides real-time updates on cryptocurrency prices and project developments.

+
+ +
+ 03 +

Open-source Collaboration

+

Join our open-source platform to collaborate on blockchain projects, sharing knowledge and contributing to innovations.

+
+ +
+ 04 +

Educational Resources

+

Access comprehensive educational materials and tutorials to enhance your understanding of blockchain technology.

+
+
+
+ + + +
+
+

Frequently Asked Questions

+
+ +

+ Explore commonly asked questions about OpenTekHub and discover how we support technology innovations. +

+ +
+ + + + + + + + + + + + + + + + + +
+
+
+

About the Repository

This repository demonstrates blockchain prices using api and javascript.

- Visit the Repo + BlockChain Repository
- \ No newline at end of file + diff --git a/public/Telegram.png b/public/Telegram.png new file mode 100644 index 0000000..d03a551 Binary files /dev/null and b/public/Telegram.png differ diff --git a/public/about-bgvideo.mp4 b/public/about-bgvideo.mp4 new file mode 100644 index 0000000..570700a Binary files /dev/null and b/public/about-bgvideo.mp4 differ diff --git a/public/github.png b/public/github.png new file mode 100644 index 0000000..b3902e3 Binary files /dev/null and b/public/github.png differ diff --git a/script.js b/script.js index 6748aca..cc6fc8b 100644 --- a/script.js +++ b/script.js @@ -1,3 +1,51 @@ +// Dark Mode Toggle Functionality +const themeSwitch = document.getElementById('theme-switch'); // Ensure this matches your HTML button's ID +const body = document.body; +const header = document.querySelector('header'); +const footer = document.querySelector('footer'); + +// Function to enable dark mode +function enableDarkMode() { + body.classList.add('dark-mode'); + header.classList.add('dark-mode'); + themeSwitch.classList.add('dark-theme'); // Update the switch appearance + footer.classList.add('dark-mode'); +} + +// Function to disable dark mode +function disableDarkMode() { + body.classList.remove('dark-mode'); + header.classList.remove('dark-mode'); + themeSwitch.classList.remove('dark-theme'); // Update the switch appearance + footer.classList.remove('dark-mode'); +} + +// Event listener for dark mode toggle button +themeSwitch.addEventListener('click', () => { + if (body.classList.contains('dark-mode')) { + disableDarkMode(); // Switch to light mode + localStorage.removeItem('dark-mode'); // Remove from local storage + } else { + enableDarkMode(); // Switch to dark mode + localStorage.setItem('dark-mode', 'enabled'); // Save in local storage + } +}); + +// Optional: Check the initial mode on page load and apply the correct theme based on local storage +if (localStorage.getItem('dark-mode') === 'enabled') { + enableDarkMode(); +} else { + disableDarkMode(); // Default to light mode on load if localStorage is empty +} + +// navbar hamburger +function toggleMenu() { + const menu = document.querySelector('.menu-items'); + const hamburger = document.querySelector('.hamburger-lines'); + menu.classList.toggle('menu-active'); + hamburger.classList.toggle('hamburger-active'); +} + // A map of symbols to their corresponding API names const cryptoMap = { // Major cryptocurrencies @@ -158,6 +206,7 @@ document.getElementById('predict-btn').addEventListener('click', function() { document.getElementById("price").innerText = "Please enter a valid cryptocurrency symbol."; } }); + // GSAP Animations document.addEventListener('DOMContentLoaded', () => { // Timeline for header and intro text animations @@ -244,3 +293,6 @@ document.addEventListener('DOMContentLoaded', () => { delay: 1.9 }); }); +======= + + diff --git a/styles.css b/styles.css index a303c82..f240431 100644 --- a/styles.css +++ b/styles.css @@ -12,13 +12,29 @@ body { justify-content: space-between; } +img{ + width:5vw; +} + +#Telegram{ + position:relative; + top:1.9vw +} + h1, h2, h3 { margin: 0; } +#git{ + position:relative; + top:1.4vw; + max-width: 4vw; + min-width:2vw; +} + .header { text-align: center; - background-color: #2E073F; + background: linear-gradient(135deg, rgb(36, 11, 54), rgb(195, 20, 50)); color: #EBD3F8; padding: 1.2rem; font-family: "Mate SC", serif; @@ -44,6 +60,10 @@ h1, h2, h3 { gap: 1rem; } +.central p{ + margin-top: 5rem; +} + #crypto-price-predictor { background: rgba(255, 255, 255, 0.1); border-radius: 15px; @@ -53,6 +73,8 @@ h1, h2, h3 { width: 95%; max-width: 400px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); + margin-top: 5rem; + margin-bottom: 3rem; } #crypto-price-predictor h2 { @@ -220,8 +242,6 @@ h1, h2, h3 { } } - - #telegram-bot { align-items: center; display: flex; @@ -237,4 +257,466 @@ h1, h2, h3 { .bot-text{ font-size: 1rem; margin-block: 0px; -} \ No newline at end of file +} + + +/* Here are the styles for the theme toggel */ +/* Theme switcher */ +.theme-switch { + display: inline-block; + width: 60px; + height: 30px; + border-radius: 30px; + background: linear-gradient(116deg, #ffffff, #a00101); + position: relative; + cursor: pointer; + transition: background 0.3s ease-in-out; + vertical-align: middle; +} + +.theme-switch::before { + content: ''; + position: absolute; + top: 3px; + left: 3px; /* Initial position for light mode */ + width: 24px; + height: 24px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + transition: left 0.3s ease-in-out, background-image 0.3s ease-in-out; + background-image: url('Assets/moon.png'); /* Icon for light mode */ +} + +.theme-switch.dark-theme { + background: linear-gradient(92deg, #ff0000, #ffffff); /* Background for dark mode */ +} + +.theme-switch.dark-theme::before { + left: 33px; /* Move the toggle to the right for dark mode */ + background-image: url('Assets/sun.png'); /* Icon for dark mode */ +} + +/* Other dark mode styles */ +.header.dark-mode { + background: linear-gradient(303deg, #000000, #500210); +} + +body.dark-mode{ + background: linear-gradient(303deg, #000000, #500210); + color: #ffecec; +} +p.tagline.dark-mode{ + color: #ffffff; +} + +/* About Section */ +#about { + position: relative; + overflow: clip; + background-color: rgba(255, 255, 255, 0.1); + padding: 10rem; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); +} + +.background-video { + position: absolute; + top: 50%; + left: 50%; + min-width: 100%; + min-height: 100%; + width: auto; + height: auto; + z-index: 1; + transform: translate(-50%, -50%); +} + +.overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 2; +} + +.tagline { + color: #FFFF00; + position: relative; + z-index: 3; + font-size: 35px; + text-shadow: 0 0 20px #dec6ff; +} + +#about .content p { + font-size: 1.2rem; + line-height: 1.6; + color: #ffffff; + position: relative; + z-index: 3; + text-align: center; + text-shadow: + 0 0 10px rgba(255, 255, 255, 1), + 0 0 20px rgba(255, 255, 255, 0.8), + 0 0 30px rgba(255, 255, 255, 0.6), + 0 0 40px rgba(255, 255, 255, 0.4), + 0 0 50px rgba(0, 255, 255, 0.6); +} + +/* Why Us Section */ +.why-us { + background-color: rgba(255, 255, 255, 0.05); + padding: 2rem 1rem; + border-radius: 15px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); +} + +.row { + margin-top: 5px; + margin-bottom: 40px; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin: 0 -0.5; +} + +.card { + background: #c18bff22; + border-radius: 10px; + padding: 1.5rem; + flex: 0 0 calc(50% - 1rem); + margin: 0.5rem; + color: #FFF; + transition: transform 0.3s ease; + display: block; + box-sizing: border-box; +} + +.card:hover { + background: rgba(28, 0, 46, 0.523); + transform: translateY(-5px); +} + +.card span{ + font-size: 30px; + font-weight: bold; +} + +.card h4 { + color: #FFEB55; + font-family: "Fredoka", sans-serif; + font-size: 1.2rem; +} + +.card p { + font-size: 0.9rem; +} + +/* FAQ section */ +#faq .tagline{ + color: #2E073F; + text-shadow: + 0 0 10px rgb(220, 171, 255), + 0 0 20px rgba(243, 230, 255, 0.8); + font-size: 15px; +} + +.faq-heading { + font-weight: 400; + font-size: 19px; + transition: text-indent 0.2s; + text-indent: 20px; + color: #c31432; +} + +.faq-text { + font-weight: 400; + color: #2E073F; + width: 95%; + padding-left: 20px; + margin-bottom: 10px; +} + +.faq { + width: auto; + margin: 0 auto; + background: #ffff00; + position: relative; + border: 1px solid #2E073F; + padding-top: 60px; /* Adjust according to your navbar height */ + margin-top: -60px; /* Negative margin to balance the spacing */ +} + +.faq label { + display: block; + position: relative; + overflow: hidden; + cursor: pointer; + height: 56px; + padding-top:1px; + background-color: #ffffcd; + border-bottom: 1px solid #2E073F; +} + +.faq input[type="checkbox"] { + display: none; +} + +.faq .faq-arrow { + width: 5px; + height: 5px; + transition: -webkit-transform 0.8s; + transition: transform 0.8s; + transition: transform 0.8s, -webkit-transform 0.8s; + transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); + border-top: 3px solid rgba(0, 0, 0, 0.33); + border-right: 3px solid rgba(0, 0, 0, 0.33); + float: right; + position: relative; + top: -30px; + right: 27px; + transform: rotate(45deg); +} + +.faq input[type="checkbox"]:checked + label > .faq-arrow { + transition: -webkit-transform 0.8s; + transition: transform 0.8s; + transition: transform 0.8s, -webkit-transform 0.8s; + transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); + transform: rotate(135deg); +} + +.faq input[type="checkbox"]:checked + label { + display: block; + background: rgba(255,255,255,255) !important; + color: #4f7351; + height: 225px; + transition: height 0.8s; + transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +.faq input[type='checkbox']:not(:checked) + label { + display: block; + transition: height 0.8s; + height: 60px; + transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +.container { + max-width: 1200px; + width: 90%; + margin: auto; +} + +.navbar { + box-shadow: 0px 5px 10px 0px #aaa; + position: fixed; + width: 100%; + background: #c3143178; + color: #dec6ff; + /* opacity: ; */ + z-index: 100; +} + +.navbar-container { + display: flex; + justify-content: space-between; + height: 64px; + align-items: center; +} + +.menu-items { + order: 2; + display: flex; +} + +.logo { + order: 1; + font-size: 2.3rem; +} + +.menu-items li { + list-style: none; + margin-left: 1.5rem; + font-size: 1.3rem; +} + +.navbar a { + color: #dec6ff; + text-decoration: none; + font-weight: 700; + transition: color 0.3s ease-in-out; +} + +.navbar a:hover { + color: #f6ff00; +} + +/* Media Queries for Mobile View */ + +/* Medium devices (tablets, 768px and below) */ +@media (max-width: 768px) { + .navbar { + opacity: 0.95; + } + + .navbar-container { + display: block; + position: relative; + height: 64px; + } + + .menu-items { + padding-top: 100px; + background: #fff; + height: 100vh; + max-width: 300px; + transform: translate(-150%); + display: flex; + flex-direction: column; + margin-left: -40px; + padding-left: 40px; + transition: transform 0.5s ease-in-out; + box-shadow: 5px 0px 10px 0px #aaa; + overflow: scroll; + } + + .menu-items li { + margin-bottom: 1.8rem; + font-size: 1.1rem; + font-weight: 500; + } + + .logo { + position: absolute; + top: 10px; + right: 15px; + font-size: 2.5rem; + } + + .row { + flex-direction: column; + } + + .card { + flex: 1 1 100%; + } +} + +/* Small devices (phones, 500px and below) */ +@media (max-width: 500px) { + .logo { + font-size: 2.2rem; + } + + #about { + padding: 5rem 1rem; + } + + .tagline { + font-size: 24px; + } + + #about .content p { + font-size: 1rem; + } + + .card { + padding: 1rem; + flex: 1 1 100%; + } + + .menu-items { + padding-left: 20px; + } + + .faq-heading { + font-size: 16px; + } +} + + +@media (max-width: 768px) { + .navbar { + opacity: 0.95; + } + + .navbar-container { + display: block; + position: relative; + height: 50px; + } + + .hamburger-lines { + display: block; + height: 28px; + width: 35px; + position: absolute; + top: 10px; + left: 20px; + z-index: 2; + display: flex; + flex-direction: column; + justify-content: space-between; + cursor: pointer; + } + + .hamburger-lines .line { + display: block; + height: 4px; + width: 100%; + border-radius: 10px; + background: #EBD3F8; + } + + .menu-items { + padding-top: 100px; + background: #606060f0; + height: 100vh; + max-width: 300px; + transform: translate(-150%); + display: flex; + flex-direction: column; + margin-left: -40px; + padding-left: 40px; + transition: transform 0.5s ease-in-out; + box-shadow: 5px 0px 10px 0px #aaa; + overflow: scroll; + } + + .navbar .menu-items li { + margin-bottom: 1.8rem; + font-size: 1rem; + font-weight: 500; + } + + .logo { + position: absolute; + top: 10px; + right: 15px; + font-size: 1rem; + } + + .menu-active { + transform: translateX(0); + } + + .hamburger-active .line1 { + transform: rotate(45deg); + } + + .hamburger-active .line2 { + transform: scaleY(0); + } + + .hamburger-active .line3 { + transform: rotate(-45deg); + } +} + +@media (max-width: 500px) { + .logo { + font-size: 1rem; + } +}