Hugging Face's logo

Spaces:
Fridrix
/
kassa-counter
Running

App Files Community
Fridrix commited on
Commit
58c7050
·
verified ·
1 Parent(s): d36e5ee

undefined - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +467 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Kassa Counter
3
- emoji: 🚀
4
- colorFrom: indigo
5
- colorTo: gray
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: kassa-counter
3
+ emoji: 🐳
4
+ colorFrom: yellow
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,467 @@
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="uk">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Касовий калькулятор</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary-color: #007AFF;
11
+ --background-color: #F5F7F9;
12
+ --card-background: #FFFFFF;
13
+ --text-color: #1D1D1F;
14
+ --border-color: #E5E5E7;
15
+ --shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
16
+ --success-color: #34C759;
17
+ }
18
+
19
+ * {
20
+ margin: 0;
21
+ padding: 0;
22
+ box-sizing: border-box;
23
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
24
+ }
25
+
26
+ body {
27
+ background-color: var(--background-color);
28
+ color: var(--text-color);
29
+ min-height: 100vh;
30
+ display: flex;
31
+ flex-direction: column;
32
+ align-items: center;
33
+ padding: 2rem;
34
+ background: linear-gradient(135deg, #F5F7F9 0%, #E4E8EC 100%);
35
+ }
36
+
37
+ .container {
38
+ width: 100%;
39
+ max-width: 900px;
40
+ margin: 0 auto;
41
+ }
42
+
43
+ header {
44
+ text-align: center;
45
+ margin-bottom: 2.5rem;
46
+ opacity: 0;
47
+ animation: fadeIn 0.8s ease forwards;
48
+ }
49
+
50
+ h1 {
51
+ font-weight: 600;
52
+ font-size: 2.5rem;
53
+ margin-bottom: 0.5rem;
54
+ letter-spacing: -0.5px;
55
+ background: linear-gradient(135deg, #007AFF 0%, #5856D6 100%);
56
+ -webkit-background-clip: text;
57
+ -webkit-text-fill-color: transparent;
58
+ }
59
+
60
+ .subtitle {
61
+ color: #86868B;
62
+ font-size: 1.1rem;
63
+ margin-top: 0.5rem;
64
+ }
65
+
66
+ .calculator {
67
+ background-color: var(--card-background);
68
+ border-radius: 20px;
69
+ padding: 2.5rem;
70
+ box-shadow: var(--shadow);
71
+ transform: translateY(20px);
72
+ opacity: 0;
73
+ animation: slideUp 0.6s ease 0.3s forwards;
74
+ position: relative;
75
+ overflow: hidden;
76
+ }
77
+
78
+ .calculator::before {
79
+ content: '';
80
+ position: absolute;
81
+ top: 0;
82
+ left: 0;
83
+ right: 0;
84
+ height: 5px;
85
+ background: linear-gradient(90deg, #007AFF, #34C759, #FF9500, #FF2D55);
86
+ opacity: 0.8;
87
+ }
88
+
89
+ .denominations-grid {
90
+ display: grid;
91
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
92
+ gap: 1.5rem;
93
+ margin-bottom: 2rem;
94
+ }
95
+
96
+ .denomination {
97
+ display: flex;
98
+ flex-direction: column;
99
+ transition: transform 0.3s ease;
100
+ }
101
+
102
+ .denomination:hover {
103
+ transform: translateY(-5px);
104
+ }
105
+
106
+ label {
107
+ font-size: 0.95rem;
108
+ margin-bottom: 0.7rem;
109
+ color: #86868B;
110
+ font-weight: 500;
111
+ display: flex;
112
+ align-items: center;
113
+ }
114
+
115
+ label i {
116
+ margin-right: 8px;
117
+ color: var(--primary-color);
118
+ }
119
+
120
+ .input-container {
121
+ position: relative;
122
+ display: flex;
123
+ align-items: center;
124
+ }
125
+
126
+ .input-container::before {
127
+ content: '₴';
128
+ position: absolute;
129
+ left: 15px;
130
+ color: #86868B;
131
+ font-weight: 500;
132
+ z-index: 1;
133
+ }
134
+
135
+ input {
136
+ padding: 1rem 1rem 1rem 2.2rem;
137
+ border: 1.5px solid var(--border-color);
138
+ border-radius: 14px;
139
+ font-size: 1.1rem;
140
+ transition: all 0.3s ease;
141
+ outline: none;
142
+ width: 100%;
143
+ font-weight: 500;
144
+ }
145
+
146
+ input:focus {
147
+ border-color: var(--primary-color);
148
+ box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
149
+ }
150
+
151
+ .result {
152
+ text-align: center;
153
+ padding: 2.5rem;
154
+ background: linear-gradient(135deg, #007AFF 0%, #5E5CE6 100%);
155
+ border-radius: 18px;
156
+ color: white;
157
+ margin-top: 2rem;
158
+ transform: scale(0.95);
159
+ opacity: 0;
160
+ animation: scaleIn 0.5s ease 0.8s forwards;
161
+ box-shadow: 0 10px 30px rgba(0, 122, 255, 0.3);
162
+ position: relative;
163
+ overflow: hidden;
164
+ }
165
+
166
+ .result::before {
167
+ content: '';
168
+ position: absolute;
169
+ top: 0;
170
+ left: 0;
171
+ right: 0;
172
+ bottom: 0;
173
+ background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
174
+ opacity: 0.3;
175
+ }
176
+
177
+ .result-label {
178
+ font-size: 1.1rem;
179
+ margin-bottom: 0.8rem;
180
+ opacity: 0.9;
181
+ letter-spacing: 0.5px;
182
+ position: relative;
183
+ display: inline-block;
184
+ }
185
+
186
+ .total-amount {
187
+ font-size: 3.5rem;
188
+ font-weight: 700;
189
+ letter-spacing: -1px;
190
+ position: relative;
191
+ display: inline-block;
192
+ }
193
+
194
+ .currency {
195
+ font-size: 2rem;
196
+ font-weight: 600;
197
+ margin-left: 0.3rem;
198
+ opacity: 0.9;
199
+ }
200
+
201
+ .reset-btn {
202
+ background: rgba(255, 255, 255, 0.2);
203
+ border: none;
204
+ color: white;
205
+ padding: 0.8rem 1.5rem;
206
+ border-radius: 12px;
207
+ font-weight: 500;
208
+ margin-top: 1.5rem;
209
+ cursor: pointer;
210
+ transition: all 0.3s ease;
211
+ backdrop-filter: blur(10px);
212
+ -webkit-backdrop-filter: blur(10px);
213
+ }
214
+
215
+ .reset-btn:hover {
216
+ background: rgba(255, 255, 255, 0.3);
217
+ transform: translateY(-2px);
218
+ }
219
+
220
+ @keyframes fadeIn {
221
+ from { opacity: 0; }
222
+ to { opacity: 1; }
223
+ }
224
+
225
+ @keyframes slideUp {
226
+ from {
227
+ transform: translateY(20px);
228
+ opacity: 0;
229
+ }
230
+ to {
231
+ transform: translateY(0);
232
+ opacity: 1;
233
+ }
234
+ }
235
+
236
+ @keyframes scaleIn {
237
+ from {
238
+ transform: scale(0.95);
239
+ opacity: 0;
240
+ }
241
+ to {
242
+ transform: scale(1);
243
+ opacity: 1;
244
+ }
245
+ }
246
+
247
+ .pulse {
248
+ animation: pulse 0.6s ease;
249
+ }
250
+
251
+ @keyframes pulse {
252
+ 0% { transform: scale(1); }
253
+ 50% { transform: scale(1.03); }
254
+ 100% { transform: scale(1); }
255
+ }
256
+
257
+ .bill-change {
258
+ animation: billChange 0.5s ease;
259
+ }
260
+
261
+ @keyframes billChange {
262
+ 0% { background-color: transparent; }
263
+ 50% { background-color: rgba(0, 122, 255, 0.1); }
264
+ 100% { background-color: transparent; }
265
+ }
266
+
267
+ @media (max-width: 768px) {
268
+ body {
269
+ padding: 1.5rem;
270
+ }
271
+
272
+ .calculator {
273
+ padding: 1.8rem;
274
+ }
275
+
276
+ .denominations-grid {
277
+ grid-template-columns: repeat(2, 1fr);
278
+ gap: 1.2rem;
279
+ }
280
+
281
+ .total-amount {
282
+ font-size: 2.8rem;
283
+ }
284
+
285
+ h1 {
286
+ font-size: 2.2rem;
287
+ }
288
+ }
289
+
290
+ @media (max-width: 480px) {
291
+ .denominations-grid {
292
+ grid-template-columns: 1fr;
293
+ }
294
+
295
+ .total-amount {
296
+ font-size: 2.5rem;
297
+ }
298
+
299
+ h1 {
300
+ font-size: 1.8rem;
301
+ }
302
+
303
+ .result {
304
+ padding: 1.8rem;
305
+ }
306
+ }
307
+ </style>
308
+ </head>
309
+ <body>
310
+ <div class="container">
311
+ <header>
312
+ <h1>Касовий калькулятор</h1>
313
+ <p class="subtitle">Введіть кількість банкнот кожного номіналу в гривнях</p>
314
+ </header>
315
+
316
+ <div class="calculator">
317
+ <div class="denominations-grid">
318
+ <div class="denomination">
319
+ <label for="bill1000"><i class="fas fa-money-bill-wave"></i> 1000 ₴</label>
320
+ <div class="input-container">
321
+ <input type="number" id="bill1000" min="0" value="0" class="bill-input">
322
+ </div>
323
+ </div>
324
+ <div class="denomination">
325
+ <label for="bill500"><i class="fas fa-money-bill-wave"></i> 500 ₴</label>
326
+ <div class="input-container">
327
+ <input type="number" id="bill500" min="0" value="0" class="bill-input">
328
+ </div>
329
+ </div>
330
+ <div class="denomination">
331
+ <label for="bill200"><i class="fas fa-money-bill-wave"></i> 200 ₴</label>
332
+ <div class="input-container">
333
+ <input type="number" id="bill200" min="0" value="0" class="bill-input">
334
+ </div>
335
+ </div>
336
+ <div class="denomination">
337
+ <label for="bill100"><i class="fas fa-money-bill-wave"></i> 100 ₴</label>
338
+ <div class="input-container">
339
+ <input type="number" id="bill100" min="0" value="0" class="bill-input">
340
+ </div>
341
+ </div>
342
+ <div class="denomination">
343
+ <label for="bill50"><i class="fas fa-money-bill-wave"></i> 50 ₴</label>
344
+ <div class="input-container">
345
+ <input type="number" id="bill50" min="0" value="0" class="bill-input">
346
+ </div>
347
+ </div>
348
+ <div class="denomination">
349
+ <label for="bill20"><i class="fas fa-money-bill-wave"></i> 20 ₴</label>
350
+ <div class="input-container">
351
+ <input type="number" id="bill20" min="0" value="0" class="bill-input">
352
+ </div>
353
+ </div>
354
+ <div class="denomination">
355
+ <label for="bill10"><i class="fas fa-money-bill-wave"></i> 10 ₴</label>
356
+ <div class="input-container">
357
+ <input type="number" id="bill10" min="0" value="0" class="bill-input">
358
+ </div>
359
+ </div>
360
+ <div class="denomination">
361
+ <label for="bill5"><i class="fas fa-money-bill-wave"></i> 5 ₴</label>
362
+ <div class="input-container">
363
+ <input type="number" id="bill5" min="0" value="0" class="bill-input">
364
+ </div>
365
+ </div>
366
+ <div class="denomination">
367
+ <label for="bill2"><i class="fas fa-money-bill-wave"></i> 2 ₴</label>
368
+ <div class="input-container">
369
+ <input type="number" id="bill2" min="0" value="0" class="bill-input">
370
+ </div>
371
+ </div>
372
+ <div class="denomination">
373
+ <label for="bill1"><i class="fas fa-money-bill-wave"></i> 1 ₴</label>
374
+ <div class="input-container">
375
+ <input type="number" id="bill1" min="0" value="0" class="bill-input">
376
+ </div>
377
+ </div>
378
+ </div>
379
+
380
+ <div class="result">
381
+ <p class="result-label">Загальна сума</p>
382
+ <div class="total-amount"><span id="total">0</span><span class="currency">₴</span></div>
383
+ <button class="reset-btn" id="resetBtn"><i class="fas fa-refresh"></i> Очистити</button>
384
+ </div>
385
+ </div>
386
+ </div>
387
+
388
+ <script>
389
+ document.addEventListener('DOMContentLoaded', function() {
390
+ const billInputs = document.querySelectorAll('.bill-input');
391
+ const totalElement = document.getElementById('total');
392
+ const resetBtn = document.getElementById('resetBtn');
393
+ const resultSection = document.querySelector('.result');
394
+
395
+ // Номиналы купюр
396
+ const denominations = {
397
+ bill1000: 1000,
398
+ bill500: 500,
399
+ bill200: 200,
400
+ bill100: 100,
401
+ bill50: 50,
402
+ bill20: 20,
403
+ bill10: 10,
404
+ bill5: 5,
405
+ bill2: 2,
406
+ bill1: 1
407
+ };
408
+
409
+ // Функция для расчета общей суммы
410
+ function calculateTotal() {
411
+ let total = 0;
412
+
413
+ billInputs.forEach(input => {
414
+ const billValue = denominations[input.id];
415
+ const billCount = parseInt(input.value) || 0;
416
+ total += billValue * billCount;
417
+
418
+ // Анимация при изменении значения
419
+ if (input.value > 0) {
420
+ input.parentElement.parentElement.classList.add('bill-change');
421
+ setTimeout(() => {
422
+ input.parentElement.parentElement.classList.remove('bill-change');
423
+ }, 500);
424
+ }
425
+ });
426
+
427
+ // Форматирование числа с пробелами
428
+ totalElement.textContent = total.toLocaleString('uk-UA');
429
+
430
+ // Анимация изменения общей суммы
431
+ resultSection.classList.add('pulse');
432
+ setTimeout(() => {
433
+ resultSection.classList.remove('pulse');
434
+ }, 600);
435
+ }
436
+
437
+ // Слушатели событий для всех полей ввода
438
+ billInputs.forEach(input => {
439
+ input.addEventListener('input', calculateTotal);
440
+ input.addEventListener('focus', function() {
441
+ this.parentElement.parentElement.style.transform = 'translateY(-5px)';
442
+ });
443
+ input.addEventListener('blur', function() {
444
+ this.parentElement.parentElement.style.transform = 'translateY(0)';
445
+ });
446
+ });
447
+
448
+ // Кнопка сброса
449
+ resetBtn.addEventListener('click', function() {
450
+ billInputs.forEach(input => {
451
+ input.value = '0';
452
+ });
453
+ calculateTotal();
454
+
455
+ // Анимация кнопки
456
+ this.classList.add('pulse');
457
+ setTimeout(() => {
458
+ this.classList.remove('pulse');
459
+ }, 600);
460
+ });
461
+
462
+ // Инициализация расчета
463
+ calculateTotal();
464
+ });
465
+ </script>
466
+ </body>
467
+ </html>
prompts.txt ADDED
File without changes