117 lines
2.5 KiB
Vue
117 lines
2.5 KiB
Vue
<template>
|
|
<header class="hero card glass">
|
|
<div class="eyebrow">
|
|
<span class="pill">Titan Lab</span>
|
|
<span class="mono accent">atlas · oceanus · nextcloud-ready</span>
|
|
</div>
|
|
<h1>{{ title }}</h1>
|
|
<p class="lede">{{ subtitle }}</p>
|
|
<div class="cta">
|
|
<a v-for="link in links" :key="link.label" class="btn" :href="link.href" target="_blank" rel="noreferrer">
|
|
{{ link.label }}
|
|
</a>
|
|
</div>
|
|
<div class="inline-status">
|
|
<span v-if="loading" class="pill mono">Loading live data…</span>
|
|
<span v-else-if="error" class="pill mono">{{ error }}</span>
|
|
<span v-else class="pill mono">Live data connected</span>
|
|
</div>
|
|
<div class="hero-grid">
|
|
<div class="mini-card">
|
|
<div class="label">Atlas</div>
|
|
<div class="value">pi + jetson + gpu mesh</div>
|
|
<small>Flux + Longhorn + Traefik</small>
|
|
</div>
|
|
<div class="mini-card">
|
|
<div class="label">Oceanus</div>
|
|
<div class="value">validator</div>
|
|
<small>Scraped via titan-24 into Grafana</small>
|
|
</div>
|
|
<div class="mini-card">
|
|
<div class="label">Ingress</div>
|
|
<div class="value">Traefik + oauth2-proxy</div>
|
|
<small>Keycloak SSO · secure headers</small>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
title: String,
|
|
subtitle: String,
|
|
links: Array,
|
|
loading: Boolean,
|
|
error: String,
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.hero {
|
|
padding: 32px 28px;
|
|
background: linear-gradient(135deg, rgba(0, 229, 197, 0.12), rgba(127, 124, 255, 0.12));
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.eyebrow {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
margin-bottom: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0 0 8px;
|
|
font-size: 32px;
|
|
}
|
|
|
|
.lede {
|
|
margin: 0 0 16px;
|
|
max-width: 720px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.cta {
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
margin: 14px 0;
|
|
}
|
|
|
|
.inline-status {
|
|
margin: 12px 0 8px;
|
|
}
|
|
|
|
.hero-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 12px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.mini-card {
|
|
padding: 12px;
|
|
border-radius: var(--radius-sm);
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
background: rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
.label {
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
letter-spacing: 0.03em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.value {
|
|
color: var(--text-strong);
|
|
font-weight: 700;
|
|
margin: 4px 0;
|
|
}
|
|
|
|
small {
|
|
color: var(--text-muted);
|
|
}
|
|
</style>
|