initial commit (frontend)
This commit is contained in:
@@ -0,0 +1,127 @@
|
||||
<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="#0B2A52"/><stop offset="1" stop-color="#9FD3F7"/>
|
||||
</linearGradient>
|
||||
<filter id="blur" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="90"/></filter>
|
||||
<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="pink" x1="0" y1="0" x2="0.6" y2="1">
|
||||
<stop offset="0" stop-color="#FFA5A5"/><stop offset="1" stop-color="#F9585F"/>
|
||||
</linearGradient>
|
||||
<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="mint" x1="0" y1="0" x2="0.6" y2="1">
|
||||
<stop offset="0" stop-color="#6FE9AA"/><stop offset="1" stop-color="#22B964"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="amber" x1="0" y1="0" x2="0.6" y2="1">
|
||||
<stop offset="0" stop-color="#F8DE95"/><stop offset="1" stop-color="#DFAC2B"/>
|
||||
</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.5"/>
|
||||
<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="#08203F" flood-opacity="0.28"/>
|
||||
</filter>
|
||||
<filter id="shS" x="-55%" y="-55%" width="210%" height="210%">
|
||||
<feDropShadow dx="0" dy="10" stdDeviation="13" flood-color="#08203F" flood-opacity="0.24"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<rect width="1600" height="900" fill="url(#bg)"/>
|
||||
<g filter="url(#blur)" opacity="0.45">
|
||||
<circle cx="1330" cy="190" r="250" fill="#8ACDF5"/>
|
||||
<circle cx="230" cy="730" r="250" fill="#FFB3B3"/>
|
||||
<circle cx="800" cy="420" r="220" fill="#BBD8F8"/>
|
||||
<circle cx="180" cy="180" r="170" fill="#C7B4FB"/>
|
||||
</g>
|
||||
|
||||
<ellipse cx="800" cy="748" rx="220" ry="32" fill="#051A34" opacity="0.22"/>
|
||||
|
||||
<!-- device -->
|
||||
<g filter="url(#sh)">
|
||||
<rect x="660" y="190" width="280" height="530" rx="64" fill="url(#device)"/>
|
||||
<rect x="660" y="190" width="280" height="530" rx="64" fill="none" stroke="#FFFFFF" stroke-width="3" opacity="0.85"/>
|
||||
<rect x="682" y="212" width="236" height="486" rx="46" fill="#FFFFFF"/>
|
||||
<rect x="764" y="226" width="72" height="18" rx="9" fill="#E3E8EF"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="708" y="268" width="76" height="76" rx="24" fill="#DCEEFB"/>
|
||||
<rect x="816" y="268" width="76" height="76" rx="24" fill="#FFE1E1"/>
|
||||
<rect x="708" y="360" width="76" height="76" rx="24" fill="#E9E2FE"/>
|
||||
<rect x="816" y="360" width="76" height="76" rx="24" fill="#DFF7EA"/>
|
||||
<rect x="708" y="452" width="76" height="76" rx="24" fill="#FDF2D6"/>
|
||||
<rect x="816" y="452" width="76" height="76" rx="24" fill="#DCEEFB"/>
|
||||
<rect x="708" y="566" width="184" height="14" rx="7" fill="#E4EAF2"/>
|
||||
<rect x="708" y="598" width="124" height="12" rx="6" fill="#EDF1F6"/>
|
||||
<rect x="740" y="638" width="120" height="30" rx="15" fill="#E3F0FC"/>
|
||||
</g>
|
||||
|
||||
<!-- flashcards tile -->
|
||||
<g transform="translate(318,234)" filter="url(#sh)">
|
||||
<rect x="-72" y="-72" width="144" height="144" rx="44" fill="url(#sky)"/>
|
||||
<rect x="-72" y="-72" width="144" height="86" rx="44" fill="url(#gloss)"/>
|
||||
<rect x="-44" y="-32" width="78" height="56" rx="16" fill="#FFFFFF" opacity="0.5" transform="rotate(-10 -5 -4)"/>
|
||||
<rect x="-32" y="-18" width="78" height="56" rx="16" fill="#FFFFFF"/>
|
||||
<rect x="-16" y="2" width="46" height="10" rx="5" fill="#A6D9F7"/>
|
||||
<rect x="-16" y="20" width="28" height="9" rx="4.5" fill="#CDE8FA"/>
|
||||
</g>
|
||||
|
||||
<!-- book tile -->
|
||||
<g transform="translate(272,598)" filter="url(#sh)">
|
||||
<rect x="-72" y="-72" width="144" height="144" rx="44" fill="url(#pink)"/>
|
||||
<rect x="-72" y="-72" width="144" height="86" rx="44" fill="url(#gloss)"/>
|
||||
<path d="M -44 -34 Q -13 -45 0 -28 L 0 36 Q -13 21 -44 32 Z" fill="#FFFFFF"/>
|
||||
<path d="M 44 -34 Q 13 -45 0 -28 L 0 36 Q 13 21 44 32 Z" fill="#FFFFFF" opacity="0.72"/>
|
||||
<path d="M 0 -28 L 0 36" stroke="#FFC9CB" stroke-width="6" stroke-linecap="round"/>
|
||||
</g>
|
||||
|
||||
<!-- chat tile -->
|
||||
<g transform="translate(1286,244)" filter="url(#sh)">
|
||||
<rect x="-72" y="-72" width="144" height="144" rx="44" fill="url(#purple)"/>
|
||||
<rect x="-72" y="-72" width="144" height="86" rx="44" fill="url(#gloss)"/>
|
||||
<path d="M -42 -28 Q -42 -41 -29 -41 L 29 -41 Q 42 -41 42 -28 L 42 11 Q 42 24 29 24 L -4 24 L -25 43 L -25 24 L -29 24 Q -42 24 -42 11 Z" fill="#FFFFFF"/>
|
||||
<g fill="#CDBCFB"><circle cx="-19" cy="-8" r="7"/><circle cx="0" cy="-8" r="7"/><circle cx="19" cy="-8" r="7"/></g>
|
||||
</g>
|
||||
|
||||
<!-- headphones tile -->
|
||||
<g transform="translate(1330,612)" filter="url(#sh)">
|
||||
<rect x="-72" y="-72" width="144" height="144" rx="44" fill="url(#mint)"/>
|
||||
<rect x="-72" y="-72" width="144" height="86" rx="44" fill="url(#gloss)"/>
|
||||
<path d="M -34 12 A 34 34 0 0 1 34 12" stroke="#FFFFFF" stroke-width="12" fill="none" stroke-linecap="round"/>
|
||||
<rect x="-45" y="8" width="24" height="40" rx="12" fill="#FFFFFF"/>
|
||||
<rect x="21" y="8" width="24" height="40" rx="12" fill="#FFFFFF"/>
|
||||
</g>
|
||||
|
||||
<!-- small glass tiles -->
|
||||
<g transform="translate(500,122)" filter="url(#shS)">
|
||||
<rect x="-48" y="-48" width="96" height="96" rx="30" fill="url(#amber)"/>
|
||||
<rect x="-48" y="-48" width="96" height="58" rx="30" fill="url(#gloss)"/>
|
||||
<path d="M -14 -17 L 22 0 L -14 17 Z" fill="#FFFFFF"/>
|
||||
</g>
|
||||
<g transform="translate(1112,764)" filter="url(#shS)">
|
||||
<rect x="-48" y="-48" width="96" height="96" rx="30" fill="url(#glass)"/>
|
||||
<rect x="-48" y="-48" width="96" height="96" rx="30" fill="none" stroke="#FFFFFF" stroke-width="2" opacity="0.9"/>
|
||||
<g fill="#3E9BE0"><circle cx="-15" cy="-15" r="7.5"/><circle cx="15" cy="-15" r="7.5"/><circle cx="-15" cy="15" r="7.5"/><circle cx="15" cy="15" r="7.5"/></g>
|
||||
</g>
|
||||
<g transform="translate(508,778)" filter="url(#shS)">
|
||||
<rect x="-48" y="-48" width="96" height="96" rx="30" fill="url(#glass)"/>
|
||||
<rect x="-48" y="-48" width="96" height="96" rx="30" fill="none" stroke="#FFFFFF" stroke-width="2" opacity="0.9"/>
|
||||
<path d="M -22 -5 L -22 5 M -9 -16 L -9 16 M 5 -22 L 5 22 M 19 -11 L 19 11" stroke="#F9585F" stroke-width="10" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g transform="translate(1104,126)" filter="url(#shS)">
|
||||
<rect x="-48" y="-48" width="96" height="96" rx="30" fill="url(#glass)"/>
|
||||
<rect x="-48" y="-48" width="96" height="96" rx="30" fill="none" stroke="#FFFFFF" stroke-width="2" opacity="0.9"/>
|
||||
<path d="M -17 4 L -4 18 L 20 -13" stroke="#22B964" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.2 KiB |
Reference in New Issue
Block a user