Hugging Face's logo

Spaces:
fenglui
/
mindflow
Running

App Files Community
mindflow / index.html
fenglui's picture
fenglui
Add 3 files
ccc21fd verified
Raw History Blame Contribute Delete
20.5 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MindFlow - Ultimate Mind Mapping & Knowledge Management</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>
.mindmap-node {
transition: all 0.3s ease;
}
.mindmap-node: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);
}
.sidebar-item {
transition: all 0.2s ease;
}
.sidebar-item:hover {
background-color: rgba(59, 130, 246, 0.1);
border-left: 3px solid #3b82f6;
}
.mindmap-container {
background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
background-size: 20px 20px;
}
.node-connection {
position: absolute;
background-color: #9ca3af;
transform-origin: left center;
z-index: -1;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.animate-pulse-slow {
animation: pulse 3s infinite;
}
</style>
</head>
<body class="bg-gray-50 font-sans text-gray-800">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div class="w-64 bg-white border-r border-gray-200 flex flex-col">
<div class="p-4 border-b border-gray-200">
<div class="flex items-center space-x-2">
<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold">MF</div>
<h1 class="text-xl font-bold text-gray-800">MindFlow</h1>
</div>
</div>
<div class="flex-1 overflow-y-auto">
<div class="p-4">
<button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md flex items-center justify-center space-x-2 transition">
<i class="fas fa-plus"></i>
<span>New Mind Map</span>
</button>
</div>
<div class="px-4 py-2">
<h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Recent Files</h3>
<ul class="mt-2 space-y-1">
<li>
<a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm rounded-md bg-blue-50 text-blue-700">
<i class="fas fa-project-diagram mr-3 text-blue-500"></i>
<span>Product Roadmap</span>
</a>
</li>
<li>
<a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm rounded-md">
<i class="fas fa-lightbulb mr-3 text-yellow-500"></i>
<span>Creative Ideas</span>
</a>
</li>
<li>
<a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm rounded-md">
<i class="fas fa-book mr-3 text-green-500"></i>
<span>Knowledge Base</span>
</a>
</li>
<li>
<a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm rounded-md">
<i class="fas fa-tasks mr-3 text-purple-500"></i>
<span>Project Tasks</span>
</a>
</li>
</ul>
</div>
<div class="px-4 py-2 mt-4">
<h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Templates</h3>
<ul class="mt-2 space-y-1">
<li>
<a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm rounded-md">
<i class="fas fa-briefcase mr-3 text-gray-500"></i>
<span>Business Plan</span>
</a>
</li>
<li>
<a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm rounded-md">
<i class="fas fa-graduation-cap mr-3 text-gray-500"></i>
<span>Study Notes</span>
</a>
</li>
<li>
<a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm rounded-md">
<i class="fas fa-users mr-3 text-gray-500"></i>
<span>Meeting Notes</span>
</a>
</li>
</ul>
</div>
</div>
<div class="p-4 border-t border-gray-200">
<div class="flex items-center space-x-3">
<div class="w-8 h-8 bg-gray-200 rounded-full"></div>
<div>
<p class="text-sm font-medium">John Doe</p>
<p class="text-xs text-gray-500">Free Plan</p>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- Top Navigation -->
<div class="bg-white border-b border-gray-200 p-4 flex items-center justify-between">
<div class="flex items-center space-x-4">
<h2 class="text-lg font-semibold">Product Roadmap</h2>
<div class="flex items-center space-x-2 text-sm">
<span class="text-gray-500">Last saved 5 minutes ago</span>
<i class="fas fa-check-circle text-green-500"></i>
</div>
</div>
<div class="flex items-center space-x-3">
<button class="flex items-center space-x-1 text-gray-600 hover:text-gray-900">
<i class="fas fa-users"></i>
<span>Share</span>
</button>
<button class="flex items-center space-x-1 text-gray-600 hover:text-gray-900">
<i class="fas fa-history"></i>
<span>History</span>
</button>
<button class="flex items-center space-x-1 text-gray-600 hover:text-gray-900">
<i class="fas fa-cog"></i>
<span>Settings</span>
</button>
</div>
</div>
<!-- Toolbar -->
<div class="bg-gray-50 border-b border-gray-200 p-2 flex items-center space-x-2">
<div class="flex items-center space-x-1">
<button class="p-2 rounded hover:bg-gray-200">
<i class="fas fa-text-width"></i>
</button>
<button class="p-2 rounded hover:bg-gray-200">
<i class="fas fa-image"></i>
</button>
<button class="p-2 rounded hover:bg-gray-200">
<i class="fas fa-link"></i>
</button>
<button class="p-2 rounded hover:bg-gray-200">
<i class="fas fa-paperclip"></i>
</button>
</div>
<div class="border-l border-gray-300 h-6 mx-2"></div>
<div class="flex items-center space-x-1">
<button class="p-2 rounded hover:bg-gray-200">
<i class="fas fa-shapes"></i>
</button>
<button class="p-2 rounded hover:bg-gray-200">
<i class="fas fa-palette"></i>
</button>
<button class="p-2 rounded hover:bg-gray-200">
<i class="fas fa-font"></i>
</button>
</div>
<div class="border-l border-gray-300 h-6 mx-2"></div>
<div class="flex items-center space-x-1">
<button class="p-2 rounded hover:bg-gray-200">
<i class="fas fa-expand"></i>
</button>
<button class="p-2 rounded hover:bg-gray-200">
<i class="fas fa-search"></i>
</button>
<button class="p-2 rounded hover:bg-gray-200">
<i class="fas fa-layer-group"></i>
</button>
</div>
</div>
<!-- Mind Map Canvas -->
<div class="flex-1 overflow-auto mindmap-container relative p-8">
<!-- Central Node -->
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<div class="mindmap-node bg-blue-500 text-white p-4 rounded-lg shadow-lg w-48 cursor-move" style="transform: translate(-50%, -50%);">
<div class="font-bold text-center">Product Roadmap</div>
</div>
</div>
<!-- Child Nodes -->
<div class="absolute top-1/4 left-1/4">
<div class="mindmap-node bg-green-500 text-white p-3 rounded-lg shadow-lg w-40 cursor-move">
<div class="font-semibold">Q1 Goals</div>
<div class="text-xs mt-1">Market Research</div>
</div>
</div>
<div class="absolute top-1/4 right-1/4">
<div class="mindmap-node bg-purple-500 text-white p-3 rounded-lg shadow-lg w-40 cursor-move">
<div class="font-semibold">Q2 Goals</div>
<div class="text-xs mt-1">Prototype Development</div>
</div>
</div>
<div class="absolute bottom-1/4 left-1/4">
<div class="mindmap-node bg-yellow-500 text-white p-3 rounded-lg shadow-lg w-40 cursor-move">
<div class="font-semibold">Q3 Goals</div>
<div class="text-xs mt-1">Beta Testing</div>
</div>
</div>
<div class="absolute bottom-1/4 right-1/4">
<div class="mindmap-node bg-red-500 text-white p-3 rounded-lg shadow-lg w-40 cursor-move">
<div class="font-semibold">Q4 Goals</div>
<div class="text-xs mt-1">Product Launch</div>
</div>
</div>
<!-- Floating Action Button -->
<div class="fixed bottom-8 right-8">
<button class="w-12 h-12 bg-blue-500 hover:bg-blue-600 text-white rounded-full shadow-lg flex items-center justify-center transition transform hover:scale-110">
<i class="fas fa-plus text-xl"></i>
</button>
</div>
<!-- Connection lines would be drawn here with JavaScript -->
</div>
<!-- Status Bar -->
<div class="bg-white border-t border-gray-200 p-2 flex items-center justify-between text-xs text-gray-500">
<div class="flex items-center space-x-4">
<span>Zoom: 100%</span>
<span>Nodes: 5</span>
</div>
<div>
<span>MindFlow v1.0.0</span>
</div>
</div>
</div>
<!-- Right Sidebar -->
<div class="w-80 bg-white border-l border-gray-200 flex flex-col">
<div class="p-4 border-b border-gray-200">
<h3 class="font-medium">Node Properties</h3>
</div>
<div class="flex-1 overflow-y-auto p-4">
<div class="space-y-6">
<div>
<h4 class="text-sm font-medium text-gray-700 mb-2">Content</h4>
<textarea class="w-full border border-gray-300 rounded-md p-2 text-sm focus:ring-blue-500 focus:border-blue-500" rows="3">Product Roadmap</textarea>
</div>
<div>
<h4 class="text-sm font-medium text-gray-700 mb-2">Node Style</h4>
<div class="grid grid-cols-5 gap-2">
<div class="w-8 h-8 bg-blue-500 rounded-md cursor-pointer border-2 border-blue-600"></div>
<div class="w-8 h-8 bg-green-500 rounded-md cursor-pointer"></div>
<div class="w-8 h-8 bg-purple-500 rounded-md cursor-pointer"></div>
<div class="w-8 h-8 bg-yellow-500 rounded-md cursor-pointer"></div>
<div class="w-8 h-8 bg-red-500 rounded-md cursor-pointer"></div>
</div>
</div>
<div>
<h4 class="text-sm font-medium text-gray-700 mb-2">Text Style</h4>
<div class="flex space-x-2">
<button class="p-1 border border-gray-300 rounded">
<i class="fas fa-bold"></i>
</button>
<button class="p-1 border border-gray-300 rounded">
<i class="fas fa-italic"></i>
</button>
<button class="p-1 border border-gray-300 rounded">
<i class="fas fa-underline"></i>
</button>
</div>
<div class="mt-2">
<select class="w-full border border-gray-300 rounded-md p-1 text-sm">
<option>Arial</option>
<option>Helvetica</option>
<option>Times New Roman</option>
</select>
</div>
</div>
<div>
<h4 class="text-sm font-medium text-gray-700 mb-2">Icons</h4>
<div class="grid grid-cols-5 gap-2">
<div class="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-md cursor-pointer">
<i class="fas fa-check text-gray-600"></i>
</div>
<div class="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-md cursor-pointer">
<i class="fas fa-star text-gray-600"></i>
</div>
<div class="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-md cursor-pointer">
<i class="fas fa-flag text-gray-600"></i>
</div>
<div class="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-md cursor-pointer">
<i class="fas fa-heart text-gray-600"></i>
</div>
<div class="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-md cursor-pointer">
<i class="fas fa-bolt text-gray-600"></i>
</div>
</div>
</div>
<div>
<h4 class="text-sm font-medium text-gray-700 mb-2">Attachments</h4>
<div class="border border-dashed border-gray-300 rounded-md p-4 text-center">
<i class="fas fa-cloud-upload-alt text-gray-400 text-2xl mb-2"></i>
<p class="text-xs text-gray-500">Drag & drop files here</p>
</div>
</div>
</div>
</div>
<div class="p-4 border-t border-gray-200">
<button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-4 rounded-md flex items-center justify-center space-x-2 transition">
<i class="fas fa-question-circle"></i>
<span>Help & Feedback</span>
</button>
</div>
</div>
</div>
<script>
// This would be replaced with actual mind mapping functionality
document.addEventListener('DOMContentLoaded', function() {
// Simple animation for nodes to demonstrate interactivity
const nodes = document.querySelectorAll('.mindmap-node');
nodes.forEach(node => {
node.addEventListener('mouseenter', () => {
node.classList.add('animate-pulse-slow');
});
node.addEventListener('mouseleave', () => {
node.classList.remove('animate-pulse-slow');
});
});
// Simulate connection lines (would be drawn dynamically in a real app)
setTimeout(() => {
const centralNode = document.querySelector('.mindmap-node.bg-blue-500');
const centralRect = centralNode.getBoundingClientRect();
const centralX = centralRect.left + centralRect.width / 2;
const centralY = centralRect.top + centralRect.height / 2;
nodes.forEach(node => {
if (!node.classList.contains('bg-blue-500')) {
const nodeRect = node.getBoundingClientRect();
const nodeX = nodeRect.left + nodeRect.width / 2;
const nodeY = nodeRect.top + nodeRect.height / 2;
const length = Math.sqrt(Math.pow(nodeX - centralX, 2) + Math.pow(nodeY - centralY, 2));
const angle = Math.atan2(nodeY - centralY, nodeX - centralX) * 180 / Math.PI;
const connection = document.createElement('div');
connection.className = 'node-connection';
connection.style.width = `${length}px`;
connection.style.height = '2px';
connection.style.left = `${centralX}px`;
connection.style.top = `${centralY}px`;
connection.style.transform = `rotate(${angle}deg)`;
document.querySelector('.mindmap-container').appendChild(connection);
}
});
}, 500);
});
</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=fenglui/mindflow" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>