|
<!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; |
|
} |
|
|
|
|
|
::-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; |
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
from { opacity: 0; transform: translateY(20px); } |
|
to { opacity: 1; transform: translateY(0); } |
|
} |
|
|
|
.modal-animation { |
|
animation: fadeIn 0.3s ease-out; |
|
} |
|
|
|
|
|
.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 { |
|
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"> |
|
|
|
<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> |
|
|
|
|
|
<div class="flex flex-1 overflow-hidden"> |
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<div class="flex-1 relative overflow-hidden"> |
|
<div id="canvas-container" class="w-full h-full relative overflow-hidden"> |
|
|
|
<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> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="absolute right-2 bottom-2 bg-white px-2 py-1 rounded border border-gray-200 text-xs"> |
|
100% |
|
</div> |
|
</div> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
document.getElementById('export-btn').addEventListener('click', function(e) { |
|
e.stopPropagation(); |
|
document.getElementById('export-options').classList.toggle('hidden'); |
|
}); |
|
|
|
|
|
document.addEventListener('click', function() { |
|
document.getElementById('export-options').classList.add('hidden'); |
|
}); |
|
|
|
|
|
document.querySelector('#export-options a').addEventListener('click', function(e) { |
|
e.preventDefault(); |
|
document.getElementById('export-modal').classList.remove('hidden'); |
|
}); |
|
|
|
|
|
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'); |
|
}); |
|
|
|
|
|
document.getElementById('login-btn').addEventListener('click', function() { |
|
document.getElementById('login-modal').classList.remove('hidden'); |
|
}); |
|
|
|
|
|
document.getElementById('close-login').addEventListener('click', function() { |
|
document.getElementById('login-modal').classList.add('hidden'); |
|
}); |
|
|
|
|
|
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'); |
|
}); |
|
|
|
|
|
const shapes = document.querySelectorAll('.shape'); |
|
shapes.forEach(shape => { |
|
let isDragging = false; |
|
let offsetX, offsetY; |
|
|
|
shape.addEventListener('mousedown', function(e) { |
|
if (e.button !== 0) return; |
|
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; |
|
|
|
|
|
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'; |
|
}); |
|
}); |
|
|
|
|
|
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> |
