Hugging Face's logo

Spaces:
usezivvy
/
flowforge
Running

App Files Community
flowforge / index.html
usezivvy's picture
usezivvy
Build a visual drag and drop marketing automation builder
e6abb83 verified
Raw History Blame Contribute Delete
15.7 kB
<!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 -->
<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>
<!-- Main Content -->
<div class="flex flex-1 overflow-hidden">
<!-- Sidebar - Component Library -->
<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>
<!-- Canvas Area -->
<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>
<!-- Connection lines will be drawn here dynamically -->
</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>
<!-- Properties Panel -->
<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 -->
<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();
// Initialize draggable elements
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);
}
// Drop zone functionality
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');
// In a real implementation, we would create the actual element here
console.log(`Dropped element of type: ${type}`);
});
// Properties panel toggle
document.getElementById('close-properties').addEventListener('click', function() {
document.getElementById('properties-panel').classList.add('translate-x-full');
});
// Sample connection drawing (in a real app, this would be dynamic)
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);
}
// Draw sample connection for demo purposes
setTimeout(drawSampleConnection, 1000);
</script>
</body>
</html>