ac/android_cast
1
0
Fork 0
mirror of git://f0xx.org/android_cast synced 2026-07-29 05:58:14 +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>

19
examples/definitions.txt Normal file
View File

@@ -0,0 +1,19 @@
Rocketship — more detail: panel seams, cockpit windows, delta wing structure, dorsal/tail fins, dual engine bells, nozzle glow, nav lights.
Earth grid — strict 3×3 only: 2 latitude parallels (60°N / 60°S) + equator, 3 meridians (45°W / prime / 45°E). No extra lines.
Poles — verified: North at top (720, 230), South at bottom (720, 890) on the sphere; small pole markers added.
Continents — replaced ovals with angular coastline-style paths (Americas partial, Greenland, Eurasia, Europe, Africa, Arabia, India, SE Asia).
Exhaust — volumetric tapered ribbon (filled paths + inner/outer gradients + nozzle bloom), aligned to rocket nozzle at ~(868, 582).
Sky / cosmic area — static SVG, not generated at runtime. Stars/nebulae are hand-placed vector elements (gradients + circles + blink paths). Nothing is computed in JS or canvas. If you want variation, we can add a separate review pass (denser star field, different nebula shapes) by editing hub-logo-fragment-space.svg only.
i need orchestration for the whole project and project parts. if you need to write some configs or scripts - do it in ./orchestration folder. the tasks there are:
- global - to make able to run the whole backend (and connected frontend parts) locally on my laptop without having external server and DNS. you may use light DNS stubs via /etc/hosts* if needed but generally the minor intervention on the host is the goal
- sub-global: run all infra inside docker containers, separatedly and specifically: landing (hub, 1 docker frontend (FE for the future)) ->>> gitea (1 separated docker FE) ->>> the rest (1 separated docker FE for crashes/tasks web interface)
- sub-global: use shared code base whenever possible, reachable using decentralized version control system like git or DVFS (distributed virtual file system). changes on one end should reflect changes on another in easy way.
- sub-global: minimalistic infra, but the docker base images should commonly follow already proven solutions like nginx as a FE, php as the primary BE language, mariadb as DB
- "1 click deploy" - if docker is installed, would like to see the only one script than is:
1) either create docker infra on the laptop
2) update the existing infra from previous run
anyway, finally it should run, ideally on any devices
the side branch for it is 'feature/20260527_orchestration' forked from the current stable 'next'. do preparations in parallel, ill request SVG landing changes over 'next'