Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Scrum Backlog Manager</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> | |
| .card-dragging { | |
| opacity: 0.5; | |
| transform: rotate(3deg); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); | |
| } | |
| .card-placeholder { | |
| border: 2px dashed #94a3b8; | |
| background-color: #f8fafc; | |
| height: 100px; | |
| border-radius: 0.5rem; | |
| } | |
| .annotation-marker { | |
| position: absolute; | |
| width: 20px; | |
| height: 20px; | |
| background-color: #ef4444; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| transform: translate(-50%, -50%); | |
| z-index: 10; | |
| } | |
| .annotation-tooltip { | |
| position: absolute; | |
| background-color: white; | |
| padding: 0.5rem; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| z-index: 20; | |
| min-width: 200px; | |
| display: none; | |
| } | |
| .screenshot-container { | |
| position: relative; | |
| border: 1px solid #e2e8f0; | |
| border-radius: 0.5rem; | |
| overflow: hidden; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="mb-8"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-gray-800">Scrum Backlog Manager</h1> | |
| <p class="text-gray-600">Implementing Clean Architecture & DDD principles</p> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> New Epic | |
| </button> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-cog mr-2"></i> Settings | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Left Panel - Principles & Epics --> | |
| <div class="lg:col-span-1 space-y-6"> | |
| <!-- Principles Card --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-xl font-semibold mb-4 text-gray-800 flex items-center"> | |
| <i class="fas fa-lightbulb text-yellow-500 mr-2"></i> Core Principles | |
| </h2> | |
| <div class="space-y-4"> | |
| <div class="p-4 bg-blue-50 rounded-lg border-l-4 border-blue-500"> | |
| <h3 class="font-medium text-blue-800">Negotiated Scope</h3> | |
| <p class="text-sm text-gray-600 mt-1">Adjust backlog without breaking Sprint Goal when scope shifts</p> | |
| </div> | |
| <div class="p-4 bg-green-50 rounded-lg border-l-4 border-green-500"> | |
| <h3 class="font-medium text-green-800">Simplicity</h3> | |
| <p class="text-sm text-gray-600 mt-1">"Maximize work not done" (XP value) to keep iterations lean</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Epics List --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold text-gray-800 flex items-center"> | |
| <i class="fas fa-layer-group text-purple-500 mr-2"></i> Epics | |
| </h2> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-filter"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-move" draggable="true"> | |
| <div class="flex justify-between"> | |
| <h3 class="font-medium">Backlog Automation & Prioritization</h3> | |
| <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded-full">Active</span> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Auto-populate Trello-style board with cards</p> | |
| </div> | |
| <div class="p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-move" draggable="true"> | |
| <div class="flex justify-between"> | |
| <h3 class="font-medium">Iteration Code Engine</h3> | |
| <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">Planned</span> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Scaffold code per Clean Architecture layers</p> | |
| </div> | |
| <div class="p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-move" draggable="true"> | |
| <div class="flex justify-between"> | |
| <h3 class="font-medium">WYSIWYG Feedback Annotator</h3> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Completed</span> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Embed annotation hotspots on screen captures</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Center Panel - Features & Backlog --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Features Board --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-xl font-semibold mb-4 text-gray-800 flex items-center"> | |
| <i class="fas fa-tasks text-blue-500 mr-2"></i> Features Board | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <!-- Feature A --> | |
| <div class="bg-blue-50 rounded-lg p-4 border-l-4 border-blue-500"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-2"> | |
| <i class="fas fa-magic text-blue-600"></i> | |
| </div> | |
| <h3 class="font-semibold text-blue-800">Trello Backlog Generator</h3> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3">Convert negotiated scope into prioritized cards</p> | |
| <div class="flex justify-between text-xs"> | |
| <span class="bg-white px-2 py-1 rounded-full">Domain Layer</span> | |
| <span class="text-gray-500">3 tasks</span> | |
| </div> | |
| </div> | |
| <!-- Feature B --> | |
| <div class="bg-green-50 rounded-lg p-4 border-l-4 border-green-500"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-2"> | |
| <i class="fas fa-code text-green-600"></i> | |
| </div> | |
| <h3 class="font-semibold text-green-800">Iteration Code Engine</h3> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3">Scaffold code per Clean Architecture layers</p> | |
| <div class="flex justify-between text-xs"> | |
| <span class="bg-white px-2 py-1 rounded-full">Application Layer</span> | |
| <span class="text-gray-500">5 tasks</span> | |
| </div> | |
| </div> | |
| <!-- Feature C --> | |
| <div class="bg-purple-50 rounded-lg p-4 border-l-4 border-purple-500"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-2"> | |
| <i class="fas fa-comment-dots text-purple-600"></i> | |
| </div> | |
| <h3 class="font-semibold text-purple-800">Feedback Annotator</h3> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3">Embed annotation hotspots on screen captures</p> | |
| <div class="flex justify-between text-xs"> | |
| <span class="bg-white px-2 py-1 rounded-full">Interface Layer</span> | |
| <span class="text-gray-500">2 tasks</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Backlog Board --> | |
| <div> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-medium text-gray-700">Product Backlog</h3> | |
| <div class="flex space-x-2"> | |
| <button class="text-xs bg-gray-200 hover:bg-gray-300 px-3 py-1 rounded-full"> | |
| <i class="fas fa-sort-amount-down mr-1"></i> Sort | |
| </button> | |
| <button class="text-xs bg-gray-200 hover:bg-gray-300 px-3 py-1 rounded-full"> | |
| <i class="fas fa-filter mr-1"></i> Filter | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4" id="backlogColumns"> | |
| <!-- To Do Column --> | |
| <div class="bg-gray-50 rounded-lg p-3"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h4 class="font-medium text-gray-700">To Do</h4> | |
| <span class="text-xs bg-gray-200 px-2 py-1 rounded-full">3</span> | |
| </div> | |
| <div class="space-y-3" id="todo-column"> | |
| <div class="bg-white p-3 rounded-lg shadow-sm border border-gray-200 cursor-move backlog-card" draggable="true"> | |
| <div class="flex justify-between items-start"> | |
| <h5 class="font-medium text-sm">Implement Epic aggregate</h5> | |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full">Domain</span> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Create BacklogEpic class with UUID, title, cards</p> | |
| <div class="flex justify-between items-center mt-2"> | |
| <span class="text-xs text-gray-400">#BCK-101</span> | |
| <div class="flex space-x-1"> | |
| <i class="fas fa-paperclip text-gray-400 text-xs"></i> | |
| <i class="fas fa-comment text-gray-400 text-xs"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow-sm border border-gray-200 cursor-move backlog-card" draggable="true"> | |
| <div class="flex justify-between items-start"> | |
| <h5 class="font-medium text-sm">Create BacklogService interface</h5> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded-full">Application</span> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Define negotiateScope and generateCards methods</p> | |
| <div class="flex justify-between items-center mt-2"> | |
| <span class="text-xs text-gray-400">#BCK-102</span> | |
| <div class="flex space-x-1"> | |
| <i class="fas fa-paperclip text-gray-400 text-xs"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- In Progress Column --> | |
| <div class="bg-gray-50 rounded-lg p-3"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h4 class="font-medium text-gray-700">In Progress</h4> | |
| <span class="text-xs bg-gray-200 px-2 py-1 rounded-full">1</span> | |
| </div> | |
| <div class="space-y-3" id="inprogress-column"> | |
| <div class="bg-white p-3 rounded-lg shadow-sm border border-gray-200 cursor-move backlog-card" draggable="true"> | |
| <div class="flex justify-between items-start"> | |
| <h5 class="font-medium text-sm">Implement TrelloBoardAdapter</h5> | |
| <span class="text-xs bg-purple-100 text-purple-800 px-2 py-0.5 rounded-full">Infrastructure</span> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Trello API integration for BacklogService</p> | |
| <div class="flex justify-between items-center mt-2"> | |
| <span class="text-xs text-gray-400">#BCK-103</span> | |
| <div class="flex space-x-1"> | |
| <i class="fas fa-paperclip text-gray-400 text-xs"></i> | |
| <i class="fas fa-comment text-gray-400 text-xs"></i> | |
| <i class="fas fa-user text-gray-400 text-xs"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Done Column --> | |
| <div class="bg-gray-50 rounded-lg p-3"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h4 class="font-medium text-gray-700">Done</h4> | |
| <span class="text-xs bg-gray-200 px-2 py-1 rounded-full">2</span> | |
| </div> | |
| <div class="space-y-3" id="done-column"> | |
| <div class="bg-white p-3 rounded-lg shadow-sm border border-gray-200 cursor-move backlog-card" draggable="true"> | |
| <div class="flex justify-between items-start"> | |
| <h5 class="font-medium text-sm">Define ProductOwnerInput model</h5> | |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full">Domain</span> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Input structure for negotiateScope method</p> | |
| <div class="flex justify-between items-center mt-2"> | |
| <span class="text-xs text-gray-400">#BCK-100</span> | |
| <div class="flex space-x-1"> | |
| <i class="fas fa-check-circle text-green-400 text-xs"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow-sm border border-gray-200 cursor-move backlog-card" draggable="true"> | |
| <div class="flex justify-between items-start"> | |
| <h5 class="font-medium text-sm">Setup project structure</h5> | |
| <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded-full">Setup</span> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Initial project setup with Clean Architecture layers</p> | |
| <div class="flex justify-between items-center mt-2"> | |
| <span class="text-xs text-gray-400">#BCK-99</span> | |
| <div class="flex space-x-1"> | |
| <i class="fas fa-check-circle text-green-400 text-xs"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Code Skeleton Preview --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold text-gray-800 flex items-center"> | |
| <i class="fas fa-code text-gray-500 mr-2"></i> Code Skeleton Preview | |
| </h2> | |
| <div class="flex space-x-2"> | |
| <button class="text-xs bg-gray-200 hover:bg-gray-300 px-3 py-1 rounded-full"> | |
| <i class="fab fa-java mr-1"></i> Java | |
| </button> | |
| <button class="text-xs bg-gray-200 hover:bg-gray-300 px-3 py-1 rounded-full"> | |
| <i class="fas fa-download mr-1"></i> Export | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4 overflow-x-auto"> | |
| <pre class="text-gray-200 text-sm font-mono"> | |
| <span class="text-blue-400">// Domain layer: Epic aggregate</span> | |
| <span class="text-green-400">public class</span> <span class="text-yellow-300">BacklogEpic</span> { | |
| <span class="text-green-400">private</span> <span class="text-yellow-300">UUID</span> id; | |
| <span class="text-green-400">private</span> <span class="text-yellow-300">String</span> title; <span class="text-gray-500">// TODO: Populate from negotiation</span> | |
| <span class="text-green-400">private</span> <span class="text-yellow-300">List</span><<span class="text-yellow-300">BacklogCard</span>> cards; <span class="text-gray-500">// TODO: Auto-generated</span> | |
| } | |
| <span class="text-blue-400">// Application layer: service stub</span> | |
| <span class="text-green-400">public interface</span> <span class="text-yellow-300">BacklogService</span> { | |
| <span class="text-yellow-300">BacklogEpic</span> negotiateScope(<span class="text-yellow-300">ProductOwnerInput</span> input); | |
| <span class="text-yellow-300">List</span><<span class="text-yellow-300">BacklogCard</span>> generateCards(<span class="text-yellow-300">BacklogEpic</span> epic); | |
| } | |
| <span class="text-blue-400">// Infrastructure: Trello adapter stub</span> | |
| <span class="text-green-400">public class</span> <span class="text-yellow-300">TrelloBoardAdapter</span> <span class="text-green-400">implements</span> <span class="text-yellow-300">BacklogService</span> { | |
| <span class="text-gray-500">// TODO: Implement Trello API integration</span> | |
| }</pre> | |
| </div> | |
| </div> | |
| <!-- WYSIWYG Feedback Section --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-xl font-semibold mb-4 text-gray-800 flex items-center"> | |
| <i class="fas fa-comment-medical text-red-500 mr-2"></i> WYSIWYG Feedback Annotator | |
| </h2> | |
| <div class="screenshot-container mb-4" id="screenshotContainer"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Sample UI Screenshot" class="w-full h-auto"> | |
| <!-- Annotation markers will be added here by JavaScript --> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button id="addAnnotationBtn" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-plus-circle mr-2"></i> Add Annotation | |
| </button> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-save mr-2"></i> Save Feedback | |
| </button> | |
| </div> | |
| <div class="annotation-tooltip" id="annotationTooltip"> | |
| <textarea class="w-full p-2 border border-gray-300 rounded mb-2" placeholder="Enter your feedback..."></textarea> | |
| <div class="flex justify-end"> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-sm"> | |
| Save | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Drag and drop functionality for backlog items | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const backlogCards = document.querySelectorAll('.backlog-card'); | |
| const columns = document.querySelectorAll('#backlogColumns > div > div'); | |
| let draggedItem = null; | |
| // Add event listeners for drag events | |
| backlogCards.forEach(card => { | |
| card.addEventListener('dragstart', function() { | |
| draggedItem = this; | |
| setTimeout(() => { | |
| this.classList.add('card-dragging'); | |
| }, 0); | |
| }); | |
| card.addEventListener('dragend', function() { | |
| this.classList.remove('card-dragging'); | |
| }); | |
| }); | |
| // Add event listeners for columns | |
| columns.forEach(column => { | |
| column.addEventListener('dragover', function(e) { | |
| e.preventDefault(); | |
| const afterElement = getDragAfterElement(this, e.clientY); | |
| if (afterElement == null) { | |
| this.appendChild(draggedItem); | |
| } else { | |
| this.insertBefore(draggedItem, afterElement); | |
| } | |
| }); | |
| }); | |
| function getDragAfterElement(container, y) { | |
| const draggableElements = [...container.querySelectorAll('.backlog-card:not(.card-dragging)')]; | |
| return draggableElements.reduce((closest, child) => { | |
| const box = child.getBoundingClientRect(); | |
| const offset = y - box.top - box.height / 2; | |
| if (offset < 0 && offset > closest.offset) { | |
| return { offset: offset, element: child }; | |
| } else { | |
| return closest; | |
| } | |
| }, { offset: Number.NEGATIVE_INFINITY }).element; | |
| } | |
| // WYSIWYG Feedback Annotator functionality | |
| const screenshotContainer = document.getElementById('screenshotContainer'); | |
| const addAnnotationBtn = document.getElementById('addAnnotationBtn'); | |
| const annotationTooltip = document.getElementById('annotationTooltip'); | |
| let activeAnnotation = null; | |
| addAnnotationBtn.addEventListener('click', function() { | |
| // In a real app, this would enable click-to-add annotations | |
| alert('Click on the screenshot to add an annotation marker'); | |
| }); | |
| screenshotContainer.addEventListener('click', function(e) { | |
| if (e.target === this || e.target.tagName === 'IMG') { | |
| // Create a new annotation marker | |
| const marker = document.createElement('div'); | |
| marker.className = 'annotation-marker'; | |
| // Position the marker where clicked | |
| const rect = this.getBoundingClientRect(); | |
| const x = e.clientX - rect.left; | |
| const y = e.clientY - rect.top; | |
| marker.style.left = `${x}px`; | |
| marker.style.top = `${y}px`; | |
| // Add click handler to show tooltip | |
| marker.addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| activeAnnotation = this; | |
| // Position tooltip near the marker | |
| annotationTooltip.style.display = 'block'; | |
| annotationTooltip.style.left = `${x + 30}px`; | |
| annotationTooltip.style.top = `${y}px`; | |
| }); | |
| this.appendChild(marker); | |
| } | |
| }); | |
| // Close tooltip when clicking outside | |
| document.addEventListener('click', function() { | |
| if (annotationTooltip.style.display === 'block') { | |
| annotationTooltip.style.display = 'none'; | |
| } | |
| }); | |
| // Prevent tooltip from closing when clicking inside it | |
| annotationTooltip.addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| }); | |
| }); | |
| </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=LukasBe/backlog-manager" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |