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

---
 public/index.html | 720 ++++++++++++++++++++++++++++++----------------
 1 file changed, 472 insertions(+), 248 deletions(-)
diff --git a/public/index.html b/public/index.html
index b64d684..2b5a7d2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,305 +3,529 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CodeShare - Modern Pastebin</title>
-
-    <!-- jQuery -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
-
+    <title>PasteBoard - Simple Code Sharing</title>
     <!-- Highlight.js for syntax highlighting -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
+    <!-- Load common languages -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/javascript.min.js"></script>
+    <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);
+        }
 
-    <!-- Font Awesome for icons -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+        [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);
+        }
 
-    <!-- Google Fonts -->
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap">
-    <link rel="stylesheet" href="/index.css">
+        * {
+            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>
 </head>
-<body data-theme="light">
+<body>
 <header>
-    <div class="container header-content">
-        <div class="logo">
-            <i class="fas fa-code"></i>
-            <span>CodeShare</span>
-        </div>
-        <button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
-            <i class="fas fa-moon"></i>
-        </button>
-    </div>
-</header>
-
-<main class="container">
-    <div class="editor-container">
-        <div class="editor-header">
-            <h2 id="pageTitle">Create New Paste</h2>
-            <div id="viewControls" style="display:none;">
-                <button class="btn btn-secondary" id="newPasteBtn">
-                    <i class="fas fa-plus"></i> New Paste
+    <div class="container">
+        <div class="header-content">
+            <div class="logo">PasteBoard</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="html">HTML</option>
+                    <option value="css">CSS</option>
+                    <option value="python">Python</option>
+                    <option value="java">Java</option>
+                    <option value="csharp">C#</option>
+                    <option value="php">PHP</option>
+                    <option value="ruby">Ruby</option>
+                    <option value="go">Go</option>
+                    <option value="rust">Rust</option>
+                    <option value="swift">Swift</option>
+                    <option value="kotlin">Kotlin</option>
+                </select>
+                <button class="control-btn" id="save-btn">
+                    <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="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
+                    Save
+                </button>
+                <button class="control-btn" id="copy-btn">
+                    <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"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
+                    Copy
+                </button>
+                <button class="control-btn" id="new-btn">
+                    <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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="12" y1="18" x2="12" y2="12"></line><line x1="9" y1="15" x2="15" y2="15"></line></svg>
+                    New
+                </button>
+                <button class="theme-toggle" id="theme-toggle">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="sun-icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="moon-icon" style="display: none;"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
                 </button>
             </div>
         </div>
-
-        <div class="editor-wrapper">
-            <div class="line-numbers" id="lineNumbers"></div>
-            <div class="editor-area">
-                <textarea id="editor" placeholder="Paste or type your code here..."></textarea>
-                <div class="viewer-area code-viewer" id="codeViewer">
-                    <pre><code id="highlightedCode"></code></pre>
-                </div>
-                <div class="loading-overlay" id="loadingOverlay">
-                    <div class="spinner"></div>
-                </div>
-            </div>
-        </div>
-
-        <div class="action-buttons" id="actionButtons">
-            <button class="btn btn-primary" id="saveBtn">
-                <i class="fas fa-save"></i> Save Paste
-            </button>
-        </div>
-
-        <div class="url-container" id="urlContainer">
-            <div class="url-display" id="urlDisplay"></div>
-            <button class="copy-btn" id="copyBtn">
-                <i class="fas fa-copy"></i>
-            </button>
-        </div>
     </div>
-</main>
+</header>
 
-<div class="toast" id="toast">
-    <i class="fas fa-info-circle"></i>
-    <span id="toastMessage"></span>
+<div class="container">
+    <div class="editor-container">
+        <div class="line-numbers" id="line-numbers">
+            <div>1</div>
+        </div>
+        <textarea id="editor" spellcheck="false" placeholder="Paste or type your code here..."></textarea>
+        <pre><code id="viewer" class="language-javascript"></code></pre>
+    </div>
 </div>
 
-<footer>
+<div class="notification" id="notification"></div>
+
+<footer class="footer">
     <div class="container">
-        <p>&copy; 2025 CodeShare. A modern pastebin application.</p>
+        <p>Pastes will be stored for 2 hours only.</p>
     </div>
 </footer>
 
 <script>
-    $(document).ready(function() {
-        // API Endpoint (adjust based on your server settings)
-        const baseUrl = window.location.origin;
-        const API_BASE_URL = baseUrl + '/api';
+    // 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');
 
-        // Theme toggle functionality
-        $('#themeToggle').on('click', function() {
-            const currentTheme = $('body').attr('data-theme');
-            const newTheme = currentTheme === 'light' ? 'dark' : 'light';
-            $('body').attr('data-theme', newTheme);
-
-            // Update icon
-            if (newTheme === 'dark') {
-                $(this).html('<i class="fas fa-sun"></i>');
-            } else {
-                $(this).html('<i class="fas fa-moon"></i>');
-            }
-
-            // Store preference
-            localStorage.setItem('theme', newTheme);
-        });
-
-        // Check for saved theme preference
+    // Initial theme setup
+    function setInitialTheme() {
         const savedTheme = localStorage.getItem('theme');
-        if (savedTheme) {
-            $('body').attr('data-theme', savedTheme);
-            if (savedTheme === 'dark') {
-                $('#themeToggle').html('<i class="fas fa-sun"></i>');
-            }
+        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';
         }
+    }
 
-        // Line numbers functionality
-        function updateLineNumbers() {
-            const text = $('#editor').val();
-            const lines = text.split('\n');
-            const lineCount = lines.length;
+    setInitialTheme();
 
-            let lineNumbersHtml = '';
-            for (let i = 1; i <= lineCount; i++) {
-                lineNumbersHtml += i + '<br>';
-            }
-
-            $('#lineNumbers').html(lineNumbersHtml);
+    // 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';
         }
+    });
 
-        // Update line numbers on input
-        $('#editor').on('input scroll keyup', function() {
-            updateLineNumbers();
-            // Sync scroll position between textarea and line numbers
-            $('#lineNumbers').scrollTop($(this).scrollTop());
-        });
+    // Line numbers
+    function updateLineNumbers() {
+        const lineCount = editor.value.split('\n').length;
+        lineNumbers.innerHTML = '';
 
-        // Initialize line numbers
+        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();
 
-        // Save paste functionality
-        $('#saveBtn').on('click', function() {
-            const content = $('#editor').val();
+        // Update viewer content with syntax highlighting
+        viewer.textContent = editor.value;
+        viewer.className = `language-${languageSelector.value}`;
+        hljs.highlightElement(viewer);
+    });
 
-            if (!content.trim()) {
-                showToast('Please enter some content first!', 'warning');
-                return;
-            }
+    // Handle tab key in editor
+    editor.addEventListener('keydown', (e) => {
+        if (e.key === 'Tab') {
+            e.preventDefault();
+            const start = editor.selectionStart;
+            const end = editor.selectionEnd;
 
-            $('#loadingOverlay').fadeIn(200);
+            // Insert tab at cursor position
+            editor.value = editor.value.substring(0, start) + '    ' + editor.value.substring(end);
 
-            $.ajax({
-                url: `${API_BASE_URL}/pastes`,
+            // 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',
-                data: content,
-                contentType: 'text/plain',
-                success: function(response) {
-                    const pasteUrl = `${window.location.origin}${window.location.pathname}?id=${response.id}`;
-                    $('#urlDisplay').text(pasteUrl);
-                    $('#urlContainer').fadeIn();
-                    showToast('Paste created successfully!', 'success');
-
-                    // Update URL without reloading page
-                    history.pushState({}, '', `?id=${response.id}`);
-
-                    // Copy to clipboard automatically
-                    copyToClipboard(pasteUrl);
+                headers: {
+                    'Content-Type': 'text/plain'
                 },
-                error: function(xhr) {
-                    console.error('Error creating paste:', xhr);
-                    showToast('Failed to create paste. Please try again.', 'error');
-                },
-                complete: function() {
-                    $('#loadingOverlay').fadeOut(200);
-                }
+                body: editor.value
             });
-        });
 
-        // Copy URL functionality
-        $('#copyBtn').on('click', function() {
-            const url = $('#urlDisplay').text();
-            copyToClipboard(url);
-        });
+            const data = await response.json();
 
-        function copyToClipboard(text) {
-            navigator.clipboard.writeText(text)
-                .then(function() {
-                    showToast('URL copied to clipboard!', 'success');
-                })
-                .catch(function(err) {
-                    console.error('Failed to copy: ', err);
-                    showToast('Failed to copy URL.', 'error');
-                });
-        }
+            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');
 
-        // Toast notification
-        function showToast(message, type = 'info') {
-            let icon = 'fa-info-circle';
+                // Update URL without reloading the page
+                window.history.pushState({}, '', `/?id=${data.id}#${languageSelector.value}`);
 
-            switch(type) {
-                case 'success':
-                    icon = 'fa-check-circle';
-                    break;
-                case 'error':
-                    icon = 'fa-exclamation-circle';
-                    break;
-                case 'warning':
-                    icon = 'fa-exclamation-triangle';
-                    break;
+                // 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);
+        }
+    });
 
-            $('#toast').html(`<i class="fas ${icon}"></i><span>${message}</span>`);
-            $('#toast').addClass('show');
+    // 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');
+    });
 
-            setTimeout(function() {
-                $('#toast').removeClass('show');
-            }, 3000);
+    // 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)';
         }
 
-        // Check for paste ID in URL
-        function getParameterByName(name) {
-            const url = window.location.href;
-            name = name.replace(/[\[\]]/g, '\\$&');
-            const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
-            const results = regex.exec(url);
-            if (!results) return null;
-            if (!results[2]) return '';
-            return decodeURIComponent(results[2].replace(/\+/g, ' '));
-        }
+        setTimeout(() => {
+            notification.className = 'notification';
+        }, 3000);
+    }
 
-        const pasteId = getParameterByName('id');
+    // 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) {
-            // We're viewing an existing paste
-            $('#pageTitle').text('Viewing Paste');
-            $('#editor').hide();
-            $('#codeViewer').show();
-            $('#actionButtons').hide();
-            $('#viewControls').show();
+            try {
+                const response = await fetch(`/api/pastes/${pasteId}`);
 
-            $('#loadingOverlay').fadeIn(200);
+                if (response.ok) {
+                    const content = await response.text();
+                    editor.value = content;
+                    updateLineNumbers();
 
-            $.ajax({
-                url: `${API_BASE_URL}/pastes/${pasteId}`,
-                method: 'GET',
-                success: function(response) {
-                    const code = response;
-
-                    // Clear any existing content first
-                    $('#highlightedCode').empty();
-
-                    // Use .text() to safely set the content without HTML interpretation
-                    $('#highlightedCode').text(code);
-
-                    // Apply syntax highlighting
-                    hljs.highlightAll();
-
-                    // Update line numbers for the viewer
-                    const lines = code.split('\n');
-                    const lineCount = lines.length;
-
-                    let lineNumbersHtml = '';
-                    for (let i = 1; i <= lineCount; i++) {
-                        lineNumbersHtml += i + '<br>';
+                    // Check for language in URL hash
+                    const hash = window.location.hash.substring(1);
+                    if (hash && document.querySelector(`option[value="${hash}"]`)) {
+                        languageSelector.value = hash;
                     }
 
-                    $('#lineNumbers').html(lineNumbersHtml);
-                },
-                error: function(xhr) {
-                    console.error('Error fetching paste:', xhr);
-                    showToast('Failed to load paste. It may have expired.', 'error');
-                    // Redirect to new paste creation after a delay
-                    setTimeout(function() {
-                        window.location.href = window.location.pathname;
-                    }, 2000);
-                },
-                complete: function() {
-                    $('#loadingOverlay').fadeOut(200);
+                    // 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');
                 }
-            });
-        }
-
-        // New paste button
-        $('#newPasteBtn').on('click', function() {
-            window.location.href = window.location.pathname;
-        });
-
-        // Handle tab key in textarea
-        $('#editor').on('keydown', function(e) {
-            if (e.key === 'Tab') {
-                e.preventDefault();
-                const start = this.selectionStart;
-                const end = this.selectionEnd;
-
-                // Insert tab character
-                this.value = this.value.substring(0, start) + '    ' + this.value.substring(end);
-
-                // Move cursor position
-                this.selectionStart = this.selectionEnd = start + 4;
-
-                // Update line numbers
-                updateLineNumbers();
+            } 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>
