199 lines
11 KiB
XML
199 lines
11 KiB
XML
|
<svg viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="grAmethyst" x1="0" y1="0" x2="0" y2="1">
|
||
|
|
<stop offset="0%" stop-color="#C4B5FD"/><stop offset="100%" stop-color="#7C3AED"/>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="grSapphire" x1="0" y1="0" x2="0" y2="1">
|
||
|
|
<stop offset="0%" stop-color="#93C5FD"/><stop offset="100%" stop-color="#2563EB"/>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||
|
|
<stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="grAmber" x1="0" y1="0" x2="0" y2="1">
|
||
|
|
<stop offset="0%" stop-color="#FDE68A"/><stop offset="100%" stop-color="#D97706"/>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="prismaticH" x1="0" y1="0" x2="1" y2="0">
|
||
|
|
<stop offset="0%" stop-color="#8B5CF6"/><stop offset="25%" stop-color="#3B82F6"/><stop offset="50%" stop-color="#10B981"/><stop offset="75%" stop-color="#F59E0B"/><stop offset="100%" stop-color="#EC4899"/>
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<filter id="glowSm" x="-50%" y="-50%" width="200%" height="200%">
|
||
|
|
<feGaussianBlur stdDeviation="1.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||
|
|
</filter>
|
||
|
|
<filter id="glowMd" x="-50%" y="-50%" width="200%" height="200%">
|
||
|
|
<feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||
|
|
</filter>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
|
||
|
|
.lbl { font-size: 9px; fill: #94A3B8; text-anchor: middle; font-weight: 500; }
|
||
|
|
.section-lbl { font-size: 11px; fill: #64748B; font-weight: 600; letter-spacing: 0.08em; }
|
||
|
|
.chrome-text { font-size: 10px; fill: #E2E8F0; font-weight: 600; }
|
||
|
|
</style>
|
||
|
|
</defs>
|
||
|
|
|
||
|
|
<rect width="700" height="700" fill="#050508"/>
|
||
|
|
<text x="350" y="28" font-size="13" font-weight="700" fill="#94A3B8" text-anchor="middle" letter-spacing="0.12em">DEVICE CHROME ELEMENTS</text>
|
||
|
|
<text x="350" y="44" font-size="9" fill="#475569" text-anchor="middle">Status bar, tab bar, nav header, keyboard, device frame, modal scrim, toast, input accessory</text>
|
||
|
|
|
||
|
|
<!-- 1. STATUS BAR (iPhone 14 style) -->
|
||
|
|
<text x="24" y="74" class="section-lbl">STATUS BAR</text>
|
||
|
|
<line x1="24" y1="80" x2="670" y2="80" stroke="#1C2240" stroke-width="0.5"/>
|
||
|
|
|
||
|
|
<g transform="translate(350, 110)">
|
||
|
|
<rect x="-195" y="-15" width="390" height="30" fill="#050508"/>
|
||
|
|
<!-- Time -->
|
||
|
|
<text x="-170" y="3" font-size="12" fill="#E2E8F0" font-weight="600">9:41</text>
|
||
|
|
<!-- Dynamic island -->
|
||
|
|
<rect x="-40" y="-8" width="80" height="16" rx="8" fill="#000"/>
|
||
|
|
<!-- Right side indicators -->
|
||
|
|
<!-- Signal -->
|
||
|
|
<g transform="translate(130, -4)">
|
||
|
|
<rect x="0" y="4" width="3" height="4" rx="0.5" fill="#E2E8F0" opacity="0.4"/>
|
||
|
|
<rect x="4" y="2" width="3" height="6" rx="0.5" fill="#E2E8F0" opacity="0.6"/>
|
||
|
|
<rect x="8" y="0" width="3" height="8" rx="0.5" fill="#E2E8F0" opacity="0.8"/>
|
||
|
|
<rect x="12" y="-2" width="3" height="10" rx="0.5" fill="#E2E8F0"/>
|
||
|
|
</g>
|
||
|
|
<!-- WiFi -->
|
||
|
|
<g transform="translate(152, 0)">
|
||
|
|
<path d="M 0,-4 C 3,-4 5,-2 6,0" fill="none" stroke="#E2E8F0" stroke-width="1.2" stroke-linecap="round"/>
|
||
|
|
<path d="M -2,-1 C 2,-1 4,0 5,2" fill="none" stroke="#E2E8F0" stroke-width="1" stroke-linecap="round" opacity="0.8"/>
|
||
|
|
<circle cx="2" cy="3" r="1" fill="#E2E8F0"/>
|
||
|
|
</g>
|
||
|
|
<!-- Battery -->
|
||
|
|
<g transform="translate(166, -4)">
|
||
|
|
<rect x="0" y="0" width="22" height="9" rx="2" fill="none" stroke="#E2E8F0" stroke-width="1" opacity="0.5"/>
|
||
|
|
<rect x="22" y="2" width="2" height="5" rx="1" fill="#E2E8F0" opacity="0.3"/>
|
||
|
|
<rect x="1.5" y="1.5" width="16" height="6" rx="1" fill="#10B981" opacity="0.9"/>
|
||
|
|
</g>
|
||
|
|
<text x="0" y="30" class="lbl">iOS Status Bar — 390px wide, #050508 background</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- 2. NAV HEADER -->
|
||
|
|
<text x="24" y="164" class="section-lbl">NAVIGATION HEADER</text>
|
||
|
|
<line x1="24" y1="170" x2="670" y2="170" stroke="#1C2240" stroke-width="0.5"/>
|
||
|
|
|
||
|
|
<g transform="translate(350, 208)">
|
||
|
|
<rect x="-195" y="-22" width="390" height="44" fill="#0A0E1A"/>
|
||
|
|
<line x1="-195" y1="22" x2="195" y2="22" stroke="#1C2240" stroke-width="0.5"/>
|
||
|
|
<!-- Back chevron -->
|
||
|
|
<path d="M -175,-2 L -170,-7 M -175,-2 L -170,3" fill="none" stroke="#8B5CF6" stroke-width="1.5" stroke-linecap="round"/>
|
||
|
|
<!-- Title -->
|
||
|
|
<text x="0" y="4" font-size="14" fill="#E2E8F0" font-weight="700" text-anchor="middle" font-family="'Space Grotesk', sans-serif">Mirror</text>
|
||
|
|
<!-- Right action (settings gear outline) -->
|
||
|
|
<circle cx="172" cy="0" r="7" fill="none" stroke="#94A3B8" stroke-width="1"/>
|
||
|
|
<circle cx="172" cy="0" r="2" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
|
||
|
|
<text x="0" y="44" class="lbl">Nav Header — back chevron, centered title, right action</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- 3. TAB BAR FRAME -->
|
||
|
|
<text x="24" y="280" class="section-lbl">TAB BAR FRAME</text>
|
||
|
|
<line x1="24" y1="286" x2="670" y2="286" stroke="#1C2240" stroke-width="0.5"/>
|
||
|
|
|
||
|
|
<g transform="translate(350, 330)">
|
||
|
|
<rect x="-195" y="-28" width="390" height="56" fill="#0A0E1A"/>
|
||
|
|
<!-- Top border with subtle prismatic -->
|
||
|
|
<line x1="-195" y1="-28" x2="195" y2="-28" stroke="url(#prismaticH)" stroke-width="0.5" opacity="0.3"/>
|
||
|
|
<!-- 5 tab slots -->
|
||
|
|
<g font-size="8" fill="#475569" text-anchor="middle" font-weight="500">
|
||
|
|
<!-- Turn (active) -->
|
||
|
|
<g transform="translate(-156, 0)">
|
||
|
|
<g filter="url(#glowSm)">
|
||
|
|
<path d="M 0,-10 L 8,0 L 0,10 L -8,0 Z" fill="url(#grAmethyst)" opacity="0.8"/>
|
||
|
|
<path d="M 0,-10 L 8,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||
|
|
</g>
|
||
|
|
<text x="0" y="20" fill="#A78BFA" font-weight="600">Turn</text>
|
||
|
|
</g>
|
||
|
|
<!-- Mirror (inactive) -->
|
||
|
|
<g transform="translate(-78, 0)">
|
||
|
|
<path d="M 0,-6 L 4,-3 L 6,3 L 0,7 L -6,3 L -4,-3 Z" fill="none" stroke="#475569" stroke-width="0.8"/>
|
||
|
|
<text x="0" y="20">Mirror</text>
|
||
|
|
</g>
|
||
|
|
<!-- Lens (inactive) -->
|
||
|
|
<g transform="translate(0, 0)">
|
||
|
|
<circle r="7" fill="none" stroke="#475569" stroke-width="0.8"/>
|
||
|
|
<circle r="3" fill="none" stroke="#475569" stroke-width="0.5"/>
|
||
|
|
<text x="0" y="20">Lens</text>
|
||
|
|
</g>
|
||
|
|
<!-- Gallery (inactive) -->
|
||
|
|
<g transform="translate(78, 0)">
|
||
|
|
<rect x="-6" y="-6" width="5" height="5" rx="1" fill="none" stroke="#475569" stroke-width="0.7"/>
|
||
|
|
<rect x="1" y="-6" width="5" height="5" rx="1" fill="none" stroke="#475569" stroke-width="0.7"/>
|
||
|
|
<rect x="-6" y="1" width="5" height="5" rx="1" fill="none" stroke="#475569" stroke-width="0.7"/>
|
||
|
|
<rect x="1" y="1" width="5" height="5" rx="1" fill="none" stroke="#475569" stroke-width="0.7"/>
|
||
|
|
<text x="0" y="20">Gallery</text>
|
||
|
|
</g>
|
||
|
|
<!-- You (inactive) -->
|
||
|
|
<g transform="translate(156, 0)">
|
||
|
|
<circle r="6" fill="none" stroke="#475569" stroke-width="0.8"/>
|
||
|
|
<circle r="2.5" fill="none" stroke="#475569" stroke-width="0.6" cy="-1"/>
|
||
|
|
<text x="0" y="20">You</text>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
<!-- Home indicator -->
|
||
|
|
<rect x="-50" y="30" width="100" height="4" rx="2" fill="#475569" opacity="0.3"/>
|
||
|
|
<text x="0" y="52" class="lbl">Tab Bar — 5 tabs, prismatic top border, home indicator</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- 4. MODAL SCRIM -->
|
||
|
|
<text x="24" y="410" class="section-lbl">MODAL SCRIM AND TOAST</text>
|
||
|
|
<line x1="24" y1="416" x2="670" y2="416" stroke="#1C2240" stroke-width="0.5"/>
|
||
|
|
|
||
|
|
<g transform="translate(200, 500)">
|
||
|
|
<!-- Scrim background -->
|
||
|
|
<rect x="-100" y="-50" width="200" height="100" rx="4" fill="#050508" opacity="0.7"/>
|
||
|
|
<rect x="-100" y="-50" width="200" height="100" rx="4" fill="none" stroke="#1C2240" stroke-width="0.5"/>
|
||
|
|
<!-- Modal card on top -->
|
||
|
|
<rect x="-70" y="-30" width="140" height="60" rx="12" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.8"/>
|
||
|
|
<!-- Grab handle -->
|
||
|
|
<rect x="-16" y="-26" width="32" height="3" rx="1.5" fill="#475569" opacity="0.4"/>
|
||
|
|
<text x="0" y="0" font-size="10" fill="#E2E8F0" text-anchor="middle" font-weight="600">Modal Content</text>
|
||
|
|
<text x="0" y="14" font-size="8" fill="#64748B" text-anchor="middle">60% backdrop blur scrim</text>
|
||
|
|
<text x="0" y="68" class="lbl">Modal Scrim — #050508 at 70% + backdrop blur</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Toast -->
|
||
|
|
<g transform="translate(530, 480)">
|
||
|
|
<g filter="url(#glowSm)">
|
||
|
|
<rect x="-90" y="-16" width="180" height="32" rx="16" fill="#121628" stroke="#10B981" stroke-width="0.6"/>
|
||
|
|
<!-- Emerald fragment -->
|
||
|
|
<g transform="translate(-68, 0)">
|
||
|
|
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#grEmerald)" opacity="0.8"/>
|
||
|
|
<path d="M 0,-5 L 5,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||
|
|
</g>
|
||
|
|
<text x="4" y="4" font-size="10" fill="#E2E8F0" text-anchor="middle" font-weight="500">Turn saved</text>
|
||
|
|
</g>
|
||
|
|
<text x="0" y="34" class="lbl">Success Toast — pill shape, emerald accent</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Error Toast -->
|
||
|
|
<g transform="translate(530, 540)">
|
||
|
|
<g filter="url(#glowSm)">
|
||
|
|
<rect x="-90" y="-16" width="180" height="32" rx="16" fill="#121628" stroke="#EF4444" stroke-width="0.6"/>
|
||
|
|
<g transform="translate(-68, 0)">
|
||
|
|
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="#EF4444" opacity="0.8"/>
|
||
|
|
</g>
|
||
|
|
<text x="4" y="4" font-size="10" fill="#E2E8F0" text-anchor="middle" font-weight="500">Connection lost</text>
|
||
|
|
</g>
|
||
|
|
<text x="0" y="34" class="lbl">Error Toast — pill shape, ruby accent</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- 5. INPUT ACCESSORY / KEYBOARD TOP -->
|
||
|
|
<text x="24" y="600" class="section-lbl">INPUT ACCESSORY</text>
|
||
|
|
<line x1="24" y1="606" x2="670" y2="606" stroke="#1C2240" stroke-width="0.5"/>
|
||
|
|
|
||
|
|
<g transform="translate(350, 648)">
|
||
|
|
<rect x="-195" y="-20" width="390" height="40" fill="#0A0E1A"/>
|
||
|
|
<line x1="-195" y1="-20" x2="195" y2="-20" stroke="#1C2240" stroke-width="0.5"/>
|
||
|
|
<!-- Text input area -->
|
||
|
|
<rect x="-180" y="-12" width="310" height="24" rx="12" fill="#121628" stroke="#1C2240" stroke-width="0.5"/>
|
||
|
|
<text x="-168" y="3" font-size="10" fill="#475569">Type your thought...</text>
|
||
|
|
<!-- Send button -->
|
||
|
|
<g transform="translate(165, 0)" filter="url(#glowSm)">
|
||
|
|
<circle r="12" fill="url(#grAmethyst)" opacity="0.8"/>
|
||
|
|
<path d="M -3,-3 L 4,0 L -3,3" fill="none" stroke="#fff" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
|
|
</g>
|
||
|
|
<text x="0" y="36" class="lbl">Input Accessory Bar — text field + send button, above keyboard</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<text x="350" y="692" font-size="8" fill="#334155" text-anchor="middle">Device chrome at 390x844px (iPhone 14) — all elements use Kalei dark theme with jewel tone accents</text>
|
||
|
|
</svg>
|