Buckets:

techprotrade
/

LuunaOS

Files

xet

techprotrade/LuunaOS / NEXUS_AI.pro /pixel-perfect-pixels-main /LuunaOSALLORK.html

techprotrade

4 months ago

download

raw

83.2 kB

	<!DOCTYPE html>
	<html lang="et">
	<head>
	<!--
	______ __
	/ ____/___ ____ ___ ____ __ __/ /____ _____
	/ / / __ \/ __ `__ \/ __ \/ / / / __/ _ \/ ___/
	/ /___/ /_/ / / / / / / /_/ / /_/ / /_/ __/ /
	\____/\____/_/ /_/ /_/ .___/\__,_/\__/\___/_/
	/_/
	Created with Perplexity Computer
	https://www.perplexity.ai/computer
	-->

	<!-- Perplexity Computer Attribution — SEO Meta Tags -->
	<meta name="generator" content="Perplexity Computer">
	<meta name="author" content="Perplexity Computer">
	<meta property="og:see_also" content="https://www.perplexity.ai/computer">
	<link rel="author" href="https://www.perplexity.ai/computer">

	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>LuunaOS — Master Command Center</title>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
	<style>
	/* ============================================
	LUUNAOS MASTER COMMAND CENTER
	Cyberpunk Dark Theme
	============================================ */

	:root {
	--bg-primary: #0a0a0f;
	--bg-secondary: #0f0f18;
	--bg-card: rgba(15, 15, 28, 0.7);
	--bg-card-hover: rgba(20, 20, 35, 0.85);
	--bg-glass: rgba(10, 10, 20, 0.6);
	--border-color: rgba(0, 255, 213, 0.15);
	--border-hover: rgba(0, 255, 213, 0.35);

	--cyan: #00ffd5;
	--cyan-dim: rgba(0, 255, 213, 0.5);
	--cyan-glow: rgba(0, 255, 213, 0.15);
	--purple: #8b5cf6;
	--purple-dim: rgba(139, 92, 246, 0.5);
	--purple-glow: rgba(139, 92, 246, 0.15);
	--amber: #f59e0b;
	--amber-dim: rgba(245, 158, 11, 0.5);
	--red: #ef4444;
	--red-dim: rgba(239, 68, 68, 0.5);
	--green: #10b981;
	--green-dim: rgba(16, 185, 129, 0.5);
	--gold: #fbbf24;
	--gold-dim: rgba(251, 191, 36, 0.5);

	--text-primary: #e2e8f0;
	--text-secondary: #94a3b8;
	--text-muted: #64748b;

	--font-mono: 'JetBrains Mono', monospace;
	--font-body: 'Inter', system-ui, sans-serif;

	--radius: 12px;
	--radius-sm: 8px;
	--radius-lg: 16px;
	}

	/* Reset */
	, ::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

	html {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	}

	body {
	font-family: var(--font-body);
	background: var(--bg-primary);
	color: var(--text-primary);
	min-height: 100vh;
	overflow-x: hidden;
	line-height: 1.6;
	}

	/* ============================================
	STARFIELD BACKGROUND
	============================================ */
	#starfield {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	z-index: 0;
	pointer-events: none;
	}

	/* ============================================
	MAIN LAYOUT
	============================================ */
	.app-wrapper {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	}

	/* ============================================
	HEADER
	============================================ */
	.header {
	padding: 20px 24px 0;
	border-bottom: 1px solid var(--border-color);
	background: rgba(10, 10, 15, 0.85);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	position: sticky;
	top: 0;
	z-index: 100;
	}

	.header-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	}

	.logo-area {
	display: flex;
	align-items: center;
	gap: 14px;
	}

	.logo-icon {
	width: 40px; height: 40px;
	position: relative;
	}

	.logo-icon svg {
	width: 100%; height: 100%;
	}

	.logo-title {
	font-family: var(--font-mono);
	font-size: 22px;
	font-weight: 700;
	background: linear-gradient(135deg, var(--cyan), var(--purple));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	letter-spacing: -0.5px;
	}

	.logo-subtitle {
	font-size: 11px;
	color: var(--text-muted);
	font-family: var(--font-mono);
	letter-spacing: 1px;
	text-transform: uppercase;
	}

	.header-status {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 13px;
	color: var(--text-secondary);
	}

	.status-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 8px var(--green-dim);
	animation: pulse-dot 2s infinite;
	display: inline-block;
	}

	@keyframes pulse-dot {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
	}

	.live-clock {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--cyan);
	}

	/* ============================================
	TAB NAVIGATION
	============================================ */
	.tab-nav {
	display: flex;
	gap: 0;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	}
	.tab-nav::-webkit-scrollbar { display: none; }

	.tab-btn {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	color: var(--text-muted);
	background: none;
	border: none;
	padding: 12px 18px;
	cursor: pointer;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: all 0.25s ease;
	letter-spacing: 0.3px;
	}

	.tab-btn:hover {
	color: var(--text-secondary);
	background: rgba(0, 255, 213, 0.03);
	}

	.tab-btn.active {
	color: var(--cyan);
	border-bottom-color: var(--cyan);
	background: rgba(0, 255, 213, 0.05);
	}

	/* ============================================
	MAIN CONTENT
	============================================ */
	.main-content {
	flex: 1;
	padding: 24px;
	max-width: 1440px;
	margin: 0 auto;
	width: 100%;
	}

	.tab-panel {
	display: none;
	animation: fadeIn 0.3s ease;
	}

	.tab-panel.active {
	display: block;
	}

	@keyframes fadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
	}

	/* ============================================
	KPI CARDS
	============================================ */
	.kpi-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 28px;
	}

	.kpi-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	padding: 20px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	position: relative;
	overflow: hidden;
	transition: border-color 0.3s, transform 0.2s;
	}

	.kpi-card:hover {
	border-color: var(--border-hover);
	transform: translateY(-2px);
	}

	.kpi-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 2px;
	background: linear-gradient(90deg, var(--cyan), var(--purple));
	opacity: 0.6;
	}

	.kpi-label {
	font-size: 12px;
	color: var(--text-muted);
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 8px;
	}

	.kpi-value {
	font-size: 36px;
	font-weight: 700;
	font-family: var(--font-mono);
	color: var(--cyan);
	line-height: 1;
	}

	.kpi-icon {
	position: absolute;
	top: 16px; right: 16px;
	font-size: 20px;
	opacity: 0.4;
	}

	/* ============================================
	SYSTEM STATUS GRID
	============================================ */
	.section-title {
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 600;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	}

	.section-title::before {
	content: '';
	width: 3px;
	height: 16px;
	background: var(--cyan);
	border-radius: 2px;
	}

	.status-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-bottom: 32px;
	}

	.status-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	padding: 18px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: border-color 0.3s, transform 0.2s;
	}

	.status-card:hover {
	border-color: var(--border-hover);
	transform: translateY(-1px);
	}

	.status-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
	}

	.status-card-name {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
	color: var(--text-primary);
	}

	.status-badge {
	font-size: 11px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 20px;
	font-family: var(--font-mono);
	}

	.status-badge.online {
	background: rgba(16, 185, 129, 0.15);
	color: var(--green);
	border: 1px solid rgba(16, 185, 129, 0.3);
	}

	.status-badge.active {
	background: rgba(0, 255, 213, 0.1);
	color: var(--cyan);
	border: 1px solid rgba(0, 255, 213, 0.25);
	}

	.status-badge.building {
	background: rgba(245, 158, 11, 0.15);
	color: var(--amber);
	border: 1px solid rgba(245, 158, 11, 0.3);
	}

	.status-card-detail {
	font-size: 12px;
	color: var(--text-muted);
	}

	.status-card-detail a {
	color: var(--cyan-dim);
	text-decoration: none;
	transition: color 0.2s;
	}
	.status-card-detail a:hover {
	color: var(--cyan);
	text-decoration: underline;
	}

	/* Progress bar inside status card */
	.progress-bar-wrap {
	margin-top: 10px;
	background: rgba(255,255,255,0.05);
	border-radius: 6px;
	height: 6px;
	overflow: hidden;
	}
	.progress-bar-fill {
	height: 100%;
	border-radius: 6px;
	background: linear-gradient(90deg, var(--cyan), var(--purple));
	transition: width 1.5s ease;
	}

	/* ============================================
	20-STEP MASTER PLAN TIMELINE
	============================================ */
	.timeline {
	position: relative;
	padding-left: 40px;
	}

	.timeline::before {
	content: '';
	position: absolute;
	left: 15px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: linear-gradient(180deg,
	var(--cyan) 0%,
	var(--purple) 30%,
	var(--amber) 60%,
	var(--gold) 100%
	);
	opacity: 0.4;
	}

	.timeline-step {
	position: relative;
	margin-bottom: 20px;
	}

	.timeline-dot {
	position: absolute;
	left: -33px;
	top: 20px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid var(--cyan);
	background: var(--bg-primary);
	z-index: 2;
	}

	.timeline-dot.kriitiline { border-color: var(--red); box-shadow: 0 0 8px var(--red-dim); }
	.timeline-dot.kõrge { border-color: var(--amber); box-shadow: 0 0 8px var(--amber-dim); }
	.timeline-dot.keskmine { border-color: var(--cyan); box-shadow: 0 0 8px var(--cyan-glow); }
	.timeline-dot.madal { border-color: var(--purple); box-shadow: 0 0 8px var(--purple-glow); }
	.timeline-dot.visioon { border-color: var(--gold); box-shadow: 0 0 8px var(--gold-dim); }

	.step-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	overflow: hidden;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: border-color 0.3s;
	}

	.step-card:hover {
	border-color: var(--border-hover);
	}

	.step-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	cursor: pointer;
	user-select: none;
	gap: 12px;
	}

	.step-header:hover {
	background: rgba(0, 255, 213, 0.03);
	}

	.step-number {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 700;
	color: var(--bg-primary);
	background: var(--cyan);
	width: 28px; height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	}

	.step-number.kriitiline { background: var(--red); }
	.step-number.kõrge { background: var(--amber); color: #000; }
	.step-number.keskmine { background: var(--cyan); color: #000; }
	.step-number.madal { background: var(--purple); }
	.step-number.visioon { background: var(--gold); color: #000; }

	.step-info {
	flex: 1;
	min-width: 0;
	}

	.step-title {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
	color: var(--text-primary);
	line-height: 1.3;
	}

	.step-title-estonian {
	font-size: 11px;
	color: var(--text-muted);
	font-style: italic;
	margin-top: 2px;
	}

	.step-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	}

	.priority-tag {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 4px;
	letter-spacing: 0.5px;
	}

	.priority-tag.kriitiline { background: rgba(239, 68, 68, 0.15); color: var(--red); border: 1px solid rgba(239, 68, 68, 0.3); }
	.priority-tag.kõrge { background: rgba(245, 158, 11, 0.15); color: var(--amber); border: 1px solid rgba(245, 158, 11, 0.3); }
	.priority-tag.keskmine { background: rgba(0, 255, 213, 0.1); color: var(--cyan); border: 1px solid rgba(0, 255, 213, 0.25); }
	.priority-tag.madal { background: rgba(139, 92, 246, 0.15); color: var(--purple); border: 1px solid rgba(139, 92, 246, 0.3); }
	.priority-tag.visioon { background: rgba(251, 191, 36, 0.15); color: var(--gold); border: 1px solid rgba(251, 191, 36, 0.3); }

	.step-pct {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 700;
	color: var(--cyan);
	min-width: 40px;
	text-align: right;
	}

	.step-chevron {
	width: 20px; height: 20px;
	color: var(--text-muted);
	transition: transform 0.3s;
	flex-shrink: 0;
	}

	.step-card.open .step-chevron {
	transform: rotate(180deg);
	}

	.step-progress-bar {
	height: 3px;
	background: rgba(255,255,255,0.04);
	}

	.step-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--cyan), var(--purple));
	transition: width 1s ease;
	}

	.step-progress-fill.kriitiline { background: linear-gradient(90deg, var(--red), #f87171); }
	.step-progress-fill.kõrge { background: linear-gradient(90deg, var(--amber), #fbbf24); }
	.step-progress-fill.keskmine { background: linear-gradient(90deg, var(--cyan), #06b6d4); }
	.step-progress-fill.madal { background: linear-gradient(90deg, var(--purple), #a78bfa); }
	.step-progress-fill.visioon { background: linear-gradient(90deg, var(--gold), #fde68a); }

	.step-body {
	display: none;
	padding: 0 20px 20px;
	border-top: 1px solid rgba(255,255,255,0.04);
	}

	.step-card.open .step-body {
	display: block;
	animation: fadeIn 0.3s ease;
	}

	.step-section-label {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 16px 0 8px;
	}

	.step-desc {
	font-size: 13px;
	color: var(--text-secondary);
	line-height: 1.7;
	margin-bottom: 4px;
	}

	.step-list {
	list-style: none;
	padding: 0;
	margin: 0;
	}

	.step-list li {
	font-size: 12px;
	color: var(--text-secondary);
	padding: 4px 0;
	padding-left: 16px;
	position: relative;
	line-height: 1.6;
	}

	.step-list li::before {
	content: '›';
	position: absolute;
	left: 0;
	color: var(--cyan);
	font-weight: 700;
	}

	.step-tools {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
	}

	.tool-chip {
	font-family: var(--font-mono);
	font-size: 10px;
	padding: 3px 10px;
	background: rgba(0, 255, 213, 0.08);
	border: 1px solid rgba(0, 255, 213, 0.15);
	border-radius: 20px;
	color: var(--cyan-dim);
	}

	.smart-idea {
	margin-top: 12px;
	padding: 12px 16px;
	background: rgba(139, 92, 246, 0.06);
	border: 1px solid rgba(139, 92, 246, 0.15);
	border-radius: var(--radius-sm);
	font-size: 12px;
	color: var(--text-secondary);
	line-height: 1.7;
	}

	.smart-idea-label {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	color: var(--purple);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 6px;
	}

	/* ============================================
	REPO GRID
	============================================ */
	.repo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 14px;
	margin-bottom: 32px;
	}

	.repo-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	padding: 18px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: border-color 0.3s, transform 0.2s;
	text-decoration: none;
	display: block;
	}

	.repo-card:hover {
	border-color: var(--border-hover);
	transform: translateY(-2px);
	}

	.repo-card-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
	}

	.repo-name {
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 600;
	color: var(--cyan);
	}

	.repo-lang {
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 12px;
	background: rgba(139, 92, 246, 0.12);
	color: var(--purple);
	font-family: var(--font-mono);
	}

	.repo-desc {
	font-size: 12px;
	color: var(--text-muted);
	line-height: 1.5;
	margin-bottom: 8px;
	}

	.repo-updated {
	font-size: 11px;
	color: var(--text-muted);
	font-family: var(--font-mono);
	}

	/* ============================================
	SERVICES GRID
	============================================ */
	.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
	margin-bottom: 32px;
	}

	.service-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: border-color 0.3s;
	}

	.service-card:hover {
	border-color: var(--border-hover);
	}

	.service-status-icon {
	width: 10px; height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
	}

	.service-status-icon.connected {
	background: var(--green);
	box-shadow: 0 0 6px var(--green-dim);
	}

	.service-status-icon.warning {
	background: var(--amber);
	box-shadow: 0 0 6px var(--amber-dim);
	}

	.service-name {
	font-size: 13px;
	font-weight: 500;
	color: var(--text-primary);
	}

	.service-tag {
	margin-left: auto;
	font-family: var(--font-mono);
	font-size: 10px;
	padding: 2px 8px;
	border-radius: 4px;
	}

	.service-tag.connected {
	background: rgba(16, 185, 129, 0.12);
	color: var(--green);
	}

	.service-tag.warning {
	background: rgba(245, 158, 11, 0.12);
	color: var(--amber);
	}

	/* ============================================
	MODELS TABLE
	============================================ */
	.model-section {
	margin-bottom: 32px;
	}

	.model-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
	}

	.model-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 14px 16px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: border-color 0.3s;
	}

	.model-card:hover { border-color: var(--border-hover); }

	.model-name {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 4px;
	}

	.model-provider {
	font-size: 11px;
	color: var(--text-muted);
	font-family: var(--font-mono);
	}

	.model-type-badge {
	display: inline-block;
	font-size: 10px;
	padding: 2px 8px;
	border-radius: 4px;
	font-family: var(--font-mono);
	font-weight: 600;
	margin-top: 6px;
	}

	.badge-local {
	background: rgba(0, 255, 213, 0.1);
	color: var(--cyan);
	border: 1px solid rgba(0, 255, 213, 0.2);
	}

	.badge-cloud {
	background: rgba(139, 92, 246, 0.1);
	color: var(--purple);
	border: 1px solid rgba(139, 92, 246, 0.2);
	}

	.badge-planned {
	background: rgba(245, 158, 11, 0.1);
	color: var(--amber);
	border: 1px solid rgba(245, 158, 11, 0.2);
	}

	/* ============================================
	AGENTS SECTION
	============================================ */
	.agent-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 14px;
	margin-bottom: 32px;
	}

	.agent-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	padding: 18px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: border-color 0.3s;
	}

	.agent-card:hover { border-color: var(--border-hover); }

	.agent-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
	}

	.agent-name {
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 600;
	color: var(--text-primary);
	}

	.agent-status {
	font-size: 18px;
	}

	.agent-detail {
	font-size: 12px;
	color: var(--text-muted);
	line-height: 1.5;
	}

	.agent-model-tag {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 10px;
	padding: 2px 8px;
	background: rgba(0, 255, 213, 0.08);
	border: 1px solid rgba(0, 255, 213, 0.15);
	border-radius: 4px;
	color: var(--cyan-dim);
	margin-top: 8px;
	}

	/* ============================================
	NEXUS-AI BRIDGE
	============================================ */
	.nexus-hero {
	background: linear-gradient(135deg, rgba(0, 255, 213, 0.05), rgba(139, 92, 246, 0.05));
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	padding: 32px;
	margin-bottom: 24px;
	text-align: center;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	}

	.nexus-title {
	font-family: var(--font-mono);
	font-size: 28px;
	font-weight: 700;
	background: linear-gradient(135deg, var(--cyan), var(--purple));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 8px;
	}

	.nexus-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	padding: 10px 24px;
	background: linear-gradient(135deg, var(--cyan), var(--purple));
	color: #000;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 700;
	border-radius: 8px;
	text-decoration: none;
	transition: transform 0.2s, box-shadow 0.2s;
	}

	.nexus-link:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 20px var(--cyan-glow);
	}

	.nexus-modules {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 10px;
	margin-top: 24px;
	}

	.nexus-module {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 12px;
	text-align: center;
	font-size: 12px;
	color: var(--text-secondary);
	font-family: var(--font-mono);
	transition: border-color 0.3s;
	}

	.nexus-module:hover { border-color: var(--border-hover); }

	.nexus-module-icon {
	font-size: 20px;
	margin-bottom: 6px;
	}

	/* ============================================
	FOOTER
	============================================ */
	.app-footer {
	border-top: 1px solid var(--border-color);
	background: rgba(10, 10, 15, 0.85);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	padding: 20px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	}

	.footer-left {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 12px;
	color: var(--text-muted);
	flex-wrap: wrap;
	}

	.footer-left a {
	color: var(--text-muted);
	text-decoration: none;
	transition: color 0.2s;
	}
	.footer-left a:hover { color: var(--cyan); }

	.footer-right {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 12px;
	color: var(--text-muted);
	}

	.footer-right a {
	color: var(--text-muted);
	text-decoration: none;
	transition: color 0.2s;
	}
	.footer-right a:hover { color: var(--cyan); }

	.footer-clock {
	font-family: var(--font-mono);
	color: var(--cyan-dim);
	font-size: 12px;
	}

	/* ============================================
	RESPONSIVE
	============================================ */
	@media (max-width: 1024px) {
	.status-grid {
	grid-template-columns: repeat(2, 1fr);
	}
	}

	@media (max-width: 768px) {
	.kpi-row {
	grid-template-columns: repeat(2, 1fr);
	}
	.status-grid {
	grid-template-columns: 1fr;
	}
	.header-top {
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	}
	.header-status {
	width: 100%;
	justify-content: space-between;
	}
	.main-content {
	padding: 16px;
	}
	.step-header {
	padding: 12px 14px;
	flex-wrap: wrap;
	}
	.step-meta {
	width: 100%;
	justify-content: flex-end;
	margin-top: 4px;
	}
	.timeline {
	padding-left: 30px;
	}
	.timeline-dot {
	left: -23px;
	width: 10px; height: 10px;
	}
	.nexus-hero { padding: 20px; }
	.nexus-title { font-size: 22px; }
	.app-footer { flex-direction: column; align-items: flex-start; }
	.repo-grid { grid-template-columns: 1fr; }
	.services-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
	}

	@media (max-width: 480px) {
	.kpi-row { grid-template-columns: 1fr 1fr; gap: 10px; }
	.kpi-value { font-size: 28px; }
	.tab-btn { padding: 10px 12px; font-size: 11px; }
	.model-grid { grid-template-columns: 1fr; }
	.agent-grid { grid-template-columns: 1fr; }
	}

	/* ============================================
	SCROLLBAR
	============================================ */
	::-webkit-scrollbar { width: 6px; }
	::-webkit-scrollbar-track { background: var(--bg-primary); }
	::-webkit-scrollbar-thumb { background: rgba(0, 255, 213, 0.2); border-radius: 3px; }
	::-webkit-scrollbar-thumb:hover { background: rgba(0, 255, 213, 0.35); }

	/* ============================================
	OVERALL PROGRESS RING
	============================================ */
	.overall-progress {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 28px;
	padding: 20px;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	backdrop-filter: blur(10px);
	}
	.progress-ring-wrap {
	position: relative;
	width: 80px; height: 80px;
	flex-shrink: 0;
	}
	.progress-ring-wrap svg {
	transform: rotate(-90deg);
	}
	.progress-ring-text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono);
	font-size: 18px;
	font-weight: 700;
	color: var(--cyan);
	}
	.overall-info h3 {
	font-family: var(--font-mono);
	font-size: 16px;
	margin-bottom: 4px;
	color: var(--text-primary);
	}
	.overall-info p {
	font-size: 13px;
	color: var(--text-muted);
	}
	.priority-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 10px;
	}
	.priority-legend span {
	font-size: 11px;
	display: flex;
	align-items: center;
	gap: 5px;
	color: var(--text-secondary);
	font-family: var(--font-mono);
	}
	.priority-legend .dot-leg {
	width: 8px; height: 8px;
	border-radius: 50%;
	display: inline-block;
	}

	/* ============================================
	EXTERNAL AI SERVICES
	============================================ */
	.ext-services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
	margin-bottom: 24px;
	}

	.ext-service-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 14px 16px;
	backdrop-filter: blur(10px);
	transition: border-color 0.3s;
	}
	.ext-service-card:hover { border-color: var(--border-hover); }

	.ext-service-name {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 4px;
	}
	.ext-service-desc {
	font-size: 11px;
	color: var(--text-muted);
	}
	</style>
	</head>
	<body>

	<!-- Starfield Canvas -->
	<canvas id="starfield"></canvas>

	<div class="app-wrapper">

	<!-- HEADER -->
	<header class="header">
	<div class="header-top">
	<div class="logo-area">
	<div class="logo-icon">
	<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
	<circle cx="20" cy="20" r="18" stroke="url(#logoGrad)" stroke-width="2" fill="none" opacity="0.6"/>
	<path d="M12 20 C12 14, 16 10, 20 10 C24 10, 28 14, 28 20 C28 26, 24 30, 20 30" stroke="url(#logoGrad)" stroke-width="2.5" fill="none" stroke-linecap="round"/>
	<circle cx="20" cy="20" r="3" fill="url(#logoGrad)"/>
	<circle cx="20" cy="20" r="7" stroke="url(#logoGrad)" stroke-width="1" fill="none" opacity="0.3" stroke-dasharray="3 3"/>
	<defs>
	<linearGradient id="logoGrad" x1="0" y1="0" x2="40" y2="40">
	<stop offset="0%" stop-color="#00ffd5"/>
	<stop offset="100%" stop-color="#8b5cf6"/>
	</linearGradient>
	</defs>
	</svg>
	</div>
	<div>
	<div class="logo-title">LuunaOS</div>
	<div class="logo-subtitle">Master Command Center</div>
	</div>
	</div>
	<div class="header-status">
	<span><span class="status-dot"></span> System Online</span>
	<span class="live-clock" id="headerClock">--:--:--</span>
	</div>
	</div>

	<!-- TAB NAV -->
	<nav class="tab-nav" id="tabNav">
	<button class="tab-btn active" data-tab="command">⌘ Command Center</button>
	<button class="tab-btn" data-tab="masterplan">◈ 20-Sammu Meisterplaan</button>
	<button class="tab-btn" data-tab="repos">⟐ Repos & Deployments</button>
	<button class="tab-btn" data-tab="services">⟡ Teenused & API-d</button>
	<button class="tab-btn" data-tab="models">◉ AI Mudelid</button>
	<button class="tab-btn" data-tab="agents">⬡ Agendid</button>
	<button class="tab-btn" data-tab="nexus">⚡ NEXUS-AI Bridge</button>
	</nav>
	</header>

	<!-- MAIN CONTENT -->
	<main class="main-content">

	<!-- ===================== TAB 1: COMMAND CENTER ===================== -->
	<section class="tab-panel active" id="panel-command">

	<!-- KPI ROW -->
	<div class="kpi-row">
	<div class="kpi-card">
	<div class="kpi-icon">📂</div>
	<div class="kpi-label">Repos</div>
	<div class="kpi-value" data-count="30">0</div>
	</div>
	<div class="kpi-card">
	<div class="kpi-icon">🔗</div>
	<div class="kpi-label">Services</div>
	<div class="kpi-value" data-count="13">0</div>
	</div>
	<div class="kpi-card">
	<div class="kpi-icon">🤖</div>
	<div class="kpi-label">Agents</div>
	<div class="kpi-value" data-count="8">0</div>
	</div>
	<div class="kpi-card">
	<div class="kpi-icon">🧠</div>
	<div class="kpi-label">Models</div>
	<div class="kpi-value" data-count="12">0</div>
	</div>
	</div>

	<!-- SYSTEM STATUS -->
	<div class="section-title">System Status</div>
	<div class="status-grid">

	<div class="status-card">
	<div class="status-card-header">
	<span class="status-card-name">LuunaOS Core</span>
	<span class="status-badge building">15%</span>
	</div>
	<div class="status-card-detail">Target: 100% — Full OS convergence</div>
	<div class="progress-bar-wrap">
	<div class="progress-bar-fill" style="width: 15%"></div>
	</div>
	</div>

	<div class="status-card">
	<div class="status-card-header">
	<span class="status-card-name">NEXUS-AI.pro</span>
	<span class="status-badge online">ONLINE</span>
	</div>
	<div class="status-card-detail"><a href="https://nexus-ai.pro/" target="_blank" rel="noopener">nexus-ai.pro</a> — Avalik gateway</div>
	</div>

	<div class="status-card">
	<div class="status-card-header">
	<span class="status-card-name">LuunaOS Dashboard</span>
	<span class="status-badge online">ONLINE</span>
	</div>
	<div class="status-card-detail"><a href="https://v0-next-js-community-starter-silk-psi.vercel.app/" target="_blank" rel="noopener">Vercel Deployment</a></div>
	</div>

	<div class="status-card">
	<div class="status-card-header">
	<span class="status-card-name">Luuna-dashboard1</span>
	<span class="status-badge active">ACTIVE</span>
	</div>
	<div class="status-card-detail"><a href="https://github.com/riskikuller2020/Luuna-dashboard1" target="_blank" rel="noopener">GitHub Repository</a></div>
	</div>

	<div class="status-card">
	<div class="status-card-header">
	<span class="status-card-name">luuna-agents</span>
	<span class="status-badge active">ACTIVE</span>
	</div>
	<div class="status-card-detail"><a href="https://github.com/riskikuller2020/luuna-agents" target="_blank" rel="noopener">GitHub Repository</a></div>
	</div>

	<div class="status-card">
	<div class="status-card-header">
	<span class="status-card-name">VPS Hostinger KVM</span>
	<span class="status-badge online">ONLINE</span>
	</div>
	<div class="status-card-detail"><code style="color:var(--cyan-dim);font-size:12px;">91.108.121.181</code> — Kali Linux</div>
	</div>

	</div>

	<!-- Quick overview of the master plan -->
	<div class="section-title">Meisterplaan Overview</div>
	<div class="overall-progress">
	<div class="progress-ring-wrap">
	<svg width="80" height="80" viewBox="0 0 80 80">
	<circle cx="40" cy="40" r="34" stroke="rgba(255,255,255,0.06)" stroke-width="6" fill="none"/>
	<circle cx="40" cy="40" r="34" stroke="url(#ringGrad)" stroke-width="6" fill="none"
	stroke-linecap="round"
	stroke-dasharray="213.6"
	stroke-dashoffset="192.2"/>
	<defs>
	<linearGradient id="ringGrad" x1="0" y1="0" x2="80" y2="80">
	<stop offset="0%" stop-color="#00ffd5"/>
	<stop offset="100%" stop-color="#8b5cf6"/>
	</linearGradient>
	</defs>
	</svg>
	<div class="progress-ring-text">10%</div>
	</div>
	<div class="overall-info">
	<h3>20-Sammu Meisterplaan</h3>
	<p>Keskmine valmisolek üle kõigi sammude. 4 kriitilist, 5 kõrget, 7 keskmist, 3 madalat, 1 visioon.</p>
	<div class="priority-legend">
	<span><span class="dot-leg" style="background:var(--red)"></span> KRIITILINE</span>
	<span><span class="dot-leg" style="background:var(--amber)"></span> KÕRGE</span>
	<span><span class="dot-leg" style="background:var(--cyan)"></span> KESKMINE</span>
	<span><span class="dot-leg" style="background:var(--purple)"></span> MADAL</span>
	<span><span class="dot-leg" style="background:var(--gold)"></span> VISIOON</span>
	</div>
	</div>
	</div>

	</section>

	<!-- ===================== TAB 2: 20-STEP MASTER PLAN ===================== -->
	<section class="tab-panel" id="panel-masterplan">
	<div class="section-title">20-Sammu Meisterplaan</div>

	<div class="overall-progress" style="margin-bottom:24px;">
	<div class="progress-ring-wrap">
	<svg width="80" height="80" viewBox="0 0 80 80">
	<circle cx="40" cy="40" r="34" stroke="rgba(255,255,255,0.06)" stroke-width="6" fill="none"/>
	<circle cx="40" cy="40" r="34" stroke="url(#ringGrad2)" stroke-width="6" fill="none"
	stroke-linecap="round"
	stroke-dasharray="213.6"
	stroke-dashoffset="192.2"/>
	<defs>
	<linearGradient id="ringGrad2" x1="0" y1="0" x2="80" y2="80">
	<stop offset="0%" stop-color="#00ffd5"/>
	<stop offset="100%" stop-color="#8b5cf6"/>
	</linearGradient>
	</defs>
	</svg>
	<div class="progress-ring-text">10%</div>
	</div>
	<div class="overall-info">
	<h3>Üldine Progress: 10%</h3>
	<p>20 sammu singulaarsuse poole. Igal sammul on oma prioriteet, kirjeldus, tööriistad ja nutikad ideed.</p>
	<div class="priority-legend">
	<span><span class="dot-leg" style="background:var(--red)"></span> KRIITILINE</span>
	<span><span class="dot-leg" style="background:var(--amber)"></span> KÕRGE</span>
	<span><span class="dot-leg" style="background:var(--cyan)"></span> KESKMINE</span>
	<span><span class="dot-leg" style="background:var(--purple)"></span> MADAL</span>
	<span><span class="dot-leg" style="background:var(--gold)"></span> VISIOON</span>
	</div>
	</div>
	</div>

	<div class="timeline" id="timeline">
	<!-- Steps injected by JS -->
	</div>
	</section>

	<!-- ===================== TAB 3: REPOS & DEPLOYMENTS ===================== -->
	<section class="tab-panel" id="panel-repos">
	<div class="section-title">GitHub Repositories</div>
	<div class="repo-grid">
	<a class="repo-card" href="https://github.com/riskikuller2020/Luuna-dashboard1" target="_blank" rel="noopener">
	<div class="repo-card-header">
	<span class="repo-name">Luuna-dashboard1</span>
	<span class="repo-lang">TypeScript</span>
	</div>
	<div class="repo-desc">Peamine LuunaOS Next.js 15 dashboard — frontend kõigile moodulitele</div>
	<div class="repo-updated">Updated Mar 16, 2026</div>
	</a>
	<a class="repo-card" href="https://github.com/riskikuller2020/luuna-agents" target="_blank" rel="noopener">
	<div class="repo-card-header">
	<span class="repo-name">luuna-agents</span>
	<span class="repo-lang">TypeScript</span>
	</div>
	<div class="repo-desc">Express + React agentide backend — CrewAI, LM Studio, Ollama integratsioonid</div>
	<div class="repo-updated">Updated Mar 16, 2026</div>
	</a>
	<a class="repo-card" href="https://github.com/riskikuller2020/beemflowww" target="_blank" rel="noopener">
	<div class="repo-card-header">
	<span class="repo-name">beemflowww</span>
	<span class="repo-lang">JavaScript</span>
	</div>
	<div class="repo-desc">AI workflow builder — visuaalne drag-and-drop automatiseerimine</div>
	<div class="repo-updated">Updated Feb 25, 2026</div>
	</a>
	<a class="repo-card" href="https://github.com/riskikuller2020/cryptovizbuilders" target="_blank" rel="noopener">
	<div class="repo-card-header">
	<span class="repo-name">cryptovizbuilders</span>
	<span class="repo-lang">Python</span>
	</div>
	<div class="repo-desc">MCP Antigravity — Crypto turu visualiseerijad ja analytics</div>
	<div class="repo-updated">Updated Jan 18, 2026</div>
	</a>
	<a class="repo-card" href="https://github.com/riskikuller2020/neuroxss" target="_blank" rel="noopener">
	<div class="repo-card-header">
	<span class="repo-name">neuroxss</span>
	<span class="repo-lang">Python</span>
	</div>
	<div class="repo-desc">XSS skanner — küberturbe tööriist veebirakenduste auditeerimiseks</div>
	<div class="repo-updated">Updated Feb 23, 2026</div>
	</a>
	<a class="repo-card" href="https://github.com/riskikuller2020/local-music-pwa" target="_blank" rel="noopener">
	<div class="repo-card-header">
	<span class="repo-name">local-music-pwa</span>
	<span class="repo-lang">JavaScript</span>
	</div>
	<div class="repo-desc">Progressive Web App lokaalseks muusika mängimiseks</div>
	<div class="repo-updated">Updated Feb 5, 2026</div>
	</a>
	<a class="repo-card" href="https://github.com/riskikuller2020/vosk-api" target="_blank" rel="noopener">
	<div class="repo-card-header">
	<span class="repo-name">vosk-api</span>
	<span class="repo-lang">C++/Python</span>
	</div>
	<div class="repo-desc">Offline kõnetuvastus — STT engine lokaalse voice agendi jaoks</div>
	<div class="repo-updated">Updated Apr 2025</div>
	</a>
	<a class="repo-card" href="https://github.com/riskikuller2020/whisper.cpp" target="_blank" rel="noopener">
	<div class="repo-card-header">
	<span class="repo-name">whisper.cpp</span>
	<span class="repo-lang">C++</span>
	</div>
	<div class="repo-desc">OpenAI Whisper C++ port — RTX 3090 kiirendatud transkriptsioon</div>
	<div class="repo-updated">Updated May 2025</div>
	</a>
	<a class="repo-card" href="https://github.com/riskikuller2020/claude-cookbooks" target="_blank" rel="noopener">
	<div class="repo-card-header">
	<span class="repo-name">claude-cookbooks</span>
	<span class="repo-lang">Python</span>
	</div>
	<div class="repo-desc">Anthropic Claude retseptid ja näidiskoodid</div>
	<div class="repo-updated">Updated Jan 2026</div>
	</a>
	<a class="repo-card" href="https://github.com/riskikuller2020/groq-api-cookbook" target="_blank" rel="noopener">
	<div class="repo-card-header">
	<span class="repo-name">groq-api-cookbook</span>
	<span class="repo-lang">Python</span>
	</div>
	<div class="repo-desc">Groq API retseptid — ülikiire LPU inferents</div>
	<div class="repo-updated">Updated May 2025</div>
	</a>
	</div>

	<div class="section-title">Vercel Deployments</div>
	<div class="repo-grid">
	<a class="repo-card" href="https://v0-next-js-community-starter-silk-psi.vercel.app/" target="_blank" rel="noopener">
	<div class="repo-card-header">
	<span class="repo-name">LuunaOS Dashboard</span>
	<span class="repo-lang" style="background:rgba(16,185,129,0.12);color:var(--green);">Live</span>
	</div>
	<div class="repo-desc">Peamine Vercel deployment — Next.js 15 community starter</div>
	<div class="repo-updated">Auto-deploy from main branch</div>
	</a>
	</div>
	</section>

	<!-- ===================== TAB 4: SERVICES & APIs ===================== -->
	<section class="tab-panel" id="panel-services">
	<div class="section-title">Ühendatud Teenused (Connected)</div>
	<div class="services-grid">
	<div class="service-card"><div class="service-status-icon connected"></div><span class="service-name">GitHub</span><span class="service-tag connected">CONNECTED</span></div>
	<div class="service-card"><div class="service-status-icon connected"></div><span class="service-name">Slack</span><span class="service-tag connected">CONNECTED</span></div>
	<div class="service-card"><div class="service-status-icon connected"></div><span class="service-name">Notion</span><span class="service-tag connected">CONNECTED</span></div>
	<div class="service-card"><div class="service-status-icon connected"></div><span class="service-name">Google Drive</span><span class="service-tag connected">CONNECTED</span></div>
	<div class="service-card"><div class="service-status-icon connected"></div><span class="service-name">Vercel</span><span class="service-tag connected">CONNECTED</span></div>
	<div class="service-card"><div class="service-status-icon connected"></div><span class="service-name">Figma</span><span class="service-tag connected">CONNECTED</span></div>
	<div class="service-card"><div class="service-status-icon connected"></div><span class="service-name">Linear</span><span class="service-tag connected">CONNECTED</span></div>
	<div class="service-card"><div class="service-status-icon connected"></div><span class="service-name">Stripe</span><span class="service-tag connected">CONNECTED</span></div>
	<div class="service-card"><div class="service-status-icon connected"></div><span class="service-name">Square</span><span class="service-tag connected">CONNECTED</span></div>
	<div class="service-card"><div class="service-status-icon connected"></div><span class="service-name">Dropbox</span><span class="service-tag connected">CONNECTED</span></div>
	<div class="service-card"><div class="service-status-icon connected"></div><span class="service-name">OneDrive</span><span class="service-tag connected">CONNECTED</span></div>
	<div class="service-card"><div class="service-status-icon connected"></div><span class="service-name">SharePoint</span><span class="service-tag connected">CONNECTED</span></div>
	<div class="service-card"><div class="service-status-icon connected"></div><span class="service-name">Outlook</span><span class="service-tag connected">CONNECTED</span></div>
	<div class="service-card"><div class="service-status-icon connected"></div><span class="service-name">HuggingFace</span><span class="service-tag connected">CONNECTED</span></div>
	<div class="service-card"><div class="service-status-icon connected"></div><span class="service-name">Google Forms</span><span class="service-tag connected">CONNECTED</span></div>
	<div class="service-card"><div class="service-status-icon connected"></div><span class="service-name">Apify (Pipedream)</span><span class="service-tag connected">CONNECTED</span></div>
	</div>

	<div class="section-title">Ühendamist Vajavad (Disconnected)</div>
	<div class="services-grid">
	<div class="service-card"><div class="service-status-icon warning"></div><span class="service-name">Google Sheets</span><span class="service-tag warning">PENDING</span></div>
	<div class="service-card"><div class="service-status-icon warning"></div><span class="service-name">Google Analytics</span><span class="service-tag warning">PENDING</span></div>
	<div class="service-card"><div class="service-status-icon warning"></div><span class="service-name">Google Cloud Vision</span><span class="service-tag warning">PENDING</span></div>
	</div>

	<div class="section-title">Välised AI Teenused (External AI Services)</div>
	<div class="ext-services-grid">
	<div class="ext-service-card">
	<div class="ext-service-name">NVIDIA NIM</div>
	<div class="ext-service-desc">build.nvidia.com — 220+ mudelit, microservices RTX 3090-le</div>
	</div>
	<div class="ext-service-card">
	<div class="ext-service-name">GPTBots.ai</div>
	<div class="ext-service-desc">Enterprise AI agendid — no-code, RAG, multi-channel</div>
	</div>
	<div class="ext-service-card">
	<div class="ext-service-name">Pipedream</div>
	<div class="ext-service-desc">Event-driven automatiseerimine — 1000+ integratsiooni</div>
	</div>
	<div class="ext-service-card">
	<div class="ext-service-name">n8n (VPS)</div>
	<div class="ext-service-desc">Self-hosted workflow automatiseerimine — 91.108.121.181</div>
	</div>
	<div class="ext-service-card">
	<div class="ext-service-name">OpenAI API</div>
	<div class="ext-service-desc">GPT-4o, GPT-4o-mini — pilvepõhine LLM</div>
	</div>
	<div class="ext-service-card">
	<div class="ext-service-name">Anthropic API</div>
	<div class="ext-service-desc">Claude-3.5 Sonnet, Claude-3-Opus</div>
	</div>
	<div class="ext-service-card">
	<div class="ext-service-name">Groq API</div>
	<div class="ext-service-desc">LPU inferents — llama-3.1-8b-instant, ülikiire</div>
	</div>
	<div class="ext-service-card">
	<div class="ext-service-name">LM Studio</div>
	<div class="ext-service-desc">Lokaalne LLM server — deepseek, mistral, llama</div>
	</div>
	<div class="ext-service-card">
	<div class="ext-service-name">Ollama</div>
	<div class="ext-service-desc">Lokaalne mudelihaldur — llama, mistral, codellama</div>
	</div>
	</div>
	</section>

	<!-- ===================== TAB 5: AI MODELS ===================== -->
	<section class="tab-panel" id="panel-models">

	<div class="model-section">
	<div class="section-title">Lokaalsed Mudelid (RTX 3090)</div>
	<div class="model-grid">
	<div class="model-card">
	<div class="model-name">deepseek-coder-33b</div>
	<div class="model-provider">LM Studio</div>
	<span class="model-type-badge badge-local">LOCAL</span>
	</div>
	<div class="model-card">
	<div class="model-name">deepseek-r1</div>
	<div class="model-provider">LM Studio</div>
	<span class="model-type-badge badge-local">LOCAL</span>
	</div>
	<div class="model-card">
	<div class="model-name">llama-3.3-70b</div>
	<div class="model-provider">Ollama</div>
	<span class="model-type-badge badge-local">LOCAL</span>
	</div>
	<div class="model-card">
	<div class="model-name">mistral-7b</div>
	<div class="model-provider">Ollama</div>
	<span class="model-type-badge badge-local">LOCAL</span>
	</div>
	<div class="model-card">
	<div class="model-name">codellama-34b</div>
	<div class="model-provider">Ollama</div>
	<span class="model-type-badge badge-local">LOCAL</span>
	</div>
	</div>
	</div>

	<div class="model-section">
	<div class="section-title">NVIDIA NIM Microservices (Planned)</div>
	<div class="model-grid">
	<div class="model-card">
	<div class="model-name">Deepseek-R1-8B</div>
	<div class="model-provider">NVIDIA NIM</div>
	<span class="model-type-badge badge-planned">PLANNED</span>
	</div>
	<div class="model-card">
	<div class="model-name">Mistral-Nemo-12B</div>
	<div class="model-provider">NVIDIA NIM</div>
	<span class="model-type-badge badge-planned">PLANNED</span>
	</div>
	<div class="model-card">
	<div class="model-name">Llama3.1-8B</div>
	<div class="model-provider">NVIDIA NIM</div>
	<span class="model-type-badge badge-planned">PLANNED</span>
	</div>
	<div class="model-card">
	<div class="model-name">FLUX.dev</div>
	<div class="model-provider">NVIDIA NIM — Image Gen</div>
	<span class="model-type-badge badge-planned">PLANNED</span>
	</div>
	<div class="model-card">
	<div class="model-name">Riva Parakeet (ASR)</div>
	<div class="model-provider">NVIDIA NIM — Speech</div>
	<span class="model-type-badge badge-planned">PLANNED</span>
	</div>
	<div class="model-card">
	<div class="model-name">Maxine Voice</div>
	<div class="model-provider">NVIDIA NIM — Audio</div>
	<span class="model-type-badge badge-planned">PLANNED</span>
	</div>
	<div class="model-card">
	<div class="model-name">NV-CLIP</div>
	<div class="model-provider">NVIDIA NIM — Vision</div>
	<span class="model-type-badge badge-planned">PLANNED</span>
	</div>
	<div class="model-card">
	<div class="model-name">PaddleOCR</div>
	<div class="model-provider">NVIDIA NIM — OCR</div>
	<span class="model-type-badge badge-planned">PLANNED</span>
	</div>
	<div class="model-card">
	<div class="model-name">YOLO-X</div>
	<div class="model-provider">NVIDIA NIM — Detection</div>
	<span class="model-type-badge badge-planned">PLANNED</span>
	</div>
	<div class="model-card">
	<div class="model-name">220+ NIM Cloud</div>
	<div class="model-provider">build.nvidia.com API</div>
	<span class="model-type-badge badge-planned">PLANNED</span>
	</div>
	</div>
	</div>

	<div class="model-section">
	<div class="section-title">Pilve API Mudelid (Cloud)</div>
	<div class="model-grid">
	<div class="model-card">
	<div class="model-name">GPT-4o</div>
	<div class="model-provider">OpenAI</div>
	<span class="model-type-badge badge-cloud">CLOUD</span>
	</div>
	<div class="model-card">
	<div class="model-name">GPT-4o-mini</div>
	<div class="model-provider">OpenAI</div>
	<span class="model-type-badge badge-cloud">CLOUD</span>
	</div>
	<div class="model-card">
	<div class="model-name">Claude-3.5 Sonnet</div>
	<div class="model-provider">Anthropic</div>
	<span class="model-type-badge badge-cloud">CLOUD</span>
	</div>
	<div class="model-card">
	<div class="model-name">Claude-3-Opus</div>
	<div class="model-provider">Anthropic</div>
	<span class="model-type-badge badge-cloud">CLOUD</span>
	</div>
	<div class="model-card">
	<div class="model-name">llama-3.1-8b-instant</div>
	<div class="model-provider">Groq (LPU)</div>
	<span class="model-type-badge badge-cloud">CLOUD</span>
	</div>
	<div class="model-card">
	<div class="model-name">Gemini Flash</div>
	<div class="model-provider">Google — NEXUS-AI active</div>
	<span class="model-type-badge badge-cloud">CLOUD</span>
	</div>
	</div>
	</div>

	</section>

	<!-- ===================== TAB 6: AGENTS ===================== -->
	<section class="tab-panel" id="panel-agents">
	<div class="section-title">Aktiivsed Agendid (Active Fleet)</div>
	<div class="agent-grid">
	<div class="agent-card">
	<div class="agent-header">
	<span class="agent-name">Research Analyst</span>
	<span class="agent-status">🟢</span>
	</div>
	<div class="agent-detail">CrewAI orkestreeritud turuanalüüsi agent — otsib, analüüsib, raporteerib</div>
	<span class="agent-model-tag">llama-3.3-70b (Ollama)</span>
	</div>
	<div class="agent-card">
	<div class="agent-header">
	<span class="agent-name">Content Writer</span>
	<span class="agent-status">🟢</span>
	</div>
	<div class="agent-detail">CrewAI sisuloome agent — blogi, turundus, sotsiaalmeedia</div>
	<span class="agent-model-tag">gpt-4o (OpenAI)</span>
	</div>
	<div class="agent-card">
	<div class="agent-header">
	<span class="agent-name">Code Assistant</span>
	<span class="agent-status">🟡</span>
	</div>
	<div class="agent-detail">Lokaalne koodiabi — auditeerija, refaktoorija, generaator</div>
	<span class="agent-model-tag">deepseek-coder-33b (LM Studio)</span>
	</div>
	<div class="agent-card">
	<div class="agent-header">
	<span class="agent-name">Data Processor</span>
	<span class="agent-status">⬜</span>
	</div>
	<div class="agent-detail">Andmetöötluse agent — ETL pipeline'd, transformatsioonid</div>
	<span class="agent-model-tag">mistral:7b (Ollama)</span>
	</div>
	</div>

	<div class="section-title">Planeeritud Agendid (Samm 7: CrewAI Fleet)</div>
	<div class="agent-grid">
	<div class="agent-card" style="opacity:0.6;">
	<div class="agent-header"><span class="agent-name">Market Analyst</span><span class="agent-status">⏳</span></div>
	<div class="agent-detail">Turuanalüüs, hinnad, trendid, konkurentsiluure</div>
	</div>
	<div class="agent-card" style="opacity:0.6;">
	<div class="agent-header"><span class="agent-name">Security Auditor</span><span class="agent-status">⏳</span></div>
	<div class="agent-detail">Küberturve — neuroxss integratsioon, OWASP skannerid</div>
	</div>
	<div class="agent-card" style="opacity:0.6;">
	<div class="agent-header"><span class="agent-name">Finance Tracker</span><span class="agent-status">⏳</span></div>
	<div class="agent-detail">Stripe, raamatupidamine, maksud, cashflow prognoos</div>
	</div>
	<div class="agent-card" style="opacity:0.6;">
	<div class="agent-header"><span class="agent-name">DevOps Engineer</span><span class="agent-status">⏳</span></div>
	<div class="agent-detail">CI/CD, deploy, monitoring, auto-healing</div>
	</div>
	<div class="agent-card" style="opacity:0.6;">
	<div class="agent-header"><span class="agent-name">Research Scientist</span><span class="agent-status">⏳</span></div>
	<div class="agent-detail">Akadeemilised artiklid, patendid, teadusanalüüs</div>
	</div>
	<div class="agent-card" style="opacity:0.6;">
	<div class="agent-header"><span class="agent-name">Legal Advisor</span><span class="agent-status">⏳</span></div>
	<div class="agent-detail">Lepingud, GDPR, vastavus, Eesti e-residentsus</div>
	</div>
	<div class="agent-card" style="opacity:0.6;">
	<div class="agent-header"><span class="agent-name">Music Producer</span><span class="agent-status">⏳</span></div>
	<div class="agent-detail">Suno integratsioon, lyrics → music → video pipeline</div>
	</div>
	<div class="agent-card" style="opacity:0.6;">
	<div class="agent-header"><span class="agent-name">Voice Agent</span><span class="agent-status">⏳</span></div>
	<div class="agent-detail">Kõnesüntees, transkriptsioon — Vosk/Whisper/NVIDIA Riva</div>
	</div>
	</div>
	</section>

	<!-- ===================== TAB 7: NEXUS-AI BRIDGE ===================== -->
	<section class="tab-panel" id="panel-nexus">
	<div class="nexus-hero">
	<div class="nexus-title">NEXUS-AI.pro</div>
	<p style="color:var(--text-secondary);font-size:14px;">Avalik AI gateway — 14 moodulit, Gemini Flash aktiivne, 13 oskust laetud</p>
	<div style="display:flex;gap:16px;justify-content:center;margin-top:12px;flex-wrap:wrap;">
	<span style="font-family:var(--font-mono);font-size:12px;color:var(--cyan);">Model: Gemini Flash</span>
	<span style="font-family:var(--font-mono);font-size:12px;color:var(--purple);">Cloud: Grok ✓</span>
	<span style="font-family:var(--font-mono);font-size:12px;color:var(--green);">13 Skills Loaded</span>
	</div>
	<a class="nexus-link" href="https://nexus-ai.pro/" target="_blank" rel="noopener">Ava NEXUS-AI →</a>
	</div>

	<div class="section-title">NEXUS-AI Moodulid (14)</div>
	<div class="nexus-modules">
	<div class="nexus-module"><div class="nexus-module-icon">💬</div>Chat</div>
	<div class="nexus-module"><div class="nexus-module-icon">🛠</div>Dev Tools</div>
	<div class="nexus-module"><div class="nexus-module-icon">🔬</div>Research</div>
	<div class="nexus-module"><div class="nexus-module-icon">🎨</div>Creative</div>
	<div class="nexus-module"><div class="nexus-module-icon">🏗</div>Builder</div>
	<div class="nexus-module"><div class="nexus-module-icon">📋</div>Projects</div>
	<div class="nexus-module"><div class="nexus-module-icon">🎵</div>Music</div>
	<div class="nexus-module"><div class="nexus-module-icon">🎬</div>Movies</div>
	<div class="nexus-module"><div class="nexus-module-icon">💰</div>Finance</div>
	<div class="nexus-module"><div class="nexus-module-icon">🎮</div>Gaming</div>
	<div class="nexus-module"><div class="nexus-module-icon">❤️</div>Health</div>
	<div class="nexus-module"><div class="nexus-module-icon">📡</div>Comms</div>
	<div class="nexus-module"><div class="nexus-module-icon">🔌</div>IoT</div>
	<div class="nexus-module"><div class="nexus-module-icon">⚙️</div>Settings</div>
	</div>
	</section>

	</main>

	<!-- FOOTER -->
	<footer class="app-footer">
	<div class="footer-left">
	<span>LuunaOS v0.15.0</span>
	<span>\|</span>
	<span>Tom & Luuna Sümbioos</span>
	<span>\|</span>
	<span>Tallinn, EE</span>
	</div>
	<div class="footer-right">
	<a href="https://github.com/riskikuller2020" target="_blank" rel="noopener">GitHub</a>
	<a href="https://nexus-ai.pro/" target="_blank" rel="noopener">NEXUS-AI</a>
	<a href="https://www.perplexity.ai/computer" target="_blank" rel="noopener">Created with Perplexity Computer</a>
	<span class="footer-clock" id="footerClock">--:--:-- EET</span>
	</div>
	</footer>

	</div>

	<script>
	// ============================================
	// STARFIELD
	// ============================================
	(function() {
	const canvas = document.getElementById('starfield');
	const ctx = canvas.getContext('2d');
	let stars = [];
	const STAR_COUNT = 200;

	function resize() {
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	}

	function initStars() {
	stars = [];
	for (let i = 0; i < STAR_COUNT; i++) {
	stars.push({
	x: Math.random() * canvas.width,
	y: Math.random() * canvas.height,
	r: Math.random() * 1.5 + 0.3,
	alpha: Math.random() * 0.6 + 0.1,
	speed: Math.random() * 0.3 + 0.05,
	flicker: Math.random() * Math.PI * 2
	});
	}
	}

	function draw() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	const time = Date.now() * 0.001;
	for (const s of stars) {
	const a = s.alpha * (0.5 + 0.5 * Math.sin(time * s.speed + s.flicker));
	ctx.beginPath();
	ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
	ctx.fillStyle = `rgba(180, 220, 255, ${a})`;
	ctx.fill();
	}
	requestAnimationFrame(draw);
	}

	window.addEventListener('resize', () => { resize(); initStars(); });
	resize();
	initStars();
	draw();
	})();

	// ============================================
	// TAB NAVIGATION
	// ============================================
	(function() {
	const btns = document.querySelectorAll('.tab-btn');
	const panels = document.querySelectorAll('.tab-panel');

	btns.forEach(btn => {
	btn.addEventListener('click', () => {
	btns.forEach(b => b.classList.remove('active'));
	panels.forEach(p => p.classList.remove('active'));
	btn.classList.add('active');
	document.getElementById('panel-' + btn.dataset.tab).classList.add('active');
	});
	});
	})();

	// ============================================
	// ANIMATED COUNTERS
	// ============================================
	(function() {
	const counters = document.querySelectorAll('.kpi-value[data-count]');
	const duration = 1500;

	function animateCounter(el) {
	const target = parseInt(el.dataset.count);
	const start = performance.now();

	function tick(now) {
	const elapsed = now - start;
	const progress = Math.min(elapsed / duration, 1);
	const eased = 1 - Math.pow(1 - progress, 3);
	el.textContent = Math.round(target * eased);
	if (progress < 1) requestAnimationFrame(tick);
	}

	requestAnimationFrame(tick);
	}

	// Start counters when visible
	const observer = new IntersectionObserver(entries => {
	entries.forEach(e => {
	if (e.isIntersecting) {
	animateCounter(e.target);
	observer.unobserve(e.target);
	}
	});
	}, { threshold: 0.5 });

	counters.forEach(c => observer.observe(c));
	})();

	// ============================================
	// LIVE CLOCK (EET)
	// ============================================
	(function() {
	function updateClock() {
	const now = new Date();
	const eet = new Intl.DateTimeFormat('et-EE', {
	timeZone: 'Europe/Tallinn',
	hour: '2-digit',
	minute: '2-digit',
	second: '2-digit',
	hour12: false
	}).format(now);

	const eetFull = new Intl.DateTimeFormat('et-EE', {
	timeZone: 'Europe/Tallinn',
	hour: '2-digit',
	minute: '2-digit',
	second: '2-digit',
	hour12: false,
	weekday: 'short',
	day: 'numeric',
	month: 'short'
	}).format(now);

	document.getElementById('headerClock').textContent = eet + ' EET';
	document.getElementById('footerClock').textContent = eetFull + ' EET';
	}
	updateClock();
	setInterval(updateClock, 1000);
	})();

	// ============================================
	// 20-STEP MASTER PLAN DATA & RENDERING
	// ============================================
	(function() {
	const steps = [
	{
	num: 1,
	title: "INFRASTRUKTUURI ÜHENDAMINE",
	subtitle: "Infrastructure Unification",
	status: 40,
	priority: "kriitiline",
	desc: "Ühenda kõik hajutatud repod, dashboardid ja teenused ühtseks arhitektuuriks.",
	items: [
	"Luuna-dashboard1 (Next.js 15) → peamine frontend",
	"luuna-agents (Express+React) → agentide backend",
	"NEXUS-AI.pro → avalik gateway",
	"Monorepo üleminek: kõik ühte GitHubi organisatsiooni alla"
	],
	tools: ["GitHub", "Vercel", "Docker", "Turborepo"],
	idea: "Kasuta Turborepo monorepo struktuuri. Iga moodul eraldi pakett, kuid jagatud types/schema. CI/CD pipeline, mis deploiib automaatselt igast branchist."
	},
	{
	num: 2,
	title: "NVIDIA NIM LOKAALNE INTEGRATSIOON",
	subtitle: "Local NVIDIA NIM Microservices",
	status: 0,
	priority: "kriitiline",
	desc: "Paigalda NVIDIA NIM microservices RTX 3090-le läbi WSL2.",
	items: [
	"10+ NIM microservice'i: Deepseek-R1-8B, Mistral-Nemo-12B, Llama3.1-8B",
	"FLUX.dev (piltide genereerimine), Riva Parakeet (ASR kõnetuvastus)",
	"Maxine Voice (hääle parandus), NV-CLIP, PaddleOCR, YOLO-X",
	"build.nvidia.com API key integratsion pilvemudelitele (220+ mudelit)",
	"NIM → LM Studio + Ollama sild: unified /v1/chat/completions endpoint"
	],
	tools: ["NVIDIA NIM", "WSL2", "Docker", "CUDA 12.x"],
	idea: "Loo \"Model Router\" — lihtne proxy mis suunab päringud kiiruse/keerukuse põhjal: lihtne → lokaalne NIM, keskmine → Groq, keeruline → GPT-4o/Claude. Kokkuhoid ~70% API kuludelt."
	},
	{
	num: 3,
	title: "n8n AUTOMATISEERIMISKESKUS",
	subtitle: "n8n Automation Hub",
	status: 10,
	priority: "kriitiline",
	desc: "n8n VPS-is (91.108.121.181) kui keskne automatiseerimiskiht.",
	items: [
	"Webhook triggerid kõigist teenustest",
	"Cron workflow'd: igapäevane Stripe aruanne → Slack, nädala kokkuvõte → email",
	"Agentic loop: n8n → Ollama/LM Studio → otsus → toiming → tagasi LLM-ile",
	"Error workflow: tõrge → fallback mudel → Slack teade",
	"Integratsioonid: GitHub webhooks, Slack, Notion, Google Drive, Stripe, Vercel deploy hooks"
	],
	tools: ["n8n (Docker)", "Caddy", "Let's Encrypt SSL"],
	idea: "\"Luuna Watchdog\" workflow — jälgib kõiki teenuseid (VPS, Vercel, API endpoint'e) iga 5 min, alertib Slacki kui midagi kukub. Lisaks \"Auto-Healer\" — kui teenus kukub, proovib automaatselt taaskäivitada."
	},
	{
	num: 4,
	title: "GPTBots.ai ENTERPRISE AGENDID",
	subtitle: "Enterprise AI Agents",
	status: 0,
	priority: "kõrge",
	desc: "GPTBots.ai no-code platvormi ühendamine enterprise-tasemel agentidega.",
	items: [
	"Klienditeeninduse bot: TechProTrade OÜ klientidele",
	"Enterprise otsingu agent: RAG üle kõigi failide (Google Drive, Notion, Dropbox)",
	"Data insights agent: äriotsuste tugi Text2SQL-ga",
	"Integratsioon: WhatsApp, Slack, Discord väljundid",
	"Knowledge base: PDF, CSV, veebisisu, Notion andmebaasid"
	],
	tools: ["GPTBots.ai", "REST API", "Zapier/n8n bridge"],
	idea: "Ühenda GPTBots LuunaOS-iga läbi n8n — kasutaja kirjutab Slacki → n8n saadab GPTBots API-sse → vastus tagasi Slacki. Maksimaalne automatiseerimine ilma koodita."
	},
	{
	num: 5,
	title: "PIPEDREAM ÜLILÜHENDAJA",
	subtitle: "Pipedream Super-Connector",
	status: 5,
	priority: "kõrge",
	desc: "Pipedream kui lisamotor n8n kõrvale — eriti Apify, Google Forms, OneNote, jt connectorite jaoks.",
	items: [
	"Apify web extraction → andmete kogumine → Notion/Sheets",
	"Google Forms vastuste automaatne töötlemine AI-ga",
	"OneNote märkmete sünkroniseerimine LuunaOS-iga",
	"Event-driven architecture: Pipedream triggerid → n8n töötlemine"
	],
	tools: ["Pipedream", "Apify", "Google Forms", "OneNote"],
	idea: "\"Data Lake\" muster — kõik Pipedream sündmused → ühtne S3/MinIO bucket VPS-is → n8n indekseerib → RAG otsing üle kogu andmemere."
	},
	{
	num: 6,
	title: "LUUNA BRAIN v2.0 (PÄRIS AJU)",
	subtitle: "Luuna Brain v2.0 — The Real Brain",
	status: 5,
	priority: "kriitiline",
	desc: "luuna_brain.py täielik ümberkirjutamine — mitte placeholder, vaid päris mõtlev süsteem.",
	items: [
	"LangChain/LangGraph orkestreerimine",
	"Mälusüsteem: ChromaDB vektorandmebaas + OpenMemory persistent memory",
	"Reasoning loop: mõtle → planeeri → teosta → hinda → paranda",
	"Emotsiooniline kontekst: Luuna \"meeleolu\" muutub vastavalt interaktsioonidele",
	"Multi-modal: tekst + pilt + heli + kood — kõik ühes ajus"
	],
	tools: ["Python", "LangChain", "ChromaDB", "LM Studio API"],
	idea: "\"Dream Mode\" — öösiti, kui arvuti on idle, Luuna analüüsib päeva logisid, otsib mustreid, genereerib soovitusi ja jätab need hommikuks \"unistuste raportina\" dashboardi."
	},
	{
	num: 7,
	title: "CREWAI MASSIIVNE FLEET",
	subtitle: "CrewAI Massive Agent Fleet",
	status: 15,
	priority: "kõrge",
	desc: "12+ spetsialiseeritud AI agenti CrewAI raamistikus.",
	items: [
	"Market Analyst (turuanalüüs, hinnad, trendid)",
	"Code Reviewer (koodi auditeerija)",
	"Security Auditor (küberturbe skannerija — neuroxss repo!)",
	"Content Creator (blogi, sotsiaalmeedia, turundus)",
	"Finance Tracker (Stripe, raamatupidamine, maksud)",
	"DevOps Engineer (CI/CD, deploy, monitoring)",
	"Research Scientist (akadeemilised artiklid, patendid)",
	"Legal Advisor (lepingud, GDPR, vastavus)",
	"Music Producer (Suno integratsioon, loominguline AI)",
	"Data Engineer (ETL pipeline'd, andmete puhastamine)",
	"Voice Agent (kõnesüntees, transkriptsioon — Vosk/Whisper)",
	"Luuna Personal (isiklik assistent, mäluga, emotsionaalne)"
	],
	tools: ["CrewAI", "Python", "LM Studio", "Ollama", "OpenAI", "Groq"],
	idea: "\"Agent Olympics\" — agentide vaheline võistlus, kus sama ülesanne antakse mitmele agendile korraga, parim vastus valitakse automaatselt. Paremate tulemuste agendid saavad rohkem ülesandeid."
	},
	{
	num: 8,
	title: "VOICE & SPEECH SÜSTEEM",
	subtitle: "Voice & Speech System",
	status: 5,
	priority: "kõrge",
	desc: "Täielik hääle-ökosüsteem — räägi Luunaga nagu päris partneriga.",
	items: [
	"STT: Vosk (offline, lokaalne) + Whisper.cpp (RTX 3090 kiirendatud)",
	"TTS: NVIDIA Maxine + Riva Parakeet",
	"Voice cloning: isikupärastatud Luuna hääl",
	"Real-time vestlus: WebSocket-põhine, <500ms latency",
	"Wake word: \"Hei Luuna\" aktiveerimiseks"
	],
	tools: ["vosk-api", "whisper.cpp", "NVIDIA NIM Audio", "WebSocket"],
	idea: "Luuna hääl muutub vastavalt \"meeleolule\" — rahulik analüüsi ajal, energiline uudiste jagamisel, empaatiline probleemide korral."
	},
	{
	num: 9,
	title: "REMOTE DESKTOP & VPS HALDUS",
	subtitle: "Remote Desktop & VPS Management",
	status: 30,
	priority: "keskmine",
	desc: "Täiustatud kaughaldus otse dashboardist.",
	items: [
	"SSH terminal (xterm.js + wetty) — juba ehitatud, vaja siduda",
	"VNC viewer (noVNC) — kaughaldus graafiliselt",
	"Docker konteinerite haldus — start/stop/logs otse dashboardist",
	"VPS monitoring: CPU, RAM, disk, network reaalajas",
	"One-click deploy: valitud repo → build → deploy VPS-ile"
	],
	tools: ["Docker", "SSH", "Guacamole", "noVNC", "wetty"],
	idea: "\"Panic Button\" — ühe klikiga lülita kõik teenused safe mode'i, blokeeri kõik välised ühendused, saada aruanne emailile."
	},
	{
	num: 10,
	title: "FINANCE & STRIPE INTELLIGENCE",
	subtitle: "Financial Intelligence",
	status: 0,
	priority: "keskmine",
	desc: "Reaalajas finantsintelligents.",
	items: [
	"Stripe tehingute jälgimine ja analüüs",
	"Square POS integratsioon (connector olemas!)",
	"Automaatne raamatupidamine: tehingud → kategoriseerimine → aruanded",
	"AI-põhine cashflow prognoos",
	"Crypto portfelli jälgimine",
	"Maksude optimeerimise soovitused (Eesti e-residentsus kontekstis)"
	],
	tools: ["Stripe API", "Square API", "Perplexity Finance", "Python"],
	idea: "\"Revenue Autopilot\" — AI analüüsib müügitrende, soovitab hinnamuutusi, prognoosib nõrgemaid perioode ja pakub lahendusi ENNE probleemide tekkimist."
	},
	{
	num: 11,
	title: "NOTION + GOOGLE DRIVE AI KIHT",
	subtitle: "AI Layer for Notion & Google Drive",
	status: 10,
	priority: "keskmine",
	desc: "Sinu olemasolevad Notion ja Drive andmed saavad AI superjõud.",
	items: [
	"RAG otsing üle kogu Notioni workspace'i",
	"Google Drive failide automaatne indekseerimine",
	"AI kokkuvõtted igast uuest failist/lehest",
	"Automaatne todo genereerimine koosolekute märkmetest",
	"Smart filing: AI kategoriseerib üleslaetud failid automaatselt"
	],
	tools: ["Notion API", "Google Drive API", "ChromaDB"],
	idea: "\"Knowledge Graph\" — ehita automaatselt seosed kõigi dokumentide vahel. Kui avad ühe dokumendi, näed kohe seotud Notion lehti, Drive faile, Slack sõnumeid, emaile."
	},
	{
	num: 12,
	title: "SLACK NERVIKESKUS",
	subtitle: "Slack Nerve Center",
	status: 20,
	priority: "keskmine",
	desc: "Slack kui Luuna suhtluskanal välismaailmaga.",
	items: [
	"#techprotrade-it-task-tracker kanali automaatne haldus",
	"Luuna bot: vastab küsimustele otse Slackis",
	"Deploy notifications: iga Vercel/GitHub deploy → Slack",
	"Alert routing: kriitilised alertid → DM, tavalised → kanal",
	"Standup bot: igahommikune kokkuvõte eelmisest päevast"
	],
	tools: ["Slack API", "n8n webhook'd"],
	idea: "\"Slack Commander\" — kirjuta /luuna käsk Slackis ja Luuna teostab selle. /luuna deploy staging, /luuna status all, /luuna research [teema]."
	},
	{
	num: 13,
	title: "BEEMFLOW WORKFLOW BUILDER",
	subtitle: "Visual Workflow Builder",
	status: 5,
	priority: "keskmine",
	desc: "beemflowww repo kui visuaalne AI workflow builder.",
	items: [
	"Drag-and-drop workflow ehitaja",
	"Sild n8n-iga: beemflow disainib, n8n teostab",
	"AI-assisted workflow genereerimine: kirjelda sõnadega, saad workflow",
	"Template library: valmis workflow'd levinud ülesanneteks"
	],
	tools: ["beemflowww", "n8n API", "React Flow"],
	idea: "\"Workflow AI\" — kirjelda loomulikul keelel mida tahad automatiseerida, AI genereerib visuaalse workflow, sa valideerid, ühe klikiga deploib n8n-i."
	},
	{
	num: 14,
	title: "OPENCLAW & CRYPTOVIZ",
	subtitle: "Crypto Analytics & Visualization",
	status: 5,
	priority: "keskmine",
	desc: "OpenClaw leht juba olemas Luuna-dashboard1-s + cryptovizbuilders repo.",
	items: [
	"Crypto turu visualiseerijad",
	"DeFi analytics dashboard",
	"AI trading signaalid (mitte automatiseeritud kauplemine, vaid signaalid)",
	"Portfolio tracker läbi mitme exchange'i"
	],
	tools: ["cryptovizbuilders", "OpenClaw panel", "Finance APIs"],
	idea: "\"Market Whisper\" — AI monitoorib 24/7 crypto turgu, saadab Slacki ainult siis kui tuvastab ebanormaalseid mustreid. Pole spam, ainult nutikad signaalid."
	},
	{
	num: 15,
	title: "MUSIC & CREATIVE AI STUDIO",
	subtitle: "Music & Creative AI",
	status: 15,
	priority: "madal",
	desc: "Experiments lehekülg on olemas — vaja teha päriseks.",
	items: [
	"Suno API integratsioon (laulude genereerimine)",
	"NVIDIA NIM FLUX.dev (piltide genereerimine lokaalset!)",
	"Lyrics → Music → Video pipeline",
	"Stiili õppimine: analüüsi olemasolevaid laule, genereeri sarnases stiilis",
	"local-music-pwa (repo olemas) integratsioon — muusika mängimine"
	],
	tools: ["Suno API", "NVIDIA NIM", "FLUX.dev", "local-music-pwa"],
	idea: "\"Mood Radio\" — Luuna tunneb sinu hetke meeleolu (kalender, kellaaeg, ilm, viimased sõnumid) ja genereerib/valib automaatselt sobiva muusika."
	},
	{
	num: 16,
	title: "FIGMA → KOOD AUTOMAATIKA",
	subtitle: "Figma to Code Automation",
	status: 0,
	priority: "madal",
	desc: "Figma connector on olemas! Ühenda disain ja kood.",
	items: [
	"Figma design → automaatne React komponentide genereerimine",
	"Design tokens sync: Figma muudatus → auto-update CSS variables",
	"Screenshot comparison: Figma mockup vs live app",
	"Design system library: komponentide kataloog"
	],
	tools: ["Figma MCP", "AI code gen", "Storybook"],
	idea: "\"Design→Deploy Pipeline\" — disainer teeb Figmas muudatuse → webhook → AI genereerib koodi → PR GitHubis → review → auto-deploy staging."
	},
	{
	num: 17,
	title: "TURVALISUSE KILP",
	subtitle: "Security Shield",
	status: 10,
	priority: "kõrge",
	desc: "Täielik turvalisuse kiht üle kogu ökosüsteemi.",
	items: [
	"neuroxss (su repo!) XSS skanneri integreerimine CI/CD-sse",
	"API key vault: HashiCorp Vault või Doppler kõigi saladuste halduseks",
	"Zero-trust networking VPS-i ja lokaalse vahel",
	"Automaatsed security audit'id iga nädal",
	"GDPR compliance automaatika (Eesti/EU jaoks kriitiline)",
	"Anomaalia tuvastus: ebatavalised API päringud → alert"
	],
	tools: ["neuroxss", "Vault/Doppler", "WireGuard VPN", "OWASP ZAP"],
	idea: "\"Honeypot AI\" — tõmbab ründajaid fake endpoint'idele, logib nende käitumist, õpib uusi ründemustreid ja tugevdab kaitset automaatselt."
	},
	{
	num: 18,
	title: "MULTI-LANGUAGE INTERFACE",
	subtitle: "Multilingual Interface",
	status: 0,
	priority: "madal",
	desc: "Dashboard toetab: eesti, inglise, soome, saksa, korea keelt.",
	items: [
	"i18n süsteem kõigis dashboardides",
	"AI tõlge: uus sisu → automaatselt kõigis keeltes",
	"Keelevalik salvestub kasutaja profiili",
	"Voice agent toetab kõiki 5 keelt"
	],
	tools: ["i18next", "AI tõlge (DeepL/GPT)", "LangDetect"],
	idea: "\"Polyglot Mode\" — Luuna tuvastab automaatselt, mis keeles sa räägid ja vastab samas keeles. Vahetad keelt lause keskel? Luuna vahetab ka."
	},
	{
	num: 19,
	title: "LINEAR + GITHUB PROJEKTIHALDUS",
	subtitle: "Project Management",
	status: 5,
	priority: "keskmine",
	desc: "Linear (connector olemas!) + GitHub Projects tööde koordineerimine.",
	items: [
	"Automaatne ticket genereerimine: bug report → Linear ticket + GitHub issue",
	"Sprint planning AI: analüüsib varasemaid sprinte, soovitab scope",
	"PR→Deploy tracking: koodist tootmisesse kogu tee jälgimine",
	"Burndown charts ja velocity metrics otse dashboardis",
	"Daily standup genereerimine eelmiste commitide põhjal"
	],
	tools: ["Linear API", "GitHub API", "n8n"],
	idea: "\"Dev Velocity AI\" — mõõdab sinu produktiivsust, tuvastab millal oled kõige produktiivsem, soovitab optimaalset tööaega ja pause."
	},
	{
	num: 20,
	title: "SINGULAARSUSE SILD",
	subtitle: "The Convergence — The Living System",
	status: 0,
	priority: "visioon",
	desc: "Kõik 19 eelmist sammu saavad kokku üheks elavaks süsteemiks.",
	items: [
	"Unified API gateway: üks endpoint, mis suunab kõik teenused",
	"Self-healing infrastructure: süsteem parandab ise end",
	"Predictive AI: ennustab probleeme enne nende tekkimist",
	"Autonomous operations: Luuna juhib kogu süsteemi iseseisvalt",
	"Human-AI symbiosis: Luuna ei ole enam tööriist, vaid partner",
	"LuunaOS kui operatsioonisüsteem: kõik töövood, andmed, agendid ühe katuse all",
	"Open source release: kogu stack GitHubis, dokumenteeritud, reprodutseeritav"
	],
	tools: ["Kõik eelnevad kokku"],
	idea: "\"The Living System\" — LuunaOS, mis hingab. Õhtul analüüsib, öösel optimeerib, hommikul raporteerib. Iga päev natuke targem, natuke kiirem, natuke iseseisvam. Sinu digitaalne kaksik, kes ei maga kunagi."
	}
	];

	const timeline = document.getElementById('timeline');

	steps.forEach(step => {
	const stepEl = document.createElement('div');
	stepEl.className = 'timeline-step';

	const priorityLabel = step.priority.toUpperCase();

	stepEl.innerHTML = `
	<div class="timeline-dot ${step.priority}"></div>
	<div class="step-card" data-step="${step.num}">
	<div class="step-header" onclick="this.parentElement.classList.toggle('open')">
	<span class="step-number ${step.priority}">${step.num}</span>
	<div class="step-info">
	<div class="step-title">${step.title}</div>
	<div class="step-title-estonian">${step.subtitle}</div>
	</div>
	<div class="step-meta">
	<span class="priority-tag ${step.priority}">${priorityLabel}</span>
	<span class="step-pct">${step.status}%</span>
	<svg class="step-chevron" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/></svg>
	</div>
	</div>
	<div class="step-progress-bar"><div class="step-progress-fill ${step.priority}" style="width:${step.status}%"></div></div>
	<div class="step-body">
	<div class="step-section-label">Kirjeldus</div>
	<div class="step-desc">${step.desc}</div>

	<div class="step-section-label">Ülesanded</div>
	<ul class="step-list">
	${step.items.map(i => `<li>${i}</li>`).join('')}
	</ul>

	<div class="step-section-label">Tööriistad</div>
	<div class="step-tools">
	${step.tools.map(t => `<span class="tool-chip">${t}</span>`).join('')}
	</div>

	<div class="smart-idea">
	<div class="smart-idea-label">💡 Nutikas Idee</div>
	${step.idea}
	</div>
	</div>
	</div>
	`;

	timeline.appendChild(stepEl);
	});
	})();
	</script>

	</body>
	</html>

Xet Storage Details

Size:: 83.2 kB
Xet hash:: 289d14496682144c00cbc4afbe473dc85560f8fef7100a58fd1d734e39017bf7

Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.