ac/android_cast
1
0
Fork 0
mirror of git://f0xx.org/android_cast synced 2026-07-29 07:58:10 +03:00
Code Issues Packages Projects Releases Wiki Activity

be dirty sync

Browse Source
This commit is contained in:
Anton Afanasyeu
2026-05-27 15:47:15 +02:00
parent 87d3df810c
commit 92fc65e02e
26 changed files with 774 additions and 884 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
examples/app_hub/README.md
View File

@@ -2,7 +2,16 @@
**Infra overview:** [docs/INFRA.md](../../docs/INFRA.md)
Static landing: `index.html`, `hub.css`, `assets/hub-logo.svg` (globe + rocket; palette matches crash console).
Static landing: `index.html`, `hub.css`, `hub-logo-layers.css`.
Logo assets in `assets/` (editable fragments, loaded on demand):
- `hub-logo-fragment-space.svg` — cosmic background (#space-bg, #stars-layer, #nebula-*)
- `hub-logo-fragment-globe.svg` — Earth (round border + Mercator grid 3x3, no continents)
- `hub-logo-transparent.svg` — header mark (globe only)
Review one layer: `?logoPart=space|globe|full`
Compare Earth grids: `?logoPart=globe&grid=3` (default) or `?logoPart=full&grid=4`
**BE only.** FE `apps.f0xx.org` sends `location /` → `http://artc0.intra.raptor.org:80` (not :8089).

BIN
examples/app_hub/assets/_snapshot-globe-grid3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 151 KiB

240
examples/app_hub/assets/extract_red_polygons.py Normal file
View File

@@ -0,0 +1,240 @@
#!/usr/bin/env python3
"""Extract red land polygons from Mercator reference image -> SVG paths."""
from __future__ import annotations
import json
import math
from collections import deque
from pathlib import Path
import numpy as np
from PIL import Image
ROOT = Path(__file__).resolve().parent
SRC = ROOT / "mercator-source.jpg"
OUT_FLAT = ROOT / "hub-logo-continents-mercator-flat.svg"
OUT_META = ROOT / "continents-meta.json"
# Source image is 800x519 Mercator-style plate.
W, H = 800, 519
def red_mask(rgb: np.ndarray) -> np.ndarray:
r, g, b = rgb[..., 0], rgb[..., 1], rgb[..., 2]
return (r.astype(np.int16) > 150) & (g.astype(np.int16) < 120) & (b.astype(np.int16) < 120)
def dilate(mask: np.ndarray, radius: int = 3) -> np.ndarray:
"""Bridge thin white grid lines between red land cells."""
h, w = mask.shape
out = mask.copy()
ys, xs = np.where(mask)
for y, x in zip(ys, xs):
y0 = max(0, y - radius)
y1 = min(h, y + radius + 1)
x0 = max(0, x - radius)
x1 = min(w, x + radius + 1)
if mask[y0:y1, x0:x1].any():
out[y0:y1, x0:x1] = True
return out
def label_components(mask: np.ndarray) -> tuple[np.ndarray, int]:
h, w = mask.shape
labels = np.zeros((h, w), dtype=np.int32)
current = 0
for y in range(h):
for x in range(w):
if not mask[y, x] or labels[y, x]:
continue
current += 1
q = deque([(x, y)])
labels[y, x] = current
while q:
cx, cy = q.popleft()
for nx, ny in ((cx + 1, cy), (cx - 1, cy), (cx, cy + 1), (cx, cy - 1)):
if 0 <= nx < w and 0 <= ny < h and mask[ny, nx] and labels[ny, nx] == 0:
labels[ny, nx] = current
q.append((nx, ny))
return labels, current
def trace_boundary(labels: np.ndarray, label_id: int) -> list[tuple[int, int]]:
"""Moore-neighbor contour for one connected component."""
h, w = labels.shape
comp = labels == label_id
if not comp.any():
return []
# Start at topmost-leftmost pixel of component.
ys, xs = np.where(comp)
start = (int(xs[0]), int(ys[0]))
x, y = start
path = [start]
# Directions: E, SE, S, SW, W, NW, N, NE
dirs = [(1, 0), (1, 1), (0, 1), (-1, 1), (-1, 0), (-1, -1), (0, -1), (1, -1)]
dir_idx = 0
def is_land(px: int, py: int) -> bool:
return 0 <= px < w and 0 <= py < h and labels[py, px] == label_id
for _ in range(w * h * 4):
found = False
for i in range(8):
nd = (dir_idx + i) % 8
dx, dy = dirs[nd]
nx, ny = x + dx, y + dy
if is_land(nx, ny):
x, y = nx, ny
dir_idx = (nd + 6) % 8
path.append((x, y))
found = True
break
if not found:
break
if (x, y) == start and len(path) > 8:
break
return path
def simplify(points: list[tuple[int, int]], min_dist: float = 2.0) -> list[tuple[int, int]]:
if len(points) < 3:
return points
out = [points[0]]
for p in points[1:]:
ox, oy = out[-1]
if math.hypot(p[0] - ox, p[1] - oy) >= min_dist:
out.append(p)
if out[0] != out[-1]:
out.append(out[0])
return out
def path_d(points: list[tuple[float, float]]) -> str:
if len(points) < 3:
return ""
x0, y0 = points[0]
parts = [f"M {x0:.1f} {y0:.1f}"]
for x, y in points[1:]:
parts.append(f"L {x:.1f} {y:.1f}")
parts.append("Z")
return " ".join(parts)
def mercator_y_to_lat(y: float, h: float) -> float:
# Map top->north, bottom->south; clamp to avoid infinities at poles.
t = 1.0 - (y / h)
t = min(max(t, 0.02), 0.98)
return math.degrees(math.atan(math.sinh(math.pi * (2 * t - 1))))
def lat_lon_to_globe(lat: float, lon: float, cx: float, cy: float, r: float) -> tuple[float, float]:
"""Simple orthographic-ish placement on visible globe disk."""
lat_r = math.radians(lat)
lon_r = math.radians(lon)
# Visible hemisphere centered around lon 20, lat 20 for this logo framing.
lon0 = math.radians(20.0)
lat0 = math.radians(15.0)
# Rotate lon relative to center.
dlon = lon_r - lon0
x = cx + r * math.cos(lat_r) * math.sin(dlon)
y = cy - r * math.sin(lat_r)
return x, y
def map_to_globe(points: list[tuple[int, int]], w: int, h: int) -> list[tuple[float, float]]:
out: list[tuple[float, float]] = []
cx, cy, r = 720.0, 560.0, 318.0
for x, y in points:
lon = (x / w) * 360.0 - 180.0
lat = mercator_y_to_lat(float(y), float(h))
gx, gy = lat_lon_to_globe(lat, lon, cx, cy, r)
out.append((gx, gy))
return out
def main() -> None:
img = Image.open(SRC).convert("RGB")
rgb = np.array(img)
w, h = rgb.shape[1], rgb.shape[0]
mask = dilate(red_mask(rgb), radius=3)
labels, n = label_components(mask)
components: list[dict] = []
for label_id in range(1, n + 1):
area = int((labels == label_id).sum())
if area < 500: # drop tiny noise / watermark specks
continue
boundary = trace_boundary(labels, label_id)
if len(boundary) < 20:
continue
boundary = simplify(boundary, min_dist=3.5)
ys, xs = np.where(labels == label_id)
bbox = [int(xs.min()), int(ys.min()), int(xs.max()), int(ys.max())]
components.append(
{
"id": label_id,
"area": area,
"bbox": bbox,
"flat": path_d([(float(x), float(y)) for x, y in boundary]),
"globe": path_d(map_to_globe(boundary, w, h)),
}
)
components.sort(key=lambda c: c["area"], reverse=True)
flat_paths = "\n ".join(
f'<path id="continent-{c["id"]}" data-area="{c["area"]}" d="{c["flat"]}"/>'
for c in components
)
globe_paths = "\n ".join(
f'<path id="continent-{c["id"]}" data-area="{c["area"]}" d="{c["globe"]}"/>'
for c in components
)
OUT_FLAT.write_text(
f"""<svg xmlns="http://www.w3.org/2000/svg" width="{w}" height="{h}" viewBox="0 0 {w} {h}" role="img" aria-label="Extracted continents (flat Mercator plate)">
<rect width="100%" height="100%" fill="#b8d4e8"/>
<g id="continents-extracted" fill="#c41e1a" fill-opacity="0.92" stroke="#8f1410" stroke-width="0.8">
{flat_paths}
</g>
</svg>
""",
encoding="utf-8",
)
globe_svg = ROOT.parent.parent / "examples" / "app_hub" / "assets" / "hub-logo-continents-mercator-globe.svg"
globe_svg.write_text(
f"""<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Extracted continents mapped to globe viewBox">
<defs>
<clipPath id="globeClip"><circle cx="720" cy="560" r="322"/></clipPath>
</defs>
<g id="continents-globe" clip-path="url(#globeClip)" fill="#7287a1" fill-opacity="0.88" stroke="#a8b8cc" stroke-opacity="0.45" stroke-width="1">
{globe_paths}
</g>
</svg>
""",
encoding="utf-8",
)
OUT_META.write_text(
json.dumps(
{
"source": str(SRC.name),
"size": [w, h],
"components": len(components),
"areas_top10": [c["area"] for c in components[:10]],
},
indent=2,
),
encoding="utf-8",
)
print(f"components={len(components)}")
print(f"wrote {OUT_FLAT}")
print(f"wrote {globe_svg}")
if __name__ == "__main__":
main()

13
examples/app_hub/assets/hub-logo-continents-mercator-flat.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

15
examples/app_hub/assets/hub-logo-continents-mercator-globe.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

24
examples/app_hub/assets/hub-logo-fragment-globe-4x4.svg Normal file
View File

@@ -0,0 +1,24 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Globe fragment 4x4">
<defs>
<radialGradient id="globeOcean" cx="36%" cy="28%" r="74%">
<stop offset="0%" stop-color="#2a3d56"/>
<stop offset="45%" stop-color="#1a2332"/>
<stop offset="100%" stop-color="#0a0e14"/>
</radialGradient>
<clipPath id="gridClip"><circle cx="720" cy="560" r="322"/></clipPath>
</defs>
<circle id="globe-body" cx="720" cy="560" r="330" fill="url(#globeOcean)"/>
<!-- Mercator-style 4x4 grid: 3 vertical + 3 horizontal lines -->
<g id="globe-grid" clip-path="url(#gridClip)" fill="none" stroke="#e7ecf3" stroke-opacity="0.92" stroke-width="7.5" stroke-linecap="round">
<path d="M 580 248 Q 510 560 580 872"/>
<path d="M 720 238 Q 720 560 720 882"/>
<path d="M 860 248 Q 930 560 860 872"/>
<ellipse cx="720" cy="395" rx="275" ry="80"/>
<ellipse cx="720" cy="560" rx="320" ry="105"/>
<ellipse cx="720" cy="725" rx="275" ry="80"/>
</g>
<circle id="globe-border" cx="720" cy="560" r="330" fill="none" stroke="#e7ecf3" stroke-width="15"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

48
examples/app_hub/assets/hub-logo-fragment-globe-grid-overlay.svg Normal file
View File

@@ -0,0 +1,48 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Globe grid overlay build 20260527j">
<defs>
<linearGradient id="gradNorthPole" x1="830" y1="432" x2="610" y2="358" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#e7ecf3" stop-opacity="0.02"/>
<stop offset="100%" stop-color="#e7ecf3" stop-opacity="1"/>
</linearGradient>
<linearGradient id="gradSouthPole" x1="830" y1="754" x2="610" y2="680" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#e7ecf3" stop-opacity="0.02"/>
<stop offset="100%" stop-color="#e7ecf3" stop-opacity="1"/>
</linearGradient>
<linearGradient id="gradEquator" x1="1040" y1="560" x2="400" y2="560" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#e7ecf3" stop-opacity="0.02"/>
<stop offset="50%" stop-color="#e7ecf3" stop-opacity="1"/>
<stop offset="100%" stop-color="#e7ecf3" stop-opacity="0.02"/>
</linearGradient>
<linearGradient id="meridianSun" x1="390" y1="560" x2="1050" y2="560" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#f2f6fc" stop-opacity="0.95"/>
<stop offset="52%" stop-color="#d7e0ec" stop-opacity="0.78"/>
<stop offset="100%" stop-color="#4f6178" stop-opacity="0.92"/>
</linearGradient>
<clipPath id="gridClip"><circle cx="720" cy="560" r="322"/></clipPath>
</defs>
<g id="globe-grid" clip-path="url(#gridClip)" fill="none" stroke-linecap="round" stroke-linejoin="round">
<circle id="globe-pivot" cx="720" cy="560" r="7" fill="#5eead4" stroke="#0a0e14" stroke-width="1.5"/>
<path id="globe-meridian-west" d="M 620 248 Q 358 560 620 872" stroke="url(#meridianSun)" stroke-opacity="0.98" stroke-width="8"/>
<path id="globe-meridian-prime" d="M 720 248 L 720 872" stroke="url(#meridianSun)" stroke-opacity="0.98" stroke-width="7.5"/>
<path id="globe-meridian-east" d="M 820 248 Q 1082 560 820 872" stroke="url(#meridianSun)" stroke-opacity="0.98" stroke-width="8"/>
<ellipse id="globe-equator" cx="720" cy="560" rx="318" ry="11" stroke="url(#gradEquator)" stroke-width="7.5"/>
<ellipse id="globe-north-pole" cx="720" cy="392" rx="260" ry="39" stroke="url(#gradNorthPole)" stroke-width="7.5"/>
<ellipse id="globe-south-pole" cx="720" cy="728" rx="260" ry="39" stroke="url(#gradSouthPole)" stroke-width="7.5"/>
</g>
<g id="globe-compass" transform="translate(1050 820)">
<circle cx="0" cy="0" r="52" fill="#0a0e14" fill-opacity="0.42" stroke="#c7d3e1" stroke-opacity="0.52" stroke-width="2"/>
<circle cx="0" cy="0" r="40" fill="none" stroke="#dbe5f1" stroke-opacity="0.64" stroke-width="1.5"/>
<path d="M 0 -38 L 9 0 L 0 38 L -9 0 Z" fill="#e7ecf3" fill-opacity="0.9"/>
<path d="M -38 0 L 0 -9 L 38 0 L 0 9 Z" fill="#8ea1b9" fill-opacity="0.86"/>
<path d="M 0 -28 L 6 0 L 0 28 L -6 0 Z" fill="#223246" fill-opacity="0.9"/>
<circle cx="0" cy="0" r="4.2" fill="#e7ecf3" fill-opacity="0.92"/>
<text x="0" y="-56" text-anchor="middle" fill="#e7ecf3" fill-opacity="0.72" font-size="12" font-family="Segoe UI, sans-serif">N</text>
<text x="0" y="68" text-anchor="middle" fill="#a9bbce" fill-opacity="0.68" font-size="12" font-family="Segoe UI, sans-serif">S</text>
<text x="-66" y="4" text-anchor="middle" fill="#a9bbce" fill-opacity="0.68" font-size="12" font-family="Segoe UI, sans-serif">W</text>
<text x="66" y="4" text-anchor="middle" fill="#a9bbce" fill-opacity="0.68" font-size="12" font-family="Segoe UI, sans-serif">E</text>
</g>
<circle id="globe-border" cx="720" cy="560" r="330" fill="none" stroke="#e7ecf3" stroke-width="15"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

4
examples/app_hub/assets/hub-logo-fragment-globe-snapshot-20260526e.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Internal snapshot globe 20260526e">
<!-- Internal snapshot pointer for build 20260526e -->
<image href="hub-logo-fragment-globe.svg?v=20260526e" x="0" y="0" width="1920" height="1080"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 348 B

4
examples/app_hub/assets/hub-logo-fragment-globe-snapshot-20260527g.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Internal snapshot globe 20260527g">
<!-- Internal snapshot pointer for build 20260527g -->
<image href="hub-logo-fragment-globe.svg?v=20260527g" x="0" y="0" width="1920" height="1080"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 348 B

4
examples/app_hub/assets/hub-logo-fragment-globe-snapshot-20260527i.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Internal snapshot globe 20260527i">
<!-- Internal snapshot pointer for build 20260527i -->
<image href="hub-logo-fragment-globe.svg?v=20260527i" x="0" y="0" width="1920" height="1080"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 348 B

4
examples/app_hub/assets/hub-logo-fragment-globe-snapshot-20260527j.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Internal snapshot globe 20260527j">
<!-- Internal snapshot pointer for build 20260527j -->
<image href="hub-logo-fragment-globe.svg?v=20260527j" x="0" y="0" width="1920" height="1080"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 348 B

84
examples/app_hub/assets/hub-logo-fragment-globe.svg
View File

@@ -1,38 +1,62 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" role="img" aria-label="Globe fragment">
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Globe fragment 3x3 build 20260527i">
<!-- build=20260527i: thunder title pass + darker oceans with separate continent layer -->
<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 id="globeOcean" cx="24%" cy="18%" r="86%">
<stop offset="0%" stop-color="#466287"/>
<stop offset="42%" stop-color="#16263c"/>
<stop offset="100%" stop-color="#04060b"/>
</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 id="gradNorthPole" x1="830" y1="432" x2="610" y2="358" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#e7ecf3" stop-opacity="0.02"/>
<stop offset="100%" stop-color="#e7ecf3" stop-opacity="1"/>
</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 id="gradSouthPole" x1="830" y1="754" x2="610" y2="680" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#e7ecf3" stop-opacity="0.02"/>
<stop offset="100%" stop-color="#e7ecf3" stop-opacity="1"/>
</linearGradient>
<clipPath id="globeClip"><circle cx="720" cy="560" r="330"/></clipPath>
<linearGradient id="gradEquator" x1="1040" y1="560" x2="400" y2="560" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#e7ecf3" stop-opacity="0.02"/>
<stop offset="50%" stop-color="#e7ecf3" stop-opacity="1"/>
<stop offset="100%" stop-color="#e7ecf3" stop-opacity="0.02"/>
</linearGradient>
<linearGradient id="meridianSun" x1="390" y1="560" x2="1050" y2="560" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#f2f6fc" stop-opacity="0.95"/>
<stop offset="52%" stop-color="#d7e0ec" stop-opacity="0.78"/>
<stop offset="100%" stop-color="#4f6178" stop-opacity="0.92"/>
</linearGradient>
<clipPath id="gridClip"><circle cx="720" cy="560" r="322"/></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"/>
<circle id="globe-body" cx="720" cy="560" r="330" fill="url(#globeOcean)"/>
<g id="globe-grid" clip-path="url(#gridClip)" fill="none" stroke-linecap="round" stroke-linejoin="round">
<circle id="globe-pivot" cx="720" cy="560" r="7" fill="#5eead4" stroke="#0a0e14" stroke-width="1.5"/>
<path id="globe-meridian-west" d="M 620 248 Q 358 560 620 872" stroke="url(#meridianSun)" stroke-opacity="0.98" stroke-width="8"/>
<path id="globe-meridian-prime" d="M 720 248 L 720 872" stroke="url(#meridianSun)" stroke-opacity="0.98" stroke-width="7.5"/>
<path id="globe-meridian-east" d="M 820 248 Q 1082 560 820 872" stroke="url(#meridianSun)" stroke-opacity="0.98" stroke-width="8"/>
<ellipse id="globe-equator" cx="720" cy="560" rx="318" ry="11" stroke="url(#gradEquator)" stroke-width="7.5"/>
<ellipse id="globe-north-pole" cx="720" cy="392" rx="260" ry="39" stroke="url(#gradNorthPole)" stroke-width="7.5"/>
<ellipse id="globe-south-pole" cx="720" cy="728" rx="260" ry="39" stroke="url(#gradSouthPole)" stroke-width="7.5"/>
</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 id="globe-compass" transform="translate(1050 820)">
<circle cx="0" cy="0" r="52" fill="#0a0e14" fill-opacity="0.42" stroke="#c7d3e1" stroke-opacity="0.52" stroke-width="2"/>
<circle cx="0" cy="0" r="40" fill="none" stroke="#dbe5f1" stroke-opacity="0.64" stroke-width="1.5"/>
<path d="M 0 -38 L 9 0 L 0 38 L -9 0 Z" fill="#e7ecf3" fill-opacity="0.9"/>
<path d="M -38 0 L 0 -9 L 38 0 L 0 9 Z" fill="#8ea1b9" fill-opacity="0.86"/>
<path d="M 0 -28 L 6 0 L 0 28 L -6 0 Z" fill="#223246" fill-opacity="0.9"/>
<circle cx="0" cy="0" r="4.2" fill="#e7ecf3" fill-opacity="0.92"/>
<text x="0" y="-56" text-anchor="middle" fill="#e7ecf3" fill-opacity="0.72" font-size="12" font-family="Segoe UI, sans-serif">N</text>
<text x="0" y="68" text-anchor="middle" fill="#a9bbce" fill-opacity="0.68" font-size="12" font-family="Segoe UI, sans-serif">S</text>
<text x="-66" y="4" text-anchor="middle" fill="#a9bbce" fill-opacity="0.68" font-size="12" font-family="Segoe UI, sans-serif">W</text>
<text x="66" y="4" text-anchor="middle" fill="#a9bbce" fill-opacity="0.68" font-size="12" font-family="Segoe UI, sans-serif">E</text>
</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"/>
<circle id="globe-border" cx="720" cy="560" r="330" fill="none" stroke="#e7ecf3" stroke-width="15"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

126
examples/app_hub/assets/hub-logo-fragment-rocket.svg
View File

@@ -1,40 +1,110 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" role="img" aria-label="Rocket fragment">
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice" 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 id="hullTop" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="40%" stop-color="#e7ecf3"/>
<stop offset="100%" stop-color="#9aadc4"/>
</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 id="hullSide" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#c5d0df"/>
<stop offset="55%" stop-color="#7f92a8"/>
<stop offset="100%" stop-color="#3a4a5e"/>
</linearGradient>
<linearGradient id="hullShadow" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#1a2332" stop-opacity="0.55"/>
<stop offset="100%" stop-color="#1a2332" stop-opacity="0"/>
</linearGradient>
<linearGradient id="stripeBlue" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#5ba3ff"/>
<stop offset="100%" stop-color="#1e4a8a"/>
</linearGradient>
<linearGradient id="wingGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#3d8bfd"/>
<stop offset="0%" stop-color="#4f9bff"/>
<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"/>
<linearGradient id="glassGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#0f1a28"/>
<stop offset="100%" stop-color="#243044"/>
</linearGradient>
<radialGradient id="engineGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="25%" stop-color="#5eead4"/>
<stop offset="55%" stop-color="#3d8bfd"/>
<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 id="engineBloom" x="-120%" y="-120%" width="340%" height="340%">
<feGaussianBlur stdDeviation="16" result="b"/>
<feMerge><feMergeNode in="b"/><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<filter id="softShadow" x="-30%" y="-30%" width="160%" height="160%">
<feDropShadow dx="4" dy="8" stdDeviation="6" flood-color="#000" flood-opacity="0.45"/>
</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 id="rocketship" transform="translate(1180,355) rotate(-30) scale(1,-1)" filter="url(#softShadow)">
<!-- Belly shadow -->
<path d="M -455 18 L -120 28 L 40 14 L -120 -4 Z" fill="url(#hullShadow)" opacity="0.65"/>
<!-- Lower hull -->
<path d="M -455 14 L -118 26 L 42 12 L 118 2 L 42 -8 L -118 -18 L -455 -8 Z" fill="url(#hullSide)" stroke="#2d3a4f" stroke-width="1.2"/>
<!-- Upper hull -->
<path d="M -118 -18 L 42 -8 L 118 2 L 42 12 L -118 26 L -420 22 L -455 14 L -420 6 L -118 -18 Z" fill="url(#hullTop)" stroke="#8b9cb3" stroke-width="1"/>
<!-- Side blue stripe -->
<path d="M -400 4 L -150 8 L -80 6 L -150 2 L -400 -2 Z" fill="url(#stripeBlue)"/>
<!-- Panel lines -->
<g stroke="#8b9cb3" stroke-opacity="0.45" stroke-width="0.75" fill="none">
<path d="M -380 6 L -380 -6"/><path d="M -300 8 L -300 -8"/><path d="M -220 10 L -220 -10"/>
<path d="M -140 10 L -140 -10"/><path d="M -60 8 L -60 -8"/>
<path d="M -380 -6 Q -250 -4 -118 -8"/><path d="M -380 6 Q -250 4 -118 10"/>
</g>
<!-- Nose cone -->
<path d="M 42 -8 L 118 2 L 42 12 L 8 10 L 8 -4 Z" fill="#f4f7fb" stroke="#9aadc4" stroke-width="1"/>
<path d="M 42 -6 L 96 2 L 42 10 L 18 8 L 18 -2 Z" fill="#ffffff" opacity="0.45"/>
<!-- Top canopy (rocketship2) -->
<path d="M -80 -14 L 72 -8 L 96 2 L 72 6 L -80 2 L -110 -4 Z" fill="url(#glassGrad)" stroke="#3d8bfd" stroke-width="0.9"/>
<g fill="#5eead4" opacity="0.9">
<circle cx="-52" cy="-6" r="2.2"/><circle cx="-28" cy="-5" r="2"/><circle cx="-4" cy="-4" r="1.8"/>
<circle cx="20" cy="-3" r="1.6"/><circle cx="44" cy="-2" r="1.4"/>
</g>
<!-- Belly observation windows -->
<path d="M -220 16 L -120 18 L -90 24 L -120 30 L -220 28 L -250 24 Z" fill="url(#glassGrad)" stroke="#3d8bfd" stroke-width="0.8" opacity="0.95"/>
<g stroke="#5eead4" stroke-width="0.6" opacity="0.7">
<line x1="-210" y1="22" x2="-210" y2="26"/><line x1="-180" y1="22" x2="-180" y2="26"/>
<line x1="-150" y1="23" x2="-150" y2="27"/><line x1="-130" y1="24" x2="-130" y2="28"/>
</g>
<!-- Main swept wings -->
<path d="M -340 26 L -190 28 L -118 118 L -300 98 Z" fill="url(#wingGrad)" stroke="#1a2332" stroke-width="1"/>
<path d="M -340 26 L -190 28 L -150 78" fill="none" stroke="#5eead4" stroke-width="1.2" opacity="0.55"/>
<path d="M -280 48 L -200 50 L -168 88 L -258 76 Z" fill="#243044" opacity="0.5"/>
<!-- Dorsal fin -->
<path d="M -320 -26 L -210 -24 L -188 -68 L -292 -56 Z" fill="#3d8bfd" stroke="#1a2332" stroke-width="1"/>
<path d="M -320 -26 L -230 -24 L -205 -48" fill="none" stroke="#5eead4" stroke-width="1" opacity="0.5"/>
<!-- Tail V-stabilizers -->
<path d="M -430 6 L -468 -8 L -458 -32 L -422 -20 Z" fill="#4a5a6e" stroke="#2d3a4f" stroke-width="0.9"/>
<path d="M -430 22 L -468 36 L -458 58 L -422 44 Z" fill="#4a5a6e" stroke="#2d3a4f" stroke-width="0.9"/>
<!-- Engine housing -->
<path d="M -448 -16 L -478 -20 L -486 -4 L -456 0 Z" fill="#2d3a4f" stroke="#8b9cb3" stroke-width="0.8"/>
<path d="M -448 16 L -478 20 L -486 4 L -456 0 Z" fill="#2d3a4f" stroke="#8b9cb3" stroke-width="0.8"/>
<ellipse cx="-478" cy="0" rx="22" ry="18" fill="#1a2332" stroke="#8b9cb3" stroke-width="1"/>
<ellipse cx="-488" cy="0" rx="14" ry="11" fill="#0a0e14"/>
<!-- Engine glow -->
<g filter="url(#engineBloom)">
<ellipse cx="-458" cy="0" rx="28" ry="24" fill="url(#engineGlow)" opacity="0.95"/>
<ellipse cx="-472" cy="0" rx="44" ry="36" fill="url(#engineGlow)" opacity="0.5"/>
</g>
<ellipse cx="-458" cy="0" rx="11" ry="9" fill="#ffffff" opacity="0.98"/>
<circle cx="100" cy="6" r="3" fill="#5eead4"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 5.8 KiB

73
examples/app_hub/assets/hub-logo-fragment-space.svg
View File

@@ -1,28 +1,75 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" role="img" aria-label="Space fragment">
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Space fragment">
<!-- Static vector sky (not runtime-generated). Editable: #space-bg, #nebula-*, #stars-layer, #stars-blinks -->
<defs>
<radialGradient id="spaceBgGrad" cx="52%" cy="48%" r="75%">
<radialGradient id="spaceBgGrad" cx="52%" cy="48%" r="78%">
<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="0%" stop-color="#b45309" stop-opacity="0.26"/>
<stop offset="55%" stop-color="#92400e" stop-opacity="0.12"/>
<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="0%" stop-color="#3d8bfd" stop-opacity="0.22"/>
<stop offset="55%" stop-color="#1e3a5f" stop-opacity="0.11"/>
<stop offset="100%" stop-color="#0f172a" stop-opacity="0"/>
</radialGradient>
<radialGradient id="nebulaTeal" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#5eead4" stop-opacity="0.14"/>
<stop offset="100%" stop-color="#5eead4" stop-opacity="0"/>
</radialGradient>
<filter id="starBlink" x="-300%" y="-300%" width="700%" height="700%">
<feGaussianBlur stdDeviation="2.2" result="b"/>
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</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"/>
<ellipse id="nebula-amber" cx="280" cy="210" rx="420" ry="290" fill="url(#nebulaAmber)" transform="rotate(-16 280 210)"/>
<ellipse id="nebula-blue" cx="1660" cy="860" rx="460" ry="320" fill="url(#nebulaBlue)" transform="rotate(14 1660 860)"/>
<ellipse id="nebula-teal" cx="1180" cy="180" rx="300" ry="200" fill="url(#nebulaTeal)" transform="rotate(8 1180 180)"/>
<g id="stars-layer" fill="#e7ecf3">
<circle cx="48" cy="42" r="0.9" opacity="0.5"/><circle cx="132" cy="96" r="0.7" opacity="0.42"/>
<circle cx="204" cy="24" r="1.0" opacity="0.55"/><circle cx="292" cy="78" r="0.8" opacity="0.4"/>
<circle cx="388" cy="52" r="0.9" opacity="0.48"/><circle cx="472" cy="114" r="0.7" opacity="0.44"/>
<circle cx="562" cy="28" r="1.1" opacity="0.58"/><circle cx="652" cy="82" r="0.8" opacity="0.4"/>
<circle cx="748" cy="46" r="0.9" opacity="0.46"/><circle cx="836" cy="108" r="0.7" opacity="0.42"/>
<circle cx="928" cy="34" r="1.0" opacity="0.56"/><circle cx="1024" cy="88" r="0.8" opacity="0.45"/>
<circle cx="1124" cy="22" r="0.9" opacity="0.5"/><circle cx="1216" cy="94" r="1.0" opacity="0.54"/>
<circle cx="1324" cy="48" r="0.8" opacity="0.42"/><circle cx="1416" cy="116" r="0.9" opacity="0.48"/>
<circle cx="1524" cy="62" r="0.8" opacity="0.44"/><circle cx="1632" cy="30" r="1.1" opacity="0.58"/>
<circle cx="1736" cy="86" r="0.9" opacity="0.46"/><circle cx="1824" cy="148" r="0.8" opacity="0.4"/>
<circle cx="1888" cy="64" r="1.0" opacity="0.52"/>
<circle cx="72" cy="198" r="0.8" opacity="0.42"/><circle cx="156" cy="268" r="0.9" opacity="0.46"/>
<circle cx="248" cy="318" r="0.7" opacity="0.38"/><circle cx="92" cy="418" r="1.0" opacity="0.52"/>
<circle cx="168" cy="538" r="0.8" opacity="0.4"/><circle cx="58" cy="628" r="0.9" opacity="0.45"/>
<circle cx="138" cy="728" r="0.7" opacity="0.38"/><circle cx="68" cy="838" r="1.0" opacity="0.5"/>
<circle cx="212" cy="898" r="0.8" opacity="0.42"/><circle cx="324" cy="978" r="0.9" opacity="0.48"/>
<circle cx="456" cy="1024" r="0.7" opacity="0.38"/><circle cx="588" cy="986" r="1.0" opacity="0.54"/>
<circle cx="704" cy="1052" r="0.8" opacity="0.4"/><circle cx="848" cy="1014" r="0.9" opacity="0.46"/>
<circle cx="968" cy="1062" r="0.7" opacity="0.36"/><circle cx="1088" cy="1026" r="1.0" opacity="0.52"/>
<circle cx="1228" cy="996" r="0.8" opacity="0.42"/><circle cx="1368" cy="1046" r="0.9" opacity="0.48"/>
<circle cx="1508" cy="1012" r="0.7" opacity="0.38"/><circle cx="1628" cy="1058" r="1.0" opacity="0.52"/>
<circle cx="1752" cy="1024" r="0.8" opacity="0.42"/><circle cx="1868" cy="996" r="0.9" opacity="0.46"/>
<circle cx="1724" cy="208" r="0.9" opacity="0.5"/><circle cx="1848" cy="328" r="0.8" opacity="0.42"/>
<circle cx="1904" cy="458" r="1.0" opacity="0.54"/><circle cx="1796" cy="588" r="0.8" opacity="0.4"/>
<circle cx="1876" cy="712" r="0.9" opacity="0.46"/><circle cx="1768" cy="832" r="0.7" opacity="0.38"/>
<circle cx="118" cy="156" r="1.4" opacity="0.66"/><circle cx="392" cy="188" r="1.5" opacity="0.68"/>
<circle cx="528" cy="944" r="1.4" opacity="0.62"/><circle cx="1176" cy="164" r="1.6" opacity="0.7"/>
<circle cx="1476" cy="886" r="1.4" opacity="0.64"/><circle cx="1776" cy="388" r="1.5" opacity="0.66"/>
<circle cx="172" cy="312" r="2.1" opacity="0.78"/><circle cx="1692" cy="146" r="1.9" opacity="0.74"/>
<circle cx="992" cy="928" r="2.0" opacity="0.72"/>
</g>
<g id="stars-blinks" filter="url(#starBlink)" opacity="0.85">
<path d="M 228 146 L 231 134 L 234 146 L 246 149 L 234 152 L 231 164 L 228 152 L 216 149 Z" fill="#e7ecf3"/>
<path d="M 1544 218 L 1547 208 L 1550 218 L 1562 221 L 1550 224 L 1547 234 L 1544 224 L 1532 221 Z" fill="#5eead4"/>
<path d="M 1824 818 L 1827 808 L 1830 818 L 1842 821 L 1830 824 L 1827 834 L 1824 824 L 1812 821 Z" fill="#e7ecf3"/>
<path d="M 1384 78 L 1386 72 L 1388 78 L 1396 80 L 1388 82 L 1386 88 L 1384 82 L 1376 80 Z" fill="#3d8bfd"/>
<path d="M 468 842 L 470 837 L 472 842 L 478 844 L 472 846 L 470 851 L 468 846 L 462 844 Z" fill="#e7ecf3"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

66
examples/app_hub/assets/hub-logo-fragment-tail.svg
View File

@@ -1,22 +1,58 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" role="img" aria-label="Tail fragment">
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Tail fragment">
<defs>
<linearGradient id="exhaustGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<linearGradient id="plumeOuter" x1="0%" y1="50%" x2="100%" y2="50%">
<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="15%" stop-color="#5eead4" stop-opacity="0.18"/>
<stop offset="45%" stop-color="#3d8bfd" stop-opacity="0.48"/>
<stop offset="75%" stop-color="#5eead4" stop-opacity="0.78"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.95"/>
</linearGradient>
<linearGradient id="plumeMid" x1="0%" y1="50%" x2="100%" y2="50%">
<stop offset="0%" stop-color="#3d8bfd" stop-opacity="0"/>
<stop offset="50%" stop-color="#5eead4" stop-opacity="0.55"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.88"/>
</linearGradient>
<radialGradient id="nozzleBloom" cx="100%" cy="50%" r="40%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="35%" stop-color="#5eead4" stop-opacity="0.9"/>
<stop offset="100%" stop-color="#3d8bfd" stop-opacity="0"/>
</radialGradient>
<filter id="plumeBlur" x="-50%" y="-100%" width="200%" height="300%">
<feGaussianBlur stdDeviation="12" result="b"/>
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</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 id="exhaust-tail" filter="url(#plumeBlur)">
<!-- Rounded volumetric plume: thin at Earth limb, wide at nozzle (~804,584) -->
<path d="
M 372 832
C 452 778, 538 718, 628 658
C 712 602, 772 572, 804 584
C 818 590, 826 598, 832 606
C 768 618, 688 668, 598 728
C 508 788, 428 842, 358 868
Z" fill="url(#plumeOuter)" opacity="0.7"/>
<path d="
M 388 840
C 468 788, 558 728, 648 672
C 718 624, 778 592, 802 584
C 810 586, 814 590, 818 594
C 758 602, 688 642, 618 688
C 538 738, 458 788, 392 812
Z" fill="url(#plumeMid)" opacity="0.82"/>
<!-- Inner hot core -->
<path d="
M 620 668
Q 710 612, 788 588
Q 798 584, 804 584
Q 798 588, 788 592
Q 710 618, 628 672
Z" fill="#ffffff" opacity="0.55"/>
</g>
<ellipse id="exhaust-nozzle-bloom" cx="812" cy="592" rx="48" ry="32" fill="url(#nozzleBloom)" opacity="0.9"/>
<ellipse cx="804" cy="584" rx="16" ry="12" fill="#ffffff" opacity="0.95"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
examples/app_hub/assets/hub-logo-space-bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 387 KiB

441
examples/app_hub/assets/hub-logo-space-bg.svg
View File

@@ -1,441 +0,0 @@
<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>
Side by Side

Before

Width:  |  Height:  |  Size: 20 KiB

BIN
examples/app_hub/assets/hub-logo-transparent.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 287 KiB

207
examples/app_hub/assets/hub-logo-transparent.svg
View File

@@ -1,206 +1,3 @@
<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 xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Android Cast logo mark">
<image href="hub-logo-fragment-globe.svg" x="0" y="0" width="1920" height="1080"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 268 B

94
examples/app_hub/assets/hub-logo.svg
View File

@@ -1,94 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 720" role="img" aria-label="Android Cast - globe and rocket">
<defs>
<radialGradient id="globeShade" cx="38%" cy="32%" r="68%">
<stop offset="0%" stop-color="#3d8bfd" stop-opacity="0.35"/>
<stop offset="55%" stop-color="#1a2332" stop-opacity="0.95"/>
<stop offset="100%" stop-color="#0a0e14" stop-opacity="1"/>
</radialGradient>
<linearGradient id="ocean" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#243044"/>
<stop offset="100%" stop-color="#141c28"/>
</linearGradient>
<linearGradient id="trail" x1="0%" y1="100%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#5eead4" stop-opacity="0"/>
<stop offset="35%" stop-color="#5eead4" stop-opacity="0.85"/>
<stop offset="70%" stop-color="#3d8bfd" stop-opacity="0.9"/>
<stop offset="100%" stop-color="#3d8bfd" stop-opacity="0.2"/>
</linearGradient>
<linearGradient id="rocketBody" x1="0%" y1="50%" x2="100%" y2="50%">
<stop offset="0%" stop-color="#8b9cb3"/>
<stop offset="45%" stop-color="#e7ecf3"/>
<stop offset="100%" stop-color="#3d8bfd"/>
</linearGradient>
<filter id="glow" x="-40%" y="-40%" width="180%" height="180%">
<feGaussianBlur stdDeviation="6" result="b"/>
<feMerge>
<feMergeNode in="b"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<clipPath id="globeClip">
<circle cx="420" cy="380" r="248"/>
</clipPath>
</defs>
<!-- Trail behind globe (left-bottom) -->
<path d="M 48 598 Q 140 520 220 468" fill="none" stroke="url(#trail)" stroke-width="28" stroke-linecap="round" opacity="0.55"/>
<!-- Globe -->
<circle cx="420" cy="380" r="248" fill="url(#ocean)" stroke="#2d3a4f" stroke-width="2"/>
<circle cx="420" cy="380" r="248" fill="url(#globeShade)"/>
<!-- Mercator grid -->
<g clip-path="url(#globeClip)" stroke="#3d8bfd" stroke-opacity="0.22" fill="none">
<ellipse cx="420" cy="380" rx="248" ry="62"/>
<ellipse cx="420" cy="380" rx="248" ry="124"/>
<ellipse cx="420" cy="380" rx="248" ry="186"/>
<line x1="420" y1="132" x2="420" y2="628"/>
<line x1="172" y1="380" x2="668" y2="380"/>
<path d="M 200 220 Q 420 200 640 220"/>
<path d="M 180 320 Q 420 300 660 320"/>
<path d="M 190 440 Q 420 420 650 440"/>
<path d="M 210 520 Q 420 500 630 520"/>
<path d="M 280 180 Q 420 160 560 180"/>
<path d="M 250 560 Q 420 540 590 560"/>
<line x1="296" y1="132" x2="296" y2="628"/>
<line x1="544" y1="132" x2="544" y2="628"/>
<line x1="358" y1="132" x2="358" y2="628"/>
<line x1="482" y1="132" x2="482" y2="628"/>
</g>
<!-- Continents -->
<g clip-path="url(#globeClip)" fill="#5a6b82" fill-opacity="0.5" stroke="#8b9cb3" stroke-opacity="0.3" stroke-width="1">
<!-- North America -->
<path d="M 230 210 Q 210 190 240 170 Q 280 155 330 175 Q 370 200 360 250 Q 340 300 290 290 Q 250 270 230 210 Z"/>
<!-- South America -->
<path d="M 290 310 Q 270 340 295 390 Q 320 440 360 420 Q 390 385 378 340 Q 355 295 290 310 Z"/>
<!-- Europe/Africa -->
<path d="M 430 190 Q 460 170 510 195 Q 545 225 530 270 Q 510 300 475 290 Q 445 265 430 190 Z"/>
<path d="M 445 305 Q 480 285 520 310 Q 555 350 540 410 Q 510 450 470 430 Q 440 395 445 305 Z"/>
<!-- Asia -->
<path d="M 540 190 Q 590 165 660 185 Q 710 215 700 270 Q 670 310 620 305 Q 570 285 540 190 Z"/>
</g>
<!-- Arc trail across globe -->
<path d="M 220 468 Q 320 400 420 355 Q 510 305 610 235" fill="none" stroke="url(#trail)" stroke-width="20" stroke-linecap="round" filter="url(#glow)" opacity="0.7" clip-path="url(#globeClip)"/>
<!-- Arc trail beyond globe -->
<path d="M 610 235 Q 680 185 760 148" fill="none" stroke="url(#trail)" stroke-width="18" stroke-linecap="round" filter="url(#glow)" opacity="0.85"/>
<!-- Rocket: translate to tip position, rotate 38deg -->
<g transform="translate(740,132) rotate(38)">
<!-- Body -->
<path d="M 0 0 L 52 -14 L 48 -6 L 72 -4 L 44 8 L 52 34 L 20 18 L 6 28 Z" fill="url(#rocketBody)" stroke="#2d3a4f" stroke-width="1" stroke-linejoin="round"/>
<!-- Wing -->
<path d="M 52 34 L 82 44 L 68 30 L 76 22 L 52 24 Z" fill="#3d8bfd" opacity="0.9"/>
<!-- Engine glow -->
<ellipse cx="60" cy="36" rx="16" ry="9" fill="#5eead4" opacity="0.7" filter="url(#glow)"/>
<!-- Exhaust -->
<path d="M 82 44 Q 108 54 130 48" fill="none" stroke="#5eead4" stroke-width="9" stroke-linecap="round" opacity="0.65"/>
<path d="M 130 48 Q 158 42 182 38" fill="none" stroke="#5eead4" stroke-width="5" stroke-linecap="round" opacity="0.3"/>
</g>
<!-- Globe rim highlight -->
<circle cx="420" cy="380" r="248" fill="none" stroke="#3d8bfd" stroke-opacity="0.2" stroke-width="2"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 4.7 KiB

22
examples/app_hub/assets/hub-thunder.svg Normal file
View File

@@ -0,0 +1,22 @@
<svg xmlns="http://www.w3.org/2000/svg" width="340" height="46" viewBox="0 0 340 46" role="img" aria-label="Thunder schematic underline">
<defs>
<linearGradient id="thunderCore" x1="0%" y1="50%" x2="100%" y2="50%">
<stop offset="0%" stop-color="#7dd3fc" stop-opacity="0.15"/>
<stop offset="15%" stop-color="#bae6fd" stop-opacity="0.95"/>
<stop offset="48%" stop-color="#ffffff" stop-opacity="1"/>
<stop offset="82%" stop-color="#bae6fd" stop-opacity="0.95"/>
<stop offset="100%" stop-color="#7dd3fc" stop-opacity="0.15"/>
</linearGradient>
<linearGradient id="thunderEdge" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#9ddcff" stop-opacity="0"/>
<stop offset="24%" stop-color="#9ddcff" stop-opacity="0.8"/>
<stop offset="76%" stop-color="#9ddcff" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#9ddcff" stop-opacity="0"/>
</linearGradient>
</defs>
<path d="M 12 24 L 86 24 L 98 16 L 126 31 L 154 13 L 178 28 L 210 11 L 236 27 L 262 17 L 286 25 L 328 25"
fill="none" stroke="url(#thunderCore)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M 12 24 L 86 24 L 98 16 L 126 31 L 154 13 L 178 28 L 210 11 L 236 27 L 262 17 L 286 25 L 328 25"
fill="none" stroke="url(#thunderEdge)" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
examples/app_hub/assets/mercator-source.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

75
examples/app_hub/hub-logo-layers.css
View File

@@ -1,44 +1,51 @@
/* Progressive logo loader (on-demand, fragment-friendly) */
.hub-page::before {
content: none;
}
/* Logo stage: fragments are injected as <img> layers (same box, object-fit: cover). */
.hub-page.logo-enabled::before {
content: "";
.hub-logo-stage {
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);
overflow: hidden;
opacity: 0.75;
}
[data-theme="light"] .hub-page.logo-enabled::before {
.hub-logo-stage[hidden] {
display: none;
}
.hub-logo-layer {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.hub-logo-layer--space {
z-index: 1;
}
.hub-logo-layer--globe {
z-index: 2;
}
.hub-logo-layer--continents {
z-index: 3;
}
.hub-logo-layer--gridOverlay {
z-index: 4;
}
.hub-logo-layer--tail {
z-index: 5;
}
.hub-logo-layer--rocket {
z-index: 6;
}
[data-theme="light"] .hub-logo-stage {
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");
}

19
examples/app_hub/hub.css
View File

@@ -8,10 +8,7 @@
isolation: isolate;
}
/* Logo background is loaded progressively by hub-logo-layers.css when supported. */
.hub-page::before {
content: none;
}
/* Logo background is injected on demand into #hub-logo-stage (see index.html). */
.hub-shell {
flex: 1;
@@ -51,9 +48,17 @@
.hub-title {
margin: 0 0 8px;
font-size: 1.75rem;
font-weight: 600;
letter-spacing: -0.02em;
font-size: 2.45rem;
font-weight: 800;
line-height: 1.02;
letter-spacing: -0.015em;
}
.hub-thunder {
width: clamp(220px, 34vw, 340px);
height: auto;
margin-top: -2px;
filter: drop-shadow(0 0 8px rgba(170, 220, 255, 0.35));
}
.hub-subtitle {

65
examples/app_hub/index.html
View File

@@ -12,14 +12,17 @@
</script>
<link rel="stylesheet" href="/app/androidcast_project/crashes/assets/css/app.css">
<link rel="stylesheet" href="hub.css">
<link rel="stylesheet" href="hub-logo-layers.css">
</head>
<body class="hub-page">
<div id="hub-logo-stage" class="hub-logo-stage" hidden aria-hidden="true"></div>
<div class="shell hub-shell">
<main class="main-pane hub-main">
<header class="hub-header">
<div class="hub-brand">
<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>
<img class="hub-thunder" src="assets/hub-thunder.svg" alt="Thunder underline" width="312" height="46" decoding="async">
</div>
<p class="muted hub-subtitle">Project hub</p>
<label class="toolbar-select hub-theme">
@@ -66,27 +69,57 @@
});
}
// 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 stage = document.getElementById('hub-logo-stage');
if (!stage) return;
var body = document.body;
if (!body) return;
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
var supportsSvg = !!(svg && svg.createSVGRect);
var supportsLayout = !!(window.CSS && CSS.supports && CSS.supports('object-fit', 'cover'));
if (!supportsSvg || !supportsLayout) return;
var logoBuild = '20260527j';
var fragments = {
space: 'assets/hub-logo-fragment-space.svg',
globe: 'assets/hub-logo-fragment-globe.svg',
continents: 'assets/hub-logo-continents-mercator-globe.svg',
gridOverlay: 'assets/hub-logo-fragment-globe-grid-overlay.svg'
};
var parts = {
full: ['space', 'globe', 'continents', 'gridOverlay'],
space: ['space'],
globe: ['globe', 'continents', 'gridOverlay']
};
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 grid = (params.get('grid') || '3').toLowerCase();
var list = parts[part] || parts.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);
function fragmentSrc(name) {
var base = fragments[name];
if (name === 'globe' && grid === '4') {
base = 'assets/hub-logo-fragment-globe-4x4.svg';
}
return base + '?v=' + logoBuild;
}
list.forEach(function (name) {
var img = document.createElement('img');
img.className = 'hub-logo-layer hub-logo-layer--' + name;
img.src = fragmentSrc(name);
img.alt = '';
img.decoding = 'async';
img.loading = 'lazy';
stage.appendChild(img);
});
var logoOpacity = params.get('logoOpacity');
if (logoOpacity) {
stage.style.opacity = logoOpacity;
}
stage.hidden = false;
stage.setAttribute('aria-hidden', 'true');
})();
</script>
</body>