Schwitzz
5085357dad
Introduce a full-screen brand splash shown while the project store is loading (status !== ready). Uses a new vertical logo lockup (P tile / PubScript wordmark / S tile) matching the existing typewriter-tile design, centered on the active theme background with a subtle fade/appear animation and a graceful fade-out once the app is ready. - apps/web/public/logo-lockup.svg: vertical lockup variant of the mark - SplashScreen.tsx: overlay driven by the store's load status - splash.css: full-screen overlay + keyframe animations - wire into App.tsx and import splash.css in main.tsx
50 lines
2.2 KiB
XML
50 lines
2.2 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 560" width="480" height="560" role="img" aria-label="PubScript">
|
|
<defs>
|
|
<linearGradient id="lk-gold" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0" stop-color="#f9edc4"/>
|
|
<stop offset="0.27" stop-color="#e8c76a"/>
|
|
<stop offset="0.52" stop-color="#c9a23a"/>
|
|
<stop offset="0.72" stop-color="#f4d683"/>
|
|
<stop offset="1" stop-color="#937420"/>
|
|
</linearGradient>
|
|
<radialGradient id="lk-ivory" cx="45%" cy="38%" r="72%">
|
|
<stop offset="0" stop-color="#fffdf4"/>
|
|
<stop offset="0.72" stop-color="#f5ecd6"/>
|
|
<stop offset="1" stop-color="#e8dcbd"/>
|
|
</radialGradient>
|
|
<linearGradient id="lk-word" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0" stop-color="#f4d683"/>
|
|
<stop offset="0.5" stop-color="#d8b25a"/>
|
|
<stop offset="1" stop-color="#b8912f"/>
|
|
</linearGradient>
|
|
<filter id="lk-shadow" x="-35%" y="-35%" width="170%" height="170%">
|
|
<feDropShadow dx="0" dy="5" stdDeviation="8" flood-color="#000000" flood-opacity="0.4"/>
|
|
</filter>
|
|
</defs>
|
|
|
|
<!-- P tile -->
|
|
<g filter="url(#lk-shadow)">
|
|
<circle cx="240" cy="120" r="92" fill="url(#lk-gold)"/>
|
|
<circle cx="240" cy="120" r="78" fill="url(#lk-ivory)"/>
|
|
<circle cx="240" cy="120" r="78" fill="none" stroke="#8a6d1c" stroke-width="1.5" opacity="0.5"/>
|
|
<text x="240" y="120" text-anchor="middle" dominant-baseline="central"
|
|
font-family="Georgia, 'Times New Roman', serif" font-size="116" font-weight="600"
|
|
fill="#21242c">P</text>
|
|
</g>
|
|
|
|
<!-- Wordmark -->
|
|
<text x="240" y="300" text-anchor="middle" dominant-baseline="central"
|
|
font-family="Georgia, 'Times New Roman', serif" font-size="80" letter-spacing="1"
|
|
fill="url(#lk-word)">PubScript</text>
|
|
|
|
<!-- S tile -->
|
|
<g filter="url(#lk-shadow)">
|
|
<circle cx="240" cy="480" r="92" fill="url(#lk-gold)"/>
|
|
<circle cx="240" cy="480" r="78" fill="url(#lk-ivory)"/>
|
|
<circle cx="240" cy="480" r="78" fill="none" stroke="#8a6d1c" stroke-width="1.5" opacity="0.5"/>
|
|
<text x="240" y="480" text-anchor="middle" dominant-baseline="central"
|
|
font-family="Georgia, 'Times New Roman', serif" font-size="116" font-weight="600"
|
|
fill="#21242c">S</text>
|
|
</g>
|
|
</svg>
|