Spaces:

Gokul1510
/

dimo-v1

Running

App Files Files Community

Gokul1510 commited on Mar 31

Commit

1512237

verified ·

1 Parent(s): 673ded3

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +607 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Dimo V1
-emoji: 🌖
 colorFrom: blue
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: dimo-v1
+emoji: 🐳
 colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,607 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DiMo - Diagrams in Motion</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">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        :root {
+            --primary: #6366f1;
+            --primary-dark: #4f46e5;
+            --secondary: #f43f5e;
+            --dark: #1e293b;
+            --light: #f8fafc;
+        }
+        body {
+            font-family: 'Inter', sans-serif;
+            overflow: hidden;
+            background-color: #f1f5f9;
+        }
+        #canvas-container {
+            background-color: #fff;
+            background-image:
+                linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
+            background-size: 20px 20px;
+        }
+        .shape {
+            position: absolute;
+            cursor: move;
+            user-select: none;
+        }
+        .timeline-keyframe {
+            width: 12px;
+            height: 12px;
+            background-color: var(--primary);
+            border-radius: 50%;
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+        .timeline-keyframe:hover {
+            background-color: var(--primary-dark);
+            transform: translateY(-50%) scale(1.2);
+        }
+        .resize-handle {
+            width: 8px;
+            height: 8px;
+            background-color: var(--primary);
+            position: absolute;
+            border-radius: 50%;
+            pointer-events: all;
+        }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #f1f1f1;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #c7d2fe;
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #a5b4fc;
+        }
+        /* Animation for modal */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .modal-animation {
+            animation: fadeIn 0.3s ease-out;
+        }
+        /* Custom color picker */
+        .color-swatch {
+            width: 24px;
+            height: 24px;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: transform 0.2s ease;
+        }
+        .color-swatch:hover {
+            transform: scale(1.1);
+        }
+        /* Context menu */
+        .context-menu {
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.2s ease;
+        }
+        .context-menu.active {
+            opacity: 1;
+            visibility: visible;
+        }
+    </style>
+</head>
+<body class="h-screen flex flex-col">
+    <!-- Top Navigation Bar -->
+    <header class="bg-white border-b border-gray-200 px-4 py-2 flex items-center justify-between">
+        <div class="flex items-center space-x-4">
+            <div class="text-indigo-600 font-bold text-xl flex items-center">
+                <i class="fas fa-project-diagram mr-2"></i>
+                DiMo
+            </div>
+            <div class="text-xs text-indigo-500 bg-indigo-50 px-2 py-1 rounded">BETA</div>
+        </div>
+        <div class="flex items-center space-x-2">
+            <button class="px-3 py-1.5 text-sm rounded-lg border border-indigo-200 text-indigo-600 hover:bg-indigo-50">
+                <i class="fas fa-cloud mr-2"></i>Save to Cloud
+            </button>
+            <div class="relative">
+                <button id="export-btn" class="px-3 py-1.5 text-sm rounded-lg bg-indigo-600 text-white hover:bg-indigo-700">
+                    <i class="fas fa-share mr-2"></i>Export
+                </button>
+                <div id="export-options" class="hidden absolute right-0 mt-1 w-48 bg-white rounded-md shadow-lg py-1 z-50">
+                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">GIF</a>
+                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">PNG/JPG</a>
+                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">MP4</a>
+                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Lottie</a>
+                </div>
+            </div>
+            <button id="login-btn" class="px-3 py-1.5 text-sm rounded-lg bg-indigo-100 text-indigo-600 hover:bg-indigo-200">
+                <i class="fas fa-user mr-2"></i>Login
+            </button>
+        </div>
+    </header>
+    <!-- Main Content Area -->
+    <div class="flex flex-1 overflow-hidden">
+        <!-- Left Toolbar -->
+        <div class="w-16 bg-white border-r border-gray-200 flex flex-col items-center py-4 space-y-4">
+            <button class="p-2 rounded-lg hover:bg-gray-100 text-gray-700" title="Select Tool">
+                <i class="fas fa-mouse-pointer"></i>
+            </button>
+            <button class="p-2 rounded-lg hover:bg-gray-100 text-gray-700" title="Rectangle">
+                <i class="far fa-square"></i>
+            </button>
+            <button class="p-2 rounded-lg hover:bg-gray-100 text-gray-700" title="Ellipse">
+                <i class="far fa-circle"></i>
+            </button>
+            <button class="p-2 rounded-lg hover:bg-gray-100 text-gray-700" title="Line">
+                <i class="fas fa-slash"></i>
+            </button>
+            <button class="p-2 rounded-lg hover:bg-gray-100 text-gray-700" title="Arrow">
+                <i class="fas fa-long-arrow-alt-right"></i>
+            </button>
+            <button class="p-2 rounded-lg hover:bg-gray-100 text-gray-700" title="Text">
+                <i class="fas fa-font"></i>
+            </button>
+            <button class="p-2 rounded-lg hover:bg-gray-100 text-gray-700" title="Freehand">
+                <i class="fas fa-pencil-alt"></i>
+            </button>
+            <button class="p-2 rounded-lg hover:bg-gray-100 text-gray-700" title="Node Editor">
+                <i class="fas fa-project-diagram"></i>
+            </button>
+            <div class="border-t border-gray-200 w-8 mx-auto my-2"></div>
+            <button class="p-2 rounded-lg hover:bg-gray-100 text-gray-700" title="Zoom In">
+                <i class="fas fa-search-plus"></i>
+            </button>
+            <button class="p-2 rounded-lg hover:bg-gray-100 text-gray-700" title="Zoom Out">
+                <i class="fas fa-search-minus"></i>
+            </button>
+            <button class="p-2 rounded-lg hover:bg-gray-100 text-gray-700" title="Reset Zoom">
+                <i class="fas fa-expand"></i>
+            </button>
+        </div>
+        <!-- Properties Panel -->
+        <div class="w-64 bg-white border-r border-gray-200 flex flex-col overflow-hidden">
+            <div class="p-3 border-b border-gray-200 font-medium text-gray-700">Properties</div>
+            <div class="flex-1 overflow-y-auto p-4">
+                <div class="mb-4">
+                    <label class="block text-xs font-medium text-gray-500 mb-1">Object Type</label>
+                    <div class="text-sm">Rectangle</div>
+                </div>
+                <div class="mb-4">
+                    <label class="block text-xs font-medium text-gray-500 mb-1">Position</label>
+                    <div class="flex space-x-2">
+                        <input type="number" value="120" class="w-16 text-sm p-1 border rounded">
+                        <input type="number" value="80" class="w-16 text-sm p-1 border rounded">
+                    </div>
+                </div>
+                <div class="mb-4">
+                    <label class="block text-xs font-medium text-gray-500 mb-1">Size</label>
+                    <div class="flex space-x-2">
+                        <input type="number" value="200" class="w-16 text-sm p-1 border rounded">
+                        <input type="number" value="150" class="w-16 text-sm p-1 border rounded">
+                    </div>
+                </div>
+                <div class="mb-4">
+                    <label class="block text-xs font-medium text-gray-500 mb-1">Fill Color</label>
+                    <div class="flex items-center">
+                        <div class="color-swatch bg-indigo-500 mr-2" style="background-color: #6366f1;"></div>
+                        <input type="text" value="#6366f1" class="text-sm p-1 border rounded flex-1">
+                        <button class="ml-2 p-1 text-gray-500 hover:text-gray-700">
+                            <i class="fas fa-undo"></i>
+                        </button>
+                    </div>
+                    <div class="flex flex-wrap mt-1">
+                        <div class="color-swatch bg-red-500 m-0.5" title="Red #ef4444"></div>
+                        <div class="color-swatch bg-blue-500 m-0.5" title="Blue #3b82f6"></div>
+                        <div class="color-swatch bg-green-500 m-0.5" title="Green #10b981"></div>
+                        <div class="color-swatch bg-yellow-500 m-0.5" title="Yellow #f59e0b"></div>
+                        <div class="color-swatch bg-purple-500 m-0.5" title="Purple #8b5cf6"></div>
+                        <div class="color-swatch bg-pink-500 m-0.5" title="Pink #ec4899"></div>
+                    </div>
+                </div>
+                <div class="mb-4">
+                    <label class="block text-xs font-medium text-gray-500 mb-1">Stroke Color</label>
+                    <div class="flex items-center">
+                        <div class="color-swatch bg-gray-800 mr-2" style="background-color: #1e293b;"></div>
+                        <input type="text" value="#1e293b" class="text-sm p-1 border rounded flex-1">
+                        <button class="ml-2 p-1 text-gray-500 hover:text-gray-700">
+                            <i class="fas fa-undo"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="mb-4">
+                    <label class="block text-xs font-medium text-gray-500 mb-1">Stroke Width</label>
+                    <input type="range" min="1" max="10" value="2" class="w-full">
+                </div>
+                <div class="mb-4">
+                    <label class="block text-xs font-medium text-gray-500 mb-1">Opacity</label>
+                    <input type="range" min="0" max="100" value="100" class="w-full">
+                </div>
+                <div class="mb-4">
+                    <label class="block text-xs font-medium text-gray-500 mb-1">Corner Radius</label>
+                    <input type="range" min="0" max="50" value="0" class="w-full">
+                </div>
+                <div class="mb-4 pt-2 border-t border-gray-200">
+                    <label class="block text-xs font-medium text-gray-500 mb-1">Layer</label>
+                    <div class="flex space-x-1">
+                        <button class="p-1.5 text-xs bg-gray-100 rounded hover:bg-gray-200">
+                            <i class="fas fa-arrow-up"></i> Front
+                        </button>
+                        <button class="p-1.5 text-xs bg-gray-100 rounded hover:bg-gray-200">
+                            <i class="fas fa-arrow-down"></i> Back
+                        </button>
+                        <button class="p-1.5 text-xs bg-gray-100 rounded hover:bg-gray-200">
+                            <i class="fas fa-object-group"></i> Group
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Main Canvas Area -->
+        <div class="flex-1 relative overflow-hidden">
+            <div id="canvas-container" class="w-full h-full relative overflow-hidden">
+                <!-- Example shapes -->
+                <div class="shape" style="left: 120px; top: 80px; width: 200px; height: 150px; background-color: rgba(99, 102, 241, 0.8); border: 2px solid #1e293b;"></div>
+                <div class="shape" style="left: 200px; top: 150px; width: 180px; height: 120px; background-color: rgba(239, 68, 68, 0.8); border: 2px solid #1e293b; border-radius: 10px;"></div>
+                <div class="shape" style="left: 350px; top: 100px; width: 160px; height: 160px; background-color: rgba(16, 185, 129, 0.8); border: 2px solid #1e293b; border-radius: 50%;"></div>
+                <!-- Resize handles would be added dynamically -->
+            </div>
+            <!-- Zoom level indicator -->
+            <div class="absolute right-2 bottom-2 bg-white px-2 py-1 rounded border border-gray-200 text-xs">
+                100%
+            </div>
+        </div>
+        <!-- Right Panel - Timeline -->
+        <div class="w-72 bg-white border-l border-gray-200 flex flex-col">
+            <div class="p-3 border-b border-gray-200 font-medium text-gray-700 flex justify-between items-center">
+                <span>Timeline</span>
+                <button class="text-xs text-indigo-600 hover:text-indigo-800">+ New Animation</button>
+            </div>
+            <div class="flex-1 p-3 overflow-y-auto">
+                <div class="mb-4">
+                    <div class="flex justify-between items-center mb-2">
+                        <span class="text-xs font-medium">Rectangle 1</span>
+                        <button class="text-gray-400 hover:text-gray-600">
+                            <i class="fas fa-chevron-down text-xs"></i>
+                        </button>
+                    </div>
+                    <div class="relative h-8 bg-gray-100 rounded overflow-hidden">
+                        <div class="absolute left-0 top-0 bottom-0 w-full bg-gray-200" style="background-image: linear-gradient(90deg, #ddd 1px, transparent 1px); background-size: 20px 1px;"></div>
+                        <div class="timeline-keyframe" style="left: 20px;"></div>
+                        <div class="timeline-keyframe" style="left: 100px;"></div>
+                        <div class="timeline-keyframe" style="left: 180px;"></div>
+                    </div>
+                </div>
+                <div class="mb-4">
+                    <div class="flex justify-between items-center mb-2">
+                        <span class="text-xs font-medium">Ellipse 1</span>
+                        <button class="text-gray-400 hover:text-gray-600">
+                            <i class="fas fa-chevron-down text-xs"></i>
+                        </button>
+                    </div>
+                    <div class="relative h-8 bg-gray-100 rounded overflow-hidden">
+                        <div class="absolute left-0 top-0 bottom-0 w-full bg-gray-200" style="background-image: linear-gradient(90deg, #ddd 1px, transparent 1px); background-size: 20px 1px;"></div>
+                        <div class="timeline-keyframe" style="left: 40px;"></div>
+                        <div class="timeline-keyframe" style="left: 140px;"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-gray-50 p-3 border-t border-gray-200">
+                <div class="relative h-10 w-full bg-gray-200 rounded">
+                    <div class="absolute top-0 bottom-0 left-0 w-1 bg-indigo-600"></div>
+                    <div class="absolute top-0 bottom-0 w-full" style="background-image: linear-gradient(90deg, #9ca3af 1px, transparent 1px); background-size: 25px 1px;"></div>
+                    <div class="absolute top-0 bottom-0 w-1 bg-indigo-600" style="left: 100px;"></div>
+                    <div class="absolute -bottom-2 h-2 w-1 bg-indigo-600 rounded-full" style="left: 0px;"></div>
+                    <div class="absolute -bottom-2 h-2 w-1 bg-indigo-600 rounded-full" style="left: 20px;"></div>
+                    <div class="absolute -bottom-2 h-2 w-1 bg-indigo-600 rounded-full" style="left: 40px;"></div>
+                    <div class="absolute -bottom-2 h-2 w-1 bg-indigo-600 rounded-full" style="left: 60px;"></div>
+                    <div class="absolute -bottom-2 h-2 w-1 bg-indigo-600 rounded-full" style="left: 80px;"></div>
+                    <div class="absolute -bottom-2 h-2 w-1 bg-indigo-600 rounded-full" style="left: 100px;"></div>
+                </div>
+                <div class="flex justify-between items-center mt-3">
+                    <button class="p-1 text-indigo-600 hover:bg-indigo-50 rounded">
+                        <i class="fas fa-play"></i>
+                    </button>
+                    <div class="text-xs text-gray-500">0:00 / 0:05</div>
+                    <div class="flex space-x-1">
+                        <button class="p-1 text-gray-500 hover:bg-gray-100 rounded">
+                            <i class="fas fa-step-backward text-xs"></i>
+                        </button>
+                        <button class="p-1 text-gray-500 hover:bg-gray-100 rounded">
+                            <i class="fas fa-step-forward text-xs"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Context Menu (Hidden by default) -->
+    <div id="context-menu" class="context-menu absolute bg-white shadow-lg rounded-md py-1 z-50 border border-gray-200">
+        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-600"><i class="fas fa-copy mr-2"></i>Copy</a>
+        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-600"><i class="fas fa-paste mr-2"></i>Paste</a>
+        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-600"><i class="fas fa-cut mr-2"></i>Cut</a>
+        <div class="border-t border-gray-200 my-1"></div>
+        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-600"><i class="fas fa-arrow-up mr-2"></i>Bring Forward</a>
+        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-600"><i class="fas fa-arrow-down mr-2"></i>Send Backward</a>
+        <div class="border-t border-gray-200 my-1"></div>
+        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-600"><i class="fas fa-trash-alt mr-2 text-red-500"></i>Delete</a>
+    </div>
+    <!-- Export Modal (Hidden by default) -->
+    <div id="export-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div class="bg-white rounded-lg p-6 w-96 modal-animation">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-medium">Export Diagram</h3>
+                <button id="close-export" class="text-gray-400 hover:text-gray-600">
+                    <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-1">Format</label>
+                    <select class="w-full p-2 border rounded">
+                        <option>GIF</option>
+                        <option>PNG</option>
+                        <option>JPG</option>
+                        <option>MP4</option>
+                        <option>Lottie (JSON)</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Quality</label>
+                    <select class="w-full p-2 border rounded">
+                        <option>High</option>
+                        <option selected>Medium</option>
+                        <option>Low</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Resolution</label>
+                    <div class="flex space-x-2">
+                        <input type="number" value="1280" class="w-20 p-2 border rounded text-center">
+                        <div class="flex items-center">x</div>
+                        <input type="number" value="720" class="w-20 p-2 border rounded text-center">
+                    </div>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Animation Duration</label>
+                    <input type="range" min="1" max="10" value="5" class="w-full">
+                    <div class="text-right text-xs">5 seconds</div>
+                </div>
+            </div>
+            <div class="mt-6 flex justify-end space-x-3">
+                <button id="cancel-export" class="px-4 py-2 text-sm border rounded-lg">Cancel</button>
+                <button class="px-4 py-2 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">Export</button>
+            </div>
+        </div>
+    </div>
+    <!-- Login Modal (Hidden by default) -->
+    <div id="login-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div class="bg-white rounded-lg p-6 w-96 modal-animation">
+            <div class="flex justify-between items-center mb-6">
+                <h3 class="text-lg font-medium">Login to DiMo</h3>
+                <button id="close-login" class="text-gray-400 hover:text-gray-600">
+                    <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-1">Email</label>
+                    <input type="email" class="w-full p-2 border rounded">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
+                    <input type="password" class="w-full p-2 border rounded">
+                </div>
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center">
+                        <input type="checkbox" id="remember-me" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
+                        <label for="remember-me" class="ml-2 block text-sm text-gray-700">Remember me</label>
+                    </div>
+                    <a href="#" class="text-sm text-indigo-600 hover:text-indigo-500">Forgot password?</a>
+                </div>
+            </div>
+            <div class="mt-6">
+                <button class="w-full py-2 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                    Sign in
+                </button>
+            </div>
+            <div class="mt-4 text-center text-sm">
+                <span class="text-gray-600">Don't have an account?</span>
+                <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">Sign up</a>
+            </div>
+            <div class="mt-6">
+                <div class="relative">
+                    <div class="absolute inset-0 flex items-center">
+                        <div class="w-full border-t border-gray-300"></div>
+                    </div>
+                    <div class="relative flex justify-center text-sm">
+                        <span class="px-2 bg-white text-gray-500">Or continue with</span>
+                    </div>
+                </div>
+                <div class="mt-6 grid grid-cols-3 gap-3">
+                    <button class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-lg shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
+                        <i class="fab fa-google text-red-500"></i>
+                    </button>
+                    <button class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-lg shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
+                        <i class="fab fa-github"></i>
+                    </button>
+                    <button class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-lg shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
+                        <i class="fab fa-microsoft text-blue-500"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Toggle export options dropdown
+        document.getElementById('export-btn').addEventListener('click', function(e) {
+            e.stopPropagation();
+            document.getElementById('export-options').classList.toggle('hidden');
+        });
+        // Close dropdown when clicking outside
+        document.addEventListener('click', function() {
+            document.getElementById('export-options').classList.add('hidden');
+        });
+        // Show export modal
+        document.querySelector('#export-options a').addEventListener('click', function(e) {
+            e.preventDefault();
+            document.getElementById('export-modal').classList.remove('hidden');
+        });
+        // Close export modal
+        document.getElementById('close-export').addEventListener('click', function() {
+            document.getElementById('export-modal').classList.add('hidden');
+        });
+        document.getElementById('cancel-export').addEventListener('click', function() {
+            document.getElementById('export-modal').classList.add('hidden');
+        });
+        // Show login modal
+        document.getElementById('login-btn').addEventListener('click', function() {
+            document.getElementById('login-modal').classList.remove('hidden');
+        });
+        // Close login modal
+        document.getElementById('close-login').addEventListener('click', function() {
+            document.getElementById('login-modal').classList.add('hidden');
+        });
+        // Context menu handling
+        const canvas = document.getElementById('canvas-container');
+        const contextMenu = document.getElementById('context-menu');
+        canvas.addEventListener('contextmenu', function(e) {
+            e.preventDefault();
+            contextMenu.style.left = `${e.pageX}px`;
+            contextMenu.style.top = `${e.pageY}px`;
+            contextMenu.classList.add('active');
+        });
+        document.addEventListener('click', function() {
+            contextMenu.classList.remove('active');
+        });
+        // Make shapes draggable (simplified version)
+        const shapes = document.querySelectorAll('.shape');
+        shapes.forEach(shape => {
+            let isDragging = false;
+            let offsetX, offsetY;
+            shape.addEventListener('mousedown', function(e) {
+                if (e.button !== 0) return; // Only left mouse button
+                isDragging = true;
+                offsetX = e.clientX - shape.getBoundingClientRect().left;
+                offsetY = e.clientY - shape.getBoundingClientRect().top;
+                shape.style.cursor = 'grabbing';
+            });
+            document.addEventListener('mousemove', function(e) {
+                if (!isDragging) return;
+                const canvasRect = canvas.getBoundingClientRect();
+                let x = e.clientX - canvasRect.left - offsetX;
+                let y = e.clientY - canvasRect.top - offsetY;
+                // Basic boundaries
+                x = Math.max(0, Math.min(x, canvasRect.width - shape.offsetWidth));
+                y = Math.max(0, Math.min(y, canvasRect.height - shape.offsetHeight));
+                shape.style.left = `${x}px`;
+                shape.style.top = `${y}px`;
+            });
+            document.addEventListener('mouseup', function() {
+                isDragging = false;
+                shape.style.cursor = 'move';
+            });
+        });
+        // Add zoom functionality (simplified)
+        let zoomLevel = 100;
+        const zoomIndicator = document.querySelector('.absolute.right-2.bottom-2');
+        document.querySelector('[title="Zoom In"]').addEventListener('click', function() {
+            zoomLevel = Math.min(zoomLevel + 10, 200);
+            updateZoom();
+        });
+        document.querySelector('[title="Zoom Out"]').addEventListener('click', function() {
+            zoomLevel = Math.max(zoomLevel - 10, 50);
+            updateZoom();
+        });
+        document.querySelector('[title="Reset Zoom"]').addEventListener('click', function() {
+            zoomLevel = 100;
+            updateZoom();
+        });
+        function updateZoom() {
+            document.getElementById('canvas-container').style.transform = `scale(${zoomLevel / 100})`;
+            document.getElementById('canvas-container').style.transformOrigin = 'top left';
+            zoomIndicator.textContent = `${zoomLevel}%`;
+        }
+    </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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
+</html>