|
|
<!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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="flex-1 overflow-auto mindmap-container relative p-8"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
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'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
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> |
