oneword-ai 0.1.0__py3-none-any.whl

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,485 @@
1
+ /*
2
+ * Neobrutalism UI - OneWord AI Subtitle Generator
3
+ * High contrast, bold borders, sharp shadows, vibrant colors
4
+ */
5
+
6
+ /* ========== FONTS ========== */
7
+ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
8
+
9
+ /* ========== CSS VARIABLES ========== */
10
+ :root {
11
+ /* Colors */
12
+ --color-bg: #fafafa;
13
+ --color-primary: #6366f1;
14
+ --color-secondary: #f97316;
15
+ --color-success: #10b981;
16
+ --color-danger: #ef4444;
17
+ --color-black: #000000;
18
+ --color-white: #ffffff;
19
+ --color-accent: #fbbf24;
20
+
21
+ /* Grid */
22
+ --grid-size: 20px;
23
+ --grid-color: rgba(0, 0, 0, 0.05);
24
+
25
+ /* Borders */
26
+ --border-width: 3px;
27
+ --border-color: var(--color-black);
28
+
29
+ /* Shadows */
30
+ --shadow-offset: 6px;
31
+ --shadow-color: var(--color-black);
32
+
33
+ /* Typography */
34
+ --font-family: 'Space Grotesk', -apple-system, system-ui, sans-serif;
35
+ }
36
+
37
+ /* ========== RESET ========== */
38
+ * {
39
+ margin: 0;
40
+ padding: 0;
41
+ box-sizing: border-box;
42
+ }
43
+
44
+ body {
45
+ font-family: var(--font-family);
46
+ background: var(--color-bg);
47
+ color: var(--color-black);
48
+ line-height: 1.6;
49
+ overflow-x: hidden;
50
+ position: relative;
51
+ }
52
+
53
+ /* ========== GRID BACKGROUND ========== */
54
+ .grid-bg {
55
+ position: fixed;
56
+ top: 0;
57
+ left: 0;
58
+ width: 100%;
59
+ height: 100%;
60
+ background-image:
61
+ linear-gradient(var(--grid-color) 1px, transparent 1px),
62
+ linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
63
+ background-size: var(--grid-size) var(--grid-size);
64
+ pointer-events: none;
65
+ z-index: 0;
66
+ }
67
+
68
+ /* ========== CONTAINER ========== */
69
+ .container {
70
+ max-width: 900px;
71
+ margin: 0 auto;
72
+ padding: 20px 20px;
73
+ position: relative;
74
+ z-index: 1;
75
+ }
76
+
77
+ /* ========== HEADER ========== */
78
+ .header {
79
+ text-align: center;
80
+ margin-bottom: 30px;
81
+ }
82
+
83
+ .title {
84
+ font-size: 3rem;
85
+ font-weight: 700;
86
+ color: var(--color-black);
87
+ text-transform: uppercase;
88
+ letter-spacing: -2px;
89
+ margin-bottom: 8px;
90
+ text-shadow:
91
+ 3px 3px 0 var(--color-primary),
92
+ 6px 6px 0 var(--color-secondary);
93
+ }
94
+
95
+ .subtitle {
96
+ font-size: 1rem;
97
+ font-weight: 500;
98
+ color: var(--color-black);
99
+ text-transform: uppercase;
100
+ letter-spacing: 2px;
101
+ }
102
+
103
+ /* ========== CARD ========== */
104
+ .card {
105
+ background: var(--color-white);
106
+ border: var(--border-width) solid var(--border-color);
107
+ box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--shadow-color);
108
+ padding: 20px;
109
+ margin-bottom: 20px;
110
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
111
+ }
112
+
113
+ .card:hover {
114
+ transform: translate(-2px, -2px);
115
+ box-shadow:
116
+ calc(var(--shadow-offset) + 2px) calc(var(--shadow-offset) + 2px) 0 var(--shadow-color);
117
+ }
118
+
119
+ .card-header {
120
+ margin-bottom: 15px;
121
+ padding-bottom: 10px;
122
+ border-bottom: var(--border-width) solid var(--color-black);
123
+ }
124
+
125
+ .card-header h2 {
126
+ font-size: 1.3rem;
127
+ font-weight: 700;
128
+ text-transform: uppercase;
129
+ letter-spacing: 1px;
130
+ }
131
+
132
+ /* ========== DROPZONE ========== */
133
+ .dropzone {
134
+ border: var(--border-width) dashed var(--color-black);
135
+ background: var(--color-bg);
136
+ padding: 20px 10px;
137
+ text-align: center;
138
+ cursor: pointer;
139
+ transition: all 0.3s ease;
140
+ position: relative;
141
+ max-width: 600px;
142
+ margin: 0 auto;
143
+ }
144
+
145
+ .dropzone:hover {
146
+ background: var(--color-primary);
147
+ border-color: var(--color-primary);
148
+ }
149
+
150
+ .dropzone:hover .dropzone-content {
151
+ color: var(--color-white);
152
+ }
153
+
154
+ .dropzone.dragover {
155
+ background: var(--color-secondary);
156
+ border-color: var(--color-secondary);
157
+ transform: scale(0.98);
158
+ }
159
+
160
+ .upload-icon {
161
+ width: 48px;
162
+ height: 48px;
163
+ margin: 0 auto 12px;
164
+ stroke-width: 3;
165
+ }
166
+
167
+ .dropzone-text {
168
+ font-size: 1.1rem;
169
+ font-weight: 700;
170
+ margin-bottom: 5px;
171
+ text-transform: uppercase;
172
+ }
173
+
174
+ .dropzone-subtext {
175
+ font-size: 1rem;
176
+ font-weight: 500;
177
+ margin-bottom: 15px;
178
+ }
179
+
180
+ .file-limit {
181
+ font-size: 0.9rem;
182
+ opacity: 0.7;
183
+ font-weight: 500;
184
+ }
185
+
186
+ /* ========== FILE INFO ========== */
187
+ .file-info {
188
+ background: var(--color-success);
189
+ border: var(--border-width) solid var(--color-black);
190
+ padding: 20px;
191
+ margin-top: 20px;
192
+ color: var(--color-white);
193
+ font-weight: 600;
194
+ }
195
+
196
+ .file-info p {
197
+ margin: 5px 0;
198
+ }
199
+
200
+ /* ========== FORM ========== */
201
+ .form-grid {
202
+ display: grid;
203
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
204
+ gap: 15px;
205
+ margin-bottom: 20px;
206
+ }
207
+
208
+ .form-group {
209
+ display: flex;
210
+ flex-direction: column;
211
+ gap: 10px;
212
+ }
213
+
214
+ .form-group label {
215
+ font-weight: 700;
216
+ font-size: 0.9rem;
217
+ text-transform: uppercase;
218
+ letter-spacing: 1px;
219
+ }
220
+
221
+ .select-input {
222
+ padding: 12px;
223
+ font-size: 0.95rem;
224
+ font-weight: 600;
225
+ font-family: var(--font-family);
226
+ border: var(--border-width) solid var(--color-black);
227
+ background: var(--color-white);
228
+ cursor: pointer;
229
+ transition: all 0.2s ease;
230
+ }
231
+
232
+ .select-input:hover {
233
+ background: var(--color-accent);
234
+ }
235
+
236
+ .select-input:focus {
237
+ outline: none;
238
+ background: var(--color-primary);
239
+ color: var(--color-white);
240
+ }
241
+
242
+ /* ========== BUTTONS ========== */
243
+ .btn-primary,
244
+ .btn-download,
245
+ .btn-secondary,
246
+ .btn-instagram {
247
+ padding: 14px 28px;
248
+ font-size: 1rem;
249
+ font-weight: 700;
250
+ font-family: var(--font-family);
251
+ text-transform: uppercase;
252
+ letter-spacing: 1px;
253
+ border: var(--border-width) solid var(--color-black);
254
+ cursor: pointer;
255
+ transition: all 0.2s ease;
256
+ box-shadow: 4px 4px 0 var(--shadow-color);
257
+ display: block;
258
+ width: 100%;
259
+ text-decoration: none;
260
+ text-align: center;
261
+ }
262
+
263
+ .btn-primary {
264
+ background: var(--color-primary);
265
+ color: var(--color-white);
266
+ }
267
+
268
+ .btn-primary:hover:not(:disabled) {
269
+ background: var(--color-secondary);
270
+ transform: translate(-2px, -2px);
271
+ box-shadow: 6px 6px 0 var(--shadow-color);
272
+ }
273
+
274
+ .btn-primary:disabled {
275
+ opacity: 0.5;
276
+ cursor: not-allowed;
277
+ }
278
+
279
+ .btn-download {
280
+ background: var(--color-success);
281
+ color: var(--color-white);
282
+ margin-bottom: 15px;
283
+ }
284
+
285
+ .btn-download:hover {
286
+ background: var(--color-primary);
287
+ transform: translate(-2px, -2px);
288
+ box-shadow: 6px 6px 0 var(--shadow-color);
289
+ }
290
+
291
+ .btn-secondary {
292
+ background: var(--color-white);
293
+ color: var(--color-black);
294
+ }
295
+
296
+ .btn-secondary:hover {
297
+ background: var(--color-accent);
298
+ transform: translate(-2px, -2px);
299
+ box-shadow: 6px 6px 0 var(--shadow-color);
300
+ }
301
+
302
+ .btn-instagram {
303
+ background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
304
+ color: var(--color-white);
305
+ margin-top: 15px;
306
+ }
307
+
308
+ .btn-instagram:hover {
309
+ transform: translate(-2px, -2px);
310
+ box-shadow: 6px 6px 0 var(--shadow-color);
311
+ }
312
+
313
+ /* ========== PROGRESS ========== */
314
+ .progress-container {
315
+ margin-bottom: 20px;
316
+ }
317
+
318
+ .progress-bar {
319
+ width: 100%;
320
+ height: 40px;
321
+ border: var(--border-width) solid var(--color-black);
322
+ background: var(--color-bg);
323
+ overflow: hidden;
324
+ position: relative;
325
+ }
326
+
327
+ .progress-fill {
328
+ height: 100%;
329
+ background: var(--color-success);
330
+ transition: width 0.3s ease;
331
+ width: 0%;
332
+ position: relative;
333
+ }
334
+
335
+ .progress-fill::after {
336
+ content: '';
337
+ position: absolute;
338
+ top: 0;
339
+ left: 0;
340
+ right: 0;
341
+ bottom: 0;
342
+ background: repeating-linear-gradient(45deg,
343
+ transparent,
344
+ transparent 10px,
345
+ rgba(255, 255, 255, 0.2) 10px,
346
+ rgba(255, 255, 255, 0.2) 20px);
347
+ }
348
+
349
+ .progress-text {
350
+ font-size: 1.5rem;
351
+ font-weight: 700;
352
+ text-align: center;
353
+ margin-top: 10px;
354
+ }
355
+
356
+ .status-text {
357
+ font-size: 1rem;
358
+ font-weight: 600;
359
+ text-align: center;
360
+ text-transform: uppercase;
361
+ letter-spacing: 1px;
362
+ padding: 15px;
363
+ background: var(--color-accent);
364
+ border: var(--border-width) solid var(--color-black);
365
+ }
366
+
367
+ /* ========== POPUP ========== */
368
+ .popup-overlay {
369
+ position: fixed;
370
+ top: 0;
371
+ left: 0;
372
+ width: 100%;
373
+ height: 100%;
374
+ background: rgba(0, 0, 0, 0.8);
375
+ display: flex;
376
+ align-items: center;
377
+ justify-content: center;
378
+ z-index: 1000;
379
+ animation: fadeIn 0.3s ease;
380
+ }
381
+
382
+ .popup-card {
383
+ background: var(--color-white);
384
+ border: var(--border-width) solid var(--color-black);
385
+ box-shadow: 10px 10px 0 var(--shadow-color);
386
+ padding: 40px;
387
+ max-width: 400px;
388
+ width: 90%;
389
+ position: relative;
390
+ animation: slideUp 0.3s ease;
391
+ }
392
+
393
+ .popup-card h3 {
394
+ font-size: 1.8rem;
395
+ font-weight: 700;
396
+ margin-bottom: 10px;
397
+ text-transform: uppercase;
398
+ }
399
+
400
+ .popup-card p {
401
+ font-size: 1rem;
402
+ margin-bottom: 20px;
403
+ }
404
+
405
+ .popup-close {
406
+ position: absolute;
407
+ top: 15px;
408
+ right: 15px;
409
+ background: var(--color-danger);
410
+ color: var(--color-white);
411
+ border: var(--border-width) solid var(--color-black);
412
+ width: 40px;
413
+ height: 40px;
414
+ font-size: 1.5rem;
415
+ font-weight: 700;
416
+ cursor: pointer;
417
+ transition: all 0.2s ease;
418
+ }
419
+
420
+ .popup-close:hover {
421
+ background: var(--color-black);
422
+ transform: rotate(90deg);
423
+ }
424
+
425
+ /* ========== UTILITY ========== */
426
+ .hidden {
427
+ display: none !important;
428
+ }
429
+
430
+ /* ========== ANIMATIONS ========== */
431
+ @keyframes fadeIn {
432
+ from {
433
+ opacity: 0;
434
+ }
435
+
436
+ to {
437
+ opacity: 1;
438
+ }
439
+ }
440
+
441
+ @keyframes slideUp {
442
+ from {
443
+ transform: translateY(30px);
444
+ opacity: 0;
445
+ }
446
+
447
+ to {
448
+ transform: translateY(0);
449
+ opacity: 1;
450
+ }
451
+ }
452
+
453
+ /* ========== RESPONSIVE ========== */
454
+ @media (max-width: 768px) {
455
+ .title {
456
+ font-size: 2.5rem;
457
+ text-shadow:
458
+ 2px 2px 0 var(--color-primary),
459
+ 4px 4px 0 var(--color-secondary);
460
+ }
461
+
462
+ .card {
463
+ padding: 20px;
464
+ }
465
+
466
+ .form-grid {
467
+ grid-template-columns: 1fr;
468
+ }
469
+ }
470
+
471
+ /* ========== FOOTER ========== */
472
+ .footer {
473
+ text-align: center;
474
+ margin-top: 40px;
475
+ padding-bottom: 20px;
476
+ font-size: 0.9rem;
477
+ font-weight: 500;
478
+ text-transform: uppercase;
479
+ letter-spacing: 1px;
480
+ }
481
+
482
+ .footer strong {
483
+ color: var(--color-primary);
484
+ font-weight: 700;
485
+ }