Download index.html from VibeCodingStudio/anycoder-c5dc3c57: direct link, hf CLI and curl.
- Browser
- Download file 38.2 kB
-
https://huggingface.co/spaces/VibeCodingStudio/anycoder-c5dc3c57/resolve/main/index.html
- Command line
-
hf download hf://spaces/VibeCodingStudio/anycoder-c5dc3c57/index.html
-
curl -L -o index.html https://huggingface.co/spaces/VibeCodingStudio/anycoder-c5dc3c57/resolve/main/index.html
38.2 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CLI Printing Press · Book Impression Engine</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| 'playfair': ['"Playfair Display"', 'serif'], | |
| 'cormorant': ['"Cormorant Garamond"', 'serif'], | |
| 'eb-garamond': ['"EB Garamond"', 'serif'], | |
| 'newsreader': ['"Newsreader"', 'serif'], | |
| 'unifraktur': ['"UnifrakturMaguntia"', 'cursive'], | |
| }, | |
| colors: { | |
| 'parchment-50': '#fdfcf8', | |
| 'parchment-100': '#faf6ec', | |
| 'parchment-200': '#f5ecd6', | |
| 'parchment-300': '#ecd5a8', | |
| 'parchment-400': '#e0bf80', | |
| 'parchment-500': '#d5a85a', | |
| 'parchment-600': '#c08d3e', | |
| 'parchment-700': '#a07032', | |
| 'parchment-800': '#7a552e', | |
| 'parchment-900': '#604628', | |
| 'charcoal-50': '#f4f4f4', | |
| 'charcoal-100': '#e3e3e3', | |
| 'charcoal-200': '#c8c8c8', | |
| 'charcoal-300': '#a4a4a4', | |
| 'charcoal-400': '#818181', | |
| 'charcoal-500': '#666666', | |
| 'charcoal-600': '#515151', | |
| 'charcoal-700': '#434343', | |
| 'charcoal-800': '#383838', | |
| 'charcoal-900': '#1a1a1a', | |
| 'iron-50': '#f6f5f3', | |
| 'iron-100': '#edebe6', | |
| 'iron-200': '#ddd9d0', | |
| 'iron-300': '#c5bfb2', | |
| 'iron-400': '#a9a290', | |
| 'iron-500': '#968d7a', | |
| 'iron-600': '#847b6c', | |
| 'iron-700': '#6d655a', | |
| 'iron-800': '#5c554c', | |
| 'iron-900': '#4a443e', | |
| 'gold-400': '#c4a35a', | |
| 'gold-500': '#b8933e', | |
| 'gold-600': '#a67f2d', | |
| 'gold-700': '#8c6726', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| *, *::before, *::after { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --paper-hue: 42; | |
| --paper-sat: 60%; | |
| --paper-light: 96%; | |
| --ink-hue: 20; | |
| --ink-sat: 15%; | |
| --ink-light: 18%; | |
| --binding-width: 1.5rem; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| scrollbar-width: thin; | |
| scrollbar-color: #c5bfb2 transparent; | |
| } | |
| body { | |
| font-family: 'EB Garamond', Georgia, serif; | |
| background: #edebe6; | |
| color: #2c2520; | |
| overflow-x: hidden; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #c5bfb2; | |
| border-radius: 3px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #a9a290; | |
| } | |
| /* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */ | |
| /* ANIMATIONS */ | |
| /* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */ | |
| @keyframes fadeSlideUp { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes slideFromLeft { | |
| from { opacity: 0; transform: translateX(-30px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| @keyframes gentlePulse { | |
| 0%, 100% { opacity: 0.6; } | |
| 50% { opacity: 1; } | |
| } | |
| @keyframes inkReveal { | |
| from { clip-path: inset(0 100% 0 0); } | |
| to { clip-path: inset(0 0% 0 0); } | |
| } | |
| @keyframes printStroke { | |
| 0% { stroke-dashoffset: 100; } | |
| 100% { stroke-dashoffset: 0; } | |
| } | |
| @keyframes pageTurnIn { | |
| from { opacity: 0; transform: translateX(40px) rotateY(-8deg); } | |
| to { opacity: 1; transform: translateX(0) rotateY(0deg); } | |
| } | |
| @keyframes pageTurnOut { | |
| from { opacity: 1; transform: translateX(0) rotateY(0deg); } | |
| to { opacity: 0; transform: translateX(-40px) rotateY(8deg); } | |
| } | |
| @keyframes ribbonWave { | |
| 0%, 100% { transform: translateX(0) scaleY(1); } | |
| 50% { transform: translateX(-2px) scaleY(1.03); } | |
| } | |
| @keyframes featherDrift { | |
| 0%, 100% { transform: translate(0, 0) rotate(0deg); } | |
| 25% { transform: translate(2px, -3px) rotate(2deg); } | |
| 50% { transform: translate(-1px, -5px) rotate(-1deg); } | |
| 75% { transform: translate(3px, -2px) rotate(1deg); } | |
| } | |
| @keyframes buttonPress { | |
| 0% { transform: translateY(0); } | |
| 50% { transform: translateY(1px); } | |
| 100% { transform: translateY(0); } | |
| } | |
| @keyframes breathing { | |
| 0%, 100% { opacity: 0.45; } | |
| 50% { opacity: 0.65; } | |
| } | |
| @keyframes drawLine { | |
| from { stroke-dashoffset: 200; } | |
| to { stroke-dashoffset: 0; } | |
| } | |
| @keyframes blotSpread { | |
| 0% { transform: scale(0); opacity: 0.8; } | |
| 40% { opacity: 0.5; } | |
| 100% { transform: scale(3); opacity: 0; } | |
| } | |
| @keyframes subtileFade { | |
| 0%, 100% { opacity: 0.7; } | |
| 50% { opacity: 1; } | |
| } | |
| @keyframes warmGlow { | |
| 0%, 100% { box-shadow: 0 0 20px rgba(196, 163, 90, 0.15), 0 0 60px rgba(196, 163, 90, 0.08); } | |
| 50% { box-shadow: 0 0 30px rgba(196, 163, 90, 0.2), 0 0 80px rgba(196, 163, 90, 0.1); } | |
| } | |
| /* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */ | |
| /* BASE COMPONENTS */ | |
| /* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */ | |
| .anim-fade-up { | |
| animation: fadeSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; | |
| } | |
| .anim-fade-in { | |
| animation: fadeIn 0.5s ease-out forwards; | |
| } | |
| .anim-page-turn-in { | |
| animation: pageTurnIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; | |
| } | |
| .anim-ink-reveal { | |
| animation: inkReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; | |
| } | |
| .breathing { | |
| animation: breathing 5s ease-in-out infinite; | |
| } | |
| /* Header */ | |
| .app-header { | |
| backdrop-filter: blur(16px) saturate(1.2); | |
| background: rgba(237, 235, 230, 0.82); | |
| border-bottom: 1px solid rgba(180, 172, 156, 0.18); | |
| } | |
| .header-link { | |
| position: relative; | |
| color: #7a6b5a; | |
| transition: color 0.3s ease; | |
| } | |
| .header-link::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -2px; | |
| left: 0; | |
| width: 0; | |
| height: 1px; | |
| background: #8c6726; | |
| transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1); | |
| } | |
| .header-link:hover { | |
| color: #4a443e; | |
| } | |
| .header-link:hover::after { | |
| width: 100%; | |
| } | |
| .header-link-accent { | |
| background: linear-gradient(135deg, #a07032, #8c6726); | |
| color: #faf6ec; | |
| transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1); | |
| box-shadow: 0 1px 3px rgba(140, 103, 38, 0.15); | |
| } | |
| .header-link-accent:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 0 3px 12px rgba(140, 103, 38, 0.22); | |
| } | |
| /* Sidebar accordion sections */ | |
| .accordion-section { | |
| border: 1px solid rgba(180, 172, 156, 0.2); | |
| border-radius: 14px; | |
| background: rgba(253, 252, 248, 0.7); | |
| overflow: hidden; | |
| transition: border-color 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .accordion-section:hover { | |
| border-color: rgba(196, 163, 90, 0.3); | |
| } | |
| .accordion-section.open { | |
| border-color: rgba(196, 163, 90, 0.4); | |
| box-shadow: 0 2px 16px rgba(140, 103, 38, 0.06); | |
| } | |
| .accordion-header { | |
| cursor: pointer; | |
| user-select: none; | |
| padding: 14px 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| transition: background 0.25s ease; | |
| } | |
| .accordion-header:hover { | |
| background: rgba(196, 163, 90, 0.04); | |
| } | |
| .accordion-icon { | |
| transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); | |
| } | |
| .accordion-section.open .accordion-icon { | |
| transform: rotate(180deg); | |
| } | |
| .accordion-body { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; | |
| opacity: 0; | |
| } | |
| .accordion-section.open .accordion-body { | |
| opacity: 1; | |
| } | |
| /* Form inputs */ | |
| .field-label { | |
| font-size: 0.6875rem; | |
| font-weight: 600; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| color: #968d7a; | |
| margin-bottom: 6px; | |
| } | |
| .input-underline { | |
| width: 100%; | |
| padding: 8px 0; | |
| font-size: 0.9375rem; | |
| font-family: 'EB Garamond', Georgia, serif; | |
| color: #2c2520; | |
| background: transparent; | |
| border: none; | |
| border-bottom: 1px solid #c5bfb2; | |
| outline: none; | |
| transition: border-color 0.3s ease; | |
| } | |
| .input-underline:focus { | |
| border-color: #a07032; | |
| } | |
| .input-underline::placeholder { | |
| color: #a4a4a4; | |
| font-style: italic; | |
| } | |
| textarea.input-underline { | |
| resize: vertical; | |
| min-height: 80px; | |
| } | |
| /* Selects */ | |
| .select-field { | |
| width: 100%; | |
| padding: 8px 28px 8px 12px; | |
| font-size: 0.9375rem; | |
| font-family: 'EB Garamond', Georgia, serif; | |
| color: #2c2520; | |
| background: #fdfcf8; | |
| border: 1px solid #c5bfb2; | |
| border-radius: 8px; | |
| outline: none; | |
| appearance: none; | |
| cursor: pointer; | |
| transition: border-color 0.25s ease, box-shadow 0.25s ease; | |
| 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"); | |
| background-repeat: no-repeat; | |
| background-position: right 8px center; | |
| background-size: 14px; | |
| } | |
| .select-field:hover { | |
| border-color: #a9a290; | |
| } | |
| .select-field:focus { | |
| border-color: #a07032; | |
| box-shadow: 0 0 0 3px rgba(160, 112, 50, 0.08); | |
| } | |
| /* Checkboxes */ | |
| .check-pill { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 7px; | |
| padding: 7px 14px; | |
| font-size: 0.8125rem; | |
| color: #6d655a; | |
| background: #f6f5f3; | |
| border: 1px solid #ddd9d0; | |
| border-radius: 20px; | |
| cursor: pointer; | |
| transition: all 0.25s ease; | |
| user-select: none; | |
| } | |
| .check-pill:hover { | |
| border-color: #c5bfb2; | |
| background: #edebe6; | |
| } | |
| .check-pill.active { | |
| background: #4a443e; | |
| color: #faf6ec; | |
| border-color: #4a443e; | |
| } | |
| .check-pill input { | |
| display: none; | |
| } | |
| .check-pill .dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: #c5bfb2; | |
| transition: background 0.25s ease; | |
| } | |
| .check-pill.active .dot { | |
| background: #c4a35a; | |
| } | |
| /* Range slider */ | |
| .range-track { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 100%; | |
| height: 3px; | |
| background: #ddd9d0; | |
| border-radius: 2px; | |
| outline: none; | |
| cursor: pointer; | |
| } | |
| .range-track::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 16px; | |
| height: 16px; | |
| background: #a07032; | |
| border: 2.5px solid #faf6ec; | |
| border-radius: 50%; | |
| box-shadow: 0 1px 5px rgba(140, 103, 38, 0.25); | |
| cursor: pointer; | |
| transition: transform 0.2s ease, box-shadow 0.2s ease; | |
| } | |
| .range-track::-webkit-slider-thumb:hover { | |
| transform: scale(1.15); | |
| box-shadow: 0 2px 10px rgba(140, 103, 38, 0.3); | |
| } | |
| .range-track::-moz-range-thumb { | |
| width: 16px; | |
| height: 16px; | |
| background: #a07032; | |
| border: 2.5px solid #faf6ec; | |
| border-radius: 50%; | |
| box-shadow: 0 1px 5px rgba(140, 103, 38, 0.25); | |
| cursor: pointer; | |
| } | |
| /* File upload */ | |
| .file-zone { | |
| border: 2px dashed #c5bfb2; | |
| border-radius: 12px; | |
| padding: 28px 20px; | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .file-zone:hover { | |
| border-color: #a07032; | |
| background: rgba(196, 163, 90, 0.04); | |
| } | |
| .file-zone.drag-over { | |
| border-color: #a07032; | |
| background: rgba(196, 163, 90, 0.08); | |
| } | |
| /* Buttons */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| padding: 10px 24px; | |
| font-size: 0.875rem; | |
| font-family: 'EB Garamond', Georgia, serif; | |
| font-weight: 500; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1); | |
| border: none; | |
| outline: none; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn:active { | |
| animation: buttonPress 0.15s ease; | |
| } | |
| .btn-primary { | |
| background: #2c2520; | |
| color: #faf6ec; | |
| box-shadow: 0 1px 4px rgba(44, 37, 32, 0.2); | |
| } | |
| .btn-primary:hover { | |
| background: #38302a; | |
| box-shadow: 0 3px 14px rgba(44, 37, 32, 0.25); | |
| transform: translateY(-1px); | |
| } | |
| .btn-gold { | |
| background: linear-gradient(145deg, #b8933e, #a07032); | |
| color: #fdfcf8; | |
| box-shadow: 0 1px 4px rgba(140, 103, 38, 0.2); | |
| } | |
| .btn-gold:hover { | |
| box-shadow: 0 3px 16px rgba(140, 103, 38, 0.3); | |
| transform: translateY(-1px); | |
| } | |
| .btn-subtle { | |
| background: transparent; | |
| color: #847b6c; | |
| border: 1px solid #c5bfb2; | |
| } | |
| .btn-subtle:hover { | |
| color: #4a443e; | |
| border-color: #a9a290; | |
| background: #f6f5f3; | |
| } | |
| .btn-ghost { | |
| background: transparent; | |
| color: #847b6c; | |
| border: none; | |
| } | |
| .btn-ghost:hover { | |
| color: #4a443e; | |
| background: #f6f5f3; | |
| } | |
| /* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */ | |
| /* BOOK PAGE STYLES */ | |
| /* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */ | |
| .book-spine { | |
| position: absolute; | |
| left: 50%; | |
| top: 0; | |
| bottom: 0; | |
| width: 2px; | |
| background: linear-gradient(180deg, rgba(180, 170, 150, 0.15), rgba(180, 170, 150, 0.35), rgba(180, 170, 150, 0.15)); | |
| transform: translateX(-50%); | |
| z-index: 5; | |
| pointer-events: none; | |
| } | |
| .page-inner { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| background: hsl(var(--paper-hue), var(--paper-sat), var(--paper-light)); | |
| overflow: hidden; | |
| } | |
| .page-header { | |
| border-bottom: 0.75px solid rgba(130, 115, 95, 0.15); | |
| padding-bottom: 12px; | |
| margin-bottom: 24px; | |
| } | |
| .page-footer { | |
| border-top: 0.75px solid rgba(130, 115, 95, 0.15); | |
| padding-top: 10px; | |
| margin-top: auto; | |
| } | |
| .drop-cap { | |
| float: left; | |
| font-family: 'UnifrakturMaguntia', cursive; | |
| font-size: 3.8em; | |
| line-height: 0.78; | |
| margin-right: 6px; | |
| margin-top: 4px; | |
| color: #2c2520; | |
| user-select: none; | |
| } | |
| .ornament-rule { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| margin: 20px 0; | |
| opacity: 0.3; | |
| } | |
| .ornament-rule-line { | |
| height: 0.5px; | |
| background: #968d7a; | |
| flex: 1; | |
| max-width: 60px; | |
| } | |
| .ornament-rule-center { | |
| width: 10px; | |
| height: 10px; | |
| border: 0.5px solid #968d7a; | |
| transform: rotate(45deg); | |
| } | |
| /* Page size modes */ | |
| .size-paperback .book-surface { | |
| max-width: 580px; | |
| } | |
| .size-hardcover .book-surface { | |
| max-width: 620px; | |
| } | |
| .size-pamphlet .book-surface { | |
| max-width: 460px; | |
| } | |
| .size-folio .book-surface { | |
| max-width: 760px; | |
| } | |
| /* Font size modes */ | |
| .text-tiny { font-size: 12.5px; line-height: 1.7; } | |
| .text-small { font-size: 14.5px; line-height: 1.75; } | |
| .text-medium { font-size: 17px; line-height: 1.8; } | |
| .text-large { font-size: 20px; line-height: 1.85; } | |
| .text-great { font-size: 24px; line-height: 1.9; } | |
| /* Distress effects via CSS filters on SVG */ | |
| .filter-distress-1 .page-inner { filter: url(#distress1); } | |
| .filter-distress-2 .page-inner { filter: url(#distress2); } | |
| .filter-sepia .page-inner { filter: sepia(0.15) saturate(0.95); } | |
| .filter-warm .page-inner { filter: sepia(0.08) saturate(1.1); } | |
| .filter-cool .page-inner { filter: hue-rotate(-8deg) saturate(0.9); } | |
| /* Running header/footer */ | |
| .running-head { | |
| font-size: 0.65rem; | |
| letter-spacing: 0.12em; | |
| text-transform: uppercase; | |
| color: rgba(100, 90, 75, 0.5); | |
| font-family: 'EB Garamond', serif; | |
| } | |
| .page-number { | |
| font-variant-numeric: oldstyle-nums; | |
| font-family: 'EB Garamond', serif; | |
| color: rgba(100, 90, 75, 0.5); | |
| } | |
| /* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */ | |
| /* SECTION DIVIDER */ | |
| /* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */ | |
| .section-separator { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 14px; | |
| padding: 2rem 0; | |
| opacity: 0.3; | |
| } | |
| .section-separator .sep-line { | |
| height: 0.5px; | |
| background: linear-gradient(90deg, transparent, #968d7a, transparent); | |
| flex: 1; | |
| max-width: 80px; | |
| } | |
| .section-separator .sep-diamond { | |
| width: 6px; | |
| height: 6px; | |
| border: 0.5px solid #968d7a; | |
| transform: rotate(45deg); | |
| } | |
| /* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */ | |
| /* COVER DECORATION */ | |
| /* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */ | |
| .cover-frame { | |
| position: relative; | |
| border: 1.5px solid rgba(196, 163, 90, 0.35); | |
| border-radius: 2px; | |
| } | |
| .cover-frame::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 6px; | |
| border: 0.5px solid rgba(196, 163, 90, 0.18); | |
| pointer-events: none; | |
| } | |
| .cover-frame::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 12px; | |
| border: 0.5px solid rgba(196, 163, 90, 0.1); | |
| pointer-events: none; | |
| } | |
| .corner-ornament { | |
| position: absolute; | |
| width: 18px; | |
| height: 18px; | |
| border: 0.5px solid rgba(196, 163, 90, 0.3); | |
| pointer-events: none; | |
| } | |
| .corner-ornament.tl { top: 14px; left: 14px; border-right: none; border-bottom: none; } | |
| .corner-ornament.tr { top: 14px; right: 14px; border-left: none; border-bottom: none; } | |
| .corner-ornament.bl { bottom: 14px; left: 14px; border-right: none; border-top: none; } | |
| .corner-ornament.br { bottom: 14px; right: 14px; border-left: none; border-top: none; } | |
| /* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */ | |
| /* PRINT OVERLAY */ | |
| /* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */ | |
| .print-overlay { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 200; | |
| background: rgba(26, 22, 18, 0.88); | |
| backdrop-filter: blur(6px); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.5s ease; | |
| } | |
| .print-overlay.visible { | |
| opacity: 1; | |
| pointer-events: all; | |
| } | |
| .print-drum { | |
| width: 280px; | |
| height: 4px; | |
| background: rgba(180, 170, 156, 0.15); | |
| border-radius: 2px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .print-drum-fill { | |
| height: 100%; | |
| width: 0; | |
| background: linear-gradient(90deg, #c4a35a, #d5a85a); | |
| border-radius: 2px; | |
| transition: width 0.1s linear; | |
| } | |
| /* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */ | |
| /* COUNTER STYLES */ | |
| /* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */ | |
| .digit-roll { | |
| display: inline-block; | |
| transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); | |
| } | |
| /* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */ | |
| /* TYPOGRAPHY HELPERS */ | |
| /* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */ | |
| .hanging-indent { | |
| text-indent: -1em; | |
| padding-left: 1em; | |
| } | |
| .oldstyle-nums { | |
| font-variant-numeric: oldstyle-nums; | |
| } | |
| .lining-nums { | |
| font-variant-numeric: lining-nums; | |
| } | |
| .swash { | |
| font-feature-settings: "swsh" 1; | |
| } | |
| .kern { | |
| font-feature-settings: "kern" 1; | |
| } | |
| /* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */ | |
| /* PARALLAX & NOISE BACKGROUND */ | |
| /* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */ | |
| .noise-overlay { | |
| position: fixed; | |
| inset: 0; | |
| pointer-events: none; | |
| z-index: 0; | |
| opacity: 0.018; | |
| 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"); | |
| background-size: 200px 200px; | |
| } | |
| /* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */ | |
| /* SIDEBAR HERO ART */ | |
| /* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */ | |
| .sidebar-hero { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .sidebar-hero::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 40px; | |
| background: linear-gradient(0deg, rgba(253, 252, 248, 0.85), transparent); | |
| pointer-events: none; | |
| } | |
| /* Quill illustration decorative */ | |
| .quill-deco { | |
| animation: featherDrift 8s ease-in-out infinite; | |
| } | |
| /* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */ | |
| /* BREADCRUMB / PATH DISPLAY */ | |
| /* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */ | |
| .path-display { | |
| font-family: 'EB Garamond', serif; | |
| font-size: 0.75rem; | |
| color: #a4a4a4; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| letter-spacing: 0.02em; | |
| } | |
| /* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */ | |
| /* RESPONSIVE */ | |
| /* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */ | |
| @media (max-width: 1024px) { | |
| .book-surface { max-width: 100% ; } | |
| .page-body { padding: 1.75rem 2rem ; } | |
| } | |
| @media (max-width: 640px) { | |
| .page-body { padding: 1.25rem 1.5rem ; } | |
| .cover-frame { padding: 1.5rem ; } | |
| } | |
| /* Print styles */ | |
| @media print { | |
| .app-header, .sidebar-panel, .no-print, .print-overlay { display: none ; } | |
| .book-preview { overflow: visible ; height: auto ; } | |
| .book-surface { box-shadow: none ; border: 1px solid #ddd; max-width: 100% ; } | |
| .page-inner { break-inside: avoid; } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Noise texture overlay --> | |
| <div class="noise-overlay"></div> | |
| <!-- SVG Filters for distress effects --> | |
| <svg style="position:absolute; width:0; height:0; overflow:hidden;"> | |
| <defs> | |
| <filter id="distress1"> | |
| <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="3" result="noise"/> | |
| <feDisplacementMap in="SourceGraphic" in2="noise" scale="1.5" xChannelSelector="R" yChannelSelector="G"/> | |
| <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"/> | |
| </filter> | |
| <filter id="distress2"> | |
| <feTurbulence type="fractalNoise" baseFrequency="0.06" numOctaves="4" result="noise"/> | |
| <feDisplacementMap in="SourceGraphic" in2="noise" scale="3" xChannelSelector="R" yChannelSelector="G"/> | |
| <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"/> | |
| </filter> | |
| <filter id="inkBlot"> | |
| <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="5" result="turbulence"/> | |
| <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="8" xChannelSelector="R" yChannelSelector="G"/> | |
| </filter> | |
| <filter id="paperTexture"> | |
| <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" result="noise"/> | |
| <feBlend in="SourceGraphic" in2="noise" mode="multiply" result="blend"/> | |
| </filter> | |
| </defs> | |
| </svg> | |
| <!-- βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ --> | |
| <!-- PRINT OVERLAY --> | |
| <!-- βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ --> | |
| <div id="printOverlay" class="print-overlay"> | |
| <div class="text-center"> | |
| <div class="mb-8"> | |
| <svg class="quill-deco mx-auto" width="48" height="48" viewBox="0 0 48 48" fill="none"> | |
| <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"/> | |
| <path d="M12 38L8 42M12 38L16 42" stroke="#c4a35a" stroke-width="1.5" opacity="0.5"/> | |
| </svg> | |
| </div> | |
| <p class="font-cormorant italic text-xl text-parchment-300 mb-6">The press is inking the type...</p> | |
| <div class="print-drum"> | |
| <div class="print-drum-fill" id="printDrumFill"></div> | |
| </div> | |
| <p class="font-eb-garamond text-sm text-parchment-500 mt-4 oldstyle-nums" id="printPercent">0 pages composed</p> | |
| </div> | |
| </div> | |
| <!-- βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ --> | |
| <!-- HEADER --> | |
| <!-- βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ --> | |
| <header class="app-header fixed top-0 left-0 right-0 z-50"> | |
| <div class="max-w-[1600px] mx-auto px-6 lg:px-10 h-14 flex items-center justify-between"> | |
| <!-- Left: Logo --> | |
| <div class="flex items-center gap-3"> | |
| <svg width="32" height="32" viewBox="0 0 32 32" fill="none" class="flex-shrink-0"> | |
| <rect x="4" y="2" width="24" height="28" rx="2" fill="#2c2520"/> | |
| <rect x="6" y="4" width="20" height="24" rx="1" fill="#faf6ec"/> | |
| <line x1="9" y1="9" x2="23" y2="9" stroke="#2c2520" stroke-width="0.75"/> | |
| <line x1="9" y1="12" x2="20" y2="12" stroke="#2c2520" stroke-width="0.5" opacity="0.5"/> | |
| <line x1="9" y1="15" x2="21" y2="15" stroke="#2c2520" stroke-width="0.5" opacity="0.5"/> | |
| <line x1="9" y1="18" x2="19" y2="18" stroke="#2c2520" stroke-width="0.5" opacity="0.5"/> | |
| <rect x="9" y="22" width="8" height="2" rx="1" fill="#a07032"/> | |
| </svg> | |
| <div> | |
| <span class="font-playfair font-bold text-base text-charcoal-900 tracking-tight leading-none block">CLI Printing Press</span> | |
| <span class="text-[0.625rem] text-charcoal-400 tracking-[0.2em] uppercase font-medium">Book Impression Engine</span> | |
| </div> | |
| </div> | |
| <!-- Center: Subtle navigation --> | |
| <nav class="hidden md:flex items-center gap-8"> | |
| <a href="#" class="header-link text-xs tracking-widest uppercase font-medium" onclick="scrollToSection('manuscript')">Manuscript</a> | |
| <a href="#" class="header-link text-xs tracking-widest uppercase font-medium" onclick="scrollToSection('typography')">Typography</a> | |
| <a href="#" class="header-link text-xs tracking-widest uppercase font-medium" onclick="scrollToSection('print')">Impression</a> | |
| </nav> | |
| <!-- Right: Built with badge --> | |
| <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"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </header> | |
| <!-- βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ --> | |
| <!-- MAIN LAYOUT --> | |
| <!-- βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ --> | |
| <div class="pt-14 min-h-screen flex flex-col lg:flex-row"> | |
| <!-- Sidebar --> | |
| <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);"> | |
| <!-- Sidebar hero illustration --> | |
| <div class="sidebar-hero px-7 pt-8 pb-4"> | |
| <div class="flex items-center gap-4"> | |
| <svg width="56" height="56" viewBox="0 0 56 56" fill="none" class="flex-shrink-0"> | |
| <!-- Press frame --> | |
| <rect x="8" y="6" width="40" height |