VibeCodingStudio commited on
Commit
aef54d3
Β·
verified Β·
1 Parent(s): c099cdc

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +983 -19
index.html CHANGED
@@ -1,19 +1,983 @@
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>CLI Printing Press &middot; Book Impression Engine</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,400&family=Playfair+Display:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500&family=UnifrakturMaguntia&display=swap" rel="stylesheet">
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ fontFamily: {
16
+ 'playfair': ['"Playfair Display"', 'serif'],
17
+ 'cormorant': ['"Cormorant Garamond"', 'serif'],
18
+ 'eb-garamond': ['"EB Garamond"', 'serif'],
19
+ 'newsreader': ['"Newsreader"', 'serif'],
20
+ 'unifraktur': ['"UnifrakturMaguntia"', 'cursive'],
21
+ },
22
+ colors: {
23
+ 'parchment-50': '#fdfcf8',
24
+ 'parchment-100': '#faf6ec',
25
+ 'parchment-200': '#f5ecd6',
26
+ 'parchment-300': '#ecd5a8',
27
+ 'parchment-400': '#e0bf80',
28
+ 'parchment-500': '#d5a85a',
29
+ 'parchment-600': '#c08d3e',
30
+ 'parchment-700': '#a07032',
31
+ 'parchment-800': '#7a552e',
32
+ 'parchment-900': '#604628',
33
+ 'charcoal-50': '#f4f4f4',
34
+ 'charcoal-100': '#e3e3e3',
35
+ 'charcoal-200': '#c8c8c8',
36
+ 'charcoal-300': '#a4a4a4',
37
+ 'charcoal-400': '#818181',
38
+ 'charcoal-500': '#666666',
39
+ 'charcoal-600': '#515151',
40
+ 'charcoal-700': '#434343',
41
+ 'charcoal-800': '#383838',
42
+ 'charcoal-900': '#1a1a1a',
43
+ 'iron-50': '#f6f5f3',
44
+ 'iron-100': '#edebe6',
45
+ 'iron-200': '#ddd9d0',
46
+ 'iron-300': '#c5bfb2',
47
+ 'iron-400': '#a9a290',
48
+ 'iron-500': '#968d7a',
49
+ 'iron-600': '#847b6c',
50
+ 'iron-700': '#6d655a',
51
+ 'iron-800': '#5c554c',
52
+ 'iron-900': '#4a443e',
53
+ 'gold-400': '#c4a35a',
54
+ 'gold-500': '#b8933e',
55
+ 'gold-600': '#a67f2d',
56
+ 'gold-700': '#8c6726',
57
+ }
58
+ }
59
+ }
60
+ }
61
+ </script>
62
+ <style>
63
+ *, *::before, *::after {
64
+ margin: 0;
65
+ padding: 0;
66
+ box-sizing: border-box;
67
+ }
68
+
69
+ :root {
70
+ --paper-hue: 42;
71
+ --paper-sat: 60%;
72
+ --paper-light: 96%;
73
+ --ink-hue: 20;
74
+ --ink-sat: 15%;
75
+ --ink-light: 18%;
76
+ --binding-width: 1.5rem;
77
+ }
78
+
79
+ html {
80
+ scroll-behavior: smooth;
81
+ scrollbar-width: thin;
82
+ scrollbar-color: #c5bfb2 transparent;
83
+ }
84
+
85
+ body {
86
+ font-family: 'EB Garamond', Georgia, serif;
87
+ background: #edebe6;
88
+ color: #2c2520;
89
+ overflow-x: hidden;
90
+ -webkit-font-smoothing: antialiased;
91
+ -moz-osx-font-smoothing: grayscale;
92
+ }
93
+
94
+ ::-webkit-scrollbar {
95
+ width: 6px;
96
+ height: 6px;
97
+ }
98
+
99
+ ::-webkit-scrollbar-track {
100
+ background: transparent;
101
+ }
102
+
103
+ ::-webkit-scrollbar-thumb {
104
+ background: #c5bfb2;
105
+ border-radius: 3px;
106
+ }
107
+
108
+ ::-webkit-scrollbar-thumb:hover {
109
+ background: #a9a290;
110
+ }
111
+
112
+ /* ═════════════════════════════════════════════════��═════════════ */
113
+ /* ANIMATIONS */
114
+ /* ═══════════════════════════════════════════════════════════════ */
115
+
116
+ @keyframes fadeSlideUp {
117
+ from { opacity: 0; transform: translateY(20px); }
118
+ to { opacity: 1; transform: translateY(0); }
119
+ }
120
+
121
+ @keyframes fadeIn {
122
+ from { opacity: 0; }
123
+ to { opacity: 1; }
124
+ }
125
+
126
+ @keyframes slideFromLeft {
127
+ from { opacity: 0; transform: translateX(-30px); }
128
+ to { opacity: 1; transform: translateX(0); }
129
+ }
130
+
131
+ @keyframes gentlePulse {
132
+ 0%, 100% { opacity: 0.6; }
133
+ 50% { opacity: 1; }
134
+ }
135
+
136
+ @keyframes inkReveal {
137
+ from { clip-path: inset(0 100% 0 0); }
138
+ to { clip-path: inset(0 0% 0 0); }
139
+ }
140
+
141
+ @keyframes printStroke {
142
+ 0% { stroke-dashoffset: 100; }
143
+ 100% { stroke-dashoffset: 0; }
144
+ }
145
+
146
+ @keyframes pageTurnIn {
147
+ from { opacity: 0; transform: translateX(40px) rotateY(-8deg); }
148
+ to { opacity: 1; transform: translateX(0) rotateY(0deg); }
149
+ }
150
+
151
+ @keyframes pageTurnOut {
152
+ from { opacity: 1; transform: translateX(0) rotateY(0deg); }
153
+ to { opacity: 0; transform: translateX(-40px) rotateY(8deg); }
154
+ }
155
+
156
+ @keyframes ribbonWave {
157
+ 0%, 100% { transform: translateX(0) scaleY(1); }
158
+ 50% { transform: translateX(-2px) scaleY(1.03); }
159
+ }
160
+
161
+ @keyframes featherDrift {
162
+ 0%, 100% { transform: translate(0, 0) rotate(0deg); }
163
+ 25% { transform: translate(2px, -3px) rotate(2deg); }
164
+ 50% { transform: translate(-1px, -5px) rotate(-1deg); }
165
+ 75% { transform: translate(3px, -2px) rotate(1deg); }
166
+ }
167
+
168
+ @keyframes buttonPress {
169
+ 0% { transform: translateY(0); }
170
+ 50% { transform: translateY(1px); }
171
+ 100% { transform: translateY(0); }
172
+ }
173
+
174
+ @keyframes breathing {
175
+ 0%, 100% { opacity: 0.45; }
176
+ 50% { opacity: 0.65; }
177
+ }
178
+
179
+ @keyframes drawLine {
180
+ from { stroke-dashoffset: 200; }
181
+ to { stroke-dashoffset: 0; }
182
+ }
183
+
184
+ @keyframes blotSpread {
185
+ 0% { transform: scale(0); opacity: 0.8; }
186
+ 40% { opacity: 0.5; }
187
+ 100% { transform: scale(3); opacity: 0; }
188
+ }
189
+
190
+ @keyframes subtileFade {
191
+ 0%, 100% { opacity: 0.7; }
192
+ 50% { opacity: 1; }
193
+ }
194
+
195
+ @keyframes warmGlow {
196
+ 0%, 100% { box-shadow: 0 0 20px rgba(196, 163, 90, 0.15), 0 0 60px rgba(196, 163, 90, 0.08); }
197
+ 50% { box-shadow: 0 0 30px rgba(196, 163, 90, 0.2), 0 0 80px rgba(196, 163, 90, 0.1); }
198
+ }
199
+
200
+ /* ═══════════════════════════════════════════════════════════════ */
201
+ /* BASE COMPONENTS */
202
+ /* ═══════════════════════════════════════════════════════════════ */
203
+
204
+ .anim-fade-up {
205
+ animation: fadeSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
206
+ }
207
+
208
+ .anim-fade-in {
209
+ animation: fadeIn 0.5s ease-out forwards;
210
+ }
211
+
212
+ .anim-page-turn-in {
213
+ animation: pageTurnIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
214
+ }
215
+
216
+ .anim-ink-reveal {
217
+ animation: inkReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
218
+ }
219
+
220
+ .breathing {
221
+ animation: breathing 5s ease-in-out infinite;
222
+ }
223
+
224
+ /* Header */
225
+ .app-header {
226
+ backdrop-filter: blur(16px) saturate(1.2);
227
+ background: rgba(237, 235, 230, 0.82);
228
+ border-bottom: 1px solid rgba(180, 172, 156, 0.18);
229
+ }
230
+
231
+ .header-link {
232
+ position: relative;
233
+ color: #7a6b5a;
234
+ transition: color 0.3s ease;
235
+ }
236
+
237
+ .header-link::after {
238
+ content: '';
239
+ position: absolute;
240
+ bottom: -2px;
241
+ left: 0;
242
+ width: 0;
243
+ height: 1px;
244
+ background: #8c6726;
245
+ transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
246
+ }
247
+
248
+ .header-link:hover {
249
+ color: #4a443e;
250
+ }
251
+
252
+ .header-link:hover::after {
253
+ width: 100%;
254
+ }
255
+
256
+ .header-link-accent {
257
+ background: linear-gradient(135deg, #a07032, #8c6726);
258
+ color: #faf6ec;
259
+ transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
260
+ box-shadow: 0 1px 3px rgba(140, 103, 38, 0.15);
261
+ }
262
+
263
+ .header-link-accent:hover {
264
+ transform: translateY(-1px);
265
+ box-shadow: 0 3px 12px rgba(140, 103, 38, 0.22);
266
+ }
267
+
268
+ /* Sidebar accordion sections */
269
+ .accordion-section {
270
+ border: 1px solid rgba(180, 172, 156, 0.2);
271
+ border-radius: 14px;
272
+ background: rgba(253, 252, 248, 0.7);
273
+ overflow: hidden;
274
+ transition: border-color 0.3s ease, box-shadow 0.3s ease;
275
+ }
276
+
277
+ .accordion-section:hover {
278
+ border-color: rgba(196, 163, 90, 0.3);
279
+ }
280
+
281
+ .accordion-section.open {
282
+ border-color: rgba(196, 163, 90, 0.4);
283
+ box-shadow: 0 2px 16px rgba(140, 103, 38, 0.06);
284
+ }
285
+
286
+ .accordion-header {
287
+ cursor: pointer;
288
+ user-select: none;
289
+ padding: 14px 20px;
290
+ display: flex;
291
+ align-items: center;
292
+ justify-content: space-between;
293
+ transition: background 0.25s ease;
294
+ }
295
+
296
+ .accordion-header:hover {
297
+ background: rgba(196, 163, 90, 0.04);
298
+ }
299
+
300
+ .accordion-icon {
301
+ transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
302
+ }
303
+
304
+ .accordion-section.open .accordion-icon {
305
+ transform: rotate(180deg);
306
+ }
307
+
308
+ .accordion-body {
309
+ max-height: 0;
310
+ overflow: hidden;
311
+ transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
312
+ opacity: 0;
313
+ }
314
+
315
+ .accordion-section.open .accordion-body {
316
+ opacity: 1;
317
+ }
318
+
319
+ /* Form inputs */
320
+ .field-label {
321
+ font-size: 0.6875rem;
322
+ font-weight: 600;
323
+ letter-spacing: 0.1em;
324
+ text-transform: uppercase;
325
+ color: #968d7a;
326
+ margin-bottom: 6px;
327
+ }
328
+
329
+ .input-underline {
330
+ width: 100%;
331
+ padding: 8px 0;
332
+ font-size: 0.9375rem;
333
+ font-family: 'EB Garamond', Georgia, serif;
334
+ color: #2c2520;
335
+ background: transparent;
336
+ border: none;
337
+ border-bottom: 1px solid #c5bfb2;
338
+ outline: none;
339
+ transition: border-color 0.3s ease;
340
+ }
341
+
342
+ .input-underline:focus {
343
+ border-color: #a07032;
344
+ }
345
+
346
+ .input-underline::placeholder {
347
+ color: #a4a4a4;
348
+ font-style: italic;
349
+ }
350
+
351
+ textarea.input-underline {
352
+ resize: vertical;
353
+ min-height: 80px;
354
+ }
355
+
356
+ /* Selects */
357
+ .select-field {
358
+ width: 100%;
359
+ padding: 8px 28px 8px 12px;
360
+ font-size: 0.9375rem;
361
+ font-family: 'EB Garamond', Georgia, serif;
362
+ color: #2c2520;
363
+ background: #fdfcf8;
364
+ border: 1px solid #c5bfb2;
365
+ border-radius: 8px;
366
+ outline: none;
367
+ appearance: none;
368
+ cursor: pointer;
369
+ transition: border-color 0.25s ease, box-shadow 0.25s ease;
370
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23968d7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
371
+ background-repeat: no-repeat;
372
+ background-position: right 8px center;
373
+ background-size: 14px;
374
+ }
375
+
376
+ .select-field:hover {
377
+ border-color: #a9a290;
378
+ }
379
+
380
+ .select-field:focus {
381
+ border-color: #a07032;
382
+ box-shadow: 0 0 0 3px rgba(160, 112, 50, 0.08);
383
+ }
384
+
385
+ /* Checkboxes */
386
+ .check-pill {
387
+ display: inline-flex;
388
+ align-items: center;
389
+ gap: 7px;
390
+ padding: 7px 14px;
391
+ font-size: 0.8125rem;
392
+ color: #6d655a;
393
+ background: #f6f5f3;
394
+ border: 1px solid #ddd9d0;
395
+ border-radius: 20px;
396
+ cursor: pointer;
397
+ transition: all 0.25s ease;
398
+ user-select: none;
399
+ }
400
+
401
+ .check-pill:hover {
402
+ border-color: #c5bfb2;
403
+ background: #edebe6;
404
+ }
405
+
406
+ .check-pill.active {
407
+ background: #4a443e;
408
+ color: #faf6ec;
409
+ border-color: #4a443e;
410
+ }
411
+
412
+ .check-pill input {
413
+ display: none;
414
+ }
415
+
416
+ .check-pill .dot {
417
+ width: 8px;
418
+ height: 8px;
419
+ border-radius: 50%;
420
+ background: #c5bfb2;
421
+ transition: background 0.25s ease;
422
+ }
423
+
424
+ .check-pill.active .dot {
425
+ background: #c4a35a;
426
+ }
427
+
428
+ /* Range slider */
429
+ .range-track {
430
+ -webkit-appearance: none;
431
+ appearance: none;
432
+ width: 100%;
433
+ height: 3px;
434
+ background: #ddd9d0;
435
+ border-radius: 2px;
436
+ outline: none;
437
+ cursor: pointer;
438
+ }
439
+
440
+ .range-track::-webkit-slider-thumb {
441
+ -webkit-appearance: none;
442
+ appearance: none;
443
+ width: 16px;
444
+ height: 16px;
445
+ background: #a07032;
446
+ border: 2.5px solid #faf6ec;
447
+ border-radius: 50%;
448
+ box-shadow: 0 1px 5px rgba(140, 103, 38, 0.25);
449
+ cursor: pointer;
450
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
451
+ }
452
+
453
+ .range-track::-webkit-slider-thumb:hover {
454
+ transform: scale(1.15);
455
+ box-shadow: 0 2px 10px rgba(140, 103, 38, 0.3);
456
+ }
457
+
458
+ .range-track::-moz-range-thumb {
459
+ width: 16px;
460
+ height: 16px;
461
+ background: #a07032;
462
+ border: 2.5px solid #faf6ec;
463
+ border-radius: 50%;
464
+ box-shadow: 0 1px 5px rgba(140, 103, 38, 0.25);
465
+ cursor: pointer;
466
+ }
467
+
468
+ /* File upload */
469
+ .file-zone {
470
+ border: 2px dashed #c5bfb2;
471
+ border-radius: 12px;
472
+ padding: 28px 20px;
473
+ text-align: center;
474
+ transition: all 0.3s ease;
475
+ cursor: pointer;
476
+ }
477
+
478
+ .file-zone:hover {
479
+ border-color: #a07032;
480
+ background: rgba(196, 163, 90, 0.04);
481
+ }
482
+
483
+ .file-zone.drag-over {
484
+ border-color: #a07032;
485
+ background: rgba(196, 163, 90, 0.08);
486
+ }
487
+
488
+ /* Buttons */
489
+ .btn {
490
+ display: inline-flex;
491
+ align-items: center;
492
+ justify-content: center;
493
+ gap: 8px;
494
+ padding: 10px 24px;
495
+ font-size: 0.875rem;
496
+ font-family: 'EB Garamond', Georgia, serif;
497
+ font-weight: 500;
498
+ border-radius: 10px;
499
+ cursor: pointer;
500
+ transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
501
+ border: none;
502
+ outline: none;
503
+ position: relative;
504
+ overflow: hidden;
505
+ }
506
+
507
+ .btn:active {
508
+ animation: buttonPress 0.15s ease;
509
+ }
510
+
511
+ .btn-primary {
512
+ background: #2c2520;
513
+ color: #faf6ec;
514
+ box-shadow: 0 1px 4px rgba(44, 37, 32, 0.2);
515
+ }
516
+
517
+ .btn-primary:hover {
518
+ background: #38302a;
519
+ box-shadow: 0 3px 14px rgba(44, 37, 32, 0.25);
520
+ transform: translateY(-1px);
521
+ }
522
+
523
+ .btn-gold {
524
+ background: linear-gradient(145deg, #b8933e, #a07032);
525
+ color: #fdfcf8;
526
+ box-shadow: 0 1px 4px rgba(140, 103, 38, 0.2);
527
+ }
528
+
529
+ .btn-gold:hover {
530
+ box-shadow: 0 3px 16px rgba(140, 103, 38, 0.3);
531
+ transform: translateY(-1px);
532
+ }
533
+
534
+ .btn-subtle {
535
+ background: transparent;
536
+ color: #847b6c;
537
+ border: 1px solid #c5bfb2;
538
+ }
539
+
540
+ .btn-subtle:hover {
541
+ color: #4a443e;
542
+ border-color: #a9a290;
543
+ background: #f6f5f3;
544
+ }
545
+
546
+ .btn-ghost {
547
+ background: transparent;
548
+ color: #847b6c;
549
+ border: none;
550
+ }
551
+
552
+ .btn-ghost:hover {
553
+ color: #4a443e;
554
+ background: #f6f5f3;
555
+ }
556
+
557
+ /* ═══════════════════════════════════════════════════════════════ */
558
+ /* BOOK PAGE STYLES */
559
+ /* ═══════════════════════════════════════════════════════════════ */
560
+
561
+ .book-spine {
562
+ position: absolute;
563
+ left: 50%;
564
+ top: 0;
565
+ bottom: 0;
566
+ width: 2px;
567
+ background: linear-gradient(180deg, rgba(180, 170, 150, 0.15), rgba(180, 170, 150, 0.35), rgba(180, 170, 150, 0.15));
568
+ transform: translateX(-50%);
569
+ z-index: 5;
570
+ pointer-events: none;
571
+ }
572
+
573
+ .page-inner {
574
+ position: relative;
575
+ width: 100%;
576
+ height: 100%;
577
+ background: hsl(var(--paper-hue), var(--paper-sat), var(--paper-light));
578
+ overflow: hidden;
579
+ }
580
+
581
+ .page-header {
582
+ border-bottom: 0.75px solid rgba(130, 115, 95, 0.15);
583
+ padding-bottom: 12px;
584
+ margin-bottom: 24px;
585
+ }
586
+
587
+ .page-footer {
588
+ border-top: 0.75px solid rgba(130, 115, 95, 0.15);
589
+ padding-top: 10px;
590
+ margin-top: auto;
591
+ }
592
+
593
+ .drop-cap {
594
+ float: left;
595
+ font-family: 'UnifrakturMaguntia', cursive;
596
+ font-size: 3.8em;
597
+ line-height: 0.78;
598
+ margin-right: 6px;
599
+ margin-top: 4px;
600
+ color: #2c2520;
601
+ user-select: none;
602
+ }
603
+
604
+ .ornament-rule {
605
+ display: flex;
606
+ align-items: center;
607
+ justify-content: center;
608
+ gap: 10px;
609
+ margin: 20px 0;
610
+ opacity: 0.3;
611
+ }
612
+
613
+ .ornament-rule-line {
614
+ height: 0.5px;
615
+ background: #968d7a;
616
+ flex: 1;
617
+ max-width: 60px;
618
+ }
619
+
620
+ .ornament-rule-center {
621
+ width: 10px;
622
+ height: 10px;
623
+ border: 0.5px solid #968d7a;
624
+ transform: rotate(45deg);
625
+ }
626
+
627
+ /* Page size modes */
628
+ .size-paperback .book-surface {
629
+ max-width: 580px;
630
+ }
631
+
632
+ .size-hardcover .book-surface {
633
+ max-width: 620px;
634
+ }
635
+
636
+ .size-pamphlet .book-surface {
637
+ max-width: 460px;
638
+ }
639
+
640
+ .size-folio .book-surface {
641
+ max-width: 760px;
642
+ }
643
+
644
+ /* Font size modes */
645
+ .text-tiny { font-size: 12.5px; line-height: 1.7; }
646
+ .text-small { font-size: 14.5px; line-height: 1.75; }
647
+ .text-medium { font-size: 17px; line-height: 1.8; }
648
+ .text-large { font-size: 20px; line-height: 1.85; }
649
+ .text-great { font-size: 24px; line-height: 1.9; }
650
+
651
+ /* Distress effects via CSS filters on SVG */
652
+ .filter-distress-1 .page-inner { filter: url(#distress1); }
653
+ .filter-distress-2 .page-inner { filter: url(#distress2); }
654
+ .filter-sepia .page-inner { filter: sepia(0.15) saturate(0.95); }
655
+ .filter-warm .page-inner { filter: sepia(0.08) saturate(1.1); }
656
+ .filter-cool .page-inner { filter: hue-rotate(-8deg) saturate(0.9); }
657
+
658
+ /* Running header/footer */
659
+ .running-head {
660
+ font-size: 0.65rem;
661
+ letter-spacing: 0.12em;
662
+ text-transform: uppercase;
663
+ color: rgba(100, 90, 75, 0.5);
664
+ font-family: 'EB Garamond', serif;
665
+ }
666
+
667
+ .page-number {
668
+ font-variant-numeric: oldstyle-nums;
669
+ font-family: 'EB Garamond', serif;
670
+ color: rgba(100, 90, 75, 0.5);
671
+ }
672
+
673
+ /* ═══════════════════════════════════════════════════════════════ */
674
+ /* SECTION DIVIDER */
675
+ /* ═══════════════════════════════════════════════════════════════ */
676
+
677
+ .section-separator {
678
+ display: flex;
679
+ align-items: center;
680
+ justify-content: center;
681
+ gap: 14px;
682
+ padding: 2rem 0;
683
+ opacity: 0.3;
684
+ }
685
+
686
+ .section-separator .sep-line {
687
+ height: 0.5px;
688
+ background: linear-gradient(90deg, transparent, #968d7a, transparent);
689
+ flex: 1;
690
+ max-width: 80px;
691
+ }
692
+
693
+ .section-separator .sep-diamond {
694
+ width: 6px;
695
+ height: 6px;
696
+ border: 0.5px solid #968d7a;
697
+ transform: rotate(45deg);
698
+ }
699
+
700
+ /* ═══════════════════════════════════════════════════════════════ */
701
+ /* COVER DECORATION */
702
+ /* ═══════════════════════════════════════════════════════════════ */
703
+
704
+ .cover-frame {
705
+ position: relative;
706
+ border: 1.5px solid rgba(196, 163, 90, 0.35);
707
+ border-radius: 2px;
708
+ }
709
+
710
+ .cover-frame::before {
711
+ content: '';
712
+ position: absolute;
713
+ inset: 6px;
714
+ border: 0.5px solid rgba(196, 163, 90, 0.18);
715
+ pointer-events: none;
716
+ }
717
+
718
+ .cover-frame::after {
719
+ content: '';
720
+ position: absolute;
721
+ inset: 12px;
722
+ border: 0.5px solid rgba(196, 163, 90, 0.1);
723
+ pointer-events: none;
724
+ }
725
+
726
+ .corner-ornament {
727
+ position: absolute;
728
+ width: 18px;
729
+ height: 18px;
730
+ border: 0.5px solid rgba(196, 163, 90, 0.3);
731
+ pointer-events: none;
732
+ }
733
+
734
+ .corner-ornament.tl { top: 14px; left: 14px; border-right: none; border-bottom: none; }
735
+ .corner-ornament.tr { top: 14px; right: 14px; border-left: none; border-bottom: none; }
736
+ .corner-ornament.bl { bottom: 14px; left: 14px; border-right: none; border-top: none; }
737
+ .corner-ornament.br { bottom: 14px; right: 14px; border-left: none; border-top: none; }
738
+
739
+ /* ═══��═══════════════════════════════════════════════════════════ */
740
+ /* PRINT OVERLAY */
741
+ /* ═══════════════════════════════════════════════════════════════ */
742
+
743
+ .print-overlay {
744
+ position: fixed;
745
+ inset: 0;
746
+ z-index: 200;
747
+ background: rgba(26, 22, 18, 0.88);
748
+ backdrop-filter: blur(6px);
749
+ display: flex;
750
+ align-items: center;
751
+ justify-content: center;
752
+ opacity: 0;
753
+ pointer-events: none;
754
+ transition: opacity 0.5s ease;
755
+ }
756
+
757
+ .print-overlay.visible {
758
+ opacity: 1;
759
+ pointer-events: all;
760
+ }
761
+
762
+ .print-drum {
763
+ width: 280px;
764
+ height: 4px;
765
+ background: rgba(180, 170, 156, 0.15);
766
+ border-radius: 2px;
767
+ overflow: hidden;
768
+ position: relative;
769
+ }
770
+
771
+ .print-drum-fill {
772
+ height: 100%;
773
+ width: 0;
774
+ background: linear-gradient(90deg, #c4a35a, #d5a85a);
775
+ border-radius: 2px;
776
+ transition: width 0.1s linear;
777
+ }
778
+
779
+ /* ═══════════════════════════════════════════════════════════════ */
780
+ /* COUNTER STYLES */
781
+ /* ═══════════════════════════════════════════════════════════════ */
782
+
783
+ .digit-roll {
784
+ display: inline-block;
785
+ transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
786
+ }
787
+
788
+ /* ═══════════════════════════════════════════════════════════════ */
789
+ /* TYPOGRAPHY HELPERS */
790
+ /* ═══════════════════════════════════════════════════════════════ */
791
+
792
+ .hanging-indent {
793
+ text-indent: -1em;
794
+ padding-left: 1em;
795
+ }
796
+
797
+ .oldstyle-nums {
798
+ font-variant-numeric: oldstyle-nums;
799
+ }
800
+
801
+ .lining-nums {
802
+ font-variant-numeric: lining-nums;
803
+ }
804
+
805
+ .swash {
806
+ font-feature-settings: "swsh" 1;
807
+ }
808
+
809
+ .kern {
810
+ font-feature-settings: "kern" 1;
811
+ }
812
+
813
+ /* ═══════════════════════════════════════════════════════════════ */
814
+ /* PARALLAX & NOISE BACKGROUND */
815
+ /* ═══════════════════════════════════════════════════════════════ */
816
+
817
+ .noise-overlay {
818
+ position: fixed;
819
+ inset: 0;
820
+ pointer-events: none;
821
+ z-index: 0;
822
+ opacity: 0.018;
823
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
824
+ background-size: 200px 200px;
825
+ }
826
+
827
+ /* ═══════════════════════════════════════════════════════════════ */
828
+ /* SIDEBAR HERO ART */
829
+ /* ═══════════════════════════════════════════════════════════════ */
830
+
831
+ .sidebar-hero {
832
+ position: relative;
833
+ overflow: hidden;
834
+ }
835
+
836
+ .sidebar-hero::after {
837
+ content: '';
838
+ position: absolute;
839
+ bottom: 0;
840
+ left: 0;
841
+ right: 0;
842
+ height: 40px;
843
+ background: linear-gradient(0deg, rgba(253, 252, 248, 0.85), transparent);
844
+ pointer-events: none;
845
+ }
846
+
847
+ /* Quill illustration decorative */
848
+ .quill-deco {
849
+ animation: featherDrift 8s ease-in-out infinite;
850
+ }
851
+
852
+ /* ═══════════════════════════════════════════════════════════════ */
853
+ /* BREADCRUMB / PATH DISPLAY */
854
+ /* ═══════════════════════════════════════════════════════════════ */
855
+
856
+ .path-display {
857
+ font-family: 'EB Garamond', serif;
858
+ font-size: 0.75rem;
859
+ color: #a4a4a4;
860
+ white-space: nowrap;
861
+ overflow: hidden;
862
+ text-overflow: ellipsis;
863
+ letter-spacing: 0.02em;
864
+ }
865
+
866
+ /* ═══════════════════════════════════════════════════════════════ */
867
+ /* RESPONSIVE */
868
+ /* ═══════════════════════════════════════════════════════════════ */
869
+
870
+ @media (max-width: 1024px) {
871
+ .book-surface { max-width: 100% !important; }
872
+ .page-body { padding: 1.75rem 2rem !important; }
873
+ }
874
+
875
+ @media (max-width: 640px) {
876
+ .page-body { padding: 1.25rem 1.5rem !important; }
877
+ .cover-frame { padding: 1.5rem !important; }
878
+ }
879
+
880
+ /* Print styles */
881
+ @media print {
882
+ .app-header, .sidebar-panel, .no-print, .print-overlay { display: none !important; }
883
+ .book-preview { overflow: visible !important; height: auto !important; }
884
+ .book-surface { box-shadow: none !important; border: 1px solid #ddd; max-width: 100% !important; }
885
+ .page-inner { break-inside: avoid; }
886
+ }
887
+ </style>
888
+ </head>
889
+ <body class="min-h-screen">
890
+ <!-- Noise texture overlay -->
891
+ <div class="noise-overlay"></div>
892
+
893
+ <!-- SVG Filters for distress effects -->
894
+ <svg style="position:absolute; width:0; height:0; overflow:hidden;">
895
+ <defs>
896
+ <filter id="distress1">
897
+ <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="3" result="noise"/>
898
+ <feDisplacementMap in="SourceGraphic" in2="noise" scale="1.5" xChannelSelector="R" yChannelSelector="G"/>
899
+ <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.97 0"/>
900
+ </filter>
901
+ <filter id="distress2">
902
+ <feTurbulence type="fractalNoise" baseFrequency="0.06" numOctaves="4" result="noise"/>
903
+ <feDisplacementMap in="SourceGraphic" in2="noise" scale="3" xChannelSelector="R" yChannelSelector="G"/>
904
+ <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.94 0"/>
905
+ </filter>
906
+ <filter id="inkBlot">
907
+ <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="5" result="turbulence"/>
908
+ <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="8" xChannelSelector="R" yChannelSelector="G"/>
909
+ </filter>
910
+ <filter id="paperTexture">
911
+ <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" result="noise"/>
912
+ <feBlend in="SourceGraphic" in2="noise" mode="multiply" result="blend"/>
913
+ </filter>
914
+ </defs>
915
+ </svg>
916
+
917
+ <!-- ═══════════════════════════════════════════════════════════════ -->
918
+ <!-- PRINT OVERLAY -->
919
+ <!-- ═══════════════════════════════════════════════════════════════ -->
920
+ <div id="printOverlay" class="print-overlay">
921
+ <div class="text-center">
922
+ <div class="mb-8">
923
+ <svg class="quill-deco mx-auto" width="48" height="48" viewBox="0 0 48 48" fill="none">
924
+ <path d="M12 38C12 38 16 28 20 20C24 12 32 4 38 8C42 10 40 16 36 22C32 28 28 32 24 34C20 36 16 38 12 38Z" fill="#c4a35a" opacity="0.7"/>
925
+ <path d="M12 38L8 42M12 38L16 42" stroke="#c4a35a" stroke-width="1.5" opacity="0.5"/>
926
+ </svg>
927
+ </div>
928
+ <p class="font-cormorant italic text-xl text-parchment-300 mb-6">The press is inking the type...</p>
929
+ <div class="print-drum">
930
+ <div class="print-drum-fill" id="printDrumFill"></div>
931
+ </div>
932
+ <p class="font-eb-garamond text-sm text-parchment-500 mt-4 oldstyle-nums" id="printPercent">0 pages composed</p>
933
+ </div>
934
+ </div>
935
+
936
+ <!-- ════════════��══════════════════════════════════════════════════ -->
937
+ <!-- HEADER -->
938
+ <!-- ═══════════════════════════════════════════════════════════════ -->
939
+ <header class="app-header fixed top-0 left-0 right-0 z-50">
940
+ <div class="max-w-[1600px] mx-auto px-6 lg:px-10 h-14 flex items-center justify-between">
941
+ <!-- Left: Logo -->
942
+ <div class="flex items-center gap-3">
943
+ <svg width="32" height="32" viewBox="0 0 32 32" fill="none" class="flex-shrink-0">
944
+ <rect x="4" y="2" width="24" height="28" rx="2" fill="#2c2520"/>
945
+ <rect x="6" y="4" width="20" height="24" rx="1" fill="#faf6ec"/>
946
+ <line x1="9" y1="9" x2="23" y2="9" stroke="#2c2520" stroke-width="0.75"/>
947
+ <line x1="9" y1="12" x2="20" y2="12" stroke="#2c2520" stroke-width="0.5" opacity="0.5"/>
948
+ <line x1="9" y1="15" x2="21" y2="15" stroke="#2c2520" stroke-width="0.5" opacity="0.5"/>
949
+ <line x1="9" y1="18" x2="19" y2="18" stroke="#2c2520" stroke-width="0.5" opacity="0.5"/>
950
+ <rect x="9" y="22" width="8" height="2" rx="1" fill="#a07032"/>
951
+ </svg>
952
+ <div>
953
+ <span class="font-playfair font-bold text-base text-charcoal-900 tracking-tight leading-none block">CLI Printing Press</span>
954
+ <span class="text-[0.625rem] text-charcoal-400 tracking-[0.2em] uppercase font-medium">Book Impression Engine</span>
955
+ </div>
956
+ </div>
957
+
958
+ <!-- Center: Subtle navigation -->
959
+ <nav class="hidden md:flex items-center gap-8">
960
+ <a href="#" class="header-link text-xs tracking-widest uppercase font-medium" onclick="scrollToSection('manuscript')">Manuscript</a>
961
+ <a href="#" class="header-link text-xs tracking-widest uppercase font-medium" onclick="scrollToSection('typography')">Typography</a>
962
+ <a href="#" class="header-link text-xs tracking-widest uppercase font-medium" onclick="scrollToSection('print')">Impression</a>
963
+ </nav>
964
+
965
+ <!-- Right: Built with badge -->
966
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer" class="header-link-accent text-[0.65rem] tracking-widest uppercase font-semibold px-4 py-1.5 rounded-full">
967
+ Built with anycoder
968
+ </a>
969
+ </div>
970
+ </header>
971
+
972
+ <!-- ═══════════════════════════════════════════════════════════════ -->
973
+ <!-- MAIN LAYOUT -->
974
+ <!-- ═══════════════════════════════════════════════════════════════ -->
975
+ <div class="pt-14 min-h-screen flex flex-col lg:flex-row">
976
+ <!-- Sidebar -->
977
+ <aside class="sidebar-panel w-full lg:w-[380px] xl:w-[420px] flex-shrink-0 bg-parchment-50/70 border-r border-iron-200/40 overflow-y-auto" style="max-height: calc(100vh - 3.5rem);">
978
+ <!-- Sidebar hero illustration -->
979
+ <div class="sidebar-hero px-7 pt-8 pb-4">
980
+ <div class="flex items-center gap-4">
981
+ <svg width="56" height="56" viewBox="0 0 56 56" fill="none" class="flex-shrink-0">
982
+ <!-- Press frame -->
983
+ <rect x="8" y="6" width="40" height