diff --git a/index.html b/index.html index 306c84a4..d1611aed 100644 --- a/index.html +++ b/index.html @@ -1,30 +1,23 @@ - CodeClip - - - - - - - - - - - - - - + + + + + + + + + + + - - - - -
-
-
-
-
-
-
+ +
+ +
+
+
+
+
+
+
+
+
+

🚀 An Interactive Coding Platform

+

+ 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!';
+
}
+
+
+
+
+
+
+
-

Code-Clip

-

--- A tiny playground for your giant ideas

+ +
+
- - - - - + - - + \ No newline at end of file diff --git a/scripts/app.js b/scripts/app.js index c7c1beb2..67a55692 100644 --- a/scripts/app.js +++ b/scripts/app.js @@ -1,4 +1,4 @@ -console.log('app script loaded'); +console.log('App script loaded'); // Hamburger menu functionality const navToggle = document.getElementById('navToggle'); @@ -14,5 +14,16 @@ if (navToggle && navMenu) { isOpen ? 'Close navigation menu' : 'Open navigation menu' ); navToggle.setAttribute('aria-expanded', isOpen); + + // Animate hamburger toEye icon + if (isOpen) { + navToggle.children[0].style.transform = 'rotate(45deg) translate(6px, 6px)'; + navToggle.children[2].style.transform = 'rotate(-45deg) translate(6px, -6px)'; + navToggle.children[1].style.opacity = '0'; + } else { + navToggle.children[0].style.transform = 'rotate(0deg)'; + navToggle.children[2].style.transform = 'rotate(0deg)'; + navToggle.children[1].style.opacity = '1'; + } }); } \ No newline at end of file diff --git a/styles.css b/styles.css index 7d81a563..7ba4f802 100644 --- a/styles.css +++ b/styles.css @@ -1,135 +1,445 @@ -/* Reset and base styles */ +/* Reset and Base Styles */ * { box-sizing: border-box; margin: 0; padding: 0; } + body { - font-family: 'Segoe UI', Arial, sans-serif; - background: #f9f9f9; - color: #222; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + color: #1e293b; + background: #f8fafc; + line-height: 1.6; + transition: background 0.3s, color 0.3s; +} + +/* Dark Theme */ +[data-theme="dark"] body { + color: #ffffff; + background: #000000; +} + +[data-theme="dark"] .header { + background: #1a1a1a; + border-bottom: 1px solid #333333; +} + +[data-theme="dark"] .header__logo .logo-text { + color: #3b82f6; +} + +[data-theme="dark"] .nav__link { + color: #ffffff; +} + +[data-theme="dark"] .nav__link:hover, +[data-theme="dark"] .nav__link:focus { + color: #3b82f6; +} + +[data-theme="dark"] .nav__link::after { + background: #3b82f6; +} + +[data-theme="dark"] .hamburger { + background: #3b82f6; +} + +[data-theme="dark"] .floating-element { + background: #3b82f6; +} + +[data-theme="dark"] .hero__subtitle, +[data-theme="dark"] .hero__description { + color: #cccccc; +} + +[data-theme="dark"] .hero__title .highlight { + color: #3b82f6; +} + +[data-theme="dark"] .btn-primary { + background: #3b82f6; + color: #ffffff; +} + +[data-theme="dark"] .btn-primary:hover { + background: #60a5fa; +} + +[data-theme="dark"] .btn-secondary { + background: #333333; + color: #ffffff; +} + +[data-theme="dark"] .btn-secondary:hover { + background: #555555; +} + +[data-theme="dark"] .code-window { + background: #1a1a1a; +} + +[data-theme="dark"] .comment { + color: #cccccc; +} + +[data-theme="dark"] .keyword { + color: #3b82f6; +} + +[data-theme="dark"] .theme-toggle-btn { + background: #333333; + color: #ffffff; +} + +[data-theme="dark"] .theme-toggle-btn:hover { + background: #555555; +} + +[data-theme="dark"] .nav__list { + background: #1a1a1a; +} + +/* Container */ +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 1.5rem; } /* Header Styles */ .header { - background: #fff; - border-bottom: 1px solid #ececec; - box-shadow: 0 2px 8px rgba(0,0,0,0.02); + background: #ffffff; + border-bottom: 1px solid #e2e8f0; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); position: sticky; top: 0; z-index: 100; } -.container { - max-width: 1100px; - margin: 0 auto; - padding: 0 1.5rem; -} + .header__container { display: flex; align-items: center; justify-content: space-between; - height: 64px; + height: 70px; } + .header__logo .logo-text { - font-size: 1.7rem; - font-weight: 700; - color: #2d72d9; - letter-spacing: 1px; + font-size: 1.8rem; + font-weight: 800; + color: #2563eb; + letter-spacing: 0.5px; } + .header__nav { display: flex; } + .nav__list { display: flex; - gap: 2rem; + gap: 2.5rem; list-style: none; } + .nav__link { text-decoration: none; - color: #222; - font-size: 1rem; + color: #1e293b; + font-size: 1.1rem; font-weight: 500; - transition: color 0.2s; position: relative; + transition: color 0.3s ease; } + .nav__link:hover, .nav__link:focus { - color: #2d72d9; + color: #2563eb; } + .nav__link::after { content: ''; display: block; width: 0; height: 2px; - background: #2d72d9; - transition: width 0.2s; + background: #2563eb; + transition: width 0.3s ease; position: absolute; - left: 0; bottom: -4px; + left: 0; } + .nav__link:hover::after, .nav__link:focus::after { width: 100%; } + .header__toggle { display: none; flex-direction: column; - justify-content: center; - gap: 4px; - width: 36px; - height: 36px; + gap: 5px; + width: 40px; + height: 40px; background: none; border: none; cursor: pointer; } + .hamburger { width: 100%; height: 4px; - background: #2d72d9; - border-radius: 2px; - transition: all 0.3s; + background: #2563eb; + border-radius: 3px; + transition: all 0.3s ease; +} + +/* Hero Section */ +.hero { + position: relative; + padding: 4rem 0; + overflow: hidden; +} + +.floating-elements { + position: absolute; + inset: 0; + pointer-events: none; +} + +.floating-element { + position: absolute; + background: #2563eb; + opacity: 0.05; + border-radius: 50%; + animation: float 8s ease-in-out infinite; +} + +.floating-element:nth-child(1) { + width: 80px; + height: 80px; + top: 20%; + left: 10%; + animation-delay: 0s; +} + +.floating-element:nth-child(2) { + width: 120px; + height: 120px; + top: 60%; + right: 15%; + animation-delay: 2s; +} + +.floating-element:nth-child(3) { + width: 60px; + height: 60px; + bottom: 20%; + left: 30%; + animation-delay: 4s; +} + +@keyframes float { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-20px); } +} + +.hero__content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; + align-items: center; +} + +.hero__text { + max-width: 500px; +} + +.hero__subtitle { + color: #64748b; + font-size: 1.1rem; + font-weight: 500; + margin-bottom: 1rem; +} + +.hero__title { + font-size: 3.5rem; + font-weight: 800; + line-height: 1.2; + margin-bottom: 1.5rem; +} + +.hero__title .highlight { + color: #2563eb; +} + +.hero__description { + color: #64748b; + font-size: 1.1rem; + margin-bottom: 2rem; +} + +.hero__cta { + display: flex; + gap: 1rem; +} + +.btn { + display: inline-flex; + align-items: center; + padding: 0.8rem 1.5rem; + border-radius: 8px; + text-decoration: none; + font-weight: 600; + font-size: 1rem; + transition: all 0.3s ease; +} + +.btn-primary { + background: #2563eb; + color: #fff; +} + +.btn-primary:hover { + background: #1e40af; +} + +.btn-secondary { + background: #64748b; + color: #fff; +} + +.btn-secondary:hover { + background: #475569; +} + +/* Code Window */ +.hero__visual { + perspective: 1000px; +} + +.code-window { + background: #ffffff; + border-radius: 12px; + padding: 1.5rem; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); + transform: rotateY( 5deg); + transition: transform 0.3s ease-in-out; +} + +.code-window:hover { + transform: rotateY(-5deg) ; +} + +.code-window__header { + display: flex; + gap: 8px; + margin-bottom: 1rem; +} + +.circle { + width: 12px; + height: 12px; + border-radius: 50%; +} + +.red { background: #ff5f56; } +.yellow { background: #ffbd2e; } +.green { background: #27c93f; } + +.code-content { + font-family: 'Fira Code', monospace; + font-size: 0.9rem; + line-height: 1.5; +} + +.code-line { + margin-bottom: 0.5rem; +} + +.comment { color: #64748b; } +.keyword { color: #2563eb; } +.string { color: #16a34a; } + +/* Theme Toggle */ +.theme-toggle-container { + text-align: center; + padding: 2rem 0; +} + +.theme-toggle-btn { + background: #64748b; + color: #fff; + border: none; + padding: 0.8rem 1.5rem; + border-radius: 8px; + cursor: pointer; + font-weight: 600; + transition: background 0.3s ease; +} + +.theme-toggle-btn:hover { + 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; + max-width: 400px; + } +} + @media (max-width: 768px) { .header__container { - height: 56px; + height: 60px; } .nav__list { position: absolute; - top: 56px; + top: 60px; right: 0; - background: #fff; + background: #ffffff; flex-direction: column; - width: 180px; - box-shadow: 0 4px 16px rgba(0,0,0,0.07); - padding: 1rem 0; - gap: 0; + width: 200px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); + padding: 1rem; visibility: hidden; opacity: 0; transition: visibility 0.3s, opacity 0.3s; } + [data-theme="dark"] .nav__list { + background: #1a1a1a; + } .nav__list.open { visibility: visible; opacity: 1; display: flex; } .nav__link { - padding: 0.75rem 1.5rem; - font-size: 1.05rem; + padding: 0.8rem 1.5rem; + font-size: 1.1rem; } .header__toggle { display: flex; } - .header__nav { - position: relative; + .hero__title { + font-size: 2.5rem; } } + @media (max-width: 480px) { .container { - padding: 0 0.5rem; + padding: 0 1rem; } .header__logo .logo-text { - font-size: 1.2rem; + font-size: 1.4rem; + } + .hero__title { + font-size: 2rem; } -} \ No newline at end of file +} \ No newline at end of file