assets/templates/two-buttons-doodle.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 650" width="100%" height="100%">
  <defs>
    <style>
      .bg { fill: #f8fafc; }
      .line { stroke: #0f172a; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; fill: none; }
      .thick { stroke: #0f172a; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; fill: none; }
      .fill-white { fill: #ffffff; }
      .btn-red { fill: #ef4444; stroke: #991b1b; stroke-width: 4; }
      .btn-blue { fill: #3b82f6; stroke: #1e40af; stroke-width: 4; }
      .btn-base { fill: #e2e8f0; stroke: #0f172a; stroke-width: 5; }
      .label-text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 800; font-size: 20px; fill: #0f172a; text-anchor: middle; }
      .caption-bar { fill: #0f172a; }
      .caption-text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 700; font-size: 26px; fill: #ffffff; text-anchor: middle; }
    </style>
  </defs>

  <!-- Background -->
  <rect width="1000" height="650" class="bg" />

  <!-- Top Caption Bar -->
  <rect x="0" y="0" width="1000" height="70" class="caption-bar" />
  <text x="500" y="45" class="caption-text">{{TOP_CAPTION}}</text>

  <!-- Left Side: Control Panel with Two Buttons -->
  <g transform="translate(100, 130)">
    <!-- Console Slanted Board -->
    <path d="M 20,420 L 70,80 L 370,80 L 420,420 Z" class="btn-base" />

    <!-- Button 1 (Red Button Left) -->
    <ellipse cx="160" cy="220" rx="65" ry="40" class="btn-red" />
    <path d="M 120,205 Q 160,195 200,205" stroke="#fca5a5" stroke-width="4" fill="none" />
    <!-- Label 1 -->
    <rect x="40" y="275" width="240" height="85" rx="8" fill="#ffffff" stroke="#0f172a" stroke-width="4" />
    <text x="160" y="325" class="label-text">{{OPTION_A}}</text>

    <!-- Button 2 (Blue Button Right) -->
    <ellipse cx="280" cy="220" rx="65" ry="40" class="btn-blue" />
    <path d="M 240,205 Q 280,195 320,205" stroke="#93c5fd" stroke-width="4" fill="none" />
    <!-- Label 2 -->
    <rect x="180" y="365" width="240" height="85" rx="8" fill="#ffffff" stroke="#0f172a" stroke-width="4" />
    <text x="300" y="415" class="label-text">{{OPTION_B}}</text>
  </g>

  <!-- Right Side: The Sweating Dilemma Guy -->
  <g transform="translate(720, 320)">
    <!-- Sweating Head -->
    <circle cx="0" cy="0" r="100" class="fill-white" stroke="#0f172a" stroke-width="7" />

    <!-- Stressed Worried Eyebrows -->
    <path d="M -60,-45 Q -30,-65 0,-40" class="thick" stroke-width="7" />
    <path d="M 10,-40 Q 40,-65 70,-45" class="thick" stroke-width="7" />

    <!-- Wide Agonized Eyes -->
    <ellipse cx="-35" cy="-15" rx="22" ry="24" class="fill-white" stroke="#0f172a" stroke-width="5" />
    <circle cx="-35" cy="-15" r="7" fill="#0f172a" />
    <ellipse cx="35" cy="-15" rx="22" ry="24" class="fill-white" stroke="#0f172a" stroke-width="5" />
    <circle cx="35" cy="-15" r="7" fill="#0f172a" />

    <!-- Trembling Wobbly Mouth -->
    <path d="M -40,45 Q -20,35 0,45 Q 20,55 40,45" class="line" stroke-width="6" />

    <!-- Massive Sweat Droplets Pouring -->
    <path d="M -85,-10 Q -105,10 -85,25 Q -70,10 -85,-10 Z" fill="#38bdf8" stroke="#0f172a" stroke-width="3" />
    <path d="M 85,-20 Q 105,0 85,15 Q 70,0 85,-20 Z" fill="#38bdf8" stroke="#0f172a" stroke-width="3" />
    <path d="M -50,-65 Q -65,-45 -50,-35 Q -40,-45 -50,-65 Z" fill="#38bdf8" stroke="#0f172a" stroke-width="3" />
    <path d="M 50,-65 Q 65,-45 50,-35 Q 40,-45 50,-65 Z" fill="#38bdf8" stroke="#0f172a" stroke-width="3" />
    <path d="M 0,25 Q -10,40 0,50 Q 10,40 0,25 Z" fill="#38bdf8" stroke="#0f172a" stroke-width="2.5" />

    <!-- Hand with Cloth / Napkin dabbing forehead -->
    <!-- Arm -->
    <path d="M 100,140 Q 150,50 110,-40" class="thick" />
    <!-- Napkin in Hand -->
    <path d="M 110,-40 Q 90,-70 55,-50 Q 35,-30 65,-20 Z" fill="#ffffff" stroke="#0f172a" stroke-width="5" />

    <!-- Shaking/Trembling Lines -->
    <path d="M -120,-10 L -135,-5" class="line" stroke-width="4" />
    <path d="M -125,15 L -140,20" class="line" stroke-width="4" />
    <path d="M 125,-10 L 140,-5" class="line" stroke-width="4" />
    <path d="M 120,15 L 135,20" class="line" stroke-width="4" />

    <!-- Body leaning into the dilemma -->
    <path d="M -70,95 L -110,280 L 110,280 L 70,95 Z" class="fill-white" stroke="#0f172a" stroke-width="6" />

    <!-- Hesitant Trembling Finger Reaching Left towards console -->
    <path d="M -80,120 Q -240,110 -280,140" class="thick" />
    <circle cx="-280" cy="140" r="14" fill="#ffffff" stroke="#0f172a" stroke-width="5" />
    <!-- Tremor vibration marks around finger -->
    <path d="M -295,120 Q -310,135 -295,150" class="line" stroke-width="3.5" />
    <path d="M -265,120 Q -250,135 -265,150" class="line" stroke-width="3.5" />

    <!-- Actor Tag -->
    <rect x="-110" y="220" width="220" height="50" rx="8" fill="#fef08a" stroke="#0f172a" stroke-width="3.5" />
    <text x="0" y="252" class="label-text">{{THE_STRESSED_PERSON}}</text>
  </g>
</svg>