font

2026-05-26 07:23:31 +07:00
parent f29c67bff4
commit 1c3a91b201
2 changed files with 187 additions and 2 deletions
@@ -0,0 +1,181 @@
+<svg width="1000" height="1600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <style>
+      .box { fill: #e3f2fd; stroke: #1976d2; stroke-width: 2; }
+      .process { fill: #fff3e0; stroke: #f57c00; stroke-width: 2; }
+      .decision { fill: #f3e5f5; stroke: #7b1fa2; stroke-width: 2; }
+      .end { fill: #e8f5e9; stroke: #388e3c; stroke-width: 2; }
+      .text { font-family: Arial, sans-serif; font-size: 14px; text-anchor: middle; }
+      .title { font-family: Arial, sans-serif; font-size: 20px; font-weight: bold; text-anchor: middle; }
+      .arrow { stroke: #333; stroke-width: 2; fill: none; marker-end: url(#arrowhead); }
+      .label { font-family: Arial, sans-serif; font-size: 12px; fill: #333; }
+    </style>
+    <marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
+      <polygon points="0 0, 10 3, 0 6" fill="#333" />
+    </marker>
+  </defs>
+
+  <!-- Title -->
+  <text x="500" y="40" class="title">FLOWCHART CARA KERJA WEB PHOTOBOOTH</text>
+
+  <!-- START -->
+  <ellipse cx="500" cy="100" rx="50" ry="30" class="end"/>
+  <text x="500" y="105" class="text">START</text>
+
+  <!-- Arrow -->
+  <path d="M 500 130 L 500 170" class="arrow"/>
+
+  <!-- 1. Open Website -->
+  <rect x="380" y="170" width="240" height="60" rx="5" class="box"/>
+  <text x="500" y="190" class="text">1. Buka Website</text>
+  <text x="500" y="210" class="text">Halaman Home</text>
+
+  <!-- Arrow -->
+  <path d="M 500 230 L 500 270" class="arrow"/>
+
+  <!-- 2. View Theme -->
+  <rect x="380" y="270" width="240" height="60" rx="5" class="box"/>
+  <text x="500" y="290" class="text">2. Lihat Preview Tema</text>
+  <text x="500" y="310" class="text">(6 pilihan tema strip)</text>
+
+  <!-- Arrow -->
+  <path d="M 500 330 L 500 370" class="arrow"/>
+
+  <!-- 3. Select Theme -->
+  <rect x="380" y="370" width="240" height="60" rx="5" class="process"/>
+  <text x="500" y="390" class="text">3. Pilih Tema</text>
+  <text x="500" y="410" class="text">Simpan ke Store</text>
+
+  <!-- Arrow -->
+  <path d="M 500 430 L 500 470" class="arrow"/>
+
+  <!-- 4. Go to Capture -->
+  <rect x="380" y="470" width="240" height="60" rx="5" class="box"/>
+  <text x="500" y="490" class="text">4. Masuk Halaman Capture</text>
+  <text x="500" y="510" class="text">(/capture)</text>
+
+  <!-- Arrow -->
+  <path d="M 500 530 L 500 570" class="arrow"/>
+
+  <!-- 5. Request Camera -->
+  <rect x="380" y="570" width="240" height="60" rx="5" class="process"/>
+  <text x="500" y="590" class="text">5. Minta Izin Akses Kamera</text>
+  <text x="500" y="610" class="text">getUserMedia()</text>
+
+  <!-- Arrow -->
+  <path d="M 500 630 L 500 670" class="arrow"/>
+
+  <!-- Decision: Camera OK? -->
+  <polygon points="500,670 600,720 500,770 400,720" class="decision"/>
+  <text x="500" y="720" class="text">Kamera</text>
+  <text x="500" y="740" class="text">Aktif?</text>
+
+  <!-- Arrow NO -->
+  <path d="M 400 720 L 300 720" class="arrow"/>
+  <text x="350" y="710" class="label">TIDAK</text>
+  <rect x="150" y="690" width="150" height="60" rx="5" class="box"/>
+  <text x="225" y="710" class="text">Tampilkan Error</text>
+  <text x="225" y="730" class="text">"Kamera Ditolak"</text>
+
+  <!-- Arrow YA -->
+  <path d="M 500 770 L 500 810" class="arrow"/>
+  <text x="510" y="795" class="label">YA</text>
+
+  <!-- 6. Live Preview -->
+  <rect x="380" y="810" width="240" height="60" rx="5" class="box"/>
+  <text x="500" y="830" class="text">6. Tampilkan Live Preview</text>
+  <text x="500" y="850" class="text">Video Stream dari Kamera</text>
+
+  <!-- Arrow -->
+  <path d="M 500 870 L 500 910" class="arrow"/>
+
+  <!-- 7. Click Start -->
+  <rect x="380" y="910" width="240" height="60" rx="5" class="process"/>
+  <text x="500" y="930" class="text">7. User Klik "Start Sequence"</text>
+  <text x="500" y="950" class="text">Countdown 3...2...1</text>
+
+  <!-- Arrow -->
+  <path d="M 500 970 L 500 1010" class="arrow"/>
+
+  <!-- 8. Take Photo (x3) -->
+  <rect x="320" y="1010" width="360" height="80" rx="5" class="process"/>
+  <text x="500" y="1035" class="text">8. Ambil Foto (Snapshot)</text>
+  <text x="500" y="1055" class="text">• Convert Frame ke Data URL (base64)</text>
+  <text x="500" y="1075" class="text">• Simpan ke store.photos[]</text>
+
+  <!-- Arrow Loop -->
+  <path d="M 680 1050 L 750 1050 L 750 920 L 620 920" class="arrow" stroke-dasharray="5,5"/>
+  <text x="700" y="1000" class="label">Ulangi 3x</text>
+
+  <!-- Arrow after 3 photos -->
+  <path d="M 500 1090 L 500 1130" class="arrow"/>
+
+  <!-- 9. Go to Customize -->
+  <rect x="380" y="1130" width="240" height="60" rx="5" class="box"/>
+  <text x="500" y="1150" class="text">9. Redirect ke Customize</text>
+  <text x="500" y="1170" class="text">(/customize)</text>
+
+  <!-- Arrow -->
+  <path d="M 500 1190 L 500 1230" class="arrow"/>
+
+  <!-- 10. Preview & Edit -->
+  <rect x="320" y="1230" width="360" height="80" rx="5" class="process"/>
+  <text x="500" y="1255" class="text">10. Preview Strip dengan Tema</text>
+  <text x="500" y="1275" class="text">• Lihat 3 foto di layout tema</text>
+  <text x="500" y="1295" class="text">• Bisa edit foto individual</text>
+
+  <!-- Arrow -->
+  <path d="M 500 1310 L 500 1350" class="arrow"/>
+
+  <!-- Decision: Puas? -->
+  <polygon points="500,1350 600,1400 500,1450 400,1400" class="decision"/>
+  <text x="500" y="1400" class="text">Puas?</text>
+
+  <!-- Arrow NO - Edit -->
+  <path d="M 400 1400 L 300 1400" class="arrow"/>
+  <text x="350" y="1390" class="label">TIDAK</text>
+  <rect x="150" y="1370" width="150" height="60" rx="5" class="process"/>
+  <text x="225" y="1390" class="text">Edit Foto / Ganti</text>
+  <text x="225" y="1410" class="text">Tema (Loop)</text>
+
+  <!-- Loop back arrow -->
+  <path d="M 225 1370 L 225 1260 L 320 1260" class="arrow" stroke-dasharray="5,5"/>
+
+  <!-- Arrow YA -->
+  <path d="M 500 1450 L 500 1490" class="arrow"/>
+  <text x="520" y="1475" class="label">YA</text>
+
+  <!-- 11. Generate Strip -->
+  <rect x="380" y="1490" width="240" height="60" rx="5" class="process"/>
+  <text x="500" y="1510" class="text">11. Klik "Generate Strip"</text>
+  <text x="500" y="1530" class="text">Redirect ke /result</text>
+
+  <!-- Arrow -->
+  <path d="M 500 1550 L 500 1590" class="arrow"/>
+
+  <!-- 12. Export Options -->
+  <rect x="320" y="1590" width="360" height="80" rx="5" class="process"/>
+  <text x="500" y="1615" class="text">12. Hasil Akhir - Pilih Aksi:</text>
+  <text x="500" y="1635" class="text">• Download PNG • Share • Copy Clipboard</text>
+  <text x="500" y="1655" class="text">• Start Over</text>
+
+  <!-- Arrow -->
+  <path d="M 500 1670 L 500 1710" class="arrow"/>
+
+  <!-- END -->
+  <ellipse cx="500" cy="1750" rx="50" ry="30" class="end"/>
+  <text x="500" y="1755" class="text">SELESAI</text>
+
+  <!-- Legend -->
+  <g transform="translate(50, 1350)">
+    <text x="0" y="0" class="title" text-anchor="start" font-size="16">Keterangan:</text>
+    <rect x="0" y="20" width="30" height="20" class="box"/>
+    <text x="40" y="35" class="label" text-anchor="start">= Proses Input/Output</text>
+    <rect x="0" y="50" width="30" height="20" class="process"/>
+    <text x="40" y="65" class="label" text-anchor="start">= Proses Teknis</text>
+    <polygon points="15,90 25,80 25,100" class="decision" transform="scale(0.8)"/>
+    <text x="40" y="95" class="label" text-anchor="start">= Keputusan/Kondisi</text>
+    <ellipse cx="15" cy="125" rx="15" ry="10" class="end"/>
+    <text x="40" y="130" class="label" text-anchor="start">= Start/End</text>
+  </g>
+</svg>