Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TEXTIME / ADVENTUM | Concept #2 Deep Dive</title> | |
| <meta name="description" content="Interactive Brand Book and Design System for Textile Premium"> | |
| <!-- Google Fonts --> | |
| <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=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Lora:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500;600;700&display=swap" | |
| rel="stylesheet"> | |
| <!-- FontAwesome Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| /* TEXTILE PREMIUM PALETTE */ | |
| --bg-off-white: #FDFBF7; | |
| --bg-cream: #F5F0E6; | |
| --accent-warm: #F26522; | |
| --accent-sand: #D7CCC8; | |
| --text-dark: #2C2C2C; | |
| --text-grey: #5D5D5D; | |
| --accent-gold: #D4AF37; | |
| /* UI VARIABLES */ | |
| --primary: #2C2C2C; | |
| --secondary: #757575; | |
| --accent: #F26522; | |
| --success: #558B2F; | |
| --radius: 16px; | |
| --shadow: 0 10px 30px rgba(44, 44, 44, 0.08); | |
| --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--bg-off-white); | |
| color: var(--text-dark); | |
| line-height: 1.7; | |
| overflow-x: hidden; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: inherit; | |
| } | |
| ul { | |
| list-style: none; | |
| } | |
| /* --- HEADER & NAVIGATION --- */ | |
| header { | |
| background: var(--bg-off-white); | |
| padding: 1.5rem 5%; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05); | |
| border-bottom: 1px solid #eee; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| .brand-header { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 1.5rem; | |
| } | |
| .logo-main { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 2rem; | |
| font-weight: 700; | |
| letter-spacing: -0.5px; | |
| color: var(--primary); | |
| } | |
| .logo-sub { | |
| font-family: 'Inter', sans-serif; | |
| font-size: 0.85rem; | |
| text-transform: uppercase; | |
| letter-spacing: 3px; | |
| color: var(--secondary); | |
| font-weight: 500; | |
| } | |
| .attribution-container { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .attribution { | |
| font-size: 0.75rem; | |
| color: var(--secondary); | |
| text-decoration: none; | |
| opacity: 0.7; | |
| transition: opacity 0.3s; | |
| padding: 5px 10px; | |
| border-radius: 20px; | |
| background: rgba(0, 0, 0, 0.03); | |
| } | |
| .attribution:hover { | |
| opacity: 1; | |
| background: rgba(0, 0, 0, 0.05); | |
| color: var(--accent); | |
| } | |
| nav { | |
| display: flex; | |
| gap: 10px; | |
| overflow-x: auto; | |
| padding-bottom: 5px; | |
| flex: 1; | |
| justify-content: center; | |
| } | |
| .nav-pill { | |
| padding: 0.6rem 1.5rem; | |
| background: white; | |
| border-radius: 50px; | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| color: var(--secondary); | |
| border: 1px solid #eee; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02); | |
| white-space: nowrap; | |
| } | |
| .nav-pill:hover { | |
| border-color: var(--accent); | |
| color: var(--accent); | |
| } | |
| .nav-pill.active { | |
| background: var(--primary); | |
| color: white; | |
| border-color: var(--primary); | |
| box-shadow: var(--shadow); | |
| } | |
| /* --- MAIN LAYOUT --- */ | |
| main { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 3rem 5%; | |
| display: grid; | |
| grid-template-columns: 300px 1fr; | |
| gap: 3rem; | |
| } | |
| /* SIDEBAR NAVIGATION */ | |
| .sidebar { | |
| position: sticky; | |
| top: 100px; | |
| height: fit-content; | |
| } | |
| .sidebar-section { | |
| margin-bottom: 2.5rem; | |
| } | |
| .sidebar-title { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 1.5rem; | |
| color: var(--primary); | |
| margin-bottom: 1rem; | |
| border-bottom: 2px solid var(--accent); | |
| padding-bottom: 0.5rem; | |
| } | |
| .menu-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| padding: 1rem; | |
| color: var(--secondary); | |
| cursor: pointer; | |
| border-radius: 12px; | |
| transition: var(--transition); | |
| font-size: 0.95rem; | |
| border: 1px solid transparent; | |
| } | |
| .menu-item:hover { | |
| background: rgba(242, 101, 34, 0.05); | |
| color: var(--accent); | |
| padding-left: 1.5rem; | |
| border-color: rgba(242, 101, 34, 0.1); | |
| } | |
| .menu-item i { | |
| width: 24px; | |
| text-align: center; | |
| color: var(--accent); | |
| } | |
| /* CONTENT AREA */ | |
| .content-area { | |
| animation: fadeIn 0.6s ease-out; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .page-header { | |
| margin-bottom: 3rem; | |
| } | |
| .page-header h1 { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 3.5rem; | |
| line-height: 1.1; | |
| color: var(--primary); | |
| margin-bottom: 1rem; | |
| letter-spacing: -1px; | |
| } | |
| .page-header p { | |
| font-size: 1.2rem; | |
| color: var(--text-grey); | |
| max-width: 700px; | |
| line-height: 1.6; | |
| } | |
| /* CARDS & GRIDS */ | |
| .grid-3 { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2.5rem; | |
| margin-bottom: 4rem; | |
| } | |
| .card { | |
| background: white; | |
| border-radius: var(--radius); | |
| padding: 2.5rem; | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| border: 1px solid #f0f0f0; | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12); | |
| } | |
| .card h3 { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 1.8rem; | |
| margin-bottom: 1rem; | |
| color: var(--primary); | |
| } | |
| .card p { | |
| color: var(--text-grey); | |
| line-height: 1.8; | |
| } | |
| /* PALETTE VISUALIZER */ | |
| .palette-grid { | |
| display: flex; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| margin-top: 1rem; | |
| } | |
| .swatch { | |
| flex: 1; | |
| min-width: 120px; | |
| height: 150px; | |
| border-radius: 12px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-end; | |
| padding: 1.5rem; | |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); | |
| transition: var(--transition); | |
| position: relative; | |
| } | |
| .swatch:hover { | |
| transform: scale(1.02); | |
| box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); | |
| } | |
| .swatch-light { | |
| background-color: var(--bg-off-white); | |
| border: 1px solid #eee; | |
| } | |
| .swatch-cream { | |
| background-color: var(--bg-cream); | |
| } | |
| .swatch-dark { | |
| background-color: var(--text-dark); | |
| color: white; | |
| } | |
| .swatch-accent { | |
| background-color: var(--accent); | |
| color: white; | |
| } | |
| .swatch-sand { | |
| background-color: var(--accent-sand); | |
| } | |
| .swatch-gold { | |
| background-color: var(--accent-gold); | |
| color: var(--text-dark); | |
| } | |
| .color-code { | |
| font-size: 0.9rem; | |
| font-weight: 700; | |
| background: rgba(255, 255, 255, 0.9); | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| width: fit-content; | |
| display: inline-block; | |
| margin-bottom: 5px; | |
| } | |
| /* TYPOGRAPHY DEMO */ | |
| .typo-demo { | |
| background: var(--bg-off-white); | |
| padding: 3rem; | |
| border-radius: 12px; | |
| margin-top: 2rem; | |
| position: relative; | |
| border: 1px solid #f0f0f0; | |
| } | |
| .typo-demo::before { | |
| content: "Hierarchy Preview"; | |
| position: absolute; | |
| top: -12px; | |
| left: 20px; | |
| background: white; | |
| padding: 0 10px; | |
| font-size: 0.8rem; | |
| color: var(--secondary); | |
| font-weight: 600; | |
| } | |
| .font-playfair { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .font-lora { | |
| font-family: 'Lora', serif; | |
| } | |
| .font-inter { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| /* --- CONCEPT 2: MEDIA TEMPLATES (The 18 Items) --- */ | |
| .media-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .template-card { | |
| background: white; | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .template-header { | |
| background: var(--bg-cream); | |
| padding: 1.5rem; | |
| border-bottom: 1px solid #e0dcd5; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .template-header h4 { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 1.4rem; | |
| color: var(--primary); | |
| } | |
| .status-badge { | |
| font-size: 0.75rem; | |
| background: var(--accent); | |
| color: white; | |
| padding: 4px 10px; | |
| border-radius: 20px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .template-preview { | |
| height: 200px; | |
| background: #f9f9f9; | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| overflow: hidden; | |
| } | |
| .template-preview i { | |
| font-size: 5rem; | |
| color: #ddd; | |
| opacity: 0.5; | |
| } | |
| .template-content { | |
| padding: 2rem; | |
| flex-grow: 1; | |
| } | |
| .template-meta { | |
| font-size: 0.85rem; | |
| color: var(--accent); | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .content-bullet { | |
| font-size: 0.95rem; | |
| margin-bottom: 0.8rem; | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 0.8rem; | |
| color: var(--text-grey); | |
| line-height: 1.5; | |
| } | |
| .content-bullet i { | |
| color: var(--accent); | |
| margin-top: 2px; | |
| flex-shrink: 0; | |
| } | |
| .emphasize-text { | |
| font-family: 'Playfair Display', serif; | |
| font-style: italic; | |
| color: var(--primary); | |
| font-weight: 500; | |
| } | |
| /* --- PROMPT GENERATOR --- */ | |
| .prompt-container { | |
| background: #1a1a1a; | |
| border-radius: var(--radius); | |
| padding: 2.5rem; | |
| color: #eee; | |
| font-family: 'Courier New', monospace; | |
| position: relative; | |
| box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); | |
| border: 1px solid #333; | |
| } | |
| .prompt-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 2rem; | |
| border-bottom: 1px solid #333; | |
| padding-bottom: 1rem; | |
| } | |
| .prompt-header h3 { | |
| color: var(--accent); | |
| font-family: 'Inter'; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| } | |
| .prompt-header span { | |
| font-size: 0.8rem; | |
| color: #666; | |
| } | |
| .prompt-controls { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1.5rem; | |
| margin-bottom: 2rem; | |
| background: #252525; | |
| padding: 1.5rem; | |
| border-radius: 12px; | |
| } | |
| .form-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .form-group label { | |
| font-size: 0.9rem; | |
| color: #aaa; | |
| font-family: 'Inter'; | |
| } | |
| select, | |
| input { | |
| width: 100%; | |
| padding: 12px; | |
| background: #333; | |
| border: 1px solid #444; | |
| color: white; | |
| border-radius: 6px; | |
| font-family: 'Inter', sans-serif; | |
| transition: 0.3s; | |
| } | |
| select:focus, | |
| input:focus { | |
| outline: none; | |
| border-color: var(--accent); | |
| } | |
| .generate-btn { | |
| width: 100%; | |
| padding: 16px; | |
| background: var(--accent); | |
| color: white; | |
| border: none; | |
| border-radius: 8px; | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| font-size: 1rem; | |
| font-family: 'Inter'; | |
| } | |
| .generate-btn:hover { | |
| background: #d65616; | |
| transform: translateY(-2px); | |
| } | |
| .generate-btn:active { | |
| transform: translateY(0); | |
| } | |
| .generated-result { | |
| background: #111; | |
| padding: 2rem; | |
| border-radius: 8px; | |
| border-left: 4px solid var(--accent); | |
| white-space: pre-wrap; | |
| font-size: 0.95rem; | |
| line-height: 1.6; | |
| max-height: 200px; | |
| overflow-y: auto; | |
| color: #ddd; | |
| margin-top: 1rem; | |
| } | |
| .copy-btn { | |
| margin-top: 10px; | |
| background: #333; | |
| color: #fff; | |
| border: none; | |
| padding: 8px 16px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-size: 0.8rem; | |
| transition: 0.2s; | |
| } | |
| .copy-btn:hover { | |
| background: #444; | |
| } | |
| /* --- STORYBOARD (Video) --- */ | |
| .storyboard-timeline { | |
| display: flex; | |
| gap: 2rem; | |
| overflow-x: auto; | |
| padding-bottom: 3rem; | |
| margin-top: 2rem; | |
| scroll-behavior: smooth; | |
| } | |
| .scene { | |
| min-width: 300px; | |
| height: 350px; | |
| background: white; | |
| border-radius: 12px; | |
| box-shadow: var(--shadow); | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| border: 1px solid #eee; | |
| } | |
| .scene-time { | |
| background: var(--primary); | |
| color: white; | |
| padding: 1rem; | |
| font-size: 0.9rem; | |
| font-weight: 700; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .scene-visual { | |
| flex-grow: 1; | |
| background: #eee; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .scene-visual img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| opacity: 0.9; | |
| transition: 0.5s; | |
| } | |
| .scene-visual:hover img { | |
| opacity: 1; | |
| transform: scale(1.1); | |
| } | |
| .scene-desc { | |
| padding: 1.5rem; | |
| background: #f9f9f9; | |
| border-top: 1px solid #eee; | |
| } | |
| .scene-desc h5 { | |
| font-family: 'Playfair Display', serif; | |
| color: var(--primary); | |
| margin-bottom: 0.5rem; | |
| } | |
| .scene-desc p { | |
| font-size: 0.85rem; | |
| color: var(--text-grey); | |
| line-height: 1.5; | |
| } | |
| /* --- NAVIGATION SYSTEM --- */ | |
| .nav-module { | |
| display: flex; | |
| align-items: center; | |
| gap: 2rem; | |
| padding: 2.5rem; | |
| background: white; | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow); | |
| margin-bottom: 2rem; | |
| border: 1px solid #eee; | |
| flex-wrap: wrap; | |
| } | |
| .nav-icon-box { | |
| width: 120px; | |
| height: 120px; | |
| background: var(--bg-cream); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 3rem; | |
| color: var(--primary); | |
| border: 2px dashed #bbb; | |
| flex-shrink: 0; | |
| } | |
| .nav-details { | |
| flex-grow: 1; | |
| } | |
| .nav-details h4 { | |
| font-family: 'Playfair Display', serif; | |
| color: var(--primary); | |
| margin-bottom: 0.5rem; | |
| font-size: 1.5rem; | |
| } | |
| .nav-details p { | |
| color: var(--text-grey); | |
| line-height: 1.6; | |
| } | |
| /* RESPONSIVE DESIGN */ | |
| @media (max-width: 900px) { | |
| main { | |
| grid-template-columns: 1fr; | |
| } | |
| .sidebar { | |
| display: none; | |
| } | |
| /* Simple hide for mobile to focus on content */ | |
| .palette-grid { | |
| flex-direction: column; | |
| } | |
| .prompt-controls { | |
| grid-template-columns: 1fr; | |
| } | |
| .page-header h1 { | |
| font-size: 2.5rem; | |
| } | |
| } | |
| @media (max-width: 600px) { | |
| .logo-main { | |
| font-size: 1.5rem; | |
| } | |
| nav { | |
| flex-direction: column; | |
| width: 100%; | |
| } | |
| .nav-pill { | |
| width: 100%; | |
| text-align: center; | |
| } | |
| .nav-pill.active { | |
| width: 100%; | |
| } | |
| } | |
| /* Utility for empty images in storyboard */ | |
| .placeholder-visual { | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%); | |
| font-size: 4rem; | |
| color: #bbb; | |
| } | |
| /* TAB HIDE/SHOW LOGIC */ | |
| .page-section { | |
| display: none; | |
| animation: fadeIn 0.5s ease-out; | |
| } | |
| .page-section.active { | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="brand-header"> | |
| <div> | |
| <span class="logo-main">TEXTIME / ADVENTUM</span> | |
| <span class="logo-sub">Stand Constructor</span> | |
| </div> | |
| </div> | |
| <nav> | |
| <a href="#" class="nav-pill active" data-target="brandbook" onclick="switchTab('brandbook', this, event)">Brand | |
| Book</a> | |
| <a href="#" class="nav-pill" data-target="media" onclick="switchTab('media', this, event)">18 Media Templates</a> | |
| <a href="#" class="nav-pill" data-target="prompts" onclick="switchTab('prompts', this, event)">Midjourney AI</a> | |
| <a href="#" class="nav-pill" data-target="video" onclick="switchTab('video', this, event)">Video Storyboard</a> | |
| <a href="#" class="nav-pill" data-target="nav" onclick="switchTab('nav', this, event)">Navigation System</a> | |
| </nav> | |
| <div class="attribution-container"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="attribution"> | |
| <i class="fa-solid fa-code"></i> Built with anycoder | |
| </a> | |
| </div> | |
| </header> | |
| <main> | |
| <!-- Sidebar Navigation --> | |
| <aside class="sidebar"> | |
| <div class="sidebar-section"> | |
| <div class="sidebar-title">Concept #2: Tactile Luxury</div> | |
| <div class="menu-item" onclick="switchTab('brandbook', document.querySelector('.nav-pill[data-target='brandbook']'), event)"> | |
| <i class="fa-solid fa-palette"></i> Palette & Typography | |
| </div> | |
| <div class="menu-item" onclick="switchTab('media', document.querySelector('.nav-pill[data-target='media']'), event)"> | |
| <i class="fa-solid fa-image"></i> 18 Media Templates | |
| </div> | |
| <div class="menu-item" onclick="switchTab('prompts', document.querySelector('.nav-pill[data-target='prompts']'), event)"> | |
| <i class="fa-solid fa-wand-magic-sparkles"></i> AI Generators | |
| </div> | |
| <div class="menu-item" onclick="switchTab('video', document.querySelector('.nav-pill[data-target='video']'), event)"> | |
| <i class="fa-solid fa-film"></i> Video Layout | |
| </div> | |
| <div class="menu-item" onclick="switchTab('nav', document.querySelector('.nav-pill[data-target='nav']'), event)"> | |
| <i class="fa-solid fa-map-location-dot"></i> Signage System | |
| </div> | |
| </div> | |
| <div class="sidebar-section"> | |
| <div class="sidebar-title">Key Constraints</div> | |
| <div class="card" style="background: #fff8e1; border: 1px solid #fff59d;"> | |
| <h4 style="color: #f57f17; margin-bottom: 10px; font-family: 'Inter';"> | |
| <i class="fa-solid fa-triangle-exclamation"></i> Do Not Use | |
| </h4> | |
| <ul style="color: #856404; font-size: 0.9rem; padding-left: 1.2rem; line-height: 1.6;"> | |
| <li><strong>Dark backgrounds:</strong> Black/Grey dominant</li> | |
| <li><strong>Green tones:</strong> Even forest green</li> | |
| <li><strong>Harsh fonts:</strong> Sans-serif for headlines</li> | |
| <li><strong>Clutter:</strong> Overcrowded layouts</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="sidebar-section"> | |
| <div class="sidebar-title">Quick Stats</div> | |
| <div class="card"> | |
| <div style="display: flex; justify-content: space-between; margin-bottom: 10px;"> | |
| <span style="color: var(--secondary)">Total Templates</span> | |
| <strong style="font-family: 'Playfair Display'">18</strong> | |
| </div> | |
| <div style="display: flex; justify-content: space-between; margin-bottom: 10px;"> | |
| <span style="color: var(--secondary)">Video Duration</span> | |
| <strong style="font-family: 'Playfair Display'">60s</strong> | |
| </div> | |
| <div style="display: flex; justify-content: space-between;"> | |
| <span style="color: var(--secondary)">Primary Material</span> | |
| <strong style="font-family: 'Playfair Display'">Textile</strong> | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Content Area --> | |
| <div class="content-area"> | |
| <!-- SECTION: BRAND BOOK --> | |
| <section id="brandbook" class="page-section active"> | |
| <div class="page-header"> | |
| <h1>Brand Book: Textile Premium</h1> | |
| <p> | |
| Comprehensive guidelines for Concept #2. Focusing on softness, luxury, materiality, and tactile感受. | |
| This book covers the design strategy for a stand that feels like a premium textile showroom rather than a | |
| technical factory booth. | |
| </p> | |
| </div> | |
| <div class="grid-3"> | |
| <!-- 1. Palette --> | |
| <div class="card"> | |
| <h3>1. Textile Palette</h3> | |
| <p>The color scheme mimics unbleached cotton, warm paper, and natural dyes. The Brand Orange (#F26522) is | |
| retained as a "Call to Action" accent to ensure lead generation elements stand out against the soft | |
| background.</p> | |
| <div class="palette-grid"> | |
| <div class="swatch swatch-light"> | |
| <div class="color-code">#FDFBF7</div> | |
| <small style="opacity: 0.8; display:block;">Background - Paper texture feel</small> | |
| </div> | |
| <div class="swatch swatch-cream"> | |
| <div class="color-code">#F5F0E6</div> | |
| <small style="opacity: 0.8; display:block;">Cards - Warmth</small> | |
| </div> | |
| <div class="swatch swatch-dark"> | |
| <div class="color-code">#2C2C2C</div> | |
| <small style="opacity: 0.8; display:block;">Headings - Depth</small> | |
| </div> | |
| <div class="swatch swatch-accent"> | |
| <div class="color-code">#F26522</div> | |
| <small style="opacity: 0.8; display:block;">Buttons - Energy</small> | |
| </div> | |
| <div class="swatch swatch-sand"> | |
| <div class="color-code">#D7CCC8</div> | |
| <small style="opacity: 0.8; display:block;">Borders - Texture</small> | |
| </div> | |
| <div class="swatch swatch-gold"> | |
| <div class="color-code">#D4AF37</div> | |
| <small style="opacity: 0.8; display:block;">VIP - Luxury</small> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 2. Typography --> | |
| <div class="card"> | |
| <h3>2. Typography Hierarchy</h3> | |
| <p>The choice of fonts creates an immediate association with high-end fashion catalogs and premium | |
| stationary.</p> | |
| <div class="typo-demo"> | |
| <h1 class="font-playfair" style="font-size: 3rem; letter-spacing: -1px;">TEXTIME</h1> | |
| <p class="font-inter" style="text-transform: uppercase; letter-spacing: 4px; color: var(--accent);"> | |
| Adventum Production</p> | |
| <hr style="border: 0; border-top: 1px solid #ccc; margin: 2rem 0;"> | |
| <h2 class="font-playfair" style="font-size: 2rem; font-style: italic;">The Sensation of Fabric</h2> | |
| <p class="font-lora" style="font-size: 1.1rem; line-height: 1.6;"> | |
| "Every thread tells a story. Our production in Tula combines traditional craftsmanship with modern | |
| technology, delivering solutions that feel as good as they look." | |
| </p> | |
| <div class="font-inter" style="margin-top: 2rem; font-weight: 700; color: var(--accent);">> DISCOVER THE | |
| COLLECTION</div> | |
| </div> | |
| <ul style="margin-top: 1.5rem;"> | |
| <li style="margin-bottom: 0.5rem;"><strong>Headlines:</strong> Playfair Display (Serif, Elegant)</li> | |
| <li style="margin-bottom: 0.5rem;"><strong>Body Text:</strong> Lora (Serif, Readable, Warm)</li> | |
| <li style="margin-bottom: 0.5rem;"><strong>Technical/Nav:</strong> Inter (Sans-Serif, Clarity)</li> | |
| </ul> | |
| </div> | |
| <!-- 3. Grid & Layout --> | |
| <div class="card"> | |
| <h3>3. Organic Grid System</h3> | |
| <p>Unlike the rigid "Clean Industrial" grid, this system uses fluid columns and generous whitespace to mimic | |
| the flow of fabric.</p> | |
| <div | |
| style="background: var(--bg-off-white); padding: 20px; border-radius: 8px; margin-top:1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border: 1px solid var(--accent-sand);"> | |
| <div | |
| style="height: 150px; background: white; border-radius: 20px; box-shadow: 5px 5px 0px var(--accent-sand);"> | |
| </div> | |
| <div | |
| style="height: 150px; background: white; border-radius: 20px 0px 20px 0px; box-shadow: 5px 5px 0px var(--accent-sand);"> | |
| </div> | |
| <div | |
| style="height: 150px; background: white; border-radius: 0px 20px 0px 20px; box-shadow: 5px 5px 0px var(--accent-sand);"> | |
| </div> | |
| <div | |
| style="height: 150px; background: white; border-radius: 20px; box-shadow: 5px 5px 0px var(--accent-sand);"> | |
| </div> | |
| </div> | |
| <p style="margin-top: 1rem; font-size: 0.9rem; color: var(--text-grey);"> | |
| <strong>Principle:</strong> Asymmetrical balance. Images often bleed into whitespace. Text wraps | |
| organically around visual "hero" elements like macro shots of fabric. | |
| </p> | |
| </div> | |
| <!-- 4. Do & Don't --> | |
| <div class="card" style="border-top: 5px solid var(--primary);"> | |
| <h3>4. Design Do's & Don'ts</h3> | |
| <div class="grid-3" style="gap: 1rem; margin-top: 1rem;"> | |
| <div style="background: #e8f5e9; padding: 1rem; border-radius: 8px;"> | |
| <h5 style="color: var(--success); font-family: 'Inter'; margin-bottom: 0.5rem;"> | |
| <i class="fa-solid fa-check"></i> DO: Texture | |
| </h5> | |
| <p style="font-size: 0.85rem;">Use subtle paper grain or fabric texture in backgrounds (5-10% opacity). | |
| </p> | |
| </div> | |
| <div style="background: #e8f5e9; padding: 1rem; border-radius: 8px;"> | |
| <h5 style="color: var(--success); font-family: 'Inter'; margin-bottom: 0.5rem;"> | |
| <i class="fa-solid fa-check"></i> DO: Soft Edges | |
| </h5> | |
| <p style="font-size: 0.85rem;">Rounded corners (24px radius) for all cards and buttons.</p> | |
| </div> | |
| <div style="background: #ffebee; padding: 1rem; border-radius: 8px; border: 1px solid #ef9a9a;"> | |
| <h5 style="color: #c62828; font-family: 'Inter'; margin-bottom: 0.5rem;"> | |
| <i class="fa-solid fa-xmark"></i> DON'T: Dark Walls | |
| </h5> | |
| <p style="font-size: 0.85rem;">Never use black or dark grey as a dominant color. It kills the premium | |
| feel.</p> | |
| </div> | |
| <div style="background: #ffebee; padding: 1rem; border-radius: 8px; border: 1px solid #ef9a9a;"> | |
| <h5 style="color: #c62828; font-family: 'Inter'; margin-bottom: 0.5rem;"> | |
| <i class="fa-solid fa-xmark"></i> DON'T: Tech Jargon | |
| </h5> | |
| <p style="font-size: 0.85rem;">Replace "Technical Spec" with "Sensory Benefit" (e.g., "Water Repellent" | |
| vs "Hydrophobic Coating").</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SECTION: 18 MEDIA TEMPLATES --> | |
| <section id="media" class="page-section"> | |
| <div class="page-header"> | |
| <h1>18 Media Templates</h1> | |
| <p>Detailed breakdown of every single medium used in the stand. From the Main Freize to the floor stickers. | |
| This system ensures brand consistency across all touchpoints.</p> | |
| </div> | |
| <div class="media-grid"> | |
| <!-- Template 1: Main Freize --> | |
| <div class="template-card" id="template-1"> | |
| <div class="template-header"> | |
| <h4>01. Main Freize (8m x 5m)</h4> | |
| <span class="status-badge">Priority: HIGH</span> | |
| </div> | |
| <div class="template-preview"> | |
| <i class="fa-solid fa-layer-group"></i> | |
| </div> | |
| <div class="template-content"> | |
| <span class="template-meta">Visual Concept: Organic Flow</span> | |
| <h4 style="margin-bottom: 10px; font-family: 'Inter';">Layout Description</h4> | |
| <ul class="content-bullets"> | |
| <li class="content-bullet"><i class="fa-solid fa-quote-right"></i> <strong>Center:</strong> Large serif | |
| "TEXTIME" logo in #2C2C2C with subtle shadow depth.</li> | |
| <li class="content-bullet"><i class="fa-solid fa-quote-right"></i> <strong>Background:</strong> Abstract | |
| watercolor wash in Cream & Sand tones.</li> | |
| <li class="content-bullet"><i class="fa-solid fa-quote-right"></i> <strong>Bottom:</strong> "Tula | |
| Production" visual with macro fabric texture overlay.</li> | |
| <li class="content-bullet"><i class="fa-solid fa-quote-right"></i> <strong>Material:</strong> Backlight | |
| Fabric Banner. Lighting: Warm LED panels.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Template 2: Reception --> | |
| <div class="template-card"> | |
| <div class="template-header"> | |
| <h4>02. Reception Desk (x2)</h4> | |
| <span class="status-badge">Priority: HIGH</span> | |
| </div> | |
| <div class="template-preview" style="background: #D7CCC8;"> | |
| <i class="fa-solid fa-chess-queen"></i> | |
| </div> | |
| <div class="template-content"> | |
| <span class="template-meta">Visual Concept: Tactile Luxury</span> | |
| <h4 style="margin-bottom: 10px; font-family: 'Inter';">Layout Description</h4> | |
| <ul class="content-bullets"> | |
| <li class="content-bullet"><i class="fa-solid fa-quote-right"></i> <strong>Top:</strong> Logo embossed | |
| in gold foil (#D4AF37) on cream acrylic.</li> | |
| <li class="content-bullet"><i class="fa-solid fa-quote-right"></i> <strong>Surface:</strong> Real stone | |
| texture (marble look) or premium laminate.</li> | |
| <li class="content-bullet"><i class="fa-solid fa-quote-right"></i> <strong>Content:</strong> "Welcome to | |
| the World of Textime" in Playfair Display Italic.</li> | |
| <li class="content-bullet"><i class="fa-solid fa-quote-right"></i> <strong>Accessories:</strong> Wood | |
| tray for brochures, ceramic dish for cards.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Template 3: VIP Backdrop --> | |
| <div class="template-card"> | |
| <div class="template-header"> | |
| <h4>03. VIP Lounge Backdrop (4m x 3m)</h4> | |
| <span class="status-badge">Priority: HIGH</span> | |
| </div> | |
| <div class="template-preview" style="background: radial-gradient(circle, #F5F0E6 0%, #E0D5C6 100%);"> | |
| <i class="fa-solid fa-couch"></i> | |
| </div> | |
| <div class="template-content"> | |
| <span class="template-meta">Visual Concept: Soft Environment</span> | |
| <h4 style="margin-bottom: 10px; font-family: 'Inter';">Layout Description</h4> | |
| <ul class="content-bullets"> | |
| <li class="content-bullet"><i class="fa-solid fa-quote-right"></i> <strong>Center:</strong> Large | |
| photograph of a luxurious interior made with Textime fabrics.</li> | |
| <li class="content-bullet"><i class="fa-solid fa-quote-right"></i> <strong>Overlay:</strong> Text: | |
| "Designed for Comfort. Engineered for Life."</li> | |
| <li class="content-bullet"><i class="fa-solid fa-quote-right"></i> <strong>Lighting:</strong> Recessed | |
| spotlights highlighting fabric texture.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Template 4: DRYTEX --> | |
| <div class="template-card"> | |
| <div class="template-header"> | |
| <h4>04. DRYTEX Technology Wall</h4> | |
| <span class="status-badge">Priority: HIGH</span> | |
| </div> | |
| <div class="template-preview" style="background: #fff; border: 1px solid #ddd;"> | |
| <div style="text-align:center; padding-top: 2rem;"> | |
| <i class="fa-solid fa-droplet" style="font-size: 6rem; color: #4fc3f7;"></i> | |
| </div> | |
| </div> | |
| <div class="template-content"> | |
| <span class="template-meta">Visual Concept: Technical Elegance</span> | |
| <h4 style="margin-bottom: 10px; font-family: 'Inter';">Layout Description</h4> | |
| <ul class="content-bullets"> | |
| <li class="content-bullet"><i class="fa-solid fa-quote-right"></i> <strong>Visual:</strong> Macro photo | |
| of a water droplet beading up on a surface.</li> | |
| <li class="content-bullet"><i class="fa-solid fa-quote-right"></i> <strong>Text:</strong> "DRYTEX: The | |
| Invisible Shield" in clean Inter font.</li> | |
| <li class="content-bullet"><i class="fa-solid fa-quote-right"></i> <strong>Icons:</strong> 4 small | |
| rounded icons explaining properties (Water, UV, Tear, Cold).</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Template 5-8: Columns --> | |
| <div class="template-card"> | |
| <div class="template-header"> | |
| <h4>05-08. Modular Columns (x4)</h4> | |
| <span class="status-badge">Priority: MED</span> | |
| </div> | |
| <div class="template-preview" style="background: #eee;"> | |
| <div style="width: 50px; height: 100%; background: var(--primary); border-radius: 50px; opacity: 0.1;"> | |
| </div> | |
| </div> | |
| <div class="template-content"> | |
| <span class="template-meta">Visual Concept: Content Hubs</span> | |
| <h4 style="margin-bottom: 10px; font-family: 'Inter';">Layout Description</h4> | |
| <ul class="content-bullets"> | |
| <li class="content-bullet"><i class="fa-solid fa-quote-right"></i> <strong>Shape:</strong> Cylindrical | |
| wrapping graphics with soft edges.</li> | |
| <li class="content-bullet"><i class="fa-solid fa-quote-right"></i> <strong>Content:</strong> "6 | |
| Directions" circular infographic guiding the visitor journey.</li> | |
| <li class="content-bullet"><i class="fa-solid fa-quote-right"></i> <strong>Colors:</strong> Each column | |
| has a distinct pastel accent (Pink, Blue, Yellow, Green-Gray).</li> | |
| <li class="content-bullet"><i class="fa-solid fa-quote-right"></i> <strong>Material:</strong> Removable | |
| vinyl with matte finish for easy installation.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Template 9-14: Touch Zones --> | |
| <div class |