initial commit (frontend)
This commit is contained in:
@@ -0,0 +1,120 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" width="1600" height="900">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#2C1259"/><stop offset="1" stop-color="#C9B3FC"/>
|
||||
</linearGradient>
|
||||
<filter id="blur" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="90"/></filter>
|
||||
<linearGradient id="purple" x1="0" y1="0" x2="0.6" y2="1">
|
||||
<stop offset="0" stop-color="#B49CFC"/><stop offset="1" stop-color="#7C4DF4"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="sky" x1="0" y1="0" x2="0.6" y2="1">
|
||||
<stop offset="0" stop-color="#8ACDF5"/><stop offset="1" stop-color="#3E9BE0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="device" x1="0" y1="0" x2="0.5" y2="1">
|
||||
<stop offset="0" stop-color="#F3F5F9"/><stop offset="1" stop-color="#D9E0EA"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="glass" x1="0" y1="0" x2="0.4" y2="1">
|
||||
<stop offset="0" stop-color="#FFFFFF" stop-opacity="0.92"/>
|
||||
<stop offset="1" stop-color="#FFFFFF" stop-opacity="0.62"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="gloss" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#FFFFFF" stop-opacity="0.55"/>
|
||||
<stop offset="0.55" stop-color="#FFFFFF" stop-opacity="0.04"/>
|
||||
</linearGradient>
|
||||
<filter id="sh" x="-45%" y="-45%" width="190%" height="190%">
|
||||
<feDropShadow dx="0" dy="18" stdDeviation="22" flood-color="#1E1240" flood-opacity="0.24"/>
|
||||
</filter>
|
||||
<filter id="shS" x="-55%" y="-55%" width="210%" height="210%">
|
||||
<feDropShadow dx="0" dy="10" stdDeviation="13" flood-color="#1E1240" flood-opacity="0.20"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<rect width="1600" height="900" fill="url(#bg)"/>
|
||||
<g filter="url(#blur)" opacity="0.5">
|
||||
<circle cx="250" cy="180" r="250" fill="#C7B4FB"/>
|
||||
<circle cx="1360" cy="740" r="250" fill="#8ACDF5"/>
|
||||
<circle cx="800" cy="430" r="230" fill="#B9D5F7"/>
|
||||
<circle cx="1400" cy="170" r="160" fill="#8CEFBD"/>
|
||||
</g>
|
||||
|
||||
<ellipse cx="800" cy="744" rx="230" ry="34" fill="#150A2E" opacity="0.2"/>
|
||||
|
||||
<!-- device -->
|
||||
<g filter="url(#sh)">
|
||||
<rect x="654" y="180" width="292" height="546" rx="66" fill="url(#device)"/>
|
||||
<rect x="654" y="180" width="292" height="546" rx="66" fill="none" stroke="#FFFFFF" stroke-width="3" opacity="0.85"/>
|
||||
<rect x="676" y="202" width="248" height="502" rx="48" fill="#FFFFFF"/>
|
||||
<rect x="762" y="216" width="76" height="20" rx="10" fill="#E3E8EF"/>
|
||||
</g>
|
||||
|
||||
<!-- contact card (glass) -->
|
||||
<g>
|
||||
<rect x="700" y="262" width="200" height="164" rx="40" fill="#F2EDFE"/>
|
||||
<rect x="700" y="262" width="200" height="82" rx="40" fill="url(#gloss)"/>
|
||||
<circle cx="800" cy="320" r="32" fill="url(#purple)"/>
|
||||
<path d="M 776 356 Q 776 338 800 338 Q 824 338 824 356 Z" fill="url(#purple)"/>
|
||||
<rect x="746" y="372" width="108" height="14" rx="7" fill="#CDBCFB"/>
|
||||
<rect x="772" y="396" width="56" height="12" rx="6" fill="#E0D6FE"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="700" y="446" width="200" height="72" rx="28" fill="#F5F7FA"/>
|
||||
<circle cx="738" cy="482" r="20" fill="#DCEEFB"/>
|
||||
<rect x="770" y="470" width="106" height="13" rx="6.5" fill="#E4EAF2"/>
|
||||
<rect x="770" y="492" width="70" height="11" rx="5.5" fill="#EDF1F6"/>
|
||||
<rect x="700" y="534" width="200" height="72" rx="28" fill="#F5F7FA"/>
|
||||
<circle cx="738" cy="570" r="20" fill="#E9E2FE"/>
|
||||
<rect x="770" y="558" width="106" height="13" rx="6.5" fill="#E4EAF2"/>
|
||||
<rect x="770" y="580" width="82" height="11" rx="5.5" fill="#EDF1F6"/>
|
||||
<rect x="740" y="630" width="120" height="30" rx="15" fill="#E3F0FC"/>
|
||||
</g>
|
||||
|
||||
<!-- key tile -->
|
||||
<g transform="translate(330,266)" filter="url(#sh)">
|
||||
<rect x="-78" y="-78" width="156" height="156" rx="48" fill="url(#glass)"/>
|
||||
<rect x="-78" y="-78" width="156" height="156" rx="48" fill="none" stroke="#FFFFFF" stroke-width="2" opacity="0.9"/>
|
||||
<rect x="-78" y="-78" width="156" height="92" rx="48" fill="url(#gloss)"/>
|
||||
<g stroke="url(#sky)" stroke-width="13" stroke-linecap="round" fill="none">
|
||||
<circle cx="0" cy="-22" r="23"/>
|
||||
<path d="M 0 2 L 0 50"/><path d="M 0 22 L 21 22"/><path d="M 0 42 L 15 42"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- document tile -->
|
||||
<g transform="translate(1270,244)" filter="url(#sh)">
|
||||
<rect x="-78" y="-78" width="156" height="156" rx="48" fill="url(#glass)"/>
|
||||
<rect x="-78" y="-78" width="156" height="156" rx="48" fill="none" stroke="#FFFFFF" stroke-width="2" opacity="0.9"/>
|
||||
<rect x="-78" y="-78" width="156" height="92" rx="48" fill="url(#gloss)"/>
|
||||
<path d="M -36 -48 L 14 -48 L 38 -24 L 38 48 Q 38 55 31 55 L -29 55 Q -36 55 -36 48 Z" fill="#EFE9FE"/>
|
||||
<path d="M 14 -48 L 38 -24 L 21 -24 Q 14 -24 14 -31 Z" fill="#CDBCFB"/>
|
||||
<path d="M -16 10 L -3 24 L 21 -8" stroke="url(#purple)" stroke-width="13" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
</g>
|
||||
|
||||
<!-- stethoscope tile -->
|
||||
<g transform="translate(362,652)" filter="url(#sh)">
|
||||
<rect x="-78" y="-78" width="156" height="156" rx="48" fill="url(#glass)"/>
|
||||
<rect x="-78" y="-78" width="156" height="156" rx="48" fill="none" stroke="#FFFFFF" stroke-width="2" opacity="0.9"/>
|
||||
<rect x="-78" y="-78" width="156" height="92" rx="48" fill="url(#gloss)"/>
|
||||
<g stroke="url(#sky)" stroke-width="12" stroke-linecap="round" fill="none">
|
||||
<path d="M -36 -44 L -36 -10 A 23 23 0 0 0 10 -10 L 10 -44"/>
|
||||
<path d="M -13 12 Q -13 44 14 44"/>
|
||||
</g>
|
||||
<circle cx="-36" cy="-48" r="7.5" fill="#3E9BE0"/>
|
||||
<circle cx="10" cy="-48" r="7.5" fill="#3E9BE0"/>
|
||||
<circle cx="34" cy="44" r="19" fill="url(#purple)"/>
|
||||
<circle cx="34" cy="44" r="8" fill="#FFFFFF" opacity="0.7"/>
|
||||
</g>
|
||||
|
||||
<!-- scales tile -->
|
||||
<g transform="translate(1242,648)" filter="url(#sh)">
|
||||
<rect x="-78" y="-78" width="156" height="156" rx="48" fill="url(#glass)"/>
|
||||
<rect x="-78" y="-78" width="156" height="156" rx="48" fill="none" stroke="#FFFFFF" stroke-width="2" opacity="0.9"/>
|
||||
<rect x="-78" y="-78" width="156" height="92" rx="48" fill="url(#gloss)"/>
|
||||
<g stroke="url(#purple)" stroke-width="11" stroke-linecap="round" fill="none">
|
||||
<path d="M 0 -44 L 0 42"/><path d="M -26 46 L 26 46"/>
|
||||
<path d="M -42 -28 L 42 -28"/><path d="M -42 -28 L -42 -15"/><path d="M 42 -28 L 42 -15"/>
|
||||
<path d="M -65 -13 A 23 23 0 0 0 -19 -13"/>
|
||||
<path d="M 19 -13 A 23 23 0 0 0 65 -13"/>
|
||||
</g>
|
||||
<circle cx="0" cy="-50" r="9" fill="#7C4DF4"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.3 KiB |
Reference in New Issue
Block a user