From 791ddac42155b580fadec5e1fcd043b3c1d1d25a Mon Sep 17 00:00:00 2001
From: jalel <ghabri.djalel@gmail.com>
Date: Tue, 2 Dec 2025 21:19:08 +0000
Subject: [PATCH 01/23] Add interactive tree view to JSON parser

- Add Tree View button to visualize JSON structure
- Collapsible/expandable nodes with arrow controls
- Color-coded data types (strings, numbers, booleans, null, objects, arrays)
- Copy path (JSONPath) and value functionality
- Expand all / Collapse all buttons
- Toast notifications for copy actions
- Text/Tree view toggle in output panel
- Updated SEO meta tags for tree view feature
---
 resources/views/tools/json.blade.php | 343 +++++++++++++++++++++++++--
 1 file changed, 327 insertions(+), 16 deletions(-)

diff --git a/resources/views/tools/json.blade.php b/resources/views/tools/json.blade.php
index 383a322..99f05fa 100644
--- a/resources/views/tools/json.blade.php
+++ b/resources/views/tools/json.blade.php
@@ -1,16 +1,16 @@
 @extends('layouts.app')
 
-@section('title', 'JSON Formatter & Validator - Free Online Tool | Dev Tools')
-@section('meta_description', 'Free online JSON formatter, validator, and minifier. Format, beautify, minify, validate, and repair JSON data instantly. See detailed stats and error messages.')
-@section('meta_keywords', 'json formatter, json validator, json beautifier, json minifier, format json online, validate json, json parser, free json tool')
+@section('title', 'JSON Formatter, Validator & Tree Viewer - Free Online Tool | Dev Tools')
+@section('meta_description', 'Free online JSON formatter, validator, and tree viewer. Format, beautify, minify, validate, repair JSON data and visualize structure with interactive tree view. Copy paths and values easily.')
+@section('meta_keywords', 'json formatter, json validator, json beautifier, json minifier, json tree view, json visualizer, format json online, validate json, json parser, json path, free json tool')
 
 @push('schema')
 <script type="application/ld+json">
 {
     "@@context": "https://schema.org",
     "@@type": "SoftwareApplication",
-    "name": "JSON Parser",
-    "description": "Format, minify, validate, and repair JSON data",
+    "name": "JSON Parser & Tree Viewer",
+    "description": "Format, minify, validate, repair JSON data and visualize with interactive tree view",
     "url": "{{ route('tools.json') }}",
     "applicationCategory": "DeveloperApplication",
     "operatingSystem": "Any",
@@ -88,6 +88,13 @@ class="flex-1 py-2 px-4 bg-orange-600 hover:bg-orange-700 disabled:bg-gray-400 t
                     >
                         Repair
                     </button>
+                    <button
+                        @click="showTreeView()"
+                        :disabled="loading || !input.trim()"
+                        class="flex-1 py-2 px-4 bg-teal-600 hover:bg-teal-700 disabled:bg-gray-400 text-white font-medium rounded-lg transition-colors"
+                    >
+                        Tree View
+                    </button>
                 </div>
             </div>
 
@@ -133,35 +140,114 @@ class="flex-1 py-2 px-4 bg-orange-600 hover:bg-orange-700 disabled:bg-gray-400 t
         </div>
 
         <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+            <!-- Output Header with View Toggle -->
             <div class="flex items-center justify-between mb-2">
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Output</label>
-                <button
-                    x-show="output"
-                    @click="copy($event.currentTarget)"
-                    class="p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-                    title="Copy to clipboard"
-                >
-                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/>
-                    </svg>
-                </button>
+                <div class="flex items-center gap-2">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Output</label>
+                    <div x-show="treeData" class="flex rounded-lg border border-gray-300 dark:border-dark-border overflow-hidden">
+                        <button
+                            @click="viewMode = 'text'"
+                            :class="viewMode === 'text' ? 'bg-indigo-600 text-white' : 'bg-white dark:bg-dark-bg text-gray-600 dark:text-gray-400'"
+                            class="px-2 py-1 text-xs font-medium transition-colors"
+                        >
+                            Text
+                        </button>
+                        <button
+                            @click="viewMode = 'tree'"
+                            :class="viewMode === 'tree' ? 'bg-indigo-600 text-white' : 'bg-white dark:bg-dark-bg text-gray-600 dark:text-gray-400'"
+                            class="px-2 py-1 text-xs font-medium transition-colors"
+                        >
+                            Tree
+                        </button>
+                    </div>
+                </div>
+                <div class="flex items-center gap-2">
+                    <!-- Expand/Collapse All for Tree View -->
+                    <template x-if="viewMode === 'tree' && treeData">
+                        <div class="flex gap-1">
+                            <button
+                                @click="expandAll()"
+                                class="p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                                title="Expand all"
+                            >
+                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/>
+                                </svg>
+                            </button>
+                            <button
+                                @click="collapseAll()"
+                                class="p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                                title="Collapse all"
+                            >
+                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 9V4.5M9 9H4.5M9 9L3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5l5.25 5.25"/>
+                                </svg>
+                            </button>
+                        </div>
+                    </template>
+                    <button
+                        x-show="output && viewMode === 'text'"
+                        @click="copy($event.currentTarget)"
+                        class="p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                        title="Copy to clipboard"
+                    >
+                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/>
+                        </svg>
+                    </button>
+                </div>
             </div>
 
             <div x-show="error" x-text="error" class="p-3 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 rounded-lg text-sm mb-2"></div>
 
+            <!-- Text Output -->
             <textarea
+                x-show="viewMode === 'text'"
                 x-model="output"
                 readonly
                 class="textarea-code w-full h-80 p-3 border border-gray-300 dark:border-dark-border rounded-lg bg-gray-50 dark:bg-dark-bg text-gray-900 dark:text-gray-100 resize-none"
                 placeholder="Formatted JSON will appear here..."
             ></textarea>
+
+            <!-- Tree View Output -->
+            <div
+                x-show="viewMode === 'tree'"
+                x-cloak
+                class="w-full h-80 p-3 border border-gray-300 dark:border-dark-border rounded-lg bg-gray-50 dark:bg-dark-bg text-gray-900 dark:text-gray-100 overflow-auto font-mono text-sm"
+            >
+                <template x-if="treeData !== null">
+                    <div x-html="renderTree(treeData, '$')"></div>
+                </template>
+                <template x-if="treeData === null && !treeError">
+                    <p class="text-gray-400 dark:text-gray-500">Click "Tree View" to visualize JSON structure...</p>
+                </template>
+                <template x-if="treeError">
+                    <p class="text-red-500" x-text="treeError"></p>
+                </template>
+            </div>
         </div>
     </div>
+
+    <!-- Copy Notification Toast -->
+    <div
+        x-show="copyNotification"
+        x-transition:enter="transition ease-out duration-200"
+        x-transition:enter-start="opacity-0 translate-y-2"
+        x-transition:enter-end="opacity-100 translate-y-0"
+        x-transition:leave="transition ease-in duration-150"
+        x-transition:leave-start="opacity-100 translate-y-0"
+        x-transition:leave-end="opacity-0 translate-y-2"
+        class="fixed bottom-4 right-4 px-4 py-2 bg-gray-800 dark:bg-gray-700 text-white text-sm rounded-lg shadow-lg z-50"
+        x-text="copyNotification"
+    ></div>
 </div>
 @endsection
 
 @push('scripts')
 <script>
+// Global reference for tree view interactions
+window.jsonParserInstance = null;
+
 function jsonParser() {
     return {
         input: '',
@@ -169,6 +255,15 @@ function jsonParser() {
         error: '',
         loading: false,
         validation: null,
+        viewMode: 'text',
+        treeData: null,
+        treeError: '',
+        expandedNodes: new Set(),
+        copyNotification: '',
+
+        init() {
+            window.jsonParserInstance = this;
+        },
 
         clearValidation() {
             this.validation = null;
@@ -204,6 +299,222 @@ function jsonParser() {
             }
         },
 
+        showTreeView() {
+            if (!this.input.trim()) return;
+
+            this.treeError = '';
+            try {
+                this.treeData = JSON.parse(this.input);
+                this.viewMode = 'tree';
+                // Expand first level by default
+                this.expandedNodes = new Set(['$']);
+            } catch (e) {
+                this.treeError = 'Invalid JSON: ' + e.message;
+                this.treeData = null;
+                this.viewMode = 'tree';
+            }
+        },
+
+        toggleNode(path) {
+            if (this.expandedNodes.has(path)) {
+                this.expandedNodes.delete(path);
+            } else {
+                this.expandedNodes.add(path);
+            }
+            // Force re-render
+            this.treeData = JSON.parse(JSON.stringify(this.treeData));
+        },
+
+        expandAll() {
+            this.collectAllPaths(this.treeData, '$');
+            this.treeData = JSON.parse(JSON.stringify(this.treeData));
+        },
+
+        collectAllPaths(data, path) {
+            this.expandedNodes.add(path);
+            if (data && typeof data === 'object') {
+                if (Array.isArray(data)) {
+                    data.forEach((item, index) => {
+                        this.collectAllPaths(item, `${path}[${index}]`);
+                    });
+                } else {
+                    Object.keys(data).forEach(key => {
+                        const childPath = `${path}.${key}`;
+                        this.collectAllPaths(data[key], childPath);
+                    });
+                }
+            }
+        },
+
+        collapseAll() {
+            this.expandedNodes = new Set();
+            this.treeData = JSON.parse(JSON.stringify(this.treeData));
+        },
+
+        copyPath(path) {
+            navigator.clipboard.writeText(path).then(() => {
+                this.showCopyNotification('Path copied!');
+            });
+        },
+
+        copyValue(value) {
+            const text = typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value);
+            navigator.clipboard.writeText(text).then(() => {
+                this.showCopyNotification('Value copied!');
+            });
+        },
+
+        showCopyNotification(message) {
+            this.copyNotification = message;
+            setTimeout(() => {
+                this.copyNotification = '';
+            }, 2000);
+        },
+
+        getType(value) {
+            if (value === null) return 'null';
+            if (Array.isArray(value)) return 'array';
+            return typeof value;
+        },
+
+        getTypeColor(type) {
+            const colors = {
+                'string': 'text-green-600 dark:text-green-400',
+                'number': 'text-blue-600 dark:text-blue-400',
+                'boolean': 'text-purple-600 dark:text-purple-400',
+                'null': 'text-gray-500 dark:text-gray-400',
+                'object': 'text-yellow-600 dark:text-yellow-400',
+                'array': 'text-orange-600 dark:text-orange-400'
+            };
+            return colors[type] || 'text-gray-600 dark:text-gray-300';
+        },
+
+        getTypeIcon(type) {
+            const icons = {
+                'string': '"S"',
+                'number': '#',
+                'boolean': '?',
+                'null': '0',
+                'object': '{}',
+                'array': '[]'
+            };
+            return icons[type] || '?';
+        },
+
+        escapeHtml(str) {
+            const div = document.createElement('div');
+            div.textContent = str;
+            return div.innerHTML;
+        },
+
+        formatValue(value) {
+            const type = this.getType(value);
+            if (type === 'string') {
+                const escaped = this.escapeHtml(value);
+                const truncated = escaped.length > 50 ? escaped.substring(0, 50) + '...' : escaped;
+                return `"${truncated}"`;
+            }
+            if (type === 'null') return 'null';
+            if (type === 'boolean') return value ? 'true' : 'false';
+            if (type === 'number') return String(value);
+            return '';
+        },
+
+        renderTree(data, path, depth = 0) {
+            const type = this.getType(data);
+            const isExpanded = this.expandedNodes.has(path);
+            const indent = depth * 16;
+
+            if (type !== 'object' && type !== 'array') {
+                return this.renderLeaf(data, path, type);
+            }
+
+            const isArray = type === 'array';
+            const items = isArray ? data : Object.entries(data);
+            const count = isArray ? data.length : Object.keys(data).length;
+            const bracket = isArray ? ['[', ']'] : ['{', '}'];
+
+            let html = `<div class="tree-node" style="padding-left: ${indent}px;">`;
+
+            // Toggle button and bracket
+            html += `<span class="inline-flex items-center">`;
+            if (count > 0) {
+                html += `<button onclick="window.jsonParserInstance.toggleNode('${path}')" class="w-4 h-4 mr-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 focus:outline-none">`;
+                html += isExpanded
+                    ? `<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>`
+                    : `<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/></svg>`;
+                html += `</button>`;
+            } else {
+                html += `<span class="w-4 h-4 mr-1"></span>`;
+            }
+
+            html += `<span class="${this.getTypeColor(type)} font-medium">${bracket[0]}</span>`;
+            html += `<span class="text-gray-400 text-xs ml-1">${count} ${isArray ? 'items' : 'keys'}</span>`;
+
+            // Copy buttons
+            html += `<button onclick="window.jsonParserInstance.copyPath('${path}')" class="ml-2 text-gray-400 hover:text-indigo-500 text-xs" title="Copy path">path</button>`;
+            html += `<button onclick="window.jsonParserInstance.copyValue(${this.escapeHtml(JSON.stringify(data))})" class="ml-1 text-gray-400 hover:text-indigo-500 text-xs" title="Copy value">value</button>`;
+
+            html += `</span></div>`;
+
+            // Children
+            if (isExpanded && count > 0) {
+                if (isArray) {
+                    data.forEach((item, index) => {
+                        const childPath = `${path}[${index}]`;
+                        const childType = this.getType(item);
+                        html += `<div style="padding-left: ${indent + 16}px;" class="tree-item flex items-start py-0.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded">`;
+                        html += `<span class="text-gray-500 mr-2">${index}:</span>`;
+
+                        if (childType === 'object' || childType === 'array') {
+                            html += `</div>`;
+                            html += this.renderTree(item, childPath, depth + 1);
+                        } else {
+                            html += `<span class="${this.getTypeColor(childType)}">${this.formatValue(item)}</span>`;
+                            html += `<button onclick="window.jsonParserInstance.copyPath('${childPath}')" class="ml-2 text-gray-400 hover:text-indigo-500 text-xs opacity-0 group-hover:opacity-100" title="Copy path">path</button>`;
+                            html += `</div>`;
+                        }
+                    });
+                } else {
+                    Object.entries(data).forEach(([key, value]) => {
+                        const childPath = `${path}.${key}`;
+                        const childType = this.getType(value);
+                        html += `<div style="padding-left: ${indent + 16}px;" class="tree-item flex items-start py-0.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded">`;
+                        html += `<span class="text-indigo-600 dark:text-indigo-400 mr-2">"${this.escapeHtml(key)}":</span>`;
+
+                        if (childType === 'object' || childType === 'array') {
+                            html += `</div>`;
+                            html += this.renderTree(value, childPath, depth + 1);
+                        } else {
+                            html += `<span class="${this.getTypeColor(childType)}">${this.formatValue(value)}</span>`;
+                            html += `<button onclick="window.jsonParserInstance.copyPath('${childPath}')" class="ml-2 text-gray-400 hover:text-indigo-500 text-xs" title="Copy path">path</button>`;
+                            html += `</div>`;
+                        }
+                    });
+                }
+
+                // Closing bracket
+                html += `<div style="padding-left: ${indent}px;"><span class="${this.getTypeColor(type)} font-medium">${bracket[1]}</span></div>`;
+            } else if (!isExpanded && count > 0) {
+                // Collapsed indicator
+                html += `<div style="padding-left: ${indent}px;"><span class="text-gray-400">...</span> <span class="${this.getTypeColor(type)} font-medium">${bracket[1]}</span></div>`;
+            } else {
+                // Empty object/array
+                html += `<div style="padding-left: ${indent}px;"><span class="${this.getTypeColor(type)} font-medium">${bracket[1]}</span></div>`;
+            }
+
+            return html;
+        },
+
+        renderLeaf(data, path, type) {
+            let html = `<div class="tree-leaf flex items-center py-0.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded">`;
+            html += `<span class="${this.getTypeColor(type)}">${this.formatValue(data)}</span>`;
+            html += `<button onclick="window.jsonParserInstance.copyPath('${path}')" class="ml-2 text-gray-400 hover:text-indigo-500 text-xs" title="Copy path">path</button>`;
+            html += `<button onclick="window.jsonParserInstance.copyValue(${JSON.stringify(JSON.stringify(data))})" class="ml-1 text-gray-400 hover:text-indigo-500 text-xs" title="Copy value">value</button>`;
+            html += `</div>`;
+            return html;
+        },
+
         copy(button) {
             DevTools.copyToClipboard(this.output, button);
         }

From 340739ef76c51b51c78295cf0c788fc7af73042b Mon Sep 17 00:00:00 2001
From: jalel <ghabri.djalel@gmail.com>
Date: Wed, 3 Dec 2025 00:29:24 +0000
Subject: [PATCH 02/23] Add online code editor with live preview

- Add new Code Editor tool with Ace Editor integration
- Support for HTML, CSS, and JavaScript with syntax highlighting
- Live preview panel with sandboxed iframe
- Tab-based interface for switching between files
- Auto-refresh preview on code changes (debounced)
- Dark/light theme sync with site theme
- Copy, download, and clear functionality
- Responsive layout with optional preview toggle
- Add route, controller method, and home page entry
- Add tests for code editor page
---
 app/Http/Controllers/ToolController.php     |  11 +
 package-lock.json                           |  41 +++
 package.json                                |   3 +
 resources/views/home.blade.php              |   5 +
 resources/views/tools/code-editor.blade.php | 361 ++++++++++++++++++++
 routes/web.php                              |   2 +
 tests/Feature/WebRoutesTest.php             |  33 +-
 7 files changed, 451 insertions(+), 5 deletions(-)
 create mode 100644 resources/views/tools/code-editor.blade.php

diff --git a/app/Http/Controllers/ToolController.php b/app/Http/Controllers/ToolController.php
index 315ed9b..8d6782c 100644
--- a/app/Http/Controllers/ToolController.php
+++ b/app/Http/Controllers/ToolController.php
@@ -63,6 +63,12 @@ public function index(): View
                 'route' => 'tools.url',
                 'icon' => 'link',
             ],
+            [
+                'name' => 'Code Editor',
+                'description' => 'Write HTML, CSS, JS with live preview',
+                'route' => 'tools.code-editor',
+                'icon' => 'editor',
+            ],
         ];
 
         return view('home', compact('tools'));
@@ -112,4 +118,9 @@ public function url(): View
     {
         return view('tools.url');
     }
+
+    public function codeEditor(): View
+    {
+        return view('tools.code-editor');
+    }
 }
diff --git a/package-lock.json b/package-lock.json
index a6f28c4..903858e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,9 @@
     "requires": true,
     "packages": {
         "": {
+            "dependencies": {
+                "monaco-editor": "^0.55.1"
+            },
             "devDependencies": {
                 "@tailwindcss/vite": "^4.0.0",
                 "alpinejs": "^3.15.2",
@@ -1093,6 +1096,13 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/@types/trusted-types": {
+            "version": "2.0.7",
+            "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+            "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+            "license": "MIT",
+            "optional": true
+        },
         "node_modules/@vue/reactivity": {
             "version": "3.1.5",
             "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
@@ -1302,6 +1312,15 @@
                 "node": ">=8"
             }
         },
+        "node_modules/dompurify": {
+            "version": "3.2.7",
+            "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz",
+            "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==",
+            "license": "(MPL-2.0 OR Apache-2.0)",
+            "optionalDependencies": {
+                "@types/trusted-types": "^2.0.7"
+            }
+        },
         "node_modules/dunder-proto": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -1952,6 +1971,18 @@
                 "@jridgewell/sourcemap-codec": "^1.5.5"
             }
         },
+        "node_modules/marked": {
+            "version": "14.0.0",
+            "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz",
+            "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==",
+            "license": "MIT",
+            "bin": {
+                "marked": "bin/marked.js"
+            },
+            "engines": {
+                "node": ">= 18"
+            }
+        },
         "node_modules/math-intrinsics": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -1985,6 +2016,16 @@
                 "node": ">= 0.6"
             }
         },
+        "node_modules/monaco-editor": {
+            "version": "0.55.1",
+            "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.55.1.tgz",
+            "integrity": "sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==",
+            "license": "MIT",
+            "dependencies": {
+                "dompurify": "3.2.7",
+                "marked": "14.0.0"
+            }
+        },
         "node_modules/nanoid": {
             "version": "3.3.11",
             "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
diff --git a/package.json b/package.json
index 5aee648..b039f5b 100644
--- a/package.json
+++ b/package.json
@@ -14,5 +14,8 @@
         "laravel-vite-plugin": "^2.0.0",
         "tailwindcss": "^4.0.0",
         "vite": "^7.0.7"
+    },
+    "dependencies": {
+        "monaco-editor": "^0.55.1"
     }
 }
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index fca0e9f..7de13c3 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -79,6 +79,11 @@
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
                         </svg>
                         @break
+                    @case('editor')
+                        <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
+                        </svg>
+                        @break
                 @endswitch
             </div>
             <div class="flex-1 min-w-0">
diff --git a/resources/views/tools/code-editor.blade.php b/resources/views/tools/code-editor.blade.php
new file mode 100644
index 0000000..102eea3
--- /dev/null
+++ b/resources/views/tools/code-editor.blade.php
@@ -0,0 +1,361 @@
+@extends('layouts.app')
+
+@section('title', 'Online Code Editor - Live HTML/CSS/JS Editor | Dev Tools')
+@section('meta_description', 'Free online code editor with live preview. Write HTML, CSS, JavaScript with real-time preview in your browser.')
+@section('meta_keywords', 'online code editor, live code editor, html editor, css editor, javascript editor, code playground, free code editor, web editor')
+
+@push('schema')
+<script type="application/ld+json">
+{
+    "@@context": "https://schema.org",
+    "@@type": "SoftwareApplication",
+    "name": "Online Code Editor",
+    "description": "Free online code editor with live preview for HTML, CSS, and JavaScript",
+    "url": "{{ route('tools.code-editor') }}",
+    "applicationCategory": "DeveloperApplication",
+    "operatingSystem": "Any",
+    "offers": {
+        "@@type": "Offer",
+        "price": "0",
+        "priceCurrency": "USD"
+    },
+    "author": {
+        "@@type": "Person",
+        "name": "Ghabri Djalel"
+    }
+}
+</script>
+@endpush
+
+@push('styles')
+<style>
+    .ace-editor-container {
+        height: 500px;
+        width: 100%;
+    }
+    .tab-active {
+        border-bottom: 2px solid #4f46e5 !important;
+        color: #4f46e5 !important;
+    }
+    .dark .tab-active {
+        border-bottom-color: #818cf8 !important;
+        color: #818cf8 !important;
+    }
+    .toast {
+        animation: slideIn 0.3s ease-out;
+    }
+    @keyframes slideIn {
+        from { transform: translateY(100%); opacity: 0; }
+        to { transform: translateY(0); opacity: 1; }
+    }
+</style>
+@endpush
+
+@section('content')
+<div x-data="codeEditor()" class="space-y-4">
+    <!-- Header -->
+    <div class="flex items-center justify-between">
+        <div>
+            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Code Editor</h1>
+            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Write HTML, CSS, JS with live preview</p>
+        </div>
+        <a href="{{ route('home') }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline">&larr; Back</a>
+    </div>
+
+    <!-- Toolbar -->
+    <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-3">
+        <div class="flex flex-wrap items-center gap-3">
+            <!-- Font Size -->
+            <div class="flex items-center gap-2">
+                <label class="text-sm text-gray-600 dark:text-gray-400">Font:</label>
+                <select x-model="fontSize" @change="updateFontSize()" class="text-sm px-2 py-1 rounded border border-gray-300 dark:border-dark-border bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100">
+                    <option value="12">12px</option>
+                    <option value="14">14px</option>
+                    <option value="16">16px</option>
+                    <option value="18">18px</option>
+                    <option value="20">20px</option>
+                </select>
+            </div>
+
+            <div class="h-6 w-px bg-gray-300 dark:bg-dark-border hidden sm:block"></div>
+
+            <!-- Actions -->
+            <div class="flex items-center gap-2">
+                <button @click="copyCode()" class="p-2 rounded hover:bg-gray-100 dark:hover:bg-dark-border transition-colors" title="Copy Code">
+                    <svg class="w-4 h-4 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
+                    </svg>
+                </button>
+                <button @click="downloadCode()" class="p-2 rounded hover:bg-gray-100 dark:hover:bg-dark-border transition-colors" title="Download File">
+                    <svg class="w-4 h-4 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
+                    </svg>
+                </button>
+                <button @click="clearEditor()" class="p-2 rounded hover:bg-gray-100 dark:hover:bg-dark-border transition-colors" title="Clear Editor">
+                    <svg class="w-4 h-4 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+                    </svg>
+                </button>
+            </div>
+
+            <div class="flex-1"></div>
+
+            <!-- Preview Toggle -->
+            <label class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 cursor-pointer">
+                <input type="checkbox" x-model="showPreview" class="rounded border-gray-300 dark:border-dark-border text-indigo-600 focus:ring-indigo-500">
+                Live Preview
+            </label>
+        </div>
+    </div>
+
+    <!-- Main Editor Area -->
+    <div class="grid gap-4" :class="showPreview ? 'lg:grid-cols-2' : 'grid-cols-1'">
+        <!-- Editor Panel -->
+        <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border overflow-hidden">
+            <!-- Tabs -->
+            <div class="flex items-center border-b border-gray-200 dark:border-dark-border bg-gray-50 dark:bg-dark-bg">
+                <template x-for="tab in tabs" :key="tab.id">
+                    <button
+                        @click="switchTab(tab.id)"
+                        class="px-4 py-2 text-sm font-medium border-b-2 border-transparent hover:bg-gray-100 dark:hover:bg-dark-border transition-colors"
+                        :class="activeTab === tab.id ? 'tab-active bg-white dark:bg-dark-card' : 'text-gray-600 dark:text-gray-400'"
+                        x-text="tab.name"
+                    ></button>
+                </template>
+            </div>
+
+            <!-- Ace Editor Container -->
+            <div id="ace-editor" class="ace-editor-container"></div>
+        </div>
+
+        <!-- Preview Panel -->
+        <div x-show="showPreview" class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border overflow-hidden">
+            <div class="flex items-center justify-between px-4 py-2 border-b border-gray-200 dark:border-dark-border bg-gray-50 dark:bg-dark-bg">
+                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Preview</span>
+                <button @click="runPreview()" class="flex items-center gap-1 px-3 py-1 text-sm bg-green-600 hover:bg-green-700 text-white rounded transition-colors">
+                    <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
+                        <path d="M8 5v14l11-7z"/>
+                    </svg>
+                    Run
+                </button>
+            </div>
+            <div style="height: 500px;" class="bg-white">
+                <iframe
+                    id="preview-frame"
+                    style="width: 100%; height: 100%; border: 0;"
+                    sandbox="allow-scripts allow-modals"
+                ></iframe>
+            </div>
+        </div>
+    </div>
+
+    <!-- Status Bar -->
+    <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border px-4 py-2">
+        <div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
+            <div class="flex items-center gap-4">
+                <span>Ln <span x-text="cursorLine">1</span>, Col <span x-text="cursorColumn">1</span></span>
+                <span x-text="tabs.find(t => t.id === activeTab)?.name || ''"></span>
+            </div>
+            <span>UTF-8</span>
+        </div>
+    </div>
+
+    <!-- Toast Notification -->
+    <div x-show="toast.show" x-transition class="fixed bottom-4 right-4 z-50 toast">
+        <div class="px-4 py-2 rounded-lg shadow-lg text-sm text-white" :class="toast.type === 'success' ? 'bg-green-600' : 'bg-red-600'">
+            <span x-text="toast.message"></span>
+        </div>
+    </div>
+</div>
+@endsection
+
+@push('scripts')
+<script src="https://cdn.jsdelivr.net/npm/ace-builds@1.32.2/src-min-noconflict/ace.min.js"></script>
+<script>
+function codeEditor() {
+    return {
+        editor: null,
+        activeTab: 'html',
+        tabs: [
+            { id: 'html', name: 'index.html', mode: 'html', content: '<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <title>My Page</title>\n</head>\n<body>\n    <h1>Hello, World!</h1>\n    <p>Start editing to see the magic happen.</p>\n</body>\n</html>' },
+            { id: 'css', name: 'style.css', mode: 'css', content: '/* Add your styles here */\n\nbody {\n    font-family: system-ui, sans-serif;\n    max-width: 800px;\n    margin: 0 auto;\n    padding: 2rem;\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n    min-height: 100vh;\n}\n\nh1 {\n    color: white;\n}\n\np {\n    color: rgba(255,255,255,0.9);\n}' },
+            { id: 'js', name: 'script.js', mode: 'javascript', content: '// Add your JavaScript here\n\nconsole.log("Hello from the code editor!");' }
+        ],
+        fontSize: '14',
+        showPreview: true,
+        cursorLine: 1,
+        cursorColumn: 1,
+        toast: { show: false, message: '', type: 'success' },
+        debounceTimer: null,
+
+        init() {
+            this.$nextTick(() => {
+                this.initAce();
+            });
+        },
+
+        initAce() {
+            // Initialize Ace Editor
+            this.editor = ace.edit('ace-editor');
+
+            // Set theme based on dark mode
+            const isDark = document.documentElement.classList.contains('dark');
+            this.editor.setTheme(isDark ? 'ace/theme/monokai' : 'ace/theme/chrome');
+
+            // Set initial content
+            const tab = this.getCurrentTab();
+            this.editor.session.setMode('ace/mode/' + tab.mode);
+            this.editor.setValue(tab.content, -1);
+
+            // Editor options
+            this.editor.setOptions({
+                fontSize: this.fontSize + 'px',
+                showPrintMargin: false,
+                tabSize: 4,
+                useSoftTabs: true,
+                wrap: true
+            });
+
+            // Track cursor position
+            this.editor.selection.on('changeCursor', () => {
+                const pos = this.editor.getCursorPosition();
+                this.cursorLine = pos.row + 1;
+                this.cursorColumn = pos.column + 1;
+            });
+
+            // Auto-update preview on change
+            this.editor.session.on('change', () => {
+                // Save to current tab
+                const tab = this.getCurrentTab();
+                if (tab) {
+                    tab.content = this.editor.getValue();
+                }
+
+                // Debounced preview update
+                if (this.showPreview) {
+                    clearTimeout(this.debounceTimer);
+                    this.debounceTimer = setTimeout(() => {
+                        this.runPreview();
+                    }, 500);
+                }
+            });
+
+            // Watch for theme changes
+            const observer = new MutationObserver(() => {
+                const isDark = document.documentElement.classList.contains('dark');
+                this.editor.setTheme(isDark ? 'ace/theme/monokai' : 'ace/theme/chrome');
+            });
+            observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+
+            // Initial preview
+            setTimeout(() => this.runPreview(), 100);
+        },
+
+        getCurrentTab() {
+            return this.tabs.find(t => t.id === this.activeTab);
+        },
+
+        switchTab(tabId) {
+            if (tabId === this.activeTab) return;
+
+            // Save current content
+            const currentTab = this.getCurrentTab();
+            if (currentTab && this.editor) {
+                currentTab.content = this.editor.getValue();
+            }
+
+            // Switch tab
+            this.activeTab = tabId;
+            const newTab = this.getCurrentTab();
+
+            if (newTab && this.editor) {
+                this.editor.session.setMode('ace/mode/' + newTab.mode);
+                this.editor.setValue(newTab.content, -1);
+            }
+        },
+
+        updateFontSize() {
+            if (this.editor) {
+                this.editor.setFontSize(this.fontSize + 'px');
+            }
+        },
+
+        runPreview() {
+            // Save current editor content
+            const currentTab = this.getCurrentTab();
+            if (currentTab && this.editor) {
+                currentTab.content = this.editor.getValue();
+            }
+
+            const htmlTab = this.tabs.find(t => t.id === 'html');
+            const cssTab = this.tabs.find(t => t.id === 'css');
+            const jsTab = this.tabs.find(t => t.id === 'js');
+
+            const html = htmlTab ? htmlTab.content : '';
+            const css = cssTab ? cssTab.content : '';
+            const js = jsTab ? jsTab.content : '';
+
+            // Extract body content or use full HTML
+            let bodyContent = html;
+            const bodyMatch = html.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
+            if (bodyMatch) {
+                bodyContent = bodyMatch[1];
+            }
+
+            const previewHtml = `<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <style>${css}</style>
+</head>
+<body>
+    ${bodyContent}
+    <script>${js}<\/script>
+</body>
+</html>`;
+
+            const iframe = document.getElementById('preview-frame');
+            if (iframe) {
+                iframe.srcdoc = previewHtml;
+            }
+        },
+
+        copyCode() {
+            if (!this.editor) return;
+
+            const content = this.editor.getValue();
+            navigator.clipboard.writeText(content).then(() => {
+                this.showToast('Copied to clipboard', 'success');
+            }).catch(() => {
+                this.showToast('Failed to copy', 'error');
+            });
+        },
+
+        downloadCode() {
+            if (!this.editor) return;
+
+            const tab = this.getCurrentTab();
+            if (!tab) return;
+
+            const content = this.editor.getValue();
+            DevTools.downloadFile(content, tab.name);
+            this.showToast(`Downloaded ${tab.name}`, 'success');
+        },
+
+        clearEditor() {
+            if (this.editor) {
+                this.editor.setValue('');
+                this.showToast('Editor cleared', 'success');
+            }
+        },
+
+        showToast(message, type = 'success') {
+            this.toast = { show: true, message, type };
+            setTimeout(() => {
+                this.toast.show = false;
+            }, 2000);
+        }
+    };
+}
+</script>
+@endpush
diff --git a/routes/web.php b/routes/web.php
index a6e00e4..ebacbfc 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -15,6 +15,7 @@
     Route::get('/uuid', [ToolController::class, 'uuid'])->name('uuid');
     Route::get('/hash', [ToolController::class, 'hash'])->name('hash');
     Route::get('/url', [ToolController::class, 'url'])->name('url');
+    Route::get('/code-editor', [ToolController::class, 'codeEditor'])->name('code-editor');
 });
 
 // Static Pages
@@ -34,6 +35,7 @@
         ['loc' => route('tools.uuid'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('tools.hash'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('tools.url'), 'priority' => '0.8', 'changefreq' => 'monthly'],
+        ['loc' => route('tools.code-editor'), 'priority' => '0.9', 'changefreq' => 'monthly'],
         ['loc' => route('about'), 'priority' => '0.5', 'changefreq' => 'monthly'],
         ['loc' => route('privacy'), 'priority' => '0.3', 'changefreq' => 'yearly'],
     ];
diff --git a/tests/Feature/WebRoutesTest.php b/tests/Feature/WebRoutesTest.php
index 511e16b..c51e3c1 100644
--- a/tests/Feature/WebRoutesTest.php
+++ b/tests/Feature/WebRoutesTest.php
@@ -27,6 +27,7 @@ public function test_home_page_displays_all_tools(): void
         $response->assertSee('UUID Generator');
         $response->assertSee('Hash Generator');
         $response->assertSee('URL Encoder');
+        $response->assertSee('Code Editor');
     }
 
     public function test_home_page_has_tool_links(): void
@@ -42,6 +43,7 @@ public function test_home_page_has_tool_links(): void
         $response->assertSee('href="' . route('tools.uuid') . '"', false);
         $response->assertSee('href="' . route('tools.hash') . '"', false);
         $response->assertSee('href="' . route('tools.url') . '"', false);
+        $response->assertSee('href="' . route('tools.code-editor') . '"', false);
     }
 
     public function test_csv_tool_page_loads(): void
@@ -207,9 +209,30 @@ public function test_url_tool_has_required_elements(): void
         $response->assertSee('Parse URL');
     }
 
+    public function test_code_editor_page_loads(): void
+    {
+        $response = $this->get('/tools/code-editor');
+
+        $response->assertStatus(200);
+        $response->assertSee('Code Editor');
+        $response->assertSee('Write HTML, CSS, JS with live preview');
+    }
+
+    public function test_code_editor_has_required_elements(): void
+    {
+        $response = $this->get('/tools/code-editor');
+
+        $response->assertStatus(200);
+        $response->assertSee('index.html');
+        $response->assertSee('style.css');
+        $response->assertSee('script.js');
+        $response->assertSee('Preview');
+        $response->assertSee('monaco-editor');
+    }
+
     public function test_all_pages_have_navigation(): void
     {
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -221,7 +244,7 @@ public function test_all_pages_have_navigation(): void
 
     public function test_all_pages_have_theme_toggle(): void
     {
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -233,7 +256,7 @@ public function test_all_pages_have_theme_toggle(): void
 
     public function test_all_pages_load_vite_assets(): void
     {
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -245,7 +268,7 @@ public function test_all_pages_load_vite_assets(): void
 
     public function test_all_tool_pages_have_back_link(): void
     {
-        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url'];
+        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor'];
 
         foreach ($toolPages as $page) {
             $response = $this->get($page);
@@ -298,7 +321,7 @@ public function test_api_routes_reject_get_requests(): void
 
     public function test_pages_have_csrf_token(): void
     {
-        $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url'];
+        $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);

From dc6d07ffe7fb16f736a0f1e60ded11a9fa58df8b Mon Sep 17 00:00:00 2001
From: jalel <ghabri.djalel@gmail.com>
Date: Wed, 3 Dec 2025 00:59:24 +0000
Subject: [PATCH 03/23] Refactor code editor with standalone Monaco integration

- Create standalone layout template without Alpine.js dependency
- Use pure vanilla JavaScript for Monaco Editor integration
- Fix Alpine.js conflict that caused page freeze in Chrome
- Update tests for new standalone structure
---
 resources/views/layouts/code-editor.blade.php | 365 +++++++++++
 resources/views/tools/code-editor.blade.php   | 593 ++++++++++--------
 tests/Feature/WebRoutesTest.php               |  16 +-
 3 files changed, 714 insertions(+), 260 deletions(-)
 create mode 100644 resources/views/layouts/code-editor.blade.php

diff --git a/resources/views/layouts/code-editor.blade.php b/resources/views/layouts/code-editor.blade.php
new file mode 100644
index 0000000..f62cc15
--- /dev/null
+++ b/resources/views/layouts/code-editor.blade.php
@@ -0,0 +1,365 @@
+<!DOCTYPE html>
+<html lang="en" id="html-root">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <title>@yield('title', 'Code Editor | Dev Tools')</title>
+    <meta name="description" content="@yield('meta_description', 'Free online code editor with live preview for HTML, CSS, and JavaScript.')">
+    <meta name="keywords" content="@yield('meta_keywords', 'online code editor, live code editor, html editor, css editor, javascript editor')">
+    <meta name="author" content="Ghabri Djalel">
+    <meta name="robots" content="index, follow">
+    <link rel="canonical" href="{{ url()->current() }}">
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="{{ asset('favicon.svg') }}">
+    <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}">
+    <meta name="theme-color" content="#4f46e5">
+
+    <!-- Open Graph -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="{{ url()->current() }}">
+    <meta property="og:title" content="@yield('title', 'Code Editor | Dev Tools')">
+    <meta property="og:description" content="@yield('meta_description')">
+    <meta property="og:site_name" content="Dev Tools">
+
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="@yield('title', 'Code Editor | Dev Tools')">
+    <meta name="twitter:description" content="@yield('meta_description')">
+
+    <!-- Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-99SGEVL1J9"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-99SGEVL1J9');
+    </script>
+
+    <!-- JSON-LD -->
+    @stack('schema')
+
+    <!-- Monaco Editor CSS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.0/min/vs/editor/editor.main.min.css">
+
+    <style>
+        :root {
+            --bg-primary: #f9fafb;
+            --bg-secondary: #ffffff;
+            --bg-tertiary: #f3f4f6;
+            --border-color: #e5e7eb;
+            --text-primary: #111827;
+            --text-secondary: #6b7280;
+            --accent: #4f46e5;
+            --accent-hover: #4338ca;
+        }
+
+        .dark {
+            --bg-primary: #0f0f0f;
+            --bg-secondary: #1a1a1a;
+            --bg-tertiary: #262626;
+            --border-color: #333333;
+            --text-primary: #ffffff;
+            --text-secondary: #a3a3a3;
+            --accent: #818cf8;
+            --accent-hover: #6366f1;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: system-ui, -apple-system, sans-serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            min-height: 100vh;
+            transition: background-color 0.2s, color 0.2s;
+        }
+
+        /* Navigation */
+        .nav {
+            background: var(--bg-secondary);
+            border-bottom: 1px solid var(--border-color);
+            padding: 0 1rem;
+            height: 56px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .nav-brand {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            text-decoration: none;
+            color: var(--text-primary);
+            font-weight: 600;
+        }
+
+        .nav-brand svg {
+            color: var(--accent);
+        }
+
+        .nav-actions {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        /* Buttons */
+        .btn {
+            padding: 0.5rem 1rem;
+            border-radius: 0.5rem;
+            border: 1px solid var(--border-color);
+            background: var(--bg-secondary);
+            color: var(--text-primary);
+            cursor: pointer;
+            font-size: 0.875rem;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            transition: all 0.15s;
+        }
+
+        .btn:hover {
+            background: var(--bg-tertiary);
+        }
+
+        .btn-icon {
+            padding: 0.5rem;
+            border: none;
+            background: transparent;
+        }
+
+        .btn-icon:hover {
+            background: var(--bg-tertiary);
+        }
+
+        .btn svg {
+            width: 1rem;
+            height: 1rem;
+        }
+
+        /* Main Layout */
+        .main-container {
+            display: flex;
+            flex-direction: column;
+            height: calc(100vh - 56px);
+        }
+
+        /* Toolbar */
+        .toolbar {
+            background: var(--bg-secondary);
+            border-bottom: 1px solid var(--border-color);
+            padding: 0.75rem 1rem;
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            flex-wrap: wrap;
+        }
+
+        .toolbar-group {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .toolbar-divider {
+            width: 1px;
+            height: 1.5rem;
+            background: var(--border-color);
+        }
+
+        .toolbar label {
+            font-size: 0.875rem;
+            color: var(--text-secondary);
+        }
+
+        .toolbar select {
+            padding: 0.375rem 0.75rem;
+            border-radius: 0.375rem;
+            border: 1px solid var(--border-color);
+            background: var(--bg-secondary);
+            color: var(--text-primary);
+            font-size: 0.875rem;
+        }
+
+        .toolbar input[type="checkbox"] {
+            accent-color: var(--accent);
+        }
+
+        /* Editor Layout */
+        .editor-layout {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            flex: 1;
+            overflow: hidden;
+        }
+
+        .editor-layout.preview-hidden {
+            grid-template-columns: 1fr;
+        }
+
+        /* Editor Panel */
+        .editor-panel {
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid var(--border-color);
+            overflow: hidden;
+        }
+
+        .editor-layout.preview-hidden .editor-panel {
+            border-right: none;
+        }
+
+        /* Tabs */
+        .tabs {
+            display: flex;
+            background: var(--bg-tertiary);
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .tab {
+            padding: 0.75rem 1rem;
+            font-size: 0.875rem;
+            color: var(--text-secondary);
+            background: transparent;
+            border: none;
+            border-bottom: 2px solid transparent;
+            cursor: pointer;
+            transition: all 0.15s;
+        }
+
+        .tab:hover {
+            color: var(--text-primary);
+            background: var(--bg-secondary);
+        }
+
+        .tab.active {
+            color: var(--accent);
+            background: var(--bg-secondary);
+            border-bottom-color: var(--accent);
+        }
+
+        /* Monaco Container */
+        #monaco-container {
+            flex: 1;
+            overflow: hidden;
+        }
+
+        /* Preview Panel */
+        .preview-panel {
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        .preview-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0.75rem 1rem;
+            background: var(--bg-tertiary);
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .preview-header span {
+            font-size: 0.875rem;
+            font-weight: 500;
+            color: var(--text-secondary);
+        }
+
+        .btn-run {
+            background: #16a34a;
+            color: white;
+            border-color: #16a34a;
+        }
+
+        .btn-run:hover {
+            background: #15803d;
+        }
+
+        #preview-frame {
+            flex: 1;
+            border: none;
+            background: white;
+        }
+
+        /* Status Bar */
+        .status-bar {
+            background: var(--bg-secondary);
+            border-top: 1px solid var(--border-color);
+            padding: 0.5rem 1rem;
+            display: flex;
+            justify-content: space-between;
+            font-size: 0.75rem;
+            color: var(--text-secondary);
+        }
+
+        .status-bar-left {
+            display: flex;
+            gap: 1rem;
+        }
+
+        /* Toast */
+        .toast {
+            position: fixed;
+            bottom: 1rem;
+            right: 1rem;
+            padding: 0.75rem 1rem;
+            border-radius: 0.5rem;
+            color: white;
+            font-size: 0.875rem;
+            z-index: 1000;
+            animation: slideIn 0.3s ease-out;
+            display: none;
+        }
+
+        .toast.show {
+            display: block;
+        }
+
+        .toast.success {
+            background: #16a34a;
+        }
+
+        .toast.error {
+            background: #dc2626;
+        }
+
+        @keyframes slideIn {
+            from { transform: translateY(100%); opacity: 0; }
+            to { transform: translateY(0); opacity: 1; }
+        }
+
+        /* Responsive */
+        @media (max-width: 768px) {
+            .editor-layout {
+                grid-template-columns: 1fr;
+                grid-template-rows: 1fr 1fr;
+            }
+
+            .editor-panel {
+                border-right: none;
+                border-bottom: 1px solid var(--border-color);
+            }
+
+            .toolbar {
+                overflow-x: auto;
+            }
+        }
+    </style>
+</head>
+<body>
+    @yield('content')
+
+    <!-- Monaco Editor Loader -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.0/min/vs/loader.min.js"></script>
+
+    @stack('scripts')
+</body>
+</html>
diff --git a/resources/views/tools/code-editor.blade.php b/resources/views/tools/code-editor.blade.php
index 102eea3..64654b8 100644
--- a/resources/views/tools/code-editor.blade.php
+++ b/resources/views/tools/code-editor.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.app')
+@extends('layouts.code-editor')
 
 @section('title', 'Online Code Editor - Live HTML/CSS/JS Editor | Dev Tools')
 @section('meta_description', 'Free online code editor with live preview. Write HTML, CSS, JavaScript with real-time preview in your browser.')
@@ -27,282 +27,315 @@
 </script>
 @endpush
 
-@push('styles')
-<style>
-    .ace-editor-container {
-        height: 500px;
-        width: 100%;
-    }
-    .tab-active {
-        border-bottom: 2px solid #4f46e5 !important;
-        color: #4f46e5 !important;
-    }
-    .dark .tab-active {
-        border-bottom-color: #818cf8 !important;
-        color: #818cf8 !important;
-    }
-    .toast {
-        animation: slideIn 0.3s ease-out;
-    }
-    @keyframes slideIn {
-        from { transform: translateY(100%); opacity: 0; }
-        to { transform: translateY(0); opacity: 1; }
-    }
-</style>
-@endpush
-
 @section('content')
-<div x-data="codeEditor()" class="space-y-4">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-        <div>
-            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Code Editor</h1>
-            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Write HTML, CSS, JS with live preview</p>
-        </div>
-        <a href="{{ route('home') }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline">&larr; Back</a>
+<!-- Navigation -->
+<nav class="nav">
+    <a href="{{ route('home') }}" class="nav-brand">
+        <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
+        </svg>
+        <span>Dev Tools</span>
+    </a>
+    <div class="nav-actions">
+        <button id="theme-toggle" class="btn btn-icon" title="Toggle theme">
+            <svg id="theme-icon-light" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
+            </svg>
+            <svg id="theme-icon-dark" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="display:none;">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
+            </svg>
+        </button>
     </div>
+</nav>
 
+<!-- Main Container -->
+<div class="main-container">
     <!-- Toolbar -->
-    <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-3">
-        <div class="flex flex-wrap items-center gap-3">
-            <!-- Font Size -->
-            <div class="flex items-center gap-2">
-                <label class="text-sm text-gray-600 dark:text-gray-400">Font:</label>
-                <select x-model="fontSize" @change="updateFontSize()" class="text-sm px-2 py-1 rounded border border-gray-300 dark:border-dark-border bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100">
-                    <option value="12">12px</option>
-                    <option value="14">14px</option>
-                    <option value="16">16px</option>
-                    <option value="18">18px</option>
-                    <option value="20">20px</option>
-                </select>
-            </div>
-
-            <div class="h-6 w-px bg-gray-300 dark:bg-dark-border hidden sm:block"></div>
+    <div class="toolbar">
+        <div class="toolbar-group">
+            <label for="font-size">Font:</label>
+            <select id="font-size">
+                <option value="12">12px</option>
+                <option value="14" selected>14px</option>
+                <option value="16">16px</option>
+                <option value="18">18px</option>
+                <option value="20">20px</option>
+            </select>
+        </div>
 
-            <!-- Actions -->
-            <div class="flex items-center gap-2">
-                <button @click="copyCode()" class="p-2 rounded hover:bg-gray-100 dark:hover:bg-dark-border transition-colors" title="Copy Code">
-                    <svg class="w-4 h-4 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
-                    </svg>
-                </button>
-                <button @click="downloadCode()" class="p-2 rounded hover:bg-gray-100 dark:hover:bg-dark-border transition-colors" title="Download File">
-                    <svg class="w-4 h-4 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
-                    </svg>
-                </button>
-                <button @click="clearEditor()" class="p-2 rounded hover:bg-gray-100 dark:hover:bg-dark-border transition-colors" title="Clear Editor">
-                    <svg class="w-4 h-4 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
-                    </svg>
-                </button>
-            </div>
+        <div class="toolbar-divider"></div>
+
+        <div class="toolbar-group">
+            <button id="btn-copy" class="btn" title="Copy code">
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
+                </svg>
+                Copy
+            </button>
+            <button id="btn-download" class="btn" title="Download file">
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
+                </svg>
+                Download
+            </button>
+            <button id="btn-clear" class="btn" title="Clear editor">
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+                </svg>
+                Clear
+            </button>
+        </div>
 
-            <div class="flex-1"></div>
+        <div style="flex:1;"></div>
 
-            <!-- Preview Toggle -->
-            <label class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 cursor-pointer">
-                <input type="checkbox" x-model="showPreview" class="rounded border-gray-300 dark:border-dark-border text-indigo-600 focus:ring-indigo-500">
+        <div class="toolbar-group">
+            <label>
+                <input type="checkbox" id="preview-toggle" checked>
                 Live Preview
             </label>
         </div>
     </div>
 
-    <!-- Main Editor Area -->
-    <div class="grid gap-4" :class="showPreview ? 'lg:grid-cols-2' : 'grid-cols-1'">
+    <!-- Editor Layout -->
+    <div id="editor-layout" class="editor-layout">
         <!-- Editor Panel -->
-        <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border overflow-hidden">
+        <div class="editor-panel">
             <!-- Tabs -->
-            <div class="flex items-center border-b border-gray-200 dark:border-dark-border bg-gray-50 dark:bg-dark-bg">
-                <template x-for="tab in tabs" :key="tab.id">
-                    <button
-                        @click="switchTab(tab.id)"
-                        class="px-4 py-2 text-sm font-medium border-b-2 border-transparent hover:bg-gray-100 dark:hover:bg-dark-border transition-colors"
-                        :class="activeTab === tab.id ? 'tab-active bg-white dark:bg-dark-card' : 'text-gray-600 dark:text-gray-400'"
-                        x-text="tab.name"
-                    ></button>
-                </template>
+            <div class="tabs">
+                <button class="tab active" data-tab="html">index.html</button>
+                <button class="tab" data-tab="css">style.css</button>
+                <button class="tab" data-tab="js">script.js</button>
             </div>
 
-            <!-- Ace Editor Container -->
-            <div id="ace-editor" class="ace-editor-container"></div>
+            <!-- Monaco Editor -->
+            <div id="monaco-container"></div>
         </div>
 
         <!-- Preview Panel -->
-        <div x-show="showPreview" class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border overflow-hidden">
-            <div class="flex items-center justify-between px-4 py-2 border-b border-gray-200 dark:border-dark-border bg-gray-50 dark:bg-dark-bg">
-                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Preview</span>
-                <button @click="runPreview()" class="flex items-center gap-1 px-3 py-1 text-sm bg-green-600 hover:bg-green-700 text-white rounded transition-colors">
-                    <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
+        <div id="preview-panel" class="preview-panel">
+            <div class="preview-header">
+                <span>Preview</span>
+                <button id="btn-run" class="btn btn-run">
+                    <svg fill="currentColor" viewBox="0 0 24 24">
                         <path d="M8 5v14l11-7z"/>
                     </svg>
                     Run
                 </button>
             </div>
-            <div style="height: 500px;" class="bg-white">
-                <iframe
-                    id="preview-frame"
-                    style="width: 100%; height: 100%; border: 0;"
-                    sandbox="allow-scripts allow-modals"
-                ></iframe>
-            </div>
+            <iframe id="preview-frame" sandbox="allow-scripts allow-modals"></iframe>
         </div>
     </div>
 
     <!-- Status Bar -->
-    <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border px-4 py-2">
-        <div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
-            <div class="flex items-center gap-4">
-                <span>Ln <span x-text="cursorLine">1</span>, Col <span x-text="cursorColumn">1</span></span>
-                <span x-text="tabs.find(t => t.id === activeTab)?.name || ''"></span>
-            </div>
-            <span>UTF-8</span>
-        </div>
-    </div>
-
-    <!-- Toast Notification -->
-    <div x-show="toast.show" x-transition class="fixed bottom-4 right-4 z-50 toast">
-        <div class="px-4 py-2 rounded-lg shadow-lg text-sm text-white" :class="toast.type === 'success' ? 'bg-green-600' : 'bg-red-600'">
-            <span x-text="toast.message"></span>
+    <div class="status-bar">
+        <div class="status-bar-left">
+            <span>Ln <span id="cursor-line">1</span>, Col <span id="cursor-col">1</span></span>
+            <span id="current-file">index.html</span>
         </div>
+        <span>UTF-8</span>
     </div>
 </div>
+
+<!-- Toast -->
+<div id="toast" class="toast"></div>
 @endsection
 
 @push('scripts')
-<script src="https://cdn.jsdelivr.net/npm/ace-builds@1.32.2/src-min-noconflict/ace.min.js"></script>
 <script>
-function codeEditor() {
-    return {
+(function() {
+    'use strict';
+
+    // State
+    const state = {
         editor: null,
+        monaco: null,
         activeTab: 'html',
-        tabs: [
-            { id: 'html', name: 'index.html', mode: 'html', content: '<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <title>My Page</title>\n</head>\n<body>\n    <h1>Hello, World!</h1>\n    <p>Start editing to see the magic happen.</p>\n</body>\n</html>' },
-            { id: 'css', name: 'style.css', mode: 'css', content: '/* Add your styles here */\n\nbody {\n    font-family: system-ui, sans-serif;\n    max-width: 800px;\n    margin: 0 auto;\n    padding: 2rem;\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n    min-height: 100vh;\n}\n\nh1 {\n    color: white;\n}\n\np {\n    color: rgba(255,255,255,0.9);\n}' },
-            { id: 'js', name: 'script.js', mode: 'javascript', content: '// Add your JavaScript here\n\nconsole.log("Hello from the code editor!");' }
-        ],
-        fontSize: '14',
-        showPreview: true,
-        cursorLine: 1,
-        cursorColumn: 1,
-        toast: { show: false, message: '', type: 'success' },
-        debounceTimer: null,
-
-        init() {
-            this.$nextTick(() => {
-                this.initAce();
-            });
+        tabs: {
+            html: {
+                name: 'index.html',
+                language: 'html',
+                content: `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>My Page</title>
+</head>
+<body>
+    <h1>Hello, World!</h1>
+    <p>Start editing to see the magic happen.</p>
+</body>
+</html>`
+            },
+            css: {
+                name: 'style.css',
+                language: 'css',
+                content: `/* Add your styles here */
+
+body {
+    font-family: system-ui, sans-serif;
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 2rem;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+}
+
+h1 {
+    color: white;
+}
+
+p {
+    color: rgba(255,255,255,0.9);
+}`
+            },
+            js: {
+                name: 'script.js',
+                language: 'javascript',
+                content: `// Add your JavaScript here
+
+console.log("Hello from the code editor!");`
+            }
         },
+        debounceTimer: null
+    };
 
-        initAce() {
-            // Initialize Ace Editor
-            this.editor = ace.edit('ace-editor');
+    // DOM Elements
+    const elements = {
+        monacoContainer: document.getElementById('monaco-container'),
+        previewFrame: document.getElementById('preview-frame'),
+        previewPanel: document.getElementById('preview-panel'),
+        editorLayout: document.getElementById('editor-layout'),
+        cursorLine: document.getElementById('cursor-line'),
+        cursorCol: document.getElementById('cursor-col'),
+        currentFile: document.getElementById('current-file'),
+        toast: document.getElementById('toast'),
+        themeToggle: document.getElementById('theme-toggle'),
+        themeIconLight: document.getElementById('theme-icon-light'),
+        themeIconDark: document.getElementById('theme-icon-dark'),
+        fontSize: document.getElementById('font-size'),
+        previewToggle: document.getElementById('preview-toggle'),
+        btnCopy: document.getElementById('btn-copy'),
+        btnDownload: document.getElementById('btn-download'),
+        btnClear: document.getElementById('btn-clear'),
+        btnRun: document.getElementById('btn-run'),
+        tabs: document.querySelectorAll('.tab')
+    };
 
-            // Set theme based on dark mode
-            const isDark = document.documentElement.classList.contains('dark');
-            this.editor.setTheme(isDark ? 'ace/theme/monokai' : 'ace/theme/chrome');
+    // Theme Management
+    function initTheme() {
+        const savedTheme = localStorage.getItem('darkMode');
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        const isDark = savedTheme !== null ? savedTheme === 'true' : prefersDark;
+        setTheme(isDark);
+    }
+
+    function setTheme(isDark) {
+        document.documentElement.classList.toggle('dark', isDark);
+        elements.themeIconLight.style.display = isDark ? 'none' : 'block';
+        elements.themeIconDark.style.display = isDark ? 'block' : 'none';
+        localStorage.setItem('darkMode', isDark);
+
+        if (state.monaco) {
+            state.monaco.editor.setTheme(isDark ? 'vs-dark' : 'vs');
+        }
+    }
+
+    function toggleTheme() {
+        const isDark = !document.documentElement.classList.contains('dark');
+        setTheme(isDark);
+    }
 
-            // Set initial content
-            const tab = this.getCurrentTab();
-            this.editor.session.setMode('ace/mode/' + tab.mode);
-            this.editor.setValue(tab.content, -1);
+    // Monaco Editor
+    function initMonaco() {
+        require.config({
+            paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.0/min/vs' }
+        });
 
-            // Editor options
-            this.editor.setOptions({
-                fontSize: this.fontSize + 'px',
-                showPrintMargin: false,
+        require(['vs/editor/editor.main'], function(monaco) {
+            state.monaco = monaco;
+            const isDark = document.documentElement.classList.contains('dark');
+            const tab = state.tabs[state.activeTab];
+
+            state.editor = monaco.editor.create(elements.monacoContainer, {
+                value: tab.content,
+                language: tab.language,
+                theme: isDark ? 'vs-dark' : 'vs',
+                fontSize: parseInt(elements.fontSize.value),
+                minimap: { enabled: false },
+                wordWrap: 'on',
+                automaticLayout: true,
                 tabSize: 4,
-                useSoftTabs: true,
-                wrap: true
+                scrollBeyondLastLine: false,
+                lineNumbers: 'on',
+                roundedSelection: true,
+                renderLineHighlight: 'line',
+                cursorBlinking: 'smooth',
+                cursorSmoothCaretAnimation: 'on',
+                smoothScrolling: true,
+                padding: { top: 10 }
             });
 
-            // Track cursor position
-            this.editor.selection.on('changeCursor', () => {
-                const pos = this.editor.getCursorPosition();
-                this.cursorLine = pos.row + 1;
-                this.cursorColumn = pos.column + 1;
+            // Cursor position tracking
+            state.editor.onDidChangeCursorPosition(function(e) {
+                elements.cursorLine.textContent = e.position.lineNumber;
+                elements.cursorCol.textContent = e.position.column;
             });
 
-            // Auto-update preview on change
-            this.editor.session.on('change', () => {
-                // Save to current tab
-                const tab = this.getCurrentTab();
-                if (tab) {
-                    tab.content = this.editor.getValue();
-                }
+            // Content change handler
+            state.editor.onDidChangeModelContent(function() {
+                state.tabs[state.activeTab].content = state.editor.getValue();
 
-                // Debounced preview update
-                if (this.showPreview) {
-                    clearTimeout(this.debounceTimer);
-                    this.debounceTimer = setTimeout(() => {
-                        this.runPreview();
-                    }, 500);
+                if (elements.previewToggle.checked) {
+                    clearTimeout(state.debounceTimer);
+                    state.debounceTimer = setTimeout(runPreview, 500);
                 }
             });
 
-            // Watch for theme changes
-            const observer = new MutationObserver(() => {
-                const isDark = document.documentElement.classList.contains('dark');
-                this.editor.setTheme(isDark ? 'ace/theme/monokai' : 'ace/theme/chrome');
-            });
-            observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
-
             // Initial preview
-            setTimeout(() => this.runPreview(), 100);
-        },
-
-        getCurrentTab() {
-            return this.tabs.find(t => t.id === this.activeTab);
-        },
-
-        switchTab(tabId) {
-            if (tabId === this.activeTab) return;
-
-            // Save current content
-            const currentTab = this.getCurrentTab();
-            if (currentTab && this.editor) {
-                currentTab.content = this.editor.getValue();
-            }
-
-            // Switch tab
-            this.activeTab = tabId;
-            const newTab = this.getCurrentTab();
+            setTimeout(runPreview, 100);
+        });
+    }
 
-            if (newTab && this.editor) {
-                this.editor.session.setMode('ace/mode/' + newTab.mode);
-                this.editor.setValue(newTab.content, -1);
-            }
-        },
+    // Tab Switching
+    function switchTab(tabId) {
+        if (tabId === state.activeTab) return;
 
-        updateFontSize() {
-            if (this.editor) {
-                this.editor.setFontSize(this.fontSize + 'px');
-            }
-        },
+        // Save current content
+        if (state.editor) {
+            state.tabs[state.activeTab].content = state.editor.getValue();
+        }
 
-        runPreview() {
-            // Save current editor content
-            const currentTab = this.getCurrentTab();
-            if (currentTab && this.editor) {
-                currentTab.content = this.editor.getValue();
-            }
+        // Update active tab
+        state.activeTab = tabId;
+        const tab = state.tabs[tabId];
 
-            const htmlTab = this.tabs.find(t => t.id === 'html');
-            const cssTab = this.tabs.find(t => t.id === 'css');
-            const jsTab = this.tabs.find(t => t.id === 'js');
+        // Update UI
+        elements.tabs.forEach(t => {
+            t.classList.toggle('active', t.dataset.tab === tabId);
+        });
+        elements.currentFile.textContent = tab.name;
 
-            const html = htmlTab ? htmlTab.content : '';
-            const css = cssTab ? cssTab.content : '';
-            const js = jsTab ? jsTab.content : '';
+        // Update editor
+        if (state.editor && state.monaco) {
+            const model = state.monaco.editor.createModel(tab.content, tab.language);
+            state.editor.setModel(model);
+        }
+    }
 
-            // Extract body content or use full HTML
-            let bodyContent = html;
-            const bodyMatch = html.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
-            if (bodyMatch) {
-                bodyContent = bodyMatch[1];
-            }
+    // Preview
+    function runPreview() {
+        const html = state.tabs.html.content;
+        const css = state.tabs.css.content;
+        const js = state.tabs.js.content;
+
+        // Extract body content or use full HTML
+        let bodyContent = html;
+        const bodyMatch = html.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
+        if (bodyMatch) {
+            bodyContent = bodyMatch[1];
+        }
 
-            const previewHtml = `<!DOCTYPE html>
+        const previewHtml = `<!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
@@ -314,48 +347,102 @@ function codeEditor() {
 </body>
 </html>`;
 
-            const iframe = document.getElementById('preview-frame');
-            if (iframe) {
-                iframe.srcdoc = previewHtml;
-            }
-        },
+        elements.previewFrame.srcdoc = previewHtml;
+    }
 
-        copyCode() {
-            if (!this.editor) return;
+    // Actions
+    function copyCode() {
+        const content = state.editor ? state.editor.getValue() : state.tabs[state.activeTab].content;
+        navigator.clipboard.writeText(content).then(function() {
+            showToast('Copied to clipboard', 'success');
+        }).catch(function() {
+            showToast('Failed to copy', 'error');
+        });
+    }
 
-            const content = this.editor.getValue();
-            navigator.clipboard.writeText(content).then(() => {
-                this.showToast('Copied to clipboard', 'success');
-            }).catch(() => {
-                this.showToast('Failed to copy', 'error');
-            });
-        },
+    function downloadCode() {
+        const tab = state.tabs[state.activeTab];
+        const content = state.editor ? state.editor.getValue() : tab.content;
+        const blob = new Blob([content], { type: 'text/plain' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = tab.name;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+        showToast('Downloaded ' + tab.name, 'success');
+    }
 
-        downloadCode() {
-            if (!this.editor) return;
+    function clearEditor() {
+        if (state.editor) {
+            state.editor.setValue('');
+            showToast('Editor cleared', 'success');
+        }
+    }
 
-            const tab = this.getCurrentTab();
-            if (!tab) return;
+    function updateFontSize() {
+        if (state.editor) {
+            state.editor.updateOptions({ fontSize: parseInt(elements.fontSize.value) });
+        }
+    }
 
-            const content = this.editor.getValue();
-            DevTools.downloadFile(content, tab.name);
-            this.showToast(`Downloaded ${tab.name}`, 'success');
-        },
+    function togglePreview() {
+        const show = elements.previewToggle.checked;
+        elements.previewPanel.style.display = show ? 'flex' : 'none';
+        elements.editorLayout.classList.toggle('preview-hidden', !show);
+        if (show) {
+            runPreview();
+        }
+    }
 
-        clearEditor() {
-            if (this.editor) {
-                this.editor.setValue('');
-                this.showToast('Editor cleared', 'success');
+    // Toast
+    function showToast(message, type) {
+        elements.toast.textContent = message;
+        elements.toast.className = 'toast show ' + type;
+        setTimeout(function() {
+            elements.toast.classList.remove('show');
+        }, 2000);
+    }
+
+    // Event Listeners
+    function initEventListeners() {
+        elements.themeToggle.addEventListener('click', toggleTheme);
+        elements.fontSize.addEventListener('change', updateFontSize);
+        elements.previewToggle.addEventListener('change', togglePreview);
+        elements.btnCopy.addEventListener('click', copyCode);
+        elements.btnDownload.addEventListener('click', downloadCode);
+        elements.btnClear.addEventListener('click', clearEditor);
+        elements.btnRun.addEventListener('click', runPreview);
+
+        elements.tabs.forEach(function(tab) {
+            tab.addEventListener('click', function() {
+                switchTab(this.dataset.tab);
+            });
+        });
+
+        // System theme change listener
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
+            if (localStorage.getItem('darkMode') === null) {
+                setTheme(e.matches);
             }
-        },
+        });
+    }
 
-        showToast(message, type = 'success') {
-            this.toast = { show: true, message, type };
-            setTimeout(() => {
-                this.toast.show = false;
-            }, 2000);
-        }
-    };
-}
+    // Initialize
+    function init() {
+        initTheme();
+        initEventListeners();
+        initMonaco();
+    }
+
+    // Start when DOM is ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+})();
 </script>
 @endpush
diff --git a/tests/Feature/WebRoutesTest.php b/tests/Feature/WebRoutesTest.php
index c51e3c1..5acbe3a 100644
--- a/tests/Feature/WebRoutesTest.php
+++ b/tests/Feature/WebRoutesTest.php
@@ -214,8 +214,8 @@ public function test_code_editor_page_loads(): void
         $response = $this->get('/tools/code-editor');
 
         $response->assertStatus(200);
-        $response->assertSee('Code Editor');
-        $response->assertSee('Write HTML, CSS, JS with live preview');
+        $response->assertSee('Dev Tools');
+        $response->assertSee('Online Code Editor');
     }
 
     public function test_code_editor_has_required_elements(): void
@@ -227,7 +227,7 @@ public function test_code_editor_has_required_elements(): void
         $response->assertSee('style.css');
         $response->assertSee('script.js');
         $response->assertSee('Preview');
-        $response->assertSee('monaco-editor');
+        $response->assertSee('monaco-container');
     }
 
     public function test_all_pages_have_navigation(): void
@@ -256,19 +256,21 @@ public function test_all_pages_have_theme_toggle(): void
 
     public function test_all_pages_load_vite_assets(): void
     {
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor'];
+        // Code editor uses standalone template without Vite
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
             $response->assertStatus(200);
-            // Vite assets are loaded via @vite directive
-            $response->assertSee('build/assets/app', false);
+            // Vite assets are loaded via @vite directive (with hash in filename)
+            $response->assertSee('assets/app-', false);
         }
     }
 
     public function test_all_tool_pages_have_back_link(): void
     {
-        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor'];
+        // Code editor uses standalone template with home link instead of back
+        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url'];
 
         foreach ($toolPages as $page) {
             $response = $this->get($page);

From d5b5dd2a14d65ea0cd7a62f6564805964ed5e89b Mon Sep 17 00:00:00 2001
From: jalel <ghabri.djalel@gmail.com>
Date: Wed, 3 Dec 2025 01:23:20 +0000
Subject: [PATCH 04/23] Add code editor enhancements: dynamic tabs, console,
 shortcuts modal

- Add keyboard shortcuts help modal with common Monaco shortcuts
- Add word wrap and minimap toggle controls in toolbar
- Add console output panel that captures log/info/warn/error from preview
- Add dynamic tabs: create new files (+) and close tabs (x)
- Add Download All as ZIP feature using JSZip
- Add Ctrl+S keybinding to download current file
- Support additional file types: .html, .css, .js, .json, .php, .sql
---
 resources/views/layouts/code-editor.blade.php | 305 +++++++++++
 resources/views/tools/code-editor.blade.php   | 489 +++++++++++++++++-
 2 files changed, 774 insertions(+), 20 deletions(-)

diff --git a/resources/views/layouts/code-editor.blade.php b/resources/views/layouts/code-editor.blade.php
index f62cc15..7b505af 100644
--- a/resources/views/layouts/code-editor.blade.php
+++ b/resources/views/layouts/code-editor.blade.php
@@ -221,6 +221,7 @@ function gtag(){dataLayer.push(arguments);}
             display: flex;
             background: var(--bg-tertiary);
             border-bottom: 1px solid var(--border-color);
+            overflow-x: auto;
         }
 
         .tab {
@@ -232,6 +233,10 @@ function gtag(){dataLayer.push(arguments);}
             border-bottom: 2px solid transparent;
             cursor: pointer;
             transition: all 0.15s;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            white-space: nowrap;
         }
 
         .tab:hover {
@@ -245,6 +250,40 @@ function gtag(){dataLayer.push(arguments);}
             border-bottom-color: var(--accent);
         }
 
+        .tab-close {
+            display: none;
+            width: 16px;
+            height: 16px;
+            line-height: 14px;
+            text-align: center;
+            border-radius: 3px;
+            font-size: 14px;
+        }
+
+        .tab:hover .tab-close {
+            display: inline-block;
+        }
+
+        .tab-close:hover {
+            background: rgba(239, 68, 68, 0.2);
+            color: #ef4444;
+        }
+
+        .tab-add {
+            padding: 0.75rem 1rem;
+            font-size: 1.25rem;
+            color: var(--text-secondary);
+            background: transparent;
+            border: none;
+            cursor: pointer;
+            transition: all 0.15s;
+        }
+
+        .tab-add:hover {
+            color: var(--accent);
+            background: var(--bg-secondary);
+        }
+
         /* Monaco Container */
         #monaco-container {
             flex: 1;
@@ -283,12 +322,120 @@ function gtag(){dataLayer.push(arguments);}
             background: #15803d;
         }
 
+        .preview-container {
+            flex: 1;
+            display: flex;
+            overflow: hidden;
+        }
+
         #preview-frame {
             flex: 1;
             border: none;
             background: white;
         }
 
+        /* Console Panel */
+        .console-panel {
+            border-top: 1px solid var(--border-color);
+            display: flex;
+            flex-direction: column;
+            max-height: 200px;
+            transition: max-height 0.2s;
+        }
+
+        .console-panel.collapsed {
+            max-height: 32px;
+        }
+
+        .console-panel.collapsed .console-output {
+            display: none;
+        }
+
+        .console-panel.collapsed #btn-toggle-console svg {
+            transform: rotate(180deg);
+        }
+
+        .console-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0.5rem 0.75rem;
+            background: var(--bg-tertiary);
+            border-bottom: 1px solid var(--border-color);
+            font-size: 0.75rem;
+            font-weight: 500;
+            color: var(--text-secondary);
+        }
+
+        .console-actions {
+            display: flex;
+            gap: 0.5rem;
+        }
+
+        .btn-console {
+            padding: 0.25rem 0.5rem;
+            font-size: 0.75rem;
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            border-radius: 3px;
+            display: flex;
+            align-items: center;
+        }
+
+        .btn-console:hover {
+            background: var(--bg-secondary);
+            color: var(--text-primary);
+        }
+
+        .console-output {
+            flex: 1;
+            overflow-y: auto;
+            padding: 0.5rem;
+            font-family: 'Monaco', 'Menlo', monospace;
+            font-size: 0.75rem;
+            background: var(--bg-secondary);
+        }
+
+        .console-line {
+            padding: 0.25rem 0.5rem;
+            border-radius: 3px;
+            margin-bottom: 2px;
+            display: flex;
+            align-items: flex-start;
+            gap: 0.5rem;
+        }
+
+        .console-line.log {
+            color: var(--text-primary);
+        }
+
+        .console-line.info {
+            color: #3b82f6;
+            background: rgba(59, 130, 246, 0.1);
+        }
+
+        .console-line.warn {
+            color: #f59e0b;
+            background: rgba(245, 158, 11, 0.1);
+        }
+
+        .console-line.error {
+            color: #ef4444;
+            background: rgba(239, 68, 68, 0.1);
+        }
+
+        .console-line-prefix {
+            opacity: 0.6;
+            min-width: 40px;
+        }
+
+        .console-line-content {
+            flex: 1;
+            word-break: break-all;
+        }
+
         /* Status Bar */
         .status-bar {
             background: var(--bg-secondary);
@@ -336,6 +483,164 @@ function gtag(){dataLayer.push(arguments);}
             to { transform: translateY(0); opacity: 1; }
         }
 
+        /* Modal */
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.5);
+            z-index: 1000;
+            align-items: center;
+            justify-content: center;
+            padding: 1rem;
+        }
+
+        .modal.show {
+            display: flex;
+        }
+
+        .modal-content {
+            background: var(--bg-secondary);
+            border-radius: 0.75rem;
+            max-width: 600px;
+            width: 100%;
+            max-height: 80vh;
+            overflow: hidden;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+        }
+
+        .modal-sm {
+            max-width: 400px;
+        }
+
+        .modal-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 1rem 1.25rem;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .modal-header h3 {
+            font-size: 1.125rem;
+            font-weight: 600;
+        }
+
+        .modal-close {
+            background: transparent;
+            border: none;
+            font-size: 1.5rem;
+            color: var(--text-secondary);
+            cursor: pointer;
+            line-height: 1;
+            padding: 0;
+        }
+
+        .modal-close:hover {
+            color: var(--text-primary);
+        }
+
+        .modal-body {
+            padding: 1.25rem;
+            overflow-y: auto;
+            max-height: 60vh;
+        }
+
+        .modal-footer {
+            display: flex;
+            justify-content: flex-end;
+            gap: 0.75rem;
+            padding: 1rem 1.25rem;
+            border-top: 1px solid var(--border-color);
+        }
+
+        /* Shortcuts Modal */
+        .shortcut-section {
+            margin-bottom: 1.5rem;
+        }
+
+        .shortcut-section:last-child {
+            margin-bottom: 0;
+        }
+
+        .shortcut-section h4 {
+            font-size: 0.875rem;
+            font-weight: 600;
+            color: var(--accent);
+            margin-bottom: 0.75rem;
+        }
+
+        .shortcut-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0.5rem 0;
+            font-size: 0.875rem;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .shortcut-row:last-child {
+            border-bottom: none;
+        }
+
+        .keys {
+            display: flex;
+            gap: 0.25rem;
+        }
+
+        kbd {
+            display: inline-block;
+            padding: 0.25rem 0.5rem;
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-color);
+            border-radius: 0.25rem;
+            font-family: inherit;
+            font-size: 0.75rem;
+        }
+
+        /* New File Modal */
+        .modal-body label {
+            display: block;
+            font-size: 0.875rem;
+            font-weight: 500;
+            margin-bottom: 0.5rem;
+        }
+
+        .modal-body input[type="text"] {
+            width: 100%;
+            padding: 0.625rem 0.75rem;
+            border: 1px solid var(--border-color);
+            border-radius: 0.5rem;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            font-size: 0.875rem;
+        }
+
+        .modal-body input[type="text"]:focus {
+            outline: none;
+            border-color: var(--accent);
+            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+        }
+
+        .modal-body .hint {
+            font-size: 0.75rem;
+            color: var(--text-secondary);
+            margin-top: 0.5rem;
+        }
+
+        .btn-primary {
+            background: var(--accent);
+            color: white;
+            border-color: var(--accent);
+        }
+
+        .btn-primary:hover {
+            background: var(--accent-hover);
+        }
+
         /* Responsive */
         @media (max-width: 768px) {
             .editor-layout {
diff --git a/resources/views/tools/code-editor.blade.php b/resources/views/tools/code-editor.blade.php
index 64654b8..731ebfa 100644
--- a/resources/views/tools/code-editor.blade.php
+++ b/resources/views/tools/code-editor.blade.php
@@ -72,12 +72,18 @@
                 </svg>
                 Copy
             </button>
-            <button id="btn-download" class="btn" title="Download file">
+            <button id="btn-download" class="btn" title="Download current file">
                 <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                 </svg>
                 Download
             </button>
+            <button id="btn-download-zip" class="btn" title="Download all files as ZIP">
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"/>
+                </svg>
+                ZIP
+            </button>
             <button id="btn-clear" class="btn" title="Clear editor">
                 <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
@@ -86,9 +92,25 @@
             </button>
         </div>
 
+        <div class="toolbar-group">
+            <label title="Toggle word wrap">
+                <input type="checkbox" id="word-wrap-toggle" checked>
+                Wrap
+            </label>
+            <label title="Toggle minimap">
+                <input type="checkbox" id="minimap-toggle">
+                Minimap
+            </label>
+        </div>
+
         <div style="flex:1;"></div>
 
         <div class="toolbar-group">
+            <button id="btn-shortcuts" class="btn" title="Keyboard shortcuts">
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707"/>
+                </svg>
+            </button>
             <label>
                 <input type="checkbox" id="preview-toggle" checked>
                 Live Preview
@@ -101,10 +123,20 @@
         <!-- Editor Panel -->
         <div class="editor-panel">
             <!-- Tabs -->
-            <div class="tabs">
-                <button class="tab active" data-tab="html">index.html</button>
-                <button class="tab" data-tab="css">style.css</button>
-                <button class="tab" data-tab="js">script.js</button>
+            <div class="tabs" id="tabs-container">
+                <button class="tab active" data-tab="html">
+                    <span class="tab-name">index.html</span>
+                    <span class="tab-close" data-tab="html" title="Close tab">&times;</span>
+                </button>
+                <button class="tab" data-tab="css">
+                    <span class="tab-name">style.css</span>
+                    <span class="tab-close" data-tab="css" title="Close tab">&times;</span>
+                </button>
+                <button class="tab" data-tab="js">
+                    <span class="tab-name">script.js</span>
+                    <span class="tab-close" data-tab="js" title="Close tab">&times;</span>
+                </button>
+                <button class="tab-add" id="btn-add-tab" title="Add new file">+</button>
             </div>
 
             <!-- Monaco Editor -->
@@ -122,7 +154,24 @@
                     Run
                 </button>
             </div>
-            <iframe id="preview-frame" sandbox="allow-scripts allow-modals"></iframe>
+            <div class="preview-container">
+                <iframe id="preview-frame" sandbox="allow-scripts allow-modals"></iframe>
+            </div>
+            <!-- Console Panel -->
+            <div id="console-panel" class="console-panel">
+                <div class="console-header">
+                    <span>Console</span>
+                    <div class="console-actions">
+                        <button id="btn-clear-console" class="btn-console" title="Clear console">Clear</button>
+                        <button id="btn-toggle-console" class="btn-console" title="Toggle console">
+                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="14" height="14">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+                <div id="console-output" class="console-output"></div>
+            </div>
         </div>
     </div>
 
@@ -138,18 +187,90 @@
 
 <!-- Toast -->
 <div id="toast" class="toast"></div>
+
+<!-- Keyboard Shortcuts Modal -->
+<div id="shortcuts-modal" class="modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h3>Keyboard Shortcuts</h3>
+            <button id="close-shortcuts" class="modal-close">&times;</button>
+        </div>
+        <div class="modal-body">
+            <div class="shortcut-section">
+                <h4>General</h4>
+                <div class="shortcut-row"><span class="keys"><kbd>Ctrl</kbd>+<kbd>S</kbd></span><span>Save (Download)</span></div>
+                <div class="shortcut-row"><span class="keys"><kbd>Ctrl</kbd>+<kbd>Z</kbd></span><span>Undo</span></div>
+                <div class="shortcut-row"><span class="keys"><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd></span><span>Redo</span></div>
+                <div class="shortcut-row"><span class="keys"><kbd>F1</kbd></span><span>Command Palette</span></div>
+            </div>
+            <div class="shortcut-section">
+                <h4>Find & Replace</h4>
+                <div class="shortcut-row"><span class="keys"><kbd>Ctrl</kbd>+<kbd>F</kbd></span><span>Find</span></div>
+                <div class="shortcut-row"><span class="keys"><kbd>Ctrl</kbd>+<kbd>H</kbd></span><span>Find and Replace</span></div>
+                <div class="shortcut-row"><span class="keys"><kbd>Ctrl</kbd>+<kbd>G</kbd></span><span>Go to Line</span></div>
+            </div>
+            <div class="shortcut-section">
+                <h4>Editing</h4>
+                <div class="shortcut-row"><span class="keys"><kbd>Ctrl</kbd>+<kbd>/</kbd></span><span>Toggle Comment</span></div>
+                <div class="shortcut-row"><span class="keys"><kbd>Ctrl</kbd>+<kbd>D</kbd></span><span>Add Selection to Next Match</span></div>
+                <div class="shortcut-row"><span class="keys"><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>K</kbd></span><span>Delete Line</span></div>
+                <div class="shortcut-row"><span class="keys"><kbd>Alt</kbd>+<kbd>↑</kbd>/<kbd>↓</kbd></span><span>Move Line Up/Down</span></div>
+                <div class="shortcut-row"><span class="keys"><kbd>Ctrl</kbd>+<kbd>[</kbd>/<kbd>]</kbd></span><span>Indent/Outdent</span></div>
+            </div>
+            <div class="shortcut-section">
+                <h4>Selection</h4>
+                <div class="shortcut-row"><span class="keys"><kbd>Ctrl</kbd>+<kbd>A</kbd></span><span>Select All</span></div>
+                <div class="shortcut-row"><span class="keys"><kbd>Ctrl</kbd>+<kbd>L</kbd></span><span>Select Line</span></div>
+                <div class="shortcut-row"><span class="keys"><kbd>Alt</kbd>+<kbd>Click</kbd></span><span>Add Cursor</span></div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- New File Modal -->
+<div id="new-file-modal" class="modal">
+    <div class="modal-content modal-sm">
+        <div class="modal-header">
+            <h3>New File</h3>
+            <button id="close-new-file" class="modal-close">&times;</button>
+        </div>
+        <div class="modal-body">
+            <label for="new-file-name">Filename:</label>
+            <input type="text" id="new-file-name" placeholder="e.g., app.js, utils.php" autocomplete="off">
+            <p class="hint">Supported: .html, .css, .js, .json, .php, .sql</p>
+        </div>
+        <div class="modal-footer">
+            <button id="cancel-new-file" class="btn">Cancel</button>
+            <button id="confirm-new-file" class="btn btn-primary">Create</button>
+        </div>
+    </div>
+</div>
 @endsection
 
 @push('scripts')
+<!-- JSZip for Download All -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
 <script>
 (function() {
     'use strict';
 
+    // Language mappings
+    const EXTENSIONS = {
+        'html': { language: 'html', mime: 'text/html' },
+        'htm': { language: 'html', mime: 'text/html' },
+        'css': { language: 'css', mime: 'text/css' },
+        'js': { language: 'javascript', mime: 'text/javascript' },
+        'json': { language: 'json', mime: 'application/json' },
+        'php': { language: 'php', mime: 'application/x-php' },
+        'sql': { language: 'sql', mime: 'text/x-sql' }
+    };
+
     // State
     const state = {
         editor: null,
         monaco: null,
         activeTab: 'html',
+        tabCounter: 3,
         tabs: {
             html: {
                 name: 'index.html',
@@ -214,11 +335,29 @@
         themeIconDark: document.getElementById('theme-icon-dark'),
         fontSize: document.getElementById('font-size'),
         previewToggle: document.getElementById('preview-toggle'),
+        wordWrapToggle: document.getElementById('word-wrap-toggle'),
+        minimapToggle: document.getElementById('minimap-toggle'),
         btnCopy: document.getElementById('btn-copy'),
         btnDownload: document.getElementById('btn-download'),
+        btnDownloadZip: document.getElementById('btn-download-zip'),
         btnClear: document.getElementById('btn-clear'),
         btnRun: document.getElementById('btn-run'),
-        tabs: document.querySelectorAll('.tab')
+        btnShortcuts: document.getElementById('btn-shortcuts'),
+        btnAddTab: document.getElementById('btn-add-tab'),
+        tabsContainer: document.getElementById('tabs-container'),
+        // Modals
+        shortcutsModal: document.getElementById('shortcuts-modal'),
+        closeShortcuts: document.getElementById('close-shortcuts'),
+        newFileModal: document.getElementById('new-file-modal'),
+        closeNewFile: document.getElementById('close-new-file'),
+        cancelNewFile: document.getElementById('cancel-new-file'),
+        confirmNewFile: document.getElementById('confirm-new-file'),
+        newFileName: document.getElementById('new-file-name'),
+        // Console
+        consolePanel: document.getElementById('console-panel'),
+        consoleOutput: document.getElementById('console-output'),
+        btnClearConsole: document.getElementById('btn-clear-console'),
+        btnToggleConsole: document.getElementById('btn-toggle-console')
     };
 
     // Theme Management
@@ -261,8 +400,8 @@ function initMonaco() {
                 language: tab.language,
                 theme: isDark ? 'vs-dark' : 'vs',
                 fontSize: parseInt(elements.fontSize.value),
-                minimap: { enabled: false },
-                wordWrap: 'on',
+                minimap: { enabled: elements.minimapToggle.checked },
+                wordWrap: elements.wordWrapToggle.checked ? 'on' : 'off',
                 automaticLayout: true,
                 tabSize: 4,
                 scrollBeyondLastLine: false,
@@ -291,14 +430,61 @@ function initMonaco() {
                 }
             });
 
+            // Add Ctrl+S keybinding for save/download
+            state.editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function() {
+                downloadCode();
+            });
+
             // Initial preview
             setTimeout(runPreview, 100);
         });
     }
 
-    // Tab Switching
+    // Tab Management
+    function renderTabs() {
+        const tabsHtml = Object.keys(state.tabs).map(function(tabId) {
+            const tab = state.tabs[tabId];
+            const isActive = tabId === state.activeTab;
+            return `<button class="tab ${isActive ? 'active' : ''}" data-tab="${tabId}">
+                <span class="tab-name">${tab.name}</span>
+                <span class="tab-close" data-tab="${tabId}" title="Close tab">&times;</span>
+            </button>`;
+        }).join('');
+
+        elements.tabsContainer.innerHTML = tabsHtml +
+            '<button class="tab-add" id="btn-add-tab" title="Add new file">+</button>';
+
+        // Re-bind events
+        bindTabEvents();
+    }
+
+    function bindTabEvents() {
+        // Tab click events
+        document.querySelectorAll('.tab').forEach(function(tab) {
+            tab.addEventListener('click', function(e) {
+                if (!e.target.classList.contains('tab-close')) {
+                    switchTab(this.dataset.tab);
+                }
+            });
+        });
+
+        // Close tab events
+        document.querySelectorAll('.tab-close').forEach(function(closeBtn) {
+            closeBtn.addEventListener('click', function(e) {
+                e.stopPropagation();
+                closeTab(this.dataset.tab);
+            });
+        });
+
+        // Add tab button
+        const addBtn = document.getElementById('btn-add-tab');
+        if (addBtn) {
+            addBtn.addEventListener('click', showNewFileModal);
+        }
+    }
+
     function switchTab(tabId) {
-        if (tabId === state.activeTab) return;
+        if (!state.tabs[tabId] || tabId === state.activeTab) return;
 
         // Save current content
         if (state.editor) {
@@ -310,7 +496,7 @@ function switchTab(tabId) {
         const tab = state.tabs[tabId];
 
         // Update UI
-        elements.tabs.forEach(t => {
+        document.querySelectorAll('.tab').forEach(function(t) {
             t.classList.toggle('active', t.dataset.tab === tabId);
         });
         elements.currentFile.textContent = tab.name;
@@ -322,11 +508,87 @@ function switchTab(tabId) {
         }
     }
 
-    // Preview
+    function closeTab(tabId) {
+        const tabKeys = Object.keys(state.tabs);
+        if (tabKeys.length <= 1) {
+            showToast('Cannot close the last tab', 'error');
+            return;
+        }
+
+        // Find next tab to switch to
+        const currentIndex = tabKeys.indexOf(tabId);
+        let nextTab;
+        if (tabId === state.activeTab) {
+            nextTab = tabKeys[currentIndex === 0 ? 1 : currentIndex - 1];
+        }
+
+        // Remove the tab
+        delete state.tabs[tabId];
+        renderTabs();
+
+        // Switch to next tab if needed
+        if (nextTab) {
+            switchTab(nextTab);
+        }
+
+        showToast('Tab closed', 'success');
+    }
+
+    function addNewTab(filename) {
+        // Get extension and language
+        const ext = filename.split('.').pop().toLowerCase();
+        const extInfo = EXTENSIONS[ext];
+
+        if (!extInfo) {
+            showToast('Unsupported file type', 'error');
+            return false;
+        }
+
+        // Check for duplicate names
+        for (const key in state.tabs) {
+            if (state.tabs[key].name === filename) {
+                showToast('File already exists', 'error');
+                return false;
+            }
+        }
+
+        // Create unique ID
+        state.tabCounter++;
+        const tabId = 'tab_' + state.tabCounter;
+
+        // Add the tab
+        state.tabs[tabId] = {
+            name: filename,
+            language: extInfo.language,
+            content: getDefaultContent(extInfo.language)
+        };
+
+        renderTabs();
+        switchTab(tabId);
+        showToast('Created ' + filename, 'success');
+        return true;
+    }
+
+    function getDefaultContent(language) {
+        switch (language) {
+            case 'html': return '<!DOCTYPE html>\n<html>\n<head>\n    <title></title>\n</head>\n<body>\n    \n</body>\n</html>';
+            case 'css': return '/* Styles */\n';
+            case 'javascript': return '// JavaScript\n';
+            case 'json': return '{\n    \n}';
+            case 'php': return '<?php\n\n';
+            case 'sql': return '-- SQL Query\n';
+            default: return '';
+        }
+    }
+
+    // Preview with Console Capture
     function runPreview() {
-        const html = state.tabs.html.content;
-        const css = state.tabs.css.content;
-        const js = state.tabs.js.content;
+        // Clear console
+        elements.consoleOutput.innerHTML = '';
+
+        const html = state.tabs.html ? state.tabs.html.content : '';
+        const css = state.tabs.css ? state.tabs.css.content : '';
+        const js = state.tabs.js ? state.tabs.js.content : '';
 
         // Extract body content or use full HTML
         let bodyContent = html;
@@ -335,10 +597,48 @@ function runPreview() {
             bodyContent = bodyMatch[1];
         }
 
+        // Console capture script
+        const consoleCapture = `
+<script>
+(function() {
+    const originalConsole = {
+        log: console.log,
+        info: console.info,
+        warn: console.warn,
+        error: console.error
+    };
+
+    function sendToParent(type, args) {
+        try {
+            const message = Array.from(args).map(function(arg) {
+                if (typeof arg === 'object') {
+                    try { return JSON.stringify(arg, null, 2); }
+                    catch (e) { return String(arg); }
+                }
+                return String(arg);
+            }).join(' ');
+
+            window.parent.postMessage({ type: 'console', level: type, message: message }, '*');
+        } catch (e) {}
+    }
+
+    console.log = function() { sendToParent('log', arguments); originalConsole.log.apply(console, arguments); };
+    console.info = function() { sendToParent('info', arguments); originalConsole.info.apply(console, arguments); };
+    console.warn = function() { sendToParent('warn', arguments); originalConsole.warn.apply(console, arguments); };
+    console.error = function() { sendToParent('error', arguments); originalConsole.error.apply(console, arguments); };
+
+    window.onerror = function(msg, url, line, col, error) {
+        sendToParent('error', [msg + ' (line ' + line + ')']);
+        return false;
+    };
+})();
+<\/script>`;
+
         const previewHtml = `<!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
+    ${consoleCapture}
     <style>${css}</style>
 </head>
 <body>
@@ -350,6 +650,24 @@ function runPreview() {
         elements.previewFrame.srcdoc = previewHtml;
     }
 
+    function addConsoleLine(level, message) {
+        const line = document.createElement('div');
+        line.className = 'console-line ' + level;
+
+        const prefix = document.createElement('span');
+        prefix.className = 'console-line-prefix';
+        prefix.textContent = level === 'log' ? '>' : level.toUpperCase();
+
+        const content = document.createElement('span');
+        content.className = 'console-line-content';
+        content.textContent = message;
+
+        line.appendChild(prefix);
+        line.appendChild(content);
+        elements.consoleOutput.appendChild(line);
+        elements.consoleOutput.scrollTop = elements.consoleOutput.scrollHeight;
+    }
+
     // Actions
     function copyCode() {
         const content = state.editor ? state.editor.getValue() : state.tabs[state.activeTab].content;
@@ -375,6 +693,41 @@ function downloadCode() {
         showToast('Downloaded ' + tab.name, 'success');
     }
 
+    function downloadAllAsZip() {
+        if (typeof JSZip === 'undefined') {
+            showToast('JSZip not loaded', 'error');
+            return;
+        }
+
+        // Save current editor content
+        if (state.editor) {
+            state.tabs[state.activeTab].content = state.editor.getValue();
+        }
+
+        const zip = new JSZip();
+
+        // Add all files to zip
+        for (const tabId in state.tabs) {
+            const tab = state.tabs[tabId];
+            zip.file(tab.name, tab.content);
+        }
+
+        // Generate and download
+        zip.generateAsync({ type: 'blob' }).then(function(blob) {
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'project.zip';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+            showToast('Downloaded project.zip', 'success');
+        }).catch(function() {
+            showToast('Failed to create ZIP', 'error');
+        });
+    }
+
     function clearEditor() {
         if (state.editor) {
             state.editor.setValue('');
@@ -388,6 +741,18 @@ function updateFontSize() {
         }
     }
 
+    function toggleWordWrap() {
+        if (state.editor) {
+            state.editor.updateOptions({ wordWrap: elements.wordWrapToggle.checked ? 'on' : 'off' });
+        }
+    }
+
+    function toggleMinimap() {
+        if (state.editor) {
+            state.editor.updateOptions({ minimap: { enabled: elements.minimapToggle.checked } });
+        }
+    }
+
     function togglePreview() {
         const show = elements.previewToggle.checked;
         elements.previewPanel.style.display = show ? 'flex' : 'none';
@@ -397,6 +762,47 @@ function togglePreview() {
         }
     }
 
+    function toggleConsole() {
+        elements.consolePanel.classList.toggle('collapsed');
+    }
+
+    function clearConsole() {
+        elements.consoleOutput.innerHTML = '';
+    }
+
+    // Modals
+    function showShortcutsModal() {
+        elements.shortcutsModal.classList.add('show');
+    }
+
+    function hideShortcutsModal() {
+        elements.shortcutsModal.classList.remove('show');
+    }
+
+    function showNewFileModal() {
+        elements.newFileName.value = '';
+        elements.newFileModal.classList.add('show');
+        setTimeout(function() {
+            elements.newFileName.focus();
+        }, 100);
+    }
+
+    function hideNewFileModal() {
+        elements.newFileModal.classList.remove('show');
+    }
+
+    function handleNewFileConfirm() {
+        const filename = elements.newFileName.value.trim();
+        if (!filename) {
+            showToast('Please enter a filename', 'error');
+            return;
+        }
+
+        if (addNewTab(filename)) {
+            hideNewFileModal();
+        }
+    }
+
     // Toast
     function showToast(message, type) {
         elements.toast.textContent = message;
@@ -408,18 +814,61 @@ function showToast(message, type) {
 
     // Event Listeners
     function initEventListeners() {
+        // Theme
         elements.themeToggle.addEventListener('click', toggleTheme);
+
+        // Editor options
         elements.fontSize.addEventListener('change', updateFontSize);
+        elements.wordWrapToggle.addEventListener('change', toggleWordWrap);
+        elements.minimapToggle.addEventListener('change', toggleMinimap);
         elements.previewToggle.addEventListener('change', togglePreview);
+
+        // Actions
         elements.btnCopy.addEventListener('click', copyCode);
         elements.btnDownload.addEventListener('click', downloadCode);
+        elements.btnDownloadZip.addEventListener('click', downloadAllAsZip);
         elements.btnClear.addEventListener('click', clearEditor);
         elements.btnRun.addEventListener('click', runPreview);
+        elements.btnShortcuts.addEventListener('click', showShortcutsModal);
 
-        elements.tabs.forEach(function(tab) {
-            tab.addEventListener('click', function() {
-                switchTab(this.dataset.tab);
-            });
+        // Shortcuts modal
+        elements.closeShortcuts.addEventListener('click', hideShortcutsModal);
+        elements.shortcutsModal.addEventListener('click', function(e) {
+            if (e.target === elements.shortcutsModal) hideShortcutsModal();
+        });
+
+        // New file modal
+        elements.closeNewFile.addEventListener('click', hideNewFileModal);
+        elements.cancelNewFile.addEventListener('click', hideNewFileModal);
+        elements.confirmNewFile.addEventListener('click', handleNewFileConfirm);
+        elements.newFileName.addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') handleNewFileConfirm();
+        });
+        elements.newFileModal.addEventListener('click', function(e) {
+            if (e.target === elements.newFileModal) hideNewFileModal();
+        });
+
+        // Console
+        elements.btnClearConsole.addEventListener('click', clearConsole);
+        elements.btnToggleConsole.addEventListener('click', toggleConsole);
+
+        // Listen for console messages from iframe
+        window.addEventListener('message', function(e) {
+            if (e.data && e.data.type === 'console') {
+                addConsoleLine(e.data.level, e.data.message);
+            }
+        });
+
+        // Initial tab bindings
+        bindTabEvents();
+
+        // Keyboard shortcuts
+        document.addEventListener('keydown', function(e) {
+            // Escape closes modals
+            if (e.key === 'Escape') {
+                hideShortcutsModal();
+                hideNewFileModal();
+            }
         });
 
         // System theme change listener

From 4acb1894b67c5d54911ad4e0bbf897ac92e15ec1 Mon Sep 17 00:00:00 2001
From: jalel <ghabri.djalel@gmail.com>
Date: Sun, 14 Dec 2025 14:39:13 +0000
Subject: [PATCH 05/23] Redesign dark/light toggle with animated day/night
 scene

- Add animated sliding toggle with sky background
- Show twinkling stars in dark mode
- Show soft clouds in light mode
- Sun orb with rays slides to moon with craters
- Smooth 500ms transitions for all elements
---
 resources/views/layouts/app.blade.php | 41 ++++++++++++++++++++++-----
 1 file changed, 34 insertions(+), 7 deletions(-)

diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 6211eb1..4baa0d6 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -67,17 +67,44 @@ function gtag(){dataLayer.push(arguments);}
                     </a>
                 </div>
                 <div class="flex items-center space-x-4">
+                    <!-- Day/Night Toggle -->
                     <button
                         @click="darkMode = !darkMode"
-                        class="p-2 rounded-lg bg-gray-100 dark:bg-dark-border hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
+                        class="theme-toggle group relative w-16 h-8 rounded-full transition-all duration-500 overflow-hidden"
+                        :class="darkMode ? 'bg-indigo-950' : 'bg-sky-400'"
                         :title="darkMode ? 'Switch to light mode' : 'Switch to dark mode'"
                     >
-                        <svg x-show="!darkMode" class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
-                        </svg>
-                        <svg x-show="darkMode" x-cloak class="w-5 h-5 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
-                        </svg>
+                        <!-- Stars (visible in dark mode) -->
+                        <div class="absolute inset-0 transition-opacity duration-500" :class="darkMode ? 'opacity-100' : 'opacity-0'">
+                            <span class="absolute w-1 h-1 bg-white rounded-full top-2 left-3 animate-pulse"></span>
+                            <span class="absolute w-0.5 h-0.5 bg-white rounded-full top-4 left-6 animate-pulse delay-100"></span>
+                            <span class="absolute w-1 h-1 bg-white rounded-full top-1.5 left-9 animate-pulse delay-200"></span>
+                            <span class="absolute w-0.5 h-0.5 bg-white rounded-full top-5 left-4 animate-pulse delay-300"></span>
+                        </div>
+                        <!-- Clouds (visible in light mode) -->
+                        <div class="absolute inset-0 transition-opacity duration-500" :class="darkMode ? 'opacity-0' : 'opacity-100'">
+                            <span class="absolute w-4 h-2 bg-white/60 rounded-full top-1 left-7 blur-[1px]"></span>
+                            <span class="absolute w-3 h-1.5 bg-white/40 rounded-full top-5 left-2 blur-[1px]"></span>
+                        </div>
+                        <!-- Sun/Moon Orb -->
+                        <div
+                            class="absolute top-1 w-6 h-6 rounded-full shadow-lg transition-all duration-500 flex items-center justify-center"
+                            :class="darkMode
+                                ? 'left-9 bg-gray-200 shadow-gray-400/30'
+                                : 'left-1 bg-yellow-300 shadow-yellow-500/50'"
+                        >
+                            <!-- Sun rays (light mode) -->
+                            <div class="absolute inset-0 transition-opacity duration-300" :class="darkMode ? 'opacity-0' : 'opacity-100'">
+                                <span class="absolute w-full h-0.5 bg-yellow-400/60 top-1/2 -translate-y-1/2 -left-1 scale-x-125"></span>
+                                <span class="absolute h-full w-0.5 bg-yellow-400/60 left-1/2 -translate-x-1/2 -top-1 scale-y-125"></span>
+                            </div>
+                            <!-- Moon craters (dark mode) -->
+                            <div class="absolute inset-0 transition-opacity duration-300" :class="darkMode ? 'opacity-100' : 'opacity-0'">
+                                <span class="absolute w-1.5 h-1.5 bg-gray-300 rounded-full top-1 left-1"></span>
+                                <span class="absolute w-1 h-1 bg-gray-300 rounded-full bottom-1.5 right-1.5"></span>
+                                <span class="absolute w-0.5 h-0.5 bg-gray-300 rounded-full top-3 right-2"></span>
+                            </div>
+                        </div>
                     </button>
                 </div>
             </div>

From 022f8104273550ca75f22c184ad191d0cf569b0e Mon Sep 17 00:00:00 2001
From: jalel <ghabri.djalel@gmail.com>
Date: Sun, 14 Dec 2025 15:06:49 +0000
Subject: [PATCH 06/23] Add Regex Tester tool

- Live regex pattern testing with JavaScript
- Highlighted matches in test string
- Match details showing index and capture groups
- Flag toggles (global, ignore case, multiline, dotAll, unicode)
- Common patterns library (email, URL, phone, IP, date, HTML tag)
- Quick reference for regex syntax
- Full test coverage
---
 app/Http/Controllers/ToolController.php |  11 +
 resources/views/home.blade.php          |   6 +
 resources/views/tools/regex.blade.php   | 328 ++++++++++++++++++++++++
 routes/web.php                          |   2 +
 tests/Feature/WebRoutesTest.php         |  30 ++-
 5 files changed, 373 insertions(+), 4 deletions(-)
 create mode 100644 resources/views/tools/regex.blade.php

diff --git a/app/Http/Controllers/ToolController.php b/app/Http/Controllers/ToolController.php
index 8d6782c..13d83e9 100644
--- a/app/Http/Controllers/ToolController.php
+++ b/app/Http/Controllers/ToolController.php
@@ -69,6 +69,12 @@ public function index(): View
                 'route' => 'tools.code-editor',
                 'icon' => 'editor',
             ],
+            [
+                'name' => 'Regex Tester',
+                'description' => 'Test and debug regular expressions with live matching',
+                'route' => 'tools.regex',
+                'icon' => 'regex',
+            ],
         ];
 
         return view('home', compact('tools'));
@@ -123,4 +129,9 @@ public function codeEditor(): View
     {
         return view('tools.code-editor');
     }
+
+    public function regex(): View
+    {
+        return view('tools.regex');
+    }
 }
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index 7de13c3..c2600f0 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -84,6 +84,12 @@
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                         </svg>
                         @break
+                    @case('regex')
+                        <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707"/>
+                            <circle cx="12" cy="12" r="4" stroke-width="2"/>
+                        </svg>
+                        @break
                 @endswitch
             </div>
             <div class="flex-1 min-w-0">
diff --git a/resources/views/tools/regex.blade.php b/resources/views/tools/regex.blade.php
new file mode 100644
index 0000000..ac75c13
--- /dev/null
+++ b/resources/views/tools/regex.blade.php
@@ -0,0 +1,328 @@
+@extends('layouts.app')
+
+@section('title', 'Regex Tester - Test Regular Expressions Online | Dev Tools')
+@section('meta_description', 'Free online regex tester. Test and debug regular expressions with live matching, syntax highlighting, and match details. Supports JavaScript regex flags.')
+@section('meta_keywords', 'regex tester, regular expression tester, regex online, regex debugger, pattern matching, regex validator, javascript regex')
+
+@push('schema')
+<script type="application/ld+json">
+{
+    "@@context": "https://schema.org",
+    "@@type": "SoftwareApplication",
+    "name": "Regex Tester",
+    "description": "Test and debug regular expressions with live matching",
+    "url": "{{ route('tools.regex') }}",
+    "applicationCategory": "DeveloperApplication",
+    "operatingSystem": "Any",
+    "offers": {
+        "@@type": "Offer",
+        "price": "0",
+        "priceCurrency": "USD"
+    },
+    "author": {
+        "@@type": "Person",
+        "name": "Ghabri Djalel"
+    }
+}
+</script>
+@endpush
+
+@section('content')
+<div x-data="regexTester()" class="space-y-6">
+    <div class="flex items-center justify-between">
+        <div>
+            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Regex Tester</h1>
+            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Test and debug regular expressions with live matching</p>
+        </div>
+        <a href="{{ route('home') }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline">&larr; Back</a>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <!-- Left Column: Pattern & Test String -->
+        <div class="space-y-4">
+            <!-- Pattern Input -->
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Regular Expression</label>
+                <div class="flex items-center gap-2">
+                    <span class="text-gray-400 text-lg">/</span>
+                    <input
+                        type="text"
+                        x-model="pattern"
+                        @input="testRegex()"
+                        class="flex-1 p-2 border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 font-mono focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                        placeholder="Enter regex pattern..."
+                    >
+                    <span class="text-gray-400 text-lg">/</span>
+                    <input
+                        type="text"
+                        x-model="flags"
+                        @input="testRegex()"
+                        class="w-16 p-2 border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 font-mono text-center focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                        placeholder="gi"
+                        maxlength="6"
+                    >
+                </div>
+                <div class="mt-2 flex flex-wrap gap-2">
+                    <template x-for="flag in availableFlags" :key="flag.value">
+                        <button
+                            @click="toggleFlag(flag.value)"
+                            :class="flags.includes(flag.value) ? 'bg-indigo-100 dark:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300 border-indigo-300 dark:border-indigo-700' : 'bg-gray-50 dark:bg-dark-bg text-gray-600 dark:text-gray-400 border-gray-300 dark:border-dark-border'"
+                            class="px-2 py-1 text-xs font-medium rounded border transition-colors"
+                            :title="flag.description"
+                            x-text="flag.label"
+                        ></button>
+                    </template>
+                </div>
+                <div x-show="error" class="mt-2 p-2 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 rounded text-sm" x-text="error"></div>
+            </div>
+
+            <!-- Test String Input -->
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Test String</label>
+                <textarea
+                    x-model="testString"
+                    @input="testRegex()"
+                    class="textarea-code w-full h-40 p-3 border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 font-mono focus:ring-2 focus:ring-indigo-500 focus:border-transparent resize-none"
+                    placeholder="Enter text to test against the regex..."
+                ></textarea>
+            </div>
+
+            <!-- Common Patterns -->
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Common Patterns</label>
+                <div class="grid grid-cols-2 gap-2">
+                    <template x-for="example in examples" :key="example.name">
+                        <button
+                            @click="loadExample(example)"
+                            class="text-left p-2 text-sm bg-gray-50 dark:bg-dark-bg hover:bg-gray-100 dark:hover:bg-dark-border rounded-lg transition-colors"
+                        >
+                            <span class="font-medium text-gray-900 dark:text-gray-100" x-text="example.name"></span>
+                        </button>
+                    </template>
+                </div>
+            </div>
+        </div>
+
+        <!-- Right Column: Results -->
+        <div class="space-y-4">
+            <!-- Highlighted Result -->
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <div class="flex items-center justify-between mb-2">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Highlighted Matches</label>
+                    <span x-show="matches.length > 0" class="text-xs text-gray-500 dark:text-gray-400">
+                        <span x-text="matches.length"></span> match<span x-show="matches.length !== 1">es</span>
+                    </span>
+                </div>
+                <div
+                    class="w-full h-40 p-3 border border-gray-300 dark:border-dark-border rounded-lg bg-gray-50 dark:bg-dark-bg overflow-auto font-mono text-sm whitespace-pre-wrap break-all"
+                    x-html="highlightedText"
+                ></div>
+            </div>
+
+            <!-- Match Details -->
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Match Details</label>
+                <div class="max-h-64 overflow-auto">
+                    <div x-show="matches.length === 0 && !error" class="text-gray-500 dark:text-gray-400 text-sm">
+                        No matches found
+                    </div>
+                    <div x-show="matches.length > 0" class="space-y-2">
+                        <template x-for="(match, index) in matches" :key="index">
+                            <div class="p-2 bg-gray-50 dark:bg-dark-bg rounded-lg border border-gray-200 dark:border-dark-border">
+                                <div class="flex items-center justify-between mb-1">
+                                    <span class="text-xs font-medium text-gray-500 dark:text-gray-400">
+                                        Match <span x-text="index + 1"></span>
+                                    </span>
+                                    <span class="text-xs text-gray-400">
+                                        Index: <span x-text="match.index"></span>
+                                    </span>
+                                </div>
+                                <code class="block text-sm text-green-600 dark:text-green-400 break-all" x-text="match.value"></code>
+                                <template x-if="match.groups && match.groups.length > 0">
+                                    <div class="mt-2 pt-2 border-t border-gray-200 dark:border-dark-border">
+                                        <span class="text-xs text-gray-500 dark:text-gray-400">Groups:</span>
+                                        <template x-for="(group, gIndex) in match.groups" :key="gIndex">
+                                            <div class="flex items-center gap-2 mt-1">
+                                                <span class="text-xs text-gray-400" x-text="'$' + (gIndex + 1) + ':'"></span>
+                                                <code class="text-xs text-blue-600 dark:text-blue-400" x-text="group || '(empty)'"></code>
+                                            </div>
+                                        </template>
+                                    </div>
+                                </template>
+                            </div>
+                        </template>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Quick Reference -->
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <button
+                    @click="showReference = !showReference"
+                    class="w-full flex items-center justify-between text-sm font-medium text-gray-700 dark:text-gray-300"
+                >
+                    <span>Quick Reference</span>
+                    <svg :class="showReference ? 'rotate-180' : ''" class="w-4 h-4 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+                    </svg>
+                </button>
+                <div x-show="showReference" x-collapse class="mt-3 grid grid-cols-2 gap-x-4 gap-y-1 text-xs">
+                    <template x-for="ref in reference" :key="ref.pattern">
+                        <div class="flex items-center gap-2">
+                            <code class="text-indigo-600 dark:text-indigo-400 font-medium" x-text="ref.pattern"></code>
+                            <span class="text-gray-600 dark:text-gray-400" x-text="ref.description"></span>
+                        </div>
+                    </template>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
+
+@push('scripts')
+<script>
+function regexTester() {
+    return {
+        pattern: '',
+        flags: 'g',
+        testString: '',
+        matches: [],
+        error: '',
+        highlightedText: '',
+        showReference: false,
+
+        availableFlags: [
+            { value: 'g', label: 'global', description: 'Find all matches' },
+            { value: 'i', label: 'ignore case', description: 'Case-insensitive matching' },
+            { value: 'm', label: 'multiline', description: '^ and $ match line boundaries' },
+            { value: 's', label: 'dotAll', description: '. matches newlines' },
+            { value: 'u', label: 'unicode', description: 'Enable Unicode support' },
+        ],
+
+        examples: [
+            { name: 'Email', pattern: '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}', flags: 'g', test: 'Contact us at hello@example.com or support@test.org' },
+            { name: 'URL', pattern: 'https?://[\\w.-]+(?:/[\\w.-]*)*/?', flags: 'g', test: 'Visit https://example.com or http://test.org/path' },
+            { name: 'Phone (US)', pattern: '\\(?\\d{3}\\)?[-.\\s]?\\d{3}[-.\\s]?\\d{4}', flags: 'g', test: 'Call (555) 123-4567 or 555.987.6543' },
+            { name: 'IP Address', pattern: '\\b(?:\\d{1,3}\\.){3}\\d{1,3}\\b', flags: 'g', test: 'Server IPs: 192.168.1.1 and 10.0.0.255' },
+            { name: 'Date (YYYY-MM-DD)', pattern: '\\d{4}-\\d{2}-\\d{2}', flags: 'g', test: 'Dates: 2024-01-15 and 2023-12-25' },
+            { name: 'HTML Tag', pattern: '<([a-z]+)[^>]*>(.*?)</\\1>', flags: 'gi', test: '<div>Hello</div> and <span>World</span>' },
+        ],
+
+        reference: [
+            { pattern: '.', description: 'Any character' },
+            { pattern: '\\d', description: 'Digit [0-9]' },
+            { pattern: '\\w', description: 'Word char' },
+            { pattern: '\\s', description: 'Whitespace' },
+            { pattern: '^', description: 'Start of string' },
+            { pattern: '$', description: 'End of string' },
+            { pattern: '*', description: '0 or more' },
+            { pattern: '+', description: '1 or more' },
+            { pattern: '?', description: '0 or 1' },
+            { pattern: '{n,m}', description: 'n to m times' },
+            { pattern: '[abc]', description: 'Character set' },
+            { pattern: '[^abc]', description: 'Negated set' },
+            { pattern: '(abc)', description: 'Capture group' },
+            { pattern: 'a|b', description: 'Alternation' },
+            { pattern: '\\b', description: 'Word boundary' },
+            { pattern: '(?:abc)', description: 'Non-capture' },
+        ],
+
+        toggleFlag(flag) {
+            if (this.flags.includes(flag)) {
+                this.flags = this.flags.replace(flag, '');
+            } else {
+                this.flags += flag;
+            }
+            this.testRegex();
+        },
+
+        loadExample(example) {
+            this.pattern = example.pattern;
+            this.flags = example.flags;
+            this.testString = example.test;
+            this.testRegex();
+        },
+
+        testRegex() {
+            this.error = '';
+            this.matches = [];
+            this.highlightedText = this.escapeHtml(this.testString);
+
+            if (!this.pattern || !this.testString) {
+                return;
+            }
+
+            try {
+                const regex = new RegExp(this.pattern, this.flags);
+                const text = this.testString;
+                let match;
+                const matchPositions = [];
+
+                if (this.flags.includes('g')) {
+                    while ((match = regex.exec(text)) !== null) {
+                        this.matches.push({
+                            value: match[0],
+                            index: match.index,
+                            groups: match.slice(1)
+                        });
+                        matchPositions.push({
+                            start: match.index,
+                            end: match.index + match[0].length
+                        });
+                        if (match[0].length === 0) {
+                            regex.lastIndex++;
+                        }
+                    }
+                } else {
+                    match = regex.exec(text);
+                    if (match) {
+                        this.matches.push({
+                            value: match[0],
+                            index: match.index,
+                            groups: match.slice(1)
+                        });
+                        matchPositions.push({
+                            start: match.index,
+                            end: match.index + match[0].length
+                        });
+                    }
+                }
+
+                this.highlightedText = this.highlightMatches(text, matchPositions);
+            } catch (e) {
+                this.error = e.message;
+            }
+        },
+
+        highlightMatches(text, positions) {
+            if (positions.length === 0) {
+                return this.escapeHtml(text);
+            }
+
+            positions.sort((a, b) => b.start - a.start);
+
+            let result = text;
+            for (const pos of positions) {
+                const before = result.substring(0, pos.start);
+                const match = result.substring(pos.start, pos.end);
+                const after = result.substring(pos.end);
+                result = before + '\u0000MARK_START\u0000' + match + '\u0000MARK_END\u0000' + after;
+            }
+
+            result = this.escapeHtml(result);
+            result = result.replace(/\u0000MARK_START\u0000/g, '<mark class="bg-yellow-300 dark:bg-yellow-600 text-gray-900 dark:text-white px-0.5 rounded">');
+            result = result.replace(/\u0000MARK_END\u0000/g, '</mark>');
+
+            return result;
+        },
+
+        escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+    };
+}
+</script>
+@endpush
diff --git a/routes/web.php b/routes/web.php
index ebacbfc..7c8961e 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -16,6 +16,7 @@
     Route::get('/hash', [ToolController::class, 'hash'])->name('hash');
     Route::get('/url', [ToolController::class, 'url'])->name('url');
     Route::get('/code-editor', [ToolController::class, 'codeEditor'])->name('code-editor');
+    Route::get('/regex', [ToolController::class, 'regex'])->name('regex');
 });
 
 // Static Pages
@@ -36,6 +37,7 @@
         ['loc' => route('tools.hash'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('tools.url'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('tools.code-editor'), 'priority' => '0.9', 'changefreq' => 'monthly'],
+        ['loc' => route('tools.regex'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('about'), 'priority' => '0.5', 'changefreq' => 'monthly'],
         ['loc' => route('privacy'), 'priority' => '0.3', 'changefreq' => 'yearly'],
     ];
diff --git a/tests/Feature/WebRoutesTest.php b/tests/Feature/WebRoutesTest.php
index 5acbe3a..71c4bf8 100644
--- a/tests/Feature/WebRoutesTest.php
+++ b/tests/Feature/WebRoutesTest.php
@@ -28,6 +28,7 @@ public function test_home_page_displays_all_tools(): void
         $response->assertSee('Hash Generator');
         $response->assertSee('URL Encoder');
         $response->assertSee('Code Editor');
+        $response->assertSee('Regex Tester');
     }
 
     public function test_home_page_has_tool_links(): void
@@ -44,6 +45,7 @@ public function test_home_page_has_tool_links(): void
         $response->assertSee('href="' . route('tools.hash') . '"', false);
         $response->assertSee('href="' . route('tools.url') . '"', false);
         $response->assertSee('href="' . route('tools.code-editor') . '"', false);
+        $response->assertSee('href="' . route('tools.regex') . '"', false);
     }
 
     public function test_csv_tool_page_loads(): void
@@ -230,9 +232,29 @@ public function test_code_editor_has_required_elements(): void
         $response->assertSee('monaco-container');
     }
 
+    public function test_regex_tool_page_loads(): void
+    {
+        $response = $this->get('/tools/regex');
+
+        $response->assertStatus(200);
+        $response->assertSee('Regex Tester');
+        $response->assertSee('Test and debug regular expressions');
+    }
+
+    public function test_regex_tool_has_required_elements(): void
+    {
+        $response = $this->get('/tools/regex');
+
+        $response->assertStatus(200);
+        $response->assertSee('Regular Expression');
+        $response->assertSee('Test String');
+        $response->assertSee('Common Patterns');
+        $response->assertSee('Match Details');
+    }
+
     public function test_all_pages_have_navigation(): void
     {
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -244,7 +266,7 @@ public function test_all_pages_have_navigation(): void
 
     public function test_all_pages_have_theme_toggle(): void
     {
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -257,7 +279,7 @@ public function test_all_pages_have_theme_toggle(): void
     public function test_all_pages_load_vite_assets(): void
     {
         // Code editor uses standalone template without Vite
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -270,7 +292,7 @@ public function test_all_pages_load_vite_assets(): void
     public function test_all_tool_pages_have_back_link(): void
     {
         // Code editor uses standalone template with home link instead of back
-        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url'];
+        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex'];
 
         foreach ($toolPages as $page) {
             $response = $this->get($page);

From 1b564e7591a23592f6bb641ea83f1cf36eb4c872 Mon Sep 17 00:00:00 2001
From: jalel <ghabri.djalel@gmail.com>
Date: Sun, 14 Dec 2025 21:48:40 +0000
Subject: [PATCH 07/23] Add Base Converter tool

---
 app/Http/Controllers/ToolController.php       |  11 +
 resources/views/home.blade.php                |   5 +
 .../views/tools/base-converter.blade.php      | 335 ++++++++++++++++++
 routes/web.php                                |   2 +
 tests/Feature/WebRoutesTest.php               |  32 +-
 5 files changed, 380 insertions(+), 5 deletions(-)
 create mode 100644 resources/views/tools/base-converter.blade.php

diff --git a/app/Http/Controllers/ToolController.php b/app/Http/Controllers/ToolController.php
index 13d83e9..686e23d 100644
--- a/app/Http/Controllers/ToolController.php
+++ b/app/Http/Controllers/ToolController.php
@@ -75,6 +75,12 @@ public function index(): View
                 'route' => 'tools.regex',
                 'icon' => 'regex',
             ],
+            [
+                'name' => 'Base Converter',
+                'description' => 'Convert between binary, octal, decimal, and hex',
+                'route' => 'tools.base-converter',
+                'icon' => 'calculator',
+            ],
         ];
 
         return view('home', compact('tools'));
@@ -134,4 +140,9 @@ public function regex(): View
     {
         return view('tools.regex');
     }
+
+    public function baseConverter(): View
+    {
+        return view('tools.base-converter');
+    }
 }
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index c2600f0..2ac5d9b 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -90,6 +90,11 @@
                             <circle cx="12" cy="12" r="4" stroke-width="2"/>
                         </svg>
                         @break
+                    @case('calculator')
+                        <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
+                        </svg>
+                        @break
                 @endswitch
             </div>
             <div class="flex-1 min-w-0">
diff --git a/resources/views/tools/base-converter.blade.php b/resources/views/tools/base-converter.blade.php
new file mode 100644
index 0000000..d871911
--- /dev/null
+++ b/resources/views/tools/base-converter.blade.php
@@ -0,0 +1,335 @@
+@extends('layouts.app')
+
+@section('title', 'Base Converter - Binary, Octal, Decimal, Hex | Dev Tools')
+@section('meta_description', 'Free online number base converter. Convert between binary, octal, decimal, and hexadecimal. Instant conversion with bit visualization.')
+@section('meta_keywords', 'base converter, binary converter, hex converter, octal converter, decimal to binary, binary to hex, number base, radix converter')
+
+@push('schema')
+<script type="application/ld+json">
+{
+    "@@context": "https://schema.org",
+    "@@type": "SoftwareApplication",
+    "name": "Base Converter",
+    "description": "Convert numbers between binary, octal, decimal, and hexadecimal bases",
+    "url": "{{ route('tools.base-converter') }}",
+    "applicationCategory": "DeveloperApplication",
+    "operatingSystem": "Any",
+    "offers": {
+        "@@type": "Offer",
+        "price": "0",
+        "priceCurrency": "USD"
+    },
+    "author": {
+        "@@type": "Person",
+        "name": "Ghabri Djalel"
+    }
+}
+</script>
+@endpush
+
+@section('content')
+<div x-data="baseConverter()" class="space-y-6">
+    <div class="flex items-center justify-between">
+        <div>
+            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Base Converter</h1>
+            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Convert between binary, octal, decimal, and hexadecimal</p>
+        </div>
+        <a href="{{ route('home') }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline">&larr; Back</a>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <!-- Input Section -->
+        <div class="space-y-4">
+            <!-- Binary -->
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <div class="flex items-center justify-between mb-2">
+                    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Binary (Base 2)</label>
+                    <span class="text-xs text-gray-500 dark:text-gray-400">0-1</span>
+                </div>
+                <div class="flex space-x-2">
+                    <input
+                        type="text"
+                        x-model="binary"
+                        @input="convertFrom('binary')"
+                        class="flex-1 p-3 font-mono text-sm border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                        placeholder="e.g., 1010"
+                    >
+                    <button @click="copyValue(binary, $event.currentTarget)" class="p-3 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 border border-gray-300 dark:border-dark-border rounded-lg">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/>
+                        </svg>
+                    </button>
+                </div>
+                <p class="mt-1 text-xs text-red-500" x-show="errors.binary" x-text="errors.binary"></p>
+            </div>
+
+            <!-- Octal -->
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <div class="flex items-center justify-between mb-2">
+                    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Octal (Base 8)</label>
+                    <span class="text-xs text-gray-500 dark:text-gray-400">0-7</span>
+                </div>
+                <div class="flex space-x-2">
+                    <input
+                        type="text"
+                        x-model="octal"
+                        @input="convertFrom('octal')"
+                        class="flex-1 p-3 font-mono text-sm border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                        placeholder="e.g., 12"
+                    >
+                    <button @click="copyValue(octal, $event.currentTarget)" class="p-3 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 border border-gray-300 dark:border-dark-border rounded-lg">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/>
+                        </svg>
+                    </button>
+                </div>
+                <p class="mt-1 text-xs text-red-500" x-show="errors.octal" x-text="errors.octal"></p>
+            </div>
+
+            <!-- Decimal -->
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <div class="flex items-center justify-between mb-2">
+                    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Decimal (Base 10)</label>
+                    <span class="text-xs text-gray-500 dark:text-gray-400">0-9</span>
+                </div>
+                <div class="flex space-x-2">
+                    <input
+                        type="text"
+                        x-model="decimal"
+                        @input="convertFrom('decimal')"
+                        class="flex-1 p-3 font-mono text-sm border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                        placeholder="e.g., 10"
+                    >
+                    <button @click="copyValue(decimal, $event.currentTarget)" class="p-3 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 border border-gray-300 dark:border-dark-border rounded-lg">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/>
+                        </svg>
+                    </button>
+                </div>
+                <p class="mt-1 text-xs text-red-500" x-show="errors.decimal" x-text="errors.decimal"></p>
+            </div>
+
+            <!-- Hexadecimal -->
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <div class="flex items-center justify-between mb-2">
+                    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Hexadecimal (Base 16)</label>
+                    <span class="text-xs text-gray-500 dark:text-gray-400">0-9, A-F</span>
+                </div>
+                <div class="flex space-x-2">
+                    <input
+                        type="text"
+                        x-model="hex"
+                        @input="convertFrom('hex')"
+                        class="flex-1 p-3 font-mono text-sm border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent uppercase"
+                        placeholder="e.g., A"
+                    >
+                    <button @click="copyValue(hex, $event.currentTarget)" class="p-3 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 border border-gray-300 dark:border-dark-border rounded-lg">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/>
+                        </svg>
+                    </button>
+                </div>
+                <p class="mt-1 text-xs text-red-500" x-show="errors.hex" x-text="errors.hex"></p>
+            </div>
+
+            <!-- Clear Button -->
+            <button
+                @click="clearAll()"
+                class="w-full py-2 px-4 bg-gray-200 dark:bg-dark-bg hover:bg-gray-300 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 font-medium rounded-lg transition-colors"
+            >
+                Clear All
+            </button>
+        </div>
+
+        <!-- Info Section -->
+        <div class="space-y-4">
+            <!-- Bit Visualization -->
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Bit Visualization</label>
+                <div class="flex flex-wrap gap-1" x-show="binary">
+                    <template x-for="(bit, index) in paddedBinary.split('')" :key="index">
+                        <div
+                            class="w-8 h-8 flex items-center justify-center font-mono text-sm rounded"
+                            :class="bit === '1' ? 'bg-indigo-600 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400'"
+                            x-text="bit"
+                        ></div>
+                    </template>
+                </div>
+                <p x-show="!binary" class="text-sm text-gray-500 dark:text-gray-400">Enter a number to see bit visualization</p>
+                <p class="mt-2 text-xs text-gray-500 dark:text-gray-400" x-show="binary">
+                    <span x-text="paddedBinary.length"></span> bits
+                </p>
+            </div>
+
+            <!-- Quick Examples -->
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Quick Examples</label>
+                <div class="grid grid-cols-2 gap-2">
+                    <button @click="setDecimal(255)" class="px-3 py-2 text-sm bg-gray-100 dark:bg-dark-bg hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg transition-colors text-left">
+                        <span class="font-medium">255</span>
+                        <span class="text-xs text-gray-500 block">Max byte</span>
+                    </button>
+                    <button @click="setDecimal(256)" class="px-3 py-2 text-sm bg-gray-100 dark:bg-dark-bg hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg transition-colors text-left">
+                        <span class="font-medium">256</span>
+                        <span class="text-xs text-gray-500 block">2^8</span>
+                    </button>
+                    <button @click="setDecimal(1024)" class="px-3 py-2 text-sm bg-gray-100 dark:bg-dark-bg hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg transition-colors text-left">
+                        <span class="font-medium">1024</span>
+                        <span class="text-xs text-gray-500 block">1 KB</span>
+                    </button>
+                    <button @click="setDecimal(65535)" class="px-3 py-2 text-sm bg-gray-100 dark:bg-dark-bg hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg transition-colors text-left">
+                        <span class="font-medium">65535</span>
+                        <span class="text-xs text-gray-500 block">Max 16-bit</span>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Formatted Output -->
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Formatted Output</label>
+                <div class="space-y-2 font-mono text-sm" x-show="decimal">
+                    <div class="flex justify-between p-2 bg-gray-50 dark:bg-dark-bg rounded">
+                        <span class="text-gray-600 dark:text-gray-400">Binary:</span>
+                        <span class="text-gray-900 dark:text-gray-100">0b<span x-text="binary"></span></span>
+                    </div>
+                    <div class="flex justify-between p-2 bg-gray-50 dark:bg-dark-bg rounded">
+                        <span class="text-gray-600 dark:text-gray-400">Octal:</span>
+                        <span class="text-gray-900 dark:text-gray-100">0o<span x-text="octal"></span></span>
+                    </div>
+                    <div class="flex justify-between p-2 bg-gray-50 dark:bg-dark-bg rounded">
+                        <span class="text-gray-600 dark:text-gray-400">Decimal:</span>
+                        <span class="text-gray-900 dark:text-gray-100" x-text="decimal"></span>
+                    </div>
+                    <div class="flex justify-between p-2 bg-gray-50 dark:bg-dark-bg rounded">
+                        <span class="text-gray-600 dark:text-gray-400">Hex:</span>
+                        <span class="text-gray-900 dark:text-gray-100">0x<span x-text="hex"></span></span>
+                    </div>
+                </div>
+                <p x-show="!decimal" class="text-sm text-gray-500 dark:text-gray-400">Enter a number to see formatted output</p>
+            </div>
+
+            <!-- Reference -->
+            <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800 p-4">
+                <h3 class="text-sm font-medium text-blue-800 dark:text-blue-300 mb-2">Base Reference</h3>
+                <div class="text-xs text-blue-700 dark:text-blue-400 space-y-1">
+                    <p><strong>Binary (2):</strong> Uses 0 and 1</p>
+                    <p><strong>Octal (8):</strong> Uses 0-7</p>
+                    <p><strong>Decimal (10):</strong> Uses 0-9</p>
+                    <p><strong>Hexadecimal (16):</strong> Uses 0-9 and A-F</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
+
+@push('scripts')
+<script>
+function baseConverter() {
+    return {
+        binary: '',
+        octal: '',
+        decimal: '',
+        hex: '',
+        errors: {
+            binary: '',
+            octal: '',
+            decimal: '',
+            hex: ''
+        },
+
+        get paddedBinary() {
+            if (!this.binary) return '';
+            const len = this.binary.length;
+            const padTo = Math.ceil(len / 8) * 8;
+            return this.binary.padStart(padTo, '0');
+        },
+
+        convertFrom(source) {
+            this.clearErrors();
+
+            let value = this[source].trim();
+            if (!value) {
+                this.clearAll();
+                return;
+            }
+
+            let decimalValue;
+
+            try {
+                switch (source) {
+                    case 'binary':
+                        if (!/^[01]+$/.test(value)) {
+                            this.errors.binary = 'Invalid binary number (use only 0 and 1)';
+                            return;
+                        }
+                        decimalValue = parseInt(value, 2);
+                        break;
+                    case 'octal':
+                        if (!/^[0-7]+$/.test(value)) {
+                            this.errors.octal = 'Invalid octal number (use only 0-7)';
+                            return;
+                        }
+                        decimalValue = parseInt(value, 8);
+                        break;
+                    case 'decimal':
+                        if (!/^\d+$/.test(value)) {
+                            this.errors.decimal = 'Invalid decimal number (use only 0-9)';
+                            return;
+                        }
+                        decimalValue = parseInt(value, 10);
+                        break;
+                    case 'hex':
+                        if (!/^[0-9A-Fa-f]+$/.test(value)) {
+                            this.errors.hex = 'Invalid hex number (use only 0-9 and A-F)';
+                            return;
+                        }
+                        decimalValue = parseInt(value, 16);
+                        break;
+                }
+
+                if (isNaN(decimalValue) || decimalValue < 0) {
+                    this.errors[source] = 'Invalid number';
+                    return;
+                }
+
+                // Update all fields except the source
+                if (source !== 'binary') this.binary = decimalValue.toString(2);
+                if (source !== 'octal') this.octal = decimalValue.toString(8);
+                if (source !== 'decimal') this.decimal = decimalValue.toString(10);
+                if (source !== 'hex') this.hex = decimalValue.toString(16).toUpperCase();
+
+            } catch (e) {
+                this.errors[source] = 'Conversion error';
+            }
+        },
+
+        setDecimal(value) {
+            this.decimal = value.toString();
+            this.convertFrom('decimal');
+        },
+
+        clearAll() {
+            this.binary = '';
+            this.octal = '';
+            this.decimal = '';
+            this.hex = '';
+            this.clearErrors();
+        },
+
+        clearErrors() {
+            this.errors = { binary: '', octal: '', decimal: '', hex: '' };
+        },
+
+        copyValue(value, button) {
+            if (!value) return;
+            navigator.clipboard.writeText(value).then(() => {
+                const svg = button.innerHTML;
+                button.innerHTML = '<svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>';
+                setTimeout(() => { button.innerHTML = svg; }, 1500);
+            });
+        }
+    };
+}
+</script>
+@endpush
diff --git a/routes/web.php b/routes/web.php
index 7c8961e..480c649 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -17,6 +17,7 @@
     Route::get('/url', [ToolController::class, 'url'])->name('url');
     Route::get('/code-editor', [ToolController::class, 'codeEditor'])->name('code-editor');
     Route::get('/regex', [ToolController::class, 'regex'])->name('regex');
+    Route::get('/base-converter', [ToolController::class, 'baseConverter'])->name('base-converter');
 });
 
 // Static Pages
@@ -38,6 +39,7 @@
         ['loc' => route('tools.url'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('tools.code-editor'), 'priority' => '0.9', 'changefreq' => 'monthly'],
         ['loc' => route('tools.regex'), 'priority' => '0.8', 'changefreq' => 'monthly'],
+        ['loc' => route('tools.base-converter'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('about'), 'priority' => '0.5', 'changefreq' => 'monthly'],
         ['loc' => route('privacy'), 'priority' => '0.3', 'changefreq' => 'yearly'],
     ];
diff --git a/tests/Feature/WebRoutesTest.php b/tests/Feature/WebRoutesTest.php
index 71c4bf8..a788080 100644
--- a/tests/Feature/WebRoutesTest.php
+++ b/tests/Feature/WebRoutesTest.php
@@ -29,6 +29,7 @@ public function test_home_page_displays_all_tools(): void
         $response->assertSee('URL Encoder');
         $response->assertSee('Code Editor');
         $response->assertSee('Regex Tester');
+        $response->assertSee('Base Converter');
     }
 
     public function test_home_page_has_tool_links(): void
@@ -46,6 +47,7 @@ public function test_home_page_has_tool_links(): void
         $response->assertSee('href="' . route('tools.url') . '"', false);
         $response->assertSee('href="' . route('tools.code-editor') . '"', false);
         $response->assertSee('href="' . route('tools.regex') . '"', false);
+        $response->assertSee('href="' . route('tools.base-converter') . '"', false);
     }
 
     public function test_csv_tool_page_loads(): void
@@ -252,9 +254,29 @@ public function test_regex_tool_has_required_elements(): void
         $response->assertSee('Match Details');
     }
 
+    public function test_base_converter_page_loads(): void
+    {
+        $response = $this->get('/tools/base-converter');
+
+        $response->assertStatus(200);
+        $response->assertSee('Base Converter');
+        $response->assertSee('Convert between binary, octal, decimal, and hexadecimal');
+    }
+
+    public function test_base_converter_has_required_elements(): void
+    {
+        $response = $this->get('/tools/base-converter');
+
+        $response->assertStatus(200);
+        $response->assertSee('Binary');
+        $response->assertSee('Octal');
+        $response->assertSee('Decimal');
+        $response->assertSee('Hexadecimal');
+    }
+
     public function test_all_pages_have_navigation(): void
     {
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -266,7 +288,7 @@ public function test_all_pages_have_navigation(): void
 
     public function test_all_pages_have_theme_toggle(): void
     {
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -279,7 +301,7 @@ public function test_all_pages_have_theme_toggle(): void
     public function test_all_pages_load_vite_assets(): void
     {
         // Code editor uses standalone template without Vite
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -292,7 +314,7 @@ public function test_all_pages_load_vite_assets(): void
     public function test_all_tool_pages_have_back_link(): void
     {
         // Code editor uses standalone template with home link instead of back
-        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex'];
+        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter'];
 
         foreach ($toolPages as $page) {
             $response = $this->get($page);
@@ -345,7 +367,7 @@ public function test_api_routes_reject_get_requests(): void
 
     public function test_pages_have_csrf_token(): void
     {
-        $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor'];
+        $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/base-converter'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);

From da33552a5858978ce1558df1ff8b0206eb469f41 Mon Sep 17 00:00:00 2001
From: jalel <ghabri.djalel@gmail.com>
Date: Sun, 14 Dec 2025 21:26:25 +0000
Subject: [PATCH 08/23] Add Slug Generator tool
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Convert text to URL-friendly slugs
- Separator options: hyphen, underscore, dot, none
- Case options: lowercase, uppercase, preserve
- Transliterate accented characters (é → e, ñ → n)
- Option to remove numbers
- Optional length limit
- URL preview with generated slug
- Example texts for quick testing
- Client-side only implementation
---
 app/Http/Controllers/ToolController.php       |  11 +
 resources/views/home.blade.php                |   5 +
 .../views/tools/slug-generator.blade.php      | 328 ++++++++++++++++++
 routes/web.php                                |   2 +
 tests/Feature/WebRoutesTest.php               |  32 +-
 5 files changed, 373 insertions(+), 5 deletions(-)
 create mode 100644 resources/views/tools/slug-generator.blade.php

diff --git a/app/Http/Controllers/ToolController.php b/app/Http/Controllers/ToolController.php
index 686e23d..3ce0abe 100644
--- a/app/Http/Controllers/ToolController.php
+++ b/app/Http/Controllers/ToolController.php
@@ -81,6 +81,12 @@ public function index(): View
                 'route' => 'tools.base-converter',
                 'icon' => 'calculator',
             ],
+            [
+                'name' => 'Slug Generator',
+                'description' => 'Convert text to URL-friendly slugs',
+                'route' => 'tools.slug-generator',
+                'icon' => 'slug',
+            ],
         ];
 
         return view('home', compact('tools'));
@@ -145,4 +151,9 @@ public function baseConverter(): View
     {
         return view('tools.base-converter');
     }
+
+    public function slugGenerator(): View
+    {
+        return view('tools.slug-generator');
+    }
 }
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index 2ac5d9b..ba4c82f 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -95,6 +95,11 @@
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                         </svg>
                         @break
+                    @case('slug')
+                        <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
+                        </svg>
+                        @break
                 @endswitch
             </div>
             <div class="flex-1 min-w-0">
diff --git a/resources/views/tools/slug-generator.blade.php b/resources/views/tools/slug-generator.blade.php
new file mode 100644
index 0000000..9e07b15
--- /dev/null
+++ b/resources/views/tools/slug-generator.blade.php
@@ -0,0 +1,328 @@
+@extends('layouts.app')
+
+@section('title', 'Slug Generator - Create URL-Friendly Slugs | Dev Tools')
+@section('meta_description', 'Free online slug generator. Convert text to URL-friendly slugs. Customize separators, case, and transliteration options.')
+@section('meta_keywords', 'slug generator, url slug, seo slug, friendly url, text to slug, slug maker, url generator, permalink generator')
+
+@push('schema')
+<script type="application/ld+json">
+{
+    "@@context": "https://schema.org",
+    "@@type": "SoftwareApplication",
+    "name": "Slug Generator",
+    "description": "Convert text to URL-friendly slugs with customizable options",
+    "url": "{{ route('tools.slug-generator') }}",
+    "applicationCategory": "DeveloperApplication",
+    "operatingSystem": "Any",
+    "offers": {
+        "@@type": "Offer",
+        "price": "0",
+        "priceCurrency": "USD"
+    },
+    "author": {
+        "@@type": "Person",
+        "name": "Ghabri Djalel"
+    }
+}
+</script>
+@endpush
+
+@section('content')
+<div x-data="slugGenerator()" class="space-y-6">
+    <div class="flex items-center justify-between">
+        <div>
+            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Slug Generator</h1>
+            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Convert text to URL-friendly slugs</p>
+        </div>
+        <a href="{{ route('home') }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline">&larr; Back</a>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <!-- Input Section -->
+        <div class="space-y-4">
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Input Text</label>
+                <textarea
+                    x-model="input"
+                    @input="generateSlug()"
+                    class="w-full h-40 p-3 border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent resize-none"
+                    placeholder="Enter text to convert to slug..."
+                ></textarea>
+                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                    <span x-text="input.length"></span> characters
+                </p>
+            </div>
+
+            <!-- Options -->
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Options</label>
+
+                <div class="space-y-4">
+                    <!-- Separator -->
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-2">Separator</label>
+                        <div class="flex flex-wrap gap-2">
+                            <button
+                                @click="separator = '-'; generateSlug()"
+                                :class="separator === '-' ? 'bg-indigo-600 text-white' : 'bg-gray-100 dark:bg-dark-bg text-gray-700 dark:text-gray-300'"
+                                class="px-3 py-1.5 text-sm font-medium rounded-lg transition-colors"
+                            >
+                                Hyphen (-)
+                            </button>
+                            <button
+                                @click="separator = '_'; generateSlug()"
+                                :class="separator === '_' ? 'bg-indigo-600 text-white' : 'bg-gray-100 dark:bg-dark-bg text-gray-700 dark:text-gray-300'"
+                                class="px-3 py-1.5 text-sm font-medium rounded-lg transition-colors"
+                            >
+                                Underscore (_)
+                            </button>
+                            <button
+                                @click="separator = '.'; generateSlug()"
+                                :class="separator === '.' ? 'bg-indigo-600 text-white' : 'bg-gray-100 dark:bg-dark-bg text-gray-700 dark:text-gray-300'"
+                                class="px-3 py-1.5 text-sm font-medium rounded-lg transition-colors"
+                            >
+                                Dot (.)
+                            </button>
+                            <button
+                                @click="separator = ''; generateSlug()"
+                                :class="separator === '' ? 'bg-indigo-600 text-white' : 'bg-gray-100 dark:bg-dark-bg text-gray-700 dark:text-gray-300'"
+                                class="px-3 py-1.5 text-sm font-medium rounded-lg transition-colors"
+                            >
+                                None
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Case -->
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-2">Case</label>
+                        <div class="flex flex-wrap gap-2">
+                            <button
+                                @click="textCase = 'lower'; generateSlug()"
+                                :class="textCase === 'lower' ? 'bg-indigo-600 text-white' : 'bg-gray-100 dark:bg-dark-bg text-gray-700 dark:text-gray-300'"
+                                class="px-3 py-1.5 text-sm font-medium rounded-lg transition-colors"
+                            >
+                                lowercase
+                            </button>
+                            <button
+                                @click="textCase = 'upper'; generateSlug()"
+                                :class="textCase === 'upper' ? 'bg-indigo-600 text-white' : 'bg-gray-100 dark:bg-dark-bg text-gray-700 dark:text-gray-300'"
+                                class="px-3 py-1.5 text-sm font-medium rounded-lg transition-colors"
+                            >
+                                UPPERCASE
+                            </button>
+                            <button
+                                @click="textCase = 'preserve'; generateSlug()"
+                                :class="textCase === 'preserve' ? 'bg-indigo-600 text-white' : 'bg-gray-100 dark:bg-dark-bg text-gray-700 dark:text-gray-300'"
+                                class="px-3 py-1.5 text-sm font-medium rounded-lg transition-colors"
+                            >
+                                Preserve
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Toggles -->
+                    <div class="space-y-2">
+                        <label class="flex items-center space-x-3 cursor-pointer">
+                            <input type="checkbox" x-model="transliterate" @change="generateSlug()" class="w-4 h-4 text-indigo-600 rounded border-gray-300 focus:ring-indigo-500">
+                            <span class="text-sm text-gray-700 dark:text-gray-300">Transliterate accents (é → e, ñ → n)</span>
+                        </label>
+                        <label class="flex items-center space-x-3 cursor-pointer">
+                            <input type="checkbox" x-model="removeNumbers" @change="generateSlug()" class="w-4 h-4 text-indigo-600 rounded border-gray-300 focus:ring-indigo-500">
+                            <span class="text-sm text-gray-700 dark:text-gray-300">Remove numbers</span>
+                        </label>
+                        <label class="flex items-center space-x-3 cursor-pointer">
+                            <input type="checkbox" x-model="maxLength" @change="generateSlug()" class="w-4 h-4 text-indigo-600 rounded border-gray-300 focus:ring-indigo-500">
+                            <span class="text-sm text-gray-700 dark:text-gray-300">Limit length</span>
+                        </label>
+                        <div x-show="maxLength" class="ml-7">
+                            <input
+                                type="number"
+                                x-model.number="maxLengthValue"
+                                @input="generateSlug()"
+                                min="1"
+                                max="200"
+                                class="w-24 p-2 text-sm border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100"
+                            >
+                            <span class="text-xs text-gray-500 dark:text-gray-400 ml-2">characters</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Output Section -->
+        <div class="space-y-4">
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Generated Slug</label>
+                <div class="relative">
+                    <input
+                        type="text"
+                        :value="slug"
+                        readonly
+                        class="w-full p-3 pr-24 font-mono text-sm border border-gray-300 dark:border-dark-border rounded-lg bg-gray-50 dark:bg-dark-bg text-gray-900 dark:text-gray-100"
+                        placeholder="Slug will appear here..."
+                    >
+                    <button
+                        @click="copySlug($event.currentTarget)"
+                        x-show="slug"
+                        class="absolute right-2 top-1/2 -translate-y-1/2 px-3 py-1.5 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-medium rounded transition-colors"
+                    >
+                        Copy
+                    </button>
+                </div>
+                <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
+                    <span x-text="slug.length"></span> characters
+                </p>
+            </div>
+
+            <!-- URL Preview -->
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">URL Preview</label>
+                <div class="p-3 bg-gray-50 dark:bg-dark-bg rounded-lg font-mono text-sm text-gray-600 dark:text-gray-400 break-all">
+                    <span class="text-gray-400 dark:text-gray-500">https://example.com/</span><span class="text-indigo-600 dark:text-indigo-400" x-text="slug || 'your-slug-here'"></span>
+                </div>
+            </div>
+
+            <!-- Examples -->
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Try Examples</label>
+                <div class="space-y-2">
+                    <button
+                        @click="input = 'Hello World! This is a Test'; generateSlug()"
+                        class="w-full text-left px-3 py-2 text-sm bg-gray-50 dark:bg-dark-bg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg transition-colors"
+                    >
+                        Hello World! This is a Test
+                    </button>
+                    <button
+                        @click="input = 'Les écoles françaises sont géniales'; generateSlug()"
+                        class="w-full text-left px-3 py-2 text-sm bg-gray-50 dark:bg-dark-bg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg transition-colors"
+                    >
+                        Les écoles françaises sont géniales
+                    </button>
+                    <button
+                        @click="input = 'Product #123 - Special Edition (2024)'; generateSlug()"
+                        class="w-full text-left px-3 py-2 text-sm bg-gray-50 dark:bg-dark-bg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg transition-colors"
+                    >
+                        Product #123 - Special Edition (2024)
+                    </button>
+                </div>
+            </div>
+
+            <!-- Info -->
+            <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800 p-4">
+                <h3 class="text-sm font-medium text-blue-800 dark:text-blue-300 mb-2">What is a Slug?</h3>
+                <p class="text-xs text-blue-700 dark:text-blue-400">
+                    A slug is a URL-friendly version of a string, typically used in permalinks. It contains only lowercase letters, numbers, and hyphens, making URLs more readable and SEO-friendly.
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
+
+@push('scripts')
+<script>
+function slugGenerator() {
+    return {
+        input: '',
+        slug: '',
+        separator: '-',
+        textCase: 'lower',
+        transliterate: true,
+        removeNumbers: false,
+        maxLength: false,
+        maxLengthValue: 50,
+
+        generateSlug() {
+            let text = this.input;
+
+            // Transliterate accented characters
+            if (this.transliterate) {
+                text = this.transliterateText(text);
+            }
+
+            // Remove numbers if option is checked
+            if (this.removeNumbers) {
+                text = text.replace(/[0-9]/g, '');
+            }
+
+            // Remove special characters except spaces
+            text = text.replace(/[^\w\s-]/g, '');
+
+            // Replace multiple spaces/hyphens with single space
+            text = text.replace(/[\s_-]+/g, ' ').trim();
+
+            // Apply case transformation
+            if (this.textCase === 'lower') {
+                text = text.toLowerCase();
+            } else if (this.textCase === 'upper') {
+                text = text.toUpperCase();
+            }
+
+            // Replace spaces with separator
+            text = text.replace(/\s+/g, this.separator);
+
+            // Remove leading/trailing separators
+            if (this.separator) {
+                const escapedSep = this.separator.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+                text = text.replace(new RegExp(`^${escapedSep}+|${escapedSep}+$`, 'g'), '');
+            }
+
+            // Apply max length
+            if (this.maxLength && this.maxLengthValue > 0) {
+                text = text.substring(0, this.maxLengthValue);
+                // Remove trailing separator if cut off
+                if (this.separator && text.endsWith(this.separator)) {
+                    text = text.slice(0, -this.separator.length);
+                }
+            }
+
+            this.slug = text;
+        },
+
+        transliterateText(text) {
+            const map = {
+                'à': 'a', 'á': 'a', 'â': 'a', 'ã': 'a', 'ä': 'a', 'å': 'a', 'æ': 'ae',
+                'ç': 'c', 'č': 'c', 'ć': 'c',
+                'đ': 'd', 'ď': 'd',
+                'è': 'e', 'é': 'e', 'ê': 'e', 'ë': 'e', 'ě': 'e',
+                'ì': 'i', 'í': 'i', 'î': 'i', 'ï': 'i',
+                'ñ': 'n', 'ň': 'n',
+                'ò': 'o', 'ó': 'o', 'ô': 'o', 'õ': 'o', 'ö': 'o', 'ø': 'o', 'œ': 'oe',
+                'ř': 'r',
+                'š': 's', 'ś': 's',
+                'ť': 't',
+                'ù': 'u', 'ú': 'u', 'û': 'u', 'ü': 'u', 'ů': 'u',
+                'ý': 'y', 'ÿ': 'y',
+                'ž': 'z', 'ź': 'z', 'ż': 'z',
+                'ß': 'ss',
+                'À': 'A', 'Á': 'A', 'Â': 'A', 'Ã': 'A', 'Ä': 'A', 'Å': 'A', 'Æ': 'AE',
+                'Ç': 'C', 'Č': 'C', 'Ć': 'C',
+                'Đ': 'D', 'Ď': 'D',
+                'È': 'E', 'É': 'E', 'Ê': 'E', 'Ë': 'E', 'Ě': 'E',
+                'Ì': 'I', 'Í': 'I', 'Î': 'I', 'Ï': 'I',
+                'Ñ': 'N', 'Ň': 'N',
+                'Ò': 'O', 'Ó': 'O', 'Ô': 'O', 'Õ': 'O', 'Ö': 'O', 'Ø': 'O', 'Œ': 'OE',
+                'Ř': 'R',
+                'Š': 'S', 'Ś': 'S',
+                'Ť': 'T',
+                'Ù': 'U', 'Ú': 'U', 'Û': 'U', 'Ü': 'U', 'Ů': 'U',
+                'Ý': 'Y', 'Ÿ': 'Y',
+                'Ž': 'Z', 'Ź': 'Z', 'Ż': 'Z'
+            };
+
+            return text.split('').map(char => map[char] || char).join('');
+        },
+
+        copySlug(button) {
+            navigator.clipboard.writeText(this.slug).then(() => {
+                const original = button.textContent;
+                button.textContent = 'Copied!';
+                setTimeout(() => { button.textContent = original; }, 1500);
+            });
+        }
+    };
+}
+</script>
+@endpush
diff --git a/routes/web.php b/routes/web.php
index 480c649..08d35ce 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -18,6 +18,7 @@
     Route::get('/code-editor', [ToolController::class, 'codeEditor'])->name('code-editor');
     Route::get('/regex', [ToolController::class, 'regex'])->name('regex');
     Route::get('/base-converter', [ToolController::class, 'baseConverter'])->name('base-converter');
+    Route::get('/slug-generator', [ToolController::class, 'slugGenerator'])->name('slug-generator');
 });
 
 // Static Pages
@@ -40,6 +41,7 @@
         ['loc' => route('tools.code-editor'), 'priority' => '0.9', 'changefreq' => 'monthly'],
         ['loc' => route('tools.regex'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('tools.base-converter'), 'priority' => '0.8', 'changefreq' => 'monthly'],
+        ['loc' => route('tools.slug-generator'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('about'), 'priority' => '0.5', 'changefreq' => 'monthly'],
         ['loc' => route('privacy'), 'priority' => '0.3', 'changefreq' => 'yearly'],
     ];
diff --git a/tests/Feature/WebRoutesTest.php b/tests/Feature/WebRoutesTest.php
index a788080..acf5c6d 100644
--- a/tests/Feature/WebRoutesTest.php
+++ b/tests/Feature/WebRoutesTest.php
@@ -30,6 +30,7 @@ public function test_home_page_displays_all_tools(): void
         $response->assertSee('Code Editor');
         $response->assertSee('Regex Tester');
         $response->assertSee('Base Converter');
+        $response->assertSee('Slug Generator');
     }
 
     public function test_home_page_has_tool_links(): void
@@ -48,6 +49,7 @@ public function test_home_page_has_tool_links(): void
         $response->assertSee('href="' . route('tools.code-editor') . '"', false);
         $response->assertSee('href="' . route('tools.regex') . '"', false);
         $response->assertSee('href="' . route('tools.base-converter') . '"', false);
+        $response->assertSee('href="' . route('tools.slug-generator') . '"', false);
     }
 
     public function test_csv_tool_page_loads(): void
@@ -274,9 +276,29 @@ public function test_base_converter_has_required_elements(): void
         $response->assertSee('Hexadecimal');
     }
 
+    public function test_slug_generator_page_loads(): void
+    {
+        $response = $this->get('/tools/slug-generator');
+
+        $response->assertStatus(200);
+        $response->assertSee('Slug Generator');
+        $response->assertSee('Convert text to URL-friendly slugs');
+    }
+
+    public function test_slug_generator_has_required_elements(): void
+    {
+        $response = $this->get('/tools/slug-generator');
+
+        $response->assertStatus(200);
+        $response->assertSee('Input Text');
+        $response->assertSee('Generated Slug');
+        $response->assertSee('Separator');
+        $response->assertSee('Hyphen');
+    }
+
     public function test_all_pages_have_navigation(): void
     {
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -288,7 +310,7 @@ public function test_all_pages_have_navigation(): void
 
     public function test_all_pages_have_theme_toggle(): void
     {
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -301,7 +323,7 @@ public function test_all_pages_have_theme_toggle(): void
     public function test_all_pages_load_vite_assets(): void
     {
         // Code editor uses standalone template without Vite
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -314,7 +336,7 @@ public function test_all_pages_load_vite_assets(): void
     public function test_all_tool_pages_have_back_link(): void
     {
         // Code editor uses standalone template with home link instead of back
-        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter'];
+        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator'];
 
         foreach ($toolPages as $page) {
             $response = $this->get($page);
@@ -367,7 +389,7 @@ public function test_api_routes_reject_get_requests(): void
 
     public function test_pages_have_csrf_token(): void
     {
-        $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/base-converter'];
+        $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/base-converter', '/tools/slug-generator'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);

From f4d7776520de7e30e8715e797225003b912089b0 Mon Sep 17 00:00:00 2001
From: jalel <ghabri.djalel@gmail.com>
Date: Sun, 14 Dec 2025 21:22:16 +0000
Subject: [PATCH 09/23] Add Color Picker tool

- Visual color picker with HTML5 color input
- Convert between HEX, RGB, HSL, and CMYK formats
- Color harmony: complementary, triadic, analogous colors
- Generate shades and tints
- Display color info: brightness, luminance, suggested text color
- Quick-select common colors palette
- Copy color values to clipboard
- Random color generator
- Client-side only implementation
---
 app/Http/Controllers/ToolController.php      |  11 +
 resources/views/home.blade.php               |   5 +
 resources/views/tools/color-picker.blade.php | 490 +++++++++++++++++++
 routes/web.php                               |   2 +
 tests/Feature/WebRoutesTest.php              |  33 +-
 5 files changed, 536 insertions(+), 5 deletions(-)
 create mode 100644 resources/views/tools/color-picker.blade.php

diff --git a/app/Http/Controllers/ToolController.php b/app/Http/Controllers/ToolController.php
index 3ce0abe..525647c 100644
--- a/app/Http/Controllers/ToolController.php
+++ b/app/Http/Controllers/ToolController.php
@@ -87,6 +87,12 @@ public function index(): View
                 'route' => 'tools.slug-generator',
                 'icon' => 'slug',
             ],
+            [
+                'name' => 'Color Picker',
+                'description' => 'Pick colors and convert between HEX, RGB, HSL, CMYK',
+                'route' => 'tools.color-picker',
+                'icon' => 'color',
+            ],
         ];
 
         return view('home', compact('tools'));
@@ -156,4 +162,9 @@ public function slugGenerator(): View
     {
         return view('tools.slug-generator');
     }
+
+    public function colorPicker(): View
+    {
+        return view('tools.color-picker');
+    }
 }
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index ba4c82f..5218b34 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -100,6 +100,11 @@
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
                         </svg>
                         @break
+                    @case('color')
+                        <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
+                        </svg>
+                        @break
                 @endswitch
             </div>
             <div class="flex-1 min-w-0">
diff --git a/resources/views/tools/color-picker.blade.php b/resources/views/tools/color-picker.blade.php
new file mode 100644
index 0000000..d3cde18
--- /dev/null
+++ b/resources/views/tools/color-picker.blade.php
@@ -0,0 +1,490 @@
+@extends('layouts.app')
+
+@section('title', 'Color Picker & Converter - HEX, RGB, HSL, CMYK | Dev Tools')
+@section('meta_description', 'Free online color picker and converter. Convert between HEX, RGB, HSL, and CMYK color formats. Generate color palettes and complementary colors.')
+@section('meta_keywords', 'color picker, color converter, hex to rgb, rgb to hex, hsl converter, cmyk converter, color palette, color tool, web colors')
+
+@push('schema')
+<script type="application/ld+json">
+{
+    "@@context": "https://schema.org",
+    "@@type": "SoftwareApplication",
+    "name": "Color Picker & Converter",
+    "description": "Convert between HEX, RGB, HSL, and CMYK color formats with visual picker",
+    "url": "{{ route('tools.color-picker') }}",
+    "applicationCategory": "DeveloperApplication",
+    "operatingSystem": "Any",
+    "offers": {
+        "@@type": "Offer",
+        "price": "0",
+        "priceCurrency": "USD"
+    },
+    "author": {
+        "@@type": "Person",
+        "name": "Ghabri Djalel"
+    }
+}
+</script>
+@endpush
+
+@section('content')
+<div x-data="colorPicker()" class="space-y-6">
+    <div class="flex items-center justify-between">
+        <div>
+            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Color Picker & Converter</h1>
+            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Convert between HEX, RGB, HSL, and CMYK formats</p>
+        </div>
+        <a href="{{ route('home') }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline">&larr; Back</a>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <!-- Color Picker Section -->
+        <div class="space-y-4">
+            <!-- Visual Picker -->
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Color Picker</label>
+
+                <div class="flex items-center space-x-4">
+                    <input
+                        type="color"
+                        x-model="hex"
+                        @input="updateFromHex()"
+                        class="w-24 h-24 rounded-lg cursor-pointer border-2 border-gray-300 dark:border-dark-border"
+                    >
+                    <div class="flex-1">
+                        <div
+                            class="w-full h-24 rounded-lg border-2 border-gray-300 dark:border-dark-border"
+                            :style="{ backgroundColor: hex }"
+                        ></div>
+                    </div>
+                </div>
+
+                <div class="flex space-x-2 mt-4">
+                    <button
+                        @click="randomColor()"
+                        class="flex-1 py-2 px-4 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-lg transition-colors"
+                    >
+                        Random Color
+                    </button>
+                    <button
+                        @click="resetColor()"
+                        class="py-2 px-4 bg-gray-200 dark:bg-dark-bg hover:bg-gray-300 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-lg transition-colors"
+                    >
+                        Reset
+                    </button>
+                </div>
+            </div>
+
+            <!-- Color Inputs -->
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Color Values</label>
+
+                <div class="space-y-4">
+                    <!-- HEX -->
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">HEX</label>
+                        <div class="flex space-x-2">
+                            <input
+                                type="text"
+                                x-model="hex"
+                                @input="updateFromHex()"
+                                class="flex-1 p-2 font-mono text-sm border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 uppercase"
+                                placeholder="#000000"
+                            >
+                            <button @click="copyValue(hex, $event.currentTarget)" class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 border border-gray-300 dark:border-dark-border rounded-lg">
+                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- RGB -->
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">RGB</label>
+                        <div class="flex space-x-2">
+                            <div class="flex-1 grid grid-cols-3 gap-2">
+                                <input type="number" x-model.number="rgb.r" @input="updateFromRgb()" min="0" max="255" class="p-2 font-mono text-sm border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 text-center" placeholder="R">
+                                <input type="number" x-model.number="rgb.g" @input="updateFromRgb()" min="0" max="255" class="p-2 font-mono text-sm border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 text-center" placeholder="G">
+                                <input type="number" x-model.number="rgb.b" @input="updateFromRgb()" min="0" max="255" class="p-2 font-mono text-sm border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 text-center" placeholder="B">
+                            </div>
+                            <button @click="copyValue(rgbString, $event.currentTarget)" class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 border border-gray-300 dark:border-dark-border rounded-lg">
+                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/>
+                                </svg>
+                            </button>
+                        </div>
+                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400 font-mono" x-text="rgbString"></p>
+                    </div>
+
+                    <!-- HSL -->
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">HSL</label>
+                        <div class="flex space-x-2">
+                            <div class="flex-1 grid grid-cols-3 gap-2">
+                                <input type="number" x-model.number="hsl.h" @input="updateFromHsl()" min="0" max="360" class="p-2 font-mono text-sm border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 text-center" placeholder="H">
+                                <input type="number" x-model.number="hsl.s" @input="updateFromHsl()" min="0" max="100" class="p-2 font-mono text-sm border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 text-center" placeholder="S">
+                                <input type="number" x-model.number="hsl.l" @input="updateFromHsl()" min="0" max="100" class="p-2 font-mono text-sm border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 text-center" placeholder="L">
+                            </div>
+                            <button @click="copyValue(hslString, $event.currentTarget)" class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 border border-gray-300 dark:border-dark-border rounded-lg">
+                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/>
+                                </svg>
+                            </button>
+                        </div>
+                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400 font-mono" x-text="hslString"></p>
+                    </div>
+
+                    <!-- CMYK -->
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">CMYK</label>
+                        <div class="flex space-x-2">
+                            <div class="flex-1 grid grid-cols-4 gap-2">
+                                <input type="number" x-model.number="cmyk.c" @input="updateFromCmyk()" min="0" max="100" class="p-2 font-mono text-sm border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 text-center" placeholder="C">
+                                <input type="number" x-model.number="cmyk.m" @input="updateFromCmyk()" min="0" max="100" class="p-2 font-mono text-sm border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 text-center" placeholder="M">
+                                <input type="number" x-model.number="cmyk.y" @input="updateFromCmyk()" min="0" max="100" class="p-2 font-mono text-sm border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 text-center" placeholder="Y">
+                                <input type="number" x-model.number="cmyk.k" @input="updateFromCmyk()" min="0" max="100" class="p-2 font-mono text-sm border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 text-center" placeholder="K">
+                            </div>
+                            <button @click="copyValue(cmykString, $event.currentTarget)" class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 border border-gray-300 dark:border-dark-border rounded-lg">
+                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/>
+                                </svg>
+                            </button>
+                        </div>
+                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400 font-mono" x-text="cmykString"></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Color Palette Section -->
+        <div class="space-y-4">
+            <!-- Complementary Colors -->
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Color Harmony</label>
+
+                <div class="space-y-4">
+                    <!-- Complementary -->
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-2">Complementary</label>
+                        <div class="flex space-x-2">
+                            <div class="flex-1 h-12 rounded-lg border border-gray-300 dark:border-dark-border cursor-pointer" :style="{ backgroundColor: hex }" @click="copyValue(hex, $event.currentTarget)"></div>
+                            <div class="flex-1 h-12 rounded-lg border border-gray-300 dark:border-dark-border cursor-pointer" :style="{ backgroundColor: complementary }" @click="copyValue(complementary, $event.currentTarget)"></div>
+                        </div>
+                    </div>
+
+                    <!-- Triadic -->
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-2">Triadic</label>
+                        <div class="flex space-x-2">
+                            <template x-for="color in triadic" :key="color">
+                                <div class="flex-1 h-12 rounded-lg border border-gray-300 dark:border-dark-border cursor-pointer" :style="{ backgroundColor: color }" @click="copyValue(color, $event.currentTarget)"></div>
+                            </template>
+                        </div>
+                    </div>
+
+                    <!-- Analogous -->
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-2">Analogous</label>
+                        <div class="flex space-x-2">
+                            <template x-for="color in analogous" :key="color">
+                                <div class="flex-1 h-12 rounded-lg border border-gray-300 dark:border-dark-border cursor-pointer" :style="{ backgroundColor: color }" @click="copyValue(color, $event.currentTarget)"></div>
+                            </template>
+                        </div>
+                    </div>
+
+                    <!-- Shades -->
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-2">Shades</label>
+                        <div class="flex space-x-1">
+                            <template x-for="shade in shades" :key="shade">
+                                <div class="flex-1 h-12 rounded border border-gray-300 dark:border-dark-border cursor-pointer" :style="{ backgroundColor: shade }" @click="copyValue(shade, $event.currentTarget)"></div>
+                            </template>
+                        </div>
+                    </div>
+
+                    <!-- Tints -->
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-2">Tints</label>
+                        <div class="flex space-x-1">
+                            <template x-for="tint in tints" :key="tint">
+                                <div class="flex-1 h-12 rounded border border-gray-300 dark:border-dark-border cursor-pointer" :style="{ backgroundColor: tint }" @click="copyValue(tint, $event.currentTarget)"></div>
+                            </template>
+                        </div>
+                    </div>
+                </div>
+
+                <p class="mt-3 text-xs text-gray-500 dark:text-gray-400">Click any color to copy its HEX value</p>
+            </div>
+
+            <!-- Color Info -->
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Color Info</label>
+
+                <div class="grid grid-cols-2 gap-4 text-sm">
+                    <div>
+                        <span class="text-gray-600 dark:text-gray-400">Brightness:</span>
+                        <span class="font-mono ml-2" x-text="brightness + '%'"></span>
+                    </div>
+                    <div>
+                        <span class="text-gray-600 dark:text-gray-400">Luminance:</span>
+                        <span class="font-mono ml-2" x-text="luminance.toFixed(3)"></span>
+                    </div>
+                    <div class="col-span-2">
+                        <span class="text-gray-600 dark:text-gray-400">Suggested Text:</span>
+                        <span class="font-mono ml-2 px-2 py-1 rounded" :style="{ backgroundColor: hex, color: textColor }" x-text="textColor"></span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Common Colors -->
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Common Colors</label>
+
+                <div class="grid grid-cols-8 gap-2">
+                    <template x-for="color in commonColors" :key="color">
+                        <button
+                            @click="hex = color; updateFromHex()"
+                            class="w-full aspect-square rounded-lg border-2 border-transparent hover:border-gray-400 dark:hover:border-gray-500 transition-colors"
+                            :style="{ backgroundColor: color }"
+                            :title="color"
+                        ></button>
+                    </template>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
+
+@push('scripts')
+<script>
+function colorPicker() {
+    return {
+        hex: '#6366f1',
+        rgb: { r: 99, g: 102, b: 241 },
+        hsl: { h: 239, s: 84, l: 67 },
+        cmyk: { c: 59, m: 58, y: 0, k: 5 },
+
+        commonColors: [
+            '#ef4444', '#f97316', '#eab308', '#22c55e',
+            '#14b8a6', '#3b82f6', '#8b5cf6', '#ec4899',
+            '#000000', '#374151', '#6b7280', '#9ca3af',
+            '#d1d5db', '#e5e7eb', '#f3f4f6', '#ffffff'
+        ],
+
+        init() {
+            this.updateFromHex();
+        },
+
+        get rgbString() {
+            return `rgb(${this.rgb.r}, ${this.rgb.g}, ${this.rgb.b})`;
+        },
+
+        get hslString() {
+            return `hsl(${this.hsl.h}, ${this.hsl.s}%, ${this.hsl.l}%)`;
+        },
+
+        get cmykString() {
+            return `cmyk(${this.cmyk.c}%, ${this.cmyk.m}%, ${this.cmyk.y}%, ${this.cmyk.k}%)`;
+        },
+
+        get complementary() {
+            const h = (this.hsl.h + 180) % 360;
+            return this.hslToHex(h, this.hsl.s, this.hsl.l);
+        },
+
+        get triadic() {
+            return [
+                this.hex,
+                this.hslToHex((this.hsl.h + 120) % 360, this.hsl.s, this.hsl.l),
+                this.hslToHex((this.hsl.h + 240) % 360, this.hsl.s, this.hsl.l)
+            ];
+        },
+
+        get analogous() {
+            return [
+                this.hslToHex((this.hsl.h - 30 + 360) % 360, this.hsl.s, this.hsl.l),
+                this.hex,
+                this.hslToHex((this.hsl.h + 30) % 360, this.hsl.s, this.hsl.l)
+            ];
+        },
+
+        get shades() {
+            const shades = [];
+            for (let i = 0; i < 7; i++) {
+                const l = Math.max(0, this.hsl.l - (i * 10));
+                shades.push(this.hslToHex(this.hsl.h, this.hsl.s, l));
+            }
+            return shades;
+        },
+
+        get tints() {
+            const tints = [];
+            for (let i = 0; i < 7; i++) {
+                const l = Math.min(100, this.hsl.l + (i * 5));
+                tints.push(this.hslToHex(this.hsl.h, this.hsl.s, l));
+            }
+            return tints;
+        },
+
+        get brightness() {
+            return Math.round((this.rgb.r * 299 + this.rgb.g * 587 + this.rgb.b * 114) / 1000 / 255 * 100);
+        },
+
+        get luminance() {
+            const r = this.rgb.r / 255;
+            const g = this.rgb.g / 255;
+            const b = this.rgb.b / 255;
+            const toLinear = (c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+            return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+        },
+
+        get textColor() {
+            return this.luminance > 0.179 ? '#000000' : '#ffffff';
+        },
+
+        updateFromHex() {
+            let hex = this.hex.replace('#', '');
+            if (hex.length === 3) {
+                hex = hex.split('').map(c => c + c).join('');
+            }
+            if (hex.length !== 6) return;
+
+            this.hex = '#' + hex.toLowerCase();
+            const r = parseInt(hex.substr(0, 2), 16);
+            const g = parseInt(hex.substr(2, 2), 16);
+            const b = parseInt(hex.substr(4, 2), 16);
+
+            if (isNaN(r) || isNaN(g) || isNaN(b)) return;
+
+            this.rgb = { r, g, b };
+            this.hsl = this.rgbToHsl(r, g, b);
+            this.cmyk = this.rgbToCmyk(r, g, b);
+        },
+
+        updateFromRgb() {
+            const { r, g, b } = this.rgb;
+            if (r < 0 || r > 255 || g < 0 || g > 255 || b < 0 || b > 255) return;
+
+            this.hex = this.rgbToHex(r, g, b);
+            this.hsl = this.rgbToHsl(r, g, b);
+            this.cmyk = this.rgbToCmyk(r, g, b);
+        },
+
+        updateFromHsl() {
+            const { h, s, l } = this.hsl;
+            if (h < 0 || h > 360 || s < 0 || s > 100 || l < 0 || l > 100) return;
+
+            const rgb = this.hslToRgb(h, s, l);
+            this.rgb = rgb;
+            this.hex = this.rgbToHex(rgb.r, rgb.g, rgb.b);
+            this.cmyk = this.rgbToCmyk(rgb.r, rgb.g, rgb.b);
+        },
+
+        updateFromCmyk() {
+            const { c, m, y, k } = this.cmyk;
+            if (c < 0 || c > 100 || m < 0 || m > 100 || y < 0 || y > 100 || k < 0 || k > 100) return;
+
+            const rgb = this.cmykToRgb(c, m, y, k);
+            this.rgb = rgb;
+            this.hex = this.rgbToHex(rgb.r, rgb.g, rgb.b);
+            this.hsl = this.rgbToHsl(rgb.r, rgb.g, rgb.b);
+        },
+
+        rgbToHex(r, g, b) {
+            return '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
+        },
+
+        rgbToHsl(r, g, b) {
+            r /= 255; g /= 255; b /= 255;
+            const max = Math.max(r, g, b), min = Math.min(r, g, b);
+            let h, s, l = (max + min) / 2;
+
+            if (max === min) {
+                h = s = 0;
+            } else {
+                const d = max - min;
+                s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+                switch (max) {
+                    case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
+                    case g: h = ((b - r) / d + 2) / 6; break;
+                    case b: h = ((r - g) / d + 4) / 6; break;
+                }
+            }
+
+            return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
+        },
+
+        hslToRgb(h, s, l) {
+            h /= 360; s /= 100; l /= 100;
+            let r, g, b;
+
+            if (s === 0) {
+                r = g = b = l;
+            } else {
+                const hue2rgb = (p, q, t) => {
+                    if (t < 0) t += 1;
+                    if (t > 1) t -= 1;
+                    if (t < 1/6) return p + (q - p) * 6 * t;
+                    if (t < 1/2) return q;
+                    if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+                    return p;
+                };
+                const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+                const p = 2 * l - q;
+                r = hue2rgb(p, q, h + 1/3);
+                g = hue2rgb(p, q, h);
+                b = hue2rgb(p, q, h - 1/3);
+            }
+
+            return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) };
+        },
+
+        hslToHex(h, s, l) {
+            const rgb = this.hslToRgb(h, s, l);
+            return this.rgbToHex(rgb.r, rgb.g, rgb.b);
+        },
+
+        rgbToCmyk(r, g, b) {
+            r /= 255; g /= 255; b /= 255;
+            const k = 1 - Math.max(r, g, b);
+            if (k === 1) return { c: 0, m: 0, y: 0, k: 100 };
+            const c = (1 - r - k) / (1 - k);
+            const m = (1 - g - k) / (1 - k);
+            const y = (1 - b - k) / (1 - k);
+            return { c: Math.round(c * 100), m: Math.round(m * 100), y: Math.round(y * 100), k: Math.round(k * 100) };
+        },
+
+        cmykToRgb(c, m, y, k) {
+            c /= 100; m /= 100; y /= 100; k /= 100;
+            const r = 255 * (1 - c) * (1 - k);
+            const g = 255 * (1 - m) * (1 - k);
+            const b = 255 * (1 - y) * (1 - k);
+            return { r: Math.round(r), g: Math.round(g), b: Math.round(b) };
+        },
+
+        randomColor() {
+            const r = Math.floor(Math.random() * 256);
+            const g = Math.floor(Math.random() * 256);
+            const b = Math.floor(Math.random() * 256);
+            this.hex = this.rgbToHex(r, g, b);
+            this.updateFromHex();
+        },
+
+        resetColor() {
+            this.hex = '#6366f1';
+            this.updateFromHex();
+        },
+
+        copyValue(value, button) {
+            navigator.clipboard.writeText(value).then(() => {
+                const original = button.innerHTML;
+                button.innerHTML = '<svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>';
+                setTimeout(() => { button.innerHTML = original; }, 1500);
+            });
+        }
+    };
+}
+</script>
+@endpush
diff --git a/routes/web.php b/routes/web.php
index 08d35ce..429b128 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -19,6 +19,7 @@
     Route::get('/regex', [ToolController::class, 'regex'])->name('regex');
     Route::get('/base-converter', [ToolController::class, 'baseConverter'])->name('base-converter');
     Route::get('/slug-generator', [ToolController::class, 'slugGenerator'])->name('slug-generator');
+    Route::get('/color-picker', [ToolController::class, 'colorPicker'])->name('color-picker');
 });
 
 // Static Pages
@@ -42,6 +43,7 @@
         ['loc' => route('tools.regex'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('tools.base-converter'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('tools.slug-generator'), 'priority' => '0.8', 'changefreq' => 'monthly'],
+        ['loc' => route('tools.color-picker'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('about'), 'priority' => '0.5', 'changefreq' => 'monthly'],
         ['loc' => route('privacy'), 'priority' => '0.3', 'changefreq' => 'yearly'],
     ];
diff --git a/tests/Feature/WebRoutesTest.php b/tests/Feature/WebRoutesTest.php
index acf5c6d..4787717 100644
--- a/tests/Feature/WebRoutesTest.php
+++ b/tests/Feature/WebRoutesTest.php
@@ -31,6 +31,7 @@ public function test_home_page_displays_all_tools(): void
         $response->assertSee('Regex Tester');
         $response->assertSee('Base Converter');
         $response->assertSee('Slug Generator');
+        $response->assertSee('Color Picker');
     }
 
     public function test_home_page_has_tool_links(): void
@@ -50,6 +51,7 @@ public function test_home_page_has_tool_links(): void
         $response->assertSee('href="' . route('tools.regex') . '"', false);
         $response->assertSee('href="' . route('tools.base-converter') . '"', false);
         $response->assertSee('href="' . route('tools.slug-generator') . '"', false);
+        $response->assertSee('href="' . route('tools.color-picker') . '"', false);
     }
 
     public function test_csv_tool_page_loads(): void
@@ -296,9 +298,30 @@ public function test_slug_generator_has_required_elements(): void
         $response->assertSee('Hyphen');
     }
 
+    public function test_color_picker_page_loads(): void
+    {
+        $response = $this->get('/tools/color-picker');
+
+        $response->assertStatus(200);
+        $response->assertSee('Color Picker');
+        $response->assertSee('Convert between HEX, RGB, HSL, and CMYK');
+    }
+
+    public function test_color_picker_has_required_elements(): void
+    {
+        $response = $this->get('/tools/color-picker');
+
+        $response->assertStatus(200);
+        $response->assertSee('HEX');
+        $response->assertSee('RGB');
+        $response->assertSee('HSL');
+        $response->assertSee('CMYK');
+        $response->assertSee('Color Harmony');
+    }
+
     public function test_all_pages_have_navigation(): void
     {
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -310,7 +333,7 @@ public function test_all_pages_have_navigation(): void
 
     public function test_all_pages_have_theme_toggle(): void
     {
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -323,7 +346,7 @@ public function test_all_pages_have_theme_toggle(): void
     public function test_all_pages_load_vite_assets(): void
     {
         // Code editor uses standalone template without Vite
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -336,7 +359,7 @@ public function test_all_pages_load_vite_assets(): void
     public function test_all_tool_pages_have_back_link(): void
     {
         // Code editor uses standalone template with home link instead of back
-        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator'];
+        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker'];
 
         foreach ($toolPages as $page) {
             $response = $this->get($page);
@@ -389,7 +412,7 @@ public function test_api_routes_reject_get_requests(): void
 
     public function test_pages_have_csrf_token(): void
     {
-        $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/base-converter', '/tools/slug-generator'];
+        $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);

From 08d04fd1e893a26ab7edb0b1d072f2000b8fbb62 Mon Sep 17 00:00:00 2001
From: jalel <ghabri.djalel@gmail.com>
Date: Sun, 14 Dec 2025 20:53:36 +0000
Subject: [PATCH 10/23] Add QR Code Generator tool

- Generate QR codes from text, URLs, email, phone, SMS, WiFi
- Customizable size (128-512px) and colors
- Error correction level options (L, M, Q, H)
- Download as PNG or SVG
- Copy QR code image to clipboard
- Quick templates for common use cases
- Client-side only using qrcode.js library
---
 app/Http/Controllers/ToolController.php |  11 +
 resources/views/home.blade.php          |   6 +
 resources/views/tools/qr-code.blade.php | 416 ++++++++++++++++++++++++
 routes/web.php                          |   8 +
 tests/Feature/WebRoutesTest.php         |  39 ++-
 5 files changed, 475 insertions(+), 5 deletions(-)
 create mode 100644 resources/views/tools/qr-code.blade.php

diff --git a/app/Http/Controllers/ToolController.php b/app/Http/Controllers/ToolController.php
index 525647c..3e134d5 100644
--- a/app/Http/Controllers/ToolController.php
+++ b/app/Http/Controllers/ToolController.php
@@ -93,6 +93,12 @@ public function index(): View
                 'route' => 'tools.color-picker',
                 'icon' => 'color',
             ],
+            [
+                'name' => 'QR Code Generator',
+                'description' => 'Generate QR codes for URLs, text, and more',
+                'route' => 'tools.qr-code',
+                'icon' => 'qrcode',
+            ],
         ];
 
         return view('home', compact('tools'));
@@ -167,4 +173,9 @@ public function colorPicker(): View
     {
         return view('tools.color-picker');
     }
+
+    public function qrCode(): View
+    {
+        return view('tools.qr-code');
+    }
 }
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index 5218b34..c73b6d2 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -90,6 +90,7 @@
                             <circle cx="12" cy="12" r="4" stroke-width="2"/>
                         </svg>
                         @break
+
                     @case('calculator')
                         <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
@@ -103,6 +104,11 @@
                     @case('color')
                         <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
+
+                    @case('qrcode')
+                        <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h2M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"/>
+
                         </svg>
                         @break
                 @endswitch
diff --git a/resources/views/tools/qr-code.blade.php b/resources/views/tools/qr-code.blade.php
new file mode 100644
index 0000000..f48406f
--- /dev/null
+++ b/resources/views/tools/qr-code.blade.php
@@ -0,0 +1,416 @@
+@extends('layouts.app')
+
+@section('title', 'QR Code Generator - Create QR Codes Online Free | Dev Tools')
+@section('meta_description', 'Free online QR code generator. Create QR codes for URLs, text, email, phone numbers. Customize colors and size. Download as PNG instantly.')
+@section('meta_keywords', 'qr code generator, create qr code, qr code maker, free qr code, qr code online, generate qr code, custom qr code, qr code download')
+
+@push('schema')
+<script type="application/ld+json">
+{
+    "@@context": "https://schema.org",
+    "@@type": "SoftwareApplication",
+    "name": "QR Code Generator",
+    "description": "Generate QR codes for URLs, text, and more with customizable colors and sizes",
+    "url": "{{ route('tools.qr-code') }}",
+    "applicationCategory": "DeveloperApplication",
+    "operatingSystem": "Any",
+    "offers": {
+        "@@type": "Offer",
+        "price": "0",
+        "priceCurrency": "USD"
+    },
+    "author": {
+        "@@type": "Person",
+        "name": "Ghabri Djalel"
+    }
+}
+</script>
+@endpush
+
+@section('content')
+<div x-data="qrCodeGenerator()" class="space-y-6">
+    <div class="flex items-center justify-between">
+        <div>
+            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">QR Code Generator</h1>
+            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Generate QR codes for URLs, text, and more</p>
+        </div>
+        <a href="{{ route('home') }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline">&larr; Back</a>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <!-- Input Section -->
+        <div class="space-y-4">
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Content</label>
+                <textarea
+                    x-model="content"
+                    @input="generateQR()"
+                    class="w-full h-32 p-3 border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent resize-none font-mono text-sm"
+                    placeholder="Enter URL, text, or any content..."
+                ></textarea>
+                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                    <span x-text="content.length"></span> characters
+                </p>
+            </div>
+
+            <!-- Quick Templates -->
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Quick Templates</label>
+                <div class="flex flex-wrap gap-2">
+                    <button @click="applyTemplate('url')" class="px-3 py-1.5 text-xs font-medium bg-gray-100 dark:bg-dark-bg text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
+                        URL
+                    </button>
+                    <button @click="applyTemplate('email')" class="px-3 py-1.5 text-xs font-medium bg-gray-100 dark:bg-dark-bg text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
+                        Email
+                    </button>
+                    <button @click="applyTemplate('phone')" class="px-3 py-1.5 text-xs font-medium bg-gray-100 dark:bg-dark-bg text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
+                        Phone
+                    </button>
+                    <button @click="applyTemplate('sms')" class="px-3 py-1.5 text-xs font-medium bg-gray-100 dark:bg-dark-bg text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
+                        SMS
+                    </button>
+                    <button @click="applyTemplate('wifi')" class="px-3 py-1.5 text-xs font-medium bg-gray-100 dark:bg-dark-bg text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
+                        WiFi
+                    </button>
+                </div>
+            </div>
+
+            <!-- Options -->
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Options</label>
+
+                <div class="space-y-4">
+                    <!-- Size -->
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
+                            Size: <span x-text="size + 'x' + size"></span> px
+                        </label>
+                        <input
+                            type="range"
+                            x-model="size"
+                            @input="generateQR()"
+                            min="128"
+                            max="512"
+                            step="32"
+                            class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-indigo-600"
+                        >
+                        <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
+                            <span>128px</span>
+                            <span>512px</span>
+                        </div>
+                    </div>
+
+                    <!-- Colors -->
+                    <div class="grid grid-cols-2 gap-4">
+                        <div>
+                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Foreground</label>
+                            <div class="flex items-center space-x-2">
+                                <input
+                                    type="color"
+                                    x-model="foreground"
+                                    @input="generateQR()"
+                                    class="w-10 h-10 rounded cursor-pointer border border-gray-300 dark:border-dark-border"
+                                >
+                                <input
+                                    type="text"
+                                    x-model="foreground"
+                                    @input="generateQR()"
+                                    class="flex-1 p-2 text-xs font-mono border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 uppercase"
+                                >
+                            </div>
+                        </div>
+                        <div>
+                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Background</label>
+                            <div class="flex items-center space-x-2">
+                                <input
+                                    type="color"
+                                    x-model="background"
+                                    @input="generateQR()"
+                                    class="w-10 h-10 rounded cursor-pointer border border-gray-300 dark:border-dark-border"
+                                >
+                                <input
+                                    type="text"
+                                    x-model="background"
+                                    @input="generateQR()"
+                                    class="flex-1 p-2 text-xs font-mono border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 uppercase"
+                                >
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Error Correction -->
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Error Correction</label>
+                        <select
+                            x-model="errorCorrection"
+                            @change="generateQR()"
+                            class="w-full p-2 text-sm border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500"
+                        >
+                            <option value="L">Low (7%)</option>
+                            <option value="M">Medium (15%)</option>
+                            <option value="Q">Quartile (25%)</option>
+                            <option value="H">High (30%)</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Output Section -->
+        <div class="space-y-4">
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">Generated QR Code</label>
+
+                <div class="flex flex-col items-center justify-center">
+                    <!-- QR Code Container -->
+                    <div
+                        id="qr-container"
+                        class="p-4 bg-white rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 min-h-[200px] flex items-center justify-center"
+                        :style="{ backgroundColor: background }"
+                    >
+                        <template x-if="!content">
+                            <p class="text-gray-400 dark:text-gray-500 text-sm">Enter content to generate QR code</p>
+                        </template>
+                        <canvas id="qr-canvas" x-show="content" class="max-w-full"></canvas>
+                    </div>
+
+                    <!-- Actions -->
+                    <div class="flex flex-wrap gap-2 mt-4" x-show="content">
+                        <button
+                            @click="downloadPNG()"
+                            class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-lg transition-colors flex items-center space-x-2"
+                        >
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
+                            </svg>
+                            <span>Download PNG</span>
+                        </button>
+                        <button
+                            @click="downloadSVG()"
+                            class="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium rounded-lg transition-colors flex items-center space-x-2"
+                        >
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
+                            </svg>
+                            <span>Download SVG</span>
+                        </button>
+                        <button
+                            @click="copyToClipboard($event.currentTarget)"
+                            class="px-4 py-2 bg-gray-100 dark:bg-dark-bg hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-lg transition-colors flex items-center space-x-2 border border-gray-300 dark:border-dark-border"
+                        >
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/>
+                            </svg>
+                            <span>Copy Image</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Info Panel -->
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">About QR Codes</h3>
+                <div class="space-y-2 text-xs text-gray-600 dark:text-gray-400">
+                    <p><strong>URL:</strong> Link directly to websites</p>
+                    <p><strong>Email:</strong> Use mailto:email@example.com</p>
+                    <p><strong>Phone:</strong> Use tel:+1234567890</p>
+                    <p><strong>SMS:</strong> Use sms:+1234567890?body=message</p>
+                    <p><strong>WiFi:</strong> Use WIFI:T:WPA;S:NetworkName;P:Password;;</p>
+                </div>
+            </div>
+
+            <!-- Error Correction Info -->
+            <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800 p-4">
+                <h3 class="text-sm font-medium text-blue-800 dark:text-blue-300 mb-2">Error Correction Levels</h3>
+                <ul class="text-xs text-blue-700 dark:text-blue-400 space-y-1">
+                    <li><strong>L (Low):</strong> 7% - Smallest QR code</li>
+                    <li><strong>M (Medium):</strong> 15% - Good balance</li>
+                    <li><strong>Q (Quartile):</strong> 25% - Better recovery</li>
+                    <li><strong>H (High):</strong> 30% - Best for logos</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
+
+@push('scripts')
+<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
+<script>
+function qrCodeGenerator() {
+    return {
+        content: '',
+        size: 256,
+        foreground: '#000000',
+        background: '#ffffff',
+        errorCorrection: 'M',
+        qrCode: null,
+        debounceTimer: null,
+
+        init() {
+            // Generate initial QR if content exists
+            if (this.content) {
+                this.generateQR();
+            }
+        },
+
+        applyTemplate(type) {
+            const templates = {
+                url: 'https://example.com',
+                email: 'mailto:hello@example.com?subject=Hello&body=Hi there!',
+                phone: 'tel:+1234567890',
+                sms: 'sms:+1234567890?body=Hello!',
+                wifi: 'WIFI:T:WPA;S:NetworkName;P:YourPassword;;'
+            };
+            this.content = templates[type] || '';
+            this.generateQR();
+        },
+
+        generateQR() {
+            // Debounce the generation
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = setTimeout(() => {
+                this._doGenerateQR();
+            }, 150);
+        },
+
+        _doGenerateQR() {
+            if (!this.content) return;
+
+            const canvas = document.getElementById('qr-canvas');
+            if (!canvas) return;
+
+            // Clear previous
+            const ctx = canvas.getContext('2d');
+
+            // Create temporary container for QRCode library
+            const tempDiv = document.createElement('div');
+
+            try {
+                // QRCode.js creates a canvas inside the div
+                new QRCode(tempDiv, {
+                    text: this.content,
+                    width: parseInt(this.size),
+                    height: parseInt(this.size),
+                    colorDark: this.foreground,
+                    colorLight: this.background,
+                    correctLevel: QRCode.CorrectLevel[this.errorCorrection]
+                });
+
+                // Copy the generated canvas to our canvas
+                const generatedCanvas = tempDiv.querySelector('canvas');
+                if (generatedCanvas) {
+                    canvas.width = parseInt(this.size);
+                    canvas.height = parseInt(this.size);
+                    ctx.drawImage(generatedCanvas, 0, 0);
+                }
+            } catch (e) {
+                console.error('QR generation failed:', e);
+            }
+        },
+
+        downloadPNG() {
+            const canvas = document.getElementById('qr-canvas');
+            if (!canvas) return;
+
+            const link = document.createElement('a');
+            link.download = 'qrcode.png';
+            link.href = canvas.toDataURL('image/png');
+            link.click();
+        },
+
+        downloadSVG() {
+            if (!this.content) return;
+
+            // Generate SVG using a simple approach
+            const size = parseInt(this.size);
+            const moduleCount = this._getModuleCount();
+            const cellSize = size / moduleCount;
+
+            // Create temporary QR to get the modules
+            const tempDiv = document.createElement('div');
+            new QRCode(tempDiv, {
+                text: this.content,
+                width: size,
+                height: size,
+                colorDark: this.foreground,
+                colorLight: this.background,
+                correctLevel: QRCode.CorrectLevel[this.errorCorrection]
+            });
+
+            // Get the canvas data
+            const canvas = tempDiv.querySelector('canvas');
+            const ctx = canvas.getContext('2d');
+
+            let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size} ${size}" width="${size}" height="${size}">`;
+            svg += `<rect width="100%" height="100%" fill="${this.background}"/>`;
+
+            // Sample pixels to create SVG rectangles
+            const imageData = ctx.getImageData(0, 0, size, size);
+            const step = Math.max(1, Math.floor(size / moduleCount));
+
+            for (let y = 0; y < size; y += step) {
+                for (let x = 0; x < size; x += step) {
+                    const i = (y * size + x) * 4;
+                    const r = imageData.data[i];
+                    const g = imageData.data[i + 1];
+                    const b = imageData.data[i + 2];
+
+                    // Check if this is a dark module
+                    if (r < 128 && g < 128 && b < 128) {
+                        svg += `<rect x="${x}" y="${y}" width="${step}" height="${step}" fill="${this.foreground}"/>`;
+                    }
+                }
+            }
+
+            svg += '</svg>';
+
+            const blob = new Blob([svg], { type: 'image/svg+xml' });
+            const link = document.createElement('a');
+            link.download = 'qrcode.svg';
+            link.href = URL.createObjectURL(blob);
+            link.click();
+            URL.revokeObjectURL(link.href);
+        },
+
+        _getModuleCount() {
+            // Approximate module count based on content length and error correction
+            const len = this.content.length;
+            if (len <= 25) return 21;
+            if (len <= 47) return 25;
+            if (len <= 77) return 29;
+            if (len <= 114) return 33;
+            if (len <= 154) return 37;
+            return 41;
+        },
+
+        async copyToClipboard(button) {
+            const canvas = document.getElementById('qr-canvas');
+            if (!canvas) return;
+
+            try {
+                const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png'));
+                await navigator.clipboard.write([
+                    new ClipboardItem({ 'image/png': blob })
+                ]);
+
+                // Visual feedback
+                const originalText = button.innerHTML;
+                button.innerHTML = `
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+                    </svg>
+                    <span>Copied!</span>
+                `;
+                setTimeout(() => {
+                    button.innerHTML = originalText;
+                }, 2000);
+            } catch (e) {
+                console.error('Copy failed:', e);
+                alert('Copy to clipboard failed. Try downloading instead.');
+            }
+        }
+    };
+}
+</script>
+@endpush
diff --git a/routes/web.php b/routes/web.php
index 429b128..b56ba8d 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -17,9 +17,13 @@
     Route::get('/url', [ToolController::class, 'url'])->name('url');
     Route::get('/code-editor', [ToolController::class, 'codeEditor'])->name('code-editor');
     Route::get('/regex', [ToolController::class, 'regex'])->name('regex');
+
     Route::get('/base-converter', [ToolController::class, 'baseConverter'])->name('base-converter');
     Route::get('/slug-generator', [ToolController::class, 'slugGenerator'])->name('slug-generator');
     Route::get('/color-picker', [ToolController::class, 'colorPicker'])->name('color-picker');
+
+    Route::get('/qr-code', [ToolController::class, 'qrCode'])->name('qr-code');
+
 });
 
 // Static Pages
@@ -41,9 +45,13 @@
         ['loc' => route('tools.url'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('tools.code-editor'), 'priority' => '0.9', 'changefreq' => 'monthly'],
         ['loc' => route('tools.regex'), 'priority' => '0.8', 'changefreq' => 'monthly'],
+
         ['loc' => route('tools.base-converter'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('tools.slug-generator'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('tools.color-picker'), 'priority' => '0.8', 'changefreq' => 'monthly'],
+
+        ['loc' => route('tools.qr-code'), 'priority' => '0.8', 'changefreq' => 'monthly'],
+
         ['loc' => route('about'), 'priority' => '0.5', 'changefreq' => 'monthly'],
         ['loc' => route('privacy'), 'priority' => '0.3', 'changefreq' => 'yearly'],
     ];
diff --git a/tests/Feature/WebRoutesTest.php b/tests/Feature/WebRoutesTest.php
index 4787717..766edc0 100644
--- a/tests/Feature/WebRoutesTest.php
+++ b/tests/Feature/WebRoutesTest.php
@@ -29,9 +29,13 @@ public function test_home_page_displays_all_tools(): void
         $response->assertSee('URL Encoder');
         $response->assertSee('Code Editor');
         $response->assertSee('Regex Tester');
+
         $response->assertSee('Base Converter');
         $response->assertSee('Slug Generator');
         $response->assertSee('Color Picker');
+
+        $response->assertSee('QR Code Generator');
+
     }
 
     public function test_home_page_has_tool_links(): void
@@ -49,9 +53,13 @@ public function test_home_page_has_tool_links(): void
         $response->assertSee('href="' . route('tools.url') . '"', false);
         $response->assertSee('href="' . route('tools.code-editor') . '"', false);
         $response->assertSee('href="' . route('tools.regex') . '"', false);
+
         $response->assertSee('href="' . route('tools.base-converter') . '"', false);
         $response->assertSee('href="' . route('tools.slug-generator') . '"', false);
         $response->assertSee('href="' . route('tools.color-picker') . '"', false);
+
+        $response->assertSee('href="' . route('tools.qr-code') . '"', false);
+
     }
 
     public function test_csv_tool_page_loads(): void
@@ -258,6 +266,7 @@ public function test_regex_tool_has_required_elements(): void
         $response->assertSee('Match Details');
     }
 
+
     public function test_base_converter_page_loads(): void
     {
         $response = $this->get('/tools/base-converter');
@@ -317,11 +326,31 @@ public function test_color_picker_has_required_elements(): void
         $response->assertSee('HSL');
         $response->assertSee('CMYK');
         $response->assertSee('Color Harmony');
+
+    public function test_qr_code_tool_page_loads(): void
+    {
+        $response = $this->get('/tools/qr-code');
+
+        $response->assertStatus(200);
+        $response->assertSee('QR Code Generator');
+        $response->assertSee('Generate QR codes for URLs, text, and more');
+    }
+
+    public function test_qr_code_tool_has_required_elements(): void
+    {
+        $response = $this->get('/tools/qr-code');
+
+        $response->assertStatus(200);
+        $response->assertSee('Content');
+        $response->assertSee('Quick Templates');
+        $response->assertSee('Download PNG');
+        $response->assertSee('Error Correction');
+
     }
 
     public function test_all_pages_have_navigation(): void
     {
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -333,7 +362,7 @@ public function test_all_pages_have_navigation(): void
 
     public function test_all_pages_have_theme_toggle(): void
     {
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -346,7 +375,7 @@ public function test_all_pages_have_theme_toggle(): void
     public function test_all_pages_load_vite_assets(): void
     {
         // Code editor uses standalone template without Vite
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -359,7 +388,7 @@ public function test_all_pages_load_vite_assets(): void
     public function test_all_tool_pages_have_back_link(): void
     {
         // Code editor uses standalone template with home link instead of back
-        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker'];
+        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code'];
 
         foreach ($toolPages as $page) {
             $response = $this->get($page);
@@ -412,7 +441,7 @@ public function test_api_routes_reject_get_requests(): void
 
     public function test_pages_have_csrf_token(): void
     {
-        $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker'];
+        $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);

From 22e03b9983c6fd5d592ded85e51da2cc53748242 Mon Sep 17 00:00:00 2001
From: jalel <ghabri.djalel@gmail.com>
Date: Sun, 14 Dec 2025 20:39:53 +0000
Subject: [PATCH 11/23] Add HTML Entity Encoder tool

- Encode text to HTML entities (named, numeric, hex formats)
- Decode HTML entities back to text
- Option to encode all characters or only special characters
- Common entities reference panel with clickable items
- Entity reference table organized by categories
- Statistics showing input/output lengths
---
 app/Http/Controllers/ToolController.php     |  11 +
 resources/views/home.blade.php              |   3 +
 resources/views/tools/html-entity.blade.php | 419 ++++++++++++++++++++
 routes/web.php                              |   2 +
 tests/Feature/WebRoutesTest.php             |  30 +-
 5 files changed, 460 insertions(+), 5 deletions(-)
 create mode 100644 resources/views/tools/html-entity.blade.php

diff --git a/app/Http/Controllers/ToolController.php b/app/Http/Controllers/ToolController.php
index 3e134d5..bdbe302 100644
--- a/app/Http/Controllers/ToolController.php
+++ b/app/Http/Controllers/ToolController.php
@@ -99,6 +99,12 @@ public function index(): View
                 'route' => 'tools.qr-code',
                 'icon' => 'qrcode',
             ],
+            [
+                'name' => 'HTML Entity Encoder',
+                'description' => 'Encode/decode HTML entities and special characters',
+                'route' => 'tools.html-entity',
+                'icon' => 'html-entity',
+            ],
         ];
 
         return view('home', compact('tools'));
@@ -178,4 +184,9 @@ public function qrCode(): View
     {
         return view('tools.qr-code');
     }
+
+    public function htmlEntity(): View
+    {
+        return view('tools.html-entity');
+    }
 }
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index c73b6d2..22b824b 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -109,6 +109,9 @@
                         <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h2M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"/>
 
+                    @case('html-entity')
+                        <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
                         </svg>
                         @break
                 @endswitch
diff --git a/resources/views/tools/html-entity.blade.php b/resources/views/tools/html-entity.blade.php
new file mode 100644
index 0000000..b253fd2
--- /dev/null
+++ b/resources/views/tools/html-entity.blade.php
@@ -0,0 +1,419 @@
+@extends('layouts.app')
+
+@section('title', 'HTML Entity Encoder/Decoder - Free Online Tool | Dev Tools')
+@section('meta_description', 'Free online HTML entity encoder and decoder. Convert special characters to HTML entities and decode them back. Supports named and numeric entities.')
+@section('meta_keywords', 'html entity encoder, html entity decoder, encode html, decode html entities, html special characters, free html tool')
+
+@push('schema')
+<script type="application/ld+json">
+{
+    "@@context": "https://schema.org",
+    "@@type": "SoftwareApplication",
+    "name": "HTML Entity Encoder/Decoder",
+    "description": "Encode special characters to HTML entities or decode HTML entities back to text",
+    "url": "{{ route('tools.html-entity') }}",
+    "applicationCategory": "DeveloperApplication",
+    "operatingSystem": "Any",
+    "offers": {
+        "@@type": "Offer",
+        "price": "0",
+        "priceCurrency": "USD"
+    },
+    "author": {
+        "@@type": "Person",
+        "name": "Ghabri Djalel"
+    }
+}
+</script>
+@endpush
+
+@section('content')
+<div x-data="htmlEntityTool()" class="space-y-6">
+    <div class="flex items-center justify-between">
+        <div>
+            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">HTML Entity Encoder/Decoder</h1>
+            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Encode special characters to HTML entities or decode them back to text</p>
+        </div>
+        <a href="{{ route('home') }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline">&larr; Back</a>
+    </div>
+
+    <!-- Options -->
+    <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+        <div class="flex flex-wrap items-center gap-4">
+            <div class="flex items-center space-x-2">
+                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Encoding Mode:</span>
+                <select
+                    x-model="encodeMode"
+                    class="px-3 py-1.5 border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                >
+                    <option value="named">Named Entities (&amp;amp;)</option>
+                    <option value="numeric">Numeric Entities (&amp;#38;)</option>
+                    <option value="hex">Hex Entities (&amp;#x26;)</option>
+                </select>
+            </div>
+            <label class="flex items-center space-x-2 cursor-pointer">
+                <input type="checkbox" x-model="encodeAll" class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500">
+                <span class="text-sm text-gray-700 dark:text-gray-300">Encode all characters</span>
+            </label>
+        </div>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <!-- Input -->
+        <div class="space-y-4">
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <div class="flex items-center justify-between mb-2">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Input</label>
+                    <button
+                        @click="clearInput()"
+                        x-show="input.length > 0"
+                        class="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                    >
+                        Clear
+                    </button>
+                </div>
+                <textarea
+                    x-model="input"
+                    class="textarea-code w-full h-48 p-3 border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent resize-none"
+                    placeholder="Enter text to encode or HTML entities to decode..."
+                ></textarea>
+            </div>
+
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <div class="flex gap-2">
+                    <button
+                        @click="encode()"
+                        :disabled="!input.trim()"
+                        class="flex-1 py-2 px-4 bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-400 text-white font-medium rounded-lg transition-colors"
+                    >
+                        Encode
+                    </button>
+                    <button
+                        @click="decode()"
+                        :disabled="!input.trim()"
+                        class="flex-1 py-2 px-4 bg-gray-600 hover:bg-gray-700 disabled:bg-gray-400 text-white font-medium rounded-lg transition-colors"
+                    >
+                        Decode
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Output -->
+        <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+            <div class="flex items-center justify-between mb-2">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Output</label>
+                <div class="flex items-center space-x-2">
+                    <button
+                        x-show="output"
+                        @click="copyOutput($event.currentTarget)"
+                        class="p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                        title="Copy to clipboard"
+                    >
+                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+
+            <textarea
+                x-model="output"
+                readonly
+                class="textarea-code w-full h-56 p-3 border border-gray-300 dark:border-dark-border rounded-lg bg-gray-50 dark:bg-dark-bg text-gray-900 dark:text-gray-100 resize-none"
+                placeholder="Output will appear here..."
+            ></textarea>
+
+            <!-- Statistics -->
+            <div x-show="output" class="mt-3 pt-3 border-t border-gray-200 dark:border-dark-border">
+                <div class="grid grid-cols-2 gap-2 text-sm">
+                    <div class="text-gray-600 dark:text-gray-400">
+                        Input length: <span class="font-medium text-gray-900 dark:text-white" x-text="input.length"></span>
+                    </div>
+                    <div class="text-gray-600 dark:text-gray-400">
+                        Output length: <span class="font-medium text-gray-900 dark:text-white" x-text="output.length"></span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Common Entities Reference -->
+    <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Common HTML Entities</h2>
+        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
+            <template x-for="entity in commonEntities" :key="entity.char">
+                <button
+                    @click="insertEntity(entity)"
+                    class="p-2 border border-gray-200 dark:border-dark-border rounded-lg hover:bg-gray-50 dark:hover:bg-dark-border transition-colors text-center"
+                >
+                    <div class="text-xl font-mono text-gray-900 dark:text-white" x-text="entity.char"></div>
+                    <div class="text-xs text-gray-500 dark:text-gray-400 mt-1 truncate" x-text="entity.name"></div>
+                </button>
+            </template>
+        </div>
+    </div>
+
+    <!-- Entity Categories -->
+    <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Entity Reference</h2>
+
+        <div x-data="{ activeTab: 'special' }" class="space-y-4">
+            <div class="flex flex-wrap gap-2">
+                <button
+                    @click="activeTab = 'special'"
+                    :class="activeTab === 'special' ? 'bg-indigo-600 text-white' : 'bg-gray-100 dark:bg-dark-border text-gray-700 dark:text-gray-300'"
+                    class="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors"
+                >
+                    Special Characters
+                </button>
+                <button
+                    @click="activeTab = 'punctuation'"
+                    :class="activeTab === 'punctuation' ? 'bg-indigo-600 text-white' : 'bg-gray-100 dark:bg-dark-border text-gray-700 dark:text-gray-300'"
+                    class="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors"
+                >
+                    Punctuation
+                </button>
+                <button
+                    @click="activeTab = 'math'"
+                    :class="activeTab === 'math' ? 'bg-indigo-600 text-white' : 'bg-gray-100 dark:bg-dark-border text-gray-700 dark:text-gray-300'"
+                    class="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors"
+                >
+                    Math Symbols
+                </button>
+                <button
+                    @click="activeTab = 'currency'"
+                    :class="activeTab === 'currency' ? 'bg-indigo-600 text-white' : 'bg-gray-100 dark:bg-dark-border text-gray-700 dark:text-gray-300'"
+                    class="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors"
+                >
+                    Currency
+                </button>
+                <button
+                    @click="activeTab = 'arrows'"
+                    :class="activeTab === 'arrows' ? 'bg-indigo-600 text-white' : 'bg-gray-100 dark:bg-dark-border text-gray-700 dark:text-gray-300'"
+                    class="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors"
+                >
+                    Arrows
+                </button>
+            </div>
+
+            <div class="overflow-x-auto">
+                <table class="w-full text-sm">
+                    <thead>
+                        <tr class="border-b border-gray-200 dark:border-dark-border">
+                            <th class="text-left py-2 px-3 font-medium text-gray-700 dark:text-gray-300">Character</th>
+                            <th class="text-left py-2 px-3 font-medium text-gray-700 dark:text-gray-300">Named</th>
+                            <th class="text-left py-2 px-3 font-medium text-gray-700 dark:text-gray-300">Numeric</th>
+                            <th class="text-left py-2 px-3 font-medium text-gray-700 dark:text-gray-300">Hex</th>
+                            <th class="text-left py-2 px-3 font-medium text-gray-700 dark:text-gray-300">Description</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <template x-for="entity in entityCategories[activeTab]" :key="entity.code">
+                            <tr class="border-b border-gray-100 dark:border-dark-border/50 hover:bg-gray-50 dark:hover:bg-dark-border/30">
+                                <td class="py-2 px-3 text-lg font-mono text-gray-900 dark:text-white" x-text="entity.char"></td>
+                                <td class="py-2 px-3 font-mono text-indigo-600 dark:text-indigo-400 cursor-pointer hover:underline" @click="copyToClipboard(entity.named, $event.currentTarget)" x-text="entity.named"></td>
+                                <td class="py-2 px-3 font-mono text-gray-600 dark:text-gray-400 cursor-pointer hover:underline" @click="copyToClipboard(entity.numeric, $event.currentTarget)" x-text="entity.numeric"></td>
+                                <td class="py-2 px-3 font-mono text-gray-600 dark:text-gray-400 cursor-pointer hover:underline" @click="copyToClipboard(entity.hex, $event.currentTarget)" x-text="entity.hex"></td>
+                                <td class="py-2 px-3 text-gray-600 dark:text-gray-400" x-text="entity.description"></td>
+                            </tr>
+                        </template>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
+
+@push('scripts')
+<script>
+function htmlEntityTool() {
+    return {
+        input: '',
+        output: '',
+        encodeMode: 'named',
+        encodeAll: false,
+
+        commonEntities: [
+            { char: '&', name: '&amp;', code: 38 },
+            { char: '<', name: '&lt;', code: 60 },
+            { char: '>', name: '&gt;', code: 62 },
+            { char: '"', name: '&quot;', code: 34 },
+            { char: "'", name: '&apos;', code: 39 },
+            { char: ' ', name: '&nbsp;', code: 160 },
+            { char: '©', name: '&copy;', code: 169 },
+            { char: '®', name: '&reg;', code: 174 },
+            { char: '™', name: '&trade;', code: 8482 },
+            { char: '€', name: '&euro;', code: 8364 },
+            { char: '£', name: '&pound;', code: 163 },
+            { char: '¥', name: '&yen;', code: 165 },
+        ],
+
+        entityCategories: {
+            special: [
+                { char: '&', named: '&amp;', numeric: '&#38;', hex: '&#x26;', code: 38, description: 'Ampersand' },
+                { char: '<', named: '&lt;', numeric: '&#60;', hex: '&#x3C;', code: 60, description: 'Less than' },
+                { char: '>', named: '&gt;', numeric: '&#62;', hex: '&#x3E;', code: 62, description: 'Greater than' },
+                { char: '"', named: '&quot;', numeric: '&#34;', hex: '&#x22;', code: 34, description: 'Double quote' },
+                { char: "'", named: '&apos;', numeric: '&#39;', hex: '&#x27;', code: 39, description: 'Single quote' },
+                { char: ' ', named: '&nbsp;', numeric: '&#160;', hex: '&#xA0;', code: 160, description: 'Non-breaking space' },
+                { char: '©', named: '&copy;', numeric: '&#169;', hex: '&#xA9;', code: 169, description: 'Copyright' },
+                { char: '®', named: '&reg;', numeric: '&#174;', hex: '&#xAE;', code: 174, description: 'Registered trademark' },
+                { char: '™', named: '&trade;', numeric: '&#8482;', hex: '&#x2122;', code: 8482, description: 'Trademark' },
+            ],
+            punctuation: [
+                { char: '–', named: '&ndash;', numeric: '&#8211;', hex: '&#x2013;', code: 8211, description: 'En dash' },
+                { char: '—', named: '&mdash;', numeric: '&#8212;', hex: '&#x2014;', code: 8212, description: 'Em dash' },
+                { char: '"', named: '&ldquo;', numeric: '&#8220;', hex: '&#x201C;', code: 8220, description: 'Left double quote' },
+                { char: '"', named: '&rdquo;', numeric: '&#8221;', hex: '&#x201D;', code: 8221, description: 'Right double quote' },
+                { char: ''', named: '&lsquo;', numeric: '&#8216;', hex: '&#x2018;', code: 8216, description: 'Left single quote' },
+                { char: ''', named: '&rsquo;', numeric: '&#8217;', hex: '&#x2019;', code: 8217, description: 'Right single quote' },
+                { char: '…', named: '&hellip;', numeric: '&#8230;', hex: '&#x2026;', code: 8230, description: 'Horizontal ellipsis' },
+                { char: '•', named: '&bull;', numeric: '&#8226;', hex: '&#x2022;', code: 8226, description: 'Bullet' },
+                { char: '·', named: '&middot;', numeric: '&#183;', hex: '&#xB7;', code: 183, description: 'Middle dot' },
+            ],
+            math: [
+                { char: '±', named: '&plusmn;', numeric: '&#177;', hex: '&#xB1;', code: 177, description: 'Plus-minus' },
+                { char: '×', named: '&times;', numeric: '&#215;', hex: '&#xD7;', code: 215, description: 'Multiplication' },
+                { char: '÷', named: '&divide;', numeric: '&#247;', hex: '&#xF7;', code: 247, description: 'Division' },
+                { char: '≠', named: '&ne;', numeric: '&#8800;', hex: '&#x2260;', code: 8800, description: 'Not equal' },
+                { char: '≤', named: '&le;', numeric: '&#8804;', hex: '&#x2264;', code: 8804, description: 'Less or equal' },
+                { char: '≥', named: '&ge;', numeric: '&#8805;', hex: '&#x2265;', code: 8805, description: 'Greater or equal' },
+                { char: '∞', named: '&infin;', numeric: '&#8734;', hex: '&#x221E;', code: 8734, description: 'Infinity' },
+                { char: '√', named: '&radic;', numeric: '&#8730;', hex: '&#x221A;', code: 8730, description: 'Square root' },
+                { char: '∑', named: '&sum;', numeric: '&#8721;', hex: '&#x2211;', code: 8721, description: 'Summation' },
+            ],
+            currency: [
+                { char: '€', named: '&euro;', numeric: '&#8364;', hex: '&#x20AC;', code: 8364, description: 'Euro' },
+                { char: '£', named: '&pound;', numeric: '&#163;', hex: '&#xA3;', code: 163, description: 'Pound' },
+                { char: '¥', named: '&yen;', numeric: '&#165;', hex: '&#xA5;', code: 165, description: 'Yen' },
+                { char: '¢', named: '&cent;', numeric: '&#162;', hex: '&#xA2;', code: 162, description: 'Cent' },
+                { char: '¤', named: '&curren;', numeric: '&#164;', hex: '&#xA4;', code: 164, description: 'Currency' },
+                { char: '₹', named: null, numeric: '&#8377;', hex: '&#x20B9;', code: 8377, description: 'Indian Rupee' },
+                { char: '₿', named: null, numeric: '&#8383;', hex: '&#x20BF;', code: 8383, description: 'Bitcoin' },
+            ],
+            arrows: [
+                { char: '←', named: '&larr;', numeric: '&#8592;', hex: '&#x2190;', code: 8592, description: 'Left arrow' },
+                { char: '→', named: '&rarr;', numeric: '&#8594;', hex: '&#x2192;', code: 8594, description: 'Right arrow' },
+                { char: '↑', named: '&uarr;', numeric: '&#8593;', hex: '&#x2191;', code: 8593, description: 'Up arrow' },
+                { char: '↓', named: '&darr;', numeric: '&#8595;', hex: '&#x2193;', code: 8595, description: 'Down arrow' },
+                { char: '↔', named: '&harr;', numeric: '&#8596;', hex: '&#x2194;', code: 8596, description: 'Left-right arrow' },
+                { char: '↵', named: '&crarr;', numeric: '&#8629;', hex: '&#x21B5;', code: 8629, description: 'Carriage return' },
+                { char: '⇐', named: '&lArr;', numeric: '&#8656;', hex: '&#x21D0;', code: 8656, description: 'Double left arrow' },
+                { char: '⇒', named: '&rArr;', numeric: '&#8658;', hex: '&#x21D2;', code: 8658, description: 'Double right arrow' },
+            ],
+        },
+
+        // Named entity map for encoding
+        namedEntities: {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&apos;',
+            '\u00A0': '&nbsp;',
+            '©': '&copy;',
+            '®': '&reg;',
+            '™': '&trade;',
+            '€': '&euro;',
+            '£': '&pound;',
+            '¥': '&yen;',
+            '¢': '&cent;',
+            '–': '&ndash;',
+            '—': '&mdash;',
+            '"': '&ldquo;',
+            '"': '&rdquo;',
+            ''': '&lsquo;',
+            ''': '&rsquo;',
+            '…': '&hellip;',
+            '•': '&bull;',
+            '±': '&plusmn;',
+            '×': '&times;',
+            '÷': '&divide;',
+            '≠': '&ne;',
+            '≤': '&le;',
+            '≥': '&ge;',
+            '∞': '&infin;',
+            '←': '&larr;',
+            '→': '&rarr;',
+            '↑': '&uarr;',
+            '↓': '&darr;',
+        },
+
+        encode() {
+            if (!this.input.trim()) return;
+
+            if (this.encodeAll) {
+                this.output = this.encodeAllChars(this.input);
+            } else {
+                this.output = this.encodeSpecialChars(this.input);
+            }
+        },
+
+        encodeAllChars(text) {
+            let result = '';
+            for (let i = 0; i < text.length; i++) {
+                const code = text.charCodeAt(i);
+                if (this.encodeMode === 'hex') {
+                    result += '&#x' + code.toString(16).toUpperCase() + ';';
+                } else {
+                    result += '&#' + code + ';';
+                }
+            }
+            return result;
+        },
+
+        encodeSpecialChars(text) {
+            let result = '';
+            for (let i = 0; i < text.length; i++) {
+                const char = text[i];
+                const code = text.charCodeAt(i);
+
+                // Check if we should encode this character
+                if (this.encodeMode === 'named' && this.namedEntities[char]) {
+                    result += this.namedEntities[char];
+                } else if (code > 127 || char === '&' || char === '<' || char === '>' || char === '"' || char === "'") {
+                    if (this.encodeMode === 'named' && this.namedEntities[char]) {
+                        result += this.namedEntities[char];
+                    } else if (this.encodeMode === 'hex') {
+                        result += '&#x' + code.toString(16).toUpperCase() + ';';
+                    } else {
+                        result += '&#' + code + ';';
+                    }
+                } else {
+                    result += char;
+                }
+            }
+            return result;
+        },
+
+        decode() {
+            if (!this.input.trim()) return;
+
+            // Create a temporary element to decode HTML entities
+            const textarea = document.createElement('textarea');
+            textarea.innerHTML = this.input;
+            this.output = textarea.value;
+        },
+
+        insertEntity(entity) {
+            this.input += entity.char;
+        },
+
+        copyToClipboard(text, button) {
+            DevTools.copyToClipboard(text, button);
+        },
+
+        copyOutput(button) {
+            DevTools.copyToClipboard(this.output, button);
+        },
+
+        clearInput() {
+            this.input = '';
+            this.output = '';
+        }
+    };
+}
+</script>
+@endpush
diff --git a/routes/web.php b/routes/web.php
index b56ba8d..d9ffa41 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -24,6 +24,7 @@
 
     Route::get('/qr-code', [ToolController::class, 'qrCode'])->name('qr-code');
 
+    Route::get('/html-entity', [ToolController::class, 'htmlEntity'])->name('html-entity');
 });
 
 // Static Pages
@@ -52,6 +53,7 @@
 
         ['loc' => route('tools.qr-code'), 'priority' => '0.8', 'changefreq' => 'monthly'],
 
+        ['loc' => route('tools.html-entity'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('about'), 'priority' => '0.5', 'changefreq' => 'monthly'],
         ['loc' => route('privacy'), 'priority' => '0.3', 'changefreq' => 'yearly'],
     ];
diff --git a/tests/Feature/WebRoutesTest.php b/tests/Feature/WebRoutesTest.php
index 766edc0..4cd4af2 100644
--- a/tests/Feature/WebRoutesTest.php
+++ b/tests/Feature/WebRoutesTest.php
@@ -36,6 +36,7 @@ public function test_home_page_displays_all_tools(): void
 
         $response->assertSee('QR Code Generator');
 
+        $response->assertSee('HTML Entity Encoder');
     }
 
     public function test_home_page_has_tool_links(): void
@@ -60,6 +61,7 @@ public function test_home_page_has_tool_links(): void
 
         $response->assertSee('href="' . route('tools.qr-code') . '"', false);
 
+        $response->assertSee('href="' . route('tools.html-entity') . '"', false);
     }
 
     public function test_csv_tool_page_loads(): void
@@ -346,11 +348,29 @@ public function test_qr_code_tool_has_required_elements(): void
         $response->assertSee('Download PNG');
         $response->assertSee('Error Correction');
 
+    public function test_html_entity_tool_page_loads(): void
+    {
+        $response = $this->get('/tools/html-entity');
+
+        $response->assertStatus(200);
+        $response->assertSee('HTML Entity Encoder/Decoder');
+        $response->assertSee('Encode special characters to HTML entities or decode them back to text');
+    }
+
+    public function test_html_entity_tool_has_required_elements(): void
+    {
+        $response = $this->get('/tools/html-entity');
+
+        $response->assertStatus(200);
+        $response->assertSee('Encode');
+        $response->assertSee('Decode');
+        $response->assertSee('Common HTML Entities');
+        $response->assertSee('Entity Reference');
     }
 
     public function test_all_pages_have_navigation(): void
     {
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -362,7 +382,7 @@ public function test_all_pages_have_navigation(): void
 
     public function test_all_pages_have_theme_toggle(): void
     {
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -375,7 +395,7 @@ public function test_all_pages_have_theme_toggle(): void
     public function test_all_pages_load_vite_assets(): void
     {
         // Code editor uses standalone template without Vite
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -388,7 +408,7 @@ public function test_all_pages_load_vite_assets(): void
     public function test_all_tool_pages_have_back_link(): void
     {
         // Code editor uses standalone template with home link instead of back
-        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code'];
+        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity'];
 
         foreach ($toolPages as $page) {
             $response = $this->get($page);
@@ -441,7 +461,7 @@ public function test_api_routes_reject_get_requests(): void
 
     public function test_pages_have_csrf_token(): void
     {
-        $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code'];
+        $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);

From e26a01ee8a9a95f6595a1daaf5a1bd961031d6a6 Mon Sep 17 00:00:00 2001
From: jalel <ghabri.djalel@gmail.com>
Date: Sun, 14 Dec 2025 20:33:53 +0000
Subject: [PATCH 12/23] Add Text Case Converter tool

- Convert text between 13 different case formats
- Supports: lowercase, UPPERCASE, Title Case, Sentence case
- Programming cases: camelCase, PascalCase, snake_case, kebab-case
- Additional: CONSTANT_CASE, dot.case, path/case
- Fun modes: aLtErNaTiNg, Inverse Case
- Real-time character/word/line statistics
- Quick action buttons for common conversions
- Client-side only implementation using Alpine.js
---
 app/Http/Controllers/ToolController.php   |   7 +
 resources/views/home.blade.php            |   4 +
 resources/views/tools/text-case.blade.php | 305 ++++++++++++++++++++++
 routes/web.php                            |   2 +
 tests/Feature/WebRoutesTest.php           |  25 ++
 5 files changed, 343 insertions(+)
 create mode 100644 resources/views/tools/text-case.blade.php

diff --git a/app/Http/Controllers/ToolController.php b/app/Http/Controllers/ToolController.php
index bdbe302..8718fb8 100644
--- a/app/Http/Controllers/ToolController.php
+++ b/app/Http/Controllers/ToolController.php
@@ -104,6 +104,10 @@ public function index(): View
                 'description' => 'Encode/decode HTML entities and special characters',
                 'route' => 'tools.html-entity',
                 'icon' => 'html-entity',
+                'name' => 'Text Case Converter',
+                'description' => 'Convert text to camelCase, snake_case, and more',
+                'route' => 'tools.text-case',
+                'icon' => 'text-case',
             ],
         ];
 
@@ -188,5 +192,8 @@ public function qrCode(): View
     public function htmlEntity(): View
     {
         return view('tools.html-entity');
+    public function textCase(): View
+    {
+        return view('tools.text-case');
     }
 }
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index 22b824b..7257a33 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -112,6 +112,10 @@
                     @case('html-entity')
                         <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
+                    @case('text-case')
+                        <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 3v5a1 1 0 001 1h5"/>
                         </svg>
                         @break
                 @endswitch
diff --git a/resources/views/tools/text-case.blade.php b/resources/views/tools/text-case.blade.php
new file mode 100644
index 0000000..039cdd3
--- /dev/null
+++ b/resources/views/tools/text-case.blade.php
@@ -0,0 +1,305 @@
+@extends('layouts.app')
+
+@section('title', 'Text Case Converter - camelCase, snake_case, Title Case | Dev Tools')
+@section('meta_description', 'Free online text case converter. Convert text to lowercase, UPPERCASE, Title Case, camelCase, snake_case, kebab-case, PascalCase, and more.')
+@section('meta_keywords', 'text case converter, camelcase converter, snake case, kebab case, title case, uppercase, lowercase, pascal case, text transformer')
+
+@push('schema')
+<script type="application/ld+json">
+{
+    "@@context": "https://schema.org",
+    "@@type": "SoftwareApplication",
+    "name": "Text Case Converter",
+    "description": "Convert text between different case formats",
+    "url": "{{ route('tools.text-case') }}",
+    "applicationCategory": "DeveloperApplication",
+    "operatingSystem": "Any",
+    "offers": {
+        "@@type": "Offer",
+        "price": "0",
+        "priceCurrency": "USD"
+    },
+    "author": {
+        "@@type": "Person",
+        "name": "Ghabri Djalel"
+    }
+}
+</script>
+@endpush
+
+@section('content')
+<div x-data="textCaseConverter()" class="space-y-6">
+    <div class="flex items-center justify-between">
+        <div>
+            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Text Case Converter</h1>
+            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Convert text between different case formats</p>
+        </div>
+        <a href="{{ route('home') }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline">&larr; Back</a>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
+        <div class="lg:col-span-3 space-y-4">
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <div class="flex items-center justify-between mb-2">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Input Text</label>
+                    <button
+                        @click="clear()"
+                        class="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                    >
+                        Clear
+                    </button>
+                </div>
+                <textarea
+                    x-model="input"
+                    class="w-full h-40 p-3 border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent resize-none font-mono"
+                    placeholder="Enter or paste your text here..."
+                ></textarea>
+                <div class="mt-2 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
+                    <div class="flex gap-4">
+                        <span><span x-text="stats.characters"></span> characters</span>
+                        <span><span x-text="stats.words"></span> words</span>
+                        <span><span x-text="stats.lines"></span> lines</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <div class="flex items-center justify-between mb-2">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Output</label>
+                    <button
+                        @click="copy($event.currentTarget)"
+                        :disabled="!output"
+                        class="text-xs text-indigo-600 dark:text-indigo-400 hover:underline disabled:opacity-50 disabled:no-underline"
+                    >
+                        Copy to clipboard
+                    </button>
+                </div>
+                <textarea
+                    x-model="output"
+                    readonly
+                    class="w-full h-40 p-3 border border-gray-300 dark:border-dark-border rounded-lg bg-gray-50 dark:bg-dark-bg text-gray-900 dark:text-gray-100 resize-none font-mono"
+                    placeholder="Converted text will appear here..."
+                ></textarea>
+            </div>
+        </div>
+
+        <div class="space-y-4">
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-3">Convert To</h2>
+                <div class="space-y-2">
+                    <template x-for="converter in converters" :key="converter.id">
+                        <button
+                            @click="convert(converter.id)"
+                            class="w-full text-left p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-dark-bg transition-colors border border-transparent"
+                            :class="activeConverter === converter.id ? 'bg-indigo-50 dark:bg-indigo-900/20 border-indigo-200 dark:border-indigo-800' : ''"
+                        >
+                            <div class="font-medium text-sm text-gray-900 dark:text-white" x-text="converter.name"></div>
+                            <div class="text-xs text-gray-500 dark:text-gray-400 font-mono" x-text="converter.example"></div>
+                        </button>
+                    </template>
+                </div>
+            </div>
+
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-3">Quick Actions</h2>
+                <div class="grid grid-cols-2 gap-2">
+                    <button
+                        @click="convert('lower')"
+                        class="p-2 text-xs font-medium bg-gray-100 dark:bg-dark-bg text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+                    >
+                        lowercase
+                    </button>
+                    <button
+                        @click="convert('upper')"
+                        class="p-2 text-xs font-medium bg-gray-100 dark:bg-dark-bg text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+                    >
+                        UPPERCASE
+                    </button>
+                    <button
+                        @click="convert('camel')"
+                        class="p-2 text-xs font-medium bg-gray-100 dark:bg-dark-bg text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+                    >
+                        camelCase
+                    </button>
+                    <button
+                        @click="convert('snake')"
+                        class="p-2 text-xs font-medium bg-gray-100 dark:bg-dark-bg text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+                    >
+                        snake_case
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
+
+@push('scripts')
+<script>
+function textCaseConverter() {
+    return {
+        input: '',
+        output: '',
+        activeConverter: null,
+        converters: [
+            { id: 'lower', name: 'lowercase', example: 'hello world' },
+            { id: 'upper', name: 'UPPERCASE', example: 'HELLO WORLD' },
+            { id: 'title', name: 'Title Case', example: 'Hello World' },
+            { id: 'sentence', name: 'Sentence case', example: 'Hello world. This is text.' },
+            { id: 'camel', name: 'camelCase', example: 'helloWorld' },
+            { id: 'pascal', name: 'PascalCase', example: 'HelloWorld' },
+            { id: 'snake', name: 'snake_case', example: 'hello_world' },
+            { id: 'kebab', name: 'kebab-case', example: 'hello-world' },
+            { id: 'constant', name: 'CONSTANT_CASE', example: 'HELLO_WORLD' },
+            { id: 'dot', name: 'dot.case', example: 'hello.world' },
+            { id: 'path', name: 'path/case', example: 'hello/world' },
+            { id: 'alternating', name: 'aLtErNaTiNg', example: 'hElLo WoRlD' },
+            { id: 'inverse', name: 'Inverse Case', example: 'hELLO wORLD' },
+        ],
+
+        get stats() {
+            const text = this.input;
+            return {
+                characters: text.length,
+                words: text.trim() ? text.trim().split(/\s+/).length : 0,
+                lines: text ? text.split(/\n/).length : 0
+            };
+        },
+
+        convert(type) {
+            this.activeConverter = type;
+            const text = this.input;
+
+            switch (type) {
+                case 'lower':
+                    this.output = text.toLowerCase();
+                    break;
+                case 'upper':
+                    this.output = text.toUpperCase();
+                    break;
+                case 'title':
+                    this.output = this.toTitleCase(text);
+                    break;
+                case 'sentence':
+                    this.output = this.toSentenceCase(text);
+                    break;
+                case 'camel':
+                    this.output = this.toCamelCase(text);
+                    break;
+                case 'pascal':
+                    this.output = this.toPascalCase(text);
+                    break;
+                case 'snake':
+                    this.output = this.toSnakeCase(text);
+                    break;
+                case 'kebab':
+                    this.output = this.toKebabCase(text);
+                    break;
+                case 'constant':
+                    this.output = this.toConstantCase(text);
+                    break;
+                case 'dot':
+                    this.output = this.toDotCase(text);
+                    break;
+                case 'path':
+                    this.output = this.toPathCase(text);
+                    break;
+                case 'alternating':
+                    this.output = this.toAlternatingCase(text);
+                    break;
+                case 'inverse':
+                    this.output = this.toInverseCase(text);
+                    break;
+                default:
+                    this.output = text;
+            }
+        },
+
+        toTitleCase(text) {
+            return text.toLowerCase().replace(/(?:^|\s|[-_])\w/g, match => match.toUpperCase());
+        },
+
+        toSentenceCase(text) {
+            return text.toLowerCase().replace(/(^\s*\w|[.!?]\s+\w)/g, match => match.toUpperCase());
+        },
+
+        getWords(text) {
+            return text
+                .replace(/([a-z])([A-Z])/g, '$1 $2')
+                .replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2')
+                .replace(/[-_./\\]+/g, ' ')
+                .toLowerCase()
+                .trim()
+                .split(/\s+/)
+                .filter(w => w.length > 0);
+        },
+
+        toCamelCase(text) {
+            const words = this.getWords(text);
+            if (words.length === 0) return '';
+            return words[0] + words.slice(1).map(w => w.charAt(0).toUpperCase() + w.slice(1)).join('');
+        },
+
+        toPascalCase(text) {
+            const words = this.getWords(text);
+            return words.map(w => w.charAt(0).toUpperCase() + w.slice(1)).join('');
+        },
+
+        toSnakeCase(text) {
+            return this.getWords(text).join('_');
+        },
+
+        toKebabCase(text) {
+            return this.getWords(text).join('-');
+        },
+
+        toConstantCase(text) {
+            return this.getWords(text).join('_').toUpperCase();
+        },
+
+        toDotCase(text) {
+            return this.getWords(text).join('.');
+        },
+
+        toPathCase(text) {
+            return this.getWords(text).join('/');
+        },
+
+        toAlternatingCase(text) {
+            let result = '';
+            let upper = false;
+            for (let char of text) {
+                if (/[a-zA-Z]/.test(char)) {
+                    result += upper ? char.toUpperCase() : char.toLowerCase();
+                    upper = !upper;
+                } else {
+                    result += char;
+                }
+            }
+            return result;
+        },
+
+        toInverseCase(text) {
+            return text.split('').map(char => {
+                if (char === char.toUpperCase()) {
+                    return char.toLowerCase();
+                }
+                return char.toUpperCase();
+            }).join('');
+        },
+
+        copy(button) {
+            if (this.output) {
+                DevTools.copyToClipboard(this.output, button);
+            }
+        },
+
+        clear() {
+            this.input = '';
+            this.output = '';
+            this.activeConverter = null;
+        }
+    };
+}
+</script>
+@endpush
diff --git a/routes/web.php b/routes/web.php
index d9ffa41..2497e14 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -25,6 +25,7 @@
     Route::get('/qr-code', [ToolController::class, 'qrCode'])->name('qr-code');
 
     Route::get('/html-entity', [ToolController::class, 'htmlEntity'])->name('html-entity');
+    Route::get('/text-case', [ToolController::class, 'textCase'])->name('text-case');
 });
 
 // Static Pages
@@ -54,6 +55,7 @@
         ['loc' => route('tools.qr-code'), 'priority' => '0.8', 'changefreq' => 'monthly'],
 
         ['loc' => route('tools.html-entity'), 'priority' => '0.8', 'changefreq' => 'monthly'],
+        ['loc' => route('tools.text-case'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('about'), 'priority' => '0.5', 'changefreq' => 'monthly'],
         ['loc' => route('privacy'), 'priority' => '0.3', 'changefreq' => 'yearly'],
     ];
diff --git a/tests/Feature/WebRoutesTest.php b/tests/Feature/WebRoutesTest.php
index 4cd4af2..a537f09 100644
--- a/tests/Feature/WebRoutesTest.php
+++ b/tests/Feature/WebRoutesTest.php
@@ -37,6 +37,7 @@ public function test_home_page_displays_all_tools(): void
         $response->assertSee('QR Code Generator');
 
         $response->assertSee('HTML Entity Encoder');
+        $response->assertSee('Text Case Converter');
     }
 
     public function test_home_page_has_tool_links(): void
@@ -62,6 +63,7 @@ public function test_home_page_has_tool_links(): void
         $response->assertSee('href="' . route('tools.qr-code') . '"', false);
 
         $response->assertSee('href="' . route('tools.html-entity') . '"', false);
+        $response->assertSee('href="' . route('tools.text-case') . '"', false);
     }
 
     public function test_csv_tool_page_loads(): void
@@ -366,11 +368,30 @@ public function test_html_entity_tool_has_required_elements(): void
         $response->assertSee('Decode');
         $response->assertSee('Common HTML Entities');
         $response->assertSee('Entity Reference');
+    public function test_text_case_tool_page_loads(): void
+    {
+        $response = $this->get('/tools/text-case');
+
+        $response->assertStatus(200);
+        $response->assertSee('Text Case Converter');
+        $response->assertSee('Convert text between different case formats');
+    }
+
+    public function test_text_case_tool_has_required_elements(): void
+    {
+        $response = $this->get('/tools/text-case');
+
+        $response->assertStatus(200);
+        $response->assertSee('Input Text');
+        $response->assertSee('Convert To');
+        $response->assertSee('camelCase');
+        $response->assertSee('snake_case');
     }
 
     public function test_all_pages_have_navigation(): void
     {
         $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/text-case'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -383,6 +404,7 @@ public function test_all_pages_have_navigation(): void
     public function test_all_pages_have_theme_toggle(): void
     {
         $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/text-case'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -396,6 +418,7 @@ public function test_all_pages_load_vite_assets(): void
     {
         // Code editor uses standalone template without Vite
         $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/text-case'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -409,6 +432,7 @@ public function test_all_tool_pages_have_back_link(): void
     {
         // Code editor uses standalone template with home link instead of back
         $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity'];
+        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/text-case'];
 
         foreach ($toolPages as $page) {
             $response = $this->get($page);
@@ -462,6 +486,7 @@ public function test_api_routes_reject_get_requests(): void
     public function test_pages_have_csrf_token(): void
     {
         $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity'];
+        $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/text-case'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);

From ae48144eb928d1a621aa7889fb1f18a17c820223 Mon Sep 17 00:00:00 2001
From: jalel <ghabri.djalel@gmail.com>
Date: Sun, 14 Dec 2025 17:25:47 +0000
Subject: [PATCH 13/23] Add Password Generator tool

- Generate secure random passwords using crypto.getRandomValues()
- Configurable length (4-64 characters)
- Character options: uppercase, lowercase, numbers, symbols
- Exclude ambiguous characters option (0OIl1)
- Password strength indicator with visual bar
- Quick presets: PIN, Simple, Strong, Paranoid
- Bulk generation (up to 50 passwords)
- Password history with copy functionality
---
 app/Http/Controllers/ToolController.php       |   7 +
 resources/views/home.blade.php                |   3 +
 .../views/tools/password-generator.blade.php  | 446 ++++++++++++++++++
 routes/web.php                                |   2 +
 tests/Feature/WebRoutesTest.php               |  25 +
 5 files changed, 483 insertions(+)
 create mode 100644 resources/views/tools/password-generator.blade.php

diff --git a/app/Http/Controllers/ToolController.php b/app/Http/Controllers/ToolController.php
index 8718fb8..f6009dd 100644
--- a/app/Http/Controllers/ToolController.php
+++ b/app/Http/Controllers/ToolController.php
@@ -108,6 +108,10 @@ public function index(): View
                 'description' => 'Convert text to camelCase, snake_case, and more',
                 'route' => 'tools.text-case',
                 'icon' => 'text-case',
+                'name' => 'Password Generator',
+                'description' => 'Generate secure random passwords',
+                'route' => 'tools.password',
+                'icon' => 'key',
             ],
         ];
 
@@ -195,5 +199,8 @@ public function htmlEntity(): View
     public function textCase(): View
     {
         return view('tools.text-case');
+    public function password(): View
+    {
+        return view('tools.password-generator');
     }
 }
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index 7257a33..d2b06c4 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -116,6 +116,9 @@
                         <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 3v5a1 1 0 001 1h5"/>
+                    @case('key')
+                        <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
                         </svg>
                         @break
                 @endswitch
diff --git a/resources/views/tools/password-generator.blade.php b/resources/views/tools/password-generator.blade.php
new file mode 100644
index 0000000..c87db0c
--- /dev/null
+++ b/resources/views/tools/password-generator.blade.php
@@ -0,0 +1,446 @@
+@extends('layouts.app')
+
+@section('title', 'Password Generator - Secure Random Passwords | Dev Tools')
+@section('meta_description', 'Free online secure password generator. Create strong, random passwords with customizable length and character options. Uses cryptographic randomness.')
+@section('meta_keywords', 'password generator, secure password, random password, strong password, password creator, crypto random, password tool')
+
+@push('schema')
+<script type="application/ld+json">
+{
+    "@@context": "https://schema.org",
+    "@@type": "SoftwareApplication",
+    "name": "Password Generator",
+    "description": "Generate secure random passwords with customizable options",
+    "url": "{{ route('tools.password') }}",
+    "applicationCategory": "DeveloperApplication",
+    "operatingSystem": "Any",
+    "offers": {
+        "@@type": "Offer",
+        "price": "0",
+        "priceCurrency": "USD"
+    },
+    "author": {
+        "@@type": "Person",
+        "name": "Ghabri Djalel"
+    }
+}
+</script>
+@endpush
+
+@section('content')
+<div x-data="passwordGenerator()" class="space-y-6">
+    <div class="flex items-center justify-between">
+        <div>
+            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Password Generator</h1>
+            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Generate secure random passwords</p>
+        </div>
+        <a href="{{ route('home') }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline">&larr; Back</a>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div class="lg:col-span-2 space-y-4">
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Generated Password</label>
+                <div class="flex gap-2">
+                    <div class="flex-1 relative">
+                        <input
+                            type="text"
+                            x-model="password"
+                            readonly
+                            class="w-full p-3 pr-20 border border-gray-300 dark:border-dark-border rounded-lg bg-gray-50 dark:bg-dark-bg text-gray-900 dark:text-gray-100 font-mono text-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                            placeholder="Click Generate"
+                        >
+                        <div class="absolute right-2 top-1/2 -translate-y-1/2 flex gap-1">
+                            <button
+                                @click="copy($event.currentTarget)"
+                                class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+                                title="Copy to clipboard"
+                            >
+                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/>
+                                </svg>
+                            </button>
+                            <button
+                                @click="generate()"
+                                class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+                                title="Regenerate"
+                            >
+                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="mt-3">
+                    <div class="flex items-center justify-between text-sm mb-1">
+                        <span class="text-gray-600 dark:text-gray-400">Strength</span>
+                        <span :class="strengthColor" x-text="strengthLabel"></span>
+                    </div>
+                    <div class="h-2 bg-gray-200 dark:bg-dark-bg rounded-full overflow-hidden">
+                        <div
+                            class="h-full transition-all duration-300"
+                            :class="strengthBarColor"
+                            :style="'width: ' + strengthPercent + '%'"
+                        ></div>
+                    </div>
+                </div>
+
+                <button
+                    @click="generate()"
+                    class="mt-4 w-full py-3 px-4 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-lg transition-colors"
+                >
+                    Generate Password
+                </button>
+            </div>
+
+            <div x-show="passwords.length > 0" class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <div class="flex items-center justify-between mb-3">
+                    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Password History</label>
+                    <button
+                        @click="clearHistory()"
+                        class="text-xs text-red-600 dark:text-red-400 hover:underline"
+                    >
+                        Clear
+                    </button>
+                </div>
+                <div class="space-y-2 max-h-48 overflow-y-auto">
+                    <template x-for="(pwd, index) in passwords" :key="index">
+                        <div class="flex items-center justify-between p-2 bg-gray-50 dark:bg-dark-bg rounded-lg group">
+                            <code class="text-sm text-gray-700 dark:text-gray-300 font-mono truncate flex-1" x-text="pwd"></code>
+                            <button
+                                @click="copyPassword(pwd, $event.currentTarget)"
+                                class="ml-2 p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 opacity-0 group-hover:opacity-100 transition-opacity"
+                                title="Copy"
+                            >
+                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/>
+                                </svg>
+                            </button>
+                        </div>
+                    </template>
+                </div>
+            </div>
+
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-3">Bulk Generate</h2>
+                <div class="flex gap-2">
+                    <input
+                        type="number"
+                        x-model.number="bulkCount"
+                        min="2"
+                        max="50"
+                        class="w-24 p-2 border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 text-center"
+                    >
+                    <button
+                        @click="generateBulk()"
+                        class="flex-1 py-2 px-4 bg-gray-600 hover:bg-gray-700 text-white font-medium rounded-lg transition-colors"
+                    >
+                        Generate Multiple
+                    </button>
+                </div>
+                <div x-show="bulkPasswords.length > 0" class="mt-3">
+                    <div class="flex items-center justify-between mb-2">
+                        <span class="text-sm text-gray-600 dark:text-gray-400" x-text="bulkPasswords.length + ' passwords generated'"></span>
+                        <button
+                            @click="copyAllBulk($event.currentTarget)"
+                            class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline"
+                        >
+                            Copy All
+                        </button>
+                    </div>
+                    <div class="max-h-48 overflow-y-auto space-y-1 p-2 bg-gray-50 dark:bg-dark-bg rounded-lg">
+                        <template x-for="(pwd, index) in bulkPasswords" :key="'bulk-' + index">
+                            <div class="font-mono text-sm text-gray-700 dark:text-gray-300" x-text="pwd"></div>
+                        </template>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="space-y-4">
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Options</h2>
+
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                            Length: <span class="text-indigo-600 dark:text-indigo-400" x-text="length"></span>
+                        </label>
+                        <input
+                            type="range"
+                            x-model="length"
+                            @input="generate()"
+                            min="4"
+                            max="64"
+                            class="w-full h-2 bg-gray-200 dark:bg-dark-bg rounded-lg appearance-none cursor-pointer accent-indigo-600"
+                        >
+                        <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
+                            <span>4</span>
+                            <span>64</span>
+                        </div>
+                    </div>
+
+                    <div class="space-y-3">
+                        <label class="flex items-center gap-3 cursor-pointer">
+                            <input
+                                type="checkbox"
+                                x-model="options.uppercase"
+                                @change="generate()"
+                                class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"
+                            >
+                            <span class="text-sm text-gray-700 dark:text-gray-300">Uppercase (A-Z)</span>
+                        </label>
+
+                        <label class="flex items-center gap-3 cursor-pointer">
+                            <input
+                                type="checkbox"
+                                x-model="options.lowercase"
+                                @change="generate()"
+                                class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"
+                            >
+                            <span class="text-sm text-gray-700 dark:text-gray-300">Lowercase (a-z)</span>
+                        </label>
+
+                        <label class="flex items-center gap-3 cursor-pointer">
+                            <input
+                                type="checkbox"
+                                x-model="options.numbers"
+                                @change="generate()"
+                                class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"
+                            >
+                            <span class="text-sm text-gray-700 dark:text-gray-300">Numbers (0-9)</span>
+                        </label>
+
+                        <label class="flex items-center gap-3 cursor-pointer">
+                            <input
+                                type="checkbox"
+                                x-model="options.symbols"
+                                @change="generate()"
+                                class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"
+                            >
+                            <span class="text-sm text-gray-700 dark:text-gray-300">Symbols (!@#$%...)</span>
+                        </label>
+
+                        <label class="flex items-center gap-3 cursor-pointer">
+                            <input
+                                type="checkbox"
+                                x-model="options.excludeAmbiguous"
+                                @change="generate()"
+                                class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"
+                            >
+                            <span class="text-sm text-gray-700 dark:text-gray-300">Exclude ambiguous (0OIl1)</span>
+                        </label>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-3">Quick Presets</h2>
+                <div class="space-y-2">
+                    <button
+                        @click="applyPreset('pin')"
+                        class="w-full text-left p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-dark-bg transition-colors"
+                    >
+                        <div class="font-medium text-sm text-gray-900 dark:text-white">PIN Code</div>
+                        <div class="text-xs text-gray-500 dark:text-gray-400">4 digits, numbers only</div>
+                    </button>
+                    <button
+                        @click="applyPreset('simple')"
+                        class="w-full text-left p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-dark-bg transition-colors"
+                    >
+                        <div class="font-medium text-sm text-gray-900 dark:text-white">Simple</div>
+                        <div class="text-xs text-gray-500 dark:text-gray-400">8 chars, letters & numbers</div>
+                    </button>
+                    <button
+                        @click="applyPreset('strong')"
+                        class="w-full text-left p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-dark-bg transition-colors"
+                    >
+                        <div class="font-medium text-sm text-gray-900 dark:text-white">Strong</div>
+                        <div class="text-xs text-gray-500 dark:text-gray-400">16 chars, all character types</div>
+                    </button>
+                    <button
+                        @click="applyPreset('paranoid')"
+                        class="w-full text-left p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-dark-bg transition-colors"
+                    >
+                        <div class="font-medium text-sm text-gray-900 dark:text-white">Paranoid</div>
+                        <div class="text-xs text-gray-500 dark:text-gray-400">32 chars, all character types</div>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
+
+@push('scripts')
+<script>
+function passwordGenerator() {
+    return {
+        password: '',
+        passwords: [],
+        length: 16,
+        bulkCount: 10,
+        bulkPasswords: [],
+        options: {
+            uppercase: true,
+            lowercase: true,
+            numbers: true,
+            symbols: true,
+            excludeAmbiguous: false
+        },
+        strength: 0,
+
+        chars: {
+            uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
+            lowercase: 'abcdefghijklmnopqrstuvwxyz',
+            numbers: '0123456789',
+            symbols: '!@#$%^&*()_+-=[]{}|;:,.<>?'
+        },
+
+        ambiguous: '0OIl1',
+
+        init() {
+            this.generate();
+        },
+
+        getCharset() {
+            let charset = '';
+            if (this.options.uppercase) charset += this.chars.uppercase;
+            if (this.options.lowercase) charset += this.chars.lowercase;
+            if (this.options.numbers) charset += this.chars.numbers;
+            if (this.options.symbols) charset += this.chars.symbols;
+
+            if (this.options.excludeAmbiguous) {
+                charset = charset.split('').filter(c => !this.ambiguous.includes(c)).join('');
+            }
+
+            return charset || this.chars.lowercase;
+        },
+
+        generate() {
+            const charset = this.getCharset();
+            let result = '';
+
+            const array = new Uint32Array(this.length);
+            crypto.getRandomValues(array);
+
+            for (let i = 0; i < this.length; i++) {
+                result += charset[array[i] % charset.length];
+            }
+
+            this.password = result;
+            this.calculateStrength();
+
+            if (result && !this.passwords.includes(result)) {
+                this.passwords.unshift(result);
+                if (this.passwords.length > 10) {
+                    this.passwords.pop();
+                }
+            }
+        },
+
+        generateBulk() {
+            this.bulkPasswords = [];
+            for (let i = 0; i < this.bulkCount; i++) {
+                const charset = this.getCharset();
+                let result = '';
+                const array = new Uint32Array(this.length);
+                crypto.getRandomValues(array);
+                for (let j = 0; j < this.length; j++) {
+                    result += charset[array[j] % charset.length];
+                }
+                this.bulkPasswords.push(result);
+            }
+        },
+
+        calculateStrength() {
+            let score = 0;
+            const pwd = this.password;
+
+            // Length score
+            if (pwd.length >= 8) score += 1;
+            if (pwd.length >= 12) score += 1;
+            if (pwd.length >= 16) score += 1;
+            if (pwd.length >= 24) score += 1;
+
+            // Character variety
+            if (/[a-z]/.test(pwd)) score += 1;
+            if (/[A-Z]/.test(pwd)) score += 1;
+            if (/[0-9]/.test(pwd)) score += 1;
+            if (/[^a-zA-Z0-9]/.test(pwd)) score += 1;
+
+            this.strength = Math.min(score, 8);
+        },
+
+        get strengthPercent() {
+            return (this.strength / 8) * 100;
+        },
+
+        get strengthLabel() {
+            if (this.strength <= 2) return 'Weak';
+            if (this.strength <= 4) return 'Fair';
+            if (this.strength <= 6) return 'Strong';
+            return 'Very Strong';
+        },
+
+        get strengthColor() {
+            if (this.strength <= 2) return 'text-red-600 dark:text-red-400';
+            if (this.strength <= 4) return 'text-yellow-600 dark:text-yellow-400';
+            if (this.strength <= 6) return 'text-green-600 dark:text-green-400';
+            return 'text-emerald-600 dark:text-emerald-400';
+        },
+
+        get strengthBarColor() {
+            if (this.strength <= 2) return 'bg-red-500';
+            if (this.strength <= 4) return 'bg-yellow-500';
+            if (this.strength <= 6) return 'bg-green-500';
+            return 'bg-emerald-500';
+        },
+
+        applyPreset(preset) {
+            switch (preset) {
+                case 'pin':
+                    this.length = 4;
+                    this.options = { uppercase: false, lowercase: false, numbers: true, symbols: false, excludeAmbiguous: false };
+                    break;
+                case 'simple':
+                    this.length = 8;
+                    this.options = { uppercase: true, lowercase: true, numbers: true, symbols: false, excludeAmbiguous: true };
+                    break;
+                case 'strong':
+                    this.length = 16;
+                    this.options = { uppercase: true, lowercase: true, numbers: true, symbols: true, excludeAmbiguous: false };
+                    break;
+                case 'paranoid':
+                    this.length = 32;
+                    this.options = { uppercase: true, lowercase: true, numbers: true, symbols: true, excludeAmbiguous: false };
+                    break;
+            }
+            this.generate();
+        },
+
+        copy(button) {
+            if (this.password) {
+                DevTools.copyToClipboard(this.password, button);
+            }
+        },
+
+        copyPassword(pwd, button) {
+            DevTools.copyToClipboard(pwd, button);
+        },
+
+        copyAllBulk(button) {
+            if (this.bulkPasswords.length) {
+                DevTools.copyToClipboard(this.bulkPasswords.join('\n'), button);
+            }
+        },
+
+        clearHistory() {
+            this.passwords = [];
+        }
+    };
+}
+</script>
+@endpush
diff --git a/routes/web.php b/routes/web.php
index 2497e14..414e8bf 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -26,6 +26,7 @@
 
     Route::get('/html-entity', [ToolController::class, 'htmlEntity'])->name('html-entity');
     Route::get('/text-case', [ToolController::class, 'textCase'])->name('text-case');
+    Route::get('/password', [ToolController::class, 'password'])->name('password');
 });
 
 // Static Pages
@@ -56,6 +57,7 @@
 
         ['loc' => route('tools.html-entity'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('tools.text-case'), 'priority' => '0.8', 'changefreq' => 'monthly'],
+        ['loc' => route('tools.password'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('about'), 'priority' => '0.5', 'changefreq' => 'monthly'],
         ['loc' => route('privacy'), 'priority' => '0.3', 'changefreq' => 'yearly'],
     ];
diff --git a/tests/Feature/WebRoutesTest.php b/tests/Feature/WebRoutesTest.php
index a537f09..f5426e5 100644
--- a/tests/Feature/WebRoutesTest.php
+++ b/tests/Feature/WebRoutesTest.php
@@ -38,6 +38,7 @@ public function test_home_page_displays_all_tools(): void
 
         $response->assertSee('HTML Entity Encoder');
         $response->assertSee('Text Case Converter');
+        $response->assertSee('Password Generator');
     }
 
     public function test_home_page_has_tool_links(): void
@@ -64,6 +65,7 @@ public function test_home_page_has_tool_links(): void
 
         $response->assertSee('href="' . route('tools.html-entity') . '"', false);
         $response->assertSee('href="' . route('tools.text-case') . '"', false);
+        $response->assertSee('href="' . route('tools.password') . '"', false);
     }
 
     public function test_csv_tool_page_loads(): void
@@ -386,12 +388,31 @@ public function test_text_case_tool_has_required_elements(): void
         $response->assertSee('Convert To');
         $response->assertSee('camelCase');
         $response->assertSee('snake_case');
+    public function test_password_tool_page_loads(): void
+    {
+        $response = $this->get('/tools/password');
+
+        $response->assertStatus(200);
+        $response->assertSee('Password Generator');
+        $response->assertSee('Generate secure random passwords');
+    }
+
+    public function test_password_tool_has_required_elements(): void
+    {
+        $response = $this->get('/tools/password');
+
+        $response->assertStatus(200);
+        $response->assertSee('Generated Password');
+        $response->assertSee('Strength');
+        $response->assertSee('Options');
+        $response->assertSee('Quick Presets');
     }
 
     public function test_all_pages_have_navigation(): void
     {
         $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity'];
         $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/text-case'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/password'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -405,6 +426,7 @@ public function test_all_pages_have_theme_toggle(): void
     {
         $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity'];
         $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/text-case'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/password'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -419,6 +441,7 @@ public function test_all_pages_load_vite_assets(): void
         // Code editor uses standalone template without Vite
         $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity'];
         $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/text-case'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/password'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -433,6 +456,7 @@ public function test_all_tool_pages_have_back_link(): void
         // Code editor uses standalone template with home link instead of back
         $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity'];
         $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/text-case'];
+        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/password'];
 
         foreach ($toolPages as $page) {
             $response = $this->get($page);
@@ -487,6 +511,7 @@ public function test_pages_have_csrf_token(): void
     {
         $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity'];
         $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/text-case'];
+        $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/password'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);

From deed4f6ec9f0bef2abff84ecb232128b04709288 Mon Sep 17 00:00:00 2001
From: jalel <ghabri.djalel@gmail.com>
Date: Sun, 14 Dec 2025 15:50:09 +0000
Subject: [PATCH 14/23] Add Lorem Ipsum Generator tool

- Generate placeholder text by paragraphs, sentences, or words
- Configurable count with slider control
- Option to start with classic "Lorem ipsum dolor sit amet..."
- Real-time statistics (paragraphs, sentences, words, characters)
- Copy to clipboard and download as TXT
- Client-side only implementation using Alpine.js
---
 app/Http/Controllers/ToolController.php     |   7 +
 resources/views/home.blade.php              |   3 +
 resources/views/tools/lorem-ipsum.blade.php | 304 ++++++++++++++++++++
 routes/web.php                              |   2 +
 tests/Feature/WebRoutesTest.php             |  25 ++
 5 files changed, 341 insertions(+)
 create mode 100644 resources/views/tools/lorem-ipsum.blade.php

diff --git a/app/Http/Controllers/ToolController.php b/app/Http/Controllers/ToolController.php
index f6009dd..a02002b 100644
--- a/app/Http/Controllers/ToolController.php
+++ b/app/Http/Controllers/ToolController.php
@@ -112,6 +112,10 @@ public function index(): View
                 'description' => 'Generate secure random passwords',
                 'route' => 'tools.password',
                 'icon' => 'key',
+                'name' => 'Lorem Ipsum Generator',
+                'description' => 'Generate placeholder text for designs',
+                'route' => 'tools.lorem',
+                'icon' => 'text',
             ],
         ];
 
@@ -202,5 +206,8 @@ public function textCase(): View
     public function password(): View
     {
         return view('tools.password-generator');
+    public function lorem(): View
+    {
+        return view('tools.lorem-ipsum');
     }
 }
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index d2b06c4..a2c95b2 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -119,6 +119,9 @@
                     @case('key')
                         <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
+                    @case('text')
+                        <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/>
                         </svg>
                         @break
                 @endswitch
diff --git a/resources/views/tools/lorem-ipsum.blade.php b/resources/views/tools/lorem-ipsum.blade.php
new file mode 100644
index 0000000..a62ae33
--- /dev/null
+++ b/resources/views/tools/lorem-ipsum.blade.php
@@ -0,0 +1,304 @@
+@extends('layouts.app')
+
+@section('title', 'Lorem Ipsum Generator - Placeholder Text Generator | Dev Tools')
+@section('meta_description', 'Free online Lorem Ipsum generator. Generate placeholder text by paragraphs, sentences, or words. Perfect for mockups, wireframes, and design projects.')
+@section('meta_keywords', 'lorem ipsum generator, placeholder text, dummy text, lipsum, filler text, mockup text, design placeholder, random text generator')
+
+@push('schema')
+<script type="application/ld+json">
+{
+    "@@context": "https://schema.org",
+    "@@type": "SoftwareApplication",
+    "name": "Lorem Ipsum Generator",
+    "description": "Generate placeholder text for designs and mockups",
+    "url": "{{ route('tools.lorem') }}",
+    "applicationCategory": "DeveloperApplication",
+    "operatingSystem": "Any",
+    "offers": {
+        "@@type": "Offer",
+        "price": "0",
+        "priceCurrency": "USD"
+    },
+    "author": {
+        "@@type": "Person",
+        "name": "Ghabri Djalel"
+    }
+}
+</script>
+@endpush
+
+@section('content')
+<div x-data="loremIpsum()" class="space-y-6">
+    <div class="flex items-center justify-between">
+        <div>
+            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Lorem Ipsum Generator</h1>
+            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Generate placeholder text for designs and mockups</p>
+        </div>
+        <a href="{{ route('home') }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline">&larr; Back</a>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div class="space-y-4">
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Options</h2>
+
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Type</label>
+                        <div class="flex gap-2">
+                            <template x-for="t in types" :key="t.value">
+                                <button
+                                    @click="type = t.value; generate()"
+                                    :class="type === t.value ? 'bg-indigo-600 text-white' : 'bg-gray-100 dark:bg-dark-bg text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'"
+                                    class="flex-1 py-2 px-3 rounded-lg text-sm font-medium transition-colors"
+                                    x-text="t.label"
+                                ></button>
+                            </template>
+                        </div>
+                    </div>
+
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                            Count: <span class="text-indigo-600 dark:text-indigo-400" x-text="count"></span>
+                        </label>
+                        <input
+                            type="range"
+                            x-model="count"
+                            @input="generate()"
+                            min="1"
+                            :max="type === 'paragraphs' ? 10 : (type === 'sentences' ? 20 : 100)"
+                            class="w-full h-2 bg-gray-200 dark:bg-dark-bg rounded-lg appearance-none cursor-pointer accent-indigo-600"
+                        >
+                        <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
+                            <span>1</span>
+                            <span x-text="type === 'paragraphs' ? '10' : (type === 'sentences' ? '20' : '100')"></span>
+                        </div>
+                    </div>
+
+                    <div class="flex items-center gap-2">
+                        <input
+                            type="checkbox"
+                            id="startWithLorem"
+                            x-model="startWithLorem"
+                            @change="generate()"
+                            class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"
+                        >
+                        <label for="startWithLorem" class="text-sm text-gray-700 dark:text-gray-300">
+                            Start with "Lorem ipsum..."
+                        </label>
+                    </div>
+
+                    <button
+                        @click="generate()"
+                        class="w-full py-2 px-4 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-lg transition-colors"
+                    >
+                        Generate
+                    </button>
+                </div>
+            </div>
+
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-3">Statistics</h2>
+                <div class="grid grid-cols-2 gap-3">
+                    <div class="p-3 bg-gray-50 dark:bg-dark-bg rounded-lg text-center">
+                        <div class="text-2xl font-bold text-indigo-600 dark:text-indigo-400" x-text="stats.paragraphs"></div>
+                        <div class="text-xs text-gray-500 dark:text-gray-400">Paragraphs</div>
+                    </div>
+                    <div class="p-3 bg-gray-50 dark:bg-dark-bg rounded-lg text-center">
+                        <div class="text-2xl font-bold text-indigo-600 dark:text-indigo-400" x-text="stats.sentences"></div>
+                        <div class="text-xs text-gray-500 dark:text-gray-400">Sentences</div>
+                    </div>
+                    <div class="p-3 bg-gray-50 dark:bg-dark-bg rounded-lg text-center">
+                        <div class="text-2xl font-bold text-indigo-600 dark:text-indigo-400" x-text="stats.words"></div>
+                        <div class="text-xs text-gray-500 dark:text-gray-400">Words</div>
+                    </div>
+                    <div class="p-3 bg-gray-50 dark:bg-dark-bg rounded-lg text-center">
+                        <div class="text-2xl font-bold text-indigo-600 dark:text-indigo-400" x-text="stats.characters"></div>
+                        <div class="text-xs text-gray-500 dark:text-gray-400">Characters</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="lg:col-span-2">
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4 h-full flex flex-col">
+                <div class="flex items-center justify-between mb-3">
+                    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Generated Text</label>
+                    <div class="flex gap-2">
+                        <button
+                            @click="copy($event.currentTarget)"
+                            class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-dark-bg transition-colors"
+                            title="Copy to clipboard"
+                        >
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/>
+                            </svg>
+                        </button>
+                        <button
+                            @click="download()"
+                            class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-dark-bg transition-colors"
+                            title="Download as TXT"
+                        >
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+                <div
+                    class="flex-1 p-4 bg-gray-50 dark:bg-dark-bg rounded-lg overflow-y-auto min-h-[400px] text-gray-700 dark:text-gray-300 leading-relaxed"
+                    x-html="formattedOutput"
+                ></div>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
+
+@push('scripts')
+<script>
+function loremIpsum() {
+    return {
+        type: 'paragraphs',
+        count: 3,
+        startWithLorem: true,
+        output: '',
+        formattedOutput: '',
+        types: [
+            { value: 'paragraphs', label: 'Paragraphs' },
+            { value: 'sentences', label: 'Sentences' },
+            { value: 'words', label: 'Words' }
+        ],
+        stats: {
+            paragraphs: 0,
+            sentences: 0,
+            words: 0,
+            characters: 0
+        },
+
+        words: [
+            'lorem', 'ipsum', 'dolor', 'sit', 'amet', 'consectetur', 'adipiscing', 'elit',
+            'sed', 'do', 'eiusmod', 'tempor', 'incididunt', 'ut', 'labore', 'et', 'dolore',
+            'magna', 'aliqua', 'enim', 'ad', 'minim', 'veniam', 'quis', 'nostrud',
+            'exercitation', 'ullamco', 'laboris', 'nisi', 'aliquip', 'ex', 'ea', 'commodo',
+            'consequat', 'duis', 'aute', 'irure', 'in', 'reprehenderit', 'voluptate',
+            'velit', 'esse', 'cillum', 'fugiat', 'nulla', 'pariatur', 'excepteur', 'sint',
+            'occaecat', 'cupidatat', 'non', 'proident', 'sunt', 'culpa', 'qui', 'officia',
+            'deserunt', 'mollit', 'anim', 'id', 'est', 'laborum', 'perspiciatis', 'unde',
+            'omnis', 'iste', 'natus', 'error', 'voluptatem', 'accusantium', 'doloremque',
+            'laudantium', 'totam', 'rem', 'aperiam', 'eaque', 'ipsa', 'quae', 'ab', 'illo',
+            'inventore', 'veritatis', 'quasi', 'architecto', 'beatae', 'vitae', 'dicta',
+            'explicabo', 'nemo', 'ipsam', 'quia', 'voluptas', 'aspernatur', 'aut', 'odit',
+            'fugit', 'consequuntur', 'magni', 'dolores', 'eos', 'ratione', 'sequi',
+            'nesciunt', 'neque', 'porro', 'quisquam', 'dolorem', 'adipisci', 'numquam',
+            'eius', 'modi', 'tempora', 'magnam', 'quaerat', 'minima', 'nostrum',
+            'exercitationem', 'ullam', 'corporis', 'suscipit', 'laboriosam', 'aliquid',
+            'commodi', 'consequatur', 'autem', 'vel', 'eum', 'iure', 'quam', 'nihil',
+            'molestiae', 'illum', 'quo', 'blanditiis', 'praesentium', 'voluptatum',
+            'deleniti', 'atque', 'corrupti', 'quos', 'quas', 'molestias', 'excepturi',
+            'recusandae', 'itaque', 'earum', 'rerum', 'hic', 'tenetur', 'sapiente',
+            'delectus', 'reiciendis', 'voluptatibus', 'maiores', 'alias', 'perferendis',
+            'doloribus', 'asperiores', 'repellat'
+        ],
+
+        loremStart: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+
+        init() {
+            this.generate();
+        },
+
+        randomWord() {
+            return this.words[Math.floor(Math.random() * this.words.length)];
+        },
+
+        generateSentence(minWords = 8, maxWords = 15) {
+            const length = Math.floor(Math.random() * (maxWords - minWords + 1)) + minWords;
+            let sentence = [];
+            for (let i = 0; i < length; i++) {
+                sentence.push(this.randomWord());
+            }
+            sentence[0] = sentence[0].charAt(0).toUpperCase() + sentence[0].slice(1);
+            return sentence.join(' ') + '.';
+        },
+
+        generateParagraph(minSentences = 4, maxSentences = 8) {
+            const length = Math.floor(Math.random() * (maxSentences - minSentences + 1)) + minSentences;
+            let sentences = [];
+            for (let i = 0; i < length; i++) {
+                sentences.push(this.generateSentence());
+            }
+            return sentences.join(' ');
+        },
+
+        generate() {
+            let result = [];
+
+            if (this.type === 'paragraphs') {
+                for (let i = 0; i < this.count; i++) {
+                    if (i === 0 && this.startWithLorem) {
+                        result.push(this.loremStart + ' ' + this.generateParagraph(3, 6));
+                    } else {
+                        result.push(this.generateParagraph());
+                    }
+                }
+                this.output = result.join('\n\n');
+                this.formattedOutput = result.map(p => `<p class="mb-4">${p}</p>`).join('');
+            } else if (this.type === 'sentences') {
+                for (let i = 0; i < this.count; i++) {
+                    if (i === 0 && this.startWithLorem) {
+                        result.push(this.loremStart);
+                    } else {
+                        result.push(this.generateSentence());
+                    }
+                }
+                this.output = result.join(' ');
+                this.formattedOutput = `<p>${this.output}</p>`;
+            } else {
+                if (this.startWithLorem) {
+                    result = ['Lorem', 'ipsum', 'dolor', 'sit', 'amet'];
+                    for (let i = 5; i < this.count; i++) {
+                        result.push(this.randomWord());
+                    }
+                } else {
+                    for (let i = 0; i < this.count; i++) {
+                        result.push(this.randomWord());
+                    }
+                }
+                this.output = result.slice(0, this.count).join(' ');
+                this.formattedOutput = `<p>${this.output}</p>`;
+            }
+
+            this.updateStats();
+        },
+
+        updateStats() {
+            const text = this.output;
+            this.stats.characters = text.length;
+            this.stats.words = text.split(/\s+/).filter(w => w.length > 0).length;
+            this.stats.sentences = (text.match(/[.!?]+/g) || []).length;
+            this.stats.paragraphs = text.split(/\n\n+/).filter(p => p.trim().length > 0).length;
+        },
+
+        copy(button) {
+            if (this.output) {
+                DevTools.copyToClipboard(this.output, button);
+            }
+        },
+
+        download() {
+            if (!this.output) return;
+
+            const blob = new Blob([this.output], { type: 'text/plain' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'lorem-ipsum.txt';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+        }
+    };
+}
+</script>
+@endpush
diff --git a/routes/web.php b/routes/web.php
index 414e8bf..ee52f7f 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -27,6 +27,7 @@
     Route::get('/html-entity', [ToolController::class, 'htmlEntity'])->name('html-entity');
     Route::get('/text-case', [ToolController::class, 'textCase'])->name('text-case');
     Route::get('/password', [ToolController::class, 'password'])->name('password');
+    Route::get('/lorem', [ToolController::class, 'lorem'])->name('lorem');
 });
 
 // Static Pages
@@ -58,6 +59,7 @@
         ['loc' => route('tools.html-entity'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('tools.text-case'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('tools.password'), 'priority' => '0.8', 'changefreq' => 'monthly'],
+        ['loc' => route('tools.lorem'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('about'), 'priority' => '0.5', 'changefreq' => 'monthly'],
         ['loc' => route('privacy'), 'priority' => '0.3', 'changefreq' => 'yearly'],
     ];
diff --git a/tests/Feature/WebRoutesTest.php b/tests/Feature/WebRoutesTest.php
index f5426e5..a8989b0 100644
--- a/tests/Feature/WebRoutesTest.php
+++ b/tests/Feature/WebRoutesTest.php
@@ -39,6 +39,7 @@ public function test_home_page_displays_all_tools(): void
         $response->assertSee('HTML Entity Encoder');
         $response->assertSee('Text Case Converter');
         $response->assertSee('Password Generator');
+        $response->assertSee('Lorem Ipsum Generator');
     }
 
     public function test_home_page_has_tool_links(): void
@@ -66,6 +67,7 @@ public function test_home_page_has_tool_links(): void
         $response->assertSee('href="' . route('tools.html-entity') . '"', false);
         $response->assertSee('href="' . route('tools.text-case') . '"', false);
         $response->assertSee('href="' . route('tools.password') . '"', false);
+        $response->assertSee('href="' . route('tools.lorem') . '"', false);
     }
 
     public function test_csv_tool_page_loads(): void
@@ -406,6 +408,24 @@ public function test_password_tool_has_required_elements(): void
         $response->assertSee('Strength');
         $response->assertSee('Options');
         $response->assertSee('Quick Presets');
+    public function test_lorem_tool_page_loads(): void
+    {
+        $response = $this->get('/tools/lorem');
+
+        $response->assertStatus(200);
+        $response->assertSee('Lorem Ipsum Generator');
+        $response->assertSee('Generate placeholder text');
+    }
+
+    public function test_lorem_tool_has_required_elements(): void
+    {
+        $response = $this->get('/tools/lorem');
+
+        $response->assertStatus(200);
+        $response->assertSee('Paragraphs');
+        $response->assertSee('Sentences');
+        $response->assertSee('Words');
+        $response->assertSee('Generate');
     }
 
     public function test_all_pages_have_navigation(): void
@@ -413,6 +433,7 @@ public function test_all_pages_have_navigation(): void
         $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity'];
         $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/text-case'];
         $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/password'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/lorem'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -427,6 +448,7 @@ public function test_all_pages_have_theme_toggle(): void
         $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity'];
         $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/text-case'];
         $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/password'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/lorem'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -442,6 +464,7 @@ public function test_all_pages_load_vite_assets(): void
         $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity'];
         $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/text-case'];
         $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/password'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/lorem'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -457,6 +480,7 @@ public function test_all_tool_pages_have_back_link(): void
         $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity'];
         $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/text-case'];
         $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/password'];
+        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/lorem'];
 
         foreach ($toolPages as $page) {
             $response = $this->get($page);
@@ -512,6 +536,7 @@ public function test_pages_have_csrf_token(): void
         $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity'];
         $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/text-case'];
         $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/password'];
+        $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/lorem'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);

From ed47802915938272dff24f6ae658b7856f227dad Mon Sep 17 00:00:00 2001
From: jalel <ghabri.djalel@gmail.com>
Date: Sun, 14 Dec 2025 15:39:40 +0000
Subject: [PATCH 15/23] Add Cron Expression Parser tool

- Parse and validate cron expressions with human-readable explanations
- Display field breakdown (minute, hour, day, month, weekday)
- Calculate and show next 5 scheduled run times
- Include common patterns library for quick reference
- Add syntax reference panel for cron special characters
- Client-side only implementation using Alpine.js
---
 app/Http/Controllers/ToolController.php     |   7 +
 resources/views/home.blade.php              |   3 +
 resources/views/tools/cron-parser.blade.php | 547 ++++++++++++++++++++
 routes/web.php                              |   2 +
 tests/Feature/WebRoutesTest.php             |  25 +
 5 files changed, 584 insertions(+)
 create mode 100644 resources/views/tools/cron-parser.blade.php

diff --git a/app/Http/Controllers/ToolController.php b/app/Http/Controllers/ToolController.php
index a02002b..629968c 100644
--- a/app/Http/Controllers/ToolController.php
+++ b/app/Http/Controllers/ToolController.php
@@ -116,6 +116,10 @@ public function index(): View
                 'description' => 'Generate placeholder text for designs',
                 'route' => 'tools.lorem',
                 'icon' => 'text',
+                'name' => 'Cron Parser',
+                'description' => 'Parse and explain cron expressions',
+                'route' => 'tools.cron',
+                'icon' => 'clock',
             ],
         ];
 
@@ -209,5 +213,8 @@ public function password(): View
     public function lorem(): View
     {
         return view('tools.lorem-ipsum');
+    public function cron(): View
+    {
+        return view('tools.cron-parser');
     }
 }
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index a2c95b2..fed9b9f 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -122,6 +122,9 @@
                     @case('text')
                         <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/>
+                    @case('clock')
+                        <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                         </svg>
                         @break
                 @endswitch
diff --git a/resources/views/tools/cron-parser.blade.php b/resources/views/tools/cron-parser.blade.php
new file mode 100644
index 0000000..475ef07
--- /dev/null
+++ b/resources/views/tools/cron-parser.blade.php
@@ -0,0 +1,547 @@
+@extends('layouts.app')
+
+@section('title', 'Cron Expression Parser - Explain & Validate Cron Jobs | Dev Tools')
+@section('meta_description', 'Free online cron expression parser. Understand cron syntax, validate expressions, see next run times, and get human-readable explanations of your cron schedules.')
+@section('meta_keywords', 'cron parser, cron expression, cron validator, cron schedule, crontab, cron syntax, cron job, cron generator, cron explainer, cron next run')
+
+@push('schema')
+<script type="application/ld+json">
+{
+    "@@context": "https://schema.org",
+    "@@type": "SoftwareApplication",
+    "name": "Cron Expression Parser",
+    "description": "Parse and explain cron expressions with next run times",
+    "url": "{{ route('tools.cron') }}",
+    "applicationCategory": "DeveloperApplication",
+    "operatingSystem": "Any",
+    "offers": {
+        "@@type": "Offer",
+        "price": "0",
+        "priceCurrency": "USD"
+    },
+    "author": {
+        "@@type": "Person",
+        "name": "Ghabri Djalel"
+    }
+}
+</script>
+@endpush
+
+@section('content')
+<div x-data="cronParser()" class="space-y-6">
+    <div class="flex items-center justify-between">
+        <div>
+            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Cron Expression Parser</h1>
+            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Parse and explain cron expressions with next run times</p>
+        </div>
+        <a href="{{ route('home') }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline">&larr; Back</a>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div class="lg:col-span-2 space-y-4">
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Cron Expression</label>
+                <div class="flex gap-2">
+                    <input
+                        type="text"
+                        x-model="expression"
+                        @input="parse()"
+                        class="flex-1 p-3 border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 font-mono text-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                        placeholder="* * * * *"
+                    >
+                    <button
+                        @click="clear()"
+                        class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
+                        title="Clear"
+                    >
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                        </svg>
+                    </button>
+                </div>
+
+                <div class="mt-4 grid grid-cols-5 gap-2 text-center text-xs">
+                    <template x-for="(field, index) in fields" :key="index">
+                        <div class="space-y-1">
+                            <div
+                                class="p-2 rounded font-mono text-sm"
+                                :class="parsed.valid ? 'bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300' : 'bg-gray-100 dark:bg-gray-800 text-gray-500'"
+                                x-text="parsed.parts[index] || field.placeholder"
+                            ></div>
+                            <div class="text-gray-500 dark:text-gray-400" x-text="field.name"></div>
+                        </div>
+                    </template>
+                </div>
+            </div>
+
+            <div x-show="parsed.valid" class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-3">Human Readable</h2>
+                <p class="text-lg text-indigo-600 dark:text-indigo-400 font-medium" x-text="parsed.description"></p>
+            </div>
+
+            <div x-show="parsed.error" class="bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800 p-4">
+                <div class="flex items-center gap-2 text-red-700 dark:text-red-400">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                    </svg>
+                    <span x-text="parsed.error"></span>
+                </div>
+            </div>
+
+            <div x-show="parsed.valid" class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-3">Field Breakdown</h2>
+                <div class="space-y-3">
+                    <template x-for="(field, index) in fields" :key="'breakdown-' + index">
+                        <div class="flex items-start gap-3 p-3 bg-gray-50 dark:bg-dark-bg rounded-lg">
+                            <div class="flex-shrink-0 w-24 text-sm font-medium text-gray-700 dark:text-gray-300" x-text="field.name"></div>
+                            <div class="flex-shrink-0 w-16 font-mono text-sm text-indigo-600 dark:text-indigo-400" x-text="parsed.parts[index]"></div>
+                            <div class="flex-1 text-sm text-gray-600 dark:text-gray-400" x-text="parsed.explanations[index]"></div>
+                        </div>
+                    </template>
+                </div>
+            </div>
+
+            <div x-show="parsed.valid" class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-3">Next Run Times</h2>
+                <div class="space-y-2">
+                    <template x-for="(time, index) in nextRuns" :key="'run-' + index">
+                        <div class="flex items-center justify-between p-2 rounded" :class="index === 0 ? 'bg-green-50 dark:bg-green-900/20' : 'bg-gray-50 dark:bg-dark-bg'">
+                            <span class="text-sm text-gray-600 dark:text-gray-400" x-text="'Run #' + (index + 1)"></span>
+                            <span class="font-mono text-sm" :class="index === 0 ? 'text-green-600 dark:text-green-400' : 'text-gray-700 dark:text-gray-300'" x-text="time"></span>
+                        </div>
+                    </template>
+                </div>
+            </div>
+        </div>
+
+        <div class="space-y-4">
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-3">Common Patterns</h2>
+                <div class="space-y-2">
+                    <template x-for="pattern in commonPatterns" :key="pattern.expression">
+                        <button
+                            @click="expression = pattern.expression; parse()"
+                            class="w-full text-left p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-dark-bg transition-colors"
+                        >
+                            <div class="font-mono text-sm text-indigo-600 dark:text-indigo-400" x-text="pattern.expression"></div>
+                            <div class="text-xs text-gray-500 dark:text-gray-400" x-text="pattern.description"></div>
+                        </button>
+                    </template>
+                </div>
+            </div>
+
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-3">Syntax Reference</h2>
+                <div class="space-y-3 text-sm">
+                    <div>
+                        <h3 class="font-medium text-gray-700 dark:text-gray-300 mb-1">Field Values</h3>
+                        <table class="w-full text-xs">
+                            <tbody class="divide-y divide-gray-200 dark:divide-dark-border">
+                                <tr>
+                                    <td class="py-1 text-gray-500 dark:text-gray-400">Minute</td>
+                                    <td class="py-1 font-mono text-gray-700 dark:text-gray-300">0-59</td>
+                                </tr>
+                                <tr>
+                                    <td class="py-1 text-gray-500 dark:text-gray-400">Hour</td>
+                                    <td class="py-1 font-mono text-gray-700 dark:text-gray-300">0-23</td>
+                                </tr>
+                                <tr>
+                                    <td class="py-1 text-gray-500 dark:text-gray-400">Day of Month</td>
+                                    <td class="py-1 font-mono text-gray-700 dark:text-gray-300">1-31</td>
+                                </tr>
+                                <tr>
+                                    <td class="py-1 text-gray-500 dark:text-gray-400">Month</td>
+                                    <td class="py-1 font-mono text-gray-700 dark:text-gray-300">1-12</td>
+                                </tr>
+                                <tr>
+                                    <td class="py-1 text-gray-500 dark:text-gray-400">Day of Week</td>
+                                    <td class="py-1 font-mono text-gray-700 dark:text-gray-300">0-6 (Sun-Sat)</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div>
+                        <h3 class="font-medium text-gray-700 dark:text-gray-300 mb-1">Special Characters</h3>
+                        <table class="w-full text-xs">
+                            <tbody class="divide-y divide-gray-200 dark:divide-dark-border">
+                                <tr>
+                                    <td class="py-1 font-mono text-indigo-600 dark:text-indigo-400">*</td>
+                                    <td class="py-1 text-gray-500 dark:text-gray-400">Any value</td>
+                                </tr>
+                                <tr>
+                                    <td class="py-1 font-mono text-indigo-600 dark:text-indigo-400">,</td>
+                                    <td class="py-1 text-gray-500 dark:text-gray-400">Value list (1,3,5)</td>
+                                </tr>
+                                <tr>
+                                    <td class="py-1 font-mono text-indigo-600 dark:text-indigo-400">-</td>
+                                    <td class="py-1 text-gray-500 dark:text-gray-400">Range (1-5)</td>
+                                </tr>
+                                <tr>
+                                    <td class="py-1 font-mono text-indigo-600 dark:text-indigo-400">/</td>
+                                    <td class="py-1 text-gray-500 dark:text-gray-400">Step (*/15)</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
+
+@push('scripts')
+<script>
+function cronParser() {
+    return {
+        expression: '0 9 * * 1-5',
+        fields: [
+            { name: 'Minute', placeholder: '*', min: 0, max: 59 },
+            { name: 'Hour', placeholder: '*', min: 0, max: 23 },
+            { name: 'Day (Month)', placeholder: '*', min: 1, max: 31 },
+            { name: 'Month', placeholder: '*', min: 1, max: 12 },
+            { name: 'Day (Week)', placeholder: '*', min: 0, max: 6 }
+        ],
+        parsed: {
+            valid: false,
+            parts: [],
+            description: '',
+            explanations: [],
+            error: ''
+        },
+        nextRuns: [],
+        commonPatterns: [
+            { expression: '* * * * *', description: 'Every minute' },
+            { expression: '*/5 * * * *', description: 'Every 5 minutes' },
+            { expression: '0 * * * *', description: 'Every hour' },
+            { expression: '0 0 * * *', description: 'Every day at midnight' },
+            { expression: '0 9 * * 1-5', description: 'Weekdays at 9 AM' },
+            { expression: '0 0 * * 0', description: 'Every Sunday at midnight' },
+            { expression: '0 0 1 * *', description: 'First day of every month' },
+            { expression: '0 0 1 1 *', description: 'Every January 1st' },
+            { expression: '*/15 * * * *', description: 'Every 15 minutes' },
+            { expression: '0 */2 * * *', description: 'Every 2 hours' },
+            { expression: '0 9,17 * * *', description: 'At 9 AM and 5 PM' },
+            { expression: '30 4 1,15 * *', description: '4:30 AM on 1st and 15th' }
+        ],
+
+        init() {
+            this.parse();
+        },
+
+        clear() {
+            this.expression = '';
+            this.parsed = { valid: false, parts: [], description: '', explanations: [], error: '' };
+            this.nextRuns = [];
+        },
+
+        parse() {
+            const expr = this.expression.trim();
+            if (!expr) {
+                this.parsed = { valid: false, parts: [], description: '', explanations: [], error: '' };
+                this.nextRuns = [];
+                return;
+            }
+
+            const parts = expr.split(/\s+/);
+            if (parts.length !== 5) {
+                this.parsed = {
+                    valid: false,
+                    parts: parts,
+                    description: '',
+                    explanations: [],
+                    error: `Expected 5 fields, got ${parts.length}. Format: minute hour day month weekday`
+                };
+                this.nextRuns = [];
+                return;
+            }
+
+            const validations = parts.map((part, index) => this.validateField(part, this.fields[index]));
+            const errors = validations.filter(v => v !== true);
+
+            if (errors.length > 0) {
+                this.parsed = {
+                    valid: false,
+                    parts: parts,
+                    description: '',
+                    explanations: [],
+                    error: errors[0]
+                };
+                this.nextRuns = [];
+                return;
+            }
+
+            const explanations = parts.map((part, index) => this.explainField(part, this.fields[index]));
+            const description = this.generateDescription(parts);
+
+            this.parsed = {
+                valid: true,
+                parts: parts,
+                description: description,
+                explanations: explanations,
+                error: ''
+            };
+
+            this.calculateNextRuns(parts);
+        },
+
+        validateField(value, field) {
+            if (value === '*') return true;
+
+            // Check for step values (*/n or n/m)
+            if (value.includes('/')) {
+                const [base, step] = value.split('/');
+                if (base !== '*' && !this.isValidValue(base, field)) {
+                    return `Invalid base value "${base}" for ${field.name}`;
+                }
+                if (!/^\d+$/.test(step) || parseInt(step) < 1) {
+                    return `Invalid step value "${step}" for ${field.name}`;
+                }
+                return true;
+            }
+
+            // Check for ranges (n-m)
+            if (value.includes('-') && !value.includes(',')) {
+                const [start, end] = value.split('-');
+                if (!this.isValidValue(start, field) || !this.isValidValue(end, field)) {
+                    return `Invalid range "${value}" for ${field.name}`;
+                }
+                if (parseInt(start) > parseInt(end)) {
+                    return `Invalid range "${value}" for ${field.name}: start > end`;
+                }
+                return true;
+            }
+
+            // Check for lists (n,m,o)
+            if (value.includes(',')) {
+                const values = value.split(',');
+                for (const v of values) {
+                    if (v.includes('-')) {
+                        const [start, end] = v.split('-');
+                        if (!this.isValidValue(start, field) || !this.isValidValue(end, field)) {
+                            return `Invalid range "${v}" in list for ${field.name}`;
+                        }
+                    } else if (!this.isValidValue(v, field)) {
+                        return `Invalid value "${v}" in list for ${field.name}`;
+                    }
+                }
+                return true;
+            }
+
+            // Single value
+            if (!this.isValidValue(value, field)) {
+                return `Value "${value}" out of range for ${field.name} (${field.min}-${field.max})`;
+            }
+
+            return true;
+        },
+
+        isValidValue(value, field) {
+            if (!/^\d+$/.test(value)) return false;
+            const num = parseInt(value);
+            return num >= field.min && num <= field.max;
+        },
+
+        explainField(value, field) {
+            if (value === '*') return `Every ${field.name.toLowerCase()}`;
+
+            if (value.includes('/')) {
+                const [base, step] = value.split('/');
+                if (base === '*') {
+                    return `Every ${step} ${field.name.toLowerCase()}${parseInt(step) > 1 ? 's' : ''}`;
+                }
+                return `Every ${step} ${field.name.toLowerCase()}${parseInt(step) > 1 ? 's' : ''} starting at ${base}`;
+            }
+
+            if (value.includes('-') && !value.includes(',')) {
+                const [start, end] = value.split('-');
+                if (field.name === 'Day (Week)') {
+                    return `${this.getDayName(start)} through ${this.getDayName(end)}`;
+                }
+                if (field.name === 'Month') {
+                    return `${this.getMonthName(start)} through ${this.getMonthName(end)}`;
+                }
+                return `From ${start} through ${end}`;
+            }
+
+            if (value.includes(',')) {
+                const values = value.split(',');
+                if (field.name === 'Day (Week)') {
+                    return values.map(v => this.getDayName(v)).join(', ');
+                }
+                if (field.name === 'Month') {
+                    return values.map(v => this.getMonthName(v)).join(', ');
+                }
+                return `At ${values.join(', ')}`;
+            }
+
+            if (field.name === 'Day (Week)') {
+                return this.getDayName(value);
+            }
+            if (field.name === 'Month') {
+                return this.getMonthName(value);
+            }
+            return `At ${value}`;
+        },
+
+        getDayName(num) {
+            const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+            return days[parseInt(num)] || num;
+        },
+
+        getMonthName(num) {
+            const months = ['', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+            return months[parseInt(num)] || num;
+        },
+
+        generateDescription(parts) {
+            const [minute, hour, dayOfMonth, month, dayOfWeek] = parts;
+
+            let desc = '';
+
+            // Time part
+            if (minute === '*' && hour === '*') {
+                desc = 'Every minute';
+            } else if (minute.includes('/')) {
+                const step = minute.split('/')[1];
+                desc = `Every ${step} minutes`;
+            } else if (hour === '*') {
+                desc = `At minute ${minute} of every hour`;
+            } else if (minute === '0' && !hour.includes('/') && !hour.includes(',') && !hour.includes('-')) {
+                const hourNum = parseInt(hour);
+                const period = hourNum >= 12 ? 'PM' : 'AM';
+                const displayHour = hourNum === 0 ? 12 : (hourNum > 12 ? hourNum - 12 : hourNum);
+                desc = `At ${displayHour}:00 ${period}`;
+            } else if (hour.includes(',')) {
+                const hours = hour.split(',').map(h => {
+                    const hourNum = parseInt(h);
+                    const period = hourNum >= 12 ? 'PM' : 'AM';
+                    const displayHour = hourNum === 0 ? 12 : (hourNum > 12 ? hourNum - 12 : hourNum);
+                    return `${displayHour}:${minute.padStart(2, '0')} ${period}`;
+                });
+                desc = `At ${hours.join(' and ')}`;
+            } else if (hour.includes('/')) {
+                const step = hour.split('/')[1];
+                desc = `At minute ${minute} every ${step} hours`;
+            } else {
+                const hourNum = parseInt(hour);
+                const period = hourNum >= 12 ? 'PM' : 'AM';
+                const displayHour = hourNum === 0 ? 12 : (hourNum > 12 ? hourNum - 12 : hourNum);
+                desc = `At ${displayHour}:${minute.padStart(2, '0')} ${period}`;
+            }
+
+            // Day part
+            if (dayOfMonth !== '*' && month !== '*') {
+                if (dayOfMonth.includes(',')) {
+                    desc += ` on day ${dayOfMonth} of ${this.getMonthName(month)}`;
+                } else {
+                    desc += ` on ${this.getMonthName(month)} ${dayOfMonth}`;
+                }
+            } else if (dayOfMonth !== '*') {
+                if (dayOfMonth.includes(',')) {
+                    desc += ` on day ${dayOfMonth} of the month`;
+                } else {
+                    desc += ` on day ${dayOfMonth} of the month`;
+                }
+            } else if (month !== '*') {
+                desc += ` in ${this.getMonthName(month)}`;
+            }
+
+            // Day of week
+            if (dayOfWeek !== '*') {
+                if (dayOfWeek.includes('-')) {
+                    const [start, end] = dayOfWeek.split('-');
+                    desc += `, ${this.getDayName(start)} through ${this.getDayName(end)}`;
+                } else if (dayOfWeek.includes(',')) {
+                    const days = dayOfWeek.split(',').map(d => this.getDayName(d));
+                    desc += `, on ${days.join(', ')}`;
+                } else {
+                    desc += `, on ${this.getDayName(dayOfWeek)}`;
+                }
+            }
+
+            return desc;
+        },
+
+        calculateNextRuns(parts) {
+            const runs = [];
+            const now = new Date();
+            let current = new Date(now);
+
+            // Limit iterations to prevent infinite loops
+            let iterations = 0;
+            const maxIterations = 10000;
+
+            while (runs.length < 5 && iterations < maxIterations) {
+                iterations++;
+                current = new Date(current.getTime() + 60000); // Add 1 minute
+                current.setSeconds(0);
+                current.setMilliseconds(0);
+
+                if (this.matchesCron(current, parts)) {
+                    runs.push(this.formatDate(current));
+                }
+            }
+
+            this.nextRuns = runs;
+        },
+
+        matchesCron(date, parts) {
+            const [minute, hour, dayOfMonth, month, dayOfWeek] = parts;
+
+            if (!this.matchesField(date.getMinutes(), minute, 0, 59)) return false;
+            if (!this.matchesField(date.getHours(), hour, 0, 23)) return false;
+            if (!this.matchesField(date.getDate(), dayOfMonth, 1, 31)) return false;
+            if (!this.matchesField(date.getMonth() + 1, month, 1, 12)) return false;
+            if (!this.matchesField(date.getDay(), dayOfWeek, 0, 6)) return false;
+
+            return true;
+        },
+
+        matchesField(value, pattern, min, max) {
+            if (pattern === '*') return true;
+
+            if (pattern.includes('/')) {
+                const [base, step] = pattern.split('/');
+                const stepNum = parseInt(step);
+                const startVal = base === '*' ? min : parseInt(base);
+                return (value - startVal) % stepNum === 0 && value >= startVal;
+            }
+
+            if (pattern.includes(',')) {
+                const values = pattern.split(',');
+                for (const v of values) {
+                    if (v.includes('-')) {
+                        const [start, end] = v.split('-').map(Number);
+                        if (value >= start && value <= end) return true;
+                    } else if (parseInt(v) === value) {
+                        return true;
+                    }
+                }
+                return false;
+            }
+
+            if (pattern.includes('-')) {
+                const [start, end] = pattern.split('-').map(Number);
+                return value >= start && value <= end;
+            }
+
+            return parseInt(pattern) === value;
+        },
+
+        formatDate(date) {
+            const options = {
+                weekday: 'short',
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+                hour12: true
+            };
+            return date.toLocaleString('en-US', options);
+        }
+    };
+}
+</script>
+@endpush
diff --git a/routes/web.php b/routes/web.php
index ee52f7f..ee8cb4e 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -28,6 +28,7 @@
     Route::get('/text-case', [ToolController::class, 'textCase'])->name('text-case');
     Route::get('/password', [ToolController::class, 'password'])->name('password');
     Route::get('/lorem', [ToolController::class, 'lorem'])->name('lorem');
+    Route::get('/cron', [ToolController::class, 'cron'])->name('cron');
 });
 
 // Static Pages
@@ -60,6 +61,7 @@
         ['loc' => route('tools.text-case'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('tools.password'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('tools.lorem'), 'priority' => '0.8', 'changefreq' => 'monthly'],
+        ['loc' => route('tools.cron'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('about'), 'priority' => '0.5', 'changefreq' => 'monthly'],
         ['loc' => route('privacy'), 'priority' => '0.3', 'changefreq' => 'yearly'],
     ];
diff --git a/tests/Feature/WebRoutesTest.php b/tests/Feature/WebRoutesTest.php
index a8989b0..5cd285b 100644
--- a/tests/Feature/WebRoutesTest.php
+++ b/tests/Feature/WebRoutesTest.php
@@ -40,6 +40,7 @@ public function test_home_page_displays_all_tools(): void
         $response->assertSee('Text Case Converter');
         $response->assertSee('Password Generator');
         $response->assertSee('Lorem Ipsum Generator');
+        $response->assertSee('Cron Parser');
     }
 
     public function test_home_page_has_tool_links(): void
@@ -68,6 +69,7 @@ public function test_home_page_has_tool_links(): void
         $response->assertSee('href="' . route('tools.text-case') . '"', false);
         $response->assertSee('href="' . route('tools.password') . '"', false);
         $response->assertSee('href="' . route('tools.lorem') . '"', false);
+        $response->assertSee('href="' . route('tools.cron') . '"', false);
     }
 
     public function test_csv_tool_page_loads(): void
@@ -426,6 +428,24 @@ public function test_lorem_tool_has_required_elements(): void
         $response->assertSee('Sentences');
         $response->assertSee('Words');
         $response->assertSee('Generate');
+    public function test_cron_tool_page_loads(): void
+    {
+        $response = $this->get('/tools/cron');
+
+        $response->assertStatus(200);
+        $response->assertSee('Cron Expression Parser');
+        $response->assertSee('Parse and explain cron expressions');
+    }
+
+    public function test_cron_tool_has_required_elements(): void
+    {
+        $response = $this->get('/tools/cron');
+
+        $response->assertStatus(200);
+        $response->assertSee('Cron Expression');
+        $response->assertSee('Common Patterns');
+        $response->assertSee('Syntax Reference');
+        $response->assertSee('Next Run Times');
     }
 
     public function test_all_pages_have_navigation(): void
@@ -434,6 +454,7 @@ public function test_all_pages_have_navigation(): void
         $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/text-case'];
         $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/password'];
         $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/lorem'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/cron'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -449,6 +470,7 @@ public function test_all_pages_have_theme_toggle(): void
         $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/text-case'];
         $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/password'];
         $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/lorem'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/cron'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -465,6 +487,7 @@ public function test_all_pages_load_vite_assets(): void
         $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/text-case'];
         $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/password'];
         $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/lorem'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/cron'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -481,6 +504,7 @@ public function test_all_tool_pages_have_back_link(): void
         $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/text-case'];
         $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/password'];
         $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/lorem'];
+        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/cron'];
 
         foreach ($toolPages as $page) {
             $response = $this->get($page);
@@ -537,6 +561,7 @@ public function test_pages_have_csrf_token(): void
         $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/text-case'];
         $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/password'];
         $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/lorem'];
+        $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/cron'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);

From cd213db84327185aa12058fb65852d8b83ecbcfd Mon Sep 17 00:00:00 2001
From: jalel <ghabri.djalel@gmail.com>
Date: Mon, 15 Dec 2025 00:41:42 +0000
Subject: [PATCH 16/23] Fix syntax errors in merged tool files

Resolve missing closing braces in ToolController methods and closing
tags in home.blade.php icon cases. Also fix duplicate array assignments
in WebRoutesTest by consolidating all tool pages into single arrays.
---
 app/Http/Controllers/ToolController.php | 16 ++++++++++
 resources/views/home.blade.php          | 14 +++++++--
 tests/Feature/WebRoutesTest.php         | 40 ++++++++++---------------
 3 files changed, 43 insertions(+), 27 deletions(-)

diff --git a/app/Http/Controllers/ToolController.php b/app/Http/Controllers/ToolController.php
index 629968c..eb8c3a2 100644
--- a/app/Http/Controllers/ToolController.php
+++ b/app/Http/Controllers/ToolController.php
@@ -104,18 +104,26 @@ public function index(): View
                 'description' => 'Encode/decode HTML entities and special characters',
                 'route' => 'tools.html-entity',
                 'icon' => 'html-entity',
+            ],
+            [
                 'name' => 'Text Case Converter',
                 'description' => 'Convert text to camelCase, snake_case, and more',
                 'route' => 'tools.text-case',
                 'icon' => 'text-case',
+            ],
+            [
                 'name' => 'Password Generator',
                 'description' => 'Generate secure random passwords',
                 'route' => 'tools.password',
                 'icon' => 'key',
+            ],
+            [
                 'name' => 'Lorem Ipsum Generator',
                 'description' => 'Generate placeholder text for designs',
                 'route' => 'tools.lorem',
                 'icon' => 'text',
+            ],
+            [
                 'name' => 'Cron Parser',
                 'description' => 'Parse and explain cron expressions',
                 'route' => 'tools.cron',
@@ -204,15 +212,23 @@ public function qrCode(): View
     public function htmlEntity(): View
     {
         return view('tools.html-entity');
+    }
+
     public function textCase(): View
     {
         return view('tools.text-case');
+    }
+
     public function password(): View
     {
         return view('tools.password-generator');
+    }
+
     public function lorem(): View
     {
         return view('tools.lorem-ipsum');
+    }
+
     public function cron(): View
     {
         return view('tools.cron-parser');
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index fed9b9f..2a21f80 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -104,24 +104,34 @@
                     @case('color')
                         <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
-
+                        </svg>
+                        @break
                     @case('qrcode')
                         <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h2M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"/>
-
+                        </svg>
+                        @break
                     @case('html-entity')
                         <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
+                        </svg>
+                        @break
                     @case('text-case')
                         <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 3v5a1 1 0 001 1h5"/>
+                        </svg>
+                        @break
                     @case('key')
                         <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
+                        </svg>
+                        @break
                     @case('text')
                         <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/>
+                        </svg>
+                        @break
                     @case('clock')
                         <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
diff --git a/tests/Feature/WebRoutesTest.php b/tests/Feature/WebRoutesTest.php
index 5cd285b..ae1bc1b 100644
--- a/tests/Feature/WebRoutesTest.php
+++ b/tests/Feature/WebRoutesTest.php
@@ -336,6 +336,7 @@ public function test_color_picker_has_required_elements(): void
         $response->assertSee('HSL');
         $response->assertSee('CMYK');
         $response->assertSee('Color Harmony');
+    }
 
     public function test_qr_code_tool_page_loads(): void
     {
@@ -355,6 +356,7 @@ public function test_qr_code_tool_has_required_elements(): void
         $response->assertSee('Quick Templates');
         $response->assertSee('Download PNG');
         $response->assertSee('Error Correction');
+    }
 
     public function test_html_entity_tool_page_loads(): void
     {
@@ -374,6 +376,8 @@ public function test_html_entity_tool_has_required_elements(): void
         $response->assertSee('Decode');
         $response->assertSee('Common HTML Entities');
         $response->assertSee('Entity Reference');
+    }
+
     public function test_text_case_tool_page_loads(): void
     {
         $response = $this->get('/tools/text-case');
@@ -392,6 +396,8 @@ public function test_text_case_tool_has_required_elements(): void
         $response->assertSee('Convert To');
         $response->assertSee('camelCase');
         $response->assertSee('snake_case');
+    }
+
     public function test_password_tool_page_loads(): void
     {
         $response = $this->get('/tools/password');
@@ -410,6 +416,8 @@ public function test_password_tool_has_required_elements(): void
         $response->assertSee('Strength');
         $response->assertSee('Options');
         $response->assertSee('Quick Presets');
+    }
+
     public function test_lorem_tool_page_loads(): void
     {
         $response = $this->get('/tools/lorem');
@@ -428,6 +436,8 @@ public function test_lorem_tool_has_required_elements(): void
         $response->assertSee('Sentences');
         $response->assertSee('Words');
         $response->assertSee('Generate');
+    }
+
     public function test_cron_tool_page_loads(): void
     {
         $response = $this->get('/tools/cron');
@@ -450,11 +460,7 @@ public function test_cron_tool_has_required_elements(): void
 
     public function test_all_pages_have_navigation(): void
     {
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity'];
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/text-case'];
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/password'];
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/lorem'];
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/cron'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -466,11 +472,7 @@ public function test_all_pages_have_navigation(): void
 
     public function test_all_pages_have_theme_toggle(): void
     {
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity'];
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/text-case'];
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/password'];
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/lorem'];
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/cron'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -483,11 +485,7 @@ public function test_all_pages_have_theme_toggle(): void
     public function test_all_pages_load_vite_assets(): void
     {
         // Code editor uses standalone template without Vite
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity'];
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/text-case'];
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/password'];
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/lorem'];
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/cron'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -500,11 +498,7 @@ public function test_all_pages_load_vite_assets(): void
     public function test_all_tool_pages_have_back_link(): void
     {
         // Code editor uses standalone template with home link instead of back
-        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity'];
-        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/text-case'];
-        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/password'];
-        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/lorem'];
-        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/cron'];
+        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron'];
 
         foreach ($toolPages as $page) {
             $response = $this->get($page);
@@ -557,11 +551,7 @@ public function test_api_routes_reject_get_requests(): void
 
     public function test_pages_have_csrf_token(): void
     {
-        $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity'];
-        $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/text-case'];
-        $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/password'];
-        $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/lorem'];
-        $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/cron'];
+        $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);

From 0278624d8ce575898da652b9d3c762382a7fa959 Mon Sep 17 00:00:00 2001
From: jalel <ghabri.djalel@gmail.com>
Date: Sun, 14 Dec 2025 15:13:03 +0000
Subject: [PATCH 17/23] Add JWT Decoder tool

- Decode and display JWT header and payload
- Show token structure with color-coded parts
- Expiration status indicator (valid/expired)
- Human-readable timestamps for exp, iat, nbf claims
- Registered claims reference section
- Sample JWT for testing
- Copy header/payload to clipboard
- Security notice about client-side decoding
---
 app/Http/Controllers/ToolController.php |  11 +
 resources/views/home.blade.php          |   6 +-
 resources/views/tools/jwt.blade.php     | 336 ++++++++++++++++++++++++
 routes/web.php                          |   8 +-
 tests/Feature/WebRoutesTest.php         |  38 ++-
 5 files changed, 381 insertions(+), 18 deletions(-)
 create mode 100644 resources/views/tools/jwt.blade.php

diff --git a/app/Http/Controllers/ToolController.php b/app/Http/Controllers/ToolController.php
index eb8c3a2..00800dd 100644
--- a/app/Http/Controllers/ToolController.php
+++ b/app/Http/Controllers/ToolController.php
@@ -129,6 +129,12 @@ public function index(): View
                 'route' => 'tools.cron',
                 'icon' => 'clock',
             ],
+            [
+                'name' => 'JWT Decoder',
+                'description' => 'Decode and inspect JSON Web Tokens',
+                'route' => 'tools.jwt',
+                'icon' => 'jwt',
+            ],
         ];
 
         return view('home', compact('tools'));
@@ -233,4 +239,9 @@ public function cron(): View
     {
         return view('tools.cron-parser');
     }
+
+    public function jwt(): View
+    {
+        return view('tools.jwt');
+    }
 }
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index 2a21f80..ee0052f 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -90,7 +90,6 @@
                             <circle cx="12" cy="12" r="4" stroke-width="2"/>
                         </svg>
                         @break
-
                     @case('calculator')
                         <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
@@ -137,6 +136,11 @@
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                         </svg>
                         @break
+                    @case('jwt')
+                        <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
+                        </svg>
+                        @break
                 @endswitch
             </div>
             <div class="flex-1 min-w-0">
diff --git a/resources/views/tools/jwt.blade.php b/resources/views/tools/jwt.blade.php
new file mode 100644
index 0000000..4910a1b
--- /dev/null
+++ b/resources/views/tools/jwt.blade.php
@@ -0,0 +1,336 @@
+@extends('layouts.app')
+
+@section('title', 'JWT Decoder - Decode JSON Web Tokens Online | Dev Tools')
+@section('meta_description', 'Free online JWT decoder. Decode and inspect JSON Web Tokens, view header and payload, check expiration status. No data sent to server.')
+@section('meta_keywords', 'jwt decoder, json web token, jwt parser, jwt debugger, decode jwt, jwt viewer, token decoder, jwt online')
+
+@push('schema')
+<script type="application/ld+json">
+{
+    "@@context": "https://schema.org",
+    "@@type": "SoftwareApplication",
+    "name": "JWT Decoder",
+    "description": "Decode and inspect JSON Web Tokens",
+    "url": "{{ route('tools.jwt') }}",
+    "applicationCategory": "DeveloperApplication",
+    "operatingSystem": "Any",
+    "offers": {
+        "@@type": "Offer",
+        "price": "0",
+        "priceCurrency": "USD"
+    },
+    "author": {
+        "@@type": "Person",
+        "name": "Ghabri Djalel"
+    }
+}
+</script>
+@endpush
+
+@section('content')
+<div x-data="jwtDecoder()" class="space-y-6">
+    <div class="flex items-center justify-between">
+        <div>
+            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">JWT Decoder</h1>
+            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Decode and inspect JSON Web Tokens</p>
+        </div>
+        <a href="{{ route('home') }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline">&larr; Back</a>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <!-- Left Column: JWT Input -->
+        <div class="space-y-4">
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <div class="flex items-center justify-between mb-2">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">JWT Token</label>
+                    <button
+                        @click="loadSample()"
+                        class="text-xs text-indigo-600 dark:text-indigo-400 hover:underline"
+                    >
+                        Load sample
+                    </button>
+                </div>
+                <textarea
+                    x-model="token"
+                    @input="decode()"
+                    class="textarea-code w-full h-48 p-3 border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 font-mono text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent resize-none"
+                    placeholder="Paste your JWT token here..."
+                ></textarea>
+                <div x-show="error" class="mt-2 p-2 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 rounded text-sm" x-text="error"></div>
+            </div>
+
+            <!-- Token Structure -->
+            <div x-show="decoded" class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Token Structure</label>
+                <div class="font-mono text-xs break-all">
+                    <span class="text-red-500 dark:text-red-400" x-text="parts.header"></span><span class="text-gray-400">.</span><span class="text-purple-500 dark:text-purple-400" x-text="parts.payload"></span><span class="text-gray-400">.</span><span class="text-cyan-500 dark:text-cyan-400" x-text="parts.signature"></span>
+                </div>
+                <div class="mt-3 flex gap-4 text-xs">
+                    <div class="flex items-center gap-1">
+                        <span class="w-3 h-3 rounded bg-red-500"></span>
+                        <span class="text-gray-600 dark:text-gray-400">Header</span>
+                    </div>
+                    <div class="flex items-center gap-1">
+                        <span class="w-3 h-3 rounded bg-purple-500"></span>
+                        <span class="text-gray-600 dark:text-gray-400">Payload</span>
+                    </div>
+                    <div class="flex items-center gap-1">
+                        <span class="w-3 h-3 rounded bg-cyan-500"></span>
+                        <span class="text-gray-600 dark:text-gray-400">Signature</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Security Notice -->
+            <div class="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-3">
+                <div class="flex items-start gap-2">
+                    <svg class="w-5 h-5 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+                    </svg>
+                    <div class="text-sm text-amber-800 dark:text-amber-200">
+                        <p class="font-medium">Security Note</p>
+                        <p class="mt-1 text-amber-700 dark:text-amber-300">JWTs are decoded client-side. No data is sent to any server. Never share tokens containing sensitive information.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Right Column: Decoded Data -->
+        <div class="space-y-4">
+            <!-- Expiration Status -->
+            <div x-show="decoded && expiration.hasExp" class="rounded-lg border p-4" :class="expiration.isExpired ? 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800' : 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800'">
+                <div class="flex items-center gap-2">
+                    <template x-if="expiration.isExpired">
+                        <svg class="w-5 h-5 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                        </svg>
+                    </template>
+                    <template x-if="!expiration.isExpired">
+                        <svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                        </svg>
+                    </template>
+                    <span class="font-medium" :class="expiration.isExpired ? 'text-red-700 dark:text-red-300' : 'text-green-700 dark:text-green-300'" x-text="expiration.isExpired ? 'Token Expired' : 'Token Valid'"></span>
+                </div>
+                <p class="mt-1 text-sm" :class="expiration.isExpired ? 'text-red-600 dark:text-red-400' : 'text-green-600 dark:text-green-400'" x-text="expiration.message"></p>
+            </div>
+
+            <!-- Header -->
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <div class="flex items-center justify-between mb-2">
+                    <label class="block text-sm font-medium text-red-600 dark:text-red-400">Header</label>
+                    <button
+                        x-show="decoded"
+                        @click="copySection('header', $event.currentTarget)"
+                        class="p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                        title="Copy header"
+                    >
+                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/>
+                        </svg>
+                    </button>
+                </div>
+                <pre x-show="decoded" class="p-3 bg-gray-50 dark:bg-dark-bg rounded-lg text-sm overflow-auto max-h-40 font-mono text-gray-900 dark:text-gray-100" x-text="headerJson"></pre>
+                <div x-show="!decoded" class="text-gray-500 dark:text-gray-400 text-sm">Paste a JWT to see the header</div>
+            </div>
+
+            <!-- Payload -->
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <div class="flex items-center justify-between mb-2">
+                    <label class="block text-sm font-medium text-purple-600 dark:text-purple-400">Payload</label>
+                    <button
+                        x-show="decoded"
+                        @click="copySection('payload', $event.currentTarget)"
+                        class="p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                        title="Copy payload"
+                    >
+                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/>
+                        </svg>
+                    </button>
+                </div>
+                <pre x-show="decoded" class="p-3 bg-gray-50 dark:bg-dark-bg rounded-lg text-sm overflow-auto max-h-64 font-mono text-gray-900 dark:text-gray-100" x-text="payloadJson"></pre>
+                <div x-show="!decoded" class="text-gray-500 dark:text-gray-400 text-sm">Paste a JWT to see the payload</div>
+            </div>
+
+            <!-- Claims Reference -->
+            <div x-show="decoded && Object.keys(claims).length > 0" class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Registered Claims</label>
+                <div class="space-y-2">
+                    <template x-for="(info, key) in claims" :key="key">
+                        <div class="flex items-start gap-3 text-sm">
+                            <code class="px-1.5 py-0.5 bg-gray-100 dark:bg-dark-bg rounded text-indigo-600 dark:text-indigo-400 font-medium" x-text="key"></code>
+                            <div class="flex-1">
+                                <span class="text-gray-600 dark:text-gray-400" x-text="info.label + ':'"></span>
+                                <span class="text-gray-900 dark:text-gray-100 ml-1" x-text="info.value"></span>
+                            </div>
+                        </div>
+                    </template>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
+
+@push('scripts')
+<script>
+function jwtDecoder() {
+    return {
+        token: '',
+        decoded: false,
+        error: '',
+        header: null,
+        payload: null,
+        headerJson: '',
+        payloadJson: '',
+        parts: { header: '', payload: '', signature: '' },
+        expiration: { hasExp: false, isExpired: false, message: '' },
+        claims: {},
+
+        registeredClaims: {
+            iss: 'Issuer',
+            sub: 'Subject',
+            aud: 'Audience',
+            exp: 'Expiration Time',
+            nbf: 'Not Before',
+            iat: 'Issued At',
+            jti: 'JWT ID'
+        },
+
+        loadSample() {
+            // Sample JWT that expires in the future (payload: {"sub":"1234567890","name":"John Doe","iat":1516239022,"exp":9999999999})
+            this.token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyLCJleHAiOjk5OTk5OTk5OTl9.Vg30C57s3l90JNap_VgMhKZjfc-p7SoBXaSAy8c28HA';
+            this.decode();
+        },
+
+        decode() {
+            this.error = '';
+            this.decoded = false;
+            this.header = null;
+            this.payload = null;
+            this.headerJson = '';
+            this.payloadJson = '';
+            this.parts = { header: '', payload: '', signature: '' };
+            this.expiration = { hasExp: false, isExpired: false, message: '' };
+            this.claims = {};
+
+            if (!this.token.trim()) {
+                return;
+            }
+
+            try {
+                const parts = this.token.trim().split('.');
+                if (parts.length !== 3) {
+                    throw new Error('Invalid JWT format. Expected 3 parts separated by dots.');
+                }
+
+                this.parts = {
+                    header: parts[0],
+                    payload: parts[1],
+                    signature: parts[2]
+                };
+
+                // Decode header
+                this.header = JSON.parse(this.base64UrlDecode(parts[0]));
+                this.headerJson = JSON.stringify(this.header, null, 2);
+
+                // Decode payload
+                this.payload = JSON.parse(this.base64UrlDecode(parts[1]));
+                this.payloadJson = JSON.stringify(this.payload, null, 2);
+
+                // Check expiration
+                this.checkExpiration();
+
+                // Parse registered claims
+                this.parseClaims();
+
+                this.decoded = true;
+            } catch (e) {
+                this.error = e.message;
+            }
+        },
+
+        base64UrlDecode(str) {
+            // Replace URL-safe characters
+            let base64 = str.replace(/-/g, '+').replace(/_/g, '/');
+            // Pad with '=' if necessary
+            while (base64.length % 4) {
+                base64 += '=';
+            }
+            return decodeURIComponent(atob(base64).split('').map(function(c) {
+                return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+            }).join(''));
+        },
+
+        checkExpiration() {
+            if (this.payload && this.payload.exp) {
+                this.expiration.hasExp = true;
+                const expDate = new Date(this.payload.exp * 1000);
+                const now = new Date();
+                this.expiration.isExpired = expDate < now;
+
+                if (this.expiration.isExpired) {
+                    const diff = now - expDate;
+                    this.expiration.message = `Expired ${this.formatTimeDiff(diff)} ago (${this.formatDate(expDate)})`;
+                } else {
+                    const diff = expDate - now;
+                    this.expiration.message = `Expires in ${this.formatTimeDiff(diff)} (${this.formatDate(expDate)})`;
+                }
+            }
+        },
+
+        parseClaims() {
+            if (!this.payload) return;
+
+            for (const [key, label] of Object.entries(this.registeredClaims)) {
+                if (this.payload[key] !== undefined) {
+                    let value = this.payload[key];
+
+                    // Format timestamps
+                    if (['exp', 'nbf', 'iat'].includes(key) && typeof value === 'number') {
+                        value = this.formatDate(new Date(value * 1000));
+                    }
+
+                    // Format arrays
+                    if (Array.isArray(value)) {
+                        value = value.join(', ');
+                    }
+
+                    this.claims[key] = { label, value };
+                }
+            }
+        },
+
+        formatDate(date) {
+            return date.toLocaleString('en-US', {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit',
+                timeZoneName: 'short'
+            });
+        },
+
+        formatTimeDiff(ms) {
+            const seconds = Math.floor(ms / 1000);
+            const minutes = Math.floor(seconds / 60);
+            const hours = Math.floor(minutes / 60);
+            const days = Math.floor(hours / 24);
+
+            if (days > 0) return `${days} day${days > 1 ? 's' : ''}`;
+            if (hours > 0) return `${hours} hour${hours > 1 ? 's' : ''}`;
+            if (minutes > 0) return `${minutes} minute${minutes > 1 ? 's' : ''}`;
+            return `${seconds} second${seconds !== 1 ? 's' : ''}`;
+        },
+
+        copySection(section, button) {
+            const text = section === 'header' ? this.headerJson : this.payloadJson;
+            DevTools.copyToClipboard(text, button);
+        }
+    };
+}
+</script>
+@endpush
diff --git a/routes/web.php b/routes/web.php
index ee8cb4e..b7cfa7b 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -17,18 +17,16 @@
     Route::get('/url', [ToolController::class, 'url'])->name('url');
     Route::get('/code-editor', [ToolController::class, 'codeEditor'])->name('code-editor');
     Route::get('/regex', [ToolController::class, 'regex'])->name('regex');
-
     Route::get('/base-converter', [ToolController::class, 'baseConverter'])->name('base-converter');
     Route::get('/slug-generator', [ToolController::class, 'slugGenerator'])->name('slug-generator');
     Route::get('/color-picker', [ToolController::class, 'colorPicker'])->name('color-picker');
-
     Route::get('/qr-code', [ToolController::class, 'qrCode'])->name('qr-code');
-
     Route::get('/html-entity', [ToolController::class, 'htmlEntity'])->name('html-entity');
     Route::get('/text-case', [ToolController::class, 'textCase'])->name('text-case');
     Route::get('/password', [ToolController::class, 'password'])->name('password');
     Route::get('/lorem', [ToolController::class, 'lorem'])->name('lorem');
     Route::get('/cron', [ToolController::class, 'cron'])->name('cron');
+    Route::get('/jwt', [ToolController::class, 'jwt'])->name('jwt');
 });
 
 // Static Pages
@@ -50,18 +48,16 @@
         ['loc' => route('tools.url'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('tools.code-editor'), 'priority' => '0.9', 'changefreq' => 'monthly'],
         ['loc' => route('tools.regex'), 'priority' => '0.8', 'changefreq' => 'monthly'],
-
         ['loc' => route('tools.base-converter'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('tools.slug-generator'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('tools.color-picker'), 'priority' => '0.8', 'changefreq' => 'monthly'],
-
         ['loc' => route('tools.qr-code'), 'priority' => '0.8', 'changefreq' => 'monthly'],
-
         ['loc' => route('tools.html-entity'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('tools.text-case'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('tools.password'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('tools.lorem'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('tools.cron'), 'priority' => '0.8', 'changefreq' => 'monthly'],
+        ['loc' => route('tools.jwt'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('about'), 'priority' => '0.5', 'changefreq' => 'monthly'],
         ['loc' => route('privacy'), 'priority' => '0.3', 'changefreq' => 'yearly'],
     ];
diff --git a/tests/Feature/WebRoutesTest.php b/tests/Feature/WebRoutesTest.php
index ae1bc1b..20d26ab 100644
--- a/tests/Feature/WebRoutesTest.php
+++ b/tests/Feature/WebRoutesTest.php
@@ -29,18 +29,16 @@ public function test_home_page_displays_all_tools(): void
         $response->assertSee('URL Encoder');
         $response->assertSee('Code Editor');
         $response->assertSee('Regex Tester');
-
         $response->assertSee('Base Converter');
         $response->assertSee('Slug Generator');
         $response->assertSee('Color Picker');
-
         $response->assertSee('QR Code Generator');
-
         $response->assertSee('HTML Entity Encoder');
         $response->assertSee('Text Case Converter');
         $response->assertSee('Password Generator');
         $response->assertSee('Lorem Ipsum Generator');
         $response->assertSee('Cron Parser');
+        $response->assertSee('JWT Decoder');
     }
 
     public function test_home_page_has_tool_links(): void
@@ -58,18 +56,16 @@ public function test_home_page_has_tool_links(): void
         $response->assertSee('href="' . route('tools.url') . '"', false);
         $response->assertSee('href="' . route('tools.code-editor') . '"', false);
         $response->assertSee('href="' . route('tools.regex') . '"', false);
-
         $response->assertSee('href="' . route('tools.base-converter') . '"', false);
         $response->assertSee('href="' . route('tools.slug-generator') . '"', false);
         $response->assertSee('href="' . route('tools.color-picker') . '"', false);
-
         $response->assertSee('href="' . route('tools.qr-code') . '"', false);
-
         $response->assertSee('href="' . route('tools.html-entity') . '"', false);
         $response->assertSee('href="' . route('tools.text-case') . '"', false);
         $response->assertSee('href="' . route('tools.password') . '"', false);
         $response->assertSee('href="' . route('tools.lorem') . '"', false);
         $response->assertSee('href="' . route('tools.cron') . '"', false);
+        $response->assertSee('href="' . route('tools.jwt') . '"', false);
     }
 
     public function test_csv_tool_page_loads(): void
@@ -458,9 +454,29 @@ public function test_cron_tool_has_required_elements(): void
         $response->assertSee('Next Run Times');
     }
 
+    public function test_jwt_tool_page_loads(): void
+    {
+        $response = $this->get('/tools/jwt');
+
+        $response->assertStatus(200);
+        $response->assertSee('JWT Decoder');
+        $response->assertSee('Decode and inspect JSON Web Tokens');
+    }
+
+    public function test_jwt_tool_has_required_elements(): void
+    {
+        $response = $this->get('/tools/jwt');
+
+        $response->assertStatus(200);
+        $response->assertSee('JWT Token');
+        $response->assertSee('Header');
+        $response->assertSee('Payload');
+        $response->assertSee('Load sample');
+    }
+
     public function test_all_pages_have_navigation(): void
     {
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -472,7 +488,7 @@ public function test_all_pages_have_navigation(): void
 
     public function test_all_pages_have_theme_toggle(): void
     {
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -485,7 +501,7 @@ public function test_all_pages_have_theme_toggle(): void
     public function test_all_pages_load_vite_assets(): void
     {
         // Code editor uses standalone template without Vite
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -498,7 +514,7 @@ public function test_all_pages_load_vite_assets(): void
     public function test_all_tool_pages_have_back_link(): void
     {
         // Code editor uses standalone template with home link instead of back
-        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron'];
+        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt'];
 
         foreach ($toolPages as $page) {
             $response = $this->get($page);
@@ -551,7 +567,7 @@ public function test_api_routes_reject_get_requests(): void
 
     public function test_pages_have_csrf_token(): void
     {
-        $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron'];
+        $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);

From 234edb929456fea1a5719f9ca79a309caf82322b Mon Sep 17 00:00:00 2001
From: jalel <ghabri.djalel@gmail.com>
Date: Sun, 14 Dec 2025 15:20:00 +0000
Subject: [PATCH 18/23] Add Timestamp Converter tool

- Live current Unix timestamp display
- Timestamp to date conversion (seconds/milliseconds)
- Date to timestamp conversion with timezone support
- Multiple output formats (local, UTC, ISO 8601, relative)
- Quick reference with common timestamps
- Copy timestamps to clipboard
---
 app/Http/Controllers/ToolController.php   |  11 +
 resources/views/home.blade.php            |   5 +
 resources/views/tools/timestamp.blade.php | 383 ++++++++++++++++++++++
 routes/web.php                            |   2 +
 tests/Feature/WebRoutesTest.php           |  31 +-
 5 files changed, 427 insertions(+), 5 deletions(-)
 create mode 100644 resources/views/tools/timestamp.blade.php

diff --git a/app/Http/Controllers/ToolController.php b/app/Http/Controllers/ToolController.php
index 00800dd..0534827 100644
--- a/app/Http/Controllers/ToolController.php
+++ b/app/Http/Controllers/ToolController.php
@@ -135,6 +135,12 @@ public function index(): View
                 'route' => 'tools.jwt',
                 'icon' => 'jwt',
             ],
+            [
+                'name' => 'Timestamp Converter',
+                'description' => 'Convert Unix timestamps to dates and vice versa',
+                'route' => 'tools.timestamp',
+                'icon' => 'timestamp',
+            ],
         ];
 
         return view('home', compact('tools'));
@@ -244,4 +250,9 @@ public function jwt(): View
     {
         return view('tools.jwt');
     }
+
+    public function timestamp(): View
+    {
+        return view('tools.timestamp');
+    }
 }
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index ee0052f..71ea7a4 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -141,6 +141,11 @@
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
                         </svg>
                         @break
+                    @case('timestamp')
+                        <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                        </svg>
+                        @break
                 @endswitch
             </div>
             <div class="flex-1 min-w-0">
diff --git a/resources/views/tools/timestamp.blade.php b/resources/views/tools/timestamp.blade.php
new file mode 100644
index 0000000..7f78f80
--- /dev/null
+++ b/resources/views/tools/timestamp.blade.php
@@ -0,0 +1,383 @@
+@extends('layouts.app')
+
+@section('title', 'Unix Timestamp Converter - Convert Timestamps Online | Dev Tools')
+@section('meta_description', 'Free online Unix timestamp converter. Convert timestamps to human-readable dates and vice versa. Supports seconds, milliseconds, and multiple timezones.')
+@section('meta_keywords', 'unix timestamp, timestamp converter, epoch converter, date to timestamp, timestamp to date, unix time, epoch time')
+
+@push('schema')
+<script type="application/ld+json">
+{
+    "@@context": "https://schema.org",
+    "@@type": "SoftwareApplication",
+    "name": "Unix Timestamp Converter",
+    "description": "Convert Unix timestamps to dates and vice versa",
+    "url": "{{ route('tools.timestamp') }}",
+    "applicationCategory": "DeveloperApplication",
+    "operatingSystem": "Any",
+    "offers": {
+        "@@type": "Offer",
+        "price": "0",
+        "priceCurrency": "USD"
+    },
+    "author": {
+        "@@type": "Person",
+        "name": "Ghabri Djalel"
+    }
+}
+</script>
+@endpush
+
+@section('content')
+<div x-data="timestampConverter()" x-init="startClock()" class="space-y-6">
+    <div class="flex items-center justify-between">
+        <div>
+            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Timestamp Converter</h1>
+            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Convert Unix timestamps to dates and vice versa</p>
+        </div>
+        <a href="{{ route('home') }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline">&larr; Back</a>
+    </div>
+
+    <!-- Current Time -->
+    <div class="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-lg p-6 text-white">
+        <div class="text-center">
+            <p class="text-sm opacity-80 mb-1">Current Unix Timestamp</p>
+            <div class="flex items-center justify-center gap-3">
+                <span class="text-4xl font-mono font-bold" x-text="currentTimestamp"></span>
+                <button
+                    @click="copyTimestamp(currentTimestamp, $event.currentTarget)"
+                    class="p-2 rounded-lg bg-white/20 hover:bg-white/30 transition-colors"
+                    title="Copy timestamp"
+                >
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/>
+                    </svg>
+                </button>
+            </div>
+            <p class="text-sm opacity-80 mt-2" x-text="currentDateTime"></p>
+        </div>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <!-- Timestamp to Date -->
+        <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Timestamp to Date</h2>
+
+            <div class="space-y-4">
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Unix Timestamp</label>
+                    <input
+                        type="text"
+                        x-model="timestampInput"
+                        @input="convertTimestampToDate()"
+                        class="w-full p-3 border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 font-mono focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                        placeholder="Enter timestamp (e.g., 1702569600)"
+                    >
+                </div>
+
+                <div class="flex gap-2">
+                    <button
+                        @click="timestampUnit = 'seconds'; convertTimestampToDate()"
+                        :class="timestampUnit === 'seconds' ? 'bg-indigo-600 text-white' : 'bg-gray-100 dark:bg-dark-border text-gray-700 dark:text-gray-300'"
+                        class="flex-1 py-2 px-3 rounded-lg font-medium text-sm transition-colors"
+                    >
+                        Seconds
+                    </button>
+                    <button
+                        @click="timestampUnit = 'milliseconds'; convertTimestampToDate()"
+                        :class="timestampUnit === 'milliseconds' ? 'bg-indigo-600 text-white' : 'bg-gray-100 dark:bg-dark-border text-gray-700 dark:text-gray-300'"
+                        class="flex-1 py-2 px-3 rounded-lg font-medium text-sm transition-colors"
+                    >
+                        Milliseconds
+                    </button>
+                </div>
+
+                <div x-show="timestampError" class="p-2 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 rounded text-sm" x-text="timestampError"></div>
+
+                <div x-show="convertedDate" class="space-y-3 p-4 bg-gray-50 dark:bg-dark-bg rounded-lg">
+                    <div class="flex items-center justify-between">
+                        <span class="text-sm text-gray-600 dark:text-gray-400">Local Time</span>
+                        <code class="text-sm font-mono text-gray-900 dark:text-gray-100" x-text="convertedDate.local"></code>
+                    </div>
+                    <div class="flex items-center justify-between">
+                        <span class="text-sm text-gray-600 dark:text-gray-400">UTC</span>
+                        <code class="text-sm font-mono text-gray-900 dark:text-gray-100" x-text="convertedDate.utc"></code>
+                    </div>
+                    <div class="flex items-center justify-between">
+                        <span class="text-sm text-gray-600 dark:text-gray-400">ISO 8601</span>
+                        <code class="text-sm font-mono text-gray-900 dark:text-gray-100" x-text="convertedDate.iso"></code>
+                    </div>
+                    <div class="flex items-center justify-between">
+                        <span class="text-sm text-gray-600 dark:text-gray-400">Relative</span>
+                        <code class="text-sm font-mono text-gray-900 dark:text-gray-100" x-text="convertedDate.relative"></code>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Date to Timestamp -->
+        <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Date to Timestamp</h2>
+
+            <div class="space-y-4">
+                <div class="grid grid-cols-2 gap-3">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Date</label>
+                        <input
+                            type="date"
+                            x-model="dateInput"
+                            @input="convertDateToTimestamp()"
+                            class="w-full p-3 border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                        >
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Time</label>
+                        <input
+                            type="time"
+                            x-model="timeInput"
+                            @input="convertDateToTimestamp()"
+                            step="1"
+                            class="w-full p-3 border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                        >
+                    </div>
+                </div>
+
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Timezone</label>
+                    <select
+                        x-model="timezone"
+                        @change="convertDateToTimestamp()"
+                        class="w-full p-3 border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                    >
+                        <option value="local">Local Time</option>
+                        <option value="UTC">UTC</option>
+                    </select>
+                </div>
+
+                <button
+                    @click="setToNow()"
+                    class="w-full py-2 px-4 bg-gray-100 dark:bg-dark-border hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 font-medium rounded-lg transition-colors"
+                >
+                    Set to Now
+                </button>
+
+                <div x-show="convertedTimestamp" class="space-y-3 p-4 bg-gray-50 dark:bg-dark-bg rounded-lg">
+                    <div class="flex items-center justify-between">
+                        <span class="text-sm text-gray-600 dark:text-gray-400">Seconds</span>
+                        <div class="flex items-center gap-2">
+                            <code class="text-sm font-mono text-gray-900 dark:text-gray-100" x-text="convertedTimestamp.seconds"></code>
+                            <button
+                                @click="copyTimestamp(convertedTimestamp.seconds, $event.currentTarget)"
+                                class="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                            >
+                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="flex items-center justify-between">
+                        <span class="text-sm text-gray-600 dark:text-gray-400">Milliseconds</span>
+                        <div class="flex items-center gap-2">
+                            <code class="text-sm font-mono text-gray-900 dark:text-gray-100" x-text="convertedTimestamp.milliseconds"></code>
+                            <button
+                                @click="copyTimestamp(convertedTimestamp.milliseconds, $event.currentTarget)"
+                                class="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                            >
+                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Common Timestamps -->
+    <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Quick Reference</h2>
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+            <template x-for="ref in quickRefs" :key="ref.label">
+                <div class="p-3 bg-gray-50 dark:bg-dark-bg rounded-lg">
+                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-1" x-text="ref.label"></p>
+                    <div class="flex items-center justify-between">
+                        <code class="text-sm font-mono text-gray-900 dark:text-gray-100" x-text="ref.value"></code>
+                        <button
+                            @click="useTimestamp(ref.value)"
+                            class="text-xs text-indigo-600 dark:text-indigo-400 hover:underline"
+                        >
+                            Use
+                        </button>
+                    </div>
+                </div>
+            </template>
+        </div>
+    </div>
+</div>
+@endsection
+
+@push('scripts')
+<script>
+function timestampConverter() {
+    return {
+        currentTimestamp: '',
+        currentDateTime: '',
+        clockInterval: null,
+
+        timestampInput: '',
+        timestampUnit: 'seconds',
+        timestampError: '',
+        convertedDate: null,
+
+        dateInput: '',
+        timeInput: '',
+        timezone: 'local',
+        convertedTimestamp: null,
+
+        quickRefs: [],
+
+        startClock() {
+            this.updateClock();
+            this.clockInterval = setInterval(() => this.updateClock(), 1000);
+            this.updateQuickRefs();
+        },
+
+        updateClock() {
+            const now = new Date();
+            this.currentTimestamp = Math.floor(now.getTime() / 1000);
+            this.currentDateTime = now.toLocaleString('en-US', {
+                weekday: 'long',
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit',
+                timeZoneName: 'short'
+            });
+        },
+
+        updateQuickRefs() {
+            const now = new Date();
+            const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+            const startOfWeek = new Date(now);
+            startOfWeek.setDate(now.getDate() - now.getDay());
+            startOfWeek.setHours(0, 0, 0, 0);
+            const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+            const startOfYear = new Date(now.getFullYear(), 0, 1);
+
+            this.quickRefs = [
+                { label: 'Start of Today', value: Math.floor(startOfDay.getTime() / 1000) },
+                { label: 'Start of Week', value: Math.floor(startOfWeek.getTime() / 1000) },
+                { label: 'Start of Month', value: Math.floor(startOfMonth.getTime() / 1000) },
+                { label: 'Start of Year', value: Math.floor(startOfYear.getTime() / 1000) },
+            ];
+        },
+
+        convertTimestampToDate() {
+            this.timestampError = '';
+            this.convertedDate = null;
+
+            if (!this.timestampInput.trim()) return;
+
+            const ts = parseInt(this.timestampInput.trim(), 10);
+            if (isNaN(ts)) {
+                this.timestampError = 'Invalid timestamp. Please enter a number.';
+                return;
+            }
+
+            const ms = this.timestampUnit === 'milliseconds' ? ts : ts * 1000;
+            const date = new Date(ms);
+
+            if (isNaN(date.getTime())) {
+                this.timestampError = 'Invalid timestamp. Date out of range.';
+                return;
+            }
+
+            this.convertedDate = {
+                local: date.toLocaleString('en-US', {
+                    weekday: 'short',
+                    year: 'numeric',
+                    month: 'short',
+                    day: 'numeric',
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    second: '2-digit',
+                    timeZoneName: 'short'
+                }),
+                utc: date.toUTCString(),
+                iso: date.toISOString(),
+                relative: this.getRelativeTime(date)
+            };
+        },
+
+        convertDateToTimestamp() {
+            this.convertedTimestamp = null;
+
+            if (!this.dateInput) return;
+
+            const timeStr = this.timeInput || '00:00:00';
+            let date;
+
+            if (this.timezone === 'UTC') {
+                date = new Date(this.dateInput + 'T' + timeStr + 'Z');
+            } else {
+                date = new Date(this.dateInput + 'T' + timeStr);
+            }
+
+            if (isNaN(date.getTime())) return;
+
+            this.convertedTimestamp = {
+                seconds: Math.floor(date.getTime() / 1000),
+                milliseconds: date.getTime()
+            };
+        },
+
+        setToNow() {
+            const now = new Date();
+            this.dateInput = now.toISOString().split('T')[0];
+            this.timeInput = now.toTimeString().split(' ')[0];
+            this.convertDateToTimestamp();
+        },
+
+        useTimestamp(ts) {
+            this.timestampInput = ts.toString();
+            this.timestampUnit = 'seconds';
+            this.convertTimestampToDate();
+        },
+
+        getRelativeTime(date) {
+            const now = new Date();
+            const diffMs = date - now;
+            const diffSec = Math.round(diffMs / 1000);
+            const diffMin = Math.round(diffSec / 60);
+            const diffHour = Math.round(diffMin / 60);
+            const diffDay = Math.round(diffHour / 24);
+
+            if (Math.abs(diffSec) < 60) {
+                return diffSec >= 0 ? `in ${diffSec} seconds` : `${Math.abs(diffSec)} seconds ago`;
+            } else if (Math.abs(diffMin) < 60) {
+                return diffMin >= 0 ? `in ${diffMin} minutes` : `${Math.abs(diffMin)} minutes ago`;
+            } else if (Math.abs(diffHour) < 24) {
+                return diffHour >= 0 ? `in ${diffHour} hours` : `${Math.abs(diffHour)} hours ago`;
+            } else if (Math.abs(diffDay) < 30) {
+                return diffDay >= 0 ? `in ${diffDay} days` : `${Math.abs(diffDay)} days ago`;
+            } else {
+                const diffMonth = Math.round(diffDay / 30);
+                if (Math.abs(diffMonth) < 12) {
+                    return diffMonth >= 0 ? `in ${diffMonth} months` : `${Math.abs(diffMonth)} months ago`;
+                } else {
+                    const diffYear = Math.round(diffMonth / 12);
+                    return diffYear >= 0 ? `in ${diffYear} years` : `${Math.abs(diffYear)} years ago`;
+                }
+            }
+        },
+
+        copyTimestamp(value, button) {
+            DevTools.copyToClipboard(value.toString(), button);
+        }
+    };
+}
+</script>
+@endpush
diff --git a/routes/web.php b/routes/web.php
index b7cfa7b..b2c2d4f 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -27,6 +27,7 @@
     Route::get('/lorem', [ToolController::class, 'lorem'])->name('lorem');
     Route::get('/cron', [ToolController::class, 'cron'])->name('cron');
     Route::get('/jwt', [ToolController::class, 'jwt'])->name('jwt');
+    Route::get('/timestamp', [ToolController::class, 'timestamp'])->name('timestamp');
 });
 
 // Static Pages
@@ -58,6 +59,7 @@
         ['loc' => route('tools.lorem'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('tools.cron'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('tools.jwt'), 'priority' => '0.8', 'changefreq' => 'monthly'],
+        ['loc' => route('tools.timestamp'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('about'), 'priority' => '0.5', 'changefreq' => 'monthly'],
         ['loc' => route('privacy'), 'priority' => '0.3', 'changefreq' => 'yearly'],
     ];
diff --git a/tests/Feature/WebRoutesTest.php b/tests/Feature/WebRoutesTest.php
index 20d26ab..7fe2697 100644
--- a/tests/Feature/WebRoutesTest.php
+++ b/tests/Feature/WebRoutesTest.php
@@ -39,6 +39,7 @@ public function test_home_page_displays_all_tools(): void
         $response->assertSee('Lorem Ipsum Generator');
         $response->assertSee('Cron Parser');
         $response->assertSee('JWT Decoder');
+        $response->assertSee('Timestamp Converter');
     }
 
     public function test_home_page_has_tool_links(): void
@@ -66,6 +67,7 @@ public function test_home_page_has_tool_links(): void
         $response->assertSee('href="' . route('tools.lorem') . '"', false);
         $response->assertSee('href="' . route('tools.cron') . '"', false);
         $response->assertSee('href="' . route('tools.jwt') . '"', false);
+        $response->assertSee('href="' . route('tools.timestamp') . '"', false);
     }
 
     public function test_csv_tool_page_loads(): void
@@ -474,9 +476,28 @@ public function test_jwt_tool_has_required_elements(): void
         $response->assertSee('Load sample');
     }
 
+    public function test_timestamp_tool_page_loads(): void
+    {
+        $response = $this->get('/tools/timestamp');
+
+        $response->assertStatus(200);
+        $response->assertSee('Timestamp Converter');
+        $response->assertSee('Convert Unix timestamps to dates');
+    }
+
+    public function test_timestamp_tool_has_required_elements(): void
+    {
+        $response = $this->get('/tools/timestamp');
+
+        $response->assertStatus(200);
+        $response->assertSee('Timestamp to Date');
+        $response->assertSee('Date to Timestamp');
+        $response->assertSee('Current Unix Timestamp');
+    }
+
     public function test_all_pages_have_navigation(): void
     {
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt', '/tools/timestamp'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -488,7 +509,7 @@ public function test_all_pages_have_navigation(): void
 
     public function test_all_pages_have_theme_toggle(): void
     {
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt', '/tools/timestamp'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -501,7 +522,7 @@ public function test_all_pages_have_theme_toggle(): void
     public function test_all_pages_load_vite_assets(): void
     {
         // Code editor uses standalone template without Vite
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt', '/tools/timestamp'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -514,7 +535,7 @@ public function test_all_pages_load_vite_assets(): void
     public function test_all_tool_pages_have_back_link(): void
     {
         // Code editor uses standalone template with home link instead of back
-        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt'];
+        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt', '/tools/timestamp'];
 
         foreach ($toolPages as $page) {
             $response = $this->get($page);
@@ -567,7 +588,7 @@ public function test_api_routes_reject_get_requests(): void
 
     public function test_pages_have_csrf_token(): void
     {
-        $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt'];
+        $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt', '/tools/timestamp'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);

From fa9acbc5fb159a5990efd486cffa146d58764351 Mon Sep 17 00:00:00 2001
From: jalel <ghabri.djalel@gmail.com>
Date: Sun, 14 Dec 2025 15:26:08 +0000
Subject: [PATCH 19/23] Add Diff Checker tool

- Side-by-side text comparison with LCS algorithm
- Highlight additions (green) and deletions (red)
- Line numbers for both sides
- Statistics showing added, removed, unchanged lines
- Ignore whitespace and case options
- Swap texts functionality
- Sample code for testing
---
 app/Http/Controllers/ToolController.php |  11 +
 resources/views/home.blade.php          |   5 +
 resources/views/tools/diff.blade.php    | 336 ++++++++++++++++++++++++
 routes/web.php                          |   2 +
 tests/Feature/WebRoutesTest.php         |  31 ++-
 5 files changed, 380 insertions(+), 5 deletions(-)
 create mode 100644 resources/views/tools/diff.blade.php

diff --git a/app/Http/Controllers/ToolController.php b/app/Http/Controllers/ToolController.php
index 0534827..d0a6454 100644
--- a/app/Http/Controllers/ToolController.php
+++ b/app/Http/Controllers/ToolController.php
@@ -141,6 +141,12 @@ public function index(): View
                 'route' => 'tools.timestamp',
                 'icon' => 'timestamp',
             ],
+            [
+                'name' => 'Diff Checker',
+                'description' => 'Compare two texts and highlight differences',
+                'route' => 'tools.diff',
+                'icon' => 'diff',
+            ],
         ];
 
         return view('home', compact('tools'));
@@ -255,4 +261,9 @@ public function timestamp(): View
     {
         return view('tools.timestamp');
     }
+
+    public function diff(): View
+    {
+        return view('tools.diff');
+    }
 }
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index 71ea7a4..4e1851a 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -146,6 +146,11 @@
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                         </svg>
                         @break
+                    @case('diff')
+                        <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"/>
+                        </svg>
+                        @break
                 @endswitch
             </div>
             <div class="flex-1 min-w-0">
diff --git a/resources/views/tools/diff.blade.php b/resources/views/tools/diff.blade.php
new file mode 100644
index 0000000..3b2869c
--- /dev/null
+++ b/resources/views/tools/diff.blade.php
@@ -0,0 +1,336 @@
+@extends('layouts.app')
+
+@section('title', 'Diff Checker - Compare Text Online | Dev Tools')
+@section('meta_description', 'Free online diff checker. Compare two texts side by side, highlight differences, and see additions, deletions, and changes. Perfect for code review.')
+@section('meta_keywords', 'diff checker, text compare, diff tool, compare files, code diff, text difference, online diff')
+
+@push('schema')
+<script type="application/ld+json">
+{
+    "@@context": "https://schema.org",
+    "@@type": "SoftwareApplication",
+    "name": "Diff Checker",
+    "description": "Compare two texts and highlight differences",
+    "url": "{{ route('tools.diff') }}",
+    "applicationCategory": "DeveloperApplication",
+    "operatingSystem": "Any",
+    "offers": {
+        "@@type": "Offer",
+        "price": "0",
+        "priceCurrency": "USD"
+    },
+    "author": {
+        "@@type": "Person",
+        "name": "Ghabri Djalel"
+    }
+}
+</script>
+@endpush
+
+@section('content')
+<div x-data="diffChecker()" class="space-y-6">
+    <div class="flex items-center justify-between">
+        <div>
+            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Diff Checker</h1>
+            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Compare two texts and highlight differences</p>
+        </div>
+        <a href="{{ route('home') }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline">&larr; Back</a>
+    </div>
+
+    <!-- Input Section -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+            <div class="flex items-center justify-between mb-2">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Original Text</label>
+                <button
+                    @click="original = ''; compare()"
+                    class="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                >
+                    Clear
+                </button>
+            </div>
+            <textarea
+                x-model="original"
+                class="textarea-code w-full h-48 p-3 border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 font-mono text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent resize-none"
+                placeholder="Paste original text here..."
+            ></textarea>
+        </div>
+
+        <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+            <div class="flex items-center justify-between mb-2">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Modified Text</label>
+                <button
+                    @click="modified = ''; compare()"
+                    class="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                >
+                    Clear
+                </button>
+            </div>
+            <textarea
+                x-model="modified"
+                class="textarea-code w-full h-48 p-3 border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 font-mono text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent resize-none"
+                placeholder="Paste modified text here..."
+            ></textarea>
+        </div>
+    </div>
+
+    <!-- Actions -->
+    <div class="flex flex-wrap items-center justify-between gap-4">
+        <div class="flex items-center gap-4">
+            <button
+                @click="compare()"
+                class="px-6 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-lg transition-colors"
+            >
+                Compare
+            </button>
+            <button
+                @click="swap()"
+                class="px-4 py-2 bg-gray-100 dark:bg-dark-border hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 font-medium rounded-lg transition-colors"
+            >
+                Swap
+            </button>
+            <button
+                @click="loadSample()"
+                class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline"
+            >
+                Load sample
+            </button>
+        </div>
+
+        <div class="flex items-center gap-2">
+            <label class="text-sm text-gray-600 dark:text-gray-400">Ignore:</label>
+            <label class="flex items-center gap-1 text-sm text-gray-700 dark:text-gray-300">
+                <input type="checkbox" x-model="ignoreWhitespace" @change="compare()" class="rounded border-gray-300 dark:border-dark-border text-indigo-600 focus:ring-indigo-500">
+                Whitespace
+            </label>
+            <label class="flex items-center gap-1 text-sm text-gray-700 dark:text-gray-300">
+                <input type="checkbox" x-model="ignoreCase" @change="compare()" class="rounded border-gray-300 dark:border-dark-border text-indigo-600 focus:ring-indigo-500">
+                Case
+            </label>
+        </div>
+    </div>
+
+    <!-- Stats -->
+    <div x-show="hasCompared" class="flex flex-wrap gap-4">
+        <div class="flex items-center gap-2 px-3 py-1.5 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-lg text-sm">
+            <span class="font-medium" x-text="stats.added"></span> added
+        </div>
+        <div class="flex items-center gap-2 px-3 py-1.5 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 rounded-lg text-sm">
+            <span class="font-medium" x-text="stats.removed"></span> removed
+        </div>
+        <div class="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-dark-border text-gray-700 dark:text-gray-300 rounded-lg text-sm">
+            <span class="font-medium" x-text="stats.unchanged"></span> unchanged
+        </div>
+    </div>
+
+    <!-- Diff Output -->
+    <div x-show="hasCompared" class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border overflow-hidden">
+        <div class="grid grid-cols-2 border-b border-gray-200 dark:border-dark-border">
+            <div class="px-4 py-2 bg-gray-50 dark:bg-dark-bg text-sm font-medium text-gray-700 dark:text-gray-300 border-r border-gray-200 dark:border-dark-border">
+                Original
+            </div>
+            <div class="px-4 py-2 bg-gray-50 dark:bg-dark-bg text-sm font-medium text-gray-700 dark:text-gray-300">
+                Modified
+            </div>
+        </div>
+        <div class="overflow-auto max-h-[500px]">
+            <div class="grid grid-cols-2 font-mono text-sm">
+                <!-- Original side -->
+                <div class="border-r border-gray-200 dark:border-dark-border">
+                    <template x-for="(line, index) in diffResult.left" :key="'left-' + index">
+                        <div
+                            class="flex"
+                            :class="{
+                                'bg-red-100 dark:bg-red-900/30': line.type === 'removed',
+                                'bg-gray-50 dark:bg-dark-bg': line.type === 'unchanged'
+                            }"
+                        >
+                            <span class="w-12 flex-shrink-0 px-2 py-0.5 text-right text-gray-400 dark:text-gray-500 select-none border-r border-gray-200 dark:border-dark-border" x-text="line.lineNum || ''"></span>
+                            <span class="w-6 flex-shrink-0 px-1 py-0.5 text-center select-none" :class="line.type === 'removed' ? 'text-red-600 dark:text-red-400' : 'text-gray-300 dark:text-gray-600'" x-text="line.type === 'removed' ? '-' : ''"></span>
+                            <pre class="flex-1 px-2 py-0.5 whitespace-pre-wrap break-all" :class="line.type === 'removed' ? 'text-red-800 dark:text-red-200' : 'text-gray-800 dark:text-gray-200'" x-text="line.content"></pre>
+                        </div>
+                    </template>
+                </div>
+                <!-- Modified side -->
+                <div>
+                    <template x-for="(line, index) in diffResult.right" :key="'right-' + index">
+                        <div
+                            class="flex"
+                            :class="{
+                                'bg-green-100 dark:bg-green-900/30': line.type === 'added',
+                                'bg-gray-50 dark:bg-dark-bg': line.type === 'unchanged'
+                            }"
+                        >
+                            <span class="w-12 flex-shrink-0 px-2 py-0.5 text-right text-gray-400 dark:text-gray-500 select-none border-r border-gray-200 dark:border-dark-border" x-text="line.lineNum || ''"></span>
+                            <span class="w-6 flex-shrink-0 px-1 py-0.5 text-center select-none" :class="line.type === 'added' ? 'text-green-600 dark:text-green-400' : 'text-gray-300 dark:text-gray-600'" x-text="line.type === 'added' ? '+' : ''"></span>
+                            <pre class="flex-1 px-2 py-0.5 whitespace-pre-wrap break-all" :class="line.type === 'added' ? 'text-green-800 dark:text-green-200' : 'text-gray-800 dark:text-gray-200'" x-text="line.content"></pre>
+                        </div>
+                    </template>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Empty State -->
+    <div x-show="!hasCompared" class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-12 text-center">
+        <svg class="w-16 h-16 mx-auto text-gray-300 dark:text-gray-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+        </svg>
+        <p class="text-gray-500 dark:text-gray-400">Enter text in both fields and click Compare to see differences</p>
+    </div>
+</div>
+@endsection
+
+@push('scripts')
+<script>
+function diffChecker() {
+    return {
+        original: '',
+        modified: '',
+        ignoreWhitespace: false,
+        ignoreCase: false,
+        hasCompared: false,
+        diffResult: { left: [], right: [] },
+        stats: { added: 0, removed: 0, unchanged: 0 },
+
+        loadSample() {
+            this.original = `function greet(name) {
+    console.log("Hello, " + name);
+    return true;
+}
+
+const message = "Welcome";
+greet(message);`;
+
+            this.modified = `function greet(name, greeting = "Hello") {
+    console.log(greeting + ", " + name + "!");
+    return true;
+}
+
+const message = "Welcome";
+const customGreeting = "Hi";
+greet(message, customGreeting);`;
+
+            this.compare();
+        },
+
+        swap() {
+            const temp = this.original;
+            this.original = this.modified;
+            this.modified = temp;
+            if (this.hasCompared) {
+                this.compare();
+            }
+        },
+
+        compare() {
+            const originalLines = this.original.split('\n');
+            const modifiedLines = this.modified.split('\n');
+
+            const processLine = (line) => {
+                let processed = line;
+                if (this.ignoreWhitespace) {
+                    processed = processed.replace(/\s+/g, ' ').trim();
+                }
+                if (this.ignoreCase) {
+                    processed = processed.toLowerCase();
+                }
+                return processed;
+            };
+
+            // Simple LCS-based diff
+            const diff = this.computeDiff(
+                originalLines.map(processLine),
+                modifiedLines.map(processLine),
+                originalLines,
+                modifiedLines
+            );
+
+            this.diffResult = diff;
+            this.hasCompared = true;
+
+            // Calculate stats
+            this.stats = {
+                added: diff.right.filter(l => l.type === 'added').length,
+                removed: diff.left.filter(l => l.type === 'removed').length,
+                unchanged: diff.left.filter(l => l.type === 'unchanged').length
+            };
+        },
+
+        computeDiff(processedOrig, processedMod, originalLines, modifiedLines) {
+            const m = processedOrig.length;
+            const n = processedMod.length;
+
+            // Build LCS table
+            const dp = Array(m + 1).fill(null).map(() => Array(n + 1).fill(0));
+            for (let i = 1; i <= m; i++) {
+                for (let j = 1; j <= n; j++) {
+                    if (processedOrig[i - 1] === processedMod[j - 1]) {
+                        dp[i][j] = dp[i - 1][j - 1] + 1;
+                    } else {
+                        dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
+                    }
+                }
+            }
+
+            // Backtrack to find diff
+            const left = [];
+            const right = [];
+            let i = m, j = n;
+            let leftLineNum = m;
+            let rightLineNum = n;
+
+            const result = [];
+
+            while (i > 0 || j > 0) {
+                if (i > 0 && j > 0 && processedOrig[i - 1] === processedMod[j - 1]) {
+                    result.unshift({
+                        type: 'unchanged',
+                        leftContent: originalLines[i - 1],
+                        rightContent: modifiedLines[j - 1],
+                        leftNum: i,
+                        rightNum: j
+                    });
+                    i--;
+                    j--;
+                } else if (j > 0 && (i === 0 || dp[i][j - 1] >= dp[i - 1][j])) {
+                    result.unshift({
+                        type: 'added',
+                        leftContent: '',
+                        rightContent: modifiedLines[j - 1],
+                        leftNum: null,
+                        rightNum: j
+                    });
+                    j--;
+                } else {
+                    result.unshift({
+                        type: 'removed',
+                        leftContent: originalLines[i - 1],
+                        rightContent: '',
+                        leftNum: i,
+                        rightNum: null
+                    });
+                    i--;
+                }
+            }
+
+            // Convert to left/right format
+            for (const item of result) {
+                if (item.type === 'unchanged') {
+                    left.push({ type: 'unchanged', content: item.leftContent, lineNum: item.leftNum });
+                    right.push({ type: 'unchanged', content: item.rightContent, lineNum: item.rightNum });
+                } else if (item.type === 'removed') {
+                    left.push({ type: 'removed', content: item.leftContent, lineNum: item.leftNum });
+                    right.push({ type: 'empty', content: '', lineNum: null });
+                } else if (item.type === 'added') {
+                    left.push({ type: 'empty', content: '', lineNum: null });
+                    right.push({ type: 'added', content: item.rightContent, lineNum: item.rightNum });
+                }
+            }
+
+            return { left, right };
+        }
+    };
+}
+</script>
+@endpush
diff --git a/routes/web.php b/routes/web.php
index b2c2d4f..63e04f2 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -28,6 +28,7 @@
     Route::get('/cron', [ToolController::class, 'cron'])->name('cron');
     Route::get('/jwt', [ToolController::class, 'jwt'])->name('jwt');
     Route::get('/timestamp', [ToolController::class, 'timestamp'])->name('timestamp');
+    Route::get('/diff', [ToolController::class, 'diff'])->name('diff');
 });
 
 // Static Pages
@@ -60,6 +61,7 @@
         ['loc' => route('tools.cron'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('tools.jwt'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('tools.timestamp'), 'priority' => '0.8', 'changefreq' => 'monthly'],
+        ['loc' => route('tools.diff'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('about'), 'priority' => '0.5', 'changefreq' => 'monthly'],
         ['loc' => route('privacy'), 'priority' => '0.3', 'changefreq' => 'yearly'],
     ];
diff --git a/tests/Feature/WebRoutesTest.php b/tests/Feature/WebRoutesTest.php
index 7fe2697..d99e52e 100644
--- a/tests/Feature/WebRoutesTest.php
+++ b/tests/Feature/WebRoutesTest.php
@@ -40,6 +40,7 @@ public function test_home_page_displays_all_tools(): void
         $response->assertSee('Cron Parser');
         $response->assertSee('JWT Decoder');
         $response->assertSee('Timestamp Converter');
+        $response->assertSee('Diff Checker');
     }
 
     public function test_home_page_has_tool_links(): void
@@ -68,6 +69,7 @@ public function test_home_page_has_tool_links(): void
         $response->assertSee('href="' . route('tools.cron') . '"', false);
         $response->assertSee('href="' . route('tools.jwt') . '"', false);
         $response->assertSee('href="' . route('tools.timestamp') . '"', false);
+        $response->assertSee('href="' . route('tools.diff') . '"', false);
     }
 
     public function test_csv_tool_page_loads(): void
@@ -495,9 +497,28 @@ public function test_timestamp_tool_has_required_elements(): void
         $response->assertSee('Current Unix Timestamp');
     }
 
+    public function test_diff_tool_page_loads(): void
+    {
+        $response = $this->get('/tools/diff');
+
+        $response->assertStatus(200);
+        $response->assertSee('Diff Checker');
+        $response->assertSee('Compare two texts and highlight differences');
+    }
+
+    public function test_diff_tool_has_required_elements(): void
+    {
+        $response = $this->get('/tools/diff');
+
+        $response->assertStatus(200);
+        $response->assertSee('Original Text');
+        $response->assertSee('Modified Text');
+        $response->assertSee('Compare');
+    }
+
     public function test_all_pages_have_navigation(): void
     {
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt', '/tools/timestamp'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt', '/tools/timestamp', '/tools/diff'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -509,7 +530,7 @@ public function test_all_pages_have_navigation(): void
 
     public function test_all_pages_have_theme_toggle(): void
     {
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt', '/tools/timestamp'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt', '/tools/timestamp', '/tools/diff'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -522,7 +543,7 @@ public function test_all_pages_have_theme_toggle(): void
     public function test_all_pages_load_vite_assets(): void
     {
         // Code editor uses standalone template without Vite
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt', '/tools/timestamp'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt', '/tools/timestamp', '/tools/diff'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -535,7 +556,7 @@ public function test_all_pages_load_vite_assets(): void
     public function test_all_tool_pages_have_back_link(): void
     {
         // Code editor uses standalone template with home link instead of back
-        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt', '/tools/timestamp'];
+        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt', '/tools/timestamp', '/tools/diff'];
 
         foreach ($toolPages as $page) {
             $response = $this->get($page);
@@ -588,7 +609,7 @@ public function test_api_routes_reject_get_requests(): void
 
     public function test_pages_have_csrf_token(): void
     {
-        $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt', '/tools/timestamp'];
+        $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt', '/tools/timestamp', '/tools/diff'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);

From df918947dc0d55e5947bcc439a19f2d46e710ade Mon Sep 17 00:00:00 2001
From: jalel <ghabri.djalel@gmail.com>
Date: Mon, 15 Dec 2025 01:09:08 +0000
Subject: [PATCH 20/23] Prepare v1.2.0 release

- Update CHANGELOG.md with 13 new tools and enhancements
- Update version to v1.2.0 in footer
---
 CHANGELOG.md                          | 94 +++++++++++++++++++++++++++
 resources/views/layouts/app.blade.php |  2 +-
 2 files changed, 95 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 187aaba..4a98f09 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,99 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.2.0] - 2025-12-15
+
+### Added
+
+- **Regex Tester**: Live regular expression testing with match highlighting
+  - Real-time pattern matching with visual feedback
+  - Support for global, case-insensitive, and multiline flags
+  - Match groups extraction and display
+
+- **JWT Decoder**: Decode and inspect JSON Web Tokens
+  - Header and payload extraction
+  - Expiration time validation
+  - Signature verification status
+
+- **Timestamp Converter**: Unix timestamp to human-readable date conversion
+  - Bidirectional conversion (timestamp ↔ date)
+  - Multiple timezone support
+  - Current timestamp display
+
+- **Diff Checker**: Side-by-side text comparison tool
+  - Line-by-line diff visualization
+  - Added/removed line highlighting
+  - Unified and split view modes
+
+- **Cron Expression Parser**: Parse and explain cron expressions
+  - Human-readable cron schedule explanation
+  - Next execution times preview
+  - Common cron presets
+
+- **Lorem Ipsum Generator**: Generate placeholder text
+  - Paragraphs, sentences, or words generation
+  - Configurable output length
+  - Start with "Lorem ipsum" option
+
+- **Password Generator**: Generate secure random passwords
+  - Configurable length and character sets
+  - Uppercase, lowercase, numbers, symbols options
+  - Password strength indicator
+
+- **Text Case Converter**: Convert between 13 text case formats
+  - lowercase, UPPERCASE, Title Case, Sentence case
+  - camelCase, PascalCase, snake_case, kebab-case
+  - CONSTANT_CASE, dot.case, path/case, and more
+
+- **HTML Entity Encoder**: Encode and decode HTML entities
+  - Named entities (e.g., &amp;, &lt;, &gt;)
+  - Numeric entities support
+  - Bulk encoding/decoding
+
+- **QR Code Generator**: Generate QR codes from text or URLs
+  - Customizable size and error correction
+  - Download as PNG
+  - Real-time preview
+
+- **Color Picker**: Color format converter
+  - HEX, RGB, HSL, CMYK formats
+  - Visual color picker
+  - Color palette suggestions
+
+- **Slug Generator**: Create URL-friendly slugs from text
+  - Configurable separator (hyphen, underscore)
+  - Unicode transliteration
+  - Length limiting option
+
+- **Base Converter**: Number base conversion tool
+  - Binary, Octal, Decimal, Hexadecimal
+  - Bit visualization
+  - Instant conversion between bases
+
+### Enhanced
+
+- **Code Editor**: Major enhancements
+  - Dynamic tab system with add/close functionality
+  - Console output capture (log, info, warn, error)
+  - Keyboard shortcuts help modal
+  - Word wrap and minimap toggle controls
+  - Download all files as ZIP
+
+- **JSON Parser**: Added interactive tree view
+  - Collapsible tree structure
+  - Node type indicators
+  - Copy path to clipboard
+
+- **Theme Toggle**: Redesigned with animated day/night scene
+  - Smooth transition animations
+  - Sun/moon visual elements
+
+### Other
+
+- Added Privacy Policy page
+- Added About page
+- Integrated Google Analytics 4 tracking
+
 ## [1.1.0] - 2024-11-30
 
 ### Added
@@ -85,5 +178,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - RESTful API endpoints for all tools
 - 146 tests with 386 assertions
 
+[1.2.0]: https://github.com/GhDj/dev-tools/releases/tag/v1.2.0
 [1.1.0]: https://github.com/GhDj/dev-tools/releases/tag/v1.1.0
 [1.0.0]: https://github.com/GhDj/dev-tools/releases/tag/v1.0.0
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 4baa0d6..ca2ea7e 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -126,7 +126,7 @@ class="absolute top-1 w-6 h-6 rounded-full shadow-lg transition-all duration-500
                     <a href="{{ route('about') }}" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">About</a>
                     <a href="{{ route('privacy') }}" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Privacy</a>
                     <a href="https://github.com/GhDj/dev-tools" target="_blank" rel="noopener noreferrer" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">GitHub</a>
-                    <span class="text-gray-500 dark:text-gray-500">v1.1.0</span>
+                    <span class="text-gray-500 dark:text-gray-500">v1.2.0</span>
                 </div>
             </div>
         </div>

From 9f406f9eaf9e5b3e8592d6881cf6c08f2d2c3503 Mon Sep 17 00:00:00 2001
From: jalel <ghabri.djalel@gmail.com>
Date: Mon, 15 Dec 2025 09:30:58 +0000
Subject: [PATCH 21/23] Fix PHP parse error in code editor - bump to v1.2.1

---
 CHANGELOG.md                                | 7 +++++++
 resources/views/layouts/app.blade.php       | 2 +-
 resources/views/tools/code-editor.blade.php | 2 +-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4a98f09..0566d58 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.2.1] - 2025-12-15
+
+### Fixed
+
+- Code Editor: Fix PHP parse error when loading the page (`<?php` string in JavaScript was interpreted as PHP tag)
+
 ## [1.2.0] - 2025-12-15
 
 ### Added
@@ -178,6 +184,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - RESTful API endpoints for all tools
 - 146 tests with 386 assertions
 
+[1.2.1]: https://github.com/GhDj/dev-tools/releases/tag/v1.2.1
 [1.2.0]: https://github.com/GhDj/dev-tools/releases/tag/v1.2.0
 [1.1.0]: https://github.com/GhDj/dev-tools/releases/tag/v1.1.0
 [1.0.0]: https://github.com/GhDj/dev-tools/releases/tag/v1.0.0
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index ca2ea7e..0238e01 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -126,7 +126,7 @@ class="absolute top-1 w-6 h-6 rounded-full shadow-lg transition-all duration-500
                     <a href="{{ route('about') }}" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">About</a>
                     <a href="{{ route('privacy') }}" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Privacy</a>
                     <a href="https://github.com/GhDj/dev-tools" target="_blank" rel="noopener noreferrer" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">GitHub</a>
-                    <span class="text-gray-500 dark:text-gray-500">v1.2.0</span>
+                    <span class="text-gray-500 dark:text-gray-500">v1.2.1</span>
                 </div>
             </div>
         </div>
diff --git a/resources/views/tools/code-editor.blade.php b/resources/views/tools/code-editor.blade.php
index 731ebfa..09699b4 100644
--- a/resources/views/tools/code-editor.blade.php
+++ b/resources/views/tools/code-editor.blade.php
@@ -575,7 +575,7 @@ function getDefaultContent(language) {
             case 'css': return '/* Styles */\n';
             case 'javascript': return '// JavaScript\n';
             case 'json': return '{\n    \n}';
-            case 'php': return '<?php\n\n';
+            case 'php': return '<' + '?php\n\n';
             case 'sql': return '-- SQL Query\n';
             default: return '';
         }

From 09dff085088047e04f8b4becaa13b2b9878091e3 Mon Sep 17 00:00:00 2001
From: jalel <ghabri.djalel@gmail.com>
Date: Mon, 15 Dec 2025 10:03:22 +0000
Subject: [PATCH 22/23] Add Sort Lines tool

---
 app/Http/Controllers/ToolController.php    |  11 +
 resources/views/home.blade.php             |   5 +
 resources/views/tools/sort-lines.blade.php | 351 +++++++++++++++++++++
 routes/web.php                             |   2 +
 tests/Feature/WebRoutesTest.php            |  33 +-
 5 files changed, 397 insertions(+), 5 deletions(-)
 create mode 100644 resources/views/tools/sort-lines.blade.php

diff --git a/app/Http/Controllers/ToolController.php b/app/Http/Controllers/ToolController.php
index d0a6454..682b4c9 100644
--- a/app/Http/Controllers/ToolController.php
+++ b/app/Http/Controllers/ToolController.php
@@ -147,6 +147,12 @@ public function index(): View
                 'route' => 'tools.diff',
                 'icon' => 'diff',
             ],
+            [
+                'name' => 'Sort Lines',
+                'description' => 'Sort, deduplicate, reverse, and shuffle lines',
+                'route' => 'tools.sort-lines',
+                'icon' => 'sort',
+            ],
         ];
 
         return view('home', compact('tools'));
@@ -266,4 +272,9 @@ public function diff(): View
     {
         return view('tools.diff');
     }
+
+    public function sortLines(): View
+    {
+        return view('tools.sort-lines');
+    }
 }
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index 4e1851a..972ddb3 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -151,6 +151,11 @@
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"/>
                         </svg>
                         @break
+                    @case('sort')
+                        <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"/>
+                        </svg>
+                        @break
                 @endswitch
             </div>
             <div class="flex-1 min-w-0">
diff --git a/resources/views/tools/sort-lines.blade.php b/resources/views/tools/sort-lines.blade.php
new file mode 100644
index 0000000..ba2cd1d
--- /dev/null
+++ b/resources/views/tools/sort-lines.blade.php
@@ -0,0 +1,351 @@
+@extends('layouts.app')
+
+@section('title', 'Sort Lines - Sort, Dedupe, Reverse, Shuffle Text | Dev Tools')
+@section('meta_description', 'Free online line sorter. Sort lines alphabetically, numerically, remove duplicates, reverse order, or shuffle randomly. Fast and private - no data stored.')
+@section('meta_keywords', 'sort lines, line sorter, sort text, remove duplicates, dedupe lines, reverse lines, shuffle lines, alphabetical sort, natural sort')
+
+@push('schema')
+<script type="application/ld+json">
+{
+    "@@context": "https://schema.org",
+    "@@type": "SoftwareApplication",
+    "name": "Sort Lines",
+    "description": "Sort, deduplicate, reverse, and shuffle text lines",
+    "url": "{{ route('tools.sort-lines') }}",
+    "applicationCategory": "DeveloperApplication",
+    "operatingSystem": "Any",
+    "offers": {
+        "@@type": "Offer",
+        "price": "0",
+        "priceCurrency": "USD"
+    },
+    "author": {
+        "@@type": "Person",
+        "name": "Ghabri Djalel"
+    }
+}
+</script>
+@endpush
+
+@section('content')
+<div x-data="sortLines()" class="space-y-6">
+    <div class="flex items-center justify-between">
+        <div>
+            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Sort Lines</h1>
+            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Sort, deduplicate, reverse, and shuffle text lines</p>
+        </div>
+        <a href="{{ route('home') }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline">&larr; Back</a>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
+        <div class="lg:col-span-3 space-y-4">
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <div class="flex items-center justify-between mb-2">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Input Text</label>
+                    <div class="flex items-center gap-3">
+                        <button
+                            @click="loadSample()"
+                            class="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                        >
+                            Sample
+                        </button>
+                        <button
+                            @click="clear()"
+                            class="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                        >
+                            Clear
+                        </button>
+                    </div>
+                </div>
+                <textarea
+                    x-model="input"
+                    class="w-full h-48 p-3 border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent resize-none font-mono text-sm"
+                    placeholder="Enter text with multiple lines...&#10;Each line will be sorted separately"
+                ></textarea>
+                <div class="mt-2 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
+                    <div class="flex gap-4">
+                        <span><span x-text="stats.lines"></span> lines</span>
+                        <span><span x-text="stats.unique"></span> unique</span>
+                        <span><span x-text="stats.duplicates"></span> duplicates</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <div class="flex items-center justify-between mb-2">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Output</label>
+                    <button
+                        @click="copy($event.currentTarget)"
+                        :disabled="!output"
+                        class="text-xs text-indigo-600 dark:text-indigo-400 hover:underline disabled:opacity-50 disabled:no-underline"
+                    >
+                        Copy to clipboard
+                    </button>
+                </div>
+                <textarea
+                    x-model="output"
+                    readonly
+                    class="w-full h-48 p-3 border border-gray-300 dark:border-dark-border rounded-lg bg-gray-50 dark:bg-dark-bg text-gray-900 dark:text-gray-100 resize-none font-mono text-sm"
+                    placeholder="Sorted output will appear here..."
+                ></textarea>
+                <div class="mt-2 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
+                    <div class="flex gap-4">
+                        <span><span x-text="outputStats.lines"></span> lines</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="space-y-4">
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-3">Sort Options</h2>
+                <div class="space-y-2">
+                    <template x-for="action in sortActions" :key="action.id">
+                        <button
+                            @click="sort(action.id)"
+                            class="w-full text-left p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-dark-bg transition-colors border border-transparent"
+                            :class="activeAction === action.id ? 'bg-indigo-50 dark:bg-indigo-900/20 border-indigo-200 dark:border-indigo-800' : ''"
+                        >
+                            <div class="font-medium text-sm text-gray-900 dark:text-white" x-text="action.name"></div>
+                            <div class="text-xs text-gray-500 dark:text-gray-400" x-text="action.desc"></div>
+                        </button>
+                    </template>
+                </div>
+            </div>
+
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-3">Options</h2>
+                <div class="space-y-3">
+                    <label class="flex items-center gap-2 cursor-pointer">
+                        <input type="checkbox" x-model="options.caseSensitive" class="rounded border-gray-300 dark:border-dark-border text-indigo-600 focus:ring-indigo-500 dark:bg-dark-bg">
+                        <span class="text-sm text-gray-700 dark:text-gray-300">Case sensitive</span>
+                    </label>
+                    <label class="flex items-center gap-2 cursor-pointer">
+                        <input type="checkbox" x-model="options.trimWhitespace" class="rounded border-gray-300 dark:border-dark-border text-indigo-600 focus:ring-indigo-500 dark:bg-dark-bg">
+                        <span class="text-sm text-gray-700 dark:text-gray-300">Trim whitespace</span>
+                    </label>
+                    <label class="flex items-center gap-2 cursor-pointer">
+                        <input type="checkbox" x-model="options.removeEmpty" class="rounded border-gray-300 dark:border-dark-border text-indigo-600 focus:ring-indigo-500 dark:bg-dark-bg">
+                        <span class="text-sm text-gray-700 dark:text-gray-300">Remove empty lines</span>
+                    </label>
+                </div>
+            </div>
+
+            <div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
+                <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-3">Quick Actions</h2>
+                <div class="grid grid-cols-2 gap-2">
+                    <button
+                        @click="sort('az')"
+                        class="p-2 text-xs font-medium bg-gray-100 dark:bg-dark-bg text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+                    >
+                        A-Z
+                    </button>
+                    <button
+                        @click="sort('za')"
+                        class="p-2 text-xs font-medium bg-gray-100 dark:bg-dark-bg text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+                    >
+                        Z-A
+                    </button>
+                    <button
+                        @click="sort('dedupe')"
+                        class="p-2 text-xs font-medium bg-gray-100 dark:bg-dark-bg text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+                    >
+                        Dedupe
+                    </button>
+                    <button
+                        @click="sort('shuffle')"
+                        class="p-2 text-xs font-medium bg-gray-100 dark:bg-dark-bg text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+                    >
+                        Shuffle
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
+
+@push('scripts')
+<script>
+function sortLines() {
+    return {
+        input: '',
+        output: '',
+        activeAction: null,
+        options: {
+            caseSensitive: false,
+            trimWhitespace: true,
+            removeEmpty: true
+        },
+        sortActions: [
+            { id: 'az', name: 'Sort A-Z', desc: 'Alphabetical ascending' },
+            { id: 'za', name: 'Sort Z-A', desc: 'Alphabetical descending' },
+            { id: 'natural', name: 'Natural Sort', desc: 'Smart alphanumeric (file1, file2, file10)' },
+            { id: 'numeric', name: 'Sort Numeric', desc: 'By number value (ascending)' },
+            { id: 'numeric-desc', name: 'Sort Numeric Desc', desc: 'By number value (descending)' },
+            { id: 'length', name: 'Sort by Length', desc: 'Shortest to longest' },
+            { id: 'length-desc', name: 'Sort by Length Desc', desc: 'Longest to shortest' },
+            { id: 'reverse', name: 'Reverse Lines', desc: 'Flip line order' },
+            { id: 'dedupe', name: 'Remove Duplicates', desc: 'Keep unique lines only' },
+            { id: 'shuffle', name: 'Shuffle', desc: 'Randomize line order' },
+        ],
+
+        get stats() {
+            const lines = this.getLines(this.input);
+            const uniqueSet = new Set(lines.map(l => this.options.caseSensitive ? l : l.toLowerCase()));
+            return {
+                lines: lines.length,
+                unique: uniqueSet.size,
+                duplicates: lines.length - uniqueSet.size
+            };
+        },
+
+        get outputStats() {
+            const lines = this.output ? this.output.split('\n').filter(l => l.length > 0) : [];
+            return {
+                lines: lines.length
+            };
+        },
+
+        getLines(text) {
+            let lines = text.split('\n');
+
+            if (this.options.trimWhitespace) {
+                lines = lines.map(l => l.trim());
+            }
+
+            if (this.options.removeEmpty) {
+                lines = lines.filter(l => l.length > 0);
+            }
+
+            return lines;
+        },
+
+        sort(type) {
+            this.activeAction = type;
+            let lines = this.getLines(this.input);
+
+            if (lines.length === 0) {
+                this.output = '';
+                return;
+            }
+
+            switch (type) {
+                case 'az':
+                    lines = this.sortAlpha(lines, true);
+                    break;
+                case 'za':
+                    lines = this.sortAlpha(lines, false);
+                    break;
+                case 'natural':
+                    lines = this.sortNatural(lines);
+                    break;
+                case 'numeric':
+                    lines = this.sortNumeric(lines, true);
+                    break;
+                case 'numeric-desc':
+                    lines = this.sortNumeric(lines, false);
+                    break;
+                case 'length':
+                    lines = this.sortByLength(lines, true);
+                    break;
+                case 'length-desc':
+                    lines = this.sortByLength(lines, false);
+                    break;
+                case 'reverse':
+                    lines = lines.reverse();
+                    break;
+                case 'dedupe':
+                    lines = this.removeDuplicates(lines);
+                    break;
+                case 'shuffle':
+                    lines = this.shuffleArray(lines);
+                    break;
+            }
+
+            this.output = lines.join('\n');
+        },
+
+        sortAlpha(lines, ascending) {
+            return [...lines].sort((a, b) => {
+                const compareA = this.options.caseSensitive ? a : a.toLowerCase();
+                const compareB = this.options.caseSensitive ? b : b.toLowerCase();
+                const result = compareA.localeCompare(compareB);
+                return ascending ? result : -result;
+            });
+        },
+
+        sortNatural(lines) {
+            return [...lines].sort((a, b) => {
+                const compareA = this.options.caseSensitive ? a : a.toLowerCase();
+                const compareB = this.options.caseSensitive ? b : b.toLowerCase();
+                return compareA.localeCompare(compareB, undefined, { numeric: true, sensitivity: 'base' });
+            });
+        },
+
+        sortNumeric(lines, ascending) {
+            return [...lines].sort((a, b) => {
+                const numA = parseFloat(a.replace(/[^\d.-]/g, '')) || 0;
+                const numB = parseFloat(b.replace(/[^\d.-]/g, '')) || 0;
+                return ascending ? numA - numB : numB - numA;
+            });
+        },
+
+        sortByLength(lines, ascending) {
+            return [...lines].sort((a, b) => {
+                return ascending ? a.length - b.length : b.length - a.length;
+            });
+        },
+
+        removeDuplicates(lines) {
+            if (this.options.caseSensitive) {
+                return [...new Set(lines)];
+            }
+            const seen = new Map();
+            return lines.filter(line => {
+                const key = line.toLowerCase();
+                if (seen.has(key)) return false;
+                seen.set(key, true);
+                return true;
+            });
+        },
+
+        shuffleArray(array) {
+            const shuffled = [...array];
+            for (let i = shuffled.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1));
+                [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+            }
+            return shuffled;
+        },
+
+        copy(button) {
+            if (this.output) {
+                DevTools.copyToClipboard(this.output, button);
+            }
+        },
+
+        clear() {
+            this.input = '';
+            this.output = '';
+            this.activeAction = null;
+        },
+
+        loadSample() {
+            this.input = `banana
+Apple
+cherry
+apple
+Date
+banana
+Fig
+grape
+Cherry
+date`;
+            this.output = '';
+            this.activeAction = null;
+        }
+    };
+}
+</script>
+@endpush
diff --git a/routes/web.php b/routes/web.php
index 63e04f2..de71750 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -29,6 +29,7 @@
     Route::get('/jwt', [ToolController::class, 'jwt'])->name('jwt');
     Route::get('/timestamp', [ToolController::class, 'timestamp'])->name('timestamp');
     Route::get('/diff', [ToolController::class, 'diff'])->name('diff');
+    Route::get('/sort-lines', [ToolController::class, 'sortLines'])->name('sort-lines');
 });
 
 // Static Pages
@@ -62,6 +63,7 @@
         ['loc' => route('tools.jwt'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('tools.timestamp'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('tools.diff'), 'priority' => '0.8', 'changefreq' => 'monthly'],
+        ['loc' => route('tools.sort-lines'), 'priority' => '0.8', 'changefreq' => 'monthly'],
         ['loc' => route('about'), 'priority' => '0.5', 'changefreq' => 'monthly'],
         ['loc' => route('privacy'), 'priority' => '0.3', 'changefreq' => 'yearly'],
     ];
diff --git a/tests/Feature/WebRoutesTest.php b/tests/Feature/WebRoutesTest.php
index d99e52e..b4c1203 100644
--- a/tests/Feature/WebRoutesTest.php
+++ b/tests/Feature/WebRoutesTest.php
@@ -41,6 +41,7 @@ public function test_home_page_displays_all_tools(): void
         $response->assertSee('JWT Decoder');
         $response->assertSee('Timestamp Converter');
         $response->assertSee('Diff Checker');
+        $response->assertSee('Sort Lines');
     }
 
     public function test_home_page_has_tool_links(): void
@@ -70,6 +71,7 @@ public function test_home_page_has_tool_links(): void
         $response->assertSee('href="' . route('tools.jwt') . '"', false);
         $response->assertSee('href="' . route('tools.timestamp') . '"', false);
         $response->assertSee('href="' . route('tools.diff') . '"', false);
+        $response->assertSee('href="' . route('tools.sort-lines') . '"', false);
     }
 
     public function test_csv_tool_page_loads(): void
@@ -516,9 +518,30 @@ public function test_diff_tool_has_required_elements(): void
         $response->assertSee('Compare');
     }
 
+    public function test_sort_lines_page_loads(): void
+    {
+        $response = $this->get('/tools/sort-lines');
+
+        $response->assertStatus(200);
+        $response->assertSee('Sort Lines');
+        $response->assertSee('Sort, deduplicate, reverse, and shuffle text lines');
+    }
+
+    public function test_sort_lines_has_required_elements(): void
+    {
+        $response = $this->get('/tools/sort-lines');
+
+        $response->assertStatus(200);
+        $response->assertSee('Input Text');
+        $response->assertSee('Sort Options');
+        $response->assertSee('Sort A-Z');
+        $response->assertSee('Remove Duplicates');
+        $response->assertSee('Shuffle');
+    }
+
     public function test_all_pages_have_navigation(): void
     {
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt', '/tools/timestamp', '/tools/diff'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt', '/tools/timestamp', '/tools/diff', '/tools/sort-lines'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -530,7 +553,7 @@ public function test_all_pages_have_navigation(): void
 
     public function test_all_pages_have_theme_toggle(): void
     {
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt', '/tools/timestamp', '/tools/diff'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt', '/tools/timestamp', '/tools/diff', '/tools/sort-lines'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -543,7 +566,7 @@ public function test_all_pages_have_theme_toggle(): void
     public function test_all_pages_load_vite_assets(): void
     {
         // Code editor uses standalone template without Vite
-        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt', '/tools/timestamp', '/tools/diff'];
+        $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt', '/tools/timestamp', '/tools/diff', '/tools/sort-lines'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);
@@ -556,7 +579,7 @@ public function test_all_pages_load_vite_assets(): void
     public function test_all_tool_pages_have_back_link(): void
     {
         // Code editor uses standalone template with home link instead of back
-        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt', '/tools/timestamp', '/tools/diff'];
+        $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt', '/tools/timestamp', '/tools/diff', '/tools/sort-lines'];
 
         foreach ($toolPages as $page) {
             $response = $this->get($page);
@@ -609,7 +632,7 @@ public function test_api_routes_reject_get_requests(): void
 
     public function test_pages_have_csrf_token(): void
     {
-        $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt', '/tools/timestamp', '/tools/diff'];
+        $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/base-converter', '/tools/slug-generator', '/tools/color-picker', '/tools/qr-code', '/tools/html-entity', '/tools/text-case', '/tools/password', '/tools/lorem', '/tools/cron', '/tools/jwt', '/tools/timestamp', '/tools/diff', '/tools/sort-lines'];
 
         foreach ($pages as $page) {
             $response = $this->get($page);

From 3d88fe8171b5c3a91b11e7d505ba9f3b660b0d7c Mon Sep 17 00:00:00 2001
From: jalel <ghabri.djalel@gmail.com>
Date: Mon, 15 Dec 2025 10:17:21 +0000
Subject: [PATCH 23/23] Prepare v1.3.0 release

---
 CHANGELOG.md                          | 15 +++++++++++++++
 resources/views/layouts/app.blade.php |  2 +-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0566d58..05b5551 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,20 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.3.0] - 2025-12-15
+
+### Added
+
+- **Sort Lines**: New text line manipulation tool
+  - Sort alphabetically (A-Z, Z-A)
+  - Natural sort for alphanumeric strings (file1, file2, file10)
+  - Numeric sort (ascending/descending)
+  - Sort by line length
+  - Reverse line order
+  - Remove duplicates (dedupe)
+  - Shuffle/randomize lines
+  - Options: case sensitive, trim whitespace, remove empty lines
+
 ## [1.2.1] - 2025-12-15
 
 ### Fixed
@@ -184,6 +198,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - RESTful API endpoints for all tools
 - 146 tests with 386 assertions
 
+[1.3.0]: https://github.com/GhDj/dev-tools/releases/tag/v1.3.0
 [1.2.1]: https://github.com/GhDj/dev-tools/releases/tag/v1.2.1
 [1.2.0]: https://github.com/GhDj/dev-tools/releases/tag/v1.2.0
 [1.1.0]: https://github.com/GhDj/dev-tools/releases/tag/v1.1.0
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 0238e01..31ae7c0 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -126,7 +126,7 @@ class="absolute top-1 w-6 h-6 rounded-full shadow-lg transition-all duration-500
                     <a href="{{ route('about') }}" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">About</a>
                     <a href="{{ route('privacy') }}" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Privacy</a>
                     <a href="https://github.com/GhDj/dev-tools" target="_blank" rel="noopener noreferrer" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">GitHub</a>
-                    <span class="text-gray-500 dark:text-gray-500">v1.2.1</span>
+                    <span class="text-gray-500 dark:text-gray-500">v1.3.0</span>
                 </div>
             </div>
         </div>