| <!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> |
