diff --git a/about/index.html b/about/index.html new file mode 100644 index 00000000..937c71aa --- /dev/null +++ b/about/index.html @@ -0,0 +1,107 @@ + + + + + + About - CodeClip + + + + + + + + + + + + + + + +
+
+ + + +
+
+ + +
+
+
+
+
+
+
+
+
+

🧠 Learn About CodeClip

+

Your Lightweight Code Companion

+

+ CodeClip is a browser-first, zero-backend snippet manager that helps developers organize and reuse code effortlessly — right inside your browser. +

+
+
+
+
+ + +
+
+

What is CodeClip?

+

+ CodeClip is a fast, clean code snippet manager made for developers who want zero clutter and 100% local privacy. Your code stays in your browser via localStorage — no databases, no accounts, no distractions. +

+
+ +
+

Key Features

+ +
+ +
+

Open Source

+

+ CodeClip is built with love for the open-source community. Contribute, fork, or star the project on GitHub: +

+ + 🌐 View on GitHub + +
+
+ + +
+ +
+ + + + + + + + + diff --git a/index.html b/index.html index 99245d8c..50d6d40f 100644 --- a/index.html +++ b/index.html @@ -18,11 +18,13 @@ referrerpolicy="no-referrer" /> + + + - + +
@@ -36,7 +38,7 @@
  • Challenges
  • Editor
  • Profile
    • -
  • About
    • +
  • About
    • + +
    + + +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +

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

    Challenge Vault

    +

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

    +     +
    + +
    + +
    code
    +

    Code Editor

    +

    Write, test, and edit code seamlessly in your personal editor.

    +     +
    + +
    + +
    share
    +

    Solution Sharing

    +

    Show your approach. Discover new ones.

    +     +
    + +
    + +
    smart_toy
    +

    AI Recommendation

    +

    Let AI guide your next steps with personalized recommendations.

    +     +
    +
    +
    + + +
    + +
    + + + + + + + + + + diff --git a/pages/about.html b/pages/about.html deleted file mode 100644 index 2eb67f6d..00000000 --- a/pages/about.html +++ /dev/null @@ -1,301 +0,0 @@ - - - - - - Challenges - CodeClip - - - - - - - - - - - - - - - - - -
    -
    - - - -
    -
    - -
    -

    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.

    - -

    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

    - - - -

    View the source code or contribute here: - - github.com/opensource-society/CodeClip - -

    - -
    - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/styles/about.css b/styles/about.css new file mode 100644 index 00000000..6051dfa4 --- /dev/null +++ b/styles/about.css @@ -0,0 +1,43 @@ +.about-hero { + margin-bottom: 2rem; +} + +.about-section { + display: grid; + gap: 2rem; + padding: 2rem 0; +} + +.about-card { + background: var(--bg-secondary); + padding: 2rem; + border-radius: 1rem; + box-shadow: var(--card-shadow); +} + +.section-title { + font-size: 1.5rem; + font-weight: 700; + color: var(--text-primary); + margin-bottom: 1rem; +} + +.feature-list { + list-style: none; + padding: 0; + margin: 0; +} + +.feature-list li { + padding: 0.5rem 0; + font-size: 1rem; + color: var(--text-secondary); + display: flex; + align-items: center; + gap: 0.5rem; +} + +.feature-list li::before { + content: "✔️"; + color: var(--primary-color); +}