mirror of
git://f0xx.org/android_cast
synced 2026-07-29 05:17:39 +03:00
logos
This commit is contained in:
Anton Afanasyeu
38
examples/app_hub/assets/hub-logo-fragment-globe.svg
Normal file
38
examples/app_hub/assets/hub-logo-fragment-globe.svg
Normal file
@@ -0,0 +1,38 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" role="img" aria-label="Globe fragment">
|
||||
<defs>
|
||||
<radialGradient id="globeOcean" cx="38%" cy="30%" r="72%">
|
||||
<stop offset="0%" stop-color="#243044"/>
|
||||
<stop offset="50%" stop-color="#1a2332"/>
|
||||
<stop offset="100%" stop-color="#0a0e14"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="globeTerminator" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#3d8bfd" stop-opacity="0.08"/>
|
||||
<stop offset="40%" stop-color="#3d8bfd" stop-opacity="0.18"/>
|
||||
<stop offset="70%" stop-color="#0a0e14" stop-opacity="0.55"/>
|
||||
<stop offset="100%" stop-color="#0a0e14" stop-opacity="0.80"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="globeSpecular" cx="35%" cy="28%" r="45%">
|
||||
<stop offset="0%" stop-color="#e7ecf3" stop-opacity="0.12"/>
|
||||
<stop offset="100%" stop-color="#e7ecf3" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="continentGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#5a6b82"/>
|
||||
<stop offset="100%" stop-color="#3d5060"/>
|
||||
</linearGradient>
|
||||
<clipPath id="globeClip"><circle cx="720" cy="560" r="330"/></clipPath>
|
||||
</defs>
|
||||
<g id="globe-body"><circle cx="720" cy="560" r="330" fill="url(#globeOcean)" stroke="#2d3a4f" stroke-width="1.5"/></g>
|
||||
<g id="globe-grid" clip-path="url(#globeClip)" fill="none" stroke="#e7ecf3" stroke-opacity="0.28" stroke-width="1.5">
|
||||
<ellipse cx="720" cy="560" rx="330" ry="78"/><ellipse cx="720" cy="560" rx="330" ry="155"/><ellipse cx="720" cy="560" rx="330" ry="232"/><ellipse cx="720" cy="560" rx="330" ry="295"/>
|
||||
<line x1="720" y1="230" x2="720" y2="890"/><path d="M 500 230 Q 480 560 500 890"/><path d="M 940 230 Q 960 560 940 890"/>
|
||||
<path d="M 580 230 Q 548 560 580 890"/><path d="M 860 230 Q 892 560 860 890"/>
|
||||
</g>
|
||||
<g id="globe-continents" clip-path="url(#globeClip)" fill="url(#continentGrad)" stroke="#8b9cb3" stroke-opacity="0.35" stroke-width="1">
|
||||
<path d="M 590 350 Q 610 325 655 320 Q 700 315 745 328 Q 810 335 855 355 Q 900 375 895 415 Q 888 445 860 458 Q 830 470 795 462 Q 770 468 750 488 Q 728 510 700 505 Q 668 498 640 480 Q 610 462 592 435 Q 570 405 590 350 Z"/>
|
||||
<path d="M 640 480 Q 655 490 668 512 Q 680 535 678 570 Q 676 610 662 645 Q 648 678 628 692 Q 608 700 592 685 Q 575 668 572 640 Q 568 605 576 568 Q 582 535 590 508 Q 600 488 614 480 Q 628 472 640 480 Z"/>
|
||||
<path d="M 430 360 Q 415 340 400 355 Q 390 372 398 400 Q 408 430 428 448 Q 450 464 468 455 Q 480 444 474 420 Q 468 395 448 375 Q 440 368 430 360 Z"/>
|
||||
</g>
|
||||
<circle id="globe-terminator" cx="720" cy="560" r="330" fill="url(#globeTerminator)" clip-path="url(#globeClip)"/>
|
||||
<circle cx="720" cy="560" r="330" fill="url(#globeSpecular)" clip-path="url(#globeClip)"/>
|
||||
<circle cx="720" cy="560" r="330" fill="none" stroke="#3d8bfd" stroke-opacity="0.25" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
40
examples/app_hub/assets/hub-logo-fragment-rocket.svg
Normal file
40
examples/app_hub/assets/hub-logo-fragment-rocket.svg
Normal file
@@ -0,0 +1,40 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" role="img" aria-label="Rocket fragment">
|
||||
<defs>
|
||||
<linearGradient id="rocketBodyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#e7ecf3"/>
|
||||
<stop offset="35%" stop-color="#c8d4e3"/>
|
||||
<stop offset="70%" stop-color="#8b9cb3"/>
|
||||
<stop offset="100%" stop-color="#4a5a6e"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="rocketUnderGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#4a5a6e"/>
|
||||
<stop offset="100%" stop-color="#2d3a4f"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="wingGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#3d8bfd"/>
|
||||
<stop offset="100%" stop-color="#1a2332"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="nozzleGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
|
||||
<stop offset="30%" stop-color="#5eead4" stop-opacity="0.9"/>
|
||||
<stop offset="65%" stop-color="#3d8bfd" stop-opacity="0.6"/>
|
||||
<stop offset="100%" stop-color="#3d8bfd" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<filter id="nozzleFilter" x="-100%" y="-100%" width="300%" height="300%">
|
||||
<feGaussianBlur stdDeviation="14" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="rocketship" transform="translate(1210,390) rotate(-32) scale(1,-1)">
|
||||
<path d="M -340 0 L -300 -22 L -80 -26 L 0 0 L -80 8 L -300 8 Z" fill="url(#rocketUnderGrad)" stroke="#2d3a4f" stroke-width="1.2"/>
|
||||
<path d="M -300 22 L -80 26 L 0 0 L -80 -8 L -300 -8 Z" fill="url(#rocketBodyGrad)" stroke="#1a2332" stroke-width="1.2"/>
|
||||
<path d="M -290 -6 L -100 -8 L -60 -4 L -100 0 L -290 0 Z" fill="#3d8bfd" opacity="0.85"/>
|
||||
<path d="M -80 -26 Q 30 -14 80 0 Q 30 14 -80 26 L -80 -26 Z" fill="#e7ecf3" stroke="#8b9cb3" stroke-width="1"/>
|
||||
<path d="M -60 -16 Q -30 -14 -10 -10 Q -30 -6 -60 -4 Z" fill="#0a0e14" stroke="#3d8bfd" stroke-width="1"/>
|
||||
<path d="M -280 22 L -160 22 L -100 90 L -240 70 Z" fill="url(#wingGrad)" stroke="#2d3a4f" stroke-width="1" opacity="0.95"/>
|
||||
<path d="M -260 -22 L -180 -22 L -160 -55 L -240 -45 Z" fill="#3d8bfd" stroke="#1a2332" stroke-width="1" opacity="0.80"/>
|
||||
<ellipse cx="-310" cy="0" rx="32" ry="20" fill="#2d3a4f" stroke="#8b9cb3" stroke-width="1"/>
|
||||
<ellipse cx="-310" cy="0" rx="24" ry="15" fill="#1a2332"/>
|
||||
<ellipse cx="-342" cy="0" rx="20" ry="20" fill="url(#nozzleGlow)" filter="url(#nozzleFilter)" opacity="0.90"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
28
examples/app_hub/assets/hub-logo-fragment-space.svg
Normal file
28
examples/app_hub/assets/hub-logo-fragment-space.svg
Normal file
@@ -0,0 +1,28 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" role="img" aria-label="Space fragment">
|
||||
<defs>
|
||||
<radialGradient id="spaceBgGrad" cx="52%" cy="48%" r="75%">
|
||||
<stop offset="0%" stop-color="#1a2332"/>
|
||||
<stop offset="55%" stop-color="#0a0e14"/>
|
||||
<stop offset="100%" stop-color="#060810"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="nebulaAmber" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#b45309" stop-opacity="0.22"/>
|
||||
<stop offset="60%" stop-color="#92400e" stop-opacity="0.10"/>
|
||||
<stop offset="100%" stop-color="#78350f" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="nebulaBlue" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#1d4ed8" stop-opacity="0.20"/>
|
||||
<stop offset="60%" stop-color="#1e3a5f" stop-opacity="0.10"/>
|
||||
<stop offset="100%" stop-color="#0f172a" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect id="space-bg" width="1920" height="1080" fill="url(#spaceBgGrad)"/>
|
||||
<ellipse id="nebula-amber" cx="310" cy="220" rx="380" ry="260" fill="url(#nebulaAmber)" transform="rotate(-18 310 220)"/>
|
||||
<ellipse id="nebula-blue" cx="1640" cy="870" rx="420" ry="300" fill="url(#nebulaBlue)" transform="rotate(12 1640 870)"/>
|
||||
<g id="stars-layer" fill="#e7ecf3" opacity="0.8">
|
||||
<circle cx="164" cy="310" r="2"/><circle cx="1680" cy="140" r="1.8"/><circle cx="980" cy="920" r="2"/>
|
||||
<circle cx="108" cy="155" r="1.3"/><circle cx="380" cy="186" r="1.4"/><circle cx="1160" cy="160" r="1.5"/>
|
||||
<circle cx="42" cy="38" r="0.8"/><circle cx="462" cy="108" r="0.7"/><circle cx="910" cy="30" r="1"/>
|
||||
<circle cx="1310" cy="40" r="0.7"/><circle cx="1760" cy="380" r="1.4"/><circle cx="1740" cy="820" r="0.6"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
22
examples/app_hub/assets/hub-logo-fragment-tail.svg
Normal file
22
examples/app_hub/assets/hub-logo-fragment-tail.svg
Normal file
@@ -0,0 +1,22 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" role="img" aria-label="Tail fragment">
|
||||
<defs>
|
||||
<linearGradient id="exhaustGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#5eead4" stop-opacity="0"/>
|
||||
<stop offset="20%" stop-color="#5eead4" stop-opacity="0.4"/>
|
||||
<stop offset="55%" stop-color="#3d8bfd" stop-opacity="0.75"/>
|
||||
<stop offset="80%" stop-color="#5eead4" stop-opacity="0.95"/>
|
||||
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.9"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="exhaustCore" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
|
||||
<stop offset="50%" stop-color="#ffffff" stop-opacity="0.4"/>
|
||||
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.95"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="exhaust-tail">
|
||||
<path d="M 430 810 Q 540 740 660 670 Q 780 600 920 540 Q 1040 488 1148 460" fill="none" stroke="url(#exhaustGrad)" stroke-width="60" stroke-linecap="round" opacity="0.18"/>
|
||||
<path d="M 430 810 Q 540 740 660 670 Q 780 600 920 540 Q 1040 488 1148 460" fill="none" stroke="url(#exhaustGrad)" stroke-width="32" stroke-linecap="round" opacity="0.45"/>
|
||||
<path d="M 432 808 Q 542 738 662 668 Q 782 598 922 538 Q 1042 486 1150 458" fill="none" stroke="url(#exhaustCore)" stroke-width="10" stroke-linecap="round" opacity="0.72"/>
|
||||
<path d="M 432 808 Q 542 738 662 668 Q 782 598 922 538 Q 1042 486 1150 458" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" opacity="0.55"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
BIN
examples/app_hub/assets/hub-logo-space-bg.png
Normal file
BIN
examples/app_hub/assets/hub-logo-space-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 387 KiB |
441
examples/app_hub/assets/hub-logo-space-bg.svg
Normal file
441
examples/app_hub/assets/hub-logo-space-bg.svg
Normal file
@@ -0,0 +1,441 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" role="img" aria-label="Android Cast logo - space background variant">
|
||||
<!--
|
||||
ENTITY MAP (for targeted editing):
|
||||
#space-bg - deep outer space fill + nebula fogs
|
||||
#stars-layer - individual star points and blinks
|
||||
#nebula-amber - warm amber cosmic fog (upper-left region)
|
||||
#nebula-blue - cool blue cosmic fog (lower-right region)
|
||||
#globe-body - Earth sphere base fill
|
||||
#globe-grid - Mercator longitude/latitude lines
|
||||
#globe-continents - landmass shapes (Eurasia, Africa, Americas)
|
||||
#globe-terminator - day/night shadow gradient overlay
|
||||
#exhaust-tail - rocket exhaust/tail from bottom-left of globe toward nozzle
|
||||
#rocketship - full rocket assembly (body, wings, cockpit, nozzle, glow)
|
||||
-->
|
||||
<defs>
|
||||
<!-- Space deep bg -->
|
||||
<radialGradient id="spaceBgGrad" cx="52%" cy="48%" r="75%">
|
||||
<stop offset="0%" stop-color="#1a2332"/>
|
||||
<stop offset="55%" stop-color="#0a0e14"/>
|
||||
<stop offset="100%" stop-color="#060810"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Globe ocean fill -->
|
||||
<radialGradient id="globeOcean" cx="38%" cy="30%" r="72%">
|
||||
<stop offset="0%" stop-color="#243044"/>
|
||||
<stop offset="50%" stop-color="#1a2332"/>
|
||||
<stop offset="100%" stop-color="#0a0e14"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Globe terminator (day/night) -->
|
||||
<linearGradient id="globeTerminator" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#3d8bfd" stop-opacity="0.08"/>
|
||||
<stop offset="40%" stop-color="#3d8bfd" stop-opacity="0.18"/>
|
||||
<stop offset="70%" stop-color="#0a0e14" stop-opacity="0.55"/>
|
||||
<stop offset="100%" stop-color="#0a0e14" stop-opacity="0.80"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Globe specular highlight -->
|
||||
<radialGradient id="globeSpecular" cx="35%" cy="28%" r="45%">
|
||||
<stop offset="0%" stop-color="#e7ecf3" stop-opacity="0.12"/>
|
||||
<stop offset="100%" stop-color="#e7ecf3" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Exhaust tail gradient: thin transparent at origin, thick glowing at nozzle -->
|
||||
<linearGradient id="exhaustGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#5eead4" stop-opacity="0"/>
|
||||
<stop offset="20%" stop-color="#5eead4" stop-opacity="0.4"/>
|
||||
<stop offset="55%" stop-color="#3d8bfd" stop-opacity="0.75"/>
|
||||
<stop offset="80%" stop-color="#5eead4" stop-opacity="0.95"/>
|
||||
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.9"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="exhaustCore" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
|
||||
<stop offset="50%" stop-color="#ffffff" stop-opacity="0.4"/>
|
||||
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.95"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Nebula amber fog -->
|
||||
<radialGradient id="nebulaAmber" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#b45309" stop-opacity="0.22"/>
|
||||
<stop offset="60%" stop-color="#92400e" stop-opacity="0.10"/>
|
||||
<stop offset="100%" stop-color="#78350f" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Nebula blue fog -->
|
||||
<radialGradient id="nebulaBlue" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#1d4ed8" stop-opacity="0.20"/>
|
||||
<stop offset="60%" stop-color="#1e3a5f" stop-opacity="0.10"/>
|
||||
<stop offset="100%" stop-color="#0f172a" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Rocket body gradient -->
|
||||
<linearGradient id="rocketBodyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#e7ecf3"/>
|
||||
<stop offset="35%" stop-color="#c8d4e3"/>
|
||||
<stop offset="70%" stop-color="#8b9cb3"/>
|
||||
<stop offset="100%" stop-color="#4a5a6e"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Rocket underbelly (flipped: underside now on top) -->
|
||||
<linearGradient id="rocketUnderGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#4a5a6e"/>
|
||||
<stop offset="100%" stop-color="#2d3a4f"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Rocket wing -->
|
||||
<linearGradient id="wingGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#3d8bfd"/>
|
||||
<stop offset="100%" stop-color="#1a2332"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Nozzle glow -->
|
||||
<radialGradient id="nozzleGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
|
||||
<stop offset="30%" stop-color="#5eead4" stop-opacity="0.9"/>
|
||||
<stop offset="65%" stop-color="#3d8bfd" stop-opacity="0.6"/>
|
||||
<stop offset="100%" stop-color="#3d8bfd" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Continent fill -->
|
||||
<linearGradient id="continentGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#5a6b82"/>
|
||||
<stop offset="100%" stop-color="#3d5060"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Glow filter -->
|
||||
<filter id="glow" x="-60%" y="-60%" width="220%" height="220%">
|
||||
<feGaussianBlur stdDeviation="8" result="b"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="b"/>
|
||||
<feMergeNode in="b"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<!-- Soft glow for nozzle -->
|
||||
<filter id="nozzleFilter" x="-100%" y="-100%" width="300%" height="300%">
|
||||
<feGaussianBlur stdDeviation="14" result="b"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="b"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<!-- Blink star filter -->
|
||||
<filter id="blink" x="-200%" y="-200%" width="500%" height="500%">
|
||||
<feGaussianBlur stdDeviation="2.5" result="b"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="b"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<!-- Globe clip -->
|
||||
<clipPath id="globeClip">
|
||||
<circle cx="720" cy="560" r="330"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<!-- #space-bg : deep space fill -->
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<rect id="space-bg" width="1920" height="1080" fill="url(#spaceBgGrad)"/>
|
||||
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<!-- #nebula-amber : warm cosmic fog upper-left -->
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<ellipse id="nebula-amber" cx="310" cy="220" rx="380" ry="260" fill="url(#nebulaAmber)" transform="rotate(-18 310 220)"/>
|
||||
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<!-- #nebula-blue : cool cosmic fog lower-right -->
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<ellipse id="nebula-blue" cx="1640" cy="870" rx="420" ry="300" fill="url(#nebulaBlue)" transform="rotate(12 1640 870)"/>
|
||||
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<!-- #stars-layer : star field + blinks -->
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<g id="stars-layer" fill="#e7ecf3">
|
||||
<!-- Tiny dim stars -->
|
||||
<circle cx="42" cy="38" r="0.8" opacity="0.45"/>
|
||||
<circle cx="128" cy="92" r="0.7" opacity="0.40"/>
|
||||
<circle cx="195" cy="18" r="0.9" opacity="0.50"/>
|
||||
<circle cx="280" cy="72" r="0.6" opacity="0.38"/>
|
||||
<circle cx="380" cy="44" r="0.8" opacity="0.42"/>
|
||||
<circle cx="462" cy="108" r="0.7" opacity="0.48"/>
|
||||
<circle cx="550" cy="22" r="0.9" opacity="0.55"/>
|
||||
<circle cx="640" cy="78" r="0.6" opacity="0.35"/>
|
||||
<circle cx="740" cy="48" r="0.8" opacity="0.45"/>
|
||||
<circle cx="820" cy="112" r="0.7" opacity="0.40"/>
|
||||
<circle cx="910" cy="30" r="1.0" opacity="0.58"/>
|
||||
<circle cx="1010" cy="86" r="0.7" opacity="0.43"/>
|
||||
<circle cx="1110" cy="24" r="0.8" opacity="0.47"/>
|
||||
<circle cx="1200" cy="96" r="0.9" opacity="0.52"/>
|
||||
<circle cx="1310" cy="40" r="0.7" opacity="0.38"/>
|
||||
<circle cx="1400" cy="118" r="0.8" opacity="0.44"/>
|
||||
<circle cx="1510" cy="58" r="0.7" opacity="0.40"/>
|
||||
<circle cx="1620" cy="28" r="1.0" opacity="0.55"/>
|
||||
<circle cx="1720" cy="80" r="0.8" opacity="0.42"/>
|
||||
<circle cx="1800" cy="140" r="0.7" opacity="0.37"/>
|
||||
<circle cx="1880" cy="60" r="0.9" opacity="0.50"/>
|
||||
<circle cx="68" cy="195" r="0.7" opacity="0.40"/>
|
||||
<circle cx="148" cy="260" r="0.8" opacity="0.44"/>
|
||||
<circle cx="240" cy="310" r="0.6" opacity="0.35"/>
|
||||
<circle cx="88" cy="410" r="0.9" opacity="0.50"/>
|
||||
<circle cx="160" cy="530" r="0.7" opacity="0.38"/>
|
||||
<circle cx="55" cy="620" r="0.8" opacity="0.43"/>
|
||||
<circle cx="130" cy="720" r="0.6" opacity="0.36"/>
|
||||
<circle cx="62" cy="830" r="0.9" opacity="0.48"/>
|
||||
<circle cx="200" cy="890" r="0.7" opacity="0.40"/>
|
||||
<circle cx="310" cy="970" r="0.8" opacity="0.45"/>
|
||||
<circle cx="440" cy="1020" r="0.6" opacity="0.36"/>
|
||||
<circle cx="570" cy="980" r="0.9" opacity="0.52"/>
|
||||
<circle cx="680" cy="1048" r="0.7" opacity="0.38"/>
|
||||
<circle cx="820" cy="1010" r="0.8" opacity="0.44"/>
|
||||
<circle cx="940" cy="1058" r="0.6" opacity="0.34"/>
|
||||
<circle cx="1060" cy="1022" r="0.9" opacity="0.50"/>
|
||||
<circle cx="1200" cy="990" r="0.7" opacity="0.40"/>
|
||||
<circle cx="1340" cy="1040" r="0.8" opacity="0.43"/>
|
||||
<circle cx="1480" cy="1008" r="0.6" opacity="0.37"/>
|
||||
<circle cx="1600" cy="1052" r="0.9" opacity="0.50"/>
|
||||
<circle cx="1730" cy="1018" r="0.7" opacity="0.40"/>
|
||||
<circle cx="1850" cy="990" r="0.8" opacity="0.44"/>
|
||||
<circle cx="1700" cy="200" r="0.8" opacity="0.48"/>
|
||||
<circle cx="1820" cy="320" r="0.7" opacity="0.40"/>
|
||||
<circle cx="1880" cy="450" r="0.9" opacity="0.52"/>
|
||||
<circle cx="1780" cy="580" r="0.7" opacity="0.38"/>
|
||||
<circle cx="1860" cy="700" r="0.8" opacity="0.44"/>
|
||||
<circle cx="1740" cy="820" r="0.6" opacity="0.36"/>
|
||||
<!-- Medium stars -->
|
||||
<circle cx="108" cy="155" r="1.3" opacity="0.60"/>
|
||||
<circle cx="380" cy="186" r="1.4" opacity="0.64"/>
|
||||
<circle cx="520" cy="940" r="1.3" opacity="0.58"/>
|
||||
<circle cx="1160" cy="160" r="1.5" opacity="0.68"/>
|
||||
<circle cx="1460" cy="880" r="1.3" opacity="0.62"/>
|
||||
<circle cx="1760" cy="380" r="1.4" opacity="0.60"/>
|
||||
<!-- Bright stars -->
|
||||
<circle cx="164" cy="310" r="2.0" opacity="0.75"/>
|
||||
<circle cx="1680" cy="140" r="1.8" opacity="0.72"/>
|
||||
<circle cx="980" cy="920" r="2.0" opacity="0.70"/>
|
||||
</g>
|
||||
|
||||
<!-- Blink sparkles (4-point star shape) -->
|
||||
<g id="stars-layer-blinks" opacity="0.82" filter="url(#blink)">
|
||||
<!-- Blink 1 -->
|
||||
<path d="M 226 148 L 228 138 L 230 148 L 240 150 L 230 152 L 228 162 L 226 152 L 216 150 Z" fill="#e7ecf3" opacity="0.80"/>
|
||||
<!-- Blink 2 -->
|
||||
<path d="M 1540 220 L 1542 212 L 1544 220 L 1552 222 L 1544 224 L 1542 232 L 1540 224 L 1532 222 Z" fill="#5eead4" opacity="0.70"/>
|
||||
<!-- Blink 3 -->
|
||||
<path d="M 1820 820 L 1822 812 L 1824 820 L 1832 822 L 1824 824 L 1822 832 L 1820 824 L 1812 822 Z" fill="#e7ecf3" opacity="0.65"/>
|
||||
<!-- Blink 4 small -->
|
||||
<path d="M 460 840 L 461.5 835 L 463 840 L 468 841.5 L 463 843 L 461.5 848 L 460 843 L 455 841.5 Z" fill="#3d8bfd" opacity="0.72"/>
|
||||
<!-- Blink 5 -->
|
||||
<path d="M 1380 80 L 1382 72 L 1384 80 L 1392 82 L 1384 84 L 1382 92 L 1380 84 L 1372 82 Z" fill="#e7ecf3" opacity="0.75"/>
|
||||
</g>
|
||||
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<!-- #globe-body : Earth sphere -->
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<g id="globe-body">
|
||||
<circle cx="720" cy="560" r="330" fill="url(#globeOcean)" stroke="#2d3a4f" stroke-width="1.5"/>
|
||||
</g>
|
||||
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<!-- #globe-grid : Mercator lon/lat lines -->
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<g id="globe-grid" clip-path="url(#globeClip)" fill="none" stroke="#e7ecf3" stroke-opacity="0.28" stroke-width="1.5">
|
||||
<!-- Equator -->
|
||||
<ellipse cx="720" cy="560" rx="330" ry="78"/>
|
||||
<!-- Latitude lines -->
|
||||
<ellipse cx="720" cy="560" rx="330" ry="155"/>
|
||||
<ellipse cx="720" cy="560" rx="330" ry="232"/>
|
||||
<ellipse cx="720" cy="560" rx="330" ry="295"/>
|
||||
<!-- Tropics (dashed) -->
|
||||
<ellipse cx="720" cy="560" rx="330" ry="110" stroke-dasharray="8 5" stroke-opacity="0.18"/>
|
||||
<ellipse cx="720" cy="560" rx="330" ry="210" stroke-dasharray="8 5" stroke-opacity="0.18"/>
|
||||
<!-- Prime meridian + antimeridian -->
|
||||
<line x1="720" y1="230" x2="720" y2="890"/>
|
||||
<!-- Longitude lines -->
|
||||
<path d="M 500 230 Q 480 560 500 890"/>
|
||||
<path d="M 940 230 Q 960 560 940 890"/>
|
||||
<path d="M 580 230 Q 548 560 580 890"/>
|
||||
<path d="M 860 230 Q 892 560 860 890"/>
|
||||
<path d="M 618 230 Q 594 560 618 890"/>
|
||||
<path d="M 822 230 Q 846 560 822 890"/>
|
||||
<path d="M 655 230 Q 638 560 655 890"/>
|
||||
<path d="M 785 230 Q 802 560 785 890"/>
|
||||
</g>
|
||||
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<!-- #globe-continents : landmasses -->
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<g id="globe-continents" clip-path="url(#globeClip)" fill="url(#continentGrad)" stroke="#8b9cb3" stroke-opacity="0.35" stroke-width="1" stroke-linejoin="round">
|
||||
<!-- Eurasia -->
|
||||
<path d="
|
||||
M 590 350
|
||||
Q 610 325 655 320
|
||||
Q 700 315 745 328
|
||||
Q 810 335 855 355
|
||||
Q 900 375 895 415
|
||||
Q 888 445 860 458
|
||||
Q 830 470 795 462
|
||||
Q 770 468 750 488
|
||||
Q 728 510 700 505
|
||||
Q 668 498 640 480
|
||||
Q 610 462 592 435
|
||||
Q 570 405 590 350 Z"/>
|
||||
<!-- India (peninsula off Eurasia) -->
|
||||
<path d="
|
||||
M 780 462
|
||||
Q 800 470 810 500
|
||||
Q 820 530 808 555
|
||||
Q 795 575 778 568
|
||||
Q 762 558 758 530
|
||||
Q 752 505 762 482
|
||||
Q 770 468 780 462 Z"/>
|
||||
<!-- Africa -->
|
||||
<path d="
|
||||
M 640 480
|
||||
Q 655 490 668 512
|
||||
Q 680 535 678 570
|
||||
Q 676 610 662 645
|
||||
Q 648 678 628 692
|
||||
Q 608 700 592 685
|
||||
Q 575 668 572 640
|
||||
Q 568 605 576 568
|
||||
Q 582 535 590 508
|
||||
Q 600 488 614 480
|
||||
Q 628 472 640 480 Z"/>
|
||||
<!-- Western Europe (bump west of Eurasia) -->
|
||||
<path d="
|
||||
M 590 350
|
||||
Q 572 360 560 380
|
||||
Q 548 405 558 428
|
||||
Q 566 448 580 452
|
||||
Q 596 456 606 440
|
||||
Q 618 420 612 398
|
||||
Q 606 372 590 350 Z"/>
|
||||
<!-- Americas (partial, visible left edge of globe) -->
|
||||
<path d="
|
||||
M 430 360
|
||||
Q 415 340 400 355
|
||||
Q 390 372 398 400
|
||||
Q 408 430 428 448
|
||||
Q 450 464 468 455
|
||||
Q 480 444 474 420
|
||||
Q 468 395 448 375
|
||||
Q 440 368 430 360 Z"/>
|
||||
<path d="
|
||||
M 420 478
|
||||
Q 405 490 400 515
|
||||
Q 395 545 405 575
|
||||
Q 415 602 432 618
|
||||
Q 450 630 464 618
|
||||
Q 476 602 470 572
|
||||
Q 462 540 448 510
|
||||
Q 436 490 420 478 Z"/>
|
||||
</g>
|
||||
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<!-- #globe-terminator : day/night shadow -->
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<circle id="globe-terminator" cx="720" cy="560" r="330" fill="url(#globeTerminator)" clip-path="url(#globeClip)"/>
|
||||
|
||||
<!-- Globe specular highlight -->
|
||||
<circle cx="720" cy="560" r="330" fill="url(#globeSpecular)" clip-path="url(#globeClip)"/>
|
||||
|
||||
<!-- Globe rim -->
|
||||
<circle cx="720" cy="560" r="330" fill="none" stroke="#3d8bfd" stroke-opacity="0.25" stroke-width="2"/>
|
||||
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<!-- #exhaust-tail : curved plume from globe base -->
|
||||
<!-- thin at bottom-left, thick at rocket nozzle -->
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<g id="exhaust-tail">
|
||||
<!-- Outer glow (very wide, very transparent) -->
|
||||
<path d="M 430 810 Q 540 740 660 670 Q 780 600 920 540 Q 1040 488 1148 460"
|
||||
fill="none" stroke="url(#exhaustGrad)" stroke-width="60" stroke-linecap="round" opacity="0.18"/>
|
||||
<!-- Mid bloom -->
|
||||
<path d="M 430 810 Q 540 740 660 670 Q 780 600 920 540 Q 1040 488 1148 460"
|
||||
fill="none" stroke="url(#exhaustGrad)" stroke-width="32" stroke-linecap="round" opacity="0.45"/>
|
||||
<!-- Core streak -->
|
||||
<path d="M 432 808 Q 542 738 662 668 Q 782 598 922 538 Q 1042 486 1150 458"
|
||||
fill="none" stroke="url(#exhaustCore)" stroke-width="10" stroke-linecap="round" opacity="0.72"/>
|
||||
<!-- Thin tail filament -->
|
||||
<path d="M 432 808 Q 542 738 662 668 Q 782 598 922 538 Q 1042 486 1150 458"
|
||||
fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" opacity="0.55"/>
|
||||
</g>
|
||||
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<!-- #rocketship : futuristic widebody -->
|
||||
<!-- flying upper-right, X-axis flipped -->
|
||||
<!-- (original top of ship now faces DOWN) -->
|
||||
<!-- nose pointing upper-right at ~-32deg -->
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<!--
|
||||
Local coords: nose at (0,0), body extends -X (left = back).
|
||||
X-flip: scale(1,-1) so dorsal (top) faces down in world space.
|
||||
Then rotate -32deg and translate to world position (1210, 390).
|
||||
-->
|
||||
<g id="rocketship" transform="translate(1210,390) rotate(-32) scale(1,-1)">
|
||||
|
||||
<!-- === Main fuselage === -->
|
||||
<!-- Underside panel (now world-UP after flip) -->
|
||||
<path d="M -340 0 L -300 -22 L -80 -26 L 0 0 L -80 8 L -300 8 Z"
|
||||
fill="url(#rocketUnderGrad)" stroke="#2d3a4f" stroke-width="1.2"/>
|
||||
|
||||
<!-- Dorsal spine (now world-DOWN after flip) -->
|
||||
<path d="M -300 22 L -80 26 L 0 0 L -80 -8 L -300 -8 Z"
|
||||
fill="url(#rocketBodyGrad)" stroke="#1a2332" stroke-width="1.2"/>
|
||||
|
||||
<!-- Blue accent stripe -->
|
||||
<path d="M -290 -6 L -100 -8 L -60 -4 L -100 0 L -290 0 Z"
|
||||
fill="#3d8bfd" opacity="0.85"/>
|
||||
|
||||
<!-- Nose cone -->
|
||||
<path d="M -80 -26 Q 30 -14 80 0 Q 30 14 -80 26 L -80 -26 Z"
|
||||
fill="#e7ecf3" stroke="#8b9cb3" stroke-width="1"/>
|
||||
|
||||
<!-- Nose tip highlight -->
|
||||
<path d="M -80 -18 Q 20 -8 62 0 Q 20 4 -80 8 L -80 -18 Z"
|
||||
fill="#ffffff" opacity="0.30"/>
|
||||
|
||||
<!-- Cockpit window strip -->
|
||||
<path d="M -60 -16 Q -30 -14 -10 -10 Q -30 -6 -60 -4 Z"
|
||||
fill="#0a0e14" stroke="#3d8bfd" stroke-width="1"/>
|
||||
<circle cx="-42" cy="-10" r="5" fill="#1a2332" stroke="#5eead4" stroke-width="0.8"/>
|
||||
<circle cx="-26" cy="-9" r="4" fill="#1a2332" stroke="#5eead4" stroke-width="0.8"/>
|
||||
|
||||
<!-- === Delta wings (lower, world-UP side) === -->
|
||||
<!-- Main delta wing -->
|
||||
<path d="M -280 22 L -160 22 L -100 90 L -240 70 Z"
|
||||
fill="url(#wingGrad)" stroke="#2d3a4f" stroke-width="1" opacity="0.95"/>
|
||||
<!-- Wing leading edge highlight -->
|
||||
<path d="M -280 22 L -160 22 L -120 60" fill="none" stroke="#3d8bfd" stroke-width="1.5" opacity="0.6"/>
|
||||
|
||||
<!-- === Dorsal fins (upper, world-DOWN side) === -->
|
||||
<path d="M -260 -22 L -180 -22 L -160 -55 L -240 -45 Z"
|
||||
fill="#3d8bfd" stroke="#1a2332" stroke-width="1" opacity="0.80"/>
|
||||
|
||||
<!-- === Engine pod === -->
|
||||
<ellipse cx="-310" cy="0" rx="32" ry="20" fill="#2d3a4f" stroke="#8b9cb3" stroke-width="1"/>
|
||||
<ellipse cx="-310" cy="0" rx="24" ry="15" fill="#1a2332"/>
|
||||
|
||||
<!-- === Nozzle glows (world-left = ship-back = exhaust end) === -->
|
||||
<ellipse cx="-342" cy="0" rx="20" ry="20" fill="url(#nozzleGlow)" filter="url(#nozzleFilter)" opacity="0.90"/>
|
||||
<ellipse cx="-355" cy="0" rx="32" ry="32" fill="url(#nozzleGlow)" filter="url(#nozzleFilter)" opacity="0.45"/>
|
||||
|
||||
<!-- === Panel detail lines === -->
|
||||
<line x1="-240" y1="-6" x2="-240" y2="6" stroke="#8b9cb3" stroke-width="0.8" opacity="0.5"/>
|
||||
<line x1="-190" y1="-6" x2="-190" y2="6" stroke="#8b9cb3" stroke-width="0.8" opacity="0.5"/>
|
||||
<line x1="-140" y1="-8" x2="-140" y2="8" stroke="#8b9cb3" stroke-width="0.8" opacity="0.5"/>
|
||||
|
||||
<!-- === Navigation light === -->
|
||||
<circle cx="60" cy="4" r="3" fill="#5eead4" filter="url(#blink)" opacity="0.9"/>
|
||||
</g>
|
||||
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<!-- Foreground: globe rim glow (over everything) -->
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<circle cx="720" cy="560" r="332" fill="none" stroke="#3d8bfd" stroke-opacity="0.12" stroke-width="6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 20 KiB |
BIN
examples/app_hub/assets/hub-logo-transparent.png
Normal file
BIN
examples/app_hub/assets/hub-logo-transparent.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 287 KiB |
206
examples/app_hub/assets/hub-logo-transparent.svg
Normal file
206
examples/app_hub/assets/hub-logo-transparent.svg
Normal file
@@ -0,0 +1,206 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" role="img" aria-label="Android Cast logo - transparent background variant">
|
||||
<!--
|
||||
ENTITY MAP (for targeted editing):
|
||||
(no #space-bg, #nebula-*, #stars-layer in this variant - background is 100% transparent)
|
||||
#globe-body - Earth sphere base fill
|
||||
#globe-grid - Mercator longitude/latitude lines
|
||||
#globe-continents - landmass shapes (Eurasia, Africa, Americas)
|
||||
#globe-terminator - day/night shadow gradient overlay
|
||||
#exhaust-tail - rocket exhaust/tail from bottom-left of globe toward nozzle
|
||||
#rocketship - full rocket assembly (body, wings, cockpit, nozzle, glow)
|
||||
-->
|
||||
<defs>
|
||||
<!-- Globe ocean fill -->
|
||||
<radialGradient id="globeOcean" cx="38%" cy="30%" r="72%">
|
||||
<stop offset="0%" stop-color="#243044"/>
|
||||
<stop offset="50%" stop-color="#1a2332"/>
|
||||
<stop offset="100%" stop-color="#0a0e14"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Globe terminator -->
|
||||
<linearGradient id="globeTerminator" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#3d8bfd" stop-opacity="0.08"/>
|
||||
<stop offset="40%" stop-color="#3d8bfd" stop-opacity="0.18"/>
|
||||
<stop offset="70%" stop-color="#0a0e14" stop-opacity="0.55"/>
|
||||
<stop offset="100%" stop-color="#0a0e14" stop-opacity="0.80"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Globe specular highlight -->
|
||||
<radialGradient id="globeSpecular" cx="35%" cy="28%" r="45%">
|
||||
<stop offset="0%" stop-color="#e7ecf3" stop-opacity="0.12"/>
|
||||
<stop offset="100%" stop-color="#e7ecf3" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Exhaust gradients -->
|
||||
<linearGradient id="exhaustGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#5eead4" stop-opacity="0"/>
|
||||
<stop offset="20%" stop-color="#5eead4" stop-opacity="0.4"/>
|
||||
<stop offset="55%" stop-color="#3d8bfd" stop-opacity="0.75"/>
|
||||
<stop offset="80%" stop-color="#5eead4" stop-opacity="0.95"/>
|
||||
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.9"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="exhaustCore" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
|
||||
<stop offset="50%" stop-color="#ffffff" stop-opacity="0.4"/>
|
||||
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.95"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Rocket body gradient -->
|
||||
<linearGradient id="rocketBodyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#e7ecf3"/>
|
||||
<stop offset="35%" stop-color="#c8d4e3"/>
|
||||
<stop offset="70%" stop-color="#8b9cb3"/>
|
||||
<stop offset="100%" stop-color="#4a5a6e"/>
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="rocketUnderGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#4a5a6e"/>
|
||||
<stop offset="100%" stop-color="#2d3a4f"/>
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="wingGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#3d8bfd"/>
|
||||
<stop offset="100%" stop-color="#1a2332"/>
|
||||
</linearGradient>
|
||||
|
||||
<radialGradient id="nozzleGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
|
||||
<stop offset="30%" stop-color="#5eead4" stop-opacity="0.9"/>
|
||||
<stop offset="65%" stop-color="#3d8bfd" stop-opacity="0.6"/>
|
||||
<stop offset="100%" stop-color="#3d8bfd" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<linearGradient id="continentGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#5a6b82"/>
|
||||
<stop offset="100%" stop-color="#3d5060"/>
|
||||
</linearGradient>
|
||||
|
||||
<filter id="glow" x="-60%" y="-60%" width="220%" height="220%">
|
||||
<feGaussianBlur stdDeviation="8" result="b"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="b"/>
|
||||
<feMergeNode in="b"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<filter id="nozzleFilter" x="-100%" y="-100%" width="300%" height="300%">
|
||||
<feGaussianBlur stdDeviation="14" result="b"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="b"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<filter id="blink" x="-200%" y="-200%" width="500%" height="500%">
|
||||
<feGaussianBlur stdDeviation="2.5" result="b"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="b"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<clipPath id="globeClip">
|
||||
<circle cx="720" cy="560" r="330"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
|
||||
<!-- Background: fully transparent (no rect) -->
|
||||
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<!-- #globe-body : Earth sphere -->
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<g id="globe-body">
|
||||
<circle cx="720" cy="560" r="330" fill="url(#globeOcean)" stroke="#2d3a4f" stroke-width="1.5"/>
|
||||
</g>
|
||||
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<!-- #globe-grid : Mercator lon/lat lines -->
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<g id="globe-grid" clip-path="url(#globeClip)" fill="none" stroke="#e7ecf3" stroke-opacity="0.28" stroke-width="1.5">
|
||||
<ellipse cx="720" cy="560" rx="330" ry="78"/>
|
||||
<ellipse cx="720" cy="560" rx="330" ry="155"/>
|
||||
<ellipse cx="720" cy="560" rx="330" ry="232"/>
|
||||
<ellipse cx="720" cy="560" rx="330" ry="295"/>
|
||||
<ellipse cx="720" cy="560" rx="330" ry="110" stroke-dasharray="8 5" stroke-opacity="0.18"/>
|
||||
<ellipse cx="720" cy="560" rx="330" ry="210" stroke-dasharray="8 5" stroke-opacity="0.18"/>
|
||||
<line x1="720" y1="230" x2="720" y2="890"/>
|
||||
<path d="M 500 230 Q 480 560 500 890"/>
|
||||
<path d="M 940 230 Q 960 560 940 890"/>
|
||||
<path d="M 580 230 Q 548 560 580 890"/>
|
||||
<path d="M 860 230 Q 892 560 860 890"/>
|
||||
<path d="M 618 230 Q 594 560 618 890"/>
|
||||
<path d="M 822 230 Q 846 560 822 890"/>
|
||||
<path d="M 655 230 Q 638 560 655 890"/>
|
||||
<path d="M 785 230 Q 802 560 785 890"/>
|
||||
</g>
|
||||
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<!-- #globe-continents : landmasses -->
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<g id="globe-continents" clip-path="url(#globeClip)" fill="url(#continentGrad)" stroke="#8b9cb3" stroke-opacity="0.35" stroke-width="1" stroke-linejoin="round">
|
||||
<path d="M 590 350 Q 610 325 655 320 Q 700 315 745 328 Q 810 335 855 355 Q 900 375 895 415 Q 888 445 860 458 Q 830 470 795 462 Q 770 468 750 488 Q 728 510 700 505 Q 668 498 640 480 Q 610 462 592 435 Q 570 405 590 350 Z"/>
|
||||
<path d="M 780 462 Q 800 470 810 500 Q 820 530 808 555 Q 795 575 778 568 Q 762 558 758 530 Q 752 505 762 482 Q 770 468 780 462 Z"/>
|
||||
<path d="M 640 480 Q 655 490 668 512 Q 680 535 678 570 Q 676 610 662 645 Q 648 678 628 692 Q 608 700 592 685 Q 575 668 572 640 Q 568 605 576 568 Q 582 535 590 508 Q 600 488 614 480 Q 628 472 640 480 Z"/>
|
||||
<path d="M 590 350 Q 572 360 560 380 Q 548 405 558 428 Q 566 448 580 452 Q 596 456 606 440 Q 618 420 612 398 Q 606 372 590 350 Z"/>
|
||||
<path d="M 430 360 Q 415 340 400 355 Q 390 372 398 400 Q 408 430 428 448 Q 450 464 468 455 Q 480 444 474 420 Q 468 395 448 375 Q 440 368 430 360 Z"/>
|
||||
<path d="M 420 478 Q 405 490 400 515 Q 395 545 405 575 Q 415 602 432 618 Q 450 630 464 618 Q 476 602 470 572 Q 462 540 448 510 Q 436 490 420 478 Z"/>
|
||||
</g>
|
||||
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<!-- #globe-terminator -->
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<circle id="globe-terminator" cx="720" cy="560" r="330" fill="url(#globeTerminator)" clip-path="url(#globeClip)"/>
|
||||
<circle cx="720" cy="560" r="330" fill="url(#globeSpecular)" clip-path="url(#globeClip)"/>
|
||||
<circle cx="720" cy="560" r="330" fill="none" stroke="#3d8bfd" stroke-opacity="0.25" stroke-width="2"/>
|
||||
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<!-- #exhaust-tail -->
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<g id="exhaust-tail">
|
||||
<path d="M 430 810 Q 540 740 660 670 Q 780 600 920 540 Q 1040 488 1148 460"
|
||||
fill="none" stroke="url(#exhaustGrad)" stroke-width="60" stroke-linecap="round" opacity="0.18"/>
|
||||
<path d="M 430 810 Q 540 740 660 670 Q 780 600 920 540 Q 1040 488 1148 460"
|
||||
fill="none" stroke="url(#exhaustGrad)" stroke-width="32" stroke-linecap="round" opacity="0.45"/>
|
||||
<path d="M 432 808 Q 542 738 662 668 Q 782 598 922 538 Q 1042 486 1150 458"
|
||||
fill="none" stroke="url(#exhaustCore)" stroke-width="10" stroke-linecap="round" opacity="0.72"/>
|
||||
<path d="M 432 808 Q 542 738 662 668 Q 782 598 922 538 Q 1042 486 1150 458"
|
||||
fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" opacity="0.55"/>
|
||||
</g>
|
||||
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<!-- #rocketship -->
|
||||
<!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
|
||||
<g id="rocketship" transform="translate(1210,390) rotate(-32) scale(1,-1)">
|
||||
<path d="M -340 0 L -300 -22 L -80 -26 L 0 0 L -80 8 L -300 8 Z"
|
||||
fill="url(#rocketUnderGrad)" stroke="#2d3a4f" stroke-width="1.2"/>
|
||||
<path d="M -300 22 L -80 26 L 0 0 L -80 -8 L -300 -8 Z"
|
||||
fill="url(#rocketBodyGrad)" stroke="#1a2332" stroke-width="1.2"/>
|
||||
<path d="M -290 -6 L -100 -8 L -60 -4 L -100 0 L -290 0 Z"
|
||||
fill="#3d8bfd" opacity="0.85"/>
|
||||
<path d="M -80 -26 Q 30 -14 80 0 Q 30 14 -80 26 L -80 -26 Z"
|
||||
fill="#e7ecf3" stroke="#8b9cb3" stroke-width="1"/>
|
||||
<path d="M -80 -18 Q 20 -8 62 0 Q 20 4 -80 8 L -80 -18 Z"
|
||||
fill="#ffffff" opacity="0.30"/>
|
||||
<path d="M -60 -16 Q -30 -14 -10 -10 Q -30 -6 -60 -4 Z"
|
||||
fill="#0a0e14" stroke="#3d8bfd" stroke-width="1"/>
|
||||
<circle cx="-42" cy="-10" r="5" fill="#1a2332" stroke="#5eead4" stroke-width="0.8"/>
|
||||
<circle cx="-26" cy="-9" r="4" fill="#1a2332" stroke="#5eead4" stroke-width="0.8"/>
|
||||
<path d="M -280 22 L -160 22 L -100 90 L -240 70 Z"
|
||||
fill="url(#wingGrad)" stroke="#2d3a4f" stroke-width="1" opacity="0.95"/>
|
||||
<path d="M -280 22 L -160 22 L -120 60" fill="none" stroke="#3d8bfd" stroke-width="1.5" opacity="0.6"/>
|
||||
<path d="M -260 -22 L -180 -22 L -160 -55 L -240 -45 Z"
|
||||
fill="#3d8bfd" stroke="#1a2332" stroke-width="1" opacity="0.80"/>
|
||||
<ellipse cx="-310" cy="0" rx="32" ry="20" fill="#2d3a4f" stroke="#8b9cb3" stroke-width="1"/>
|
||||
<ellipse cx="-310" cy="0" rx="24" ry="15" fill="#1a2332"/>
|
||||
<ellipse cx="-342" cy="0" rx="20" ry="20" fill="url(#nozzleGlow)" filter="url(#nozzleFilter)" opacity="0.90"/>
|
||||
<ellipse cx="-355" cy="0" rx="32" ry="32" fill="url(#nozzleGlow)" filter="url(#nozzleFilter)" opacity="0.45"/>
|
||||
<line x1="-240" y1="-6" x2="-240" y2="6" stroke="#8b9cb3" stroke-width="0.8" opacity="0.5"/>
|
||||
<line x1="-190" y1="-6" x2="-190" y2="6" stroke="#8b9cb3" stroke-width="0.8" opacity="0.5"/>
|
||||
<line x1="-140" y1="-8" x2="-140" y2="8" stroke="#8b9cb3" stroke-width="0.8" opacity="0.5"/>
|
||||
<circle cx="60" cy="4" r="3" fill="#5eead4" filter="url(#blink)" opacity="0.9"/>
|
||||
</g>
|
||||
|
||||
<!-- Globe rim glow -->
|
||||
<circle cx="720" cy="560" r="332" fill="none" stroke="#3d8bfd" stroke-opacity="0.12" stroke-width="6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
44
examples/app_hub/hub-logo-layers.css
Normal file
44
examples/app_hub/hub-logo-layers.css
Normal file
@@ -0,0 +1,44 @@
|
||||
/* Progressive logo loader (on-demand, fragment-friendly) */
|
||||
.hub-page::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.hub-page.logo-enabled::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
|
||||
background-position: center center, center center, center center, center center;
|
||||
background-size: cover, cover, cover, cover;
|
||||
background-image: var(--hub-layer-space, none), var(--hub-layer-globe, none), var(--hub-layer-tail, none), var(--hub-layer-rocket, none);
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
[data-theme="light"] .hub-page.logo-enabled::before {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.hub-page.logo-full {
|
||||
--hub-layer-space: url("assets/hub-logo-fragment-space.svg");
|
||||
--hub-layer-globe: url("assets/hub-logo-fragment-globe.svg");
|
||||
--hub-layer-tail: url("assets/hub-logo-fragment-tail.svg");
|
||||
--hub-layer-rocket: url("assets/hub-logo-fragment-rocket.svg");
|
||||
}
|
||||
|
||||
.hub-page.logo-space {
|
||||
--hub-layer-space: url("assets/hub-logo-fragment-space.svg");
|
||||
}
|
||||
|
||||
.hub-page.logo-globe {
|
||||
--hub-layer-globe: url("assets/hub-logo-fragment-globe.svg");
|
||||
}
|
||||
|
||||
.hub-page.logo-tail {
|
||||
--hub-layer-tail: url("assets/hub-logo-fragment-tail.svg");
|
||||
}
|
||||
|
||||
.hub-page.logo-rocket {
|
||||
--hub-layer-rocket: url("assets/hub-logo-fragment-rocket.svg");
|
||||
}
|
||||
@@ -8,19 +8,9 @@
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
/* Debug watermark visibility */
|
||||
/* Logo background is loaded progressively by hub-logo-layers.css when supported. */
|
||||
.hub-page::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background: url("assets/hub-logo.svg") center center / cover no-repeat;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
[data-theme="light"] .hub-page::before {
|
||||
opacity: 0.75;
|
||||
content: none;
|
||||
}
|
||||
|
||||
.hub-shell {
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<main class="main-pane hub-main">
|
||||
<header class="hub-header">
|
||||
<div class="hub-brand">
|
||||
<img class="hub-logo-mark" src="assets/hub-logo.svg" alt="" width="112" height="84" decoding="async">
|
||||
<img class="hub-logo-mark" src="assets/hub-logo-transparent.svg" alt="" width="112" height="84" decoding="async">
|
||||
<h1 class="hub-title">Android Cast</h1>
|
||||
</div>
|
||||
<p class="muted hub-subtitle">Project hub</p>
|
||||
@@ -56,14 +56,37 @@
|
||||
<script>
|
||||
(function () {
|
||||
var sel = document.getElementById('theme-select');
|
||||
if (!sel) return;
|
||||
var cur = document.documentElement.getAttribute('data-theme') || 'dark';
|
||||
sel.value = cur;
|
||||
sel.addEventListener('change', function () {
|
||||
var v = sel.value;
|
||||
document.documentElement.setAttribute('data-theme', v);
|
||||
try { localStorage.setItem('crash_console_theme', v); } catch (e) {}
|
||||
});
|
||||
if (sel) {
|
||||
var cur = document.documentElement.getAttribute('data-theme') || 'dark';
|
||||
sel.value = cur;
|
||||
sel.addEventListener('change', function () {
|
||||
var v = sel.value;
|
||||
document.documentElement.setAttribute('data-theme', v);
|
||||
try { localStorage.setItem('crash_console_theme', v); } catch (e) {}
|
||||
});
|
||||
}
|
||||
|
||||
// Progressive enhancement: load logo layers only when browser supports CSS + SVG background images.
|
||||
var supportsCss = !!(window.CSS && CSS.supports);
|
||||
var supportsSvg = !!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect);
|
||||
var supportsBgSvg = supportsCss && CSS.supports('background-image', 'url("assets/hub-logo-fragment-space.svg")');
|
||||
if (!(supportsSvg && supportsBgSvg)) return;
|
||||
|
||||
var body = document.body;
|
||||
if (!body) return;
|
||||
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
var part = (params.get('logoPart') || 'full').toLowerCase();
|
||||
var allowed = { full: true, space: true, globe: true, tail: true, rocket: true };
|
||||
if (!allowed[part]) part = 'full';
|
||||
|
||||
var link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.href = 'hub-logo-layers.css';
|
||||
link.onload = function () {
|
||||
body.classList.add('logo-enabled', 'logo-' + part);
|
||||
};
|
||||
document.head.appendChild(link);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user