diff --git a/index.html b/index.html index b667b341..3d74dee5 100644 --- a/index.html +++ b/index.html @@ -1,89 +1,75 @@ - - - - CodeClip - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + CodeClip + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -109,11 +95,10 @@

Loading

aria-label="Toggle navigation"> - - @@ -140,12 +124,9 @@

Loading

-
- +
+

GSSOC 2025

@@ -153,7 +134,8 @@

Code Run
Contribute

-

+

CodeClip is a lightweight, browser-based platform designed to make coding practice simple, accessible, and collaborative. Whether you're a beginner looking to sharpen your skills or an aspiring @@ -180,11 +162,8 @@

- hero section image + hero section image
@@ -197,181 +176,191 @@

-
-
-
-
Frontend Challenges
-

EASY

-
- - - + +
+
+
+
Frontend Challenges
+

EASY

+
+ + +
-
-

- 135 coders joined -

-

- Build real UI components using HTML, CSS, and JavaScript. - These tasks help you improve your layout, styling, - responsiveness, and interactivity,no frameworks, just clean - frontend skills. -

- -
- - Join Now +

+ 135 coders joined +

+

+ Build real UI components using HTML, CSS, and JavaScript. + These tasks help you improve your layout, styling, + responsiveness, and interactivity,no frameworks, just clean + frontend skills. +

+ +
+ + Join Now +
-
+
-
-
-
+ +
+
JavaScript Logics
-

MEDIUM

-
- +
+

MEDIUM

+
+ +
+
+

+ 189 coders joined +

+

+ Master the core of JavaScript by solving logic-based problems + that boost your thinking and problem-solving skills. Perfect + for beginners and intermediates. +

+
+ Join Now
-
- -

- 189 coders joined -

-

- Master the core of JavaScript by solving logic-based problems - that boost your thinking and problem-solving skills. Perfect - for beginners and intermediates. -

- -
- - Join Now
-
+
-
-
-
-
Backend Basics
-

HARD

-
- - + +
+
+
+
Backend Basics
+

HARD

+
+ + +
-
-

- 150 coders joined -

-

- Learn the fundamentals of backend development through simple - tasks using APIs, data handling, and server-side logic. A - great start for aspiring full-stack developers. -

- -
- - Join Now +

+ 150 coders joined +

+

+ Learn the fundamentals of backend development through simple + tasks using APIs, data handling, and server-side logic. A + great start for aspiring full-stack developers. +

+ +
+ + Join Now +
-
+
-
-
-
-
UI Design Tasks
-

EASY

-
- - + +
+
+
+
UI Design Tasks
+

EASY

+
+ + +
-
-

- 120 coders joined -

-

- Practice building beautiful and functional UI components using - HTML and CSS. Perfect for improving your design sense and - layout skills. -

- -
- - Join Now +

+ 120 coders joined +

+

+ Practice building beautiful and functional UI components using + HTML and CSS. Perfect for improving your design sense and + layout skills. +

+ +
+ + Join Now +
-
+
-
-
-
-
Open Source Challenges
-

MEDIUM

-
- - + +
+
+
+
Open Source Challenges
+

MEDIUM

+
+ + +
-
-

- 200 coders joined -

-

- Practice real world contribution workflows using Git and - GitHub. You'll learn how to contribute to projects, manage - pull requests. -

- -
- - Join Now +

+ 200 coders joined +

+

+ Practice real world contribution workflows using Git and + GitHub. You'll learn how to contribute to projects, manage + pull requests. +

+ +
+ + Join Now +
-
+
-
-
-
-
-
JavaScript Mini Projects
-

Easy

-
- - +
+ +
+
+
+
JavaScript Mini Projects
+

Easy

+
+ + +
-
-

- 300 coders joined -

-

- Created an interactive form/input area,Applied CSS styles for visual consistency .Added features like auto-focus, clear input after add, and animation. -

- -
- - Join Now +

+ 300 coders joined +

+

+ Created an interactive form/input area,Applied CSS styles for visual consistency .Added features + like + auto-focus, clear input after add, and animation. +

+ +
+ + Join Now +
-
+
@@ -482,45 +471,45 @@
JavaScript Mini Projects
-
-
-

- Top Coder of the Week -

-

- Meet our top coders who accepted challenges, wrote great code, - contributed to open source, and stood out as the best performers of the week. -

- -
- #1 - User 1 - Rahul 🏆 - 1250 pts -
+
+
+

+ Top Coder of the Week +

+

+ Meet our top coders who accepted challenges, wrote great code, + contributed to open source, and stood out as the best performers of the week. +

+ +
+ #1 + User 1 + Rahul 🏆 + 1250 pts +
-
- #2 - User 2 - Manisha 🥈 - 1180 pts -
+
+ #2 + User 2 + Manisha 🥈 + 1180 pts +
-
- #3 - User 3 - Pankaj 🥉 - 1100 pts -
+
+ #3 + User 3 + Pankaj 🥉 + 1100 pts +
-
- #4 - User 4 - Simran - 980 pts -
-
-
+
+ #4 + User 4 + Simran + 980 pts +
+
+
@@ -546,19 +535,15 @@

About

- Contribute to CodeClip + class="aboutCTA-Btn">Contribute to CodeClip

- +
@@ -573,7 +558,15 @@

About

- +
+
Important Links
+ +
Contact Us
@@ -589,7 +582,7 @@
Contact Us GitHub Contact Us > Contact Us

© CodeClip | Open Source Project 2025

-
- - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - - \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index a59b10b1..6a9effa3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,13 @@ { - "name": "CodeClip", + "name": "codeclip", + "version": "1.0.0", "lockfileVersion": 3, "requires": true, - "packages": {} + "packages": { + "": { + "name": "codeclip", + "version": "1.0.0", + "license": "ISC" + } + } } diff --git a/package.json b/package.json new file mode 100644 index 00000000..026df716 --- /dev/null +++ b/package.json @@ -0,0 +1,11 @@ +{ + "name": "codeclip", + "version": "1.0.0", + "description": "**CodeClip** is a lightweight, fully client-side web app that lets developers **store, solve, run, and share coding challenges** directly in the browser. Built with vanilla **HTML, CSS, and JavaScript**, it is ideal for first-time open-source contributors and is being developed under **GirlScript Summer of Code (GSSoC)**.", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC" +} diff --git a/pages/about.html b/pages/about.html index 39c2ab61..f64dc4d9 100644 --- a/pages/about.html +++ b/pages/about.html @@ -1,229 +1,237 @@ + - - - Challenges - CodeClip - - - - - - - - - - - - - - - + + + About - CodeClip + + + + + + + + + + + + + + + + /* Headings */ + .about-container h1, + .about-container h2 { + color: #87cefa; + animation: slideInLeft 1s ease-out; + } + + /* Paragraph and list */ + .about-container p, + .about-container ul, + .about-container li { + line-height: 1.6; + animation: slideInLeft 1s ease-out; + } + + /* Link styling */ + .about-container a { + color: #4fc3f7; + text-decoration: none; + } + + .about-container a:hover { + text-decoration: underline; + } + + /* Horizontal rule */ + .about-container hr { + border: none; + height: 1px; + background-color: #444; + margin: 20px 0; + } + + /* Animation keyframes */ + @keyframes slideInLeft { + from { + opacity: 0; + transform: translateX(-50px); + } + + to { + opacity: 1; + transform: translateX(0); + } + } + + /* Responsive Design */ + @media (max-width: 600px) { + .about-container { + margin: 20px; + padding: 20px; + } + } + @@ -235,11 +243,11 @@ @@ -253,10 +261,14 @@

About CodeClip

-

CodeClip is a lightweight, browser-based code snippet manager built for developers who want a simple, fast, and distraction-free way to save and revisit frequently used code.

+

CodeClip is a lightweight, browser-based code snippet manager built for developers who want a + simple, fast, and distraction-free way to save and revisit frequently used code.

-

It is completely client-side, with no backend — your snippets are stored securely in your browser using localStorage. Whether you're a beginner or a seasoned developer, CodeClip helps you stay productive by keeping your code snippets easily accessible.

-
+

It is completely client-side, with no backend — your snippets are stored securely in your browser using + localStorage. Whether you're a beginner or a seasoned developer, CodeClip helps you stay productive + by keeping your code snippets easily accessible. +

+

Features

  • Light/Dark mode support
    • @@ -266,8 +278,8 @@

    Features

  • 100% privacy – nothing leaves your browser
- -

View the source code or contribute here: + +

View the source code or contribute here: github.com/opensource-society/CodeClip @@ -280,16 +292,19 @@

Features

-

CodeClip

+

CodeClip

Master coding challenges in your browser

Quick Links

@@ -302,10 +317,11 @@

Community

  • LinkedIn
    • -
    +

    Community

    - +
    @@ -583,7 +604,7 @@

    Monitor your progress and take action

    - +
    @@ -608,7 +629,7 @@

    - +
    @@ -623,7 +644,7 @@

    - +
    @@ -638,7 +659,7 @@

    - +
    @@ -655,7 +676,7 @@

    - +
    @@ -702,7 +723,7 @@

    Completed "Two Sum" Challenge

    2 hours ago
    - +
    @@ -713,7 +734,7 @@

    Achievement Unlocked: Problem Solver

    1 day ago
    - +
    @@ -759,7 +780,7 @@

    Learning Streak Calendar

    Current Streak
    - +
    @@ -777,7 +798,7 @@

    Learning Streak Calendar

    Dec
    - +
    Mon @@ -788,7 +809,7 @@

    Learning Streak Calendar

    - +
    Less
    @@ -801,14 +822,14 @@

    Learning Streak Calendar

    More
    - +
    - + + -
    @@ -823,7 +844,7 @@

    Learning Streak Calendar

    Easy
    Completed
    -
    +
    Responsive Navbar
    Web Dev • July 18, 2025
    Medium
    @@ -843,42 +864,42 @@

    Learning Streak Calendar

    - + - -
    -
    -
    - -
    -
    In progress Challenges
    + +
    +
    +
    +
    -
    -
    -
    Weather API App
    -
    JavaScript • Due July 25
    -
    Medium
    -
    In Progress
    -
    -
    -
    Sorting Visualizer
    -
    DSA • Due July 24
    -
    Hard
    -
    In Progress
    -
    -
    -
    Weather API App
    -
    JavaScript • Due July 25
    -
    Medium
    -
    In Progress
    -
    -
    -
    Sorting Visualizer
    -
    DSA • Due July 24
    -
    Hard
    -
    In Progress
    -
    +
    In progress Challenges
    +
    +
    +
    +
    Weather API App
    +
    JavaScript • Due July 25
    +
    Medium
    +
    In Progress
    +
    +
    +
    Sorting Visualizer
    +
    DSA • Due July 24
    +
    Hard
    +
    In Progress
    +
    +
    +
    Weather API App
    +
    JavaScript • Due July 25
    +
    Medium
    +
    In Progress
    +
    +
    Sorting Visualizer
    +
    DSA • Due July 24
    +
    Hard
    +
    In Progress
    +
    +
    @@ -916,7 +937,7 @@

    Learning Streak Calendar

    -
    +
    @@ -925,32 +946,40 @@

    Leaderboard

    - - - - - - + + + + + + - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
    		UserPointsBadges
    +
    +     		UserPointsBadges
    		Alice1540 XP Master
    		Bob1320 XP Streaker
    		Charlie1210 XP Fast Starter
    +
    +     		Alice1540 XP Master
    +
    +     		Bob1320 XP Streaker
    +
    +     		Charlie1210 XP Fast Starter
    @@ -986,7 +1015,7 @@

    Upcoming Goals & Reminders

    -
    +
    @@ -997,7 +1026,7 @@

    Upcoming Goals & Reminders

    -

    CodeClip

    +

    CodeClip

    Master coding challenges in your browser

    @@ -1005,7 +1034,7 @@

    Quick Links

    @@ -1022,14 +1051,135 @@

    Community

    + + + - + - + + \ No newline at end of file diff --git a/scripts/app.js b/scripts/app.js index 6e27b7b0..590bf139 100644 --- a/scripts/app.js +++ b/scripts/app.js @@ -1,12 +1,27 @@ -import { - saveUserProgress, - loadUserProgress, - saveCompletedChallenges, - loadCompletedChallenges +import { + saveUserProgress, + loadUserProgress, + saveCompletedChallenges, + loadCompletedChallenges } from './data.js'; console.log('app script loaded'); +// ------------------- Theme Toggle ------------------- // +document.addEventListener("DOMContentLoaded", function () { + const btn = document.getElementById("themeToggleBtn"); + btn.addEventListener("click", function () { + const currentTheme = document.documentElement.getAttribute("data-theme"); + if (currentTheme === "dark") { + document.documentElement.setAttribute("data-theme", "light"); + btn.innerHTML = ''; + } else { + document.documentElement.setAttribute("data-theme", "dark"); + btn.innerHTML = ''; + } + }); +}); + // ------------------- Challenge Form + Preview ------------------- // const form = document.getElementById('challengeForm'); const preview = document.getElementById('preview'); @@ -231,13 +246,13 @@ document.addEventListener("DOMContentLoaded", () => { if (!leaderboardContainer) return; // ✅ Only run on leaderboard section // Dummy leaderboard data (replace later with API/DB) - let leaderboardData = [ - { name: "Alice", points: 1250, img: "assets/leaderboard-section/user-1.png" }, - { name: "Bob", points: 1100, img: "assets/leaderboard-section/user-2.png" }, - { name: "Charlie", points: 980, img: "assets/leaderboard-section/user-3.png" }, - { name: "David", points: 900, img: "assets/leaderboard-section/user-4.png" }, - { name: "Eva", points: 870, img: "assets/leaderboard-section/user-5.png" } -]; + let leaderboardData = [ + { name: "Alice", points: 1250, img: "assets/leaderboard-section/user-1.png" }, + { name: "Bob", points: 1100, img: "assets/leaderboard-section/user-2.png" }, + { name: "Charlie", points: 980, img: "assets/leaderboard-section/user-3.png" }, + { name: "David", points: 900, img: "assets/leaderboard-section/user-4.png" }, + { name: "Eva", points: 870, img: "assets/leaderboard-section/user-5.png" } + ]; function renderLeaderboard() { diff --git a/scripts/theme.js b/scripts/theme.js index 22db0e52..591079a8 100644 --- a/scripts/theme.js +++ b/scripts/theme.js @@ -1,10 +1,17 @@ import { saveUserSettings, loadUserSettings } from "./data.js"; +console.log("theme script loaded"); + +// ------------------- Theme Toggle ------------------- // + document.addEventListener("DOMContentLoaded", () => { const toggleBtn = document.getElementById("theme-toggle"); const setTheme = (theme) => { document.documentElement.setAttribute("data-theme", theme); + + console.log("Theme set to:", theme); + // -------------- console log for checking the theme --------------// // Toggle icon based on theme if (theme === "dark") { diff --git a/styles.css b/styles.css index 6128375c..f526655e 100644 --- a/styles.css +++ b/styles.css @@ -546,7 +546,7 @@ body { min-width: 200px; height: 250px; background-color: #fff; - margin: 10px; + margin: 16px 0; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.24); /* border: 2px solid rgba(249, 15, 15, 0.12); */ @@ -663,6 +663,12 @@ body { .vault-card-content { align-items: center; } + .card { + margin: 16px 0; + } + .content { + gap: 16px; + } } .icon { @@ -684,6 +690,15 @@ body { font-size: 36px; } +.card { + height: 360px; + /* width: 300px; */ + margin: 24px; /* Increase margin to separate cards */ + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); /* Subtle shadow for separation */ + border: 1px solid #e5e7eb; /* Light border for distinction */ + background-color: #fff; /* Ensure background is solid */ +} + .card .title { margin-top: 30px; font-weight: 600; @@ -704,7 +719,10 @@ body { } .card:hover { - height: 270px; + box-shadow: 0 8px 32px rgba(37,99,235,0.18), 0 2px 10px rgba(37,99,235,0.09); + border-color: #2563eb; + transform: translateY(-10px) translateX(8px) scale(1.04); + background-color: #f0f6ff; } .card:hover .text { @@ -826,6 +844,7 @@ body { } .content { padding-top: 300px; + gap: 24px; } }