From ade7a75fa8d804381feba1bf26c75a12e9122860 Mon Sep 17 00:00:00 2001
From: imbabyninja <iamkorotaev228@icloud.com>
Date: Sat, 1 Feb 2025 16:05:51 +0500
Subject: [PATCH] enhance UI with responsive design and theme support

---
 index.html | 749 +++++++++++++++++++++++++++++++----------------------
 1 file changed, 435 insertions(+), 314 deletions(-)

diff --git a/index.html b/index.html
index d6bfa61..8a90d61 100644
--- a/index.html
+++ b/index.html
@@ -5,367 +5,532 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>Xray Config Validator</title>
 
-    <script src="wasm_exec.js"></script>
+    <script defer src="https://mmmray.github.io/xray-online/wasm_exec.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.7.2/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
 
     <style>
+        :root {
+            --primary-color: #60a5fa;
+            --primary-hover: #3b82f6;
+            --success-color: #22c55e;
+            --error-color: #ef4444;
+            --warning-color: #f59e0b;
+            --text-primary: #111827;
+            --text-secondary: #4b5563;
+            --bg-primary: #ffffff;
+            --bg-secondary: #f3f4f6;
+            --border-color: #e5e7eb;
+            --editor-bg: #ffffff;
+            --transition: all 0.3s ease;
+        }
+
+        [data-theme="dark"] {
+            --primary-color: #60a5fa;
+            --primary-hover: #3b82f6;
+            --text-primary: #e5e7eb;
+            --text-secondary: #9ca3af;
+            --bg-primary: #1e1e1e;
+            --bg-secondary: #141414;
+            --border-color: #2d2d2d;
+            --editor-bg: #1e1e1e;
+        }
+
         * {
             box-sizing: border-box;
+            margin: 0;
+            padding: 0;
         }
 
-        html,
-        body {
+        html, body {
             height: 100%;
-            padding: 0;
-            margin: 0;
-            display: flex;
-            flex-direction: column;
-            font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+            font-family: 'Inter', system-ui, -apple-system, sans-serif;
+            background-color: var(--bg-secondary);
+            color: var(--text-primary);
+            transition: var(--transition);
         }
 
         .container {
-            width: 100%;
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            max-width: 800px;
+            display: grid;
+            grid-template-rows: auto 1fr auto;
+            min-height: 100vh;
+            max-width: 1400px;
             margin: 0 auto;
-            padding: 20px;
+            padding: 1.5rem;
+            gap: 1.5rem;
         }
 
-        #editor {
-            flex: 1;
-            border-radius: 5px;
-            border: 1px solid #ced4da;
-            height: 500px;
-        }
-
-        #output {
-            padding: 10px;
-            line-height: 1.2;
-            margin-top: 10px;
-            margin-bottom: 20px;
-            border-radius: 5px;
-            border: 1px solid #ced4da;
-            text-align: center;
-            max-height: 200px;
-            overflow-y: auto;
-            flex-shrink: 0;
-        }
-
-        #output[data-status="ok"] {
-            background-color: #d4edda;
-            color: #155724;
-        }
-
-        #output[data-status="error"] {
-            background-color: #f8d7da;
-            color: #721c24;
-        }
-
-        #output[data-status="warn"] {
-            background-color: #fff3cd;
-            color: #856404;
+        .header {
+            background-color: var(--bg-primary);
+            border-radius: 1rem;
+            padding: 1.25rem 1.5rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+            border: 1px solid var(--border-color);
         }
 
-        #nav {
-            text-align: center;
+        .title {
+            font-size: 1.75rem;
+            font-weight: 600;
+            background: linear-gradient(135deg, var(--primary-color), #818cf8);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
         }
 
-        .button-group {
+        .controls {
             display: flex;
-            justify-content: flex-end;
+            gap: 1rem;
             align-items: center;
-            gap: 10px;
-            margin-bottom: 10px;
         }
 
-        .button-group button {
+        .btn {
             display: inline-flex;
             align-items: center;
             justify-content: center;
-            width: 36px;
-            height: 36px;
-            border: none;
-            border-radius: 4px;
-            font-size: 1rem;
+            padding: 0.75rem;
+            border-radius: 0.75rem;
+            background-color: var(--bg-secondary);
+            color: var(--text-primary);
+            border: 1px solid var(--border-color);
             cursor: pointer;
-            transition: background-color 0.2s ease, color 0.2s ease;
-            background-color: #f0f0f5;
-            color: #333;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            transition: var(--transition);
+            height: 2.75rem;
+            width: 2.75rem;
         }
 
-        .button-group button:hover {
-            background-color: #e0e0eb;
+        .btn:hover {
+            background-color: var(--primary-color);
+            color: white;
+            transform: translateY(-1px);
+            border-color: var(--primary-color);
         }
 
-        .button-group button:active {
-            background-color: #d0d0df;
-            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+        .btn i {
+            font-size: 1.25rem;
         }
 
-
-        h1 {
-            font-size: 1.8rem;
-            font-weight: 500;
-            line-height: 1.2;
-            margin-top: 0;
+        #editor-container {
+            position: relative;
+            height: calc(100vh - 14rem);
+            min-height: 400px;
+            border-radius: 1rem;
+            overflow: hidden;
+            background-color: var(--editor-bg);
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+            border: 1px solid var(--border-color);
         }
 
-        a {
-            color: inherit;
+        #editor {
+            width: 100%;
+            height: 100%;
         }
 
-        .cool-color {
-            background-image: linear-gradient(to right, #e70000, #ff8c00, #ffef00, #00811f, #0044ff, #760089);
-            -webkit-background-clip: text;
-            color: transparent;
+        #output {
+            padding: 1.25rem;
+            border-radius: 1rem;
+            font-size: 0.9375rem;
+            line-height: 1.6;
+            background-color: var(--bg-primary);
+            border: 1px solid var(--border-color);
+            transition: var(--transition);
         }
 
-        body.dark-theme {
-            background-color: #121212;
-            color: #ffffff;
+        #output[data-status="ok"] {
+            border-color: var(--success-color);
+            color: var(--success-color);
+            background-color: rgba(34, 197, 94, 0.1);
         }
 
-        body.dark-theme #editor {
-            border: 1px solid #555;
+        #output[data-status="error"] {
+            border-color: var(--error-color);
+            color: var(--error-color);
+            background-color: rgba(239, 68, 68, 0.1);
         }
 
-        body.dark-theme #output {
-            border: 1px solid #555;
+        #output[data-status="warn"] {
+            border-color: var(--warning-color);
+            color: var(--warning-color);
+            background-color: rgba(245, 158, 11, 0.1);
         }
 
-        body.dark-theme .button-group button {
-            background-color: #333;
-            color: #fff;
+        .version-badge {
+            display: inline-flex;
+            align-items: center;
+            padding: 0.5rem 1rem;
+            background-color: var(--bg-secondary);
+            border-radius: 9999px;
+            font-size: 0.875rem;
+            font-weight: 500;
+            color: var(--text-secondary);
+            border: 1px solid var(--border-color);
         }
 
-        body.dark-theme .button-group button:hover {
-            background-color: #444;
+        #loading-indicator {
+            position: fixed;
+            inset: 0;
+            background-color: rgba(0, 0, 0, 0.7);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+            backdrop-filter: blur(4px);
         }
 
-        body.dark-theme .button-group button:active {
-            background-color: #555;
+        .loader {
+            width: 48px;
+            height: 48px;
+            border: 4px solid var(--bg-primary);
+            border-bottom-color: var(--primary-color);
+            border-radius: 50%;
+            animation: rotation 1s linear infinite;
         }
 
+        @keyframes rotation {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
 
-        #loading-indicator {
-            display: flex;
-            justify-content: center;
-            align-items: center;
+        .tooltip {
             position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0.5);
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+            padding: 0.625rem 1rem;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
             z-index: 1000;
+            pointer-events: none;
+            opacity: 0;
+            transition: var(--transition);
+            border: 1px solid var(--border-color);
         }
 
-        #loading-spinner {
-            border: 8px solid #f3f3f3;
-            border-top: 8px solid #3498db;
-            border-radius: 50%;
-            width: 50px;
-            height: 50px;
-            animation: spin 2s linear infinite;
+        .tooltip.show {
+            opacity: 1;
         }
 
-        @keyframes spin {
-            0% {
-                transform: rotate(0deg);
+        @media (max-width: 768px) {
+            .container {
+                padding: 1rem;
+                gap: 1rem;
             }
-            100% {
-                transform: rotate(360deg);
+
+            .header {
+                flex-direction: column;
+                gap: 1rem;
+                padding: 1.25rem;
+                text-align: center;
+            }
+
+            .title {
+                font-size: 1.5rem;
+            }
+
+            #editor-container {
+                height: calc(100vh - 16rem);
+            }
+
+            .controls {
+                width: 100%;
+                justify-content: center;
+            }
+
+            .btn {
+                height: 2.5rem;
+                width: 2.5rem;
+                padding: 0.625rem;
             }
         }
 
-        #theme-toggle i {
-            margin-right: 0;
+        @media (max-width: 480px) {
+            .container {
+                padding: 0.75rem;
+            }
+
+            .header {
+                padding: 1rem;
+                border-radius: 0.75rem;
+            }
+
+            .version-badge {
+                padding: 0.375rem 0.875rem;
+                font-size: 0.8125rem;
+            }
         }
     </style>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs/loader.min.js"></script>
 </head>
 <body>
 <div id="loading-indicator">
-    <div id="loading-spinner"></div>
+    <div class="loader"></div>
 </div>
 
+<div class="tooltip" id="tooltip"></div>
+
 <div class="container">
-    <div class="button-group">
-        <span id="version-info">Loading… </span>
-        <button id="theme-toggle"><i class="fas fa-adjust"></i></button>
-        <button id="share-config"><i class="fas fa-share-alt"></i></button>
+    <header class="header">
+        <h1 class="title">Xray Config Validator</h1>
+        <div class="controls">
+            <span class="version-badge" id="version-info">Loading...</span>
+            <button class="btn" id="theme-toggle" title="Toggle theme">
+                <i class="fas fa-adjust"></i>
+            </button>
+            <button class="btn" id="share-config" title="Share configuration">
+                <i class="fas fa-share-alt"></i>
+            </button>
+            <button class="btn" id="format-config" title="Format JSON">
+                <i class="fas fa-code"></i>
+            </button>
+        </div>
+    </header>
+
+    <div id="editor-container">
+        <div id="editor"></div>
     </div>
 
-    <nav id="nav">
-        <h1>Xray Config Validator</h1>
-    </nav>
-    <div id="editor"></div>
     <div id="output">
         Start typing your Xray config in the editor above.<br>
         Hover over fields for documentation.
-        <span class="cool-color">Autocomplete</span> is available.
+        <span style="color: var(--primary-color)">Autocomplete</span> is available.
     </div>
 </div>
 
-
 <script>
-    const go = new Go();
-    const isReady = new Promise((resolve) => {
-        window.onWasmInitialized = resolve;
-    });
-
-    const output = document.getElementById("output");
-
-    (async () => {
-        try {
-            const result = await WebAssembly.instantiateStreaming(fetch('main.wasm'), go.importObject);
-            go.run(result.instance);
-            await isReady;
-            document.getElementById("version-info").innerText = `v${XrayGetVersion()}`;
-        } catch (error) {
-            console.error("Error loading WASM:", error);
-            document.getElementById("version-info").innerText = "Error loading Xray. Check the browser console.";
-            output.dataset.status = "error";
-            output.innerText = "Error loading Xray. Check the browser console.";
-        } finally {
+    window.addEventListener('DOMContentLoaded', async () => {
+        if (typeof Go === 'undefined') {
+            console.error('WebAssembly support is not available');
+            document.getElementById("version-info").innerText = "Error loading";
+            document.getElementById("output").dataset.status = "error";
+            document.getElementById("output").innerText = "Error: WebAssembly support is not available";
             document.getElementById("loading-indicator").style.display = "none";
+            return;
         }
-    })();
-
-    require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs' } });
-    require(['vs/editor/editor.main'], async function () {
 
-        const editorElement = document.getElementById('editor');
+        const go = new Go();
+        const isReady = new Promise((resolve) => {
+            window.onWasmInitialized = resolve;
+        });
 
-        let currentTheme = 'vs-light';
+        const output = document.getElementById("output");
+        let editor;
+        let currentTheme = localStorage.getItem('theme') ||
+            (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
 
-        function updateEditorAndPageTheme() {
-            if (currentTheme === 'vs-light') {
-                document.body.classList.remove('dark-theme');
-            } else {
-                document.body.classList.add('dark-theme');
+        function setTheme(theme) {
+            document.documentElement.setAttribute('data-theme', theme);
+            currentTheme = theme;
+            localStorage.setItem('theme', theme);
+            if (editor) {
             }
-            monaco.editor.setTheme(currentTheme);
+
+            const themeIcon = document.querySelector('#theme-toggle i');
+            themeIcon.className = theme === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
         }
 
-        const editor = monaco.editor.create(editorElement, {
-            language: 'json',
-            theme: currentTheme,
-            automaticLayout: true
-        });
+        setTheme(currentTheme);
+
+        const tooltip = document.getElementById('tooltip');
+        function showTooltip(message, element) {
+            const rect = element.getBoundingClientRect();
+            tooltip.textContent = message;
+            tooltip.style.left = `${rect.left}px`;
+            tooltip.style.top = `${rect.bottom + 5}px`;
+            tooltip.classList.add('show');
+        }
 
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateEditorAndPageTheme);
-        updateEditorAndPageTheme();
+        function hideTooltip() {
+            tooltip.classList.remove('show');
+        }
 
+        document.querySelectorAll('.btn').forEach(btn => {
+            btn.addEventListener('mouseenter', () => showTooltip(btn.title, btn));
+            btn.addEventListener('mouseleave', hideTooltip);
+        });
 
-        function validateJSON(text) {
+        (async () => {
             try {
-                JSON.parse(text);
-                return null;
+                const result = await WebAssembly.instantiateStreaming(fetch('https://mmmray.github.io/xray-online/main.wasm'), go.importObject);
+                go.run(result.instance);
+                await isReady;
+                document.getElementById("version-info").innerText = `v${XrayGetVersion()}`;
             } catch (error) {
-                return error.message;
+                console.error("Error loading WASM:", error);
+                document.getElementById("version-info").innerText = "Error loading";
+                output.dataset.status = "error";
+                output.innerText = "Error loading Xray. Check the browser console.";
+            } finally {
+                document.getElementById("loading-indicator").style.display = "none";
             }
-        }
+        })();
+
+        require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs' } });
+        require(['vs/editor/editor.main'], async function () {
+            const editorElement = document.getElementById('editor');
+            monaco.editor.defineTheme('custom-dark', {
+                base: 'vs-dark',
+                inherit: true,
+                rules: [],
+                colors: {
+                    'editor.background': '#1e1e1e',
+                    'editor.foreground': '#d4d4d4',
+                    'editor.lineHighlightBackground': '#2d2d2d',
+                    'editorLineNumber.foreground': '#6b7280',
+                    'editorLineNumber.activeForeground': '#d4d4d4',
+                    'editor.selectionBackground': '#264f78',
+                    'editor.inactiveSelectionBackground': '#3a3d41'
+                }
+            });
 
-        fetch('xray.schema.json')
-            .then(response => response.json())
-            .then(schema => {
-                monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-                    validate: true,
-                    allowComments: true,
-                    schemas: [{
-                        uri: "https://xray-config-schema",
-                        fileMatch: ["*"],
-                        schema: schema
-                    }]
-                });
-            })
-            .catch(error => {
-                console.error('Scheme load error:', error);
-                output.dataset.status = "error";
-                output.innerText = "Error loading schema. Check browser console.";
+            monaco.editor.defineTheme('custom-light', {
+                base: 'vs',
+                inherit: true,
+                rules: [],
+                colors: {
+                    'editor.background': '#ffffff',
+                    'editor.foreground': '#1f2937',
+                    'editor.lineHighlightBackground': '#f3f4f6',
+                    'editorLineNumber.foreground': '#6b7280',
+                    'editorLineNumber.activeForeground': '#111827',
+                    'editor.selectionBackground': '#b5d3ff',
+                    'editor.inactiveSelectionBackground': '#e5e7eb'
+                }
             });
 
-        function validateConfig() {
-            const jsonText = editor.getValue();
-            const validationError = validateJSON(jsonText);
+            editor = monaco.editor.create(editorElement, {
+                language: 'json',
+                theme: currentTheme === 'dark' ? 'custom-dark' : 'custom-light',
+                automaticLayout: true,
+                minimap: { enabled: true },
+                fontSize: 14,
+                lineHeight: 21,
+                padding: { top: 16, bottom: 16 },
+                scrollBeyondLastLine: false,
+                roundedSelection: true,
+                renderLineHighlight: 'all',
+                cursorBlinking: 'smooth',
+                smoothScrolling: true,
+                formatOnPaste: true,
+                formatOnType: true,
+                renderWhitespace: 'selection',
+                bracketPairColorization: { enabled: true },
+                guides: {
+                    bracketPairs: true,
+                    indentation: true
+                }
+            });
 
-            if (validationError) {
-                output.dataset.status = "error";
-                output.innerText = "Validation Error: " + validationError;
-            } else {
-                if (typeof XrayParseConfig === 'undefined') {
-                    output.dataset.status = "warn";
-                    output.innerText = "Xray is still loading. Check the browser console.";
-                } else {
-                    let validationResult = XrayParseConfig(jsonText);
+            document.getElementById('format-config').addEventListener('click', () => {
+                try {
+                    const value = editor.getValue();
+                    const formatted = JSON.stringify(JSON.parse(value), null, 2);
+                    editor.setValue(formatted);
+                    output.dataset.status = "ok";
+                    output.innerText = "Configuration formatted successfully!";
+                } catch (error) {
+                    output.dataset.status = "error";
+                    output.innerText = "Cannot format invalid JSON";
+                }
+            });
 
-                    if (validationResult) {
-                        output.dataset.status = "error";
-                        output.innerText = validationResult;
-                    } else {
-                        output.dataset.status = "ok";
-                        output.innerText = "Valid Xray Config!";
-                    }
+            function validateJSON(text) {
+                try {
+                    JSON.parse(text);
+                    return null;
+                } catch (error) {
+                    return error.message;
                 }
             }
-        }
 
-        window.addEventListener("resize", function () {
-            editor.layout();
-        });
-
-        const brotli = await import("https://unpkg.com/brotli-wasm@3.0.1/index.web.js?module").then(m => m.default);
-        const textEncoder = new TextEncoder();
-        const textDecoder = new TextDecoder('utf-8');
+            fetch('https://mmmray.github.io/xray-online/xray.schema.json')
+                .then(response => response.json())
+                .then(schema => {
+                    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+                        validate: true,
+                        allowComments: true,
+                        schemas: [{
+                            uri: "https://xray-config-schema",
+                            fileMatch: ["*"],
+                            schema: schema
+                        }]
+                    });
+                })
+                .catch(error => {
+                    console.error('Schema load error:', error);
+                    output.dataset.status = "error";
+                    output.innerText = "Error loading schema. Check browser console.";
+                });
 
-        document.getElementById("share-config").addEventListener("click", async () => {
+            function validateConfig() {
+                const jsonText = editor.getValue();
+                const validationError = validateJSON(jsonText);
 
-            if (!editor) {
-                console.error('Editor is not loaded');
-                return;
+                if (validationError) {
+                    output.dataset.status = "error";
+                    output.innerText = "Validation Error: " + validationError;
+                } else {
+                    if (typeof XrayParseConfig === 'undefined') {
+                        output.dataset.status = "warn";
+                        output.innerText = "Xray is still loading. Please wait...";
+                    } else {
+                        let validationResult = XrayParseConfig(jsonText);
+
+                        if (validationResult) {
+                            output.dataset.status = "error";
+                            output.innerText = validationResult;
+                        } else {
+                            output.dataset.status = "ok";
+                            output.innerText = "✓ Valid Xray Configuration";
+                        }
+                    }
+                }
             }
 
-            const config = editor.getValue();
-
-            const compressed = await brotli.compress(textEncoder.encode(config));
-            const base64String = btoa(String.fromCharCode(...compressed));
+            window.addEventListener("resize", () => editor.layout());
 
-            const baseUrl = window.location.origin + window.location.pathname;
-            const url = `${baseUrl}?c=${base64String}`;
-
-            if (navigator.clipboard && navigator.clipboard.writeText) {
-                navigator.clipboard.writeText(url).then(() => {
-                    alert("Shareable link copied to clipboard!");
-                }).catch((err) => {
-                    console.error("Failed to copy link: ", err);
-                    output.dataset.status = "warn";
-                    output.innerText = "Could not copy to clipboard. Here's the link:\n" + url;
-                });
-
-            } else {
-                output.dataset.status = "warn";
-                output.innerText = "Clipboard API not supported. Here's the link:\n" + url;
-            }
-        });
+            document.getElementById("theme-toggle").addEventListener("click", () => {
+                const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+                setTheme(newTheme);
+                 if (editor) {
+                    editor.updateOptions({
+                        theme: newTheme === 'dark' ? 'custom-dark' : 'custom-light'
+                    });
+                }
+            });
 
-        function uint8ArrayToBase64(uint8Array) {
-            return btoa(String.fromCharCode(...uint8Array));
-        }
+            const brotli = await import("https://unpkg.com/brotli-wasm@3.0.1/index.web.js?module").then(m => m.default);
+            const textEncoder = new TextEncoder();
+            const textDecoder = new TextDecoder('utf-8');
+
+            document.getElementById("share-config").addEventListener("click", async () => {
+                try {
+                    const config = editor.getValue();
+                    const compressed = await brotli.compress(textEncoder.encode(config));
+                    const base64String = btoa(String.fromCharCode(...compressed));
+                    const url = `${window.location.origin}${window.location.pathname}?c=${base64String}`;
+
+                    await navigator.clipboard.writeText(url);
+                    output.dataset.status = "ok";
+                    output.innerText = "✓ Shareable link copied to clipboard!";
+                } catch (err) {
+                    console.error("Share error:", err);
+                    output.dataset.status = "error";
+                    output.innerText = "Failed to generate shareable link";
+                }
+            });
 
-        const urlParams = new URLSearchParams(window.location.search);
-        let encodedConfig = urlParams.get('c');
+            const urlParams = new URLSearchParams(window.location.search);
+            let encodedConfig = urlParams.get('c');
 
-        function setDefaultConfigValue() {
-            editor.setValue(`{
+            function setDefaultConfigValue() {
+                editor.setValue(`{
   "inbounds": [
     {
       "listen": "127.0.0.1",
       "port": 10808,
-      "protocol": "socks",
+      "protocol": "mixed",
       "settings": {
         "udp": true
       },
@@ -409,78 +574,34 @@ <h1>Xray Config Validator</h1>
     }
   ]
 }`);
-        }
-
-        function decodeAndLoadConfig(encodedConfig) {
-            try {
-                encodedConfig = encodedConfig.replace(/ /g, '+').trim();
-
-                const base64ToUint8Array = (base64String) => {
-                    const binaryString = atob(base64String);
-                    const len = binaryString.length;
-                    const bytes = new Uint8Array(len);
-
-                    for (let i = 0; i < len; i++) {
-                        bytes[i] = binaryString.charCodeAt(i);
-                    }
-
-                    return bytes;
-                };
-
-                const compressedConfig = base64ToUint8Array(encodedConfig);
-                const decompressedConfig = brotli.decompress(compressedConfig);
-                const configText = textDecoder.decode(decompressedConfig);
-
-                editor.setValue(configText);
-
-            } catch (error) {
-                console.error("Failed to decode and decompress configuration:", error);
-                output.dataset.status = "error";
-                output.innerText = "Failed to load shared configuration. Make sure the link is valid.";
-
-                if (error instanceof DOMException && error.name === "InvalidCharacterError") {
-                    output.innerText += " Invalid Base64 encoding.";
-                } else if (error.message && error.message.startsWith("Brotli")) {
-                    output.innerText += " Brotli decompression error.";
-                }
             }
-        }
-
-
-        const themeToggle = document.getElementById("theme-toggle");
-
-        themeToggle.addEventListener("click", () => {
-            currentTheme = (currentTheme === 'vs-light') ? 'vs-dark' : 'vs-light';
-
-            updateEditorAndPageTheme();
 
-
-            const icon = themeToggle.querySelector('i');
-
-            if (currentTheme === 'vs-light') {
-                icon.classList.remove('fa-sun');
-                icon.classList.add('fa-adjust');
-            } else {
-                icon.classList.remove('fa-adjust');
-                icon.classList.add('fa-sun');
+            async function decodeAndLoadConfig(encodedConfig) {
+                try {
+                    encodedConfig = encodedConfig.replace(/ /g, '+').trim();
+                    const compressedConfig = new Uint8Array(atob(encodedConfig).split('').map(c => c.charCodeAt(0)));
+                    const decompressedConfig = brotli.decompress(compressedConfig);
+                    const configText = textDecoder.decode(decompressedConfig);
+                    editor.setValue(configText);
+                } catch (error) {
+                    console.error("Config decode error:", error);
+                    output.dataset.status = "error";
+                    output.innerText = "Failed to load shared configuration";
+                    setDefaultConfigValue();
+                }
             }
-        });
 
-        isReady.then(() => {
-            editor.onDidChangeModelContent(validateConfig);
-            validateConfig();
-
-
-            if (encodedConfig) {
-                decodeAndLoadConfig(encodedConfig);
-
-            } else {
-                setDefaultConfigValue();
-            }
+            isReady.then(() => {
+                editor.onDidChangeModelContent(validateConfig);
+                if (encodedConfig) {
+                    decodeAndLoadConfig(encodedConfig);
+                } else {
+                    setDefaultConfigValue();
+                }
+                validateConfig();
+            });
         });
-
     });
 </script>
-
 </body>
 </html>
\ No newline at end of file