haiany
/
huashu-design
mirror of https://github.com/alchaincyf/huashu-design.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1200">
<title>Claude Code Agent - Build Studio Style</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap" rel="stylesheet">
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    width: 1200px;
    height: 510px;
    overflow: hidden;
    margin: 0;
    background: #FAFAF8;
    font-family: 'Inter', sans-serif;
    position: relative;
  }

  /* Subtle top gradient wash */
  .wash {
    position: absolute;
    top: 0;
    left: 0;
    width: 1200px;
    height: 510px;
    background: radial-gradient(ellipse 800px 400px at 30% 40%, rgba(212, 165, 116, 0.06) 0%, transparent 70%);
    z-index: 0;
  }

  /* Main layout */
  .layout {
    position: absolute;
    top: 0;
    left: 0;
    width: 1200px;
    height: 510px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
  }

  .center-block {
    text-align: center;
    max-width: 700px;
    margin-top: -24px; /* slight upward shift for golden ratio vertical center */
  }

  /* Floating "Agent" */
  .floating-agent {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 128px;
    letter-spacing: -4px;
    color: #1A1A18;
    line-height: 1;
    margin-bottom: 16px;
    position: relative;
  }

  .floating-agent span {
    position: relative;
    display: inline-block;
  }

  /* Slight weight shift on first letter for visual interest */
  .floating-agent .accent-letter {
    font-weight: 300;
    color: #2A2A28;
  }

  /* Gold underline accent */
  .gold-line {
    width: 48px;
    height: 1px;
    background: #D4A574;
    margin: 0 auto 32px;
    opacity: 0.7;
  }

  /* Subtitle — label tier: smallest text, widest spacing */
  .subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: #B0ACA4;
    margin-bottom: 24px;
  }

  /* Description line — body tier */
  .desc {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 13px;
    color: #A8A4A0;
    letter-spacing: 0.3px;
    line-height: 2;
    max-width: 400px;
    margin: 0 auto;
  }

  /* Minimal agent indicators — 8 thin vertical lines */
  .agent-indicators {
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 16px;
    align-items: flex-end;
    z-index: 2;
  }

  .indicator {
    width: 1px;
    background: #D8D4CE;
    border-radius: 0.5px;
  }

  .indicator.gold {
    background: #D4A574;
    width: 1.5px;
    opacity: 0.8;
  }

  /* Corner marks */
  .corner-mark {
    position: absolute;
    z-index: 2;
  }

  .corner-mark svg {
    display: block;
  }

  .corner-tl { top: 48px; left: 48px; }
  .corner-br { bottom: 48px; right: 48px; transform: rotate(180deg); }

  /* Side text */
  .side-label {
    position: absolute;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 8px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #CBC7C0;
    z-index: 2;
  }

  .side-left {
    left: 48px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center center;
  }

  .side-right {
    right: 48px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: center center;
  }

  /* Removed shadow-card — Build purity demands uninterrupted whitespace */

  /* Number 8 whisper */
  .number-whisper {
    position: absolute;
    top: 48px;
    right: 96px;
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 24px;
    color: #D4A574;
    opacity: 0.35;
    z-index: 2;
  }
</style>
</head>
<body>

  <div class="wash"></div>

  <!-- Corner marks -->
  <div class="corner-mark corner-tl">
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 0L0 20" stroke="#D4A574" stroke-width="0.5" opacity="0.4"/>
      <path d="M0 0L20 0" stroke="#D4A574" stroke-width="0.5" opacity="0.4"/>
    </svg>
  </div>
  <div class="corner-mark corner-br">
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 0L0 20" stroke="#D4A574" stroke-width="0.5" opacity="0.4"/>
      <path d="M0 0L20 0" stroke="#D4A574" stroke-width="0.5" opacity="0.4"/>
    </svg>
  </div>

  <!-- Side labels -->
  <div class="side-label side-left">Claude Code</div>
  <div class="side-label side-right">Parallel Workflow</div>

  <!-- Number whisper -->
  <div class="number-whisper">8</div>

  <!-- Main content -->
  <div class="layout">
    <div class="center-block">
      <div class="subtitle">Parallel Architecture</div>
      <div class="floating-agent"><span><span class="accent-letter">A</span>gent</span></div>
      <div class="gold-line"></div>
      <div class="desc">
        Eight autonomous agents orchestrated in parallel,<br>
        each solving a distinct piece of the whole.
      </div>
    </div>
  </div>

  <!-- Agent indicators -->
  <div class="agent-indicators">
    <div class="indicator" style="height: 20px;"></div>
    <div class="indicator" style="height: 28px;"></div>
    <div class="indicator gold" style="height: 36px;"></div>
    <div class="indicator" style="height: 22px;"></div>
    <div class="indicator" style="height: 32px;"></div>
    <div class="indicator gold" style="height: 40px;"></div>
    <div class="indicator" style="height: 24px;"></div>
    <div class="indicator" style="height: 30px;"></div>
  </div>

</body>
</html>