| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>FlowForge - Marketing Automation Builder</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#6366f1', |
| secondary: '#8b5cf6', |
| undefined: { |
| 500: '#6366f1' |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| .draggable-element { |
| cursor: move; |
| } |
| .drop-zone { |
| transition: all 0.3s ease; |
| } |
| .drop-zone.active { |
| background-color: rgba(99, 102, 241, 0.1); |
| border: 2px dashed #6366f1; |
| } |
| .connection-line { |
| stroke: #6366f1; |
| stroke-width: 2; |
| marker-end: url(#arrowhead); |
| } |
| .element-card:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen flex flex-col"> |
| |
| <header class="bg-white shadow-sm py-4 px-6 flex items-center justify-between"> |
| <div class="flex items-center space-x-2"> |
| <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center"> |
| <i data-feather="zap" class="text-white"></i> |
| </div> |
| <h1 class="text-2xl font-bold text-gray-800">FlowForge</h1> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-indigo-600 transition flex items-center"> |
| <i data-feather="save" class="mr-2"></i> Save Workflow |
| </button> |
| <button class="px-4 py-2 bg-secondary text-white rounded-lg hover:bg-purple-600 transition flex items-center"> |
| <i data-feather="play" class="mr-2"></i> Test Flow |
| </button> |
| <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center"> |
| <i data-feather="user"></i> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <div class="flex flex-1 overflow-hidden"> |
| |
| <aside class="w-80 bg-white shadow-md p-6 overflow-y-auto"> |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">Automation Components</h2> |
| |
| <div class="mb-6"> |
| <h3 class="font-medium text-gray-700 mb-2 flex items-center"> |
| <i data-feather="mail" class="mr-2 text-primary"></i> Email Actions |
| </h3> |
| <div class="space-y-3"> |
| <div class="draggable-element p-4 bg-white border border-gray-200 rounded-lg shadow-sm cursor-move element-card" data-type="email-trigger"> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center mr-3"> |
| <i data-feather="send" class="text-blue-500"></i> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-800">Email Trigger</h4> |
| <p class="text-xs text-gray-500">Send automated emails</p> |
| </div> |
| </div> |
| </div> |
| <div class="draggable-element p-4 bg-white border border-gray-200 rounded-lg shadow-sm cursor-move element-card" data-type="email-template"> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center mr-3"> |
| <i data-feather="file-text" class="text-blue-500"></i> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-800">Email Template</h4> |
| <p class="text-xs text-gray-500">Design email content</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <h3 class="font-medium text-gray-700 mb-2 flex items-center"> |
| <i data-feather="message-square" class="mr-2 text-green-500"></i> Communication |
| </h3> |
| <div class="space-y-3"> |
| <div class="draggable-element p-4 bg-white border border-gray-200 rounded-lg shadow-sm cursor-move element-card" data-type="sms-notification"> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center mr-3"> |
| <i data-feather="message-circle" class="text-green-500"></i> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-800">SMS Notification</h4> |
| <p class="text-xs text-gray-500">Send text messages</p> |
| </div> |
| </div> |
| </div> |
| <div class="draggable-element p-4 bg-white border border-gray-200 rounded-lg shadow-sm cursor-move element-card" data-type="social-post"> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center mr-3"> |
| <i data-feather="share-2" class="text-green-500"></i> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-800">Social Media Post</h4> |
| <p class="text-xs text-gray-500">Post to social platforms</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <h3 class="font-medium text-gray-700 mb-2 flex items-center"> |
| <i data-feather="database" class="mr-2 text-purple-500"></i> Data & CRM |
| </h3> |
| <div class="space-y-3"> |
| <div class="draggable-element p-4 bg-white border border-gray-200 rounded-lg shadow-sm cursor-move element-card" data-type="lead-scoring"> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center mr-3"> |
| <i data-feather="bar-chart-2" class="text-purple-500"></i> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-800">Lead Scoring</h4> |
| <p class="text-xs text-gray-500">Score leads automatically</p> |
| </div> |
| </div> |
| </div> |
| <div class="draggable-element p-4 bg-white border border-gray-200 rounded-lg shadow-sm cursor-move element-card" data-type="crm-integration"> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center mr-3"> |
| <i data-feather="layers" class="text-purple-500"></i> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-800">CRM Integration</h4> |
| <p class="text-xs text-gray-500">Sync with CRM systems</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="font-medium text-gray-700 mb-2 flex items-center"> |
| <i data-feather="trending-up" class="mr-2 text-yellow-500"></i> Analytics |
| </h3> |
| <div class="space-y-3"> |
| <div class="draggable-element p-4 bg-white border border-gray-200 rounded-lg shadow-sm cursor-move element-card" data-type="conversion-tracking"> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 rounded-lg bg-yellow-100 flex items-center justify-center mr-3"> |
| <i data-feather="target" class="text-yellow-500"></i> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-800">Conversion Tracking</h4> |
| <p class="text-xs text-gray-500">Track campaign success</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </aside> |
|
|
| |
| <main class="flex-1 flex flex-col overflow-hidden relative"> |
| <div class="p-4 border-b border-gray-200 bg-white flex items-center"> |
| <h2 class="text-lg font-semibold text-gray-800">Workflow Canvas</h2> |
| <div class="ml-auto flex space-x-2"> |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition flex items-center"> |
| <i data-feather="zoom-in" class="mr-1"></i> Zoom In |
| </button> |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition flex items-center"> |
| <i data-feather="zoom-out" class="mr-1"></i> Zoom Out |
| </button> |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition flex items-center"> |
| <i data-feather="rotate-cw" class="mr-1"></i> Reset View |
| </button> |
| </div> |
| </div> |
| |
| <div id="canvas-container" class="flex-1 overflow-auto bg-gray-50 relative"> |
| <div id="workflow-canvas" class="min-h-full p-8 relative drop-zone"> |
| <svg class="absolute top-0 left-0 w-full h-full pointer-events-none" id="connections-svg"> |
| <defs> |
| <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto"> |
| <polygon points="0 0, 10 3.5, 0 7" fill="#6366f1" /> |
| </marker> |
| </defs> |
| |
| </svg> |
| |
| <div class="text-center py-20"> |
| <div class="inline-block p-6 bg-white rounded-xl shadow-sm border border-dashed border-gray-300"> |
| <i data-feather="plus-circle" class="w-12 h-12 text-gray-400 mx-auto mb-4"></i> |
| <h3 class="text-lg font-medium text-gray-700 mb-2">Drag components here to start building</h3> |
| <p class="text-gray-500 max-w-md">Create your marketing automation workflow by dragging elements from the sidebar and connecting them together</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <aside id="properties-panel" class="w-80 bg-white shadow-md p-6 overflow-y-auto transform transition-transform duration-300 translate-x-full"> |
| <div class="flex items-center justify-between mb-6"> |
| <h2 class="text-xl font-semibold text-gray-800">Element Properties</h2> |
| <button id="close-properties" class="text-gray-500 hover:text-gray-700"> |
| <i data-feather="x"></i> |
| </button> |
| </div> |
| |
| <div id="properties-content"> |
| <p class="text-gray-500 text-center py-10">Select an element to configure its properties</p> |
| </div> |
| </aside> |
| </div> |
|
|
| |
| <footer class="bg-white border-t border-gray-200 py-3 px-6 text-center text-sm text-gray-500"> |
| <p>FlowForge Marketing Automation Builder • Drag and drop to create powerful customer journeys</p> |
| </footer> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| interact('.draggable-element').draggable({ |
| inertia: true, |
| modifiers: [ |
| interact.modifiers.restrictRect({ |
| restriction: 'parent', |
| endOnly: true |
| }) |
| ], |
| autoScroll: true, |
| listeners: { |
| move: dragMoveListener |
| } |
| }); |
| |
| function dragMoveListener(event) { |
| const target = event.target; |
| const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx; |
| const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; |
| |
| target.style.transform = `translate(${x}px, ${y}px)`; |
| target.setAttribute('data-x', x); |
| target.setAttribute('data-y', y); |
| } |
| |
| |
| const dropZone = document.getElementById('workflow-canvas'); |
| |
| dropZone.addEventListener('dragover', function(e) { |
| e.preventDefault(); |
| this.classList.add('active'); |
| }); |
| |
| dropZone.addEventListener('dragleave', function() { |
| this.classList.remove('active'); |
| }); |
| |
| dropZone.addEventListener('drop', function(e) { |
| e.preventDefault(); |
| this.classList.remove('active'); |
| |
| const type = e.dataTransfer.getData('text/plain'); |
| |
| console.log(`Dropped element of type: ${type}`); |
| }); |
| |
| |
| document.getElementById('close-properties').addEventListener('click', function() { |
| document.getElementById('properties-panel').classList.add('translate-x-full'); |
| }); |
| |
| |
| function drawSampleConnection() { |
| const svg = document.getElementById('connections-svg'); |
| const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); |
| line.setAttribute('x1', '200'); |
| line.setAttribute('y1', '200'); |
| line.setAttribute('x2', '400'); |
| line.setAttribute('y2', '300'); |
| line.setAttribute('class', 'connection-line'); |
| svg.appendChild(line); |
| } |
| |
| |
| setTimeout(drawSampleConnection, 1000); |
| </script> |
| </body> |
| </html> |
|
|
