diff --git a/index.html b/index.html index c2dc4927..22ab1d47 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,86 @@ + + CodeClip + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + Challenges - CodeClip @@ -55,6 +135,7 @@

Test your skills with our curated collection of coding challenges. From beginner-friendly problems to advanced algorithms, there's something for every developer.

+ @@ -88,6 +169,88 @@

+ +
+
+
+

🚀 An Interactive Coding Platform

+

+ + +

+

+ Discover CodeClip, an exhilarating, lightweight web app that + empowers developers to master coding challenges right in their + browser! Whether you're tackling algorithms, debugging scripts, + or showcasing your solutions to the open-source community, + CodeClip offers a seamless, interactive experience with a sleek + interface, real-time feedback, and effortless sharing via unique + URLs or GitHub Gists. +

+
+ 🎯 Start Coding + 📚 View Challenges + + Code. Challenge.
+ Conquer. +

+

+ Discover CodeClip, an exhilarating, lightweight web app that empowers developers to master coding challenges right in their browser! Whether you're tackling algorithms, debugging scripts, or showcasing your solutions to the open-source community, CodeClip offers a seamless, interactive experience with a sleek interface, real-time feedback, and effortless sharing via unique URLs or GitHub Gists. +

+
+ 🎯 Start Coding + 📚 View Challenges + +
+ +
+
+
+ + + +
+
+ +
+ // Welcome to CodeClip +
+
+ function + solveProblem() { +
+
+ return + 'Success!'; +
+ +
// Welcome to CodeClip
+
function solveProblem() {
+
return 'Success!';
+ +
}
+
+
+
+ + + + + + + + + +
+
+ +
security
+

Challenge Vault

+

All your challenges in one place — track, review, repeat.

+ +
@@ -167,6 +330,7 @@

Valid Parentheses

@@ -393,6 +557,32 @@

Community

margin-left: 0; } + + + + + + + + + + + + + + + + + + + + .search-input { width: 100%; } @@ -403,4 +593,5 @@

Community

} - \ No newline at end of file + + diff --git a/scripts/theme.js b/scripts/theme.js index 9ee46ad8..22db0e52 100644 --- a/scripts/theme.js +++ b/scripts/theme.js @@ -1,42 +1,53 @@ -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) { } - }); + } + }); }); - \ No newline at end of file diff --git a/styles.css b/styles.css index 7c241409..eb08949c 100644 --- a/styles.css +++ b/styles.css @@ -242,7 +242,10 @@ body { left: 30%; animation-delay: 4s; } +#theme-toggle:hover{ + cursor: pointer; +} @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } @@ -386,6 +389,19 @@ body { background: #475569; } + +/* Responsive Styles */ +@media (max-width: 1024px) { + .hero__content { + grid-template-columns: 1fr; + text-align: center; + } + .hero__cta { + justify-content: center; + } + .hero__visual { + margin: 0 auto; + /* Content Section - Fixed for proper centering */ .content { max-width: 1024px; @@ -588,10 +604,12 @@ a { justify-content: center; align-items: center; width: 100%; + max-width: 400px; } } + .content { padding-top: 50px; flex-direction: column; @@ -604,6 +622,7 @@ a { } + @media (max-width: 768px) { .header__container { height: 60px; @@ -639,10 +658,12 @@ a { .hero__title { font-size: 2.5rem; } + .content { padding-top: 300px; } + } @media (max-width: 480px) { @@ -655,6 +676,7 @@ a { .hero__title { font-size: 2rem; } + /* Ensure hero still uses full width on mobile and centers content */ .hero .container {