game-cards-poker-design/.superpowers/brainstorm/screen/architecture-overview.html

<h2><EFBFBD>˿<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ƹ<EFBFBD><EFBFBD><EFBFBD>ϵͳ - <20><><EFBFBD>ļܹ<C4BC></h2>
<p class="subtitle"><EFBFBD><EFBFBD><EFBFBD>˴<EFBFBD><EFBFBD>㿪ʼ<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>˿<EFBFBD><EFBFBD><EFBFBD>ϵ<EFBFBD><EFBFBD></p>

<div class="section">
  <h3>ϵͳ<EFBFBD><EFBFBD><EFBFBD>Ĺ<EFBFBD><EFBFBD><EFBFBD>ģ<EFBFBD><EFBFBD></h3>
  
  <div class="cards">
    <div class="card" data-choice="upload" onclick="toggleSelect(this)">
      <div class="card-image">
        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px; text-align: center; color: white; border-radius: 8px;">
          <div style="font-size: 48px; margin-bottom: 10px;">??</div>
          <div style="font-size: 14px; font-weight: 600;">ͼ<EFBFBD><EFBFBD><EFBFBD>ϴ<EFBFBD></div>
        </div>
      </div>
      <div class="card-body">
        <h3>ͼ<EFBFBD><EFBFBD><EFBFBD>زĹ<EFBFBD><EFBFBD><EFBFBD></h3>
        <p><EFBFBD>ϴ<EFBFBD><EFBFBD><EFBFBD>ɫͼ<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>塢JQK<EFBFBD><EFBFBD><EFBFBD>񡢴<EFBFBD>С<EFBFBD><EFBFBD>ͼƬ<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ͼ<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ز<EFBFBD></p>
      </div>
    </div>
    
    <div class="card" data-choice="design" onclick="toggleSelect(this)">
      <div class="card-image">
        <div style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); padding: 40px; text-align: center; color: white; border-radius: 8px;">
          <div style="font-size: 48px; margin-bottom: 10px;">??</div>
          <div style="font-size: 14px; font-weight: 600;">ʵʱ<EFBFBD><EFBFBD><EFBFBD><EFBFBD></div>
        </div>
      </div>
      <div class="card-body">
        <h3><EFBFBD><EFBFBD><EFBFBD>ӻ<EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ʊ༭<EFBFBD><EFBFBD></h3>
        <p>ʵʱԤ<EFBFBD><EFBFBD>54<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>棬<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>֡<EFBFBD><EFBFBD><EFBFBD>ɫ<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ԫ<EFBFBD><EFBFBD></p>
      </div>
    </div>
    
    <div class="card" data-choice="export" onclick="toggleSelect(this)">
      <div class="card-image">
        <div style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); padding: 40px; text-align: center; color: white; border-radius: 8px;">
          <div style="font-size: 48px; margin-bottom: 10px;">??</div>
          <div style="font-size: 14px; font-weight: 600;"><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD></div>
        </div>
      </div>
      <div class="card-body">
        <h3>PNG<EFBFBD><EFBFBD><EFBFBD><EFBFBD>ϵͳ</h3>
        <p>һ<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>54<EFBFBD><EFBFBD><EFBFBD>˿<EFBFBD><EFBFBD><EFBFBD>ΪPNG<EFBFBD><EFBFBD>ʽ<EFBFBD><EFBFBD>֧<EFBFBD>ֶ<EFBFBD><EFBFBD>ֱַ<EFBFBD><EFBFBD><EFBFBD></p>
      </div>
    </div>
  </div>
</div>

<div class="section">
  <h3><EFBFBD>˿<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ƹ淶</h3>
  
  <div class="mockup">
    <div class="mockup-header"><EFBFBD><EFBFBD>׼<EFBFBD>˿<EFBFBD><EFBFBD>ƽṹ<EFBFBD><EFBFBD>54<EFBFBD>ţ<EFBFBD></div>
    <div class="mockup-body">
      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; padding: 20px;">
        
        <div style="border: 2px solid #e0e0e0; border-radius: 8px; padding: 16px; background: #f9f9f9;">
          <div style="font-weight: 600; margin-bottom: 8px; color: #333;"><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> (40<34><30>)</div>
          <div style="font-size: 13px; color: #666; line-height: 1.6;">
            ? 4<>ֻ<EFBFBD>ɫ <20><> 10<31><30> (A, 2-10)<br>
            ? <20><><EFBFBD>ҶԳƲ<D4B3><C6B2><EFBFBD><br>
            ? <20>м仨ɫͼ<C9AB><CDBC><EFBFBD><EFBFBD><EFBFBD>ȷֲ<C8B7><br>
            ? <20>ĽDZ<C4BD>ע<EFBFBD><D7A2><EFBFBD><EFBFBD><EFBFBD>뻨ɫ
          </div>
        </div>
        
        <div style="border: 2px solid #e0e0e0; border-radius: 8px; padding: 16px; background: #f9f9f9;">
          <div style="font-weight: 600; margin-bottom: 8px; color: #333;"><EFBFBD><EFBFBD><EFBFBD><EFBFBD> JQK (12<31><32>)</div>
          <div style="font-size: 13px; color: #666; line-height: 1.6;">
            ? 4<>ֻ<EFBFBD>ɫ <20><> 3<><33> (J, Q, K)<br>
            ? <strong><EFBFBD><EFBFBD><EFBFBD>ĶԳ<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD></strong><br>
            ? <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>µ<EFBFBD><C2B5>ÿ<EFBFBD><C3BF><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ۿ<EFBFBD><br>
            ? <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>߶Գƻ<D4B3><C6BB><EFBFBD>
          </div>
        </div>
        
        <div style="border: 2px solid #e0e0e0; border-radius: 8px; padding: 16px; background: #f9f9f9;">
          <div style="font-weight: 600; margin-bottom: 8px; color: #333;"><EFBFBD><EFBFBD>С<EFBFBD><EFBFBD> (2<><32>)</div>
          <div style="font-size: 13px; color: #666; line-height: 1.6;">
            ? <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>С<EFBFBD><D0A1><EFBFBD><EFBFBD>1<EFBFBD><31><br>
            ? <20>޻<EFBFBD>ɫ<EFBFBD><C9AB><EFBFBD><EFBFBD><br>
            ? <20><><EFBFBD><EFBFBD>ͼ<EFBFBD><CDBC><EFBFBD><EFBFBD><EFBFBD><EFBFBD><br>
            ? <20>Ӿ<EFBFBD><D3BE>Գ<EFBFBD>ԭ<EFBFBD><D4AD>
          </div>
        </div>
        
      </div>
    </div>
  </div>
</div>

<div class="section">
  <h3><EFBFBD><EFBFBD><EFBFBD>ƹ<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD></h3>
  
  <div style="display: flex; align-items: center; justify-content: space-between; padding: 20px; background: #f5f5f5; border-radius: 8px;">
    <div style="text-align: center; flex: 1;">
      <div style="width: 60px; height: 60px; background: #667eea; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; color: white; font-weight: 600;">1</div>
      <div style="font-size: 13px; font-weight: 600;"><EFBFBD>ϴ<EFBFBD><EFBFBD>ز<EFBFBD></div>
    </div>
    <div style="font-size: 24px; color: #999;"><EFBFBD><EFBFBD></div>
    <div style="text-align: center; flex: 1;">
      <div style="width: 60px; height: 60px; background: #f093fb; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; color: white; font-weight: 600;">2</div>
      <div style="font-size: 13px; font-weight: 600;"><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ʽ</div>
    </div>
    <div style="font-size: 24px; color: #999;"><EFBFBD><EFBFBD></div>
    <div style="text-align: center; flex: 1;">
      <div style="width: 60px; height: 60px; background: #4facfe; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; color: white; font-weight: 600;">3</div>
      <div style="font-size: 13px; font-weight: 600;">ʵʱԤ<EFBFBD><EFBFBD></div>
    </div>
    <div style="font-size: 24px; color: #999;"><EFBFBD><EFBFBD></div>
    <div style="text-align: center; flex: 1;">
      <div style="width: 60px; height: 60px; background: #00f2fe; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; color: white; font-weight: 600;">4</div>
      <div style="font-size: 13px; font-weight: 600;"><EFBFBD><EFBFBD><EFBFBD><EFBFBD>PNG</div>
    </div>
  </div>
</div>