Final prep for production
This commit is contained in:
Thanakorn S
@@ -0,0 +1,133 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 680" width="520" height="680">
|
||||
|
||||
<!-- Decorative dashed rings (orange, like the original) -->
|
||||
<circle cx="220" cy="370" r="195" fill="none" stroke="#f25c05" stroke-width="1.5" stroke-dasharray="6 8" opacity="0.35"/>
|
||||
<circle cx="220" cy="370" r="155" fill="none" stroke="#f25c05" stroke-width="1" stroke-dasharray="4 7" opacity="0.2"/>
|
||||
|
||||
<!-- Soft background blob -->
|
||||
<ellipse cx="220" cy="400" rx="170" ry="190" fill="#fff3e8" opacity="0.55"/>
|
||||
|
||||
<!-- Phone outer frame (dark navy) -->
|
||||
<rect x="95" y="55" width="250" height="530" rx="32" ry="32" fill="#272556"/>
|
||||
|
||||
<!-- Phone inner screen background -->
|
||||
<rect x="104" y="74" width="232" height="494" rx="22" ry="22" fill="#f4f5fb"/>
|
||||
|
||||
<!-- Notch -->
|
||||
<rect x="185" y="74" width="70" height="18" rx="9" ry="9" fill="#272556"/>
|
||||
|
||||
<!-- ===== APP SCREEN CONTENT ===== -->
|
||||
|
||||
<!-- Status bar -->
|
||||
<text x="115" y="105" font-family="sans-serif" font-size="9" fill="#888">12:00</text>
|
||||
<text x="292" y="105" font-family="sans-serif" font-size="9" fill="#888" text-anchor="end">100%</text>
|
||||
|
||||
<!-- Top app bar -->
|
||||
<rect x="104" y="110" width="232" height="42" fill="#272556"/>
|
||||
<text x="220" y="137" font-family="sans-serif" font-size="13" font-weight="bold" fill="#fff" text-anchor="middle">Stock Scan</text>
|
||||
|
||||
<!-- Scan area box -->
|
||||
<rect x="118" y="162" width="204" height="148" rx="10" ry="10" fill="#e8eaf6" stroke="#c5c9e8" stroke-width="1"/>
|
||||
|
||||
<!-- Barcode bars inside scan area -->
|
||||
<g opacity="0.85">
|
||||
<rect x="138" y="182" width="4" height="80" fill="#272556"/>
|
||||
<rect x="145" y="182" width="7" height="80" fill="#272556"/>
|
||||
<rect x="155" y="182" width="3" height="80" fill="#272556"/>
|
||||
<rect x="161" y="182" width="6" height="80" fill="#272556"/>
|
||||
<rect x="170" y="182" width="3" height="80" fill="#272556"/>
|
||||
<rect x="176" y="182" width="5" height="80" fill="#272556"/>
|
||||
<rect x="184" y="182" width="4" height="80" fill="#272556"/>
|
||||
<rect x="191" y="182" width="7" height="80" fill="#272556"/>
|
||||
<rect x="201" y="182" width="3" height="80" fill="#272556"/>
|
||||
<rect x="207" y="182" width="5" height="80" fill="#272556"/>
|
||||
<rect x="215" y="182" width="4" height="80" fill="#272556"/>
|
||||
<rect x="222" y="182" width="6" height="80" fill="#272556"/>
|
||||
<rect x="231" y="182" width="3" height="80" fill="#272556"/>
|
||||
<rect x="237" y="182" width="5" height="80" fill="#272556"/>
|
||||
<rect x="245" y="182" width="4" height="80" fill="#272556"/>
|
||||
<rect x="252" y="182" width="7" height="80" fill="#272556"/>
|
||||
<rect x="262" y="182" width="3" height="80" fill="#272556"/>
|
||||
<rect x="268" y="182" width="4" height="80" fill="#272556"/>
|
||||
<rect x="275" y="182" width="6" height="80" fill="#272556"/>
|
||||
<rect x="284" y="182" width="3" height="80" fill="#272556"/>
|
||||
<rect x="290" y="182" width="4" height="80" fill="#272556"/>
|
||||
<rect x="297" y="182" width="7" height="80" fill="#272556"/>
|
||||
<rect x="307" y="182" width="3" height="80" fill="#272556"/>
|
||||
</g>
|
||||
<!-- Orange scan line -->
|
||||
<rect x="120" y="221" width="200" height="3" rx="1.5" fill="#f25c05" opacity="0.8"/>
|
||||
<!-- Scan line glow -->
|
||||
<rect x="120" y="219" width="200" height="7" rx="3.5" fill="#f25c05" opacity="0.15"/>
|
||||
|
||||
<!-- Corner brackets for scan frame -->
|
||||
<path d="M130,170 L130,180 M120,170 L130,170" stroke="#f25c05" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
||||
<path d="M310,170 L310,180 M310,170 L320,170" stroke="#f25c05" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
||||
<path d="M130,300 L130,290 M120,300 L130,300" stroke="#f25c05" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
||||
<path d="M310,300 L310,290 M310,300 L320,300" stroke="#f25c05" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
||||
|
||||
<!-- Barcode text below scan area -->
|
||||
<text x="220" y="323" font-family="monospace" font-size="10" fill="#888" text-anchor="middle">SKU|MN3-0042|LOT-B|001</text>
|
||||
|
||||
<!-- Section label: Recent Scans -->
|
||||
<text x="118" y="350" font-family="sans-serif" font-size="11" font-weight="bold" fill="#272556">Recent Scans</text>
|
||||
|
||||
<!-- Scan rows -->
|
||||
<!-- Row 1 -->
|
||||
<rect x="112" y="358" width="216" height="38" rx="7" ry="7" fill="#fff" stroke="#e4e6f0" stroke-width="1"/>
|
||||
<!-- green dot -->
|
||||
<circle cx="127" cy="377" r="5" fill="#00d563"/>
|
||||
<text x="140" y="372" font-family="sans-serif" font-size="10" font-weight="bold" fill="#272556">MN3-0042 · Lot B</text>
|
||||
<text x="140" y="385" font-family="sans-serif" font-size="9" fill="#888">Loc: A1-03 · Qty: 50</text>
|
||||
<text x="316" y="372" font-family="sans-serif" font-size="9" fill="#465291" text-anchor="end">In</text>
|
||||
|
||||
<!-- Row 2 -->
|
||||
<rect x="112" y="402" width="216" height="38" rx="7" ry="7" fill="#fff" stroke="#e4e6f0" stroke-width="1"/>
|
||||
<circle cx="127" cy="421" r="5" fill="#f25c05"/>
|
||||
<text x="140" y="416" font-family="sans-serif" font-size="10" font-weight="bold" fill="#272556">MN3-0017 · Lot A</text>
|
||||
<text x="140" y="429" font-family="sans-serif" font-size="9" fill="#888">Loc: B2-01 · Qty: 12</text>
|
||||
<text x="316" y="416" font-family="sans-serif" font-size="9" fill="#f25c05" text-anchor="end">Out</text>
|
||||
|
||||
<!-- Row 3 -->
|
||||
<rect x="112" y="446" width="216" height="38" rx="7" ry="7" fill="#fff" stroke="#e4e6f0" stroke-width="1"/>
|
||||
<circle cx="127" cy="465" r="5" fill="#00d563"/>
|
||||
<text x="140" y="460" font-family="sans-serif" font-size="10" font-weight="bold" fill="#272556">MN3-0055 · Lot C</text>
|
||||
<text x="140" y="473" font-family="sans-serif" font-size="9" fill="#888">Loc: A3-07 · Qty: 200</text>
|
||||
<text x="316" y="460" font-family="sans-serif" font-size="9" fill="#465291" text-anchor="end">In</text>
|
||||
|
||||
<!-- Row 4 (partial, fades at bottom) -->
|
||||
<rect x="112" y="490" width="216" height="38" rx="7" ry="7" fill="#fff" stroke="#e4e6f0" stroke-width="1" opacity="0.5"/>
|
||||
<circle cx="127" cy="509" r="5" fill="#7177b5" opacity="0.5"/>
|
||||
<text x="140" y="504" font-family="sans-serif" font-size="10" font-weight="bold" fill="#272556" opacity="0.5">MN3-0031 · Lot A</text>
|
||||
<text x="140" y="517" font-family="sans-serif" font-size="9" fill="#888" opacity="0.5">Loc: C1-02 · Qty: 80</text>
|
||||
|
||||
<!-- Bottom navigation bar -->
|
||||
<rect x="104" y="534" width="232" height="34" rx="0" fill="#fff" stroke="#e4e6f0" stroke-width="1"/>
|
||||
<rect x="104" y="552" width="232" height="16" rx="0" fill="#fff"/>
|
||||
|
||||
<!-- Nav icons -->
|
||||
<!-- Home icon (active) -->
|
||||
<rect x="122" y="539" width="42" height="22" rx="11" fill="#272556"/>
|
||||
<text x="143" y="554" font-family="sans-serif" font-size="9" fill="#fff" text-anchor="middle">Scan</text>
|
||||
|
||||
<!-- Stock icon -->
|
||||
<text x="195" y="554" font-family="sans-serif" font-size="9" fill="#888" text-anchor="middle">Stock</text>
|
||||
|
||||
<!-- Orders icon -->
|
||||
<text x="247" y="554" font-family="sans-serif" font-size="9" fill="#888" text-anchor="middle">Orders</text>
|
||||
|
||||
<!-- More icon -->
|
||||
<text x="300" y="554" font-family="sans-serif" font-size="9" fill="#888" text-anchor="middle">More</text>
|
||||
|
||||
<!-- Home indicator bar -->
|
||||
<rect x="190" y="564" width="60" height="3" rx="1.5" fill="#ccc"/>
|
||||
|
||||
<!-- Small floating badge: "3 roles active" -->
|
||||
<rect x="320" y="168" width="90" height="30" rx="8" fill="#8763ee" opacity="0.92"/>
|
||||
<text x="365" y="185" font-family="sans-serif" font-size="10" font-weight="bold" fill="#fff" text-anchor="middle">4 roles active</text>
|
||||
|
||||
<!-- Small badge: OTP shield -->
|
||||
<rect x="320" y="210" width="90" height="30" rx="8" fill="#272556" opacity="0.9"/>
|
||||
<text x="365" y="227" font-family="sans-serif" font-size="10" font-weight="bold" fill="#fff" text-anchor="middle">OTP secured</text>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.5 KiB |
Reference in New Issue
Block a user