Hugging Face's logo

Spaces:
LukasBe
/
backlog-manager
Running

App Files Community
LukasBe commited on
Commit
adfe0c2
·
verified ·
1 Parent(s): 273565a

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +473 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Backlog Manager
3
- emoji: 📚
4
- colorFrom: red
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: backlog-manager
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,473 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Scrum Backlog Manager</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .card-dragging {
11
+ opacity: 0.5;
12
+ transform: rotate(3deg);
13
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
14
+ }
15
+ .card-placeholder {
16
+ border: 2px dashed #94a3b8;
17
+ background-color: #f8fafc;
18
+ height: 100px;
19
+ border-radius: 0.5rem;
20
+ }
21
+ .annotation-marker {
22
+ position: absolute;
23
+ width: 20px;
24
+ height: 20px;
25
+ background-color: #ef4444;
26
+ border-radius: 50%;
27
+ cursor: pointer;
28
+ transform: translate(-50%, -50%);
29
+ z-index: 10;
30
+ }
31
+ .annotation-tooltip {
32
+ position: absolute;
33
+ background-color: white;
34
+ padding: 0.5rem;
35
+ border-radius: 0.5rem;
36
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
37
+ z-index: 20;
38
+ min-width: 200px;
39
+ display: none;
40
+ }
41
+ .screenshot-container {
42
+ position: relative;
43
+ border: 1px solid #e2e8f0;
44
+ border-radius: 0.5rem;
45
+ overflow: hidden;
46
+ }
47
+ </style>
48
+ </head>
49
+ <body class="bg-gray-50 min-h-screen">
50
+ <div class="container mx-auto px-4 py-8">
51
+ <!-- Header -->
52
+ <header class="mb-8">
53
+ <div class="flex justify-between items-center">
54
+ <div>
55
+ <h1 class="text-3xl font-bold text-gray-800">Scrum Backlog Manager</h1>
56
+ <p class="text-gray-600">Implementing Clean Architecture & DDD principles</p>
57
+ </div>
58
+ <div class="flex space-x-4">
59
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
60
+ <i class="fas fa-plus mr-2"></i> New Epic
61
+ </button>
62
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg flex items-center">
63
+ <i class="fas fa-cog mr-2"></i> Settings
64
+ </button>
65
+ </div>
66
+ </div>
67
+ </header>
68
+
69
+ <!-- Main Content -->
70
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
71
+ <!-- Left Panel - Principles & Epics -->
72
+ <div class="lg:col-span-1 space-y-6">
73
+ <!-- Principles Card -->
74
+ <div class="bg-white rounded-xl shadow-md p-6">
75
+ <h2 class="text-xl font-semibold mb-4 text-gray-800 flex items-center">
76
+ <i class="fas fa-lightbulb text-yellow-500 mr-2"></i> Core Principles
77
+ </h2>
78
+ <div class="space-y-4">
79
+ <div class="p-4 bg-blue-50 rounded-lg border-l-4 border-blue-500">
80
+ <h3 class="font-medium text-blue-800">Negotiated Scope</h3>
81
+ <p class="text-sm text-gray-600 mt-1">Adjust backlog without breaking Sprint Goal when scope shifts</p>
82
+ </div>
83
+ <div class="p-4 bg-green-50 rounded-lg border-l-4 border-green-500">
84
+ <h3 class="font-medium text-green-800">Simplicity</h3>
85
+ <p class="text-sm text-gray-600 mt-1">"Maximize work not done" (XP value) to keep iterations lean</p>
86
+ </div>
87
+ </div>
88
+ </div>
89
+
90
+ <!-- Epics List -->
91
+ <div class="bg-white rounded-xl shadow-md p-6">
92
+ <div class="flex justify-between items-center mb-4">
93
+ <h2 class="text-xl font-semibold text-gray-800 flex items-center">
94
+ <i class="fas fa-layer-group text-purple-500 mr-2"></i> Epics
95
+ </h2>
96
+ <button class="text-blue-600 hover:text-blue-800">
97
+ <i class="fas fa-filter"></i>
98
+ </button>
99
+ </div>
100
+ <div class="space-y-3">
101
+ <div class="p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-move" draggable="true">
102
+ <div class="flex justify-between">
103
+ <h3 class="font-medium">Backlog Automation & Prioritization</h3>
104
+ <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded-full">Active</span>
105
+ </div>
106
+ <p class="text-xs text-gray-500 mt-1">Auto-populate Trello-style board with cards</p>
107
+ </div>
108
+ <div class="p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-move" draggable="true">
109
+ <div class="flex justify-between">
110
+ <h3 class="font-medium">Iteration Code Engine</h3>
111
+ <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">Planned</span>
112
+ </div>
113
+ <p class="text-xs text-gray-500 mt-1">Scaffold code per Clean Architecture layers</p>
114
+ </div>
115
+ <div class="p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-move" draggable="true">
116
+ <div class="flex justify-between">
117
+ <h3 class="font-medium">WYSIWYG Feedback Annotator</h3>
118
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Completed</span>
119
+ </div>
120
+ <p class="text-xs text-gray-500 mt-1">Embed annotation hotspots on screen captures</p>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+
126
+ <!-- Center Panel - Features & Backlog -->
127
+ <div class="lg:col-span-2 space-y-6">
128
+ <!-- Features Board -->
129
+ <div class="bg-white rounded-xl shadow-md p-6">
130
+ <h2 class="text-xl font-semibold mb-4 text-gray-800 flex items-center">
131
+ <i class="fas fa-tasks text-blue-500 mr-2"></i> Features Board
132
+ </h2>
133
+
134
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
135
+ <!-- Feature A -->
136
+ <div class="bg-blue-50 rounded-lg p-4 border-l-4 border-blue-500">
137
+ <div class="flex items-center mb-2">
138
+ <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-2">
139
+ <i class="fas fa-magic text-blue-600"></i>
140
+ </div>
141
+ <h3 class="font-semibold text-blue-800">Trello Backlog Generator</h3>
142
+ </div>
143
+ <p class="text-sm text-gray-600 mb-3">Convert negotiated scope into prioritized cards</p>
144
+ <div class="flex justify-between text-xs">
145
+ <span class="bg-white px-2 py-1 rounded-full">Domain Layer</span>
146
+ <span class="text-gray-500">3 tasks</span>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Feature B -->
151
+ <div class="bg-green-50 rounded-lg p-4 border-l-4 border-green-500">
152
+ <div class="flex items-center mb-2">
153
+ <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-2">
154
+ <i class="fas fa-code text-green-600"></i>
155
+ </div>
156
+ <h3 class="font-semibold text-green-800">Iteration Code Engine</h3>
157
+ </div>
158
+ <p class="text-sm text-gray-600 mb-3">Scaffold code per Clean Architecture layers</p>
159
+ <div class="flex justify-between text-xs">
160
+ <span class="bg-white px-2 py-1 rounded-full">Application Layer</span>
161
+ <span class="text-gray-500">5 tasks</span>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- Feature C -->
166
+ <div class="bg-purple-50 rounded-lg p-4 border-l-4 border-purple-500">
167
+ <div class="flex items-center mb-2">
168
+ <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-2">
169
+ <i class="fas fa-comment-dots text-purple-600"></i>
170
+ </div>
171
+ <h3 class="font-semibold text-purple-800">Feedback Annotator</h3>
172
+ </div>
173
+ <p class="text-sm text-gray-600 mb-3">Embed annotation hotspots on screen captures</p>
174
+ <div class="flex justify-between text-xs">
175
+ <span class="bg-white px-2 py-1 rounded-full">Interface Layer</span>
176
+ <span class="text-gray-500">2 tasks</span>
177
+ </div>
178
+ </div>
179
+ </div>
180
+
181
+ <!-- Backlog Board -->
182
+ <div>
183
+ <div class="flex justify-between items-center mb-4">
184
+ <h3 class="text-lg font-medium text-gray-700">Product Backlog</h3>
185
+ <div class="flex space-x-2">
186
+ <button class="text-xs bg-gray-200 hover:bg-gray-300 px-3 py-1 rounded-full">
187
+ <i class="fas fa-sort-amount-down mr-1"></i> Sort
188
+ </button>
189
+ <button class="text-xs bg-gray-200 hover:bg-gray-300 px-3 py-1 rounded-full">
190
+ <i class="fas fa-filter mr-1"></i> Filter
191
+ </button>
192
+ </div>
193
+ </div>
194
+
195
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4" id="backlogColumns">
196
+ <!-- To Do Column -->
197
+ <div class="bg-gray-50 rounded-lg p-3">
198
+ <div class="flex justify-between items-center mb-3">
199
+ <h4 class="font-medium text-gray-700">To Do</h4>
200
+ <span class="text-xs bg-gray-200 px-2 py-1 rounded-full">3</span>
201
+ </div>
202
+ <div class="space-y-3" id="todo-column">
203
+ <div class="bg-white p-3 rounded-lg shadow-sm border border-gray-200 cursor-move backlog-card" draggable="true">
204
+ <div class="flex justify-between items-start">
205
+ <h5 class="font-medium text-sm">Implement Epic aggregate</h5>
206
+ <span class="text-xs bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full">Domain</span>
207
+ </div>
208
+ <p class="text-xs text-gray-500 mt-1">Create BacklogEpic class with UUID, title, cards</p>
209
+ <div class="flex justify-between items-center mt-2">
210
+ <span class="text-xs text-gray-400">#BCK-101</span>
211
+ <div class="flex space-x-1">
212
+ <i class="fas fa-paperclip text-gray-400 text-xs"></i>
213
+ <i class="fas fa-comment text-gray-400 text-xs"></i>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ <div class="bg-white p-3 rounded-lg shadow-sm border border-gray-200 cursor-move backlog-card" draggable="true">
218
+ <div class="flex justify-between items-start">
219
+ <h5 class="font-medium text-sm">Create BacklogService interface</h5>
220
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded-full">Application</span>
221
+ </div>
222
+ <p class="text-xs text-gray-500 mt-1">Define negotiateScope and generateCards methods</p>
223
+ <div class="flex justify-between items-center mt-2">
224
+ <span class="text-xs text-gray-400">#BCK-102</span>
225
+ <div class="flex space-x-1">
226
+ <i class="fas fa-paperclip text-gray-400 text-xs"></i>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- In Progress Column -->
234
+ <div class="bg-gray-50 rounded-lg p-3">
235
+ <div class="flex justify-between items-center mb-3">
236
+ <h4 class="font-medium text-gray-700">In Progress</h4>
237
+ <span class="text-xs bg-gray-200 px-2 py-1 rounded-full">1</span>
238
+ </div>
239
+ <div class="space-y-3" id="inprogress-column">
240
+ <div class="bg-white p-3 rounded-lg shadow-sm border border-gray-200 cursor-move backlog-card" draggable="true">
241
+ <div class="flex justify-between items-start">
242
+ <h5 class="font-medium text-sm">Implement TrelloBoardAdapter</h5>
243
+ <span class="text-xs bg-purple-100 text-purple-800 px-2 py-0.5 rounded-full">Infrastructure</span>
244
+ </div>
245
+ <p class="text-xs text-gray-500 mt-1">Trello API integration for BacklogService</p>
246
+ <div class="flex justify-between items-center mt-2">
247
+ <span class="text-xs text-gray-400">#BCK-103</span>
248
+ <div class="flex space-x-1">
249
+ <i class="fas fa-paperclip text-gray-400 text-xs"></i>
250
+ <i class="fas fa-comment text-gray-400 text-xs"></i>
251
+ <i class="fas fa-user text-gray-400 text-xs"></i>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </div>
257
+
258
+ <!-- Done Column -->
259
+ <div class="bg-gray-50 rounded-lg p-3">
260
+ <div class="flex justify-between items-center mb-3">
261
+ <h4 class="font-medium text-gray-700">Done</h4>
262
+ <span class="text-xs bg-gray-200 px-2 py-1 rounded-full">2</span>
263
+ </div>
264
+ <div class="space-y-3" id="done-column">
265
+ <div class="bg-white p-3 rounded-lg shadow-sm border border-gray-200 cursor-move backlog-card" draggable="true">
266
+ <div class="flex justify-between items-start">
267
+ <h5 class="font-medium text-sm">Define ProductOwnerInput model</h5>
268
+ <span class="text-xs bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full">Domain</span>
269
+ </div>
270
+ <p class="text-xs text-gray-500 mt-1">Input structure for negotiateScope method</p>
271
+ <div class="flex justify-between items-center mt-2">
272
+ <span class="text-xs text-gray-400">#BCK-100</span>
273
+ <div class="flex space-x-1">
274
+ <i class="fas fa-check-circle text-green-400 text-xs"></i>
275
+ </div>
276
+ </div>
277
+ </div>
278
+ <div class="bg-white p-3 rounded-lg shadow-sm border border-gray-200 cursor-move backlog-card" draggable="true">
279
+ <div class="flex justify-between items-start">
280
+ <h5 class="font-medium text-sm">Setup project structure</h5>
281
+ <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded-full">Setup</span>
282
+ </div>
283
+ <p class="text-xs text-gray-500 mt-1">Initial project setup with Clean Architecture layers</p>
284
+ <div class="flex justify-between items-center mt-2">
285
+ <span class="text-xs text-gray-400">#BCK-99</span>
286
+ <div class="flex space-x-1">
287
+ <i class="fas fa-check-circle text-green-400 text-xs"></i>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ </div>
295
+ </div>
296
+
297
+ <!-- Code Skeleton Preview -->
298
+ <div class="bg-white rounded-xl shadow-md p-6">
299
+ <div class="flex justify-between items-center mb-4">
300
+ <h2 class="text-xl font-semibold text-gray-800 flex items-center">
301
+ <i class="fas fa-code text-gray-500 mr-2"></i> Code Skeleton Preview
302
+ </h2>
303
+ <div class="flex space-x-2">
304
+ <button class="text-xs bg-gray-200 hover:bg-gray-300 px-3 py-1 rounded-full">
305
+ <i class="fab fa-java mr-1"></i> Java
306
+ </button>
307
+ <button class="text-xs bg-gray-200 hover:bg-gray-300 px-3 py-1 rounded-full">
308
+ <i class="fas fa-download mr-1"></i> Export
309
+ </button>
310
+ </div>
311
+ </div>
312
+
313
+ <div class="bg-gray-800 rounded-lg p-4 overflow-x-auto">
314
+ <pre class="text-gray-200 text-sm font-mono">
315
+ <span class="text-blue-400">// Domain layer: Epic aggregate</span>
316
+ <span class="text-green-400">public class</span> <span class="text-yellow-300">BacklogEpic</span> {
317
+ <span class="text-green-400">private</span> <span class="text-yellow-300">UUID</span> id;
318
+ <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>
319
+ <span class="text-green-400">private</span> <span class="text-yellow-300">List</span>&lt;<span class="text-yellow-300">BacklogCard</span>&gt; cards; <span class="text-gray-500">// TODO: Auto-generated</span>
320
+ }
321
+
322
+ <span class="text-blue-400">// Application layer: service stub</span>
323
+ <span class="text-green-400">public interface</span> <span class="text-yellow-300">BacklogService</span> {
324
+ <span class="text-yellow-300">BacklogEpic</span> negotiateScope(<span class="text-yellow-300">ProductOwnerInput</span> input);
325
+ <span class="text-yellow-300">List</span>&lt;<span class="text-yellow-300">BacklogCard</span>&gt; generateCards(<span class="text-yellow-300">BacklogEpic</span> epic);
326
+ }
327
+
328
+ <span class="text-blue-400">// Infrastructure: Trello adapter stub</span>
329
+ <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> {
330
+ <span class="text-gray-500">// TODO: Implement Trello API integration</span>
331
+ }</pre>
332
+ </div>
333
+ </div>
334
+
335
+ <!-- WYSIWYG Feedback Section -->
336
+ <div class="bg-white rounded-xl shadow-md p-6">
337
+ <h2 class="text-xl font-semibold mb-4 text-gray-800 flex items-center">
338
+ <i class="fas fa-comment-medical text-red-500 mr-2"></i> WYSIWYG Feedback Annotator
339
+ </h2>
340
+
341
+ <div class="screenshot-container mb-4" id="screenshotContainer">
342
+ <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"
343
+ alt="Sample UI Screenshot" class="w-full h-auto">
344
+ <!-- Annotation markers will be added here by JavaScript -->
345
+ </div>
346
+
347
+ <div class="flex justify-between">
348
+ <button id="addAnnotationBtn" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg flex items-center">
349
+ <i class="fas fa-plus-circle mr-2"></i> Add Annotation
350
+ </button>
351
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg flex items-center">
352
+ <i class="fas fa-save mr-2"></i> Save Feedback
353
+ </button>
354
+ </div>
355
+
356
+ <div class="annotation-tooltip" id="annotationTooltip">
357
+ <textarea class="w-full p-2 border border-gray-300 rounded mb-2" placeholder="Enter your feedback..."></textarea>
358
+ <div class="flex justify-end">
359
+ <button class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-sm">
360
+ Save
361
+ </button>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ </div>
368
+
369
+ <script>
370
+ // Drag and drop functionality for backlog items
371
+ document.addEventListener('DOMContentLoaded', function() {
372
+ const backlogCards = document.querySelectorAll('.backlog-card');
373
+ const columns = document.querySelectorAll('#backlogColumns > div > div');
374
+
375
+ let draggedItem = null;
376
+
377
+ // Add event listeners for drag events
378
+ backlogCards.forEach(card => {
379
+ card.addEventListener('dragstart', function() {
380
+ draggedItem = this;
381
+ setTimeout(() => {
382
+ this.classList.add('card-dragging');
383
+ }, 0);
384
+ });
385
+
386
+ card.addEventListener('dragend', function() {
387
+ this.classList.remove('card-dragging');
388
+ });
389
+ });
390
+
391
+ // Add event listeners for columns
392
+ columns.forEach(column => {
393
+ column.addEventListener('dragover', function(e) {
394
+ e.preventDefault();
395
+ const afterElement = getDragAfterElement(this, e.clientY);
396
+ if (afterElement == null) {
397
+ this.appendChild(draggedItem);
398
+ } else {
399
+ this.insertBefore(draggedItem, afterElement);
400
+ }
401
+ });
402
+ });
403
+
404
+ function getDragAfterElement(container, y) {
405
+ const draggableElements = [...container.querySelectorAll('.backlog-card:not(.card-dragging)')];
406
+
407
+ return draggableElements.reduce((closest, child) => {
408
+ const box = child.getBoundingClientRect();
409
+ const offset = y - box.top - box.height / 2;
410
+
411
+ if (offset < 0 && offset > closest.offset) {
412
+ return { offset: offset, element: child };
413
+ } else {
414
+ return closest;
415
+ }
416
+ }, { offset: Number.NEGATIVE_INFINITY }).element;
417
+ }
418
+
419
+ // WYSIWYG Feedback Annotator functionality
420
+ const screenshotContainer = document.getElementById('screenshotContainer');
421
+ const addAnnotationBtn = document.getElementById('addAnnotationBtn');
422
+ const annotationTooltip = document.getElementById('annotationTooltip');
423
+ let activeAnnotation = null;
424
+
425
+ addAnnotationBtn.addEventListener('click', function() {
426
+ // In a real app, this would enable click-to-add annotations
427
+ alert('Click on the screenshot to add an annotation marker');
428
+ });
429
+
430
+ screenshotContainer.addEventListener('click', function(e) {
431
+ if (e.target === this || e.target.tagName === 'IMG') {
432
+ // Create a new annotation marker
433
+ const marker = document.createElement('div');
434
+ marker.className = 'annotation-marker';
435
+
436
+ // Position the marker where clicked
437
+ const rect = this.getBoundingClientRect();
438
+ const x = e.clientX - rect.left;
439
+ const y = e.clientY - rect.top;
440
+
441
+ marker.style.left = `${x}px`;
442
+ marker.style.top = `${y}px`;
443
+
444
+ // Add click handler to show tooltip
445
+ marker.addEventListener('click', function(e) {
446
+ e.stopPropagation();
447
+ activeAnnotation = this;
448
+
449
+ // Position tooltip near the marker
450
+ annotationTooltip.style.display = 'block';
451
+ annotationTooltip.style.left = `${x + 30}px`;
452
+ annotationTooltip.style.top = `${y}px`;
453
+ });
454
+
455
+ this.appendChild(marker);
456
+ }
457
+ });
458
+
459
+ // Close tooltip when clicking outside
460
+ document.addEventListener('click', function() {
461
+ if (annotationTooltip.style.display === 'block') {
462
+ annotationTooltip.style.display = 'none';
463
+ }
464
+ });
465
+
466
+ // Prevent tooltip from closing when clicking inside it
467
+ annotationTooltip.addEventListener('click', function(e) {
468
+ e.stopPropagation();
469
+ });
470
+ });
471
+ </script>
472
+ <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>
473
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ ## 1. Principles → Epics → Features → Code Skeletons **References:** Scrum product backlog ([Product Backlog: Definition & Prioritization Tips - Atlassian](https://www.atlassian.com/agile/scrum/backlogs?utm_source=chatgpt.com)), Clean Architecture & DDD ([Comparison of Domain-Driven Design and Clean Architecture ...](https://khalilstemmler.com/articles/software-design-architecture/domain-driven-design-vs-clean-architecture/?utm_source=chatgpt.com)) ```text You are a Certified Scrum Practitioner and software architect following Clean Architecture (Uncle Bob) and Domain-Driven Design (Evans). ``` 1. **Principle** - **Negotiated Scope**: If Sprint scope shifts, negotiate with Product Owner per Scrum Guide—adjust backlog without breaking Sprint Goal ([Scope can be renegotiated with product owner - Scrum.org](https://www.scrum.org/forum/scrum-forum/48010/scope-can-be-renegotiated-product-owner?utm_source=chatgpt.com)). - **Simplicity**: “Maximize work not done” (XP value) to keep iterations lean. 2. **Epic** - **Backlog Automation & Prioritization**: - Use product-owner negotiation to elicit and refine high-level requirements. - Auto-populate a Trello-style board with cards representing epics and stories ([Product Management templates - Trello](https://trello.com/templates/product-management?utm_source=chatgpt.com)). 3. **Features** - **Feature A: Trello Backlog Generator** - **Purpose**: Convert negotiated scope into prioritized cards (Agile backlog) ([Product Backlog: Definition & Prioritization Tips - Atlassian](https://www.atlassian.com/agile/scrum/backlogs?utm_source=chatgpt.com)). - **Layers**: Domain (Epic aggregate), Application (BacklogService), Interface (TrelloBoardAdapter). - **Acceptance**: Cards sorted by user-value score and explicit dependencies. - **Feature B: Iteration Code Engine** - **Purpose**: Given top-N cards, scaffold code per Clean Architecture layers (domain, use-case, infra) ([Comparison of Domain-Driven Design and Clean Architecture ...](https://khalilstemmler.com/articles/software-design-architecture/domain-driven-design-vs-clean-architecture/?utm_source=chatgpt.com)). - **Acceptance**: Generates skeletons with TODOs, DI stubs, test placeholders. - **Feature C: WYSIWYG Feedback Annotator** - **Purpose**: Embed annotation hotspots on screen captures (visual feedback tools like Userback) ([The Ultimate Screen Annotation & User Feedback Tool | Userback](https://userback.io/feature/screen-annotation/?utm_source=chatgpt.com)). - **Acceptance**: Users can click UI elements to leave anchored comments; feedback synced to corresponding backlog cards. 4. **Code Skeleton** ```java // Domain layer: Epic aggregate public class BacklogEpic { private UUID id; private String title; // TODO: Populate from negotiation private List<BacklogCard> cards; // TODO: Auto-generated } // Application layer: service stub public interface BacklogService { BacklogEpic negotiateScope(ProductOwnerInput input); List<BacklogCard> generateCards(BacklogEpic epic); } // Infrastructure: Trello adapter stub public class TrelloBoardAdapter implements BacklogService { // TODO: Implement Trello API integration } ```