From d69b8aad67fa72c6ff4476ef496080eead7fad9f Mon Sep 17 00:00:00 2001
From: "Max W." <walzen665@web.de>
Date: Fri, 11 Apr 2025 01:11:11 +0200
Subject: [PATCH] Working state

---
 public/index.css  | 414 +++++++++++++----------------------------
 public/index.html | 463 +---------------------------------------------
 public/index.js   | 288 ++++++++++++++++++++++++++++
 3 files changed, 424 insertions(+), 741 deletions(-)
 create mode 100644 public/index.js

diff --git a/public/index.css b/public/index.css
index f3d0c74..a84ddf6 100644
--- a/public/index.css
+++ b/public/index.css
@@ -1,33 +1,35 @@
 :root {
-    --bg-primary: #ffffff;
-    --bg-secondary: #f5f7fa;
-    --text-primary: #333333;
-    --text-secondary: #666666;
-    --border-color: #e0e0e0;
-    --accent-color: #4f46e5;
-    --accent-hover: #4338ca;
-    --line-numbers-bg: #f0f0f0;
-    --line-numbers-text: #888888;
-    --editor-bg: #f8f9fc;
-    --toast-bg: rgba(0, 0, 0, 0.8);
-    --toast-text: #ffffff;
-    --shadow-color: rgba(0, 0, 0, 0.1);
+    /* Light theme variables */
+    --bg-color: #f8f9fa;
+    --text-color: #212529;
+    --editor-bg: #ffffff;
+    --line-number-bg: #f1f3f5;
+    --line-number-color: #868e96;
+    --header-bg: #ffffff;
+    --border-color: #dee2e6;
+    --btn-bg: #e9ecef;
+    --btn-hover: #ced4da;
+    --accent-color: #228be6;
+    --notification-bg: #d3f9d8;
+    --notification-text: #2b8a3e;
+    --editor-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
 }
 
-[data-theme="dark"] {
-    --bg-primary: #1a1a1a;
-    --bg-secondary: #252525;
-    --text-primary: #e0e0e0;
-    --text-secondary: #a0a0a0;
-    --border-color: #3a3a3a;
-    --accent-color: #6366f1;
-    --accent-hover: #818cf8;
-    --line-numbers-bg: #2a2a2a;
-    --line-numbers-text: #777777;
-    --editor-bg: #2d2d2d;
-    --toast-bg: rgba(255, 255, 255, 0.8);
-    --toast-text: #1a1a1a;
-    --shadow-color: rgba(0, 0, 0, 0.3);
+[data-theme='dark'] {
+    /* Dark theme variables */
+    --bg-color: #212529;
+    --text-color: #f8f9fa;
+    --editor-bg: #343a40;
+    --line-number-bg: #2b3035;
+    --line-number-color: #adb5bd;
+    --header-bg: #343a40;
+    --border-color: #495057;
+    --btn-bg: #495057;
+    --btn-hover: #6c757d;
+    --accent-color: #74c0fc;
+    --notification-bg: #0b7285;
+    --notification-text: #e3fafc;
+    --editor-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
 }
 
 * {
@@ -37,24 +39,25 @@
 }
 
 body {
-    font-family: 'Inter', sans-serif;
-    background-color: var(--bg-primary);
-    color: var(--text-primary);
-    transition: background-color 0.3s, color 0.3s;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    background-color: var(--bg-color);
+    color: var(--text-color);
     line-height: 1.6;
+    transition: background-color 0.3s, color 0.3s;
 }
 
 .container {
     max-width: 1200px;
     margin: 0 auto;
-    padding: 0 20px;
+    padding: 1rem;
 }
 
 header {
-    background-color: var(--bg-secondary);
+    background-color: var(--header-bg);
     border-bottom: 1px solid var(--border-color);
-    padding: 15px 0;
-    box-shadow: 0 1px 3px var(--shadow-color);
+    padding: 1rem 0;
+    margin-bottom: 1.5rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .header-content {
@@ -64,318 +67,161 @@ header {
 }
 
 .logo {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    font-weight: 700;
     font-size: 1.5rem;
+    font-weight: 700;
     color: var(--accent-color);
 }
 
-.logo i {
-    font-size: 1.75rem;
+.controls {
+    display: flex;
+    gap: 0.75rem;
+}
+
+.control-btn {
+    background-color: var(--btn-bg);
+    border: none;
+    color: var(--text-color);
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.9rem;
+    transition: background-color 0.2s;
+}
+
+.control-btn:hover {
+    background-color: var(--btn-hover);
 }
 
 .theme-toggle {
     background: none;
     border: none;
+    color: var(--text-color);
     cursor: pointer;
-    color: var(--text-secondary);
-    font-size: 1.25rem;
-    padding: 8px;
+    font-size: 1.2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
     border-radius: 50%;
     transition: background-color 0.2s;
 }
 
 .theme-toggle:hover {
-    background-color: var(--border-color);
-    color: var(--text-primary);
-}
-
-main {
-    padding: 30px 0;
+    background-color: var(--btn-bg);
 }
 
 .editor-container {
     display: flex;
-    flex-direction: column;
-    gap: 20px;
-}
-
-.editor-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 10px;
-}
-
-.editor-header h2 {
-    font-weight: 600;
-    color: var(--text-primary);
-}
-
-.editor-wrapper {
-    display: flex;
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
+    border-radius: 6px;
     overflow: hidden;
-    box-shadow: 0 2px 5px var(--shadow-color);
-    position: relative;
-    height: 500px;
+    box-shadow: var(--editor-shadow);
+    background-color: var(--editor-bg);
+    height: calc(100vh - 200px);
+    min-height: 400px;
 }
 
 .line-numbers {
-    background-color: var(--line-numbers-bg);
-    color: var(--line-numbers-text);
-    padding: 15px 10px;
+    background-color: var(--line-number-bg);
+    color: var(--line-number-color);
+    padding: 1rem 0.5rem;
     text-align: right;
-    user-select: none;
-    overflow-y: hidden;
-    min-width: 50px;
     font-family: 'Fira Code', monospace;
     font-size: 0.9rem;
+    min-width: 3.5rem;
+    user-select: none;
+    overflow-y: hidden;
     border-right: 1px solid var(--border-color);
 }
 
-.editor-area {
-    flex-grow: 1;
-    position: relative;
-    display: flex;
+.line-numbers div {
+    padding: 0 0.5rem;
+    height: 1.5rem;
 }
 
-#editor {
-    width: 100%;
-    height: 100%;
-    padding: 15px;
+#editor, #viewer {
+    flex-grow: 1;
+    padding: 1rem;
+    font-family: 'Fira Code', monospace;
+    font-size: 0.9rem;
     background-color: var(--editor-bg);
-    color: var(--text-primary);
+    color: var(--text-color);
     border: none;
     resize: none;
-    font-family: 'Fira Code', monospace;
-    font-size: 0.9rem;
-    line-height: 1.5;
-    tab-size: 4;
     outline: none;
-}
-
-.viewer-area {
-    width: 100%;
+    white-space: pre;
+    overflow-y: auto;
+    tab-size: 4;
+    line-height: 1.5rem;
     height: 100%;
-    padding: 15px;
-    background-color: var(--editor-bg);
-    color: var(--text-primary);
-    overflow: auto;
-    font-family: 'Fira Code', monospace;
-    font-size: 0.9rem;
-    line-height: 1.5;
-    white-space: pre;
-    tab-size: 4;
 }
 
-.code-viewer {
-    white-space: pre;
-    tab-size: 4;
+#viewer {
+    display: none;
 }
 
-.code-viewer pre,
-.code-viewer code {
-    margin: 0;
-    padding: 0;
-    white-space: pre;
-    overflow-x: auto;
-    width: 100%;
-    font-family: 'Fira Code', monospace;
+.viewer-active #editor {
+    display: none;
 }
 
-/* Ensure highlight.js doesn't add extra space */
-.hljs {
-    padding: 0 !important;
-    background: transparent !important;
+.viewer-active #viewer {
+    display: block;
 }
 
-.action-buttons {
-    display: flex;
-    gap: 10px;
-    margin-top: 20px;
-}
-
-.btn {
-    padding: 10px 20px;
-    border: none;
-    border-radius: 6px;
-    cursor: pointer;
-    font-weight: 500;
-    font-size: 0.95rem;
-    transition: all 0.2s;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.btn-primary {
-    background-color: var(--accent-color);
-    color: white;
-}
-
-.btn-primary:hover {
-    background-color: var(--accent-hover);
-}
-
-.btn-secondary {
-    background-color: var(--bg-secondary);
-    color: var(--text-primary);
-    border: 1px solid var(--border-color);
-}
-
-.btn-secondary:hover {
-    background-color: var(--border-color);
-}
-
-.toast {
+.notification {
     position: fixed;
-    bottom: 20px;
+    top: 20px;
     right: 20px;
-    padding: 12px 20px;
-    background-color: var(--toast-bg);
-    color: var(--toast-text);
-    border-radius: 6px;
-    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
-    transform: translateY(100px);
+    padding: 0.75rem 1.25rem;
+    background-color: var(--notification-bg);
+    color: var(--notification-text);
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s, opacity 0.3s;
+    transform: translateY(-10px);
     opacity: 0;
-    transition: all 0.3s;
-    z-index: 1000;
-    display: flex;
-    align-items: center;
-    gap: 10px;
+    pointer-events: none;
 }
 
-.toast.show {
+.notification.show {
     transform: translateY(0);
     opacity: 1;
 }
 
-.loading-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 100;
-    display: none;
-}
-
-.spinner {
-    width: 50px;
-    height: 50px;
-    border: 5px solid rgba(255, 255, 255, 0.3);
-    border-radius: 50%;
-    border-top-color: white;
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-.url-container {
-    display: flex;
-    flex-direction: row; /* Ensure horizontal layout */
-    align-items: stretch; /* Make items same height */
-    margin-top: 20px;
-    width: 100%;
-}
-
-.url-display {
-    flex: 1; /* Take up available space */
-    padding: 12px 15px;
-    background-color: var(--bg-secondary);
-    border: 1px solid var(--border-color);
-    border-right: none; /* Remove right border to connect with button */
-    border-radius: 6px 0 0 6px;
-    color: var(--text-primary);
-    font-family: 'Fira Code', monospace;
-    font-size: 0.9rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.copy-btn {
-    flex: 0 0 auto; /* Don't grow or shrink */
-    padding: 12px 15px;
-    background-color: var(--accent-color);
-    color: white;
-    border: none;
-    border-radius: 0 6px 6px 0;
-    cursor: pointer;
-    transition: background-color 0.2s;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.copy-btn:hover {
-    background-color: var(--accent-hover);
-}
-
-footer {
-    background-color: var(--bg-secondary);
-    border-top: 1px solid var(--border-color);
-    padding: 20px 0;
+.footer {
     text-align: center;
-    color: var(--text-secondary);
+    padding: 1rem 0;
+    margin-top: 1.5rem;
     font-size: 0.9rem;
-    margin-top: 30px;
+    color: var(--line-number-color);
 }
 
-/* Responsive adjustments */
+.language-selector {
+    padding: 0.5rem;
+    background-color: var(--btn-bg);
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    font-size: 0.9rem;
+}
+
+/* For mobile responsiveness */
 @media (max-width: 768px) {
-    .editor-wrapper {
-        height: 400px;
-    }
-
-    .action-buttons {
+    .header-content {
         flex-direction: column;
+        gap: 1rem;
     }
 
-    .btn {
+    .controls {
         width: 100%;
         justify-content: center;
+        flex-wrap: wrap;
     }
-}
 
-/* Custom styling for highlight.js themes */
-[data-theme="light"] .hljs {
-    background: var(--editor-bg);
-    color: var(--text-primary);
-}
-
-[data-theme="dark"] .hljs {
-    background: var(--editor-bg);
-    color: var(--text-primary);
-}
-
-/* Custom scrollbar */
-::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-}
-
-::-webkit-scrollbar-track {
-    background: var(--bg-secondary);
-}
-
-::-webkit-scrollbar-thumb {
-    background: var(--border-color);
-    border-radius: 5px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: var(--text-secondary);
+    .editor-container {
+        height: calc(100vh - 260px);
+    }
 }
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 2b5a7d2..aa0be82 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,245 +12,21 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/python.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/css.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/xml.min.js"></script>
-    <style>
-        :root {
-            /* Light theme variables */
-            --bg-color: #f8f9fa;
-            --text-color: #212529;
-            --editor-bg: #ffffff;
-            --line-number-bg: #f1f3f5;
-            --line-number-color: #868e96;
-            --header-bg: #ffffff;
-            --border-color: #dee2e6;
-            --btn-bg: #e9ecef;
-            --btn-hover: #ced4da;
-            --accent-color: #228be6;
-            --notification-bg: #d3f9d8;
-            --notification-text: #2b8a3e;
-            --editor-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
-        }
-
-        [data-theme='dark'] {
-            /* Dark theme variables */
-            --bg-color: #212529;
-            --text-color: #f8f9fa;
-            --editor-bg: #343a40;
-            --line-number-bg: #2b3035;
-            --line-number-color: #adb5bd;
-            --header-bg: #343a40;
-            --border-color: #495057;
-            --btn-bg: #495057;
-            --btn-hover: #6c757d;
-            --accent-color: #74c0fc;
-            --notification-bg: #0b7285;
-            --notification-text: #e3fafc;
-            --editor-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-            background-color: var(--bg-color);
-            color: var(--text-color);
-            line-height: 1.6;
-            transition: background-color 0.3s, color 0.3s;
-        }
-
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 1rem;
-        }
-
-        header {
-            background-color: var(--header-bg);
-            border-bottom: 1px solid var(--border-color);
-            padding: 1rem 0;
-            margin-bottom: 1.5rem;
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-        }
-
-        .header-content {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .logo {
-            font-size: 1.5rem;
-            font-weight: 700;
-            color: var(--accent-color);
-        }
-
-        .controls {
-            display: flex;
-            gap: 0.75rem;
-        }
-
-        .control-btn {
-            background-color: var(--btn-bg);
-            border: none;
-            color: var(--text-color);
-            padding: 0.5rem 1rem;
-            border-radius: 4px;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            font-size: 0.9rem;
-            transition: background-color 0.2s;
-        }
-
-        .control-btn:hover {
-            background-color: var(--btn-hover);
-        }
-
-        .theme-toggle {
-            background: none;
-            border: none;
-            color: var(--text-color);
-            cursor: pointer;
-            font-size: 1.2rem;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            transition: background-color 0.2s;
-        }
-
-        .theme-toggle:hover {
-            background-color: var(--btn-bg);
-        }
-
-        .editor-container {
-            display: flex;
-            border-radius: 6px;
-            overflow: hidden;
-            box-shadow: var(--editor-shadow);
-            background-color: var(--editor-bg);
-            height: calc(100vh - 200px);
-            min-height: 400px;
-        }
-
-        .line-numbers {
-            background-color: var(--line-number-bg);
-            color: var(--line-number-color);
-            padding: 1rem 0.5rem;
-            text-align: right;
-            font-family: 'Fira Code', monospace;
-            font-size: 0.9rem;
-            min-width: 3.5rem;
-            user-select: none;
-            overflow-y: hidden;
-            border-right: 1px solid var(--border-color);
-        }
-
-        .line-numbers div {
-            padding: 0 0.5rem;
-            height: 1.5rem;
-        }
-
-        #editor, #viewer {
-            flex-grow: 1;
-            padding: 1rem;
-            font-family: 'Fira Code', monospace;
-            font-size: 0.9rem;
-            background-color: var(--editor-bg);
-            color: var(--text-color);
-            border: none;
-            resize: none;
-            outline: none;
-            white-space: pre;
-            overflow-y: auto;
-            tab-size: 4;
-            line-height: 1.5rem;
-            height: 100%;
-        }
-
-        #viewer {
-            display: none;
-        }
-
-        .viewer-active #editor {
-            display: none;
-        }
-
-        .viewer-active #viewer {
-            display: block;
-        }
-
-        .notification {
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            padding: 0.75rem 1.25rem;
-            background-color: var(--notification-bg);
-            color: var(--notification-text);
-            border-radius: 4px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            transition: transform 0.3s, opacity 0.3s;
-            transform: translateY(-10px);
-            opacity: 0;
-            pointer-events: none;
-        }
-
-        .notification.show {
-            transform: translateY(0);
-            opacity: 1;
-        }
-
-        .footer {
-            text-align: center;
-            padding: 1rem 0;
-            margin-top: 1.5rem;
-            font-size: 0.9rem;
-            color: var(--line-number-color);
-        }
-
-        .language-selector {
-            padding: 0.5rem;
-            background-color: var(--btn-bg);
-            color: var(--text-color);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            font-size: 0.9rem;
-        }
-
-        /* For mobile responsiveness */
-        @media (max-width: 768px) {
-            .header-content {
-                flex-direction: column;
-                gap: 1rem;
-            }
-
-            .controls {
-                width: 100%;
-                justify-content: center;
-                flex-wrap: wrap;
-            }
-
-            .editor-container {
-                height: calc(100vh - 260px);
-            }
-        }
-    </style>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/json.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+    <script src="/index.js" type="text/javascript"></script>
+    <link rel="stylesheet" href="/index.css">
 </head>
 <body>
 <header>
     <div class="container">
         <div class="header-content">
-            <div class="logo">PasteBoard</div>
+            <div><span class="logo">PasteBoard </span><small>by <a style="color:inherit;" href="https://github.com/Walzen665">Walzen665</a></small></div>
             <div class="controls">
                 <select class="language-selector" id="language-selector">
                     <option value="plaintext">Plain Text</option>
                     <option value="javascript" selected>JavaScript</option>
+                    <option value="json">JSON</option>
                     <option value="html">HTML</option>
                     <option value="css">CSS</option>
                     <option value="python">Python</option>
@@ -301,232 +77,5 @@
         <p>Pastes will be stored for 2 hours only.</p>
     </div>
 </footer>
-
-<script>
-    // DOM Elements
-    const editor = document.getElementById('editor');
-    const viewer = document.getElementById('viewer');
-    const lineNumbers = document.getElementById('line-numbers');
-    const themeToggle = document.getElementById('theme-toggle');
-    const sunIcon = themeToggle.querySelector('.sun-icon');
-    const moonIcon = themeToggle.querySelector('.moon-icon');
-    const saveBtn = document.getElementById('save-btn');
-    const copyBtn = document.getElementById('copy-btn');
-    const newBtn = document.getElementById('new-btn');
-    const notification = document.getElementById('notification');
-    const languageSelector = document.getElementById('language-selector');
-    const editorContainer = document.querySelector('.editor-container');
-
-    // Initial theme setup
-    function setInitialTheme() {
-        const savedTheme = localStorage.getItem('theme');
-        if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-            document.documentElement.setAttribute('data-theme', 'dark');
-            sunIcon.style.display = 'none';
-            moonIcon.style.display = 'block';
-        } else {
-            document.documentElement.setAttribute('data-theme', 'light');
-            sunIcon.style.display = 'block';
-            moonIcon.style.display = 'none';
-        }
-    }
-
-    setInitialTheme();
-
-    // Theme toggle
-    themeToggle.addEventListener('click', () => {
-        if (document.documentElement.getAttribute('data-theme') === 'dark') {
-            document.documentElement.setAttribute('data-theme', 'light');
-            localStorage.setItem('theme', 'light');
-            sunIcon.style.display = 'block';
-            moonIcon.style.display = 'none';
-        } else {
-            document.documentElement.setAttribute('data-theme', 'dark');
-            localStorage.setItem('theme', 'dark');
-            sunIcon.style.display = 'none';
-            moonIcon.style.display = 'block';
-        }
-    });
-
-    // Line numbers
-    function updateLineNumbers() {
-        const lineCount = editor.value.split('\n').length;
-        lineNumbers.innerHTML = '';
-
-        for (let i = 1; i <= lineCount; i++) {
-            const div = document.createElement('div');
-            div.textContent = i;
-            lineNumbers.appendChild(div);
-        }
-    }
-
-    // Handle editor input
-    editor.addEventListener('input', () => {
-        updateLineNumbers();
-
-        // Update viewer content with syntax highlighting
-        viewer.textContent = editor.value;
-        viewer.className = `language-${languageSelector.value}`;
-        hljs.highlightElement(viewer);
-    });
-
-    // Handle tab key in editor
-    editor.addEventListener('keydown', (e) => {
-        if (e.key === 'Tab') {
-            e.preventDefault();
-            const start = editor.selectionStart;
-            const end = editor.selectionEnd;
-
-            // Insert tab at cursor position
-            editor.value = editor.value.substring(0, start) + '    ' + editor.value.substring(end);
-
-            // Move cursor after the inserted tab
-            editor.selectionStart = editor.selectionEnd = start + 4;
-
-            // Update line numbers
-            updateLineNumbers();
-        }
-    });
-
-    // Save paste
-    saveBtn.addEventListener('click', async () => {
-        if (!editor.value.trim()) {
-            showNotification('Cannot save empty paste!', 'error');
-            return;
-        }
-
-        try {
-            const response = await fetch('/api/pastes', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'text/plain'
-                },
-                body: editor.value
-            });
-
-            const data = await response.json();
-
-            if (response.ok) {
-                // Add language as a hash parameter with query param format
-                const url = `${window.location.origin}/?id=${data.id}#${languageSelector.value}`;
-                navigator.clipboard.writeText(url);
-                showNotification('Paste saved! URL copied to clipboard.', 'success');
-
-                // Update URL without reloading the page
-                window.history.pushState({}, '', `/?id=${data.id}#${languageSelector.value}`);
-
-                // Switch to viewer mode
-                editorContainer.classList.add('viewer-active');
-            } else {
-                showNotification(`Error: ${data.error}`, 'error');
-            }
-        } catch (error) {
-            showNotification('Failed to save paste. Please try again.', 'error');
-            console.error('Save error:', error);
-        }
-    });
-
-    // Copy to clipboard
-    copyBtn.addEventListener('click', () => {
-        if (editorContainer.classList.contains('viewer-active')) {
-            navigator.clipboard.writeText(viewer.textContent);
-        } else {
-            navigator.clipboard.writeText(editor.value);
-        }
-        showNotification('Content copied to clipboard!', 'success');
-    });
-
-    // Create new paste
-    newBtn.addEventListener('click', () => {
-        editor.value = '';
-        updateLineNumbers();
-        window.history.pushState({}, '', '/'); // Reset URL to homepage
-        editorContainer.classList.remove('viewer-active');
-        languageSelector.value = 'javascript';
-    });
-
-    // Language change
-    languageSelector.addEventListener('change', () => {
-        if (editorContainer.classList.contains('viewer-active')) {
-            viewer.className = `language-${languageSelector.value}`;
-            hljs.highlightElement(viewer);
-
-            // Update URL hash
-            const urlParams = new URLSearchParams(window.location.search);
-            const pasteId = urlParams.get('id');
-            if (pasteId) {
-                window.history.replaceState({}, '', `/?id=${pasteId}#${languageSelector.value}`);
-            }
-        }
-    });
-
-    // Show notification
-    function showNotification(message, type = 'success') {
-        notification.textContent = message;
-        notification.className = 'notification show';
-
-        if (type === 'error') {
-            notification.style.backgroundColor = 'var(--error-bg, #fa5252)';
-            notification.style.color = 'var(--error-text, #fff5f5)';
-        } else {
-            notification.style.backgroundColor = 'var(--notification-bg)';
-            notification.style.color = 'var(--notification-text)';
-        }
-
-        setTimeout(() => {
-            notification.className = 'notification';
-        }, 3000);
-    }
-
-    // Load paste on page load
-    async function loadPasteFromUrl() {
-        // Get the id from query parameter instead of path
-        const urlParams = new URLSearchParams(window.location.search);
-        const pasteId = urlParams.get('id');
-
-        if (pasteId) {
-            try {
-                const response = await fetch(`/api/pastes/${pasteId}`);
-
-                if (response.ok) {
-                    const content = await response.text();
-                    editor.value = content;
-                    updateLineNumbers();
-
-                    // Check for language in URL hash
-                    const hash = window.location.hash.substring(1);
-                    if (hash && document.querySelector(`option[value="${hash}"]`)) {
-                        languageSelector.value = hash;
-                    }
-
-                    // Update viewer
-                    viewer.textContent = content;
-                    viewer.className = `language-${languageSelector.value}`;
-                    hljs.highlightElement(viewer);
-
-                    // Switch to viewer mode
-                    editorContainer.classList.add('viewer-active');
-                } else {
-                    showNotification('Paste not found or has expired.', 'error');
-                }
-            } catch (error) {
-                showNotification('Failed to load paste.', 'error');
-                console.error('Load error:', error);
-            }
-        }
-    }
-
-    // Initialize
-    document.addEventListener('DOMContentLoaded', () => {
-        updateLineNumbers();
-        loadPasteFromUrl();
-        hljs.highlightAll();
-    });
-
-    // Sync scroll between line numbers and editor
-    editor.addEventListener('scroll', () => {
-        lineNumbers.scrollTop = editor.scrollTop;
-    });
-</script>
 </body>
 </html>
\ No newline at end of file
diff --git a/public/index.js b/public/index.js
new file mode 100644
index 0000000..90b1f5b
--- /dev/null
+++ b/public/index.js
@@ -0,0 +1,288 @@
+$(document).ready(function() {
+    // DOM Elements
+    const $editor = $('#editor');
+    const $viewer = $('#viewer');
+    const $lineNumbers = $('#line-numbers');
+    const $themeToggle = $('#theme-toggle');
+    const $sunIcon = $themeToggle.find('.sun-icon');
+    const $moonIcon = $themeToggle.find('.moon-icon');
+    const $saveBtn = $('#save-btn');
+    const $copyBtn = $('#copy-btn');
+    const $newBtn = $('#new-btn');
+    const $notification = $('#notification');
+    const $languageSelector = $('#language-selector');
+    const $editorContainer = $('.editor-container');
+
+    // Format JSON button
+    const $formatJsonBtn = $('<button>', {
+        class: 'control-btn',
+        id: 'format-json-btn',
+        html: `
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 3H3C1.89 3 1 3.89 1 5V19C1 20.11 1.89 21 3 21H21C22.11 21 23 20.11 23 19V5C23 3.89 22.11 3 21 3Z"></path><path d="M7 8L12 13L17 8"></path></svg>
+      Format JSON
+    `
+    });
+
+    $('.controls').prepend($formatJsonBtn);
+
+    // Initial theme setup
+    function setInitialTheme() {
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            $('html').attr('data-theme', 'dark');
+            $sunIcon.hide();
+            $moonIcon.show();
+        } else {
+            $('html').attr('data-theme', 'light');
+            $sunIcon.show();
+            $moonIcon.hide();
+        }
+    }
+
+    // Line numbers
+    function updateLineNumbers() {
+        const lineCount = $editor.val().split('\n').length;
+        $lineNumbers.empty();
+
+        for (let i = 1; i <= lineCount; i++) {
+            $('<div>').text(i).appendTo($lineNumbers);
+        }
+    }
+
+    // Auto-detect JSON content
+    function detectContentType(content) {
+        try {
+            JSON.parse(content);
+            return 'json';
+        } catch (e) {
+            return $languageSelector.val() || 'javascript';
+        }
+    }
+
+    // Show notification
+    function showNotification(message, type = 'success') {
+        $notification.text(message).addClass('show');
+
+        if (type === 'error') {
+            $notification.css({
+                'background-color': 'var(--error-bg, #fa5252)',
+                'color': 'var(--error-text, #fff5f5)'
+            });
+        } else {
+            $notification.css({
+                'background-color': 'var(--notification-bg)',
+                'color': 'var(--notification-text)'
+            });
+        }
+
+        setTimeout(() => {
+            $notification.removeClass('show');
+        }, 3000);
+    }
+
+    // Load paste on page load
+    async function loadPasteFromUrl() {
+        const urlParams = new URLSearchParams(window.location.search);
+        const pasteId = urlParams.get('id');
+
+        if (pasteId) {
+            try {
+                const response = await fetch(`/api/pastes/${pasteId}`);
+
+                if (response.ok) {
+                    const content = await response.text();
+                    $editor.val(content);
+                    updateLineNumbers();
+
+                    // Auto-detect JSON content
+                    if (content.trim().startsWith('{') || content.trim().startsWith('[')) {
+                        try {
+                            JSON.parse(content);
+                            $languageSelector.val('json');
+                        } catch (e) {
+                            // Not valid JSON, check URL hash or use default
+                            const hash = window.location.hash.substring(1);
+                            if (hash && $(`option[value="${hash}"]`).length) {
+                                $languageSelector.val(hash);
+                            }
+                        }
+                    } else {
+                        // Check for language in URL hash
+                        const hash = window.location.hash.substring(1);
+                        if (hash && $(`option[value="${hash}"]`).length) {
+                            $languageSelector.val(hash);
+                        }
+                    }
+
+                    // Update viewer
+                    $viewer.text(content);
+                    $viewer.attr('class', `language-${$languageSelector.val()}`);
+                    hljs.highlightElement($viewer[0]);
+
+                    // Switch to viewer mode
+                    $editorContainer.addClass('viewer-active');
+                } else {
+                    showNotification('Paste not found or has expired.', 'error');
+                }
+            } catch (error) {
+                showNotification('Failed to load paste.', 'error');
+                console.error('Load error:', error);
+            }
+        }
+    }
+
+    // Initialize
+    setInitialTheme();
+    updateLineNumbers();
+    loadPasteFromUrl();
+    hljs.highlightAll();
+
+    // Theme toggle
+    $themeToggle.on('click', () => {
+        if ($('html').attr('data-theme') === 'dark') {
+            $('html').attr('data-theme', 'light');
+            localStorage.setItem('theme', 'light');
+            $sunIcon.show();
+            $moonIcon.hide();
+        } else {
+            $('html').attr('data-theme', 'dark');
+            localStorage.setItem('theme', 'dark');
+            $sunIcon.hide();
+            $moonIcon.show();
+        }
+    });
+
+    // Handle editor input
+    $editor.on('input', () => {
+        updateLineNumbers();
+
+        // Update viewer content with syntax highlighting
+        $viewer.text($editor.val());
+
+        // Try to auto-detect JSON if content changes significantly
+        if ($editor.val().trim().startsWith('{') || $editor.val().trim().startsWith('[')) {
+            const detectedLanguage = detectContentType($editor.val());
+            if (detectedLanguage === 'json') {
+                $languageSelector.val('json');
+            }
+        }
+
+        $viewer.attr('class', `language-${$languageSelector.val()}`);
+        hljs.highlightElement($viewer[0]);
+    });
+
+    // Handle tab key in editor
+    $editor.on('keydown', (e) => {
+        if (e.key === 'Tab') {
+            e.preventDefault();
+            const start = e.target.selectionStart;
+            const end = e.target.selectionEnd;
+
+            // Insert tab at cursor position
+            const value = $editor.val();
+            $editor.val(value.substring(0, start) + '    ' + value.substring(end));
+
+            // Move cursor after the inserted tab
+            e.target.selectionStart = e.target.selectionEnd = start + 4;
+
+            // Update line numbers
+            updateLineNumbers();
+        }
+    });
+
+    // Save paste
+    $saveBtn.on('click', async () => {
+        if (!$editor.val().trim()) {
+            showNotification('Cannot save empty paste!', 'error');
+            return;
+        }
+
+        try {
+            const response = await fetch('/api/pastes', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'text/plain'
+                },
+                body: $editor.val()
+            });
+
+            const data = await response.json();
+
+            if (response.ok) {
+                // Add language as a hash parameter with query param format
+                const url = `${window.location.origin}/?id=${data.id}#${$languageSelector.val()}`;
+                navigator.clipboard.writeText(url);
+                showNotification('Paste saved! URL copied to clipboard.', 'success');
+
+                // Update URL without reloading the page
+                window.history.pushState({}, '', `/?id=${data.id}#${$languageSelector.val()}`);
+
+                // Switch to viewer mode
+                $editorContainer.addClass('viewer-active');
+            } else {
+                showNotification(`Error: ${data.error}`, 'error');
+            }
+        } catch (error) {
+            showNotification('Failed to save paste. Please try again.', 'error');
+            console.error('Save error:', error);
+        }
+    });
+
+    // Copy to clipboard
+    $copyBtn.on('click', () => {
+        if ($editorContainer.hasClass('viewer-active')) {
+            navigator.clipboard.writeText($viewer.text());
+        } else {
+            navigator.clipboard.writeText($editor.val());
+        }
+        showNotification('Content copied to clipboard!', 'success');
+    });
+
+    // Create new paste
+    $newBtn.on('click', () => {
+        $editor.val('');
+        updateLineNumbers();
+        window.history.pushState({}, '', '/'); // Reset URL to homepage
+        $editorContainer.removeClass('viewer-active');
+        $languageSelector.val('javascript');
+    });
+
+    // Language change
+    $languageSelector.on('change', () => {
+        if ($editorContainer.hasClass('viewer-active')) {
+            $viewer.attr('class', `language-${$languageSelector.val()}`);
+            hljs.highlightElement($viewer[0]);
+
+            // Update URL hash
+            const urlParams = new URLSearchParams(window.location.search);
+            const pasteId = urlParams.get('id');
+            if (pasteId) {
+                window.history.replaceState({}, '', `/?id=${pasteId}#${$languageSelector.val()}`);
+            }
+        }
+    });
+
+    // Format JSON handler
+    $formatJsonBtn.on('click', () => {
+        if ($languageSelector.val() === 'json') {
+            try {
+                const parsed = JSON.parse($editor.val());
+                const formatted = JSON.stringify(parsed, null, 2);
+                $editor.val(formatted);
+                $viewer.text(formatted);
+                hljs.highlightElement($viewer[0]);
+                updateLineNumbers();
+                showNotification('JSON formatted successfully!', 'success');
+            } catch (e) {
+                showNotification('Invalid JSON: ' + e.message, 'error');
+            }
+        } else {
+            showNotification('Select JSON language first', 'error');
+        }
+    });
+
+    // Sync scroll between line numbers and editor
+    $editor.on('scroll', () => {
+        $lineNumbers.scrollTop($editor.scrollTop());
+    });
+});
\ No newline at end of file