pimmetjepom/flowforge-schematic-studio
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>FlowForge | Schematic Drawing Studio</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>12 <style>13 .node {14 transition: all 0.3s ease;15 }16 .node:hover {17 transform: translateY(-3px);18 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);19 }20 #canvas {21 background-image: radial-gradient(#e5e7eb 1px, transparent 1px);22 background-size: 20px 20px;23 }24 .connector {25 width: 12px;26 height: 12px;27 border-radius: 50%;28 border: 2px solid #3b82f6;29 background: white;30 }31 .connection-path {32 stroke: #3b82f6;33 stroke-width: 2;34 fill: none;35 }36 </style>37</head>38<body class="bg-gray-50 font-sans">39 <div id="vanta-bg" class="fixed inset-0 -z-10 opacity-20"></div>40 41 <header class="bg-white shadow-sm">42 <div class="container mx-auto px-4 py-3 flex justify-between items-center">43 <div class="flex items-center space-x-2">44 <i data-feather="git-branch" class="text-blue-500"></i>45 <h1 class="text-xl font-bold text-gray-800">FlowForge</h1>46 </div>47 <nav class="hidden md:flex space-x-6">48 <a href="#" class="text-blue-600 font-medium">Dashboard</a>49 <a href="#" class="text-gray-600 hover:text-blue-600">Templates</a>50 <a href="#" class="text-gray-600 hover:text-blue-600">Community</a>51 <a href="#" class="text-gray-600 hover:text-blue-600">Docs</a>52 </nav>53 <div class="flex items-center space-x-4">54 <button class="p-2 rounded-full hover:bg-gray-100">55 <i data-feather="bell"></i>56 </button>57 <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center">58 <i data-feather="plus" class="mr-2"></i>59 New Project60 </button>61 </div>62 </div>63 </header>64 65 <main class="container mx-auto px-4 py-6">66 <div class="flex justify-between items-center mb-6">67 <div>68 <h2 class="text-2xl font-bold text-gray-800">My Schematic</h2>69 <p class="text-gray-600">Last edited 2 hours ago</p>70 </div>71 <div class="flex space-x-3">72 <button class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 flex items-center">73 <i data-feather="share-2" class="mr-2"></i>74 Share75 </button>76 <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center">77 <i data-feather="play" class="mr-2"></i>78 Run Flow79 </button>80 </div>81 </div>82 83 <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">84 <div class="border-b border-gray-200 p-4 flex items-center justify-between bg-gray-50">85 <div class="flex space-x-3">86 <button class="p-2 rounded hover:bg-gray-200" title="Select">87 <i data-feather="mouse-pointer"></i>88 </button>89 <button class="p-2 rounded hover:bg-gray-200" title="Hand Tool">90 <i data-feather="hand"></i>91 </button>92 <div class="border-r border-gray-300 mx-2"></div>93 <button class="p-2 rounded hover:bg-gray-200" title="Zoom In">94 <i data-feather="zoom-in"></i>95 </button>96 <button class="p-2 rounded hover:bg-gray-200" title="Zoom Out">97 <i data-feather="zoom-out"></i>98 </button>99 <div class="border-r border-gray-300 mx-2"></div>100 <button class="p-2 rounded hover:bg-gray-200" title="Undo">101 <i data-feather="rotate-ccw"></i>102 </button>103 <button class="p-2 rounded hover:bg-gray-200" title="Redo">104 <i data-feather="rotate-cw"></i>105 </button>106 </div>107 <div class="text-sm text-gray-500">108 100% • 1280×720109 </div>110 </div>111 112 <div id="canvas" class="w-full h-[600px] relative overflow-hidden">113 <!-- Sample Nodes -->114 <div class="node absolute top-20 left-20 bg-white p-4 rounded-lg shadow-md border border-gray-200 w-48 cursor-move" draggable="true">115 <div class="flex justify-between items-center mb-2">116 <div class="flex items-center space-x-2">117 <i data-feather="cloud" class="text-green-500"></i>118 <h3 class="font-medium">HTTP Request</h3>119 </div>120 <i data-feather="more-vertical" class="text-gray-400"></i>121 </div>122 <p class="text-xs text-gray-500 mb-3">Trigger flow with HTTP request</p>123 <div class="flex justify-between items-center">124 <div class="text-xs text-gray-500">GET /api</div>125 <div class="connector ml-auto"></div>126 </div>127 </div>128 129 <div class="node absolute top-20 left-80 bg-white p-4 rounded-lg shadow-md border border-gray-200 w-48 cursor-move" draggable="true">130 <div class="flex justify-between items-center mb-2">131 <div class="flex items-center space-x-2">132 <i data-feather="database" class="text-blue-500"></i>133 <h3 class="font-medium">Database Query</h3>134 </div>135 <i data-feather="more-vertical" class="text-gray-400"></i>136 </div>137 <p class="text-xs text-gray-500 mb-3">Query your database</p>138 <div class="flex justify-between items-center">139 <div class="text-xs text-gray-500">SELECT users</div>140 <div class="flex space-x-2">141 <div class="connector"></div>142 <div class="connector"></div>143 </div>144 </div>145 </div>146 147 <div class="node absolute top-60 left-40 bg-white p-4 rounded-lg shadow-md border border-gray-200 w-48 cursor-move" draggable="true">148 <div class="flex justify-between items-center mb-2">149 <div class="flex items-center space-x-2">150 <i data-feather="mail" class="text-purple-500"></i>151 <h3 class="font-medium">Send Email</h3>152 </div>153 <i data-feather="more-vertical" class="text-gray-400"></i>154 </div>155 <p class="text-xs text-gray-500 mb-3">Send email to recipient</p>156 <div class="flex justify-between items-center">157 <div class="text-xs text-gray-500">SMTP</div>158 <div class="connector ml-auto"></div>159 </div>160 </div>161 162 <!-- Sample Connection Path (SVG) -->163 <svg class="absolute top-0 left-0 w-full h-full pointer-events-none">164 <path class="connection-path" d="M170 70 Q 210 70, 250 70" />165 <path class="connection-path" d="M250 90 Q 280 90, 280 120" />166 </svg>167 </div>168 </div>169 170 <div class="mt-6 bg-white rounded-xl shadow-sm border border-gray-200 p-4">171 <div class="flex justify-between items-center mb-4">172 <h3 class="font-medium text-gray-800">Node Properties</h3>173 <button class="text-blue-600 text-sm">View Documentation</button>174 </div>175 <div class="grid grid-cols-1 md:grid-cols-3 gap-4">176 <div>177 <label class="block text-sm font-medium text-gray-700 mb-1">Node Name</label>178 <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" value="HTTP Request">179 </div>180 <div>181 <label class="block text-sm font-medium text-gray-700 mb-1">Method</label>182 <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">183 <option>GET</option>184 <option>POST</option>185 <option>PUT</option>186 <option>DELETE</option>187 </select>188 </div>189 <div>190 <label class="block text-sm font-medium text-gray-700 mb-1">URL Path</label>191 <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" value="/api">192 </div>193 </div>194 <div class="mt-4">195 <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>196 <textarea class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" rows="2">Trigger flow with HTTP request</textarea>197 </div>198 <div class="mt-4 flex justify-end space-x-3">199 <button class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50">Cancel</button>200 <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Save Changes</button>201 </div>202 </div>203 </main>204 205 <div class="fixed bottom-4 right-4 flex space-x-3">206 <button class="p-3 bg-white rounded-full shadow-md hover:bg-gray-50" title="Help">207 <i data-feather="help-circle"></i>208 </button>209 <button class="p-3 bg-white rounded-full shadow-md hover:bg-gray-50" title="Chat">210 <i data-feather="message-square"></i>211 </button>212 </div>213 214 <script>215 // Initialize Vanta.js background216 VANTA.NET({217 el: "#vanta-bg",218 color: 0x3b82f6,219 backgroundColor: 0xf8fafc,220 points: 10,221 maxDistance: 18,222 spacing: 15223 });224 225 // Make nodes draggable226 document.addEventListener('DOMContentLoaded', () => {227 feather.replace();228 229 const nodes = document.querySelectorAll('.node');230 nodes.forEach(node => {231 let isDragging = false;232 let offsetX, offsetY;233 234 node.addEventListener('mousedown', (e) => {235 if (e.target === node || e.target.closest('.connector')) {236 isDragging = true;237 offsetX = e.clientX - node.getBoundingClientRect().left;238 offsetY = e.clientY - node.getBoundingClientRect().top;239 node.style.zIndex = 1000;240 node.style.cursor = 'grabbing';241 }242 });243 244 document.addEventListener('mousemove', (e) => {245 if (isDragging) {246 const canvas = document.getElementById('canvas');247 const canvasRect = canvas.getBoundingClientRect();248 249 let left = e.clientX - offsetX - canvasRect.left;250 let top = e.clientY - offsetY - canvasRect.top;251 252 // Boundary checks253 left = Math.max(0, Math.min(canvasRect.width - node.offsetWidth, left));254 top = Math.max(0, Math.min(canvasRect.height - node.offsetHeight, top));255 256 node.style.left = `${left}px`;257 node.style.top = `${top}px`;258 }259 });260 261 document.addEventListener('mouseup', () => {262 isDragging = false;263 node.style.zIndex = '';264 node.style.cursor = 'move';265 });266 });267 });268 </script>269</body>270</html>271