Spaces:
Running
Running
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>WARDROBE AS SELF-REGULATOR | 穿搭自我调节装置</title> | |
| <!-- Import Icons Library --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* | |
| * GLOBAL VARIABLES & RESET | |
| * Soft Functionalism Aesthetic | |
| */ | |
| :root { | |
| --bg-body: #F9F9F9; | |
| --text-main: #333333; | |
| --text-sub: #666666; | |
| /* Athflow Palette */ | |
| --athflow-bg: #E0E4E8; | |
| --athflow-accent: #8C9BA5; | |
| --athflow-highlight: #C4A484; | |
| /* Minimalist Palette */ | |
| --minimal-bg: #F5F5F5; | |
| --minimal-accent: #333333; | |
| --minimal-highlight: #666666; | |
| /* Y2K Palette */ | |
| --y2k-bg: #FFFFFF; | |
| --y2k-accent: #FF69B4; | |
| --y2k-highlight: #00FF00; /* Neon Green */ | |
| --y2k-shadow: #ff69b440; | |
| /* UI Elements */ | |
| --border-radius-card: 16px; | |
| --border-radius-btn: 50px; | |
| --transition-speed: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| --shadow-soft: 0 10px 30px rgba(0,0,0,0.05); | |
| --shadow-hover: 0 15px 40px rgba(0,0,0,0.1); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| } | |
| body { | |
| background-color: var(--bg-body); | |
| color: var(--text-main); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| a { text-decoration: none; color: inherit; } | |
| ul { list-style: none; } | |
| /* | |
| * HEADER SECTION (A1) | |
| * Gradient: Light Gray -> Beige | |
| */ | |
| header { | |
| background: linear-gradient(135deg, #E0E4E8 0%, #F5F5F0 100%); | |
| padding: 4rem 2rem; | |
| text-align: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| /* Header Texture Overlay */ | |
| header::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; width: 100%; height: 100%; | |
| background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.05' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E"); | |
| opacity: 0.5; | |
| } | |
| .header-content { | |
| position: relative; | |
| z-index: 2; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .brand-link { | |
| display: inline-block; | |
| margin-bottom: 1rem; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| color: #4CAF50; /* Mint Green */ | |
| background: rgba(255,255,255,0.6); | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| backdrop-filter: blur(5px); | |
| transition: transform 0.2s; | |
| } | |
| .brand-link:hover { transform: scale(1.05); } | |
| h1 { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| letter-spacing: -1px; | |
| margin-bottom: 1rem; | |
| color: #222; | |
| } | |
| .subtitle { | |
| font-size: 1.1rem; | |
| color: var(--text-sub); | |
| font-weight: 300; | |
| } | |
| /* | |
| * CORE MODES SECTION (B1-B3) | |
| * Horizontal 3-column layout | |
| */ | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| } | |
| .modes-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 2rem; | |
| margin-top: -3rem; /* Overlap header slightly */ | |
| position: relative; | |
| z-index: 3; | |
| } | |
| .mode-card { | |
| background: #fff; | |
| border-radius: var(--border-radius-card); | |
| padding: 2rem; | |
| box-shadow: var(--shadow-soft); | |
| transition: var(--transition-speed); | |
| cursor: pointer; | |
| position: relative; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| border: 1px solid rgba(0,0,0,0.02); | |
| } | |
| .mode-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: var(--shadow-hover); | |
| } | |
| /* Card Visuals (CSS Illustrations) */ | |
| .card-visual { | |
| width: 120px; | |
| height: 120px; | |
| margin-bottom: 1.5rem; | |
| position: relative; | |
| transition: var(--transition-speed); | |
| } | |
| .visual-shape { | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 3rem; | |
| color: #fff; | |
| } | |
| /* Specific Styles per Mode */ | |
| /* B1: Athflow */ | |
| .mode-card.athflow { border-top: 4px solid var(--athflow-accent); } | |
| .mode-card.athflow .visual-shape { background: linear-gradient(135deg, var(--athflow-accent), var(--athflow-bg)); } | |
| .mode-card.athflow h3 { color: var(--athflow-accent); } | |
| .mode-card.athflow .tag { background: var(--athflow-bg); color: var(--athflow-accent); } | |
| /* B2: Minimalist */ | |
| .mode-card.minimal { border-top: 4px solid var(--minimal-accent); } | |
| .mode-card.minimal .visual-shape { background: linear-gradient(135deg, #333, #666); } | |
| .mode-card.minimal h3 { color: var(--minimal-accent); } | |
| .mode-card.minimal .tag { background: var(--minimal-bg); color: var(--minimal-accent); } | |
| /* B3: Y2K */ | |
| .mode-card.y2k { border-top: 4px solid var(--y2k-accent); } | |
| .mode-card.y2k .visual-shape { | |
| background: #fff; | |
| color: var(--y2k-accent); | |
| box-shadow: 0 0 15px var(--y2k-accent); | |
| } | |
| .mode-card.y2k h3 { color: var(--y2k-accent); } | |
| .mode-card.y2k .tag { background: var(--y2k-accent); color: #fff; box-shadow: 0 4px 10px var(--y2k-shadow); } | |
| /* Card Content */ | |
| .mode-card h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .tag { | |
| font-size: 0.8rem; | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| margin-bottom: 1rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .card-desc { | |
| text-align: center; | |
| font-size: 0.9rem; | |
| color: var(--text-sub); | |
| margin-bottom: 1rem; | |
| } | |
| .interaction-hint { | |
| font-size: 0.75rem; | |
| color: #aaa; | |
| margin-top: auto; | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| opacity: 0; | |
| transform: translateY(10px); | |
| transition: var(--transition-speed); | |
| } | |
| .mode-card:hover .interaction-hint { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* | |
| * MECHANISM SECTION (C1-C3) | |
| * Accordion / Collapsible Panels | |
| */ | |
| .mechanism-panel { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.5s ease-in-out, opacity 0.3s ease; | |
| opacity: 0; | |
| background: #fff; | |
| margin-top: 1rem; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 15px rgba(0,0,0,0.03); | |
| } | |
| .mechanism-panel.active { | |
| max-height: 500px; /* Arbitrary large height */ | |
| opacity: 1; | |
| padding: 1.5rem; | |
| border-top: 1px solid #eee; | |
| } | |
| .mechanism-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .mech-item { | |
| display: flex; | |
| gap: 1rem; | |
| align-items: flex-start; | |
| } | |
| .mech-icon { | |
| min-width: 30px; | |
| height: 30px; | |
| background: #f0f0f0; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.8rem; | |
| color: #555; | |
| } | |
| .mech-text h4 { | |
| font-size: 0.9rem; | |
| margin-bottom: 0.2rem; | |
| } | |
| .mech-text p { | |
| font-size: 0.8rem; | |
| color: #666; | |
| } | |
| /* | |
| * CONCLUSION SECTION (D1) | |
| * Control Knobs | |
| */ | |
| .conclusion-section { | |
| margin-top: 4rem; | |
| padding: 3rem 2rem; | |
| background: #fff; | |
| border-radius: 20px; | |
| text-align: center; | |
| box-shadow: var(--shadow-soft); | |
| } | |
| .knob-container { | |
| display: flex; | |
| justify-content: center; | |
| gap: 3rem; | |
| margin-top: 2rem; | |
| flex-wrap: wrap; | |
| } | |
| .knob-wrapper { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 1rem; | |
| cursor: pointer; | |
| transition: transform 0.2s; | |
| } | |
| .knob-wrapper:hover { | |
| transform: scale(1.05); | |
| } | |
| .knob { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| background: #eee; | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| color: #ccc; | |
| transition: all 0.3s ease; | |
| box-shadow: inset 0 2px 5px rgba(0,0,0,0.1); | |
| } | |
| .knob::after { | |
| content: ''; | |
| position: absolute; | |
| top: 5px; | |
| left: 50%; | |
| width: 4px; | |
| height: 30%; | |
| background: currentColor; | |
| transform: translateX(-50%); | |
| border-radius: 2px; | |
| } | |
| .knob-label { | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| color: #999; | |
| } | |
| /* Active States for Knobs */ | |
| .knob-wrapper[data-mode="athflow"].active .knob { | |
| background: var(--athflow-accent); | |
| color: #fff; | |
| box-shadow: 0 0 20px var(--athflow-accent); | |
| } | |
| .knob-wrapper[data-mode="athflow"].active .knob-label { color: var(--athflow-accent); } | |
| .knob-wrapper[data-mode="minimal"].active .knob { | |
| background: var(--minimal-accent); | |
| color: #fff; | |
| box-shadow: 0 0 20px var(--minimal-accent); | |
| } | |
| .knob-wrapper[data-mode="minimal"].active .knob-label { color: var(--minimal-accent); } | |
| .knob-wrapper[data-mode="y2k"].active .knob { | |
| background: var(--y2k-accent); | |
| color: #fff; | |
| box-shadow: 0 0 20px var(--y2k-accent); | |
| } | |
| .knob-wrapper[data-mode="y2k"].active .knob-label { color: var(--y2k-accent); } | |
| /* Synergy Highlight Effect on Cards */ | |
| .mode-card.dimmed { | |
| opacity: 0.3; | |
| filter: grayscale(100%); | |
| pointer-events: none; | |
| } | |
| .mode-card.highlighted { | |
| transform: scale(1.05); | |
| border: 2px solid; | |
| z-index: 10; | |
| } | |
| .mode-card.athflow.highlighted { border-color: var(--athflow-accent); } | |
| .mode-card.minimal.highlighted { border-color: var(--minimal-accent); } | |
| .mode-card.y2k.highlighted { border-color: var(--y2k-accent); } | |
| /* Responsive Design */ | |
| @media (max-width: 900px) { | |
| .modes-grid { | |
| grid-template-columns: 1fr; | |
| margin-top: 2rem; | |
| } | |
| h1 { font-size: 2rem; } | |
| .knob-container { gap: 2rem; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- A1: Header Section --> | |
| <header> | |
| <div class="header-content"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="brand-link"> | |
| <i class="fas fa-code"></i> Built with anycoder | |
| </a> | |
| <h1>WARDROBE AS SELF-REGULATOR</h1> | |
| <p class="subtitle">穿搭是自我调节装置 · 情绪×职业×城市的三重平衡术</p> | |
| </div> | |
| </header> | |
| <main class="container"> | |
| <!-- B & C: Core Modes & Mechanisms --> | |
| <section class="modes-grid"> | |
| <!-- B1/C1: Athflow --> | |
| <article class="mode-card athflow" id="card-athflow" onclick="togglePanel('athflow')"> | |
| <div class="card-visual"> | |
| <div class="visual-shape"> | |
| <i class="fas fa-tshirt"></i> | |
| </div> | |
| </div> | |
| <h3>Athflow</h3> | |
| <div class="tag">舒适护盾</div> | |
| <p class="card-desc">宽松西装 + 针织衫 + 阔腿裤</p> | |
| <div class="interaction-hint"> | |
| <i class="fas fa-mouse-pointer"></i> 点击查看详情 | |
| </div> | |
| <!-- C1 Mechanism Panel --> | |
| <div class="mechanism-panel" id="panel-athflow"> | |
| <div class="mechanism-content"> | |
| <div class="mech-item"> | |
| <div class="mech-icon"><i class="fas fa-brain"></i></div> | |
| <div class="mech-text"> | |
| <h4>情绪修复机制</h4> | |
| <p>柔和色彩（灰/靛蓝）→ 降低皮质醇分泌，营造“情绪缓冲带”。</p> | |
| </div> | |
| </div> | |
| <div class="mech-item"> | |
| <div class="mech-icon"><i class="fas fa-briefcase"></i></div> | |
| <div class="mech-text"> | |
| <h4>职业场景适配</h4> | |
| <p>低刺激材质避免过度兴奋，适应“自闭症儿童互动”等高压场景。</p> | |
| </div> | |
| </div> | |
| <div class="mech-item"> | |
| <div class="mech-icon"><i class="fas fa-city"></i></div> | |
| <div class="mech-text"> | |
| <h4>城市趋势佐证</h4> | |
| <p>上海 2021 街拍数据 → Athflow 占比 42%，城市接纳度高。</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </article> | |
| <!-- B2/C2: Minimalist --> | |
| <article class="mode-card minimal" id="card-minimal" onclick="togglePanel('minimal')"> | |
| <div class="card-visual"> | |
| <div class="visual-shape"> | |
| <i class="fas fa-layer-group"></i> | |
| </div> | |
| </div> | |
| <h3>极简中性</h3> | |
| <div class="tag">边界重建</div> | |
| <p class="card-desc">Oversized 衬衫 + 直筒裤</p> | |
| <div class="interaction-hint"> | |
| <i class="fas fa-mouse-pointer"></i> 点击查看详情 | |
| </div> | |
| <!-- C2 Mechanism Panel --> | |
| <div class="mechanism-panel" id="panel-minimal"> | |
| <div class="mechanism-content"> | |
| <div class="mech-item"> | |
| <div class="mech-icon"><i class="fas fa-shield-alt"></i></div> | |
| <div class="mech-text"> | |
| <h4>边界加固逻辑</h4> | |
| <p>去性化剪裁 → 建立物理与心理的安全距离，减少社交凝视。</p> | |
| </div> | |
| </div> | |
| <div class="mech-item"> | |
| <div class="mech-icon"><i class="fas fa-ruler-combined"></i></div> | |
| <div class="mech-text"> | |
| <h4>结构美学</h4> | |
| <p>挺括线条传递“结构稳定感”，强化职业权威与理性。</p> | |
| </div> | |
| </div> | |
| <div class="mech-item"> | |
| <div class="mech-icon"><i class="fas fa-palette"></i></div> | |
| <div class="mech-text"> | |
| <h4>艺术表达</h4> | |
| <p>黑白灰的极致运用，将个人情绪隐藏于色彩之后。</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </article> | |
| <!-- B3/C3: Y2K --> | |
| <article class="mode-card y2k" id="card-y2k" onclick="togglePanel('y2k')"> | |
| <div class="card-visual"> | |
| <div class="visual-shape"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| </div> | |
| <h3>Y2K 复古</h3> | |
| <div class="tag">自我重启</div> | |
| <p class="card-desc">露脐上衣 + 迷你裙</p> | |
| <div class="interaction-hint"> | |
| <i class="fas fa-mouse-pointer"></i> 点击查看详情 | |
| </div> | |
| <!-- C3 Mechanism Panel --> | |
| <div class="mechanism-panel" id="panel-y2k"> | |
| <div class="mechanism-content"> | |
| <div class="mech-item"> | |
| <div class="mech-icon"><i class="fas fa-fire"></i></div> | |
| <div class="mech-text"> | |
| <h4>反羞耻机制</h4> | |
| <p>高饱和色与露肤度 → 对抗社会规训，释放被压抑的生命力。</p> | |
| </div> | |
| </div> | |
| <div class="mech-item"> | |
| <div class="mech-icon"><i class="fas fa-clock"></i></div> | |
| <div class="mech-text"> | |
| <h4>分时着装管理</h4> | |
| <p>明确区分“工作模式”与“自我时间”，通过视觉冲击切换状态。</p> | |
| </div> | |
| </div> | |
| <div class="mech-item"> | |
| <div class="mech-icon"><i class="fas fa-camera-retro"></i></div> | |
| <div class="mech-text"> | |
| <h4>视觉冲击感</h4> | |
| <p>金属反光与荧光色，在数字时代重申身体的存在感。</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </article> | |
| </section> | |
| <!-- D1: Conclusion / Control Knobs --> | |
| <section class="conclusion-section"> | |
| <h2>协同调节系统</h2> | |
| <p style="color: #666; margin-top: 0.5rem;">点击旋钮激活对应模式，观察穿搭系统的动态平衡</p> | |
| <div class="knob-container"> | |
| <!-- Knob 1 --> | |
| <div class="knob-wrapper" data-mode="athflow" onclick="activateMode('athflow')"> | |
| <div class="knob"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <div class="knob-label">舒适护盾</div> | |
| </div> | |
| <!-- Knob 2 --> | |
| <div class="knob-wrapper" data-mode="minimal" onclick="activateMode('minimal')"> | |
| <div class="knob"> | |
| <i class="fas fa-vector-square"></i> | |
| </div> | |
| <div class="knob-label">边界重建</div> | |
| </div> | |
| <!-- Knob 3 --> | |
| <div class="knob-wrapper" data-mode="y2k" onclick="activateMode('y2k')"> | |
| <div class="knob"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <div class="knob-label">自我重启</div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <script> | |
| // State Management | |
| const state = { | |
| activeMode: null | |
| }; | |
| /** | |
| * Toggle Mechanism Panel (C1-C3) | |
| * Triggered by clicking the card | |
| */ | |
| function togglePanel(mode) { | |
| const panel = document.getElementById(`panel-${mode}`); | |
| const isActive = panel.classList.contains('active'); | |
| // Close all other panels first for cleaner UI | |
| document.querySelectorAll('.mechanism-panel').forEach(p => { | |
| p.classList.remove('active'); | |
| }); | |
| if (!isActive) { | |
| panel.classList.add('active'); | |
| } | |
| } | |
| /** | |
| * Activate Mode via Knobs (D1) | |
| * Handles the synergy logic: Highlight active, dim others, open panel | |
| */ | |
| function activateMode(mode) { | |
| // If clicking the already active mode, toggle it off | |
| if (state.activeMode === mode) { | |
| resetAll(); | |
| return; | |
| } | |
| state.activeMode = mode; | |
| // 1. Reset Knob UI | |
| document.querySelectorAll('.knob-wrapper').forEach(wrapper => { | |
| wrapper.classList.remove('active'); | |
| }); | |
| document.querySelector(`.knob-wrapper[data-mode="${mode}"]`).classList.add('active'); | |
| // 2. Card Highlighting Logic | |
| const cards = document.querySelectorAll('.mode-card'); | |
| cards.forEach(card => { | |
| card.classList.remove('highlighted', 'dimmed'); | |
| }); | |
| const activeCard = document.getElementById(`card-${mode}`); | |
| if (activeCard) { | |
| activeCard.classList.add('highlighted'); | |
| // Scroll to card if on mobile | |
| if (window.innerWidth < 900) { | |
| activeCard.scrollIntoView({ behavior: 'smooth', block: 'center' }); | |
| } | |
| // Auto open the mechanism panel for the active mode | |
| togglePanel(mode); | |
| } | |
| } | |
| function resetAll() { | |
| state.activeMode = null; | |
| document.querySelectorAll('.knob-wrapper').forEach(w => w.classList.remove('active')); | |
| document.querySelectorAll('.mode-card').forEach(c => { | |
| c.classList.remove('highlighted', 'dimmed'); | |
| }); | |
| document.querySelectorAll('.mechanism-panel').forEach(p => p.classList.remove('active')); | |
| } | |
| // Add hover logic for "Lighting up" effect described in PRD | |
| const cards = document.querySelectorAll('.mode-card'); | |
| cards.forEach(card => { | |
| card.addEventListener('mouseenter', () => { | |
| // Visual feedback logic could go here (e.g., sound or complex animation) | |
| // For now, CSS hover handles the visual change | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |