diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -3,168 +3,176 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SnapEdit Pro - AI-Powered Screenshot Editor</title>
+    <title>SnapEdit Pro - Advanced Image Editor</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
         
         body {
             font-family: 'Poppins', sans-serif;
-            background-color: #f8fafc;
             margin: 0;
             padding: 0;
             height: 100vh;
             overflow: hidden;
+            background-color: #1a1a1a;
         }
         
-        .gradient-bg {
-            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+        #editorCanvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            cursor: default;
+            transform-origin: 0 0;
         }
         
-        .glass-effect {
-            background: rgba(255, 255, 255, 0.15);
+        .floating-toolbar {
+            position: absolute;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(30, 30, 30, 0.8);
             backdrop-filter: blur(10px);
             -webkit-backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.18);
+            border-radius: 12px;
+            padding: 8px;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+            display: flex;
+            gap: 4px;
+            z-index: 100;
+            user-select: none;
+            transition: all 0.3s ease;
         }
         
-        .enhanced-shadow {
-            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
+        .floating-toolbar.dragging {
+            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
         }
         
-        .tooltip {
-            position: relative;
-            display: inline-block;
+        .tool-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #e0e0e0;
+            background: transparent;
+            border: none;
+            cursor: pointer;
+            transition: all 0.2s ease;
         }
         
-        .tooltip .tooltiptext {
-            visibility: hidden;
-            width: 120px;
-            background-color: #1e293b;
-            color: #fff;
-            text-align: center;
-            border-radius: 6px;
-            padding: 5px;
-            position: absolute;
-            z-index: 1;
-            bottom: 125%;
-            left: 50%;
-            margin-left: -60px;
-            opacity: 0;
-            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-            font-size: 12px;
-            transform: translateY(5px) scale(0.95);
+        .tool-btn:hover {
+            background: rgba(99, 102, 241, 0.2);
+            color: white;
+            transform: translateY(-2px);
         }
         
-        .tooltip:hover .tooltiptext {
-            visibility: visible;
-            opacity: 1;
-            transform: translateY(0) scale(1);
+        .tool-btn.active {
+            background: rgba(99, 102, 241, 0.4);
+            color: white;
+            box-shadow: 0 4px 8px rgba(99, 102, 241, 0.2);
         }
         
-        .canvas-container {
-            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-            border-radius: 12px;
-            overflow: hidden;
-            width: 100%;
-            height: 100%;
-            transition: all 0.3s ease;
+        .tool-btn i {
+            font-size: 16px;
+        }
+        
+        .tool-separator {
+            width: 1px;
+            height: 24px;
+            background: rgba(255, 255, 255, 0.1);
+            margin: 0 4px;
+            align-self: center;
         }
         
-        .sidebar {
+        .floating-properties {
+            position: absolute;
+            top: 80px;
+            right: 20px;
+            background: rgba(30, 30, 30, 0.8);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border-radius: 12px;
+            padding: 16px;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+            width: 280px;
+            z-index: 100;
+            user-select: none;
             transition: all 0.3s ease;
-            background-color: rgba(255, 255, 255, 0.9);
-            backdrop-filter: blur(8px);
-            -webkit-backdrop-filter: blur(8px);
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+            color: #e0e0e0;
         }
         
-        .ai-processing {
-            animation: pulse 2s infinite;
+        .floating-properties.dragging {
+            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
         }
         
-        @keyframes pulse {
-            0% { opacity: 0.6; transform: scale(0.98); }
-            50% { opacity: 1; transform: scale(1.02); }
-            100% { opacity: 0.6; transform: scale(0.98); }
+        .properties-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 12px;
+            padding-bottom: 8px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         }
         
-        .color-picker-wrapper {
-            position: relative;
-            display: inline-block;
+        .properties-title {
+            font-size: 14px;
+            font-weight: 600;
+            color: white;
+            display: flex;
+            align-items: center;
+            gap: 8px;
         }
         
-        .transparent-btn {
-            position: absolute;
-            right: 0;
-            bottom: 0;
-            width: 20px;
-            height: 20px;
-            background: white;
-            border: 1px solid #e2e8f0;
-            border-radius: 4px;
+        .properties-close {
+            width: 24px;
+            height: 24px;
+            border-radius: 6px;
             display: flex;
             align-items: center;
             justify-content: center;
+            color: #e0e0e0;
+            background: transparent;
+            border: none;
             cursor: pointer;
-            font-size: 10px;
             transition: all 0.2s ease;
         }
         
-        .transparent-btn:hover {
-            transform: scale(1.1);
-        }
-        
-        .notification {
-            animation: slideIn 0.3s ease-out forwards, fadeOut 0.3s ease-out 2.7s forwards;
-            transform: translateY(20px) scale(0.95);
-            opacity: 0;
-        }
-        
-        @keyframes slideIn {
-            to { transform: translateY(0) scale(1); opacity: 1; }
-        }
-        
-        @keyframes fadeOut {
-            to { opacity: 0; }
-        }
-        
-        .tool-btn {
-            transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-            border-radius: 8px;
+        .properties-close:hover {
+            background: rgba(255, 255, 255, 0.1);
         }
         
-        .tool-btn:hover {
-            transform: translateY(-2px) scale(1.05);
+        .property-group {
+            margin-bottom: 16px;
         }
         
-        .tool-btn.active {
-            box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.3), 0 2px 4px -1px rgba(99, 102, 241, 0.1);
-            transform: translateY(-2px);
+        .property-label {
+            font-size: 12px;
+            color: #a0a0a0;
+            margin-bottom: 6px;
+            display: block;
         }
         
-        .property-panel {
-            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-            border-radius: 8px;
-            background-color: rgba(255, 255, 255, 0.9);
-            backdrop-filter: blur(8px);
-            -webkit-backdrop-filter: blur(8px);
-            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+        .color-picker {
+            width: 100%;
+            height: 32px;
+            border-radius: 6px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            background: rgba(40, 40, 40, 0.8);
+            cursor: pointer;
         }
         
         input[type="range"] {
             -webkit-appearance: none;
-            height: 6px;
-            border-radius: 3px;
-            background: #e2e8f0;
-            transition: all 0.2s ease;
-        }
-        
-        input[type="range"]:hover {
-            background: #d1d5db;
+            width: 100%;
+            height: 4px;
+            border-radius: 2px;
+            background: rgba(255, 255, 255, 0.1);
+            outline: none;
         }
         
         input[type="range"]::-webkit-slider-thumb {
@@ -177,51 +185,26 @@
             transition: all 0.2s ease;
         }
         
-        input[type="range"]::-webkit-slider-thumb:hover {
-            transform: scale(1.2);
-        }
-        
-        .modal-overlay {
-            background-color: rgba(0, 0, 0, 0.5);
-            backdrop-filter: blur(4px);
-            -webkit-backdrop-filter: blur(4px);
-        }
-        
-        .modal-content {
-            animation: modalFadeIn 0.3s ease-out forwards;
-            transform: translateY(-20px) scale(0.98);
-            opacity: 0;
-        }
-        
-        @keyframes modalFadeIn {
-            to { transform: translateY(0) scale(1); opacity: 1; }
-        }
-        
-        .checkerboard {
-            background-image: 
-                linear-gradient(45deg, #e2e8f0 25%, transparent 25%),
-                linear-gradient(-45deg, #e2e8f0 25%, transparent 25%),
-                linear-gradient(45deg, transparent 75%, #e2e8f0 75%),
-                linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
-            background-size: 20px 20px;
-            background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+        .range-value {
+            font-size: 12px;
+            color: #a0a0a0;
+            text-align: right;
+            margin-top: 4px;
         }
         
-        #editorCanvas {
+        .dropdown {
             width: 100%;
-            height: 100%;
-            transition: transform 0.2s ease-out;
+            padding: 8px;
+            border-radius: 6px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            background: rgba(40, 40, 40, 0.8);
+            color: #e0e0e0;
+            font-size: 12px;
+            outline: none;
         }
         
-        .canvas-wrapper {
-            flex: 1;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            overflow: auto;
-            padding: 20px;
-            width: 100%;
-            height: calc(100% - 60px);
+        .dropdown option {
+            background: #2d2d2d;
         }
         
         .notification-container {
@@ -232,528 +215,372 @@
         }
         
         .notification {
-            padding: 12px 20px;
+            padding: 12px 16px;
             border-radius: 8px;
             margin-bottom: 10px;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
             display: flex;
             align-items: center;
+            gap: 8px;
+            font-size: 14px;
+            animation: slideIn 0.3s ease-out forwards;
+            background: rgba(30, 30, 30, 0.9);
+            color: white;
+            border-left: 4px solid;
         }
         
         .notification.success {
-            background-color: #10b981;
-            color: white;
+            border-color: #10b981;
         }
         
         .notification.error {
-            background-color: #ef4444;
-            color: white;
+            border-color: #ef4444;
         }
         
         .notification.info {
-            background-color: #3b82f6;
+            border-color: #3b82f6;
+        }
+        
+        @keyframes slideIn {
+            from { transform: translateX(20px); opacity: 0; }
+            to { transform: translateX(0); opacity: 1; }
+        }
+        
+        .zoom-controls {
+            position: fixed;
+            bottom: 20px;
+            left: 20px;
+            background: rgba(30, 30, 30, 0.8);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border-radius: 12px;
+            padding: 8px;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+            z-index: 100;
+        }
+        
+        .zoom-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #e0e0e0;
+            background: transparent;
+            border: none;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+        
+        .zoom-btn:hover {
+            background: rgba(99, 102, 241, 0.2);
             color: white;
         }
         
-        .notification i {
-            margin-right: 10px;
+        .zoom-value {
+            width: 40px;
+            text-align: center;
+            font-size: 12px;
+            color: white;
+            padding: 4px 0;
         }
         
-        .drop-zone-active {
-            border-color: #6366f1 !important;
-            background-color: rgba(99, 102, 241, 0.05) !important;
-            transform: scale(0.99);
+        .fullscreen-btn {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: rgba(30, 30, 30, 0.8);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            cursor: pointer;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+            z-index: 100;
+            transition: all 0.2s ease;
         }
         
-        @media (max-width: 768px) {
-            .sidebar {
-                width: 60px;
-            }
-            
-            .property-panel {
-                width: 280px;
-            }
-            
-            .canvas-wrapper {
-                padding: 10px;
-            }
+        .fullscreen-btn:hover {
+            background: rgba(99, 102, 241, 0.8);
+            transform: scale(1.1);
+        }
+        
+        .hidden {
+            display: none !important;
+        }
+        
+        .canvas-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+        
+        .lock-btn {
+            position: absolute;
+            top: 5px;
+            right: 5px;
+            width: 24px;
+            height: 24px;
+            border-radius: 4px;
+            background: rgba(30, 30, 30, 0.8);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            cursor: pointer;
+            z-index: 10;
+            transition: all 0.2s ease;
+        }
+        
+        .lock-btn:hover {
+            background: rgba(99, 102, 241, 0.8);
+        }
+        
+        .object-controls {
+            position: absolute;
+            top: 5px;
+            right: 5px;
+            display: flex;
+            gap: 4px;
+            z-index: 10;
+        }
+        
+        .control-btn {
+            width: 24px;
+            height: 24px;
+            border-radius: 4px;
+            background: rgba(30, 30, 30, 0.8);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+        
+        .control-btn:hover {
+            background: rgba(99, 102, 241, 0.8);
+        }
+        
+        .locked {
+            color: #6366f1;
         }
     </style>
 </head>
-<body class="bg-gray-50">
-    <div class="flex flex-col h-screen">
-        <!-- Top Navigation -->
-        <header class="gradient-bg text-white enhanced-shadow">
-            <div class="container mx-auto px-6 py-4 flex justify-between items-center">
-                <div class="flex items-center space-x-3">
-                    <div class="glass-effect p-2 rounded-lg">
-                        <i class="fas fa-camera-retro text-xl"></i>
-                    </div>
-                    <h1 class="text-2xl font-bold">SnapEdit Pro</h1>
-                </div>
-                <div class="flex items-center space-x-4">
-                    <button id="apiKeyBtn" class="px-4 py-2 glass-effect rounded-lg font-medium hover:bg-white/20 transition flex items-center">
-                        <i class="fas fa-key mr-2"></i>API Key
-                    </button>
-                    <button id="saveBtn" class="px-4 py-2 bg-white text-indigo-600 rounded-lg font-medium hover:bg-gray-100 transition flex items-center">
-                        <i class="fas fa-save mr-2"></i>Save
-                    </button>
-                    <button id="exportBtn" class="px-4 py-2 glass-effect rounded-lg font-medium hover:bg-white/20 transition flex items-center">
-                        <i class="fas fa-file-export mr-2"></i>Export
-                    </button>
-                    <div class="relative">
-                        <div class="w-10 h-10 rounded-full glass-effect flex items-center justify-center cursor-pointer hover:bg-white/30 transition" id="userMenuBtn">
-                            <i class="fas fa-user text-white"></i>
-                        </div>
-                        <div id="userMenu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg enhanced-shadow py-1 z-50 border border-gray-200">
-                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center transition">
-                                <i class="fas fa-user mr-2 text-gray-500"></i> Profile
-                            </a>
-                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center transition">
-                                <i class="fas fa-cog mr-2 text-gray-500"></i> Settings
-                            </a>
-                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center transition">
-                                <i class="fas fa-sign-out-alt mr-2 text-gray-500"></i> Sign out
-                            </a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </header>
-
-        <div class="flex flex-1 overflow-hidden">
-            <!-- Left Sidebar - Tools -->
-            <div class="sidebar w-20 flex flex-col items-center py-6 space-y-6">
-                <div class="tooltip">
-                    <button id="uploadBtn" class="tool-btn p-3 rounded-lg hover:bg-indigo-50 text-indigo-600">
-                        <i class="fas fa-upload text-xl"></i>
-                    </button>
-                    <span class="tooltiptext">Upload Image</span>
-                </div>
-                
-                <div class="border-t border-gray-200 w-10 my-2"></div>
-                
-                <div class="tooltip">
-                    <button id="selectTool" class="tool-btn p-3 rounded-lg hover:bg-indigo-50 text-gray-700 active">
-                        <i class="fas fa-mouse-pointer text-xl"></i>
-                    </button>
-                    <span class="tooltiptext">Select Tool</span>
-                </div>
-                
-                <div class="tooltip">
-                    <button id="textTool" class="tool-btn p-3 rounded-lg hover:bg-indigo-50 text-gray-700">
-                        <i class="fas fa-font text-xl"></i>
-                    </button>
-                    <span class="tooltiptext">Text Tool</span>
-                </div>
-                
-                <div class="tooltip">
-                    <button id="drawTool" class="tool-btn p-3 rounded-lg hover:bg-indigo-50 text-gray-700">
-                        <i class="fas fa-pencil-alt text-xl"></i>
-                    </button>
-                    <span class="tooltiptext">Draw Tool</span>
-                </div>
-                
-                <div class="tooltip">
-                    <button id="shapeTool" class="tool-btn p-3 rounded-lg hover:bg-indigo-50 text-gray-700">
-                        <i class="fas fa-square text-xl"></i>
-                    </button>
-                    <span class="tooltiptext">Shapes</span>
-                </div>
-                
-                <div class="tooltip">
-                    <button id="blurTool" class="tool-btn p-3 rounded-lg hover:bg-indigo-50 text-gray-700">
-                        <i class="fas fa-eye-slash text-xl"></i>
-                    </button>
-                    <span class="tooltiptext">Blur Tool</span>
-                </div>
-                
-                <div class="border-t border-gray-200 w-10 my-2"></div>
-                
-                <div class="tooltip">
-                    <button id="aiRemoveBg" class="tool-btn p-3 rounded-lg hover:bg-indigo-50 text-gray-700">
-                        <i class="fas fa-robot text-xl"></i>
-                    </button>
-                    <span class="tooltiptext">AI Background Remove</span>
-                </div>
-                
-                <div class="tooltip">
-                    <button id="aiEnhance" class="tool-btn p-3 rounded-lg hover:bg-indigo-50 text-gray-700">
-                        <i class="fas fa-magic text-xl"></i>
-                    </button>
-                    <span class="tooltiptext">AI Enhance</span>
-                </div>
-                
-                <div class="tooltip">
-                    <button id="aiTextRecognition" class="tool-btn p-3 rounded-lg hover:bg-indigo-50 text-gray-700">
-                        <i class="fas fa-text-height text-xl"></i>
-                    </button>
-                    <span class="tooltiptext">OCR Text Recognition</span>
-                </div>
-            </div>
-
-            <!-- Main Canvas Area -->
-            <div class="flex-1 flex flex-col overflow-hidden bg-gray-100">
-                <div class="flex justify-between items-center mb-4 p-4">
-                    <div class="flex space-x-2">
-                        <div class="relative flex items-center bg-white rounded-lg enhanced-shadow overflow-hidden">
-                            <button id="zoomOut" class="px-3 py-2 bg-white border-r border-gray-200 hover:bg-gray-50 text-gray-700 transition">
-                                <i class="fas fa-search-minus"></i>
-                            </button>
-                            <span id="zoomLevel" class="px-3 py-1 text-sm text-gray-600">100%</span>
-                            <button id="zoomIn" class="px-3 py-2 bg-white border-l border-gray-200 hover:bg-gray-50 text-gray-700 transition">
-                                <i class="fas fa-search-plus"></i>
-                            </button>
-                        </div>
-                        <div class="relative flex items-center bg-white rounded-lg enhanced-shadow overflow-hidden">
-                            <button id="undoBtn" class="px-3 py-2 bg-white border-r border-gray-200 hover:bg-gray-50 text-gray-700 transition">
-                                <i class="fas fa-undo"></i>
-                            </button>
-                            <button id="redoBtn" class="px-3 py-2 bg-white hover:bg-gray-50 text-gray-700 transition">
-                                <i class="fas fa-redo"></i>
-                            </button>
-                        </div>
-                    </div>
-                    <div class="flex items-center space-x-4">
-                        <div id="aiProcessing" class="hidden items-center space-x-2 text-indigo-600 ai-processing">
-                            <i class="fas fa-cog fa-spin"></i>
-                            <span class="font-medium">AI Processing...</span>
-                        </div>
-                        <div class="text-sm text-gray-500 bg-white px-3 py-1 rounded-lg enhanced-shadow">
-                            <span id="imageInfo">No image loaded</span>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="canvas-wrapper">
-                    <div id="canvas-container" class="canvas-container bg-white">
-                        <canvas id="editorCanvas"></canvas>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Right Sidebar - Properties -->
-            <div class="sidebar w-72 p-6 overflow-y-auto">
-                <h2 class="font-bold text-lg mb-4 text-gray-700 flex items-center">
-                    <i class="fas fa-sliders-h mr-2 text-indigo-500"></i> Properties
-                </h2>
-                
-                <div id="generalProps" class="property-panel mb-6 p-4">
-                    <h3 class="font-medium text-gray-600 mb-3 flex items-center">
-                        <i class="fas fa-image mr-2 text-indigo-400"></i> Canvas
-                    </h3>
-                    <div class="space-y-4">
-                        <div>
-                            <label class="block text-sm text-gray-500 mb-2">Background</label>
-                            <div class="color-picker-wrapper">
-                                <input type="color" id="canvasBg" value="#ffffff" class="w-full h-10 rounded border border-gray-300">
-                                <div class="transparent-btn" onclick="setTransparent('canvasBg')">
-                                    <i class="fas fa-times"></i>
-                                </div>
-                            </div>
-                        </div>
-                        <div>
-                            <label class="block text-sm text-gray-500 mb-2">Opacity</label>
-                            <div class="flex items-center space-x-2">
-                                <input type="range" id="canvasOpacity" min="0" max="100" value="100" class="flex-1">
-                                <span id="canvasOpacityValue" class="text-xs text-gray-500 w-8 text-right">100%</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                
-                <div id="textProps" class="property-panel mb-6 p-4 hidden">
-                    <h3 class="font-medium text-gray-600 mb-3 flex items-center">
-                        <i class="fas fa-font mr-2 text-indigo-400"></i> Text
-                    </h3>
-                    <div class="space-y-4">
-                        <div>
-                            <label class="block text-sm text-gray-500 mb-2">Content</label>
-                            <textarea id="textContent" class="w-full border border-gray-300 rounded-lg p-2 text-sm focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500" rows="2"></textarea>
-                        </div>
-                        <div>
-                            <label class="block text-sm text-gray-500 mb-2">Font</label>
-                            <select id="textFont" class="w-full border border-gray-300 rounded-lg p-2 text-sm focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500">
-                                <option value="Arial">Arial</option>
-                                <option value="Verdana">Verdana</option>
-                                <option value="Helvetica">Helvetica</option>
-                                <option value="Times New Roman">Times New Roman</option>
-                                <option value="Courier New">Courier New</option>
-                            </select>
-                        </div>
-                        <div>
-                            <label class="block text-sm text-gray-500 mb-2">Size</label>
-                            <div class="flex items-center space-x-2">
-                                <input type="range" id="textSize" min="8" max="72" value="16" class="flex-1">
-                                <span id="textSizeValue" class="text-xs text-gray-500 w-8 text-right">16</span>
-                            </div>
-                        </div>
-                        <div>
-                            <label class="block text-sm text-gray-500 mb-2">Color</label>
-                            <div class="color-picker-wrapper">
-                                <input type="color" id="textColor" value="#000000" class="w-full h-10 rounded border border-gray-300">
-                                <div class="transparent-btn" onclick="setTransparent('textColor')">
-                                    <i class="fas fa-times"></i>
-                                </div>
-                            </div>
-                        </div>
-                        <div>
-                            <label class="block text-sm text-gray-500 mb-2">Background</label>
-                            <div class="color-picker-wrapper">
-                                <input type="color" id="textBgColor" value="transparent" class="w-full h-10 rounded border border-gray-300 checkerboard">
-                                <div class="transparent-btn" onclick="setTransparent('textBgColor')">
-                                    <i class="fas fa-times"></i>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                
-                <div id="drawProps" class="property-panel mb-6 p-4 hidden">
-                    <h3 class="font-medium text-gray-600 mb-3 flex items-center">
-                        <i class="fas fa-pencil-alt mr-2 text-indigo-400"></i> Drawing
-                    </h3>
-                    <div class="space-y-4">
-                        <div>
-                            <label class="block text-sm text-gray-500 mb-2">Brush Size</label>
-                            <div class="flex items-center space-x-2">
-                                <input type="range" id="brushSize" min="1" max="50" value="5" class="flex-1">
-                                <span id="brushSizeValue" class="text-xs text-gray-500 w-8 text-right">5</span>
-                            </div>
-                        </div>
-                        <div>
-                            <label class="block text-sm text-gray-500 mb-2">Color</label>
-                            <div class="color-picker-wrapper">
-                                <input type="color" id="brushColor" value="#000000" class="w-full h-10 rounded border border-gray-300">
-                                <div class="transparent-btn" onclick="setTransparent('brushColor')">
-                                    <i class="fas fa-times"></i>
-                                </div>
-                            </div>
-                        </div>
-                        <div>
-                            <label class="block text-sm text-gray-500 mb-2">Opacity</label>
-                            <div class="flex items-center space-x-2">
-                                <input type="range" id="brushOpacity" min="0" max="100" value="100" class="flex-1">
-                                <span id="brushOpacityValue" class="text-xs text-gray-500 w-8 text-right">100%</span>
-                            </div>
-                        </div>
-                        <div>
-                            <label class="block text-sm text-gray-500 mb-2">Brush Type</label>
-                            <select id="brushType" class="w-full border border-gray-300 rounded-lg p-2 text-sm focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500">
-                                <option value="pencil">Pencil</option>
-                                <option value="circle">Circle</option>
-                                <option value="spray">Spray</option>
-                                <option value="pattern">Pattern</option>
-                            </select>
-                        </div>
-                    </div>
-                </div>
-
-                <div id="shapeProps" class="property-panel mb-6 p-4 hidden">
-                    <h3 class="font-medium text-gray-600 mb-3 flex items-center">
-                        <i class="fas fa-shapes mr-2 text-indigo-400"></i> Shape
-                    </h3>
-                    <div class="space-y-4">
-                        <div>
-                            <label class="block text-sm text-gray-500 mb-2">Type</label>
-                            <select id="shapeType" class="w-full border border-gray-300 rounded-lg p-2 text-sm focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500">
-                                <option value="rect">Rectangle</option>
-                                <option value="circle">Circle</option>
-                                <option value="triangle">Triangle</option>
-                                <option value="line">Line</option>
-                                <option value="polygon">Polygon</option>
-                            </select>
-                        </div>
-                        <div>
-                            <label class="block text-sm text-gray-500 mb-2">Fill Color</label>
-                            <div class="color-picker-wrapper">
-                                <input type="color" id="shapeFill" value="#000000" class="w-full h-10 rounded border border-gray-300">
-                                <div class="transparent-btn" onclick="setTransparent('shapeFill')">
-                                    <i class="fas fa-times"></i>
-                                </div>
-                            </div>
-                        </div>
-                        <div>
-                            <label class="block text-sm text-gray-500 mb-2">Stroke Color</label>
-                            <div class="color-picker-wrapper">
-                                <input type="color" id="shapeStroke" value="#000000" class="w-full h-10 rounded border border-gray-300">
-                                <div class="transparent-btn" onclick="setTransparent('shapeStroke')">
-                                    <i class="fas fa-times"></i>
-                                </div>
-                            </div>
-                        </div>
-                        <div>
-                            <label class="block text-sm text-gray-500 mb-2">Stroke Width</label>
-                            <div class="flex items-center space-x-2">
-                                <input type="range" id="shapeStrokeWidth" min="1" max="20" value="1" class="flex-1">
-                                <span id="shapeStrokeWidthValue" class="text-xs text-gray-500 w-8 text-right">1</span>
-                            </div>
-                        </div>
-                        <div id="polygonSidesContainer" class="hidden">
-                            <label class="block text-sm text-gray-500 mb-2">Sides</label>
-                            <input type="number" id="polygonSides" min="3" max="12" value="5" class="w-full border border-gray-300 rounded-lg p-2 text-sm focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500">
-                        </div>
-                    </极速赛车开奖直播</div>
-                </div>
-
-                <div id="blurProps" class="property-panel mb-6 p-4 hidden">
-                    <h3 class="font-medium text-gray-600 mb-3 flex items-center">
-                        <i class="fas fa-eye-slash mr极速赛车开奖直播</div>
-                </div>
-
-                <div id="aiProps" class="property-panel mb-6 p-4 hidden">
-                    <h3 class="font-medium text-gray-600 mb-3 flex items-center">
-                        <i class="fas fa-robot mr-2 text-indigo-400"></i> AI Tools
-                    </h3>
-                    <div class="space-y-4">
-                        <div id="apiKeyStatus" class="text-xs p-3 rounded-lg bg-gray-100 text-gray-600 flex items-center">
-                            <i class="fas fa-circle text-red-500 mr-2"></i> No API Key
-                        </div>
-                        <div>
-                            <label class="block text-sm text-gray-500 mb-2">Enhance Mode</label>
-                            <select id="aiEnhanceMode" class="w-full border border-gray-300 rounded-lg p-2 text-sm focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500">
-                                <option value="auto">Auto Enhance</option>
-                                <option value="sharpness">Sharpness</option>
-                                <option value="contrast">Contrast</option>
-                                <option value="color">Color Boost</option>
-                                <option value="denoise">Denoise</option>
-                            </select>
-                        </div>
-                        <div>
-                            <label class="block text-sm text-gray-500 mb-2">OCR Language</label>
-                            <select id="ocrLanguage" class="极速赛车开奖直播</div>
-                        </div>
-                        <button id="runAi" class="w-full bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition flex items-center justify-center">
-                            <i class="fas fa-play mr-2"></i> Apply AI Processing
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
+<body>
+    <!-- Canvas Container -->
+    <div class="canvas-container">
+        <canvas id="editorCanvas"></canvas>
     </div>
-
-    <!-- Modals -->
-    <div id="uploadModal" class="fixed inset-0 modal-overlay flex items-center justify-center z-50 hidden">
-        <div class="modal-content bg-white rounded-xl p-6 w-full max-w-md enhanced-shadow">
-            <div class="flex justify-between items-center mb-4">
-                <h3 class="text-lg font-bold text-gray-800">Upload Image</h3>
-                <button id="closeUploadModal" class="text-gray-500 hover:text-gray-700 transition">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
-            <div class="space-y-4">
-                <div class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center hover:border-indigo-300 transition cursor-pointer" id="dropZone">
-                    <i class="fas fa-cloud-upload-alt text-4xl text-indigo-500 mb-2"></i>
-                    <p class="text-gray-极速赛车开奖直播</div>
-                </div>
-                <div class="text-center text-sm text-gray-500">
-                    <p>Supports: JPG, PNG, GIF (Max 10MB)</p>
-                </div>
-            </div>
-        </div>
+    
+    <!-- Floating Toolbar -->
+    <div class="floating-toolbar" id="floatingToolbar">
+        <!-- File Actions -->
+        <button class="tool-btn" id="uploadBtn" title="Upload Image">
+            <i class="fas fa-upload"></i>
+        </button>
+        
+        <div class="tool-separator"></div>
+        
+        <!-- Selection Tools -->
+        <button class="tool-btn active" id="selectTool" title="Select Tool">
+            <i class="fas fa-mouse-pointer"></i>
+        </button>
+        
+        <!-- Drawing Tools -->
+        <button class="tool-btn" id="textTool" title="Text Tool">
+            <i class="fas fa-font"></i>
+        </button>
+        <button class="tool-btn" id="drawTool" title="Draw Tool">
+            <i class="fas fa-pencil-alt"></i>
+        </button>
+        <button class="tool-btn" id="shapeTool" title="Shapes">
+            <i class="fas fa-square"></i>
+        </button>
+        <button class="tool-btn" id="blurTool" title="Blur Tool">
+            <i class="fas fa-eye-slash"></i>
+        </button>
+        
+        <div class="tool-separator"></div>
+        
+        <!-- AI Tools -->
+        <button class="tool-btn" id="aiRemoveBg" title="Remove Background">
+            <i class="fas fa-robot"></i>
+        </button>
+        <button class="tool-btn" id="aiEnhance" title="AI Enhance">
+            <i class="fas fa-magic"></i>
+        </button>
+        
+        <div class="tool-separator"></div>
+        
+        <!-- Edit Actions -->
+        <button class="tool-btn" id="undoBtn" title="Undo">
+            <i class="fas fa-undo"></i>
+        </button>
+        <button class="tool-btn" id="redoBtn" title="Redo">
+            <i class="fas fa-redo"></i>
+        </button>
+        
+        <div class="tool-separator"></div>
+        
+        <!-- Export Actions -->
+        <button class="tool-btn" id="saveBtn" title="Save">
+            <i class="fas fa-save"></i>
+        </button>
+        <button class="tool-btn" id="exportBtn" title="Export">
+            <i class="fas fa-file-export"></i>
+        </button>
     </div>
-
-    <div id="exportModal" class="fixed inset-0 modal-overlay flex items-center justify-center z-50 hidden">
-        <div class="modal-content bg-white rounded-xl p-6 w-full max-w-md enhanced-shadow">
-            <div class="flex justify-between items-center mb-4">
-                <h3 class="text-lg font-bold text-gray-800">Export Options</h3>
-                <button id="closeExportModal" class="text-gray-500 hover:text-gray-700 transition">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
-            <div class="space-y-4">
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-2">Format</label>
-                    <select id="exportFormat" class="w-full border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500">
-                        <option value="png">PNG</option>
-                        <option value="jpg">JPG</option>
-                        <option value="webp">WebP</option>
-                        <option value="pdf">PDF</option>
-                    </select>
-                </div>
-                <div id="qualityContainer" class="hidden">
-                    <label class="block text-sm font-medium text-gray-700 mb-2">Quality (%)</label>
-                    <div class="flex items-center space-x-2">
-                        <input type="range" id="exportQuality" min="1" max="100" value="90" class="flex-1">
-                        <span id="exportQualityValue" class="text-xs text-gray-500 w-8 text-right">90</span>
-                    </div>
-                </div>
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-2">Size</label>
-                    <select id="exportSize" class="w-full border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500">
-                        <option value="original">Original Size</option>
-                        <option value="1024">1024px (width)</option>
-                        <option value="800">800px (width)</option>
-                        <option value="640">640px (width)</option>
-                    </select>
-                </div>
-                <div class="flex space-x-3 pt-4">
-                    <button id="downloadBtn" class="flex-1 bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition flex items-center justify-center">
-                        <i class="fas fa-download mr-2"></i>Download
-                    </button>
-                    <button id="copyToClipboardBtn" class="flex-1 bg-gray-200 text-gray-700 py-2 rounded-lg hover:bg-gray-300 transition flex items-center justify-center">
-                        <i class="fas fa-copy mr-2"></i>Copy
-                    </button>
-                </div>
+    
+    <!-- Floating Properties Panel -->
+    <div class="floating-properties" id="floatingProperties">
+        <div class="properties-header">
+            <div class="properties-title">
+                <i class="fas fa-sliders-h"></i>
+                <span>Properties</span>
             </div>
+            <button class="properties-close" id="propertiesClose">
+                <i class="fas fa-times"></i>
+            </button>
         </div>
-    </div>
-
-    <div id="apiKeyModal" class="fixed inset-0 modal-overlay flex items-center justify-center z-50 hidden">
-        <div class="modal-content bg-white rounded-xl p-6 w-full max-w-md enhanced-shadow">
-            <div class="flex justify-between items-center mb-4">
-                <h3 class="text-lg font-bold text-gray-800">DeepSeek API Key</h3>
-                <button id="closeApiKeyModal" class="text-gray-500 hover:text-gray-700 transition">
-                    <i class="fas fa-times"></i>
+        
+        <div class="property-group">
+            <label class="property-label">Canvas Background</label>
+            <input type="color" class="color-picker" id="canvasBg" value="#1a1a1a">
+        </div>
+        
+        <div class="property-group">
+            <label class="property-label">Opacity</label>
+            <input type="range" id="canvasOpacity" min="0" max="100" value="100">
+            <div class="range-value" id="canvasOpacityValue">100%</div>
+        </div>
+        
+        <div class="property-group hidden" id="textProps">
+            <label class="property-label">Text Color</label>
+            <input type="color" class="color-picker" id="textColor" value="#ffffff">
+            
+            <label class="property-label">Font Size</label>
+            <input type="range" id="textSize" min="8" max="72" value="24">
+            <div class="range-value" id="textSizeValue">24px</div>
+            
+            <label class="property-label">Font Family</label>
+            <select class="dropdown" id="textFont">
+                <option value="Arial">Arial</option>
+                <option value="Helvetica">Helvetica</option>
+                <option value="Times New Roman">Times New Roman</option>
+                <option value="Courier New">Courier New</option>
+                <option value="Georgia">Georgia</option>
+                <option value="Verdana">Verdana</option>
+            </select>
+        </div>
+        
+        <div class="property-group hidden" id="drawProps">
+            <label class="property-label">Brush Color</label>
+            <input type="color" class="color-picker" id="brushColor" value="#ffffff">
+            
+            <label class="property-label">Brush Size</label>
+            <input type="range" id="brushSize" min="1" max="50" value="5">
+            <div class="range-value" id="brushSizeValue">5px</div>
+        </div>
+        
+        <div class="property-group hidden" id="objectProps">
+            <label class="property-label">Object Controls</label>
+            <div class="flex gap-2 mt-2">
+                <button class="control-btn" id="lockBtn" title="Lock/Unlock">
+                    <i class="fas fa-lock"></i>
+                </button>
+                <button class="control-btn" id="deleteBtn" title="Delete">
+                    <i class="fas fa-trash"></i>
+                </button>
+                <button class="control-btn" id="bringToFrontBtn" title="Bring to Front">
+                    <i class="fas fa-arrow-up"></i>
+                </button>
+                <button class="control-btn" id="sendToBackBtn" title="Send to Back">
+                    <i class="fas fa-arrow-down"></i>
                 </button>
-            </div>
-            <div class="space-y-4">
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-2">Enter your DeepSeek API Key</label>
-                    <input type="password" id="apiKeyInput" class="w-full border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500" placeholder="sk-xxxxxxxxxxxxxxxxxxxxxxxx">
-                </div>
-                <div class="text-xs text-gray-500 p-3 bg-gray-50 rounded-lg">
-                    <p>Your API key is encrypted and stored locally in your browser. We never send it to our servers.</p>
-                </div>
-                <div class="flex space-x-3 pt-2">
-                    <button id="saveApiKeyBtn" class="flex-1 bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-极速赛车开奖直播</div>
-                </div>
             </div>
         </div>
     </div>
-
-    <!-- Notification container -->
+    
+    <!-- Zoom Controls -->
+    <div class="zoom-controls">
+        <button class="zoom-btn" id="zoomInBtn" title="Zoom In">
+            <i class="fas fa-search-plus"></i>
+        </button>
+        <div class="zoom-value" id="zoomValue">100%</div>
+        <button class="zoom-btn" id="zoomOutBtn" title="Zoom Out">
+            <i class="fas fa-search-minus"></i>
+        </button>
+        <button class="zoom-btn" id="zoomResetBtn" title="Reset Zoom">
+            <i class="fas fa-sync-alt"></i>
+        </button>
+    </div>
+    
+    <!-- Fullscreen Button -->
+    <div class="fullscreen-btn" id="fullscreenBtn" title="Toggle Fullscreen">
+        <i class="fas fa-expand"></i>
+    </div>
+    
+    <!-- Notification Container -->
     <div class="notification-container" id="notificationContainer"></div>
-
+    
+    <!-- Hidden File Input -->
+    <input type="file" id="fileInput" accept="image/*" class="hidden">
+    
     <script>
         document.addEventListener('DOMContentLoaded', function() {
-            // Initialize Fabric.js canvas with improved settings
+            // Initialize Fabric.js canvas
             const canvas = new fabric.Canvas('editorCanvas', {
-                backgroundColor: '#ffffff',
+                backgroundColor: '#1a1a1a',
                 preserveObjectStacking: true,
                 selection: true,
                 selectionColor: 'rgba(99, 102, 241, 0.3)',
                 selectionBorderColor: '#6366f1',
                 selectionLineWidth: 1,
                 selectionDashArray: [5, 5],
-                allowTouchScrolling: true,
                 enableRetinaScaling: true
             });
             
-            // Set canvas to full size of its container
+            // Zoom state
+            let zoomLevel = 1;
+            const zoomStep = 0.1;
+            const minZoom = 0.1;
+            const maxZoom = 3;
+            
+            // Set canvas to full size of window
             function resizeCanvas() {
-                const container = document.getElementById('canvas-container');
-                canvas.setWidth(container.clientWidth);
-                canvas.setHeight(container.clientHeight);
+                const width = window.innerWidth;
+                const height = window.innerHeight;
+                
+                canvas.setWidth(width);
+                canvas.setHeight(height);
+                
+                // Apply zoom transformation
+                canvas.setZoom(zoomLevel);
                 canvas.renderAll();
+                
+                // Update zoom display
+                document.getElementById('zoomValue').textContent = `${Math.round(zoomLevel * 100)}%`;
             }
             
             // Initial resize and add event listener for window resize
             resizeCanvas();
             window.addEventListener('resize', resizeCanvas);
             
-            // State management with improved history
-            let currentTool = null;
+            // State management
+            let currentTool = 'select';
             let activeObject = null;
             let history = [];
             let historyIndex = -1;
@@ -761,256 +588,326 @@
             let drawingPath = null;
             let blurArea = null;
             let polygonPoints = [];
-            let apiKey = null;
-            let zoomLevel = 1;
-            let lastZoomPoint = null;
-            
-            // Brush settings
-            let brushSettings = {
-                size: 5,
-                color: '#000000',
-                opacity: 1,
-                type: 'pencil'
-            };
-            
-            // Load API key if exists
-            loadApiKey();
             
             // UI Elements
-            const uploadModal = document.getElementById('uploadModal');
-            const exportModal = document.getElementById('exportModal');
-            const apiKeyModal = document.getElementById('apiKeyModal');
+            const floatingToolbar = document.getElementById('floatingToolbar');
+            const floatingProperties = document.getElementById('floatingProperties');
             const fileInput = document.getElementById('fileInput');
-            const browseBtn = document.getElementById('browseBtn');
             const uploadBtn = document.getElementById('uploadBtn');
-            const closeUploadModal = document.getElementById('closeUploadModal');
-            const closeExportModal = document.getElementById('closeExportModal');
-            const closeApiKeyModal = document.getElementById('closeApiKeyModal');
-            const saveBtn = document.getElementById('saveBtn');
-            const exportBtn = document.getElementById('exportBtn');
-            const apiKeyBtn = document.getElementById('apiKeyBtn');
-            const saveApiKeyBtn = document.getElementById('saveApiKeyBtn');
-            const clearApiKeyBtn = document.getElementById('clearApiKeyBtn');
-            const apiKeyInput = document.getElementById('apiKeyInput');
-            const apiKeyStatus = document.getElementById('apiKeyStatus');
-            const downloadBtn = document.getElementById('downloadBtn');
-            const copyToClipboardBtn = document.getElementById('copyToClipboardBtn');
-            const exportFormat = document.getElementById('exportFormat');
-            const exportQuality = document.getElementById('exportQuality');
-            const exportSize = document.getElementById('exportSize');
-            const qualityContainer = document.getElementById('qualityContainer');
-            const aiProcessing = document.getElementById('aiProcessing');
-            const imageInfo = document.getElementById('imageInfo');
-            const zoomInBtn = document.getElementById('zoomIn');
-            const zoomOutBtn = document.getElementById('zoomOut');
-            const zoomLevelDisplay = document.getElementById('zoomLevel');
-            const undoBtn = document.getElementById('undoBtn');
-            const redoBtn = document.getElementById('redoBtn');
-            const dropZone = document.getElementById('dropZone');
+            const propertiesClose = document.getElementById('propertiesClose');
+            const fullscreenBtn = document.getElementById('fullscreenBtn');
             const notificationContainer = document.getElementById('notificationContainer');
+            const zoomInBtn = document.getElementById('zoomInBtn');
+            const zoomOutBtn = document.getElementById('zoomOutBtn');
+            const zoomResetBtn = document.getElementById('zoomResetBtn');
+            const lockBtn = document.getElementById('lockBtn');
+            const deleteBtn = document.getElementById('deleteBtn');
+            const bringToFrontBtn = document.getElementById('bringToFrontBtn');
+            const sendToBackBtn = document.getElementById('sendToBackBtn');
             
-            // Tool buttons
-            const selectTool = document.getElementById('selectTool');
-            const textTool = document.getElementById('textTool');
-            const drawTool = document.getElementById('drawTool');
-            const shapeTool = document.getElementById('shapeTool');
-            const blurTool = document.getElementById('blurTool');
-            const aiRemoveBg = document.getElementById('aiRemoveBg');
-            const aiEnhance = document.getElementById('aiEnhance');
-            const aiTextRecognition = document.getElementById('aiTextRecognition');
-            const runAi = document.getElementById('runAi');
-            
-            // Property panels
-            const generalProps = document.getElementById('generalProps');
-            const textProps = document.getElementById('textProps');
-            const drawProps = document.getElementById('drawProps');
-            const shapeProps = document.getElementById('shapeProps');
-            const blurProps = document.getElementById('blurProps');
-            const aiProps = document.getElementById('aiProps');
-            const polygonSidesContainer = document.getElementById('polygonSidesContainer');
-            
-            // Property controls
-            const canvasBg = document.getElementById('canvasBg');
-            const canvasOpacity = document.getElementById('canvasOpacity');
-            const canvasOpacityValue = document.getElementById('canvasOpacityValue');
-            const textContent = document.getElementById('极速赛车开奖直播</div>
-            const textFont = document.getElementById('textFont');
-            const textSize = document.getElementById('textSize');
-            const textSizeValue = document.getElementById('textSizeValue');
-            const textColor = document.getElementById('textColor');
-            const textBgColor = document.getElementById('textBgColor');
-            const brushSize = document.getElementById('brushSize');
-            const brushSizeValue = document.getElementById('brushSizeValue');
-            const brushColor = document.getElementById('brushColor');
-            const brushOpacity = document.getElementById('brushOpacity');
-            const brushOpacityValue = document.getElementById('brushOpacityValue');
-            const brushType = document.getElementById('brushType');
-            const shapeType = document.getElementById('shapeType');
-            const shapeFill = document.getElementById('shapeFill');
-            const shapeStroke = document.getElementById('shapeStroke');
-            const shapeStrokeWidth = document.getElementById('shapeStrokeWidth');
-            const shapeStrokeWidthValue = document.getElementById('shapeStrokeWidthValue');
-            const polygonSides = document.getElementById('polygonSides');
-            const blurIntensity = document.getElementById('blurIntensity');
-            const blurIntensityValue = document.getElementById('blurIntensityValue');
-            const blurRadius = document.getElementById('blurRadius');
-            const blurRadiusValue = document.getElementById('blurRadiusValue');
-            const blurType = document.getElementById('blurType');
-            const aiEnhanceMode = document.getElementById('aiEnhanceMode');
-            const ocrLanguage = document.getElementById('ocrLanguage');
-            const exportQualityValue = document.getElementById('exportQualityValue');
-            
-            // Event Listeners
-            uploadBtn.addEventListener('click', () => uploadModal.classList.remove('hidden'));
-            closeUploadModal.addEventListener('click', () => uploadModal.classList.add('hidden'));
-            browseBtn.addEventListener('click', () => fileInput.click());
-            exportBtn.addEventListener('click', () => exportModal.classList.remove('hidden'));
-            closeExportModal.addEventListener('click', () => exportModal.classList.add('hidden'));
-            apiKeyBtn.addEventListener('click', () => apiKeyModal.classList.remove('hidden'));
-            closeApiKeyModal.addEventListener('click', () => apiKeyModal.classList.add('hidden'));
-            saveBtn.addEventListener('click', saveCanvasState);
-            downloadBtn.addEventListener('click', downloadCanvas);
-            copyToClipboardBtn.addEventListener('click', copyToClipboard);
-            saveApiKeyBtn.addEventListener('click', saveApiKey);
-            clearApiKeyBtn.addEventListener('click', clearApiKey);
-            zoomInBtn.addEventListener('click', zoomIn);
-            zoomOutBtn.addEventListener('click', zoomOut);
-            undoBtn.addEventListener('click', undo);
-            redoBtn.addEventListener('click', redo);
-            
-            fileInput.addEventListener('change', handleFileUpload);
-            exportFormat.addEventListener('change', toggleQualityControl);
-            shapeType.addEventListener('change', togglePolygonOptions);
-            
-            // Drag and drop events with improved visual feedback
-            dropZone.addEventListener('dragover', (e) => {
-                e.preventDefault();
-                dropZone.classList.add('drop-zone-active');
-            });
-            
-            dropZone.addEventListener('dragleave', () => {
-                dropZone.classList.remove('drop-zone-active');
-            });
+            // Make toolbar draggable
+            makeDraggable(floatingToolbar);
+            makeDraggable(floatingProperties);
             
-            dropZone.addEventListener('drop', (e) => {
-                e.preventDefault();
-                dropZone.classList.remove('drop-zone-active');
+            function makeDraggable(element) {
+                let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
                 
-                if (e.dataTransfer.files.length) {
-                    const file = e.dataTransfer.files[0];
-                    if (!file.type.match('image.*')) {
-                        showNotification('Please select an image file', 'error');
-                        return;
-                    }
+                element.onmousedown = dragMouseDown;
+                
+                function dragMouseDown(e) {
+                    e = e || window.event;
+                    e.preventDefault();
                     
-                    if (file.size > 10 * 1024 * 1024) {
-                        showNotification('Image size should be less than 10MB', 'error');
+                    // Only drag if clicking on the header or empty space
+                    if (e.target.classList.contains('tool-btn') || 
+                        e.target.classList.contains('properties-close') ||
+                        e.target.closest('.tool-btn') || 
+                        e.target.closest('.properties-close')) {
                         return;
                     }
                     
-                    fileInput.files = e.dataTransfer.files;
-                    handleFileUpload({ target: fileInput });
+                    element.classList.add('dragging');
+                    
+                    // Get the mouse cursor position at startup
+                    pos3 = e.clientX;
+                    pos4 = e.clientY;
+                    
+                    document.onmouseup = closeDragElement;
+                    document.onmousemove = elementDrag;
                 }
-            });
+                
+                function elementDrag(e) {
+                    e = e || window.event;
+                    e.preventDefault();
+                    
+                    // Calculate the new cursor position
+                    pos1 = pos3 - e.clientX;
+                    pos2 = pos4 - e.clientY;
+                    pos3 = e.clientX;
+                    pos4 = e.clientY;
+                    
+                    // Set the element's new position
+                    element.style.top = (element.offsetTop - pos2) + "px";
+                    element.style.left = (element.offsetLeft - pos1) + "px";
+                }
+                
+                function closeDragElement() {
+                    // Stop moving when mouse button is released
+                    document.onmouseup = null;
+                    document.onmousemove = null;
+                    element.classList.remove('dragging');
+                }
+            }
             
-            // Input range value displays
-            canvasOpacity.addEventListener('input', () => {
-                canvasOpacityValue.textContent = `${canvasOpacity.value}%`;
-                updateCanvasOpacity();
-            });
+            // Zoom functionality
+            zoomInBtn.addEventListener('click', zoomIn);
+            zoomOutBtn.addEventListener('click', zoomOut);
+            zoomResetBtn.addEventListener('click', resetZoom);
             
-            textSize.addEventListener('input', () => {
-                textSizeValue.textContent = textSize.value;
-                updateTextSize();
-            });
+            function zoomIn() {
+                if (zoomLevel < maxZoom) {
+                    zoomLevel = Math.min(zoomLevel + zoomStep, maxZoom);
+                    applyZoom();
+                }
+            }
             
-            brushSize.addEventListener('input', () => {
-                brushSizeValue.textContent = brushSize.value;
-                updateBrushSize();
-            });
+            function zoomOut() {
+                if (zoomLevel > minZoom) {
+                    zoomLevel = Math.max(zoomLevel - zoomStep, minZoom);
+                    applyZoom();
+                }
+            }
             
-            brushOpacity.addEventListener('input', () => {
-                brushOpacityValue.textContent = `${brushOpacity.value}%`;
-                updateBrushOpacity();
-            });
+            function resetZoom() {
+                zoomLevel = 1;
+                applyZoom();
+            }
             
-            shapeStrokeWidth.addEventListener('input', () => {
-                shapeStrokeWidthValue.textContent = shapeStrokeWidth.value;
-                updateShapeStrokeWidth();
-            });
+            function applyZoom() {
+                canvas.setZoom(zoomLevel);
+                document.getElementById('zoomValue').textContent = `${Math.round(zoomLevel * 100)}%`;
+                canvas.renderAll();
+            }
             
-            blurIntensity.addEventListener('input', () => {
-                blurIntensityValue.textContent = blurIntensity.value;
-                updateBlurIntensity();
-            });
+            // Fullscreen functionality
+            fullscreenBtn.addEventListener('click', toggleFullscreen);
             
-            blurRadius.addEventListener('input', () => {
-                blurRadiusValue.textContent = blurRadius.value;
-                updateBlurRadius();
-            });
+            function toggleFullscreen() {
+                if (!document.fullscreenElement) {
+                    document.documentElement.requestFullscreen().then(() => {
+                        fullscreenBtn.innerHTML = '<i class="fas fa-compress"></i>';
+                    });
+                } else {
+                    document.exitFullscreen().then(() => {
+                        fullscreenBtn.innerHTML = '<i class="fas fa-expand"></i>';
+                    });
+                }
+            }
+            
+            // File upload handler
+            uploadBtn.addEventListener('click', () => fileInput.click());
+            
+            fileInput.addEventListener('change', handleFileUpload);
+            
+            function handleFileUpload(e) {
+                const file = e.target.files[0];
+                if (!file) return;
+                
+                // Validate file type
+                if (!file.type.match('image.*')) {
+                    showNotification('Please select an image file (JPG, PNG, GIF)', 'error');
+                    return;
+                }
+                
+                // Validate file size
+                if (file.size > 10 * 1024 * 1024) {
+                    showNotification('Image size should be less than 10MB', 'error');
+                    return;
+                }
+                
+                const reader = new FileReader();
+                
+                reader.onload = function(f) {
+                    fabric.Image.fromURL(f.target.result, function(img) {
+                        // Clear canvas first
+                        canvas.clear();
+                        
+                        // Add the image to canvas
+                        canvas.add(img);
+                        canvas.setActiveObject(img);
+                        canvas.renderAll();
+                        
+                        // Center the image
+                        img.center();
+                        
+                        // Add lock controls to the image
+                        addLockControls(img);
+                        
+                        showNotification('Image loaded successfully!', 'success');
+                        
+                        // Save initial state
+                        saveHistory();
+                    }, {
+                        crossOrigin: 'anonymous',
+                        // Enable selection and editing of the image
+                        selectable: true,
+                        hasControls: true,
+                        hasBorders: true
+                    });
+                };
+                
+                reader.onerror = function() {
+                    showNotification('Error reading file. Please try another image.', 'error');
+                };
+                
+                reader.readAsDataURL(file);
+            }
+            
+            // Add lock controls to an object
+            function addLockControls(obj) {
+                // Create a lock button
+                const lockButton = document.createElement('div');
+                lockButton.className = 'lock-btn';
+                lockButton.innerHTML = '<i class="fas fa-lock-open"></i>';
+                lockButton.title = 'Lock/Unlock';
+                
+                // Add event listener for lock button
+                lockButton.addEventListener('click', function(e) {
+                    e.stopPropagation();
+                    toggleLock(obj);
+                });
+                
+                // Position the lock button relative to the object
+                obj.lockButton = lockButton;
+                updateLockButtonPosition(obj);
+                
+                // Add the lock button to the canvas container
+                document.querySelector('.canvas-container').appendChild(lockButton);
+                
+                // Update position when object moves
+                obj.on('moving', function() {
+                    if (!obj.locked) {
+                        updateLockButtonPosition(obj);
+                    }
+                });
+                
+                // Update position when object scales
+                obj.on('scaling', function() {
+                    if (!obj.locked) {
+                        updateLockButtonPosition(obj);
+                    }
+                });
+                
+                // Remove button when object is removed
+                obj.on('removed', function() {
+                    if (obj.lockButton && obj.lockButton.parentNode) {
+                        obj.lockButton.parentNode.removeChild(obj.lockButton);
+                    }
+                });
+            }
             
-            exportQuality.addEventListener('input', () => {
-                exportQualityValue.textContent = exportQuality.value;
+            // Update lock button position based on object position
+            function updateLockButtonPosition(obj) {
+                if (!obj.lockButton) return;
+                
+                const zoom = canvas.getZoom();
+                const vpt = canvas.viewportTransform;
+                const absoluteLeft = obj.left * zoom + vpt[4];
+                const absoluteTop = obj.top * zoom + vpt[5];
+                
+                obj.lockButton.style.left = `${absoluteLeft + obj.width * zoom - 30}px`;
+                obj.lockButton.style.top = `${absoluteTop + 5}px`;
+            }
+            
+            // Toggle lock state of an object
+            function toggleLock(obj) {
+                obj.locked = !obj.locked;
+                
+                if (obj.locked) {
+                    obj.lockButton.innerHTML = '<i class="fas fa-lock locked"></i>';
+                    obj.selectable = false;
+                    obj.hasControls = false;
+                    obj.hasBorders = false;
+                    obj.evented = false;
+                    showNotification('Object locked', 'success');
+                } else {
+                    obj.lockButton.innerHTML = '<i class="fas fa-lock-open"></i>';
+                    obj.selectable = true;
+                    obj.hasControls = true;
+                    obj.hasBorders = true;
+                    obj.evented = true;
+                    showNotification('Object unlocked', 'success');
+                }
+                
+                canvas.renderAll();
+                saveHistory();
+            }
+            
+            // Properties panel close button
+            propertiesClose.addEventListener('click', () => {
+                floatingProperties.classList.add('hidden');
             });
             
-            // Tool selection
-            selectTool.addEventListener('click', () => setActiveTool('select'));
-            textTool.addEventListener('click', () => setActiveTool('text'));
-            drawTool.addEventListener('click', () => setActiveTool('draw'));
-            shapeTool.addEventListener('click', () => setActiveTool('shape'));
-            blurTool.addEventListener('click', () => setActiveTool('blur'));
-            aiRemoveBg.addEventListener('click', () => setActiveTool('aiRemoveBg'));
-            aiEnhance.addEventListener('click', () => setActiveTool('aiEnhance'));
-            aiTextRecognition.addEventListener('click', () => setActiveTool('aiTextRecognition'));
-            runAi.addEventListener('click', runAiProcessing);
+            // Canvas background color picker
+            document.getElementById('canvasBg').addEventListener('input', function(e) {
+                canvas.setBackgroundColor(e.target.value, canvas.renderAll.bind(canvas));
+                saveHistory();
+            });
             
-            // Canvas events
-            canvas.on('mouse:wheel', function(opt) {
-                const delta = opt.e.deltaY;
-                const zoom = delta > 0 ? 0.95 : 1.05;
-                zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
-                opt.e.preventDefault();
-                opt.e.stopPropagation();
+            // Canvas opacity slider
+            document.getElementById('canvasOpacity').addEventListener('input', function(e) {
+                const opacity = e.target.value / 100;
+                canvas.setBackgroundColor(canvas.backgroundColor, canvas.renderAll.bind(canvas), {
+                    opacity: opacity
+                });
+                document.getElementById('canvasOpacityValue').textContent = `${e.target.value}%`;
+                saveHistory();
             });
             
-            canvas.on('object:added', saveHistory);
-            canvas.on('object:modified', saveHistory);
-            canvas.on('object:removed', saveHistory);
-            canvas.on('selection:created', handleSelection);
-            canvas.on('selection:updated', handleSelection);
-            canvas.on('selection:cleared', clearSelection);
-            canvas.on('path:created', function(e) {
-                if (e.path && e.path.selectable) {
-                    canvas.setActiveObject(e.path);
+            // Object control buttons
+            lockBtn.addEventListener('click', function() {
+                if (activeObject) {
+                    toggleLock(activeObject);
                 }
             });
             
-            // Text input events
-            textContent.addEventListener('input', updateTextContent);
-            textFont.addEventListener('change', updateTextFont);
-            textSize.addEventListener('input', updateTextSize);
-            textColor.addEventListener('input', updateTextColor);
-            textBgColor.addEventListener('input', updateTextBgColor);
-            
-            // Brush settings events
-            brushColor.addEventListener('input', updateBrushColor);
-            brushType.addEventListener('change', updateBrushType);
+            deleteBtn.addEventListener('click', function() {
+                if (activeObject) {
+                    deleteSelectedObject();
+                }
+            });
             
-            // Shape settings events
-            shapeFill.addEventListener('input', updateShapeFill);
-            shapeStroke.addEventListener('input', updateShapeStroke);
-            polygonSides.addEventListener('input', updatePolygonSides);
+            bringToFrontBtn.addEventListener('click', function() {
+                if (activeObject) {
+                    activeObject.bringToFront();
+                    canvas.renderAll();
+                    saveHistory();
+                }
+            });
             
-            // Canvas background events
-            canvasBg.addEventListener('input', updateCanvasBackground);
+            sendToBackBtn.addEventListener('click', function() {
+                if (activeObject) {
+                    activeObject.sendToBack();
+                    canvas.renderAll();
+                    saveHistory();
+                }
+            });
             
-            // Initial setup
-            setActiveTool('select');
+            // Helper function to delete selected object
+            function deleteSelectedObject() {
+                if (activeObject) {
+                    canvas.remove(activeObject);
+                    activeObject = null;
+                    canvas.renderAll();
+                    saveHistory();
+                    showNotification('Object deleted', 'success');
+                }
+            }
             
-            // Functions
+            // Helper function to show notifications
             function showNotification(message, type) {
                 const notification = document.createElement('div');
-                notification.className = `notification ${type} flex items-center`;
+                notification.className = `notification ${type}`;
                 
                 let icon;
                 if (type === 'success') {
@@ -1029,784 +926,355 @@
                 }, 3000);
             }
             
+            // History management
+            function saveHistory() {
+                const canvasState = JSON.stringify(canvas.toJSON());
+                
+                if (historyIndex < history.length - 1) {
+                    history = history.slice(0, historyIndex + 1);
+                }
+                
+                history.push(canvasState);
+                historyIndex++;
+                
+                if (history.length > 50) {
+                    history.shift();
+                    historyIndex--;
+                }
+            }
+            
+            function loadHistory(index) {
+                if (index >= 0 && index < history.length) {
+                    canvas.loadFromJSON(history[index], function() {
+                        canvas.renderAll();
+                    });
+                }
+            }
+            
+            // Undo/Redo functionality
+            document.getElementById('undoBtn').addEventListener('click', function() {
+                if (historyIndex > 0) {
+                    historyIndex--;
+                    loadHistory(historyIndex);
+                }
+            });
+            
+            document.getElementById('redoBtn').addEventListener('click', function() {
+                if (historyIndex < history.length - 1) {
+                    historyIndex++;
+                    loadHistory(historyIndex);
+                }
+            });
+            
+            // Tool selection
             function setActiveTool(tool) {
                 currentTool = tool;
-                resetCanvasEvents();
                 
-                // Update UI
+                // Update active button
                 document.querySelectorAll('.tool-btn').forEach(btn => {
-                    btn.classList.remove('bg-indigo-100', 'text-indigo-600', 'active');
-                    btn.classList.add('text-gray-700', 'hover:bg-indigo-50');
+                    btn.classList.remove('active');
                 });
+                document.getElementById(`${tool}Tool`).classList.add('active');
                 
-                // Highlight active tool
-                const activeBtn = document.getElementById(`${tool}Tool`);
-                if (activeBtn) {
-                    activeBtn.classList.add('bg-indigo-100', 'text-indigo-600', 'active');
-                }
-                
-                // Hide all property panels
-                generalProps.classList.add('hidden');
-                textProps.classList.add('hidden');
-                drawProps.classList.add('hidden');
-                shapeProps.classList.add('hidden');
-                blurProps.classList.add('hidden');
-                aiProps.classList.add('hidden');
-                
+                // Update canvas cursor
                 switch(tool) {
                     case 'select':
-                        generalProps.classList.remove('hidden');
-                        canvas.selection = true;
                         canvas.defaultCursor = 'default';
+                        canvas.selection = true;
                         break;
                     case 'text':
-                        textProps.classList.remove('hidden');
-                        canvas.selection = false;
                         canvas.defaultCursor = 'text';
-                        setupTextTool();
+                        canvas.selection = false;
                         break;
                     case 'draw':
-                        drawProps.classList.remove('hidden');
-                        canvas.selection = false;
                         canvas.defaultCursor = 'crosshair';
-                        setupDrawTool();
+                        canvas.selection = false;
                         break;
                     case 'shape':
-                        shapeProps.classList.remove('hidden');
-                        canvas.selection = false;
                         canvas.defaultCursor = 'crosshair';
-                        setupShapeTool();
+                        canvas.selection = false;
                         break;
                     case 'blur':
-                        blurProps.classList.remove('hidden');
-                        canvas.selection = false;
                         canvas.defaultCursor = 'crosshair';
-                        setupBlurTool();
-                        break;
-                    case 'aiRemoveBg':
-                    case 'aiEnhance':
-                    case 'aiTextRecognition':
-                        aiProps.classList.remove('hidden');
-                        canvas.selection = true;
-                        canvas.defaultCursor = 'default';
+                        canvas.selection = false;
                         break;
                 }
+                
+                // Show relevant properties
+                document.querySelectorAll('.property-group').forEach(group => {
+                    group.classList.add('hidden');
+                });
+                
+                if (tool === 'text') {
+                    document.getElementById('textProps').classList.remove('hidden');
+                } else if (tool === 'draw') {
+                    document.getElementById('drawProps').classList.remove('hidden');
+                }
+                
+                // Show properties panel if it's hidden
+                if (tool !== 'select') {
+                    floatingProperties.classList.remove('hidden');
+                }
             }
             
-            function resetCanvasEvents() {
-                canvas.off('mouse:down');
-                canvas.off('mouse:move');
-                canvas极速赛车开奖直播</div>
-                canvas.off('mouse:up');
-                canvas.off('mouse:dblclick');
-                isDrawing = false;
-                drawingPath = null;
-                blurArea = null;
-                polygonPoints = [];
-            }
+            // Set up tool buttons
+            document.getElementById('selectTool').addEventListener('click', () => setActiveTool('select'));
+            document.getElementById('textTool').addEventListener('click', () => setActiveTool('text'));
+            document.getElementById('drawTool').addEventListener('click', () => setActiveTool('draw'));
+            document.getElementById('shapeTool').addEventListener('click', () => setActiveTool('shape'));
+            document.getElementById('blurTool').addEventListener('click', () => setActiveTool('blur'));
             
-            function setupTextTool() {
-                canvas.on('mouse:down', function(options) {
-                    if (options.target) return;
-                    
-                    const pointer = canvas.getPointer(options.e);
-                    const text = new fabric.IText('Double click to edit', {
-                        left: pointer.x,
-                        top: pointer.y,
-                        fontFamily: textFont.value,
-                        fontSize: parseInt(textSize.value),
-                        fill: textColor.value,
-                        backgroundColor: textBgColor.value === 'transparent' ? '' : textBgColor.value,
-                        padding: 5,
-                        selectable: true
-                    });
-                    
-                    canvas.add(text);
-                    canvas.setActiveObject(text);
-                    text.enterEditing();
-                    text.selectAll();
-                });
-            }
+            // Initialize with select tool
+            setActiveTool('select');
             
-            function setupDrawTool() {
-                canvas.on('mouse:down', function(options) {
-                    isDrawing = true;
-                    
-                    const pointer = canvas.getPointer(options.e);
-                    drawingPath = new fabric.Path(`M ${pointer.x} ${pointer.y}`, {
-                        stroke: brushSettings.color,
-                        strokeWidth: brushSettings.size,
-                        fill: 'transparent',
-                        opacity: brushSettings.opacity,
-                        selectable: true
-                    });
-                    
-                    // Apply brush type
-                    if (brushSettings.type === 'spray') {
-                        drawingPath.strokeLineCap = 'round';
-                        drawingPath.strokeLineJoin = 'round';
-                        drawingPath.strokeDashArray = [1, brushSettings.size];
-                    } else if (brushSettings.type === 'pattern') {
-                        drawingPath.strokeDashArray = [brushSettings.size, brushSettings.size/2];
-                    }
-                    
-                    canvas.add(drawingPath);
-                });
+            // Canvas event listeners for tools
+            canvas.on('mouse:down', function(options) {
+                if (options.target && options.target.locked) {
+                    return;
+                }
                 
-                canvas.on('mouse:move', function(options) {
-                    if (!isDrawing || !drawingPath) return;
-                    
+                if (options.target) {
+                    activeObject = options.target;
+                    return;
+                }
+                
+                const pointer = canvas.getPointer(options.e);
+                
+                switch(currentTool) {
+                    case 'text':
+                        addText(pointer);
+                        break;
+                    case 'draw':
+                        startDrawing(pointer);
+                        break;
+                    case 'shape':
+                        addRectangle(pointer);
+                        break;
+                    case 'blur':
+                        addBlur(pointer);
+                        break;
+                }
+            });
+            
+            canvas.on('mouse:move', function(options) {
+                if (isDrawing && drawingPath && currentTool === 'draw') {
                     const pointer = canvas.getPointer(options.e);
-                    const pathData = drawingPath.path;
-                    
-                    pathData.push([
+                    drawingPath.path.push([
                         'L',
                         pointer.x,
                         pointer.y
                     ]);
-                    
-                    drawingPath.set({ path: pathData });
                     canvas.renderAll();
-                });
-                
-                canvas.on('mouse:up', function() {
-                    isDrawing = false;
-                    drawingPath = null;
-                });
-            }
+                }
+            });
             
-            function setupShapeTool() {
-                let startX, startY, shape;
-                
-                canvas.on('mouse:down', function(options) {
-                    const pointer = canvas.getPointer(options.e);
-                    startX = pointer.x;
-                    startY = pointer.y;
-                    
-                    if (shapeType.value === 'polygon') {
-                        if (polygonPoints.length === 0) {
-                            // First point
-                            polygonPoints.push({ x: startX, y: startY });
-                            
-                            // Create a line that will follow the mouse
-                            shape = new fabric.Line([startX, startY, startX, startY], {
-                                stroke: shapeStroke.value,
-                                strokeWidth: parseInt(shapeStrokeWidth.value),
-                                fill: shapeFill.value,
-                                selectable: false
-                            });
-                            canvas.add(shape);
-                            activeObject = shape;
-                        } else {
-                            // Add new point
-                            polygonPoints.push({ x: pointer.x, y: pointer.y });
-                            
-                            // Update the polygon
-                            updatePolygonShape();
-                        }
-                        return;
-                    }
-                    
-                    switch(shapeType.value) {
-                        case 'rect':
-                            shape = new fabric.Rect({
-                                left: startX,
-                                top: startY,
-                                width: 0,
-                                height极速赛车开奖直播</div>
-                                fill: shapeFill.value,
-                                stroke: shapeStroke.value,
-                                strokeWidth: parseInt(shapeStrokeWidth.value),
-                                selectable: true
-                            });
-                            break;
-                        case 'circle':
-                            shape = new fabric.Circle({
-                                left: startX,
-                                top: startY,
-                                radius: 0,
-                                fill: shapeFill.value,
-                                stroke: shapeStroke.value,
-                                strokeWidth: parseInt(shapeStrokeWidth.value),
-                                selectable: true
-                            });
-                            break;
-                        case 'triangle':
-                            shape = new fabric.Triangle({
-                                left: startX,
-                                top: startY,
-                                width: 0,
-                                height: 0,
-                                fill: shapeFill.value,
-                                stroke: shapeStroke.value,
-                                strokeWidth: parseInt(shapeStrokeWidth.value),
-                                selectable: true
-                            });
-                            break;
-                        case 'line':
-                            shape = new fabric.Line([startX, startY, startX, startY], {
-                                stroke: shapeStroke.value,
-                                strokeWidth: parseInt(shapeStrokeWidth.value),
-                                selectable: true
-                            });
-                            break;
-                    }
-                    
-                    if (shape) {
-                        canvas.add(shape);
-                        activeObject = shape;
-                    }
-                });
-                
-                canvas.on('mouse:move', function(options) {
-                    if (!activeObject && polygonPoints.length === 0) return;
-                    
-                    const pointer = canvas.getPointer(options.e);
-                    
-                    if (polygonPoints.length > 0) {
-                        // Update the temporary line for polygon creation
-                        const lastPoint = polygonPoints[polygonPoints.length - 1];
-                        activeObject.set({
-                            x2: pointer.x,
-                            y2: pointer.y
-                        });
-                        canvas.renderAll();
-                        return;
-                    }
-                    
-                    switch(shapeType.value) {
-                        case 'rect':
-                            activeObject.set({
-                                width: pointer.x - startX,
-                                height: pointer.y - startY,
-                                absolutePositioned: true
-                            });
-                            break;
-                        case 'circle':
-                            const radius = Math.sqrt(
-                                Math.pow(pointer.x - startX, 2) + 
-                                Math.pow(pointer.y - startY, 2)
-                            ) / 2;
-                            activeObject.set({
-                                radius: radius,
-                                left: startX - radius,
-                                top: startY - radius
-                            });
-                            break;
-                        case 'triangle':
-                            activeObject.set({
-                                width: pointer.x - startX,
-                                height: pointer.y - startY
-                            });
-                            break;
-                        case 'line':
-                            activeObject.set({
-                                x2: pointer.x,
-                                y2: pointer.y
-                            });
-                            break;
-                    }
-                    
-                    canvas.renderAll();
-                });
-                
-                canvas.on('mouse:up', function(options) {
-                    if (shapeType.value === 'polygon') {
-                        // For polygon, we don't finish until double click
-                        return;
-                    }
-                    
-                    if (activeObject) {
-                        // For other shapes, finalize the shape
-                        if (Math.abs(activeObject.width) < 5 || Math.abs(activeObject.height) < 5) {
-                            // Too small, probably accidental click
-                            canvas.remove(activeObject);
-                        } else {
-                            // Make sure it's selectable
-                            activeObject.set({ selectable: true });
-                            canvas.setActiveObject(activeObject);
-                        }
-                        activeObject = null;
-                    }
-                });
-                
-                canvas.on('mouse:dblclick', function() {
-                    if (shapeType.value === 'polygon' && polygonPoints.length >= 2) {
-                        // Finalize the polygon
-                        updatePolygonShape(true);
-                        polygonPoints = [];
-                        activeObject = null;
-                    }
-                });
-            }
+            canvas.on('mouse:up', function() {
+                if (isDrawing) {
+                    isDrawing = false;
+                    saveHistory();
+                }
+            });
             
-            function updatePolygonShape(finalize = false) {
-                if (polygonPoints.length < 2) return;
-                
-                // Remove the temporary line
-                if (activeObject) {
-                    canvas.remove(activeObject);
+            canvas.on('object:selected', function(options) {
+                if (options.target.locked) {
+                    canvas.discardActiveObject();
+                    return;
                 }
                 
-                // Create polygon path
-                let path = `M ${polygonPoints[0].x} ${polygonPoints[0].y}`;
-                for (let i = 1; i < polygonPoints.length; i++) {
-                    path += ` L ${polygonPoints[i].x} ${polygonPoints[i].y}`;
-                }
+                activeObject = options.target;
+                floatingProperties.classList.remove('hidden');
                 
-                if (finalize) {
-                    // Close the path
-                    path += ' Z';
-                    
-                    const polygon = new fabric.Path(path, {
-                        fill: shapeFill.value,
-                        stroke: shapeStroke.value,
-                        strokeWidth: parseInt(shapeStrokeWidth.value),
-                        selectable: true
-                    });
-                    
-                    canvas.add(polygon);
-                    canvas.setActiveObject(polygon);
-                    activeObject = null;
+                // Show object controls in properties panel
+                document.getElementById('objectProps').classList.remove('hidden');
+                
+                // Update lock button state
+                if (activeObject.locked) {
+                    lockBtn.innerHTML = '<i class="fas fa-lock locked"></i>';
                 } else {
-                    // Create a new temporary line
-                    const lastPoint = polygonPoints[polygonPoints.length - 1];
-                    activeObject = new fabric.Line([
-                        lastPoint.x, lastPoint.y, 
-                        lastPoint.x, lastPoint.y
-                    ], {
-                        stroke: shapeStroke.value,
-                        strokeWidth: parseInt(shapeStrokeWidth.value),
-                        selectable: false
-                    });
-                    
-                    canvas.add(activeObject);
+                    lockBtn.innerHTML = '<i class="fas fa-lock-open"></i>';
                 }
+            });
+            
+            canvas.on('selection:cleared', function() {
+                activeObject = null;
+                document.getElementById('objectProps').classList.add('hidden');
+            });
+            
+            // Tool functions
+            function addText(position) {
+                const text = new fabric.IText('Type here', {
+                    left: position.x,
+                    top: position.y,
+                    fontFamily: document.getElementById('textFont').value,
+                    fontSize: parseInt(document.getElementById('textSize').value),
+                    fill: document.getElementById('textColor').value,
+                    selectable: true,
+                    hasControls: true,
+                    hasBorders: true
+                });
                 
+                canvas.add(text);
+                canvas.setActiveObject(text);
+                text.enterEditing();
+                text.hiddenTextarea.focus();
                 canvas.renderAll();
+                saveHistory();
             }
             
-            function setupBlurTool() {
-                canvas.on('mouse:down', function(options) {
-                    if (options.target) return;
-                    
-                    const pointer = canvas.getPointer(options.e);
-                    blurArea = new fabric.Rect({
-                        left: pointer.x,
-                        top: pointer.y,
-                        width: 0,
-                        height: 0,
-                        fill: 'rgba(0,0,0,0.3)',
-                        stroke: '#666',
-                        strokeWidth: 1,
-                        strokeDashArray: [5, 5],
-                        selectable: false,
-                        hasControls: false,
-                        lockMovementX: true,
-                        lockMovementY: true,
-                        lockRotation: true,
-                        lockScalingX: true,
-                        lockScalingY: true,
-                        lockUniScaling: true
-                    });
-                    
-                    canvas.add(blurArea);
-                });
-                
-                canvas.on('mouse:move', function(options) {
-                    if (!bl极速赛车开奖直播</div>
-                    return;
-                    
-                    const pointer = canvas.getPointer(options.e);
-                    blurArea.set({
-                        width: pointer.x - blurArea.left,
-                        height: pointer.y - blurArea.top
-                    });
-                    
-                    canvas.renderAll();
+            function startDrawing(position) {
+                isDrawing = true;
+                drawingPath = new fabric.Path(`M ${position.x} ${position.y}`, {
+                    stroke: document.getElementById('brushColor').value,
+                    strokeWidth: parseInt(document.getElementById('brushSize').value),
+                    fill: 'transparent',
+                    selectable: true,
+                    hasControls: true,
+                    hasBorders: true
                 });
                 
-                canvas.on('mouse:up', function() {
-                    if (!blurArea) return;
-                    
-                    // Apply blur effect to the selected area
-                    applyBlurEffect(blurArea);
-                    canvas.remove(blurArea);
-                    blurArea = null;
-                });
+                canvas.add(drawingPath);
             }
             
-            function applyBlurEffect(area) {
-                // Create a rectangle that represents the blurred area
-                const blurRect = new fabric.Rect({
-                    left: area.left,
-                    top: area.top,
-                    width: area.width,
-                    height: area.height,
-                    fill: 'rgba(255,255,255,0.7)',
+            function addRectangle(position) {
+                const rect = new fabric.Rect({
+                    left: position.x,
+                    top: position.y,
+                    width: 100,
+                    height: 100,
+                    fill: 'transparent',
+                    stroke: '#ffffff',
+                    strokeWidth: 2,
                     selectable: true,
-                    type: 'blur',
-                    blurIntensity: parseInt(blurIntensity.value),
-                    blurRadius: parseInt(blurRadius.value),
-                    blurType: blurType.value
+                    hasControls: true,
+                    hasBorders: true
                 });
                 
-                // Apply SVG filter for blur effect
-                if (blurType.value === 'gaussian') {
-                    blurRect.set({
-                        filters: [
-                            new fabric.Image.filters.Blur({
-                                blur: blurRect.blurIntensity / 5
-                            })
-                        ]
-                    });
-                } else if (blurType.value === 'pixelate') {
-                    blurRect.set({
-                        filters: [
-                            new fabric.Image.filters.Pixelate({
-                                blocksize: Math.max(2, 10 - blurRect.blurIntensity / 2)
-                            })
-                        ]
-                    });
-                }
-                
-                canvas.add(blurRect);
+                canvas.add(rect);
+                canvas.setActiveObject(rect);
                 canvas.renderAll();
-            }
-            
-            function runAiProcessing() {
-                if (!apiKey) {
-                    showNotification('Please set your DeepSeek API key first', 'error');
-                    apiKeyModal.classList.remove('hidden');
-                    return;
-                }
-                
-                aiProcessing.classList.remove('hidden');
+                saveHistory();
                 
-                // Simulate AI processing with DeepSeek API
-                // In a real implementation, you would make actual API calls here
-                setTimeout(() => {
-                    aiProcessing.classList.add('hidden');
-                    
-                    // Simulate different AI effects based on tool
-                    if (currentTool === 'aiRemoveBg') {
-                        // Simulate background removal
-                        const bgRect = new fabric.Rect({
-                            left: 100,
-                            top: 100,
-                            width: 200,
-                            height: 200,
-                            fill: 'transparent',
-                            stroke: '#6366f1',
-                            strokeWidth: 2,
-                            strokeDashArray: [极速赛车开奖直播</div>
-                            selectable: true
-                        });
-                        
-                        canvas.add(bgRect);
-                        canvas.setActiveObject(bgRect);
-                        
-                        showNotification('Background removed successfully!', 'success');
-                    } 
-                    else if (currentTool === 'aiEnhance') {
-                        // Simulate image enhancement
-                        const bgImage = canvas.backgroundImage;
-                        if (bgImage) {
-                            bgImage.set({
-                                filters: [
-                                    new fabric.Image.filters.Contrast({
-                                        contrast: 0.1 * parseInt(aiEnhanceMode.value === 'contrast' ? 5 : 2)
-                                    }),
-                                    new fabric.Image.filters.Brightness({
-                                        brightness: 0.05
-                                    })
-                                ]
-                            });
-                            canvas.renderAll();
-                            showNotification('Image enhanced successfully!', 'success');
-                        }
-                    }
-                    else if (currentTool === 'aiTextRecognition') {
-                        // Simulate OCR text recognition
-                        const text = new fabric.IText('Recognized text: Lorem ipsum dolor sit amet', {
-                            left: 50,
-                            top: 50,
-                            fontFamily: 'Arial',
-                            fontSize: 16,
-                            fill: '#6366f1',
-                            selectable: true
-                        });
-                        
-                        canvas.add(text);
-                        canvas.setActiveObject(text);
-                        
-                        showNotification('Text recognized successfully!', 'success');
-                    }
-                }, 2000);
+                // Add lock controls to the rectangle
+                addLockControls(rect);
             }
             
-            function handleFileUpload(e) {
-                const file = e.target.files[0];
-                if (!file) return;
-                
-                if (!file.type.match('image.*')) {
-                    showNotification('Please select an image file (JPG, PNG, GIF)', 'error');
-                    return;
-                }
-                
-                if (file.size > 10 * 1024 * 1024) {
-                    showNotification('Image size should be less than 10MB', 'error');
-                    return;
-                }
-                
-                const reader = new FileReader();
-                reader.onload = function(f) {
-                    fabric.Image.fromURL(f.target.result, function(img) {
-                        // Clear canvas first
-                        canvas.clear();
-                        
-                        // Calculate the scale to fit the image within the canvas
-                        const canvasWidth = canvas.getWidth();
-                        const canvasHeight = canvas.getHeight();
-                        
-                        let scaleX = canvasWidth / img.width;
-                        let scaleY = canvasHeight / img.height;
-                        let scale = Math.min(scaleX, scaleY);
-                        
-                        // If the image is smaller than the canvas, don't scale it up
-                        if (scale > 1) {
-                            scale = 1;
-                        }
-                        
-                        // Set the background image with proper scaling and centering
-                        canvas.setBackgroundImage(img, function() {
-                            canvas.renderAll();
-                            // Save initial state
-                            saveHistory();
-                        }, {
-                            scaleX: scale,
-                            scaleY: scale,
-                            originX: 'left',
-                            originY: 'top',
-                            left: (canvasWidth - img.width * scale) / 2,
-                            top: (canvasHeight - img.height * scale) / 2
-                        });
-                        
-                        // Update image info
-                        imageInfo.textContent = `${file.name} (${Math.round(file.size/1024)}KB, ${img.width}x${img.height})`;
-                        
-                        // Close modal
-                        uploadModal.classList.add('hidden');
-                        
-                    }, {
-                        crossOrigin: 'anonymous'
-                    });
-                };
+            function addBlur(position) {
+                const circle = new fabric.Circle({
+                    left: position.x,
+                    top: position.y,
+                    radius: 30,
+                    fill: 'rgba(0,0,0,0.5)',
+                    selectable: true,
+                    hasControls: true,
+                    hasBorders: true
+                });
                 
-                reader.onerror = function() {
-                    showNotification('Error reading file. Please try another image.', 'error');
-                };
+                canvas.add(circle);
+                canvas.setActiveObject(circle);
+                canvas.renderAll();
+                saveHistory();
                 
-                reader.readAsDataURL(file);
+                // Add lock controls to the blur circle
+                addLockControls(circle);
             }
             
-            function saveCanvasState() {
-                // Serialize the canvas state including background image
-                const canvasState = {
-                    objects: canvas.toJSON(['selectable', 'hasControls']),
-                    backgroundImage: canvas.backgroundImage ? canvas.backgroundImage.toJSON() : null,
-                    backgroundColor: canvas.backgroundColor,
-                    zoom: zoomLevel
-                };
-                
-                // Store in history
-                if (historyIndex < history.length - 1) {
-                    history = history.slice(0, historyIndex + 1);
+            // Text properties
+            document.getElementById('textColor').addEventListener('input', function(e) {
+                if (activeObject && activeObject.type === 'i-text') {
+                    activeObject.set('fill', e.target.value);
+                    canvas.renderAll();
+                    saveHistory();
                 }
-                
-                history.push(JSON.stringify(canvasState));
-                historyIndex++;
-                
-                // Limit history size to prevent memory issues
-                if (history.length > 50) {
-                    history.shift();
-                    historyIndex--;
+            });
+            
+            document.getElementById('textSize').addEventListener('input', function(e) {
+                if (activeObject && activeObject.type === 'i-text') {
+                    activeObject.set('fontSize', parseInt(e.target.value));
+                    document.getElementById('textSizeValue').textContent = `${e.target.value}px`;
+                    canvas.renderAll();
+                    saveHistory();
                 }
-                
-                updateUndoRedoButtons();
-                
-                // In a real app, you might save to localStorage or server
-                localStorage.setItem('savedCanvas', JSON.stringify(canvasState));
-                
-                showNotification('Project saved successfully!', 'success');
-            }
+            });
             
-            function downloadCanvas() {
-                const format = exportFormat.value;
-                const quality = exportFormat.value === 'jpg' || exportFormat.value === 'webp' 
-                    ? parseInt(exportQuality.value) / 100 
-                    : 1;
-                
-                // Handle size option
-                let width = canvas.width;
-                let height = canvas.height;
-                
-                if (exportSize.value !== 'original') {
-                    const size = parseInt(exportSize.value);
-                    const scale = size / canvas.width;
-                    width = size;
-                    height = canvas.height * scale;
+            document.getElementById('textFont').addEventListener('change', function(e) {
+                if (activeObject && activeObject.type === 'i-text') {
+                    activeObject.set('fontFamily', e.target.value);
+                    canvas.renderAll();
+                    saveHistory();
                 }
-                
-                // Create temporary canvas for resizing
-                const tempCanvas = document.createElement('canvas');
-                const tempCtx = tempCanvas.getContext('2d');
-                tempCanvas.width = width;
-                tempCanvas.height = height;
-                
-                // Draw the canvas content to the temporary canvas
-                tempCtx.drawImage(canvas.lowerCanvasEl, 0, 0, width, height);
+            });
+            
+            // Brush properties
+            document.getElementById('brushColor').addEventListener('input', function(e) {
+                // This would affect new drawings
+            });
+            
+            document.getElementById('brushSize').addEventListener('input', function(e) {
+                document.getElementById('brushSizeValue').textContent = `${e.target.value}px`;
+            });
+            
+            // Save/Export functionality (simplified)
+            document.getElementById('saveBtn').addEventListener('click', function() {
+                const dataURL = canvas.toDataURL({
+                    format: 'png',
+                    quality: 1
+                });
                 
                 const link = document.createElement('a');
-                link.download = `snapedit-${new Date().getTime()}.${format}`;
-                link.href = tempCanvas.toDataURL({
-                    format: format,
-                    quality: quality
-                });
+                link.download = 'snapedit-export.png';
+                link.href = dataURL;
                 link.click();
                 
-                exportModal.classList.add('hidden');
-            }
+                showNotification('Image exported successfully!', 'success');
+            });
             
-            function copyToClipboard() {
-                const format = exportFormat.value;
-                const quality = exportFormat.value === 'jpg' || exportFormat.value === 'webp' 
-                    ? parseInt(exportQuality.value) / 100 
-                    : 1;
-                
-                canvas.toBlob(function(blob) {
-                    navigator.clipboard.write([
-                        new ClipboardItem({
-                            [blob.type]: blob
-                        })
-                    ]).then(() => {
-                        showNotification('Image copied to clipboard!', 'success');
-                        exportModal.classList.add('hidden');
-                    }).catch(err => {
-                        console.error('Failed to copy:', err);
-                        showNotification('Failed to copy image to clipboard', 'error');
-                    });
-                }, `image/${format}`, quality);
-            }
+            document.getElementById('exportBtn').addEventListener('click', function() {
+                // In a real app, this would show export options
+                showNotification('Export options would appear here', 'info');
+            });
             
-            function toggleQualityControl() {
-                if (exportFormat.value === 'jpg' || exportFormat.value === 'webp') {
-                    qualityContainer.classList.remove('hidden');
-                } else {
-                    qualityContainer.classList.add('hidden');
-                }
-            }
+            // AI Tools (simplified)
+            document.getElementById('aiRemoveBg').addEventListener('click', function() {
+                showNotification('AI Background Removal would run here', 'info');
+            });
             
-            function togglePolygonOptions() {
-                if (shapeType.value === 'polygon') {
-                    polygonSidesContainer.classList.remove('hidden');
-                } else {
-                    polygonSidesContainer.classList.add('hidden');
-                }
-            }
+            document.getElementById('aiEnhance').addEventListener('click', function() {
+                showNotification('AI Enhancement would run here', 'info');
+            });
             
-            function saveHistory() {
-                // Serialize the canvas state including background image
-                const canvasState = {
-                    objects: canvas.toJSON(['selectable', 'hasControls']),
-                    backgroundImage: canvas.backgroundImage ? canvas.backgroundImage.toJSON() : null,
-                    backgroundColor: canvas.backgroundColor,
-                    zoom: zoomLevel
-                };
+            // Add keyboard shortcuts for zoom and delete
+            document.addEventListener('keydown', function(e) {
+                // Check for Ctrl/Cmd key
+                const ctrlKey = e.ctrlKey || e.metaKey;
                 
-                // Only save to history if not already at current index
-                if (historyIndex === -1 || JSON.stringify(canvasState) !== history[historyIndex]) {
-                    // If we're not at the end of history, truncate the future
-                    if (historyIndex < history.length - 1) {
-                        history = history.slice(0, historyIndex + 1);
-                    }
-                    
-                    history.push(JSON.stringify(canvasState));
-                    historyIndex++;
-                    
-                    // Limit history size
-                    if (history.length > 50) {
-                        history.shift();
-                        historyIndex--;
-                    }
-                    
-                    updateUndoRedoButtons();
-                }
-            }
-            
-            function undo() {
-                if (historyIndex > 0) {
-                    historyIndex--;
-                    loadStateFromHistory();
+                // Zoom shortcuts
+                if (ctrlKey && e.key === '+') {
+                    e.preventDefault();
+                    zoomIn();
+                } else if (ctrlKey && e.key === '-') {
+                    e.preventDefault();
+                    zoomOut();
+                } else if (ctrlKey && e.key === '0') {
+                    e.preventDefault();
+                    resetZoom();
                 }
-            }
-            
-            function redo() {
-                if (historyIndex < history.length - 1) {
-                    historyIndex++;
-                    loadStateFromHistory();
+                
+                // Delete/Backspace shortcut
+                if ((e.key === 'Delete' || e.key === 'Backspace') && activeObject) {
+                    e.preventDefault();
+                    deleteSelectedObject();
                 }
-            }
+            });
             
-            function loadStateFromHistory() {
-                if (historyIndex >= 0 && historyIndex < history.length) {
-                    const state = JSON.parse(history[historyIndex]);
-                    
-                    // Clear current canvas
-                    canvas.clear();
-                    
-                    // Load background color
-                    canvas.setBackgroundColor(state.backgroundColor || '#ffffff', function() {
-                        canvas.renderAll();
-                    });
-                    
-                    // Load background image if exists
-                    if (state.backgroundImage) {
-                        fabric.Image.fromURL(state.backgroundImage.src, function(img) {
-                            img.set({
-                                scaleX: state.backgroundImage.scaleX,
-                                scaleY: state.backgroundImage.scaleY,
-                                left: state.backgroundImage.left,
-                                top: state.backgroundImage.top
-                            });
-                            canvas.setBackgroundImage(img, function() {
-                                canvas.renderAll();
-                            });
-                        });
+            // Update lock button positions when zooming
+            canvas.on('after:render', function() {
+                canvas.forEachObject(function(obj) {
+                    if (obj.lockButton) {
+                        updateLockButtonPosition(obj);
                     }
-                    
-                    // Load objects
-                    if (state.objects) {
-                        canvas.loadFromJSON(state.objects, function() {
-                            canvas.renderAll();
-                        });
-                    }
-                    
-                    // Restore zoom level
-                    zoomLevel = state.zoom || 1;
-                    updateZoomDisplay();
-                    
-                    updateUndoRedoButtons();
-                }
-            }
-            
-            function updateUndoRedoButtons() {
-                undoBtn.disabled = historyIndex <= 0;
-                redoBtn.disabled = historyIndex >= history.length - 1;
-            }
-            
-            function handleSelection(e) {
-                activeObject = e.selected[0];
-                
-                // Show appropriate property
+                });
+            });
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=sqibhe/snapeidit" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>
\ No newline at end of file
