Spaces:
Running
Running
| <html lang="en" class="h-full"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CollabFlow - Creative Feedback Platform</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"> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| secondary: { | |
| 50: '#f5f3ff', | |
| 100: '#ede9fe', | |
| 200: '#ddd6fe', | |
| 300: '#c4b5fd', | |
| 400: '#a78bfa', | |
| 500: '#8b5cf6', | |
| 600: '#7c3aed', | |
| 700: '#6d28d9', | |
| 800: '#5b21b6', | |
| 900: '#4c1d95', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .drawing-canvas { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| pointer-events: none; | |
| z-index: 10; | |
| } | |
| .annotation-marker { | |
| position: absolute; | |
| width: 24px; | |
| height: 24px; | |
| background-color: rgba(59, 130, 246, 0.8); | |
| border-radius: 50%; | |
| cursor: pointer; | |
| transform: translate(-50%, -50%); | |
| z-index: 20; | |
| } | |
| .video-comment-marker { | |
| position: absolute; | |
| width: 100%; | |
| height: 4px; | |
| background-color: rgba(239, 68, 68, 0.8); | |
| top: 0; | |
| left: 0; | |
| z-index: 20; | |
| } | |
| .comment-thread { | |
| transition: all 0.2s ease; | |
| } | |
| .comment-thread:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| } | |
| .emoji-picker { | |
| position: absolute; | |
| bottom: 100%; | |
| right: 0; | |
| z-index: 30; | |
| background: white; | |
| border-radius: 8px; | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| padding: 8px; | |
| display: none; | |
| } | |
| .dark .emoji-picker { | |
| background: #1f2937; | |
| } | |
| .mention-suggestions { | |
| position: absolute; | |
| bottom: 100%; | |
| left: 0; | |
| z-index: 30; | |
| background: white; | |
| border-radius: 8px; | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| max-height: 200px; | |
| overflow-y: auto; | |
| display: none; | |
| } | |
| .dark .mention-suggestions { | |
| background: #1f2937; | |
| } | |
| .file-preview-container { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .tooltip { | |
| position: relative; | |
| } | |
| .tooltip .tooltip-text { | |
| visibility: hidden; | |
| width: 120px; | |
| background-color: #111827; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 6px; | |
| padding: 5px; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; | |
| left: 50%; | |
| margin-left: -60px; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .tooltip:hover .tooltip-text { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| .dark .tooltip .tooltip-text { | |
| background-color: #f3f4f6; | |
| color: #111827; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| .dark ::-webkit-scrollbar-track { | |
| background: #374151; | |
| } | |
| .dark ::-webkit-scrollbar-thumb { | |
| background: #6b7280; | |
| } | |
| .dark ::-webkit-scrollbar-thumb:hover { | |
| background: #9ca3af; | |
| } | |
| </style> | |
| </head> | |
| <body class="h-full bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-200"> | |
| <div id="app" class="flex flex-col h-full"> | |
| <!-- Header --> | |
| <header class="bg-white dark:bg-gray-800 shadow-sm z-10"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center py-4"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-comments text-primary-500 text-2xl mr-2"></i> | |
| <h1 class="text-xl font-bold">CollabFlow</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-primary-600 dark:text-primary-400 font-medium">Projects</a> | |
| <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Team</a> | |
| <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Activity</a> | |
| <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Reports</a> | |
| </nav> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"> | |
| <i class="fas fa-moon dark:hidden"></i> | |
| <i class="fas fa-sun hidden dark:inline"></i> | |
| </button> | |
| <div class="relative"> | |
| <button id="notifications-btn" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 relative"> | |
| <i class="fas fa-bell"></i> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> | |
| </button> | |
| <div id="notifications-dropdown" class="hidden absolute right-0 mt-2 w-72 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-200 dark:border-gray-700"> | |
| <div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700"> | |
| <h3 class="font-medium">Notifications</h3> | |
| </div> | |
| <div class="max-h-60 overflow-y-auto"> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt=""> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Sarah Johnson mentioned you in a comment</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">2 minutes ago</p> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Michael Chen replied to your feedback</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">15 minutes ago</p> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt=""> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Emma Wilson uploaded a new version</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">1 hour ago</p> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="px-4 py-2 border-t border-gray-200 dark:border-gray-700"> | |
| <a href="#" class="text-sm font-medium text-primary-600 dark:text-primary-400">View all notifications</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <button id="user-menu-btn" class="flex items-center space-x-2 focus:outline-none"> | |
| <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User profile"> | |
| <span class="hidden md:inline">Alex Johnson</span> | |
| <i class="fas fa-chevron-down text-xs"></i> | |
| </button> | |
| <div id="user-menu-dropdown" class="hidden absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-200 dark:border-gray-700"> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700">Your Profile</a> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700">Settings</a> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700">Integrations</a> | |
| <div class="border-t border-gray-200 dark:border-gray-700"></div> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700">Sign out</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-1 overflow-hidden"> | |
| <div class="flex h-full"> | |
| <!-- Sidebar --> | |
| <aside class="hidden md:block w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 overflow-y-auto"> | |
| <div class="p-4"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-lg font-semibold">Website Redesign</h2> | |
| <button class="p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">TEAM MEMBERS</h3> | |
| <button class="text-primary-600 dark:text-primary-400 text-sm font-medium">Invite</button> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="flex items-center space-x-2"> | |
| <img class="h-6 w-6 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt=""> | |
| <span class="text-sm">Sarah Johnson</span> | |
| <span class="ml-auto text-xs px-2 py-1 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-full">Admin</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <img class="h-6 w-6 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> | |
| <span class="text-sm">Michael Chen</span> | |
| <span class="ml-auto text-xs px-2 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full">Editor</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <img class="h-6 w-6 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt=""> | |
| <span class="text-sm">Emma Wilson</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <img class="h-6 w-6 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt=""> | |
| <span class="text-sm">Alex Johnson</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">FILES</h3> | |
| <button class="text-primary-600 dark:text-primary-400 text-sm font-medium">Upload</button> | |
| </div> | |
| <div class="space-y-1"> | |
| <button class="w-full flex items-center space-x-2 px-2 py-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-left"> | |
| <i class="fas fa-file-image text-blue-500"></i> | |
| <span class="text-sm">Homepage Design</span> | |
| </button> | |
| <button class="w-full flex items-center space-x-2 px-2 py-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-left"> | |
| <i class="fas fa-file-pdf text-red-500"></i> | |
| <span class="text-sm">Style Guide.pdf</span> | |
| </button> | |
| <button class="w-full flex items-center space-x-2 px-2 py-1.5 rounded bg-gray-100 dark:bg-gray-700 text-left"> | |
| <i class="fas fa-video text-purple-500"></i> | |
| <span class="text-sm">Product Demo.mp4</span> | |
| </button> | |
| <button class="w-full flex items-center space-x-2 px-2 py-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-left"> | |
| <i class="fas fa-file-alt text-yellow-500"></i> | |
| <span class="text-sm">Content Draft.docx</span> | |
| </button> | |
| <button class="w-full flex items-center space-x-2 px-2 py-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-left"> | |
| <i class="fas fa-link text-green-500"></i> | |
| <span class="text-sm">Staging Website</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">INTEGRATIONS</h3> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-full bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600"> | |
| <i class="fab fa-slack text-purple-500"></i> | |
| </button> | |
| <button class="p-2 rounded-full bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600"> | |
| <i class="fab fa-google-drive text-blue-500"></i> | |
| </button> | |
| <button class="p-2 rounded-full bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600"> | |
| <i class="fab fa-figma text-pink-500"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Content Area --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Toolbar --> | |
| <div class="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-4 py-2 flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <button class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-arrow-left"></i> | |
| </button> | |
| <h2 class="font-medium">Product Demo.mp4</h2> | |
| <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full">Version 3</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="relative"> | |
| <button id="tools-btn" class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-pencil-alt"></i> | |
| </button> | |
| <div id="tools-dropdown" class="hidden absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-200 dark:border-gray-700"> | |
| <button class="w-full flex items-center px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-highlighter mr-2 text-yellow-500"></i> | |
| <span>Highlight</span> | |
| </button> | |
| <button class="w-full flex items-center px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-pen mr-2 text-blue-500"></i> | |
| <span>Draw</span> | |
| </button> | |
| <button class="w-full flex items-center px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-arrow-right mr-2 text-red-500"></i> | |
| <span>Arrow</span> | |
| </button> | |
| <button class="w-full flex items-center px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-square mr-2 text-green-500"></i> | |
| <span>Rectangle</span> | |
| </button> | |
| <div class="border-t border-gray-200 dark:border-gray-700"></div> | |
| <button class="w-full flex items-center px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-eraser mr-2 text-gray-500"></i> | |
| <span>Clear All</span> | |
| </button> | |
| </div> | |
| </div> | |
| <button class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-history"></i> | |
| </button> | |
| <button class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| <button class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-share-alt"></i> | |
| </button> | |
| <button class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- File Preview and Comments --> | |
| <div class="flex-1 flex overflow-hidden"> | |
| <!-- File Preview Area --> | |
| <div class="flex-1 overflow-auto p-4 bg-gray-100 dark:bg-gray-800"> | |
| <div class="file-preview-container bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden mx-auto max-w-4xl relative"> | |
| <video controls class="w-full"> | |
| <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"> | |
| Your browser does not support the video tag. | |
| </video> | |
| <div class="video-comment-marker" style="left: 30%;"></div> | |
| <div class="video-comment-marker" style="left: 65%;"></div> | |
| <canvas class="drawing-canvas" width="1280" height="720"></canvas> | |
| <div class="annotation-marker" style="top: 30%; left: 40%;"></div> | |
| <div class="annotation-marker" style="top: 60%; left: 70%;"></div> | |
| </div> | |
| <div class="mt-6 bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 max-w-4xl mx-auto"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-medium">Version History</h3> | |
| <button class="text-primary-600 dark:text-primary-400 text-sm font-medium">Upload New Version</button> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="flex items-center space-x-3 p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <div class="flex-shrink-0"> | |
| <div class="h-8 w-8 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center"> | |
| <i class="fas fa-file-video text-primary-600 dark:text-primary-400"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium truncate">Product Demo.mp4</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">Uploaded by Sarah Johnson • 2 hours ago</p> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <span class="text-xs px-2 py-1 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-full">Current</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3 p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <div class="flex-shrink-0"> | |
| <div class="h-8 w-8 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center"> | |
| <i class="fas fa-file-video text-gray-500"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium truncate">Product Demo.mp4</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">Uploaded by Michael Chen • Yesterday</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3 p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <div class="flex-shrink-0"> | |
| <div class="h-8 w-8 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center"> | |
| <i class="fas fa-file-video text-gray-500"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium truncate">Product Demo.mp4</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">Uploaded by Emma Wilson • 3 days ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Comments Sidebar --> | |
| <div class="hidden lg:block w-80 bg-white dark:bg-gray-800 border-l border-gray-200 dark:border-gray-700 overflow-y-auto"> | |
| <div class="p-4"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-medium">Comments</h3> | |
| <div class="flex items-center space-x-2"> | |
| <button class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-filter"></i> | |
| </button> | |
| <button class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-sort"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Comment Thread --> | |
| <div class="comment-thread bg-gray-50 dark:bg-gray-700 rounded-lg p-3 mb-3"> | |
| <div class="flex items-start mb-2"> | |
| <img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt=""> | |
| <div class="flex-1"> | |
| <div class="flex items-center"> | |
| <span class="font-medium">Sarah Johnson</span> | |
| <span class="ml-2 text-xs text-gray-500 dark:text-gray-400">2 min ago</span> | |
| </div> | |
| <p class="text-sm mt-1">The product demo at 0:30 needs more emphasis on the new features. Can we add a callout here?</p> | |
| </div> | |
| </div> | |
| <div class="ml-10 pl-2 border-l-2 border-gray-300 dark:border-gray-600"> | |
| <div class="flex items-start mb-2"> | |
| <img class="h-6 w-6 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/75.jpg" alt=""> | |
| <div class="flex-1"> | |
| <div class="flex items-center"> | |
| <span class="text-sm font-medium">Alex Johnson</span> | |
| <span class="ml-2 text-xs text-gray-500 dark:text-gray-400">1 min ago</span> | |
| </div> | |
| <p class="text-xs mt-1">@Sarah Johnson I agree. I'll add a highlight effect there.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between mt-2"> | |
| <div class="flex space-x-2"> | |
| <button class="text-xs text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400"> | |
| <i class="far fa-thumbs-up mr-1"></i> 2 | |
| </button> | |
| <button class="text-xs text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400"> | |
| <i class="far fa-smile mr-1"></i> 1 | |
| </button> | |
| </div> | |
| <button class="text-xs text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400"> | |
| Reply | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Comment Thread --> | |
| <div class="comment-thread bg-gray-50 dark:bg-gray-700 rounded-lg p-3 mb-3"> | |
| <div class="flex items-start mb-2"> | |
| <img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> | |
| <div class="flex-1"> | |
| <div class="flex items-center"> | |
| <span class="font-medium">Michael Chen</span> | |
| <span class="ml-2 text-xs text-gray-500 dark:text-gray-400">15 min ago</span> | |
| </div> | |
| <p class="text-sm mt-1">The transition at 1:05 feels abrupt. Maybe we can smooth it out?</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between mt-2"> | |
| <div class="flex space-x-2"> | |
| <button class="text-xs text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400"> | |
| <i class="far fa-thumbs-up mr-1"></i> 1 | |
| </button> | |
| </div> | |
| <button class="text-xs text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400"> | |
| Reply | |
| </button> | |
| </div> | |
| </div> | |
| <!-- New Comment Form --> | |
| <div class="mt-6"> | |
| <div class="flex items-start"> | |
| <img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/75.jpg" alt=""> | |
| <div class="flex-1"> | |
| <div class="relative"> | |
| <textarea class="w-full border border-gray-300 dark:border-gray-600 rounded-lg p-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-700" rows="2" placeholder="Add a comment..."></textarea> | |
| <div class="absolute bottom-2 right-2 flex space-x-1"> | |
| <button class="p-1 text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400"> | |
| <i class="far fa-smile"></i> | |
| </button> | |
| <button class="p-1 text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400"> | |
| <i class="fas fa-at"></i> | |
| </button> | |
| <button class="p-1 text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400"> | |
| <i class="fas fa-paperclip"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex justify-end mt-2"> | |
| <button class="px-3 py-1 bg-primary-600 hover:bg-primary-700 text-white text-sm font-medium rounded-md"> | |
| Post Comment | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| // Dark mode toggle | |
| document.getElementById('theme-toggle').addEventListener('click', function() { | |
| document.documentElement.classList.toggle('dark'); | |
| localStorage.setItem('darkMode', document.documentElement.classList.contains('dark')); | |
| }); | |
| // Check for saved dark mode preference | |
| if (localStorage.getItem('darkMode') === 'true') { | |
| document.documentElement.classList.add('dark'); | |
| } | |
| // Dropdown toggles | |
| const dropdownToggles = { | |
| 'notifications-btn': 'notifications-dropdown', | |
| 'user-menu-btn': 'user-menu-dropdown', | |
| 'tools-btn': 'tools-dropdown' | |
| }; | |
| Object.entries(dropdownToggles).forEach(([btnId, dropdownId]) => { | |
| const btn = document.getElementById(btnId); | |
| const dropdown = document.getElementById(dropdownId); | |
| btn.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| dropdown.classList.toggle('hidden'); | |
| }); | |
| // Close dropdown when clicking outside | |
| document.addEventListener('click', (e) => { | |
| if (!dropdown.contains(e.target) && !btn.contains(e.target)) { | |
| dropdown.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| // Simple canvas drawing functionality | |
| const canvas = document.querySelector('.drawing-canvas'); | |
| const ctx = canvas.getContext('2d'); | |
| let isDrawing = false; | |
| let currentTool = 'pen'; | |
| let currentColor = '#3b82f6'; | |
| // Set canvas size to match video | |
| function resizeCanvas() { | |
| const video = document.querySelector('video'); | |
| if (video) { | |
| canvas.style.width = video.clientWidth + 'px'; | |
| canvas.style.height = video.clientHeight + 'px'; | |
| } | |
| } | |
| window.addEventListener('resize', resizeCanvas); | |
| resizeCanvas(); | |
| // Drawing tools | |
| document.querySelectorAll('#tools-dropdown button').forEach(button => { | |
| button.addEventListener('click', function() { | |
| const icon = this.querySelector('i'); | |
| if (icon.classList.contains('fa-highlighter')) { | |
| currentTool = 'highlight'; | |
| currentColor = 'rgba(250, 204, 21, 0.5)'; | |
| } else if (icon.classList.contains('fa-pen')) { | |
| currentTool = 'pen'; | |
| currentColor = '#3b82f6'; | |
| } else if (icon.classList.contains('fa-arrow-right')) { | |
| currentTool = 'arrow'; | |
| currentColor = '#ef4444'; | |
| } else if (icon.classList.contains('fa-square')) { | |
| currentTool = 'rectangle'; | |
| currentColor = '#10b981'; | |
| } else if (icon.classList.contains('fa-eraser')) { | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| } | |
| document.getElementById('tools-dropdown').classList.add('hidden'); | |
| }); | |
| }); | |
| // Drawing functionality | |
| canvas.addEventListener('mousedown', startDrawing); | |
| canvas.addEventListener('mousemove', draw); | |
| canvas.addEventListener('mouseup', stopDrawing); | |
| canvas.addEventListener('mouseout', stopDrawing); | |
| function startDrawing(e) { | |
| isDrawing = true; | |
| draw(e); | |
| } | |
| function draw(e) { | |
| if (!isDrawing) return; | |
| const rect = canvas.getBoundingClientRect(); | |
| const x = (e.clientX - rect.left) * (canvas.width / rect.width); | |
| const y = (e.clientY - rect.top) * (canvas.height / rect.height); | |
| ctx.strokeStyle = currentColor; | |
| ctx.lineWidth = 2; | |
| ctx.lineCap = 'round'; | |
| if (currentTool === 'pen' || currentTool === 'highlight') { | |
| ctx.lineTo(x, y); | |
| ctx.stroke(); | |
| ctx.beginPath(); | |
| ctx.moveTo(x, y); | |
| } else if (currentTool === 'arrow') { | |
| // Simple arrow drawing | |
| ctx.beginPath(); | |
| ctx.moveTo(x - 20, y); | |
| ctx.lineTo(x, y); | |
| ctx.lineTo(x - 10, y - 10); | |
| ctx.moveTo(x, y); | |
| ctx.lineTo(x - 10, y + 10); | |
| ctx.stroke(); | |
| } else if (currentTool === 'rectangle') { | |
| // Simple rectangle drawing | |
| ctx.beginPath(); | |
| ctx.rect(x - 30, y - 20, 60, 40); | |
| ctx.stroke(); | |
| } | |
| } | |
| function stopDrawing() { | |
| isDrawing = false; | |
| ctx.beginPath(); | |
| } | |
| // Annotation marker click handlers | |
| document.querySelectorAll('.annotation-marker').forEach(marker => { | |
| marker.addEventListener('click', function() { | |
| // In a real app, this would scroll to the corresponding comment | |
| alert('Annotation clicked! This would scroll to the related comment in a real app.'); | |
| }); | |
| }); | |
| // Video comment marker click handlers | |
| document.querySelectorAll('.video-comment-marker').forEach(marker => { | |
| marker.addEventListener('click', function() { | |
| const video = document.querySelector('video'); | |
| const markerLeft = parseFloat(marker.style.left); | |
| const videoDuration = video.duration; | |
| const seekTime = (markerLeft / 100) * videoDuration; | |
| video.currentTime = seekTime; | |
| video.play(); | |
| // In a real app, this would also highlight the corresponding comment | |
| alert('Jumping to ' + seekTime.toFixed(1) + ' seconds. This would highlight the related comment in a real app.'); | |
| }); | |
| }); | |
| // Emoji picker functionality (simplified) | |
| document.querySelectorAll('.fa-smile').forEach(icon => { | |
| icon.addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| const picker = document.createElement('div'); | |
| picker.className = 'emoji-picker'; | |
| picker.innerHTML = ` | |
| <div class="grid grid-cols-6 gap-1"> | |
| <span class="cursor-pointer hover:scale-125">😀</span> | |
| <span class="cursor-pointer hover:scale-125">😂</span> | |
| <span class="cursor-pointer hover:scale-125">😍</span> | |
| <span class="cursor-pointer hover:scale-125">👍</span> | |
| <span class="cursor-pointer hover:scale-125">👎</span> | |
| <span class="cursor-pointer hover:scale-125">❤️</span> | |
| </div> | |
| `; | |
| const rect = this.getBoundingClientRect(); | |
| picker.style.bottom = `${window.innerHeight - rect.top + 5}px`; | |
| picker.style.right = `${window.innerWidth - rect.right}px`; | |
| document.body.appendChild(picker); | |
| // Close picker when clicking outside | |
| const closePicker = (e) => { | |
| if (!picker.contains(e.target) && e.target !== this) { | |
| picker.remove(); | |
| document.removeEventListener('click', closePicker); | |
| } | |
| }; | |
| document.addEventListener('click', closePicker); | |
| // Add emoji to comment | |
| picker.querySelectorAll('span').forEach(emoji => { | |
| emoji.addEventListener('click', () => { | |
| alert(`Added ${emoji.textContent} reaction`); | |
| picker.remove(); | |
| document.removeEventListener('click', closePicker); | |
| }); | |
| }); | |
| }); | |
| }); | |
| // Mention functionality (simplified) | |
| document.querySelectorAll('.fa-at').forEach(icon => { | |
| icon.addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| const mentionBox = document.createElement('div'); | |
| mentionBox.className = 'mention-suggestions'; | |
| mentionBox.innerHTML = ` | |
| <div class="py-1"> | |
| <div class="flex items-center px-3 py-1 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"> | |
| <img class="h-6 w-6 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt=""> | |
| <span>Sarah Johnson</span> | |
| </div> | |
| <div class="flex items-center px-3 py-1 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"> | |
| <img class="h-6 w-6 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> | |
| <span>Michael Chen</span> | |
| </div> | |
| <div class="flex items-center px-3 py-1 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"> | |
| <img class="h-6 w-6 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/68.jpg" alt=""> | |
| <span>Emma Wilson</span> | |
| </div> | |
| </div> | |
| `; | |
| const rect = this.getBoundingClientRect(); | |
| mentionBox.style.bottom = `${window.innerHeight - rect.top + 5}px`; | |
| mentionBox.style.left = `${rect.left}px`; | |
| document.body.appendChild(mentionBox); | |
| // Close mention box when clicking outside | |
| const closeMentionBox = (e) => { | |
| if (!mentionBox.contains(e.target) && e.target !== this) { | |
| mentionBox.remove(); | |
| document.removeEventListener('click', closeMentionBox); | |
| } | |
| }; | |
| document.addEventListener('click', closeMentionBox); | |
| // Add mention to comment | |
| mentionBox.querySelectorAll('div').forEach(item => { | |
| item.addEventListener('click', () => { | |
| const name = item.querySelector('span').textContent; | |
| alert(`Mentioned @${name}`); | |
| mentionBox.remove(); | |
| document.removeEventListener('click', closeMentionBox); | |
| }); | |
| }); | |
| }); | |
| }); | |
| </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=sqibhe/collabflow" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |