Spaces:

LukasBe
/

drawer-circuit

Running

App Files Files Community

LukasBe commited on Apr 22, 2025

Commit

76f9dff

verified ·

1 Parent(s): 7c33b73

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +976 -19
prompts.txt +4 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Drawer Circuit
-emoji: 🚀
 colorFrom: gray
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: drawer-circuit
+emoji: 🐳
 colorFrom: gray
+colorTo: gray
 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,976 @@
-<!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>Editable Drawer Release Mechanism Schematic</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>
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+        @keyframes slideOpen {
+            0% { transform: translateX(0); }
+            100% { transform: translateX(50px); }
+        }
+        @keyframes slideClose {
+            0% { transform: translateX(50px); }
+            100% { transform: translateX(0); }
+        }
+        @keyframes solenoidActivate {
+            0%, 100% { transform: translateY(0); background-color: #6b7280; }
+            50% { transform: translateY(-10px); background-color: #3b82f6; }
+        }
+        @keyframes currentFlow {
+            0% { stroke-dashoffset: 100; }
+            100% { stroke-dashoffset: 0; }
+        }
+        .pulse-animation {
+            animation: pulse 2s infinite;
+        }
+        .drawer-open {
+            animation: slideOpen 0.5s forwards;
+        }
+        .drawer-close {
+            animation: slideClose 0.5s forwards;
+        }
+        .solenoid-activate {
+            animation: solenoidActivate 0.5s;
+        }
+        .wire {
+            position: absolute;
+            background-color: #6b7280;
+            z-index: -1;
+        }
+        .power-wire {
+            background-color: #ef4444;
+        }
+        .ground-wire {
+            background-color: #64748b;
+        }
+        .signal-wire {
+            background-color: #3b82f6;
+        }
+        .component-highlight {
+            transition: all 0.3s ease;
+            cursor: move;
+            user-select: none;
+        }
+        .component-highlight:hover {
+            transform: scale(1.05);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        }
+        .tooltip {
+            position: absolute;
+            visibility: hidden;
+            background-color: #1f2937;
+            color: white;
+            text-align: center;
+            border-radius: 6px;
+            padding: 5px 10px;
+            z-index: 1;
+            bottom: 125%;
+            left: 50%;
+            transform: translateX(-50%);
+            opacity: 0;
+            transition: opacity 0.3s;
+            font-size: 0.8rem;
+            white-space: nowrap;
+        }
+        .has-tooltip:hover .tooltip {
+            visibility: visible;
+            opacity: 1;
+        }
+        .schematic-label {
+            position: absolute;
+            font-size: 0.7rem;
+            color: #334155;
+            font-family: monospace;
+            font-weight: bold;
+        }
+        .voltage-label {
+            position: absolute;
+            font-size: 0.6rem;
+            color: #ef4444;
+            font-family: monospace;
+            background: white;
+            padding: 0 2px;
+            border: 1px solid #e5e7eb;
+            border-radius: 2px;
+        }
+        .current-path {
+            stroke: #3b82f6;
+            stroke-width: 3;
+            stroke-dasharray: 10,5;
+            fill: none;
+            animation: currentFlow 2s linear infinite;
+        }
+        .schematic-grid {
+            background-image:
+                linear-gradient(#e5e7eb 1px, transparent 1px),
+                linear-gradient(90deg, #e5e7eb 1px, transparent 1px);
+            background-size: 20px 20px;
+        }
+        .section-title {
+            position: absolute;
+            background-color: #3b82f6;
+            color: white;
+            padding: 2px 8px;
+            border-radius: 4px;
+            font-size: 0.7rem;
+            font-weight: bold;
+            z-index: 10;
+        }
+        .junction-dot {
+            position: absolute;
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background-color: #334155;
+            z-index: 1;
+        }
+        .power-rail {
+            position: absolute;
+            height: 2px;
+            background-color: #ef4444;
+            z-index: -1;
+        }
+        .ground-rail {
+            position: absolute;
+            height: 2px;
+            background-color: #64748b;
+            z-index: -1;
+        }
+        .signal-rail {
+            position: absolute;
+            height: 2px;
+            background-color: #3b82f6;
+            z-index: -1;
+        }
+        .component-pin {
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background-color: #334155;
+            z-index: 2;
+        }
+        .bom-table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 0.8rem;
+        }
+        .bom-table th, .bom-table td {
+            border: 1px solid #e5e7eb;
+            padding: 4px 8px;
+            text-align: left;
+        }
+        .bom-table th {
+            background-color: #f3f4f6;
+        }
+        .edit-mode-btn {
+            transition: all 0.3s ease;
+        }
+        .edit-mode-btn.active {
+            background-color: #3b82f6;
+            color: white;
+        }
+        .connection-point {
+            position: absolute;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background-color: rgba(59, 130, 246, 0.5);
+            z-index: 5;
+            cursor: pointer;
+        }
+        .connection-line {
+            position: absolute;
+            background-color: #3b82f6;
+            height: 2px;
+            transform-origin: left center;
+            z-index: 4;
+        }
+        .connection-handle {
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background-color: #3b82f6;
+            z-index: 6;
+            cursor: move;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 min-h-screen flex flex-col items-center py-8">
+    <div class="max-w-6xl w-full px-4">
+        <div class="flex justify-between items-center mb-4">
+            <div>
+                <h1 class="text-3xl font-bold text-gray-800">Editable Drawer Release Mechanism</h1>
+                <p class="text-gray-600">Drag components to rearrange, click to edit connections</p>
+            </div>
+            <div class="text-right">
+                <div class="text-sm text-gray-500">Revision: 1.3</div>
+                <div class="text-sm text-gray-500">Date: <span id="currentDate"></span></div>
+                <div class="text-sm text-gray-500">Drawn by: <span contenteditable="true">Engineering Team</span></div>
+            </div>
+        </div>
+        <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
+            <div class="flex flex-wrap justify-between items-center mb-6">
+                <h2 class="text-xl font-semibold text-gray-800">Interactive Schematic Diagram</h2>
+                <div class="flex space-x-2">
+                    <button id="editModeBtn" class="edit-mode-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition">
+                        <i class="fas fa-edit mr-2"></i>Edit Mode
+                    </button>
+                    <button id="resetBtn" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition">
+                        <i class="fas fa-redo mr-2"></i>Reset
+                    </button>
+                    <button id="triggerBtn" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
+                        <i class="fas fa-bolt mr-2"></i>Trigger Release
+                    </button>
+                    <button id="showCurrentBtn" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition">
+                        <i class="fas fa-project-diagram mr-2"></i>Show Current Flow
+                    </button>
+                    <button id="saveLayoutBtn" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">
+                        <i class="fas fa-save mr-2"></i>Save Layout
+                    </button>
+                </div>
+            </div>
+            <div id="schematicContainer" class="relative border-2 border-gray-300 rounded-lg p-6 bg-gray-50 schematic-grid" style="height: 700px;">
+                <!-- Section Titles (editable) -->
+                <div class="section-title draggable" style="left: 50px; top: 30px;" contenteditable="true">POWER SUPPLY</div>
+                <div class="section-title draggable" style="left: 350px; top: 30px;" contenteditable="true">CONTROL CIRCUIT</div>
+                <div class="section-title draggable" style="left: 650px; top: 30px;" contenteditable="true">LOAD CIRCUIT</div>
+                <div class="section-title draggable" style="left: 250px; top: 450px;" contenteditable="true">MECHANICAL SYSTEM</div>
+                <!-- Power Rails -->
+                <div class="power-rail" style="width: 700px; top: 100px;"></div>
+                <div class="ground-rail" style="width: 700px; top: 130px;"></div>
+                <div class="power-rail" style="width: 200px; top: 200px; left: 100px;"></div>
+                <div class="ground-rail" style="width: 200px; top: 230px; left: 100px;"></div>
+                <div class="power-rail" style="width: 150px; top: 300px; left: 100px;"></div>
+                <div class="power-rail" style="width: 150px; top: 380px; left: 100px;"></div>
+                <div class="signal-rail" style="width: 100px; top: 320px; left: 240px;"></div>
+                <!-- Power Supply Section -->
+                <div id="battery" class="absolute w-20 h-10 bg-green-500 rounded flex items-center justify-center component-highlight has-tooltip draggable" style="left: 80px; top: 160px;">
+                    <div class="w-18 h-8 bg-green-400 rounded flex items-center justify-center">
+                        <span class="text-xs font-bold text-white">LiPo</span>
+                    </div>
+                    <div class="tooltip">3.7V LiPo Battery (1000-2000mAh)</div>
+                    <div class="voltage-label" style="right: -30px; top: 12px;">3.7V</div>
+                    <div class="schematic-label" style="left: 0; bottom: -20px;">BAT1</div>
+                    <div class="component-pin connection-source" data-connection="positive" style="right: -4px; top: 12px;"></div>
+                    <div class="component-pin connection-source" data-connection="negative" style="right: -4px; top: 32px;"></div>
+                </div>
+                <div id="charger" class="absolute w-28 h-14 bg-blue-500 rounded flex items-center justify-center component-highlight has-tooltip draggable" style="left: 80px; top: 220px;">
+                    <div class="w-26 h-12 bg-blue-400 rounded flex items-center justify-center">
+                        <span class="text-xs font-bold text-white">TP4056</span>
+                    </div>
+                    <div class="tooltip">TP4056 Charging Module with battery protection</div>
+                    <div class="voltage-label" style="right: -30px; top: 24px;">3.7V</div>
+                    <div class="schematic-label" style="left: 0; bottom: -20px;">U1</div>
+                    <div class="component-pin connection-source" data-connection="vcc" style="right: -4px; top: 14px;"></div>
+                    <div class="component-pin connection-source" data-connection="gnd" style="right: -4px; top: 34px;"></div>
+                    <div class="component-pin connection-source" data-connection="out" style="right: -4px; top: 54px;"></div>
+                </div>
+                <div id="booster" class="absolute w-28 h-14 bg-purple-500 rounded flex items-center justify-center component-highlight has-tooltip draggable" style="left: 80px; top: 300px;">
+                    <div class="w-26 h-12 bg-purple-400 rounded flex items-center justify-center">
+                        <span class="text-xs font-bold text-white">MT3608</span>
+                    </div>
+                    <div class="tooltip">Step-up DC/DC Converter (3.7V to 12V @ 2A)</div>
+                    <div class="voltage-label" style="right: -40px; top: 24px;">12V</div>
+                    <div class="schematic-label" style="left: 0; bottom: -20px;">U2</div>
+                    <div class="component-pin connection-source" data-connection="in" style="right: -4px; top: 14px;"></div>
+                    <div class="component-pin connection-source" data-connection="gnd" style="right: -4px; top: 34px;"></div>
+                    <div class="component-pin connection-source" data-connection="out" style="right: -4px; top: 54px;"></div>
+                </div>
+                <div id="regulator" class="absolute w-28 h-14 bg-red-500 rounded flex items-center justify-center component-highlight has-tooltip draggable" style="left: 80px; top: 380px;">
+                    <div class="w-26 h-12 bg-red-400 rounded flex items-center justify-center">
+                        <span class="text-xs font-bold text-white">AMS1117</span>
+                    </div>
+                    <div class="tooltip">3.3V LDO Regulator for ESP-01</div>
+                    <div class="voltage-label" style="right: -40px; top: 24px;">3.3V</div>
+                    <div class="schematic-label" style="left: 0; bottom: -20px;">U3</div>
+                    <div class="component-pin connection-source" data-connection="in" style="right: -4px; top: 14px;"></div>
+                    <div class="component-pin connection-source" data-connection="gnd" style="right: -4px; top: 34px;"></div>
+                    <div class="component-pin connection-source" data-connection="out" style="right: -4px; top: 54px;"></div>
+                </div>
+                <!-- Control Section -->
+                <div id="esp" class="absolute w-28 h-20 bg-gray-700 rounded flex items-center justify-center component-highlight has-tooltip draggable" style="left: 300px; top: 160px;">
+                    <div class="w-26 h-18 bg-gray-600 rounded flex flex-col items-center justify-center p-1">
+                        <span class="text-xs font-bold text-white">ESP-01</span>
+                        <div class="flex mt-1">
+                            <div class="w-2 h-2 rounded-full bg-green-500 mx-1"></div>
+                            <div class="w-2 h-2 rounded-full bg-yellow-500 mx-1"></div>
+                            <div class="w-2 h-2 rounded-full bg-red-500 mx-1"></div>
+                            <div class="w-2 h-2 rounded-full bg-blue-500 mx-1"></div>
+                        </div>
+                    </div>
+                    <div class="tooltip">ESP-01 WiFi Module with GPIO control</div>
+                    <div class="schematic-label" style="left: 0; bottom: -20px;">U4</div>
+                    <div class="component-pin connection-source" data-connection="vcc" style="right: -4px; top: 14px;"></div>
+                    <div class="component-pin connection-source" data-connection="gnd" style="right: -4px; top: 34px;"></div>
+                    <div class="component-pin connection-source" data-connection="gpio0" style="right: -4px; top: 54px;"></div>
+                    <div class="component-pin connection-source" data-connection="gpio2" style="right: -4px; top: 74px;"></div>
+                </div>
+                <div id="mosfet" class="absolute w-24 h-18 bg-yellow-500 rounded flex items-center justify-center component-highlight has-tooltip draggable" style="left: 300px; top: 300px;">
+                    <div class="w-22 h-16 bg-yellow-400 rounded flex flex-col items-center justify-center">
+                        <span class="text-xs font-bold">AO3400</span>
+                        <div class="flex mt-1">
+                            <div class="w-3 h-1 bg-gray-800 mx-1"></div>
+                            <div class="w-3 h-1 bg-gray-800 mx-1"></div>
+                            <div class="w-3 h-1 bg-gray-800 mx-1"></div>
+                        </div>
+                    </div>
+                    <div class="tooltip">N-Channel MOSFET (30V, 5.7A) with flyback diode</div>
+                    <div class="schematic-label" style="left: 0; bottom: -20px;">Q1</div>
+                    <div class="component-pin connection-source" data-connection="gate" style="right: -4px; top: 14px;"></div>
+                    <div class="component-pin connection-source" data-connection="source" style="right: -4px; top: 34px;"></div>
+                    <div class="component-pin connection-source" data-connection="drain" style="right: -4px; top: 54px;"></div>
+                </div>
+                <div id="resistor" class="absolute w-16 h-8 bg-orange-500 rounded flex items-center justify-center component-highlight has-tooltip draggable" style="left: 300px; top: 400px;">
+                    <div class="w-14 h-6 bg-orange-400 rounded">
+                        <div class="h-full w-full flex items-center justify-center">
+                            <div class="w-1 h-1 bg-black mx-1"></div>
+                            <div class="w-1 h-1 bg-black mx-1"></div>
+                            <div class="w-1 h-1 bg-black mx-1"></div>
+                        </div>
+                    </div>
+                    <div class="tooltip">220Ω current limiting resistor</div>
+                    <div class="schematic-label" style="left: 0; bottom: -20px;">R1</div>
+                    <div class="component-pin connection-source" data-connection="a" style="right: -4px; top: 12px;"></div>
+                    <div class="component-pin connection-source" data-connection="b" style="left: -4px; top: 12px;"></div>
+                </div>
+                <!-- Load Section -->
+                <div id="solenoid" class="absolute w-28 h-16 bg-gray-500 rounded flex items-center justify-center component-highlight has-tooltip draggable" style="left: 600px; top: 160px;">
+                    <div class="w-26 h-14 bg-gray-400 rounded flex items-center justify-center">
+                        <span class="text-xs font-bold text-white">SOLENOID</span>
+                    </div>
+                    <div class="tooltip">12V Pull-Type Solenoid (500mA, 5N holding force)</div>
+                    <div class="schematic-label" style="left: 0; bottom: -20px;">L1</div>
+                    <div class="voltage-label" style="right: -40px; top: 28px;">12V</div>
+                    <div class="component-pin connection-source" data-connection="positive" style="right: -4px; top: 24px;"></div>
+                    <div class="component-pin connection-source" data-connection="negative" style="right: -4px; top: 44px;"></div>
+                </div>
+                <div id="diode" class="absolute w-16 h-8 bg-blue-300 rounded flex items-center justify-center component-highlight has-tooltip draggable" style="left: 600px; top: 300px;">
+                    <div class="w-14 h-6 bg-blue-200 rounded flex items-center justify-center">
+                        <span class="text-xs font-bold">1N4007</span>
+                    </div>
+                    <div class="tooltip">Flyback diode for solenoid protection</div>
+                    <div class="schematic-label" style="left: 0; bottom: -20px;">D1</div>
+                    <div class="component-pin connection-source" data-connection="anode" style="right: -4px; top: 12px;"></div>
+                    <div class="component-pin connection-source" data-connection="cathode" style="left: -4px; top: 12px;"></div>
+                </div>
+                <!-- Mechanical Section -->
+                <div id="drawerCabinet" class="absolute draggable" style="left: 250px; top: 480px;">
+                    <!-- Drawer Cabinet -->
+                    <div class="w-64 h-48 bg-amber-200 border-2 border-amber-700 rounded">
+                        <!-- Drawer Front -->
+                        <div id="drawer" class="absolute bottom-0 left-0 w-full h-16 bg-amber-600 border-t-2 border-amber-700 rounded-b flex items-center justify-center cursor-pointer transition-all duration-300">
+                            <div class="w-4 h-4 rounded-full bg-amber-800"></div>
+                        </div>
+                    </div>
+                    <!-- Spring Latch -->
+                    <div id="latch" class="absolute left-64 top-24 w-12 h-12 bg-gray-400 rounded-full flex items-center justify-center component-highlight has-tooltip">
+                        <div class="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center">
+                            <div class="w-6 h-6 rounded-full bg-gray-200"></div>
+                        </div>
+                        <div class="tooltip">Push-to-Open Spring Latch Mechanism</div>
+                        <div class="schematic-label" style="left: 0; bottom: -20px;">M1</div>
+                    </div>
+                </div>
+                <!-- Wiring -->
+                <!-- Power Distribution -->
+                <div class="wire power-wire" style="width: 2px; height: 400px; left: 120px; top: 60px;"></div>
+                <div class="wire ground-wire" style="width: 2px; height: 400px; left: 150px; top: 60px;"></div>
+                <!-- Battery to Charger -->
+                <div class="wire power-wire" style="width: 40px; height: 2px; left: 100px; top: 80px;"></div>
+                <div class="wire ground-wire" style="width: 40px; height: 2px; left: 100px; top: 110px;"></div>
+                <!-- Charger to Booster -->
+                <div class="wire power-wire" style="width: 40px; height: 2px; left: 100px; top: 160px;"></div>
+                <div class="wire ground-wire" style="width: 40px; height: 2px; left: 100px; top: 190px;"></div>
+                <!-- Booster to Regulator -->
+                <div class="wire power-wire" style="width: 40px; height: 2px; left: 100px; top: 240px;"></div>
+                <div class="wire ground-wire" style="width: 40px; height: 2px; left: 100px; top: 270px;"></div>
+                <!-- Booster to Solenoid -->
+                <div class="wire power-wire" style="width: 180px; height: 2px; left: 120px; top: 320px;"></div>
+                <!-- Regulator to ESP -->
+                <div class="wire power-wire" style="width: 40px; height: 2px; left: 120px; top: 400px;"></div>
+                <div class="wire ground-wire" style="width: 40px; height: 2px; left: 150px; top: 430px;"></div>
+                <!-- ESP to MOSFET -->
+                <div class="wire signal-wire" style="width: 100px; height: 2px; left: 240px; top: 340px;"></div>
+                <!-- MOSFET to Solenoid -->
+                <div class="wire power-wire" style="width: 100px; height: 2px; left: 240px; top: 400px;"></div>
+                <!-- Ground Connections -->
+                <div class="wire ground-wire" style="width: 300px; height: 2px; left: 150px; top: 460px;"></div>
+                <!-- Junction Dots -->
+                <div class="junction-dot" style="left: 120px; top: 100px;"></div>
+                <div class="junction-dot" style="left: 120px; top: 130px;"></div>
+                <div class="junction-dot" style="left: 120px; top: 320px;"></div>
+                <div class="junction-dot" style="left: 340px; top: 320px;"></div>
+                <div class="junction-dot" style="left: 340px; top: 340px;"></div>
+                <div class="junction-dot" style="left: 340px; top: 400px;"></div>
+                <div class="junction-dot" style="left: 340px; top: 460px;"></div>
+                <!-- Current Flow Animation -->
+                <svg id="currentFlow" width="100%" height="100%" class="absolute top-0 left-0 pointer-events-none" style="display: none;">
+                    <!-- Power Path -->
+                    <path class="current-path" d="M100,80 L120,80 L120,320 L340,320 L340,340" />
+                    <!-- Control Path -->
+                    <path class="current-path" d="M120,400 L240,400 L240,340 L340,340" style="animation-delay: 0.5s;" />
+                    <!-- Ground Return -->
+                    <path class="current-path" d="M340,340 L340,460 L150,460 L150,110 L100,110" style="animation-delay: 1s;" />
+                </svg>
+                <!-- Voltage Labels -->
+                <div class="voltage-label" style="left: 200px; top: 80px;">3.7V</div>
+                <div class="voltage-label" style="left: 200px; top: 160px;">3.7V</div>
+                <div class="voltage-label" style="left: 200px; top: 240px;">12V</div>
+                <div class="voltage-label" style="left: 200px; top: 320px;">12V</div>
+                <div class="voltage-label" style="left: 200px; top: 400px;">3.3V</div>
+                <!-- Status Indicator -->
+                <div id="statusIndicator" class="absolute right-8 bottom-8 w-32 h-32 rounded-full bg-gray-200 border-4 border-gray-300 flex items-center justify-center">
+                    <div class="text-center">
+                        <div class="text-lg font-semibold">Status</div>
+                        <div id="statusText" class="text-sm mt-1">Drawer Locked</div>
+                        <div id="statusLed" class="w-6 h-6 rounded-full bg-red-500 mx-auto mt-2 shadow-inner"></div>
+                        <div class="text-xs mt-2">Current: <span id="currentDraw">0</span>mA</div>
+                    </div>
+                </div>
+                <!-- Legend -->
+                <div class="absolute right-8 top-60 bg-white p-3 rounded-lg border border-gray-300 shadow-sm text-xs">
+                    <div class="font-bold mb-2 text-center border-b pb-1">SCHEMATIC LEGEND</div>
+                    <div class="grid grid-cols-2 gap-2">
+                        <div class="flex items-center">
+                            <div class="w-4 h-2 bg-red-500 mr-2"></div>
+                            <span>Power (VCC)</span>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-4 h-2 bg-blue-500 mr-2"></div>
+                            <span>Signal</span>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-4 h-2 bg-gray-500 mr-2"></div>
+                            <span>Ground (GND)</span>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-4 h-4 rounded-full bg-gray-400 mr-2"></div>
+                            <span>Junction</span>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-4 h-4 rounded-full bg-black mr-2"></div>
+                            <span>Component Pin</span>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-4 h-4 rounded-full bg-blue-300 mr-2"></div>
+                            <span>Diode</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div class="bg-white rounded-xl shadow-lg p-6">
+                <h2 class="text-xl font-semibold text-gray-800 mb-4">Technical Specifications</h2>
+                <div class="grid grid-cols-2 gap-4 text-sm">
+                    <div class="bg-gray-50 p-3 rounded">
+                        <div class="font-semibold text-gray-700">Power Supply</div>
+                        <ul class="mt-2 space-y-1 text-gray-600">
+                            <li>Input: 5V USB or 3.7V LiPo</li>
+                            <li>Battery: 1000-2000mAh</li>
+                            <li>Charger: TP4056 with protection</li>
+                            <li>12V Boost: MT3608 (2A max)</li>
+                            <li>3.3V LDO: AMS1117 (800mA)</li>
+                        </ul>
+                    </div>
+                    <div class="bg-gray-50 p-3 rounded">
+                        <div class="font-semibold text-gray-700">Control Circuit</div>
+                        <ul class="mt-2 space-y-1 text-gray-600">
+                            <li>MCU: ESP-01 (ESP8266)</li>
+                            <li>WiFi: 802.11 b/g/n</li>
+                            <li>GPIO: 2x usable</li>
+                            <li>Switch: AO3400 MOSFET</li>
+                            <li>Current: 220Ω resistor</li>
+                        </ul>
+                    </div>
+                    <div class="bg-gray-50 p-3 rounded">
+                        <div class="font-semibold text-gray-700">Load Circuit</div>
+                        <ul class="mt-2 space-y-1 text-gray-600">
+                            <li>Solenoid: 12V, 500mA</li>
+                            <li>Actuation: 250ms pulse</li>
+                            <li>Protection: 1N4007 diode</li>
+                            <li>Force: ~5N (500g)</li>
+                            <li>Stroke: 5-10mm</li>
+                        </ul>
+                    </div>
+                    <div class="bg-gray-50 p-3 rounded">
+                        <div class="font-semibold text-gray-700">Mechanical</div>
+                        <ul class="mt-2 space-y-1 text-gray-600">
+                            <li>Latch: Push-to-open type</li>
+                            <li>Spring force: ~3N return</li>
+                            <li>Drawer travel: 2-5cm</li>
+                            <li>Mounting: Internal</li>
+                            <li>Cycle life: 10,000+</li>
+                        </ul>
+                    </div>
+                </div>
+                <h2 class="text-xl font-semibold text-gray-800 mt-6 mb-4">Bill of Materials</h2>
+                <table class="bom-table">
+                    <thead>
+                        <tr>
+                            <th>Ref</th>
+                            <th>Component</th>
+                            <th>Value</th>
+                            <th>Qty</th>
+                            <th>Notes</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>BAT1</td>
+                            <td>LiPo Battery</td>
+                            <td>3.7V, 1000mAh</td>
+                            <td>1</td>
+                            <td>With JST connector</td>
+                        </tr>
+                        <tr>
+                            <td>U1</td>
+                            <td>Charging Module</td>
+                            <td>TP4056</td>
+                            <td>1</td>
+                            <td>With protection</td>
+                        </tr>
+                        <tr>
+                            <td>U2</td>
+                            <td>Boost Converter</td>
+                            <td>MT3608</td>
+                            <td>1</td>
+                            <td>3.7V to 12V</td>
+                        </tr>
+                        <tr>
+                            <td>U3</td>
+                            <td>Voltage Regulator</td>
+                            <td>AMS1117-3.3</td>
+                            <td>1</td>
+                            <td>3.3V LDO</td>
+                        </tr>
+                        <tr>
+                            <td>U4</td>
+                            <td>WiFi Module</td>
+                            <td>ESP-01</td>
+                            <td>1</td>
+                            <td>ESP8266 based</td>
+                        </tr>
+                        <tr>
+                            <td>Q1</td>
+                            <td>MOSFET</td>
+                            <td>AO3400</td>
+                            <td>1</td>
+                            <td>N-Channel</td>
+                        </tr>
+                        <tr>
+                            <td>R1</td>
+                            <td>Resistor</td>
+                            <td>220Ω</td>
+                            <td>1</td>
+                            <td>1/4W</td>
+                        </tr>
+                        <tr>
+                            <td>D1</td>
+                            <td>Diode</td>
+                            <td>1N4007</td>
+                            <td>1</td>
+                            <td>Flyback protection</td>
+                        </tr>
+                        <tr>
+                            <td>L1</td>
+                            <td>Solenoid</td>
+                            <td>12V, 500mA</td>
+                            <td>1</td>
+                            <td>Pull-type</td>
+                        </tr>
+                        <tr>
+                            <td>M1</td>
+                            <td>Latch Mechanism</td>
+                            <td>-</td>
+                            <td>1</td>
+                            <td>Spring-loaded</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div class="bg-white rounded-xl shadow-lg p-6">
+                <h2 class="text-xl font-semibold text-gray-800 mb-4">Schematic Notes</h2>
+                <div class="prose prose-sm text-gray-700">
+                    <h3 class="text-lg font-medium">Design Considerations</h3>
+                    <ul>
+                        <li><strong>Power Isolation:</strong> Separate 12V and 3.3V power domains with proper regulation</li>
+                        <li><strong>Current Handling:</strong> MT3608 boost converter rated for 2A continuous (solenoid draws 500mA peak)</li>
+                        <li><strong>Flyback Protection:</strong> 1N4007 diode across solenoid to protect MOSFET from voltage spikes</li>
+                        <li><strong>Current Limiting:</strong> 220Ω resistor between ESP GPIO and MOSFET gate</li>
+                        <li><strong>Battery Protection:</strong> TP4056 includes overcharge/discharge protection</li>
+                    </ul>
+                    <h3 class="text-lg font-medium mt-4">Interactive Features</h3>
+                    <ol>
+                        <li>Drag and drop components to rearrange the schematic</li>
+                        <li>Click "Edit Mode" to enable component movement</li>
+                        <li>Click "Save Layout" to store your custom arrangement</li>
+                        <li>Edit section titles directly on the schematic</li>
+                        <li>Trigger the drawer mechanism to see animations</li>
+                        <li>Show current flow to visualize circuit operation</li>
+                    </ol>
+                    <h3 class="text-lg font-medium mt-4">Connection Diagram</h3>
+                    <div class="bg-gray-100 p-3 rounded text-xs font-mono">
+                        <div>ESP-01 Connections:</div>
+                        <div>GPIO0 → R1 → Q1 Gate</div>
+                        <div>VCC → 3.3V Rail</div>
+                        <div>GND → Ground Rail</div>
+                        <div class="mt-2">MOSFET Connections:</div>
+                        <div>Drain → Solenoid → 12V Rail</div>
+                        <div>Source → Ground Rail</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const drawer = document.getElementById('drawer');
+            const latch = document.getElementById('latch');
+            const solenoid = document.getElementById('solenoid');
+            const triggerBtn = document.getElementById('triggerBtn');
+            const resetBtn = document.getElementById('resetBtn');
+            const showCurrentBtn = document.getElementById('showCurrentBtn');
+            const editModeBtn = document.getElementById('editModeBtn');
+            const saveLayoutBtn = document.getElementById('saveLayoutBtn');
+            const statusText = document.getElementById('statusText');
+            const statusLed = document.getElementById('statusLed');
+            const currentDraw = document.getElementById('currentDraw');
+            const currentFlow = document.getElementById('currentFlow');
+            const schematicContainer = document.getElementById('schematicContainer');
+            // Set current date
+            const today = new Date();
+            document.getElementById('currentDate').textContent = today.toLocaleDateString();
+            let isDrawerOpen = false;
+            let showCurrent = false;
+            let editMode = false;
+            let isDragging = false;
+            let currentDraggedElement = null;
+            let offsetX, offsetY;
+            // Initialize draggable components
+            const draggableComponents = document.querySelectorAll('.draggable');
+            // Make components draggable
+            function enableDrag() {
+                draggableComponents.forEach(component => {
+                    component.addEventListener('mousedown', startDrag);
+                });
+                document.addEventListener('mousemove', drag);
+                document.addEventListener('mouseup', endDrag);
+            }
+            // Disable dragging
+            function disableDrag() {
+                draggableComponents.forEach(component => {
+                    component.removeEventListener('mousedown', startDrag);
+                });
+                document.removeEventListener('mousemove', drag);
+                document.removeEventListener('mouseup', endDrag);
+            }
+            // Start dragging
+            function startDrag(e) {
+                if (!editMode) return;
+                // Don't drag if clicking on a pin or editable text
+                if (e.target.classList.contains('component-pin') ||
+                    e.target.hasAttribute('contenteditable')) {
+                    return;
+                }
+                isDragging = true;
+                currentDraggedElement = e.currentTarget;
+                // Calculate offset
+                const rect = currentDraggedElement.getBoundingClientRect();
+                offsetX = e.clientX - rect.left;
+                offsetY = e.clientY - rect.top;
+                // Bring to front
+                currentDraggedElement.style.zIndex = '100';
+                e.preventDefault();
+            }
+            // During drag
+            function drag(e) {
+                if (!isDragging || !currentDraggedElement) return;
+                // Calculate new position
+                const containerRect = schematicContainer.getBoundingClientRect();
+                let newX = e.clientX - containerRect.left - offsetX;
+                let newY = e.clientY - containerRect.top - offsetY;
+                // Constrain to container
+                newX = Math.max(0, Math.min(newX, containerRect.width - currentDraggedElement.offsetWidth));
+                newY = Math.max(0, Math.min(newY, containerRect.height - currentDraggedElement.offsetHeight));
+                // Apply new position
+                currentDraggedElement.style.left = `${newX}px`;
+                currentDraggedElement.style.top = `${newY}px`;
+                // Update wires would go here in a more advanced implementation
+            }
+            // End drag
+            function endDrag() {
+                if (!isDragging || !currentDraggedElement) return;
+                isDragging = false;
+                currentDraggedElement.style.zIndex = '';
+                currentDraggedElement = null;
+            }
+            // Click drawer to close it
+            drawer.addEventListener('click', function() {
+                if(isDrawerOpen) {
+                    drawer.classList.remove('drawer-open');
+                    drawer.classList.add('drawer-close');
+                    isDrawerOpen = false;
+                    updateStatus();
+                }
+            });
+            // Trigger button to open drawer
+            triggerBtn.addEventListener('click', function() {
+                if(!isDrawerOpen) {
+                    // Show current flow if enabled
+                    if(showCurrent) {
+                        currentFlow.style.display = 'block';
+                    }
+                    // Animate current draw
+                    animateCurrentDraw(500);
+                    // Activate solenoid
+                    solenoid.classList.add('solenoid-activate');
+                    // After a delay, open the drawer
+                    setTimeout(() => {
+                        drawer.classList.remove('drawer-close');
+                        drawer.classList.add('drawer-open');
+                        isDrawerOpen = true;
+                        updateStatus();
+                        // Hide current flow after animation
+                        setTimeout(() => {
+                            if(showCurrent) {
+                                currentFlow.style.display = 'none';
+                            }
+                        }, 1000);
+                    }, 500);
+                    // Remove solenoid activation after animation
+                    setTimeout(() => {
+                        solenoid.classList.remove('solenoid-activate');
+                        animateCurrentDraw(0);
+                    }, 1000);
+                }
+            });
+            // Reset button
+            resetBtn.addEventListener('click', function() {
+                drawer.classList.remove('drawer-open', 'drawer-close');
+                isDrawerOpen = false;
+                updateStatus();
+                currentFlow.style.display = 'none';
+                solenoid.classList.remove('solenoid-activate');
+                animateCurrentDraw(0);
+                // Reset component positions
+                resetComponentPositions();
+            });
+            // Toggle current flow display
+            showCurrentBtn.addEventListener('click', function() {
+                showCurrent = !showCurrent;
+                if(showCurrent) {
+                    currentFlow.style.display = 'block';
+                    showCurrentBtn.classList.add('bg-purple-700');
+                    showCurrentBtn.classList.remove('bg-purple-600');
+                } else {
+                    currentFlow.style.display = 'none';
+                    showCurrentBtn.classList.remove('bg-purple-700');
+                    showCurrentBtn.classList.add('bg-purple-600');
+                }
+            });
+            // Toggle edit mode
+            editModeBtn.addEventListener('click', function() {
+                editMode = !editMode;
+                if(editMode) {
+                    editModeBtn.classList.add('active');
+                    enableDrag();
+                } else {
+                    editModeBtn.classList.remove('active');
+                    disableDrag();
+                }
+            });
+            // Save layout
+            saveLayoutBtn.addEventListener('click', function() {
+                const positions = {};
+                draggableComponents.forEach(comp => {
+                    positions[comp.id || comp.className] = {
+                        left: comp.style.left,
+                        top: comp.style.top
+                    };
+                });
+                localStorage.setItem('schematicLayout', JSON.stringify(positions));
+                // Show saved notification
+                const notification = document.createElement('div');
+                notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg';
+                notification.textContent = 'Layout saved!';
+                document.body.appendChild(notification);
+                setTimeout(() => {
+                    notification.remove();
+                }, 2000);
+            });
+            // Load layout
+            function loadLayout() {
+                const savedLayout = localStorage.getItem('schematicLayout');
+                if (savedLayout) {
+                    const positions = JSON.parse(savedLayout);
+                    draggableComponents.forEach(comp => {
+                        const id = comp.id || comp.className;
+                        if (positions[id]) {
+                            comp.style.left = positions[id].left;
+                            comp.style.top = positions[id].top;
+                        }
+                    });
+                }
+            }
+            // Reset component positions
+            function resetComponentPositions() {
+                const defaultPositions = {
+                    'battery': { left: '80px', top: '160px' },
+                    'charger': { left: '80px', top: '220px' },
+                    'booster': { left: '80px', top: '300px' },
+                    'regulator': { left: '80px', top: '380px' },
+                    'esp': { left: '300px', top: '160px' },
+                    'mosfet': { left: '300px', top: '300px' },
+                    'resistor': { left: '300px', top: '400px' },
+                    'solenoid': { left: '600px', top: '160px' },
+                    'diode': { left: '600px', top: '300px' },
+                    'drawerCabinet': { left: '250px', top: '480px' }
+                };
+                draggableComponents.forEach(comp => {
+                    const id = comp.id;
+                    if (defaultPositions[id]) {
+                        comp.style.left = defaultPositions[id].left;
+                        comp.style.top = defaultPositions[id].top;
+                    }
+                });
+            }
+            // Update status indicator
+            function updateStatus() {
+                if(isDrawerOpen) {
+                    statusText.textContent = 'Drawer Open';
+                    statusLed.classList.remove('bg-red-500');
+                    statusLed.classList.add('bg-green-500');
+                } else {
+                    statusText.textContent = 'Drawer Locked';
+                    statusLed.classList.remove('bg-green-500');
+                    statusLed.classList.add('bg-red-500');
+                }
+            }
+            // Animate current draw meter
+            function animateCurrentDraw(target) {
+                let current = 0;
+                const step = target / 20;
+                const interval = setInterval(() => {
+                    if (Math.abs(current - target) < step) {
+                        current = target;
+                        clearInterval(interval);
+                    } else if (current < target) {
+                        current += step;
+                    } else {
+                        current -= step;
+                    }
+                    currentDraw.textContent = Math.round(current);
+                }, 20);
+            }
+            // Add hover effects to components
+            const components = document.querySelectorAll('.component-highlight');
+            components.forEach(comp => {
+                comp.addEventListener('mouseenter', function() {
+                    const tooltip = this.querySelector('.tooltip');
+                    if(tooltip) {
+                        tooltip.style.visibility = 'visible';
+                        tooltip.style.opacity = '1';
+                    }
+                });
+                comp.addEventListener('mouseleave', function() {
+                    const tooltip = this.querySelector('.tooltip');
+                    if(tooltip) {
+                        tooltip.style.visibility = 'hidden';
+                        tooltip.style.opacity = '0';
+                    }
+                });
+            });
+            // Initialize
+            loadLayout();
+        });
+    </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=LukasBe/drawer-circuit" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,4 @@

+Create an interactive animated, schematics of the electronic system: ✅ Let’s Design This Mechanism 🧩 Goal ESP-01 triggers electric release  Spring pops drawer open ~2–5 cm  Human pushes drawer to close  Latch clicks and holds drawer shut again (no need for motor or servo)  🛠️ Component Design  Component	Function	Notes 🧲 Solenoid or Lock Release	Electrically unlocks the latch	Pull-type solenoid, momentary 🔧 Spring Push Latch	Holds drawer shut, pops it open when unlatched	Found in kitchen cabinetry 🔋 LiPo + TP4056 Charger	Powers everything + recharges	3.7V 1000–2000mAh ⚡ Voltage Booster to 12V	Drives solenoid from LiPo	e.g., MT3608 step-up 🎛️ N-MOSFET + Diode	ESP-01 safe switching	AO3400 + 1N4007 📶 ESP-01 Module	Wireless control (WiFi, ESP-NOW, etc.)	Controls solenoid via GPIO 🧰 How It Works (Step-by-Step) Drawer is closed, spring latch is engaged.  ESP-01 receives a signal (e.g., unlock command).  ESP-01 sends HIGH to MOSFET gate, energizing solenoid for ~250 ms.  Solenoid pulls latch, causing spring to eject the drawer outward.  Drawer stays partially open (~5 cm).  User pushes drawer shut → latch automatically catches and locks.  🔌 Updated Circuit Overview rust Copy Edit LiPo 3.7V Battery  └─> TP4056 charging board  └─> MT3608 boost converter → 12V for solenoid  └─> AMS1117-3.3V → ESP-01  ESP-01 GPIO0 --> Resistor (220Ω) --> Gate of MOSFET MOSFET Drain --> Solenoid GND Solenoid V+  --> 12V Flyback Diode across solenoid (e.g., 1N4007) 🛒 Recommended Components (Cheap & Readily Available)  Component	Search Term / Spec Solenoid	mini 12V pull solenoid actuator or drawer unlock solenoid Spring latch	push to open cabinet latch, touch latch spring pop open Battery	LiPo 3.7V 1200mAh + TP4056 module Booster	MT3608 step-up 3.7V to 12V boost converter MOSFET	AO3400, IRLZ44N, or similar ESP	ESP-01 + adapter board (for easier programming) 📐 Physical Layout Tip Mount the solenoid close to the latch.  Use a pull-solenoid to mechanically release the touch-latch.  Use a robust spring (often included in latch) to ensure a good "pop."  ✍️ Optional Additions Limit switch to detect door open/closed state  LEDs or beeper to signal drawer opening or alert user  Capacitor (470µF+) to stabilize 12V boost during solenoid kick
+As a electronics engineer, review the scematics logic and layout structure, and improve it to reach professional level,feel free to add wirings, annotation etc., to improve the quelity of the diagram.
+As a professional technical drawer, review the diagram layout and organisation, identify problems, suggest improvements, and implement them.
+Make the layout components (locations) editable by the user visually.