nucleo000/perfil
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: actualizar iconos maskable con diseño azul
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m0s
Details

Browse Source
This commit is contained in:
josedario87
2025-12-05 13:10:44 -06:00
parent eeaf64e9f4
commit a2b50c8b30
2 changed files with 85 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
nuxt4/public/icon-512x512-maskable.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 323 KiB

108
nuxt4/public/icon-maskable.svg
View File

@@ -1,35 +1,95 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="none">
<!-- Background gradient para maskable (fondo completo sin transparencia) -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#00DC82;stop-opacity:1" />
<stop offset="100%" style="stop-color:#00A155;stop-opacity:1" />
<!-- Gradiente del fondo -->
<linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#b3e0ff"/>
<stop offset="100%" style="stop-color:#e6f4ff"/>
</linearGradient>
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#4A90E2;stop-opacity:1" />
<stop offset="100%" style="stop-color:#2E5C8A;stop-opacity:1" />
<!-- Gradiente del círculo principal -->
<linearGradient id="circleGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#4da6ff"/>
<stop offset="50%" style="stop-color:#1a8cff"/>
<stop offset="100%" style="stop-color:#0066cc"/>
</linearGradient>
<!-- Gradiente para la zona de día -->
<linearGradient id="dayGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#66b3ff"/>
<stop offset="100%" style="stop-color:#3399ff"/>
</linearGradient>
<!-- Gradiente para la zona de noche -->
<linearGradient id="nightGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#1a75cc"/>
<stop offset="100%" style="stop-color:#004d99"/>
</linearGradient>
<!-- Gradiente para los cuadrados de apps -->
<linearGradient id="appGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#99d6ff"/>
<stop offset="100%" style="stop-color:#66c2ff"/>
</linearGradient>
<!-- Gradiente del sol -->
<radialGradient id="sunGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:#ffee00"/>
<stop offset="100%" style="stop-color:#ffcc00"/>
</radialGradient>
</defs>
<!-- Fondo completo (sin transparencia para evitar el blanco en Windows) -->
<rect width="512" height="512" fill="url(#grad1)"/>
<!-- Círculo principal con borde brillante -->
<circle cx="256" cy="256" r="230" fill="url(#circleGrad)" stroke="#80ccff" stroke-width="4"/>
<!-- Contenido en el 80% central (safe zone para maskable icons) -->
<g transform="translate(256, 256) scale(0.9) translate(-256, -256)">
<!-- Shield shape (Authentik security) -->
<path d="M256 80 L380 140 L380 280 Q380 360 256 420 Q132 360 132 280 L132 140 Z"
fill="url(#grad2)" opacity="0.3"/>
<!-- Zona de día (arriba izquierda) -->
<path d="M256 26 C140 26 46 100 30 200 L256 256 L256 26 Z" fill="url(#dayGrad)" opacity="0.6"/>
<!-- Letter N (Nuxt) -->
<path d="M180 200 L180 340 L220 340 L220 260 L292 340 L332 340 L332 200 L292 200 L292 280 L220 200 Z"
fill="white" stroke="white" stroke-width="4"/>
<!-- Zona de noche (abajo derecha) -->
<path d="M256 486 C372 486 466 412 482 312 L256 256 L256 486 Z" fill="url(#nightGrad)" opacity="0.4"/>
<!-- Lock icon (Authentication) -->
<g transform="translate(340, 180)">
<rect x="-20" y="10" width="40" height="50" rx="5" fill="white" opacity="0.9"/>
<path d="M -15 10 L -15 -5 Q -15 -20 0 -20 Q 15 -20 15 -5 L 15 10"
stroke="white" stroke-width="6" fill="none" opacity="0.9"/>
<circle cx="0" cy="30" r="5" fill="#00DC82"/>
<!-- Sol -->
<circle cx="140" cy="120" r="35" fill="url(#sunGrad)"/>
<!-- Rayos del sol -->
<g fill="#ffcc00" opacity="0.8">
<ellipse cx="140" cy="65" rx="4" ry="12"/>
<ellipse cx="140" cy="175" rx="4" ry="12"/>
<ellipse cx="85" cy="120" rx="12" ry="4"/>
<ellipse cx="195" cy="120" rx="12" ry="4"/>
<ellipse cx="100" cy="80" rx="4" ry="10" transform="rotate(-45 100 80)"/>
<ellipse cx="180" cy="80" rx="4" ry="10" transform="rotate(45 180 80)"/>
<ellipse cx="100" cy="160" rx="4" ry="10" transform="rotate(45 100 160)"/>
<ellipse cx="180" cy="160" rx="4" ry="10" transform="rotate(-45 180 160)"/>
</g>
<!-- Nube -->
<g fill="white" opacity="0.95">
<ellipse cx="320" cy="110" rx="45" ry="30"/>
<ellipse cx="280" cy="120" rx="30" ry="22"/>
<ellipse cx="355" cy="115" rx="28" ry="20"/>
</g>
<!-- Grid de apps (6 cuadrados 2x3) -->
<g fill="url(#appGrad)" stroke="#b3e0ff" stroke-width="2">
<rect x="155" y="210" width="55" height="55" rx="10"/>
<rect x="225" y="210" width="55" height="55" rx="10"/>
<rect x="295" y="210" width="55" height="55" rx="10"/>
<rect x="155" y="280" width="55" height="55" rx="10"/>
<rect x="225" y="280" width="55" height="55" rx="10"/>
<rect x="295" y="280" width="55" height="55" rx="10"/>
</g>
<!-- Luna -->
<g transform="translate(380, 380)">
<circle cx="0" cy="0" r="28" fill="#b3e0ff"/>
<circle cx="12" cy="-8" r="25" fill="url(#nightGrad)"/>
</g>
<!-- Estrellas -->
<g fill="white" opacity="0.8">
<circle cx="100" cy="350" r="3"/>
<circle cx="85" cy="400" r="2"/>
<circle cx="130" cy="420" r="2.5"/>
<circle cx="420" cy="300" r="2"/>
<circle cx="440" cy="340" r="2.5"/>
<circle cx="400" cy="420" r="2"/>
<circle cx="350" cy="440" r="3"/>
</g>
<!-- Brillo superior del círculo -->
<ellipse cx="200" cy="80" rx="80" ry="20" fill="white" opacity="0.2"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB