Hugging Face's logo

Spaces:
hrmkmdtv
/
counter-tool
Running

App Files Community
hrmkmdtv commited on
Commit
ad17e13
·
verified ·
1 Parent(s): 3b2659e

On the output section in the publishing tab make the out follow this structure

Browse files

Book
Chapters per Book
Pages per Chapter
Panels per Pages

On the Construction output
Home(s)
Rooms per Home
Wall Per Room
Brics Per Wall

Change Configure Elements to "Project Configuring"
Change Multiplicative Counter tool to "(palm tree emoji)Project Configuration Tool"
make the theme colors tropical and the highlight color green - Initial Deployment

Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +345 -18
  3. prompts.txt +56 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Counter Tool
3
- emoji: 🐠
4
- colorFrom: blue
5
  colorTo: blue
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: counter-tool
3
+ emoji: 🐳
4
+ colorFrom: purple
5
  colorTo: blue
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,346 @@
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>🌴 Project Configuration Tool</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <style>
11
+ .counter-btn {
12
+ transition: all 0.2s ease;
13
+ }
14
+ .counter-btn:hover {
15
+ transform: scale(1.1);
16
+ }
17
+ .tab-active {
18
+ border-bottom: 3px solid #22c55e;
19
+ color: #22c55e;
20
+ font-weight: 600;
21
+ }
22
+ .copy-btn {
23
+ transition: all 0.2s ease;
24
+ }
25
+ .copy-btn:hover {
26
+ background-color: #22c55e;
27
+ color: white;
28
+ }
29
+ body {
30
+ background-color: #f0fdf4;
31
+ }
32
+ .bg-tropical-light {
33
+ background-color: #dcfce7;
34
+ }
35
+ .bg-tropical-medium {
36
+ background-color: #bbf7d0;
37
+ }
38
+ .text-tropical-dark {
39
+ color: #166534;
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="bg-gray-50 min-h-screen">
44
+ <div class="container mx-auto px-4 py-8">
45
+ <h1 class="text-3xl font-bold text-center mb-8 text-gray-800">Multiplicative Counter Tool</h1>
46
+
47
+ <div class="flex flex-col lg:flex-row gap-8">
48
+ <!-- Left Panel -->
49
+ <div class="w-full lg:w-1/2 bg-tropical-light p-6 rounded-lg shadow-md border border-green-200">
50
+ <h2 class="text-xl font-semibold mb-4 text-gray-700">Project Configuring</h2>
51
+
52
+ <!-- Tab Navigation for Left Panel -->
53
+ <div class="flex border-b mb-4">
54
+ <button class="py-2 px-4 tab-active-left" data-format-left="construction">Construction</button>
55
+ <button class="py-2 px-4 text-gray-500" data-format-left="publishing">Publishing</button>
56
+ </div>
57
+
58
+ <div class="space-y-4" id="counter-container">
59
+ <!-- Elements will be added here -->
60
+ </div>
61
+ </div>
62
+
63
+ <!-- Right Panel -->
64
+ <div class="w-full lg:w-1/2 bg-tropical-light p-6 rounded-lg shadow-md border border-green-200">
65
+ <h2 class="text-xl font-semibold mb-4 text-gray-700">Output</h2>
66
+
67
+ <!-- Tab Navigation -->
68
+ <div class="flex border-b mb-4">
69
+ <button class="py-2 px-4 tab-active" data-format="format1">Construction</button>
70
+ <button class="py-2 px-4 text-gray-500" data-format="format2">Publishing</button>
71
+ </div>
72
+
73
+ <!-- Output Content -->
74
+ <div id="output-content" class="bg-gray-100 p-4 rounded-lg min-h-[200px]">
75
+ <div id="format1-output" class="space-y-2">
76
+ <!-- Format 1 output will be here -->
77
+ </div>
78
+ <div id="format2-output" class="space-y-2 hidden">
79
+ <!-- Format 2 output will be here -->
80
+ </div>
81
+ </div>
82
+
83
+ <div class="mt-4 flex justify-end">
84
+ <button id="copy-btn" class="copy-btn border border-blue-500 text-blue-500 px-4 py-2 rounded-lg flex items-center">
85
+ <i data-feather="copy" class="mr-2"></i> Copy to Clipboard
86
+ </button>
87
+ </div>
88
+ </div>
89
+ </div>
90
+ </div>
91
+
92
+ <script>
93
+ document.addEventListener('DOMContentLoaded', function() {
94
+ feather.replace();
95
+
96
+ // Predefined elements for Construction format
97
+ const constructionElements = [
98
+ { name: 'homes', label: 'Homes', value: 1, format1: 'Home', format2: 'Home(s)', isConstruction: true },
99
+ { name: 'rooms', label: 'Rooms Per House', value: 1, format1: 'Rooms per Home', format2: 'Rooms per Home', isConstruction: true },
100
+ { name: 'walls', label: 'Walls Per Room', value: 1, format1: 'Walls per Room', format2: 'Walls per Room', isConstruction: true },
101
+ { name: 'bricks', label: 'Bricks Per Wall', value: 1, format1: 'Bricks per Wall', format2: 'Bricks per Wall', isConstruction: true },
102
+ { name: 'total', label: 'Total Bricks', value: 1, format1: 'Total Bricks', format2: 'Total Bricks', isTotal: true, isConstruction: true }
103
+ ];
104
+
105
+ // Predefined elements for Publishing format
106
+ const publishingElements = [
107
+ { name: 'books', label: 'Books', value: 1, format1: 'Book', format2: 'Book', isPublishing: true },
108
+ { name: 'chapters', label: 'Chapters per Book', value: 1, format1: 'Chapters per Book', format2: 'Chapters per Book', isPublishing: true },
109
+ { name: 'pages', label: 'Pages (scenes) per Chapter', value: 1, format1: 'Pages per Chapter', format2: 'Pages per Chapter', isPublishing: true },
110
+ { name: 'panels', label: 'Panels (moments) per Page', value: 1, format1: 'Panels per Page', format2: 'Panels per Page', isPublishing: true },
111
+ { name: 'total_pub', label: 'Total Panels / Moments', value: 1, format1: 'Total Panels', format2: 'Total Panels / Moments', isTotal: true, isPublishing: true }
112
+ ];
113
+
114
+ const counterContainer = document.getElementById('counter-container');
115
+ const addElementBtn = document.getElementById('add-element');
116
+ const format1Output = document.getElementById('format1-output');
117
+ const format2Output = document.getElementById('format2-output');
118
+ const copyBtn = document.getElementById('copy-btn');
119
+ const tabButtons = document.querySelectorAll('[data-format]');
120
+
121
+ let elements = [...constructionElements];
122
+ let currentLeftFormat = 'construction';
123
+
124
+ // Initialize with construction elements
125
+ updateLeftPanel();
126
+
127
+ // Left panel tab switching functionality
128
+ const leftTabButtons = document.querySelectorAll('[data-format-left]');
129
+ leftTabButtons.forEach(button => {
130
+ button.addEventListener('click', function() {
131
+ const format = this.getAttribute('data-format-left');
132
+
133
+ // Update active tab
134
+ leftTabButtons.forEach(btn => {
135
+ btn.classList.remove('tab-active-left', 'text-green-600');
136
+ btn.classList.add('text-gray-500');
137
+ });
138
+ this.classList.add('tab-active-left', 'text-green-600');
139
+ this.classList.remove('text-gray-500');
140
+
141
+ currentLeftFormat = format;
142
+
143
+ // Update elements based on selected format
144
+ if (format === 'construction') {
145
+ elements = [...constructionElements];
146
+ } else {
147
+ elements = [...publishingElements];
148
+ }
149
+
150
+ updateLeftPanel();
151
+ updateOutput();
152
+ });
153
+ });
154
+
155
+ function updateLeftPanel() {
156
+ counterContainer.innerHTML = '';
157
+ elements.forEach((element, index) => {
158
+ addCounterElement(element, index);
159
+ });
160
+ }
161
+
162
+ // Tab switching functionality
163
+ tabButtons.forEach(button => {
164
+ button.addEventListener('click', function() {
165
+ const format = this.getAttribute('data-format');
166
+
167
+ // Update active tab
168
+ tabButtons.forEach(btn => {
169
+ btn.classList.remove('tab-active', 'text-green-600');
170
+ btn.classList.add('text-gray-500');
171
+ });
172
+ this.classList.add('tab-active', 'text-green-600');
173
+ this.classList.remove('text-gray-500');
174
+
175
+ // Show correct output
176
+ if (format === 'format1') {
177
+ document.getElementById('format1-output').classList.remove('hidden');
178
+ document.getElementById('format2-output').classList.add('hidden');
179
+ } else {
180
+ document.getElementById('format1-output').classList.add('hidden');
181
+ document.getElementById('format2-output').classList.remove('hidden');
182
+ }
183
+ });
184
+ });
185
+
186
+ // Copy to clipboard functionality
187
+ copyBtn.addEventListener('click', function() {
188
+ const activeFormat = document.querySelector('[data-format].tab-active').getAttribute('data-format');
189
+ const outputElement = document.getElementById(`${activeFormat}-output`);
190
+ const textToCopy = Array.from(outputElement.children)
191
+ .map(child => child.textContent)
192
+ .join('\n');
193
+
194
+ navigator.clipboard.writeText(textToCopy).then(() => {
195
+ const originalText = this.innerHTML;
196
+ this.innerHTML = '<i data-feather="check" class="mr-2"></i> Copied!';
197
+ feather.replace();
198
+
199
+ setTimeout(() => {
200
+ this.innerHTML = originalText;
201
+ feather.replace();
202
+ }, 2000);
203
+ });
204
+ });
205
+
206
+ function addCounterElement(element, index) {
207
+ const counterDiv = document.createElement('div');
208
+ counterDiv.className = 'counter-item flex items-center justify-between p-3 rounded-lg';
209
+ counterDiv.dataset.index = index;
210
+
211
+ counterDiv.innerHTML = `
212
+ <div class="flex-1">
213
+ <span class="text-gray-700">${element.label}</span>
214
+ </div>
215
+ <div class="flex items-center">
216
+ <button class="counter-btn decrease w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center mr-2">
217
+ <i data-feather="minus" class="w-4 h-4"></i>
218
+ </button>
219
+ <span class="value-display w-10 text-center font-semibold">${element.value}</span>
220
+ <button class="counter-btn increase w-8 h-8 rounded-full bg-green-100 text-green-700 flex items-center justify-center ml-2 hover:bg-green-200">
221
+ <i data-feather="plus" class="w-4 h-4"></i>
222
+ </button>
223
+ </div>
224
+ ${element.isCustom ? `
225
+ <button class="delete-btn ml-4 text-red-500 hover:text-red-700">
226
+ <i data-feather="trash-2" class="w-4 h-4"></i>
227
+ </button>
228
+ ` : ''}
229
+ `;
230
+
231
+ counterContainer.appendChild(counterDiv);
232
+ feather.replace();
233
+
234
+ // Add event listeners for the buttons
235
+ const decreaseBtn = counterDiv.querySelector('.decrease');
236
+ const increaseBtn = counterDiv.querySelector('.increase');
237
+ const valueDisplay = counterDiv.querySelector('.value-display');
238
+ const deleteBtn = counterDiv.querySelector('.delete-btn');
239
+
240
+ decreaseBtn.addEventListener('click', () => {
241
+ if (elements[index].value > 1) {
242
+ elements[index].value--;
243
+ valueDisplay.textContent = elements[index].value;
244
+ updateOutput();
245
+ }
246
+ });
247
+
248
+ increaseBtn.addEventListener('click', () => {
249
+ elements[index].value++;
250
+ valueDisplay.textContent = elements[index].value;
251
+ updateOutput();
252
+ });
253
+
254
+ if (deleteBtn) {
255
+ deleteBtn.addEventListener('click', () => {
256
+ elements.splice(index, 1);
257
+ counterDiv.remove();
258
+ // Update indices for remaining elements
259
+ document.querySelectorAll('.counter-item').forEach((item, i) => {
260
+ item.dataset.index = i;
261
+ });
262
+ updateOutput();
263
+ });
264
+ }
265
+ }
266
+
267
+ function updateOutput() {
268
+ // Calculate total if needed
269
+ if (elements.some(el => el.isTotal)) {
270
+ const totalIndex = elements.findIndex(el => el.isTotal);
271
+ if (totalIndex !== -1) {
272
+ let calculatedTotal = 1;
273
+ for (let i = 0; i < totalIndex; i++) {
274
+ calculatedTotal *= elements[i].value;
275
+ }
276
+ elements[totalIndex].value = calculatedTotal;
277
+
278
+ // Update the display for the total element
279
+ const totalDisplay = document.querySelector(`.counter-item[data-index="${totalIndex}"] .value-display`);
280
+ if (totalDisplay) {
281
+ totalDisplay.textContent = calculatedTotal;
282
+ }
283
+ }
284
+ }
285
+
286
+ // Update format 1 output
287
+ format1Output.innerHTML = '';
288
+ elements.forEach(element => {
289
+ if (!element.isTotal) {
290
+ const outputLine = document.createElement('div');
291
+ outputLine.className = 'text-gray-700';
292
+ outputLine.textContent = `${element.value} ${element.format1}${element.value !== 1 ? 's' : ''}`;
293
+ format1Output.appendChild(outputLine);
294
+ }
295
+ });
296
+
297
+ // Add total if it exists
298
+ const totalElement = elements.find(el => el.isTotal);
299
+ if (totalElement) {
300
+ const totalLine = document.createElement('div');
301
+ totalLine.className = 'font-bold text-gray-800 mt-2 pt-2 border-t';
302
+ totalLine.textContent = `${totalElement.value} ${totalElement.format1}${totalElement.value !== 1 ? 's' : ''}`;
303
+ format1Output.appendChild(totalLine);
304
+ }
305
+
306
+ // Update format 2 output
307
+ format2Output.innerHTML = '';
308
+ elements.forEach(element => {
309
+ if (!element.isTotal) {
310
+ const outputLine = document.createElement('div');
311
+ outputLine.className = 'text-gray-700';
312
+ outputLine.textContent = `${element.value} ${element.format2}${element.value !== 1 ? 's' : ''}`;
313
+ format2Output.appendChild(outputLine);
314
+ }
315
+ });
316
+
317
+ // Add total if it exists
318
+ if (totalElement) {
319
+ const totalLine = document.createElement('div');
320
+ totalLine.className = 'font-bold text-gray-800 mt-2 pt-2 border-t';
321
+ totalLine.textContent = `${totalElement.value} ${totalElement.format2}${totalElement.value !== 1 ? 's' : ''}`;
322
+ format2Output.appendChild(totalLine);
323
+ }
324
+ }
325
+
326
+ // Initial output update
327
+ updateOutput();
328
+
329
+ // Add CSS for left panel tabs
330
+ const style = document.createElement('style');
331
+ style.textContent = `
332
+ .tab-active-left {
333
+ border-bottom: 3px solid #22c55e;
334
+ color: #22c55e;
335
+ font-weight: 600;
336
+ }
337
+ .counter-item {
338
+ background-color: #f0fdf4;
339
+ border: 1px solid #bbf7d0;
340
+ }
341
+ `;
342
+ document.head.appendChild(style);
343
+ });
344
+ </script>
345
+ </body>
346
  </html>
prompts.txt ADDED
@@ -0,0 +1,56 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ create for me a tool where on the left panel I am able to click to add the multiplication of the elements. each list element has a number clicker where i can decrease and increase its amount
2
+
3
+ - Homes / Books
4
+ - Rooms / Chapters
5
+ - Walls per Room / Pages
6
+ - Brics per Wall / Panels
7
+ - Total Bric / Panel Amount
8
+
9
+ then on the right is the prompt output with a tab for two version
10
+ Format 1
11
+
12
+ Home
13
+ Rooms
14
+ Wall
15
+ Bric
16
+
17
+ Format 2
18
+ Book
19
+ Chapter
20
+ Page as Scenes
21
+ Panels / Moments
22
+
23
+ it outputs the number amount of each element in a text format to copy and paste
24
+ For format 2 make it say for the total Panels / Moments
25
+ Make the Format 1 say Construction
26
+ Make the Format 2 say Publishing
27
+
28
+ For the Configure Element area Split it into a tab with two formats
29
+ Format 1( Construction )
30
+ Homes
31
+ Rooms Per House
32
+ Walls Per Room
33
+ Bricks Per Wall
34
+
35
+ Format 2 ( Publishing )
36
+ Books
37
+ Chapter per Book
38
+ Pages(scenes) per Chapter
39
+ Panels(moments) per Page(scene)
40
+
41
+
42
+ On the output section in the publishing tab make the out follow this structure
43
+ Book
44
+ Chapters per Book
45
+ Pages per Chapter
46
+ Panels per Pages
47
+
48
+ On the Construction output
49
+ Home(s)
50
+ Rooms per Home
51
+ Wall Per Room
52
+ Brics Per Wall
53
+
54
+ Change Configure Elements to "Project Configuring"
55
+ Change Multiplicative Counter tool to "(palm tree emoji)Project Configuration Tool"
56
+ make the theme colors tropical and the highlight color green