mirror of
git://f0xx.org/android_cast
synced 2026-07-29 06:18:42 +03:00
Add hub landing logo SVG and watermark background.
Globe with mercator grid, rocket arc, and palette aligned to crash console; hub.css at 3% opacity background; styles split from inline HTML. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Anton Afanasyeu
@@ -2,7 +2,11 @@
|
||||
|
||||
**Infra overview:** [docs/INFRA.md](../../docs/INFRA.md)
|
||||
|
||||
Static landing: `index.html`, `hub.css`, `assets/hub-logo.svg` (globe + rocket; palette matches crash console).
|
||||
|
||||
**BE only.** FE `apps.f0xx.org` sends `location /` → `http://artc0.intra.raptor.org:80` (not :8089).
|
||||
|
||||
Deploy copies/symlink under `.../androidcast_project/` on the VM. Background watermark is **3% opacity** (`hub.css`).
|
||||
|
||||
See **[DEPLOY.md](DEPLOY.md)** — edit `listen 80` in `tmp/BE_alpine/etc/nginx/conf.d/apps.conf` using
|
||||
`examples/crash_reporter/backend/nginx.apps-port80.fragment`.
|
||||
|
||||
91
examples/app_hub/assets/hub-logo.svg
Normal file
91
examples/app_hub/assets/hub-logo.svg
Normal file
@@ -0,0 +1,91 @@
|
||||
<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 sphere -->
|
||||
<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"/>
|
||||
<ellipse cx="420" cy="132" rx="248" ry="48"/>
|
||||
<ellipse cx="420" cy="628" rx="248" ry="48"/>
|
||||
<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"/>
|
||||
</g>
|
||||
|
||||
<!-- Continents (stylized) -->
|
||||
<g clip-path="url(#globeClip)" fill="#5a6b82" fill-opacity="0.55" stroke="#8b9cb3" stroke-opacity="0.35" stroke-width="1">
|
||||
<path d="M 300 260 Q 280 220 310 200 Q 350 185 380 210 Q 400 250 370 290 Q 340 320 300 300 Z"/>
|
||||
<path d="M 320 310 Q 300 340 330 380 Q 360 420 390 400 Q 410 360 400 330 Q 370 300 320 310 Z"/>
|
||||
<path d="M 450 240 Q 480 210 520 230 Q 560 260 550 300 Q 530 340 490 330 Q 460 300 450 240 Z"/>
|
||||
<path d="M 500 350 Q 540 330 580 360 Q 610 400 590 440 Q 550 470 510 450 Q 480 410 500 350 Z"/>
|
||||
<path d="M 390 420 Q 420 400 460 430 Q 490 470 470 510 Q 440 530 410 500 Q 380 460 390 420 Z"/>
|
||||
</g>
|
||||
|
||||
<!-- Arc across globe + front trail -->
|
||||
<path d="M 220 468 Q 320 400 420 360 Q 520 300 620 210 Q 700 150 780 120"
|
||||
fill="none" stroke="url(#trail)" stroke-width="22" stroke-linecap="round"
|
||||
filter="url(#glow)" opacity="0.75" clip-path="url(#globeClip)"/>
|
||||
<path d="M 520 300 Q 600 240 700 180 Q 760 145 820 118"
|
||||
fill="none" stroke="url(#trail)" stroke-width="20" stroke-linecap="round"
|
||||
filter="url(#glow)" opacity="0.9"/>
|
||||
|
||||
<!-- Rocket -->
|
||||
<g transform="translate(798 108) rotate(38)">
|
||||
<path d="M 0 28 L 52 0 L 48 8 L 72 12 L 44 20 L 56 48 L 24 32 L 8 40 Z"
|
||||
fill="url(#rocketBody)" stroke="#3d8bfd" stroke-width="1.2" stroke-linejoin="round"/>
|
||||
<path d="M 56 48 L 88 56 L 72 44 L 80 36 L 56 40 Z" fill="#3d8bfd" opacity="0.85"/>
|
||||
<ellipse cx="62" cy="50" rx="18" ry="10" fill="#5eead4" opacity="0.7" filter="url(#glow)"/>
|
||||
<path d="M 88 56 Q 110 62 130 58 Q 115 54 100 50" fill="none" stroke="#5eead4"
|
||||
stroke-width="8" stroke-linecap="round" opacity="0.65"/>
|
||||
<path d="M 130 58 Q 155 52 175 48" fill="none" stroke="#5eead4"
|
||||
stroke-width="5" stroke-linecap="round" opacity="0.35"/>
|
||||
</g>
|
||||
|
||||
<!-- Rim highlight -->
|
||||
<circle cx="420" cy="380" r="248" fill="none" stroke="#3d8bfd" stroke-opacity="0.18" stroke-width="3"/>
|
||||
</svg>
|
||||
192
examples/app_hub/hub.css
Normal file
192
examples/app_hub/hub.css
Normal file
@@ -0,0 +1,192 @@
|
||||
/* Project hub — matches crash console tokens (app.css) */
|
||||
|
||||
.hub-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
/* 97% transparent watermark */
|
||||
.hub-page::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background: url("assets/hub-logo.svg") center center / min(92vmin, 960px) no-repeat;
|
||||
opacity: 0.03;
|
||||
}
|
||||
|
||||
[data-theme="light"] .hub-page::before {
|
||||
opacity: 0.035;
|
||||
}
|
||||
|
||||
.hub-shell {
|
||||
flex: 1;
|
||||
min-height: calc(100vh - 40px);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hub-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: calc(100vh - 40px);
|
||||
padding: 32px 28px 48px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hub-header {
|
||||
text-align: center;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.hub-brand {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.hub-logo-mark {
|
||||
width: 56px;
|
||||
height: 42px;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.hub-title {
|
||||
margin: 0 0 8px;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.hub-subtitle {
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
.hub-theme {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hub-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(200px, 1fr));
|
||||
gap: 24px;
|
||||
width: 100%;
|
||||
max-width: 1080px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hub-card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 22px 24px;
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hub-card:hover,
|
||||
.hub-card:focus-visible {
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.hub-cards .hub-card {
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.hub-cards .hub-card:hover,
|
||||
.hub-cards .hub-card:focus-visible {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.44);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
[data-theme="light"] .hub-cards .hub-card:hover,
|
||||
[data-theme="light"] .hub-cards .hub-card:focus-visible {
|
||||
box-shadow: 0 20px 44px rgba(26, 35, 50, 0.28);
|
||||
}
|
||||
|
||||
.hub-card-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.hub-card-icon .nav-icon {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hub-card-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1.25;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.nav-icon--git {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.nav-icon--git::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-icon--git::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 5px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: 2px solid currentColor;
|
||||
border-left: none;
|
||||
border-bottom: none;
|
||||
border-radius: 0 6px 0 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hub-page .bottom-bar {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.hub-cards {
|
||||
grid-template-columns: 1fr;
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.hub-cards .hub-card {
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
.hub-cards .hub-card:hover,
|
||||
.hub-cards .hub-card:focus-visible {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
@@ -11,70 +11,16 @@
|
||||
})();
|
||||
</script>
|
||||
<link rel="stylesheet" href="/app/androidcast_project/crashes/assets/css/app.css">
|
||||
<style>
|
||||
.hub-page { min-height: 100vh; display: flex; flex-direction: column; }
|
||||
.hub-shell { flex: 1; min-height: calc(100vh - 40px); }
|
||||
.hub-main {
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
min-height: calc(100vh - 40px); padding: 32px 28px 48px; box-sizing: border-box;
|
||||
}
|
||||
.hub-header { text-align: center; margin-bottom: 36px; }
|
||||
.hub-title { margin: 0 0 8px; font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; }
|
||||
.hub-subtitle { margin: 0 0 16px; }
|
||||
.hub-theme { justify-content: center; }
|
||||
.hub-cards {
|
||||
display: grid; grid-template-columns: repeat(3, minmax(200px, 1fr));
|
||||
gap: 24px; width: 100%; max-width: 1080px; margin: 0;
|
||||
}
|
||||
.hub-card {
|
||||
display: flex; flex-direction: row; align-items: center; gap: 14px;
|
||||
padding: 22px 24px; color: var(--text); text-decoration: none; cursor: pointer;
|
||||
}
|
||||
.hub-card:hover, .hub-card:focus-visible {
|
||||
color: var(--text); text-decoration: none; outline: none;
|
||||
}
|
||||
.hub-cards .hub-card {
|
||||
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
|
||||
}
|
||||
.hub-cards .hub-card:hover, .hub-cards .hub-card:focus-visible {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.44);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
[data-theme="light"] .hub-cards .hub-card:hover,
|
||||
[data-theme="light"] .hub-cards .hub-card:focus-visible {
|
||||
box-shadow: 0 20px 44px rgba(26, 35, 50, 0.28);
|
||||
}
|
||||
.hub-card-icon {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0; width: 40px; height: 40px; color: var(--accent);
|
||||
}
|
||||
.hub-card-icon .nav-icon { position: relative; }
|
||||
.hub-card-label { font-size: 14px; font-weight: 500; line-height: 1.25; text-align: left; }
|
||||
.nav-icon--git { width: 18px; height: 18px; }
|
||||
.nav-icon--git::before {
|
||||
content: ""; position: absolute; left: 2px; top: 2px;
|
||||
width: 7px; height: 7px; border: 2px solid currentColor; border-radius: 50%; box-sizing: border-box;
|
||||
}
|
||||
.nav-icon--git::after {
|
||||
content: ""; position: absolute; left: 8px; top: 5px;
|
||||
width: 10px; height: 10px; border: 2px solid currentColor;
|
||||
border-left: none; border-bottom: none; border-radius: 0 6px 0 0; box-sizing: border-box;
|
||||
}
|
||||
@media (max-width: 860px) {
|
||||
.hub-cards { grid-template-columns: 1fr; max-width: 420px; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.hub-cards .hub-card { transition: border-color .15s ease, box-shadow .15s ease; }
|
||||
.hub-cards .hub-card:hover, .hub-cards .hub-card:focus-visible { transform: none; }
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="hub.css">
|
||||
</head>
|
||||
<body class="hub-page">
|
||||
<div class="shell hub-shell">
|
||||
<main class="main-pane hub-main">
|
||||
<header class="hub-header">
|
||||
<h1 class="hub-title">Android Cast</h1>
|
||||
<div class="hub-brand">
|
||||
<img class="hub-logo-mark" src="assets/hub-logo.svg" alt="" width="112" height="84" decoding="async">
|
||||
<h1 class="hub-title">Android Cast</h1>
|
||||
</div>
|
||||
<p class="muted hub-subtitle">Project hub</p>
|
||||
<label class="toolbar-select hub-theme">
|
||||
<span>Theme</span>
|
||||
|
||||
Reference in New Issue
Block a user