Update index.html

- Add rate limiting
- Add paste size log

.gitignore

@@ -1 +1,130 @@
-/node_modules
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*

Dockerfile

@@ -0,0 +1,20 @@
+# Use an official Node.js runtime as a parent image
+FROM node:18-alpine
+
+# Set the working directory inside the container
+WORKDIR /usr/src/app
+
+# Copy package.json and package-lock.json to the working directory
+COPY package*.json ./
+
+# Install any needed packages
+RUN npm install --production
+
+# Copy the rest of the application code to the container
+COPY . .
+
+# Expose the port the app runs on
+EXPOSE 3000
+
+# Start the application
+CMD ["node", "server.js"]

package.json

@@ -1,17 +1,16 @@
 {
-  "name": "dev",
+  "name": "pasteboard",
   "version": "1.0.0",
-  "description": "",
+  "description": "A simple Hastebin alternative for pasting text and code snippets.",
   "license": "ISC",
-  "author": "",
+  "author": "Walzen665",
   "type": "commonjs",
   "main": "index.js",
   "scripts": {
-    "start": "nodemon server.js",
+    "start": "node server.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "express": "^5.1.0",
-    "nodemon": "^3.1.9"
+    "express": "^5.1.0"
   }
 }

public/index.css

@@ -1,381 +0,0 @@
-: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);
-}
-
-[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);
-}
-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: 'Inter', sans-serif;
-    background-color: var(--bg-primary);
-    color: var(--text-primary);
-    transition: background-color 0.3s, color 0.3s;
-    line-height: 1.6;
-}
-
-.container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 20px;
-}
-
-header {
-    background-color: var(--bg-secondary);
-    border-bottom: 1px solid var(--border-color);
-    padding: 15px 0;
-    box-shadow: 0 1px 3px var(--shadow-color);
-}
-
-.header-content {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.logo {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    font-weight: 700;
-    font-size: 1.5rem;
-    color: var(--accent-color);
-}
-
-.logo i {
-    font-size: 1.75rem;
-}
-
-.theme-toggle {
-    background: none;
-    border: none;
-    cursor: pointer;
-    color: var(--text-secondary);
-    font-size: 1.25rem;
-    padding: 8px;
-    border-radius: 50%;
-    transition: background-color 0.2s;
-}
-
-.theme-toggle:hover {
-    background-color: var(--border-color);
-    color: var(--text-primary);
-}
-
-main {
-    padding: 30px 0;
-}
-
-.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;
-    overflow: hidden;
-    box-shadow: 0 2px 5px var(--shadow-color);
-    position: relative;
-    height: 500px;
-}
-
-.line-numbers {
-    background-color: var(--line-numbers-bg);
-    color: var(--line-numbers-text);
-    padding: 15px 10px;
-    text-align: right;
-    user-select: none;
-    overflow-y: hidden;
-    min-width: 50px;
-    font-family: 'Fira Code', monospace;
-    font-size: 0.9rem;
-    border-right: 1px solid var(--border-color);
-}
-
-.editor-area {
-    flex-grow: 1;
-    position: relative;
-    display: flex;
-}
-
-#editor {
-    width: 100%;
-    height: 100%;
-    padding: 15px;
-    background-color: var(--editor-bg);
-    color: var(--text-primary);
-    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%;
-    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;
-}
-
-.code-viewer pre,
-.code-viewer code {
-    margin: 0;
-    padding: 0;
-    white-space: pre;
-    overflow-x: auto;
-    width: 100%;
-    font-family: 'Fira Code', monospace;
-}
-
-/* Ensure highlight.js doesn't add extra space */
-.hljs {
-    padding: 0 !important;
-    background: transparent !important;
-}
-
-.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 {
-    position: fixed;
-    bottom: 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);
-    opacity: 0;
-    transition: all 0.3s;
-    z-index: 1000;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-.toast.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;
-    text-align: center;
-    color: var(--text-secondary);
-    font-size: 0.9rem;
-    margin-top: 30px;
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-    .editor-wrapper {
-        height: 400px;
-    }
-
-    .action-buttons {
-        flex-direction: column;
-    }
-
-    .btn {
-        width: 100%;
-        justify-content: center;
-    }
-}
-
-/* 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);
-}

public/index.html

@@ -1,308 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<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>
-
-    <!-- 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>
-
-    <!-- Font Awesome for icons -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-
-    <!-- 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">
-</head>
-<body data-theme="light">
-<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
-                </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>
-
-<div class="toast" id="toast">
-    <i class="fas fa-info-circle"></i>
-    <span id="toastMessage"></span>
-</div>
-
-<footer>
-    <div class="container">
-        <p>&copy; 2025 CodeShare. A modern pastebin application.</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';
-
-        // 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
-        const savedTheme = localStorage.getItem('theme');
-        if (savedTheme) {
-            $('body').attr('data-theme', savedTheme);
-            if (savedTheme === 'dark') {
-                $('#themeToggle').html('<i class="fas fa-sun"></i>');
-            }
-        }
-
-        // Line numbers functionality
-        function updateLineNumbers() {
-            const text = $('#editor').val();
-            const lines = text.split('\n');
-            const lineCount = lines.length;
-
-            let lineNumbersHtml = '';
-            for (let i = 1; i <= lineCount; i++) {
-                lineNumbersHtml += i + '<br>';
-            }
-
-            $('#lineNumbers').html(lineNumbersHtml);
-        }
-
-        // Update line numbers on input
-        $('#editor').on('input scroll keyup', function() {
-            updateLineNumbers();
-            // Sync scroll position between textarea and line numbers
-            $('#lineNumbers').scrollTop($(this).scrollTop());
-        });
-
-        // Initialize line numbers
-        updateLineNumbers();
-
-        // Save paste functionality
-        $('#saveBtn').on('click', function() {
-            const content = $('#editor').val();
-
-            if (!content.trim()) {
-                showToast('Please enter some content first!', 'warning');
-                return;
-            }
-
-            $('#loadingOverlay').fadeIn(200);
-
-            $.ajax({
-                url: `${API_BASE_URL}/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);
-                },
-                error: function(xhr) {
-                    console.error('Error creating paste:', xhr);
-                    showToast('Failed to create paste. Please try again.', 'error');
-                },
-                complete: function() {
-                    $('#loadingOverlay').fadeOut(200);
-                }
-            });
-        });
-
-        // Copy URL functionality
-        $('#copyBtn').on('click', function() {
-            const url = $('#urlDisplay').text();
-            copyToClipboard(url);
-        });
-
-        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');
-                });
-        }
-
-        // Toast notification
-        function showToast(message, type = 'info') {
-            let icon = 'fa-info-circle';
-
-            switch(type) {
-                case 'success':
-                    icon = 'fa-check-circle';
-                    break;
-                case 'error':
-                    icon = 'fa-exclamation-circle';
-                    break;
-                case 'warning':
-                    icon = 'fa-exclamation-triangle';
-                    break;
-            }
-
-            $('#toast').html(`<i class="fas ${icon}"></i><span>${message}</span>`);
-            $('#toast').addClass('show');
-
-            setTimeout(function() {
-                $('#toast').removeClass('show');
-            }, 3000);
-        }
-
-        // 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, ' '));
-        }
-
-        const pasteId = getParameterByName('id');
-
-        if (pasteId) {
-            // We're viewing an existing paste
-            $('#pageTitle').text('Viewing Paste');
-            $('#editor').hide();
-            $('#codeViewer').show();
-            $('#actionButtons').hide();
-            $('#viewControls').show();
-
-            $('#loadingOverlay').fadeIn(200);
-
-            $.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>';
-                    }
-
-                    $('#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);
-                }
-            });
-        }
-
-        // 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();
-            }
-        });
-    });
-</script>
-</body>
-</html>

server.js

@@ -1,58 +1,59 @@
-// Import necessary modules
 const express = require('express');
 const path = require('path');
 
-// --- Configuration ---
-const PORT = process.env.PORT || 3000; // Use environment variable or default to 3000
-const PASTE_TTL_HOURS = 2;
-const PASTE_TTL_MS = PASTE_TTL_HOURS * 60 * 60 * 1000; // Time-to-live in milliseconds
+const PORT = process.env.PORT || 3000;
+const PASTE_TTL_HOURS = 3;
+const PASTE_TTL_MS = PASTE_TTL_HOURS * 60 * 60 * 1000;
 
-// --- In-Memory Storage ---
-// Using a Map for efficient key-based storage and deletion
-const pastes = new Map(); // Stores { id: content }
+const pastes = new Map();
+const ipLastPaste = new Map(); // Tracks the last paste time for each IP
+const RATE_LIMIT_MS = 10 * 1000; // 10 seconds rate limit
+const IP_CLEANUP_INTERVAL = 30 * 60 * 1000; // Clean up IP records every 30 minutes
 
-// --- Express App Setup ---
 const app = express();
 
-// Middleware to parse plain text request bodies (like Hastebin)
-// Limit set to 1MB, adjust as needed
-app.use(express.text({ limit: '1mb', type: 'text/plain' }));
-app.use(express.json()); // For JSON API responses
+app.use(express.text({ limit: '10mb', type: 'text/plain' }));
+app.use(express.json());
+app.use(express.static('static'));
 
-// Serve static files from the 'public' directory
-app.use(express.static('public'));
-
-// Function to generate a unique ID without crypto
 function generateUniqueId() {
     const timestamp = Date.now().toString(36);
     const randomPart = Math.random().toString(36).substring(2, 10);
     return `${timestamp}-${randomPart}`;
 }
 
-// --- API Routes ---
-
-/**
- * POST /api/pastes
- * Creates a new paste.
- * Expects the raw text content in the request body.
- * Responds with the generated ID for the paste.
- */
 app.post('/api/pastes', (req, res) => {
     const content = req.body;
+    const clientIp = req.ip;
+    const now = Date.now();
+
+    // Check rate limit
+    if (ipLastPaste.has(clientIp)) {
+        const lastPasteTime = ipLastPaste.get(clientIp);
+        const timeElapsed = now - lastPasteTime;
+
+        if (timeElapsed < RATE_LIMIT_MS) {
+            return res.status(429).json({
+                error: 'Rate limit exceeded. Please wait before creating another paste.',
+                retryAfter: Math.ceil((RATE_LIMIT_MS - timeElapsed) / 1000)
+            });
+        }
+    }
 
-    // Basic validation: Ensure content is present and is a string
     if (!content || typeof content !== 'string' || content.trim() === '') {
         return res.status(400).json({ error: 'Paste content cannot be empty.' });
     }
 
-    // Generate a unique ID without using crypto
+    // Calculate paste size in bytes
+    const pasteSize = Buffer.byteLength(content, 'utf8');
+    const sizeInKB = (pasteSize / 1024).toFixed(2);
+
     const id = generateUniqueId();
-
-    // Store the paste content in the map
     pastes.set(id, content);
-    console.log(`[${new Date().toISOString()}] Paste created with ID: ${id}`);
+    ipLastPaste.set(clientIp, now);
+
+    console.log(`[${new Date().toISOString()}] Paste created with ID: ${id} | Size: ${sizeInKB} KB (${pasteSize} bytes)`);
 
-    // Schedule the paste for deletion after the TTL
     setTimeout(() => {
         if (pastes.has(id)) {
             pastes.delete(id);
@@ -60,21 +61,14 @@ app.post('/api/pastes', (req, res) => {
         }
     }, PASTE_TTL_MS);
 
-    // Respond with the ID
     res.status(201).json({ id: id });
 });
 
-/**
- * GET /api/pastes/:id
- * Retrieves the content of a specific paste by its ID.
- * Responds with the raw text content or 404 if not found.
- */
 app.get('/api/pastes/:id', (req, res) => {
     const id = req.params.id;
 
     if (pastes.has(id)) {
         const content = pastes.get(id);
-        // Send raw text content
         res.setHeader('Content-Type', 'text/plain; charset=utf-8');
         res.status(200).send(content);
     } else {
@@ -82,22 +76,35 @@ app.get('/api/pastes/:id', (req, res) => {
     }
 });
 
-// Serve the main HTML page for all other routes
 app.get('/', (req, res) => {
     res.sendFile(path.join(__dirname, 'public', 'index.html'));
 });
 
-// --- Start Server ---
+// Periodically clean up the IP tracking map to prevent memory leak
+setInterval(() => {
+    const now = Date.now();
+    let cleanupCount = 0;
+
+    // Remove IPs that haven't posted in the last hour (much longer than rate limit)
+    ipLastPaste.forEach((timestamp, ip) => {
+        if (now - timestamp > RATE_LIMIT_MS * 360) { // 1 hour = 360 * 10 seconds
+            ipLastPaste.delete(ip);
+            cleanupCount++;
+        }
+    });
+
+    if (cleanupCount > 0) {
+        console.log(`[${new Date().toISOString()}] Cleaned up ${cleanupCount} IP records from rate limiter`);
+    }
+}, IP_CLEANUP_INTERVAL);
+
 app.listen(PORT, () => {
     console.log(`Paste server listening on port ${PORT}`);
     console.log(`Pastes will be stored for ${PASTE_TTL_HOURS} hours.`);
     console.log(`Open http://localhost:${PORT} in your browser to use the application`);
 });
 
-// --- Graceful Shutdown (Optional but Recommended) ---
-// Handles CTRL+C in the terminal
 process.on('SIGINT', () => {
     console.log('\nShutting down server...');
-    // Perform any cleanup here if needed (though in-memory storage is lost anyway)
     process.exit(0);
 });

static/index.css

@@ -0,0 +1,227 @@
+: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);
+    }
+}

static/index.html

@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PasteBoard - Simple Code Sharing</title>
+    <!-- Highlight.js for syntax highlighting -->
+    <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>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/json.min.js"></script>
+    <!-- Logic -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>
+    <!-- Custom Scripts-->
+    <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><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>
+                    <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>
+</header>
+
+<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>
+
+<div class="notification" id="notification"></div>
+
+<footer class="footer">
+    <div class="container">
+        <p>Pastes are stored for 3 hours only. © 2025 Walzen665</p>
+        <p>Privacy Policy: All pastes are publicly accessible via the generated URL. PasteBoard tracks your IP address for spam protection for maximum of 30 minutes.</p>
+    </div>
+</footer>
+
+<div class="modal fade" id="privacyPolicyModal" tabindex="-1" aria-labelledby="privacyPolicyModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-scrollable modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="privacyPolicyModalLabel">Privacy Policy</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <h3>PasteBoard Privacy Policy</h3>
+                <p><strong>Last Updated:</strong> April 12, 2025</p>
+
+                <h4>1. Information We Collect</h4>
+                <p>PasteBoard collects and temporarily stores the following information:</p>
+                <ul>
+                    <li>Content that you paste or create on our service</li>
+                    <li>Your IP address (stored temporarily for rate limiting purposes)</li>
+                    <li>Basic usage data (such as when pastes are created and accessed)</li>
+                </ul>
+
+                <h4>2. How We Use Your Information</h4>
+                <p>We use the collected information for the following purposes:</p>
+                <ul>
+                    <li>To provide and maintain our service</li>
+                    <li>To prevent spam and abuse through IP-based rate limiting</li>
+                    <li>To improve our service based on usage patterns</li>
+                </ul>
+
+                <h4>3. Data Retention</h4>
+                <p>We implement the following data retention practices:</p>
+                <ul>
+                    <li>Pastes are automatically deleted after 3 hours</li>
+                    <li>IP addresses used for rate limiting are deleted after 1 hour of inactivity</li>
+                    <li>We do not maintain backups of expired pastes</li>
+                </ul>
+
+                <h4>4. Public Access</h4>
+                <p>Please be aware that all pastes created on PasteBoard are publicly accessible to anyone with the generated URL. Do not share sensitive or personal information through this service.</p>
+
+                <h4>5. Third-Party Services</h4>
+                <p>PasteBoard uses the following third-party services:</p>
+                <ul>
+                    <li>Highlight.js (for syntax highlighting)</li>
+                    <li>jQuery (for DOM manipulation)</li>
+                    <li>Bootstrap (for UI components)</li>
+                    <li>CDN hosting services for libraries</li>
+                </ul>
+                <p>These services may use cookies and collect usage data according to their own privacy policies.</p>
+
+                <h4>6. Changes to This Policy</h4>
+                <p>We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page.</p>
+
+                <h4>7. Contact Us</h4>
+                <p>If you have any questions about this Privacy Policy, please contact us through our <a href="https://github.com/Walzen665">GitHub page</a>.</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">I Understand</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+</body>
+</html>

static/index.js

@@ -0,0 +1,308 @@
+$(document).ready(function() {
+
+    // init privacy policy modal
+    $('.footer p:nth-child(2)').html('All pastes are publicly accessible via the generated URL. <a href="#" id="privacy-link">View the Privacy Policy</a> for more information.');
+    $('#privacy-link').click(function(e) {
+        e.preventDefault();
+        var privacyModal = new bootstrap.Modal(document.getElementById('privacyPolicyModal'));
+        privacyModal.show();
+    });
+
+    // 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
+    `,
+        css: {
+            display: $languageSelector.val() === 'json' ? 'inline-flex' : 'none'
+        }
+    });
+
+    $('.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() {
+        $viewer.text("Loading...");
+        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) {
+                    $('pre').css('width', '100%'); // Set pre width
+                    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');
+                $formatJsonBtn.show();
+            }
+        }
+
+        $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
+                $('pre').css('width', '100%'); // Set pre width
+                $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');
+        $formatJsonBtn.hide(); // Hide JSON button when switching to new paste with JavaScript
+    });
+
+    // Language change
+    $languageSelector.on('change', () => {
+        // Toggle Format JSON button visibility based on language selection
+        $formatJsonBtn.toggle($languageSelector.val() === 'json');
+
+        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', () => {
+        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');
+        }
+    });
+
+    // Sync scroll between line numbers and editor
+    $editor.on('scroll', () => {
+        $lineNumbers.scrollTop($editor.scrollTop());
+    });
+
+    $viewer.on('scroll', () => {
+        $lineNumbers.scrollTop($viewer.scrollTop());
+    });
+});