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

OpenTekHub Blockchain Repository

Explore the Blockchain implementation and predict the latest cryptocurrency prices.

- +

Crypto Price Predictor

diff --git a/script.js b/script.js index 6cf345e..edd74c9 100644 --- a/script.js +++ b/script.js @@ -1,42 +1,3 @@ -// 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 -} // A map of symbols to their corresponding API names const cryptoMap = { // Major cryptocurrencies @@ -197,4 +158,3 @@ document.getElementById('predict-btn').addEventListener('click', function() { document.getElementById("price").innerText = "Please enter a valid cryptocurrency symbol."; } }); - diff --git a/styles.css b/styles.css index 1a0af87..bb4eaf3 100644 --- a/styles.css +++ b/styles.css @@ -32,7 +32,7 @@ h1, h2, h3 { .header { text-align: center; - background: linear-gradient(135deg, rgb(36, 11, 54), rgb(195, 20, 50)); + background-color: #2E073F; color: #EBD3F8; padding: 1.2rem; font-family: "Mate SC", serif; @@ -251,55 +251,4 @@ h1, h2, h3 { .bot-text{ font-size: 1rem; margin-block: 0px; -} - - -/* 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; } \ No newline at end of file