lukasandClaude Opus 5.5
f82c7eb444
index.html carries the overlay markup and styles inline so it paints before any script; public/splash.js (external, for the CSP) plays the logo animation from icons/ultimo-splash.html, holds, fades out after ~3.25 s and removes itself. Skipped at phone sizes (same query as useIsMobile) and in pop-out compose windows; a click skips it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
113 lines
9.5 KiB
HTML
113 lines
9.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="icon" type="image/svg+xml" href="/ultimo-logo-signet.svg" />
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
|
<link rel="manifest" href="/manifest.webmanifest" />
|
|
<meta name="theme-color" content="#f3f4f6" media="(prefers-color-scheme: light)" />
|
|
<meta name="theme-color" content="#1b1e20" media="(prefers-color-scheme: dark)" />
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-title" content="Ultimo" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
|
<title>Ultimo Email</title>
|
|
<style>
|
|
/* Loading splash (public/splash.js). Dark grey like the app's dark theme. */
|
|
#ultimo-splash {
|
|
position: fixed; inset: 0; z-index: 9999;
|
|
display: grid; place-items: center;
|
|
background: #1b1e20;
|
|
transition: opacity .35s ease, visibility 0s linear .35s;
|
|
cursor: pointer;
|
|
}
|
|
#ultimo-splash.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
|
|
#ultimo-splash svg { width: min(46vmin, 340px); height: auto; overflow: visible; }
|
|
/* Never on a phone (same query as useIsMobile). */
|
|
@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
|
|
#ultimo-splash { display: none; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="ultimo-splash" aria-hidden="true">
|
|
<svg viewBox="-10 -6 65 56" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<linearGradient id="ul-g1" x1="54.340946" y1="122.84999" x2="54.340946" y2="162.66415" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.75684298,0,0,0.80151105,-19.989667,-137.1)">
|
|
<stop offset="0.20198774" stop-color="#f89629"/><stop offset="1" stop-color="#f74176"/>
|
|
</linearGradient>
|
|
<radialGradient id="ul-r1" cx="8.0343275" cy="13.452971" fx="8.0343275" fy="13.452971" r="16.678839" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-0.29273442,-0.00257918,0.01127876,-1.2801289,10.212159,-15.400302)">
|
|
<stop offset="0" stop-color="#fa4435" stop-opacity="1"/><stop offset="1" stop-color="#fa7367" stop-opacity="0"/>
|
|
</radialGradient>
|
|
<radialGradient id="ul-r2" cx="34.523952" cy="11.253304" fx="34.523952" fy="11.253304" r="16.740065" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.27572675,-0.00557307,0.0193391,0.95679742,24.457243,-42.568342)">
|
|
<stop offset="0" stop-color="#fadc56" stop-opacity="1"/><stop offset="1" stop-color="#faae3a" stop-opacity="0"/>
|
|
</radialGradient>
|
|
<linearGradient id="ul-gs" x1="0" y1="5.11" x2="0" y2="37.01" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0.202" stop-color="#f89629"/><stop offset="1" stop-color="#f74176"/>
|
|
</linearGradient>
|
|
<filter id="ul-sh" x="-30%" y="-30%" width="160%" height="160%">
|
|
<feDropShadow dx="0" dy="0.35" stdDeviation="0.5" flood-color="#000" flood-opacity="0.42"/>
|
|
</filter>
|
|
<filter id="ul-blur" x="-40%" y="-40%" width="180%" height="180%">
|
|
<feGaussianBlur stdDeviation="1.1"/>
|
|
</filter>
|
|
<g id="ul-logo" transform="translate(1.425541,43.741704)">
|
|
<path id="ul-main" fill="url(#ul-g1)" d="m 35.878324,-39.647594 c -2.15234,-7.4e-4 -4.0678,1.84724 -4.0671,4.1266 v 2.85212 c -0.073,-0.005 -0.14656,-0.007 -0.2202,-0.007 h -10.50012 -10.49855 c -0.0418,-7e-5 -0.0835,5.9e-4 -0.12516,0.002 v -2.78918 c -1.6e-4,-2.27807 -1.9592603,-4.12477 -4.1103803,-4.12494 -2.15111,1.8e-4 -4.20874,1.84687 -4.2089,4.12494 v 15.55127 c -4e-5,0.005 -0.0295,3.84339 2.173,7.60498 2.20396,3.7640196 7.0382003,7.3825696 14.4526703,7.3825696 h 4.58067 c 7.4177,0 12.26918,-3.66617 14.50586,-7.4422096 2.23668,-3.77604 2.27039,-7.63481 2.27039,-7.63481 l 0.002,-0.0344 v -15.48541 c 7e-4,-2.27872 -2.10202,-4.12642 -4.25374,-4.1266 z m -2.00792,7.9252 v 11.59858 0.0286 c 0,0 -0.0664,2.0824 -1.31139,4.18416 -0.57202,0.96572 -1.44541,2.15762 -2.91767,2.99793 -1.47227,0.8403 -3.46066,1.33079 -6.27223,1.33079 h -4.58106 c -2.82381,0 -4.79864,-0.47938 -6.25697,-1.30429 -1.45833,-0.8249 -2.31357,-2.00343 -2.8590102,-2.93496 -1.1966401,-2.04365 -1.2300401,-4.07193 -1.2300401,-4.07193 l -10e-4,-0.0141 v -0.0157 -11.69637 l 1.96e-4,-0.0142 0.0035,-0.008 c 0.05128,0.0487 0.18806,0.16304 0.24192,0.20765 l 5.4247013,4.54513 5.51504,4.57144 c 0.65194,0.53945 2.27903,0.53945 2.93097,0 l 5.51504,-4.57144 5.487378,-4.57351 c 0.0199,-0.0164 0.04083,-0.0331 0.06003,-0.048 l 0.02765,-0.0215 z"/>
|
|
<path fill="url(#ul-r1)" d="m 2.3483903,-36.677919 c -0.1292796,0.384121 -0.2004748,0.792004 -0.2005045,1.214913 v 15.550989 c -4e-5,0.005 -0.029506,3.84363 2.172994,7.60522 2.20396,3.7640196 7.0383952,7.3824946 14.4528652,7.3824946 h 4.580598 c 5.433936,0 9.490679,-1.96731 12.151197,-4.504117 -1.517177,-1.2182566 -3.218664,-2.5953336 -5.013648,-4.0550496 -0.258984,0.201994 -0.541601,0.394146 -0.850594,0.570508 -1.47227,0.8403 -3.460398,1.330668 -6.271968,1.330668 h -4.581116 c -2.82381,0 -4.798652,-0.479403 -6.256982,-1.304313 -1.45833,-0.8249 -2.313817,-2.003692 -2.8592572,-2.935222 -1.1966406,-2.04365 -1.2298996,-4.071586 -1.2298996,-4.071586 l -0.00103,-0.01395 v -0.01602 -11.696444 -0.01395 l 0.00362,-0.0083 c 0.05128,0.0487 0.1879857,0.16313 0.2418457,0.20774 l 5.4249921,4.545459 5.514909,4.571297 c 0.0844,0.06984 0.185312,0.130661 0.298173,0.182418 -5.07081,-4.173874 -9.542211,-7.882397 -11.4706242,-9.500169 -2.2977093,-1.895939 -4.3807977,-3.616666 -6.1055705,-5.042586 z"/>
|
|
<path fill="url(#ul-r2)" d="m 39.930076,-36.730629 c -1.718284,1.420541 -3.7895,3.131915 -6.072498,5.015715 -1.93499,1.62329 -6.430112,5.351263 -11.522294,9.54257 0.08232,-0.04302 0.156783,-0.0915 0.221692,-0.145211 l 5.514909,-4.571297 5.48752,-4.573881 c 0.0199,-0.0164 0.04075,-0.03316 0.05994,-0.04806 l 0.0279,-0.02119 0.222726,-0.190169 v 11.598258 0.02894 c 0,0 -0.06656,2.081964 -1.311548,4.183724 -0.57202,0.96572 -1.445392,2.157957 -2.917652,2.998267 -1.47227,0.8403 -3.460398,1.330668 -6.271968,1.330668 h -4.581116 c -2.82381,0 -4.798652,-0.479403 -6.256982,-1.304313 -0.308682,-0.174605 -0.590588,-0.364744 -0.848011,-0.565341 -1.8055532,1.467965 -3.5132252,2.849693 -5.0307004,4.0674516 2.6425302,2.518552 6.6894504,4.460193 12.1212244,4.460193 h 4.580599 c 7.4177,0 12.269411,-3.665883 14.506091,-7.4419226 2.23668,-3.77604 2.270146,-7.635193 2.270146,-7.635193 l 0.0021,-0.03411 v -15.485354 c 1.06e-4,-0.420906 -0.07162,-0.827177 -0.202078,-1.209745 z"/>
|
|
</g>
|
|
<!-- Mask that reveals the logo's U as the stroke draws -->
|
|
<mask id="ul-mask-u" maskUnits="userSpaceOnUse" x="-20" y="-20" width="100" height="100">
|
|
<path id="ul-stroke" d="M7.73,8.31 L7.73,23.8 C7.73,30.6 13.6,34.65 22.57,34.65 C31.5,34.65 37.4,30.6 37.4,23.8 L37.4,8.31"
|
|
pathLength="1" fill="none" stroke="#fff" stroke-width="9.6" stroke-linecap="round"
|
|
stroke-dasharray="1 2" stroke-dashoffset="1"/>
|
|
</mask>
|
|
<!-- Logo colours limited to the top-flap area -->
|
|
<!-- Area between the U's arms: inside it the logo's own fill is exactly the flap -->
|
|
<clipPath id="ul-clip-flap"><path d="M10.093,11.066 L35.296,11.066 L35.296,12.1 L22.69,23.6 L10.093,12.1 Z"/></clipPath>
|
|
<!-- Darkens the coloured flap while it is mid-fold -->
|
|
<filter id="ul-dark" x="0" y="0" width="1" height="1">
|
|
<feComponentTransfer>
|
|
<feFuncR id="ul-dr" type="linear" slope="1"/><feFuncG id="ul-dg" type="linear" slope="1"/><feFuncB id="ul-db" type="linear" slope="1"/>
|
|
</feComponentTransfer>
|
|
</filter>
|
|
</defs>
|
|
|
|
<!-- Envelope (white/grey paper) -->
|
|
<g id="ul-env">
|
|
<g id="ul-rest">
|
|
<!-- Thin paper margin tucked under the U so no background shows along its inner edge -->
|
|
<rect id="ul-under" x="9.8" y="12.1" width="25.8" height="20.4" fill="rgb(250,250,253)" opacity="0" mask="url(#ul-mask-u)"/>
|
|
<rect x="10.093" y="11.066" width="25.203" height="21.064" fill="rgb(226,226,230)"/>
|
|
<path id="ul-fl" filter="url(#ul-sh)"/>
|
|
<path id="ul-fr" filter="url(#ul-sh)"/>
|
|
<path id="ul-fb" filter="url(#ul-sh)"/>
|
|
</g>
|
|
<!-- Top flap: exact outline of the logo's V flap (shown folded); flipped about the top edge while folding -->
|
|
<!-- Inside of the flap = white paper; outside = the logo's colours (clipped to the flap) -->
|
|
<g id="ul-ftg" filter="url(#ul-sh)">
|
|
<path id="ul-ft"
|
|
d="M10.093,11.066 L35.296,11.066 L35.296,12.019 L35.208,12.089 L24.206,21.234 C23.554,21.773 21.927,21.773 21.275,21.234 L10.335,12.117 L10.093,11.910 Z"/>
|
|
<g id="ul-fto" opacity="0" filter="url(#ul-dark)">
|
|
<use href="#ul-logo" clip-path="url(#ul-clip-flap)"/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- U drawn over the envelope: the real logo artwork (with its side gradients) revealed by a growing stroke -->
|
|
<g id="ul-ug" opacity="0">
|
|
<use href="#ul-logo" mask="url(#ul-mask-u)"/>
|
|
</g>
|
|
|
|
<!-- Final logo + glow -->
|
|
<use id="ul-glow" href="#ul-logo" filter="url(#ul-blur)" opacity="0"/>
|
|
<use id="ul-final" href="#ul-logo" opacity="0"/>
|
|
</svg>
|
|
</div>
|
|
<script src="/splash.js"></script>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|