diff --git a/index.html b/index.html index e1c59f6b..521162e0 100644 --- a/index.html +++ b/index.html @@ -6,19 +6,38 @@ CodeClip - - - - + + + + + - + - + - + @@ -30,12 +49,21 @@ - - + + + + + + + - \ No newline at end of file + diff --git a/scripts/theme.js b/scripts/theme.js index 9ee46ad8..105974b3 100644 --- a/scripts/theme.js +++ b/scripts/theme.js @@ -1,42 +1,54 @@ -import { saveUserSettings, loadUserSettings } from './data.js'; +import { saveUserSettings, loadUserSettings } from "./data.js"; document.addEventListener("DOMContentLoaded", () => { - const toggleBtn = document.getElementById("theme-toggle"); + const toggleBtn = document.getElementById("theme-toggle"); - const setTheme = (theme) => { - document.documentElement.setAttribute("data-theme", theme); - const success = saveUserSettings({ ...loadUserSettings(), theme }); - if (!success) { - alert('Failed to save theme preference.'); - } - }; + const setTheme = (theme) => { + document.documentElement.setAttribute("data-theme", theme); + + // Toggle icon based on theme + if (theme === "dark") { + toggleBtn.classList.remove("fa-sun"); + toggleBtn.classList.add("fa-moon"); + } else { + toggleBtn.classList.remove("fa-moon"); + toggleBtn.classList.add("fa-sun"); + } + + const success = saveUserSettings({ ...loadUserSettings(), theme }); + if (!success) { + alert("Failed to save theme preference."); + } + }; - // Apply saved theme on load - const savedSettings = loadUserSettings(); - const savedTheme = savedSettings.theme; - const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; - const initialTheme = savedTheme || (prefersDark ? "dark" : "light"); - setTheme(initialTheme); + // Apply saved theme on load + const savedSettings = loadUserSettings(); + const savedTheme = savedSettings.theme; + const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; + const initialTheme = savedTheme || (prefersDark ? "dark" : "light"); + setTheme(initialTheme); - // Toggle button click - toggleBtn.addEventListener("click", () => { - const current = document.documentElement.getAttribute("data-theme"); - const newTheme = current === "light" ? "dark" : "light"; - setTheme(newTheme); - }); + // Toggle button click + toggleBtn.addEventListener("click", () => { + const current = document.documentElement.getAttribute("data-theme"); + const newTheme = current === "light" ? "dark" : "light"; + setTheme(newTheme); + }); - // Real-time sync: The theme changed in one tab is linked and synced with the theme change in other tabs. - window.addEventListener("storage", (event) => { - if (event.key === "codeclip_user_settings") { - try { - const newSettings = JSON.parse(event.newValue); - if (newSettings && newSettings.theme) { - document.documentElement.setAttribute("data-theme", newSettings.theme); - } - } catch (e) { - // Ignore parse errors + // Real-time sync: The theme changed in one tab is linked and synced with the theme change in other tabs. + window.addEventListener("storage", (event) => { + if (event.key === "codeclip_user_settings") { + try { + const newSettings = JSON.parse(event.newValue); + if (newSettings && newSettings.theme) { + document.documentElement.setAttribute( + "data-theme", + newSettings.theme + ); } + } catch (e) { + // Ignore parse errors } - }); + } + }); }); - \ No newline at end of file diff --git a/styles.css b/styles.css index 61e7b49a..cfa373fd 100644 --- a/styles.css +++ b/styles.css @@ -432,6 +432,12 @@ body { } } +#theme-toggle:hover{ + cursor: pointer; + +} + + @media (max-width: 480px) { .container { padding: 0 1rem; @@ -445,132 +451,83 @@ body { } -.content { - max-width: 1024px; - width: 100%; - padding: 0 4%; - padding-top: 150px; - margin: 0 auto; - display: flex; - justify-content: center; - align-items: center; +.features { + padding: 4rem 2rem; + background-color: #f5f5f5; + text-align: center; } -@media screen and (max-width: 767px) { - .content { - padding-top: 300px; - flex-direction: column; - } +.section-title { + font-size: 2.5rem; + margin-bottom: 2rem; + color: #222; } -.card { - width: 100%; - max-width: 300px; - min-width: 200px; - height: 250px; - background-color: var(--background-color, #292929); /* fallback to #292929 if variable isn't set */ - margin: 10px; - border-radius: 10px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.24); - border: 2px solid rgba(7, 7, 7, 0.12); - font-size: 16px; - transition: all 0.3s ease; - position: relative; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - cursor: pointer; +.section-title span { + color: #2563eb; } - -[data-theme="dark"] .card { - --background-color: #292929; +.features-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + max-width: 1200px; + margin: 0 auto; } -[data-theme="light"] .card { - --background-color: #C9D9F6; /* or #f9f9f9 if you prefer */ -} -[data-theme="light"] .title { - --color: #212121; -} -[data-theme="light"] .text { - --color: #212121; +.feature-card { + background-color: #fff; + padding: 2rem; + border-radius: 15px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); + transition: transform 0.3s ease, box-shadow 0.3s ease; + cursor: pointer; } -.icon { - margin: 0 auto; - width: 100%; - height: 80px; - max-width:80px; - background: linear-gradient(90deg, #93C5FD 0%, #3B82F6 40%, rgba(0, 0, 0, 0.28) 60%); - border-radius: 100%; - display: flex; - justify-content: center; - align-items: center; - color: white; - transition: all 0.8s ease; - background-position: 0; - background-size: 200px; +.feature-card i { + font-size: 2.5rem; + color: #2563eb; + margin-bottom: 1rem; + transition: transform 0.3s ease; } - - -.material-icons.md-36 { font-size: 36px; } - - -.card .title { - width: 100%; - margin: 0; - text-align: center; - margin-top: 30px; - color: var(--color, #ffffff); - font-weight: 600; - text-transform: uppercase; - letter-spacing: 3px; +.feature-card h3 { + margin: 0.5rem 0; + color: #333; } - -.card .text { - width: 80%; - margin: 0 auto; - font-size: 13px; - text-align: center; - margin-top: 20px; - color: var(--color, #ffffff); - font-weight: 200; - letter-spacing: 2px; - opacity: 0; - max-height:0; - transition: all 0.3s ease; +.feature-card p { + color: #555; + font-size: 0.95rem; + line-height: 1.5; } -.card:hover { - height: 270px; +.feature-card:hover { + transform: translateY(-8px); + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); } -.card:hover .info { - height: 90%; +.feature-card:hover i { + transform: scale(1.2) rotate(5deg); +} +[data-theme="dark"] .features { + background-color: black; +} +[data-theme="dark"] .section-title { + color: var(--text-color); } -.card:hover .text { - transition: all 0.3s ease; - opacity: 1; - max-height:40px; + +[data-theme="dark"] .feature-card { + background-color: #2c2c2c; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } -.card:hover .icon { - background-position: -120px; - transition: all 0.3s ease; +[data-theme="dark"] .feature-card h3 { + color: #ffffff; } -.card:hover .icon i { - background: linear-gradient(90deg, #93C5FD, #3B82F6); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - opacity: 1; - transition: all 0.3s ease; +[data-theme="dark"] .feature-card p { + color: #cccccc; } -a { - text-decoration: none; -} \ No newline at end of file +