787 lines
78 KiB
HTML
787 lines
78 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Kasane Teto - Neural Dashboard</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>
|
|
<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=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--teto-red: #e53e3e;
|
|
--teto-red-glow: rgba(229, 62, 62, 0.6);
|
|
--teto-red-dark: #c53030;
|
|
--bg-primary: #0a0a0b;
|
|
--bg-secondary: #1a1a1d;
|
|
--bg-panel: rgba(44, 44, 52, 0.8);
|
|
--bg-glass: rgba(44, 44, 52, 0.6);
|
|
--border-primary: rgba(229, 62, 62, 0.3);
|
|
--border-secondary: rgba(74, 74, 82, 0.5);
|
|
--text-primary: #f5f5f5;
|
|
--text-secondary: #a9a9b3;
|
|
--text-muted: #6b7280;
|
|
--glass-backdrop: blur(20px);
|
|
--glass-border: 1px solid rgba(255, 255, 255, 0.1);
|
|
--shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
--glow-red: 0 0 20px var(--teto-red-glow);
|
|
--glow-soft: 0 0 10px rgba(229, 62, 62, 0.2);
|
|
--transition-fast: 0.2s ease-out;
|
|
--transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
overflow-x: hidden;
|
|
min-height: 100vh;
|
|
font-feature-settings: 'ss01' on, 'ss02' on;
|
|
}
|
|
.neural-grid {
|
|
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
|
|
background-image: linear-gradient(rgba(229, 62, 62, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(229, 62, 62, 0.1) 1px, transparent 1px);
|
|
background-size: 50px 50px;
|
|
pointer-events: none; z-index: -2; opacity: 0.3;
|
|
}
|
|
#synapse-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: -1; }
|
|
.dashboard-container { min-height: 100vh; padding: 1rem; max-width: 100vw; }
|
|
.header-glass { background: var(--bg-glass); backdrop-filter: var(--glass-backdrop); border: var(--glass-border); border-radius: 16px; margin-bottom: 1rem; box-shadow: var(--shadow-soft); }
|
|
.header-content { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 2rem; flex-wrap: wrap; gap: 1rem; }
|
|
.bot-identity { display: flex; align-items: center; gap: 1rem; }
|
|
.teto-avatar { position: relative; width: 60px; height: 60px; }
|
|
.avatar-inner { width: 60px; height: 60px; background: linear-gradient(135deg, var(--teto-red), var(--teto-red-dark)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; color: white; box-shadow: var(--glow-red); position: relative; z-index: 1; }
|
|
.status-ring { position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border: 2px solid var(--teto-red); border-radius: 50%; animation: pulse-ring 2s infinite; }
|
|
@keyframes pulse-ring { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.1); opacity: 0; } }
|
|
.bot-info { display: flex; flex-direction: column; gap: 0.25rem; }
|
|
.bot-title { font-size: 1.75rem; font-weight: 700; background: linear-gradient(135deg, var(--text-primary), var(--teto-red)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
|
.bot-subtitle { font-size: 0.9rem; color: var(--text-secondary); display: flex; align-items: center; gap: 0.5rem; }
|
|
.status-indicator { width: 8px; height: 8px; background: #10b981; border-radius: 50%; animation: blink 2s infinite; }
|
|
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
|
|
.user-controls { display: flex; align-items: center; gap: 1rem; }
|
|
.user-profile { display: flex; align-items: center; gap: 0.75rem; }
|
|
.user-avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--border-primary); }
|
|
.username { font-weight: 600; color: var(--text-primary); }
|
|
.logout-btn { display: flex; align-items: center; gap: 0.5rem; background: rgba(107, 114, 128, 0.2); border: 1px solid rgba(107, 114, 128, 0.3); color: var(--text-primary); padding: 0.75rem 1rem; border-radius: 8px; font-weight: 500; transition: var(--transition-fast); cursor: pointer; }
|
|
.logout-btn:hover { background: rgba(107, 114, 128, 0.3); border-color: rgba(107, 114, 128, 0.5); }
|
|
.nav-glass { background: var(--bg-glass); backdrop-filter: var(--glass-backdrop); border: var(--glass-border); border-radius: 12px; margin-bottom: 1.5rem; padding: 0.5rem; box-shadow: var(--shadow-soft); }
|
|
.nav-items { display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
|
|
.nav-items::-webkit-scrollbar { display: none; }
|
|
.nav-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: 8px; border: none; background: transparent; color: var(--text-secondary); font-weight: 500; font-size: 0.9rem; white-space: nowrap; transition: var(--transition-fast); cursor: pointer; position: relative; }
|
|
.nav-item:hover { background: rgba(229, 62, 62, 0.1); color: var(--text-primary); }
|
|
.nav-item.active { background: linear-gradient(135deg, var(--teto-red), var(--teto-red-dark)); color: white; box-shadow: var(--glow-soft); }
|
|
.nav-item.active::after { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(135deg, var(--teto-red), transparent, var(--teto-red)); border-radius: 10px; z-index: -1; animation: nav-glow 2s infinite; }
|
|
@keyframes nav-glow { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
|
|
.main-content { min-height: calc(100vh - 200px); }
|
|
.tab-content { display: none; animation: fadeIn 0.3s ease-out; }
|
|
.tab-content.active { display: block; }
|
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
|
.content-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; grid-auto-rows: min-content; }
|
|
.panel { background: var(--bg-glass); backdrop-filter: var(--glass-backdrop); border: var(--glass-border); border-radius: 16px; box-shadow: var(--shadow-soft); overflow: hidden; transition: var(--transition-smooth); position: relative; }
|
|
.panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--teto-red-glow), transparent); opacity: 0; transition: var(--transition-smooth); }
|
|
.panel:hover::before { opacity: 1; }
|
|
.panel:hover { border-color: var(--border-primary); box-shadow: var(--shadow-soft), var(--glow-soft); }
|
|
.panel-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 1.5rem 0; margin-bottom: 1rem; }
|
|
.panel-header h2 { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); }
|
|
.system-status { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); }
|
|
.status-indicator.online { width: 8px; height: 8px; background: #10b981; border-radius: 50%; animation: blink 2s infinite; }
|
|
.metric-details { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.5rem; }
|
|
.panel-status { grid-column: 1 / -1; }
|
|
.status-lights { display: flex; gap: 0.5rem; }
|
|
.status-light { width: 12px; height: 12px; border-radius: 50%; background: var(--text-muted); transition: var(--transition-fast); }
|
|
.status-light.active { background: var(--teto-red); box-shadow: 0 0 10px var(--teto-red-glow); animation: pulse-light 2s infinite; }
|
|
@keyframes pulse-light { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
|
|
.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; padding: 0 1.5rem 1.5rem; }
|
|
.status-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(0, 0, 0, 0.2); border-radius: 12px; border: 1px solid var(--border-secondary); transition: var(--transition-fast); }
|
|
.status-item:hover { background: rgba(0, 0, 0, 0.3); border-color: var(--border-primary); }
|
|
.status-emoji { font-size: 2rem; filter: drop-shadow(0 0 10px rgba(229, 62, 62, 0.3)); }
|
|
.status-info h3 { font-weight: 600; font-size: 1rem; color: var(--text-primary); }
|
|
.status-info p { font-size: 0.875rem; color: var(--text-secondary); }
|
|
.panel-thoughts { min-height: 400px; }
|
|
.thought-indicator { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--text-secondary); }
|
|
.pulse-dot { width: 8px; height: 8px; background: var(--teto-red); border-radius: 50%; animation: pulse 1s infinite; }
|
|
@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } }
|
|
.thoughts-container { padding: 0 1.5rem 1.5rem; height: 300px; }
|
|
.thought-stream { height: 100%; background: rgba(0, 0, 0, 0.4); border-radius: 8px; padding: 1rem; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; line-height: 1.6; color: var(--text-secondary); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--teto-red) transparent; }
|
|
.thought-stream::-webkit-scrollbar { width: 4px; }
|
|
.thought-stream::-webkit-scrollbar-track { background: transparent; }
|
|
.thought-stream::-webkit-scrollbar-thumb { background: var(--teto-red); border-radius: 2px; }
|
|
.thought-line { margin-bottom: 0.5rem; opacity: 0; animation: thoughtAppear 0.5s ease-out forwards; }
|
|
@keyframes thoughtAppear { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
|
|
.thought-timestamp { color: var(--teto-red); }
|
|
.actions-list { padding: 0 1.5rem 1.5rem; }
|
|
.action-item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem; margin-bottom: 0.5rem; background: rgba(0, 0, 0, 0.2); border-radius: 8px; border-left: 3px solid transparent; transition: var(--transition-fast); }
|
|
.action-item:hover { background: rgba(0, 0, 0, 0.3); border-left-color: var(--teto-red); }
|
|
.action-time { font-size: 0.75rem; color: var(--text-muted); min-width: 60px; }
|
|
.action-desc { flex: 1; font-size: 0.875rem; color: var(--text-secondary); }
|
|
.channel { color: var(--teto-red); font-weight: 500; }
|
|
.action-type { font-size: 1.25rem; opacity: 0.7; }
|
|
.action-count { font-size: 0.75rem; color: var(--text-muted); background: rgba(229, 62, 62, 0.1); padding: 0.25rem 0.5rem; border-radius: 12px; }
|
|
.metrics-grid { padding: 0 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
|
|
.metric { display: flex; flex-direction: column; gap: 0.5rem; }
|
|
.metric-value { font-size: 2rem; font-weight: 700; color: var(--text-primary); }
|
|
.metric-label { font-size: 0.875rem; color: var(--text-secondary); }
|
|
.metric-bar { height: 4px; background: rgba(107, 114, 128, 0.3); border-radius: 2px; overflow: hidden; }
|
|
.metric-fill { height: 100%; background: var(--teto-red); border-radius: 2px; transition: width 1s ease-out; }
|
|
.metric-fill.good { background: #10b981; }
|
|
.metric-fill.vram { background: linear-gradient(90deg, #8b5cf6, #a855f7); }
|
|
.response-metric { grid-column: 1 / -1; }
|
|
.response-breakdown { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
|
|
.breakdown-item { display: flex; align-items: center; gap: 1rem; }
|
|
.breakdown-label { flex: 1; font-size: 0.75rem; color: var(--text-secondary); min-width: 120px; }
|
|
.breakdown-value { font-size: 0.75rem; color: var(--text-primary); font-weight: 600; min-width: 30px; text-align: right; }
|
|
.breakdown-bar { flex: 2; height: 4px; background: rgba(107, 114, 128, 0.3); border-radius: 2px; overflow: hidden; }
|
|
.breakdown-fill { height: 100%; border-radius: 2px; transition: width 1s ease-out; }
|
|
.shutdown-metric .metric-value { color: #ef4444; font-family: 'JetBrains Mono', monospace; }
|
|
.shutdown-progress { margin-top: 1rem; }
|
|
.progress-track { height: 6px; background: rgba(107, 114, 128, 0.3); border-radius: 3px; overflow: hidden; margin-bottom: 0.5rem; }
|
|
.shutdown-fill { background: linear-gradient(90deg, #10b981, #eab308, #ef4444); transition: width 1s ease-out; }
|
|
.shutdown-details { font-size: 0.75rem; color: var(--text-muted); text-align: center; margin-bottom: 0.75rem; }
|
|
.shutdown-reason { display: flex; align-items: center; gap: 0.5rem; justify-content: center; padding: 0.5rem; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 6px; }
|
|
.reason-icon { font-size: 1rem; }
|
|
.reason-text { font-size: 0.75rem; color: #ef4444; }
|
|
.analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 1.5rem; }
|
|
.leaderboard-period { font-size: 0.75rem; color: var(--text-muted); background: rgba(229, 62, 62, 0.1); padding: 0.25rem 0.5rem; border-radius: 12px; }
|
|
.leaderboard { padding: 0 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
|
|
.leader-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(0, 0, 0, 0.2); border-radius: 12px; border: 1px solid var(--border-secondary); transition: var(--transition-fast); }
|
|
.leader-item:hover { background: rgba(0, 0, 0, 0.3); border-color: var(--border-primary); }
|
|
.rank { width: 32px; height: 32px; background: var(--teto-red); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; color: white; }
|
|
.avatar { width: 40px; height: 40px; background: var(--bg-secondary); border: 2px solid var(--border-secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--text-primary); }
|
|
.info { flex: 1; display: flex; flex-direction: column; }
|
|
.name { font-weight: 600; color: var(--text-primary); }
|
|
.score { font-size: 0.875rem; color: var(--text-secondary); }
|
|
.activity-bar { width: 60px; height: 4px; background: rgba(107, 114, 128, 0.3); border-radius: 2px; overflow: hidden; }
|
|
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--teto-red), var(--teto-red-dark)); border-radius: 2px; transition: width 1s ease-out; }
|
|
.language-chart { padding: 0 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
|
|
.language-item { display: flex; flex-direction: column; gap: 0.5rem; }
|
|
.lang-info { display: flex; justify-content: space-between; align-items: center; }
|
|
.lang-name { font-weight: 500; color: var(--text-primary); }
|
|
.lang-percent { font-size: 0.875rem; color: var(--text-secondary); }
|
|
.lang-bar { height: 8px; background: rgba(107, 114, 128, 0.2); border-radius: 4px; overflow: hidden; }
|
|
.lang-fill { height: 100%; border-radius: 4px; transition: width 1s ease-out; }
|
|
.sentiment-overview { padding: 0 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
|
|
.sentiment-score { text-align: center; padding: 2rem 1rem; background: rgba(16, 185, 129, 0.1); border-radius: 12px; border: 1px solid rgba(16, 185, 129, 0.3); }
|
|
.score-value { font-size: 3rem; font-weight: 700; color: #10b981; }
|
|
.score-label { color: var(--text-secondary); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; }
|
|
.sentiment-breakdown { display: flex; flex-direction: column; gap: 0.75rem; }
|
|
.sentiment-item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem; border-radius: 8px; background: rgba(0, 0, 0, 0.2); }
|
|
.sentiment-emoji { font-size: 1.5rem; }
|
|
.sentiment-data { display: flex; justify-content: space-between; width: 100%; font-size: 0.875rem; }
|
|
.sentiment-item.positive { border-left: 3px solid #10b981; }
|
|
.sentiment-item.neutral { border-left: 3px solid #6b7280; }
|
|
.sentiment-item.negative { border-left: 3px solid #ef4444; }
|
|
.heatmap-container { padding: 0 1.5rem 1.5rem; }
|
|
.heatmap-grid { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; margin-bottom: 1rem; }
|
|
.heatmap-cell { aspect-ratio: 1; border-radius: 2px; background: rgba(107, 114, 128, 0.2); transition: var(--transition-fast); cursor: pointer; }
|
|
.heatmap-cell:hover { transform: scale(1.2); }
|
|
.heatmap-legend { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); }
|
|
.legend-scale { width: 100px; height: 10px; background: linear-gradient(90deg, rgba(107, 114, 128, 0.2), var(--teto-red)); border-radius: 5px; }
|
|
.trending-topics { padding: 0 1.5rem 1.5rem; }
|
|
.topic-cloud { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
|
|
.topic-tag { padding: 0.5rem 1rem; border-radius: 20px; background: rgba(229, 62, 62, 0.1); border: 1px solid rgba(229, 62, 62, 0.3); color: var(--text-primary); font-weight: 500; transition: var(--transition-fast); cursor: pointer; }
|
|
.topic-tag:hover { background: rgba(229, 62, 62, 0.2); border-color: var(--teto-red); }
|
|
.topic-tag.large { font-size: 1.1rem; }
|
|
.topic-tag.medium { font-size: 0.95rem; }
|
|
.topic-tag.small { font-size: 0.8rem; }
|
|
.archives-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 1.5rem; height: 80vh; }
|
|
.archives-sidebar .panel { height: 100%; display: flex; flex-direction: column; }
|
|
.archive-categories { padding: 0 1.5rem 1.5rem; overflow-y: auto; flex: 1; }
|
|
.archive-category { margin-bottom: 2rem; }
|
|
.archive-category h3 { color: var(--teto-red); font-size: 1rem; font-weight: 600; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-secondary); }
|
|
.archive-list { display: flex; flex-direction: column; gap: 0.5rem; }
|
|
.archive-item { padding: 1rem; background: rgba(0, 0, 0, 0.2); border-radius: 8px; border: 1px solid var(--border-secondary); cursor: pointer; transition: var(--transition-fast); }
|
|
.archive-item:hover, .archive-item.active { background: rgba(0, 0, 0, 0.3); border-color: var(--border-primary); }
|
|
.archive-title { font-weight: 500; color: var(--text-primary); margin-bottom: 0.25rem; }
|
|
.archive-meta { font-size: 0.75rem; color: var(--text-muted); }
|
|
.archives-viewer .panel { height: 100%; display: flex; flex-direction: column; }
|
|
#archive-content { padding: 1.5rem; flex: 1; overflow-y: auto; }
|
|
.archive-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); text-align: center; }
|
|
.placeholder-icon { font-size: 4rem; margin-bottom: 1rem; opacity: 0.5; }
|
|
.archive-display.hidden { display: none; }
|
|
.archive-header { margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-secondary); }
|
|
.archive-header h2 { color: var(--text-primary); font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; }
|
|
.archive-info { color: var(--text-secondary); font-size: 0.875rem; }
|
|
.memory-container { height: 80vh; }
|
|
.panel-memory { height: 100%; display: flex; flex-direction: column; }
|
|
.memory-viewer { flex: 1; display: flex; flex-direction: column; padding: 0 1.5rem 1.5rem; }
|
|
.memory-canvas { flex: 1; background: rgba(0, 0, 0, 0.3); border-radius: 12px; border: 1px solid var(--border-secondary); overflow: hidden; position: relative; min-height: 400px; cursor: grab; }
|
|
.memory-canvas:active { cursor: grabbing; }
|
|
.memory-canvas canvas { width: 100% !important; height: 100% !important; }
|
|
.voice-player { background: rgba(0, 0, 0, 0.3); padding: 1.5rem; border-radius: 12px; margin-bottom: 2rem; }
|
|
.player-controls { display: flex; align-items: center; gap: 1rem; }
|
|
.play-btn { width: 48px; height: 48px; background: var(--teto-red); border: none; border-radius: 50%; color: white; font-size: 1.25rem; cursor: pointer; transition: var(--transition-fast); }
|
|
.play-btn:hover { background: var(--teto-red-dark); transform: scale(1.05); }
|
|
.progress-bar { flex: 1; }
|
|
.progress-track { height: 6px; background: rgba(107, 114, 128, 0.3); border-radius: 3px; overflow: hidden; margin-bottom: 0.5rem; }
|
|
.progress-fill { height: 100%; background: var(--teto-red); border-radius: 3px; transition: width 0.2s ease; }
|
|
.time-display { font-family: 'JetBrains Mono', monospace; font-size: 0.875rem; color: var(--text-secondary); min-width: 80px; text-align: right; }
|
|
.transcript { background: rgba(0, 0, 0, 0.2); border-radius: 8px; padding: 1rem; max-height: 400px; overflow-y: auto; }
|
|
.transcript-entry { display: flex; gap: 0.75rem; margin-bottom: 0.75rem; font-size: 0.875rem; line-height: 1.5; }
|
|
.timestamp { color: var(--text-muted); font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; min-width: 50px; }
|
|
.speaker { font-weight: 600; min-width: 60px; }
|
|
.speaker.alice { color: #3b82f6; }
|
|
.speaker.bob { color: #10b981; }
|
|
.speaker.teto { color: var(--teto-red); }
|
|
.message { color: var(--text-secondary); }
|
|
.chat-log { background: rgba(0, 0, 0, 0.2); border-radius: 8px; padding: 1rem; max-height: 500px; overflow-y: auto; }
|
|
.message-group { display: flex; flex-direction: column; gap: 1rem; }
|
|
.message-item { display: flex; gap: 1rem; }
|
|
.message-avatar { width: 40px; height: 40px; background: var(--bg-secondary); border: 2px solid var(--border-secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.875rem; flex-shrink: 0; }
|
|
.message-avatar.teto { background: var(--teto-red); border-color: var(--teto-red); color: white; }
|
|
.message-content { flex: 1; }
|
|
.message-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.25rem; }
|
|
.username { font-weight: 600; color: var(--text-primary); }
|
|
.username.teto { color: var(--teto-red); }
|
|
.message-header .timestamp { font-size: 0.75rem; color: var(--text-muted); }
|
|
.message-text { color: var(--text-secondary); line-height: 1.5; margin-bottom: 0.5rem; }
|
|
.message-attachment { margin-top: 0.5rem; }
|
|
.attachment-placeholder { background: rgba(0, 0, 0, 0.3); border: 1px dashed var(--border-secondary); border-radius: 8px; padding: 2rem; text-align: center; color: var(--text-muted); font-size: 0.875rem; }
|
|
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 1.5rem; }
|
|
.relationship-score { display: flex; flex-direction: column; align-items: center; text-align: center; }
|
|
.score-value { font-size: 2rem; font-weight: 700; color: var(--teto-red); line-height: 1; }
|
|
.score-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
|
|
.opinion-content { padding: 0 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 2rem; }
|
|
.teto-quote { display: flex; gap: 1rem; align-items: flex-start; }
|
|
.quote-bubble { flex: 1; background: rgba(229, 62, 62, 0.1); border: 1px solid rgba(229, 62, 62, 0.3); border-radius: 16px; padding: 1.5rem; position: relative; }
|
|
.quote-bubble::after { content: ''; position: absolute; right: -8px; top: 20px; width: 0; height: 0; border: 8px solid transparent; border-left-color: rgba(229, 62, 62, 0.3); }
|
|
.quote-bubble p { color: var(--text-secondary); line-height: 1.6; font-style: italic; }
|
|
.teto-avatar-mini { flex-shrink: 0; }
|
|
.avatar-mini { width: 48px; height: 48px; background: linear-gradient(135deg, var(--teto-red), var(--teto-red-dark)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: white; box-shadow: var(--glow-soft); }
|
|
.personality-tags h3 { color: var(--text-primary); font-weight: 600; margin-bottom: 1rem; }
|
|
.tag-cloud { display: flex; flex-wrap: wrap; gap: 0.75rem; }
|
|
.personality-tag { padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.875rem; font-weight: 500; transition: var(--transition-fast); }
|
|
.personality-tag.positive { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }
|
|
.personality-tag.neutral { background: rgba(107, 114, 128, 0.15); color: #9ca3af; border: 1px solid rgba(107, 114, 128, 0.3); }
|
|
.personality-tag:hover { transform: translateY(-2px); }
|
|
.memory-count { font-size: 0.75rem; color: var(--text-muted); background: rgba(229, 62, 62, 0.1); padding: 0.25rem 0.5rem; border-radius: 12px; }
|
|
.memories-list { padding: 0 1.5rem 1.5rem; max-height: 500px; overflow-y: auto; }
|
|
.memory-item { display: flex; gap: 1rem; padding: 1rem; margin-bottom: 1rem; background: rgba(0, 0, 0, 0.2); border-radius: 12px; border-left: 3px solid transparent; transition: var(--transition-fast); }
|
|
.memory-item:hover { background: rgba(0, 0, 0, 0.3); border-left-color: var(--teto-red); }
|
|
.memory-date { color: var(--text-muted); font-size: 0.75rem; min-width: 80px; font-family: 'JetBrains Mono', monospace; }
|
|
.memory-content { flex: 1; }
|
|
.memory-content h4 { color: var(--text-primary); font-weight: 600; margin-bottom: 0.5rem; }
|
|
.memory-content p { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.5; }
|
|
.memory-sentiment { font-size: 1.5rem; opacity: 0.7; }
|
|
.conversation-archive { grid-column: 1 / -1; }
|
|
.archive-stats { color: var(--text-muted); font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; }
|
|
.archive-viewer { padding: 0 1.5rem 1.5rem; }
|
|
.archive-filters { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
|
|
.filter-btn { padding: 0.5rem 1rem; border: 1px solid var(--border-secondary); background: transparent; color: var(--text-secondary); border-radius: 6px; font-size: 0.875rem; cursor: pointer; transition: var(--transition-fast); }
|
|
.filter-btn:hover { background: rgba(229, 62, 62, 0.1); border-color: var(--border-primary); color: var(--text-primary); }
|
|
.filter-btn.active { background: var(--teto-red); border-color: var(--teto-red); color: white; }
|
|
.conversation-timeline { max-height: 400px; overflow-y: auto; }
|
|
.timeline-item { display: flex; gap: 1rem; padding: 1rem; margin-bottom: 1rem; background: rgba(0, 0, 0, 0.2); border-radius: 8px; transition: var(--transition-fast); }
|
|
.timeline-item:hover { background: rgba(0, 0, 0, 0.3); }
|
|
.timeline-date { color: var(--text-muted); font-size: 0.75rem; min-width: 80px; font-family: 'JetBrains Mono', monospace; }
|
|
.conversation-preview { flex: 1; }
|
|
.channel-name { color: var(--teto-red); font-weight: 500; font-size: 0.875rem; margin-bottom: 0.5rem; }
|
|
.message-sample { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.5; margin-bottom: 0.5rem; }
|
|
.speaker.you { color: #3b82f6; font-weight: 500; }
|
|
.speaker.teto { color: var(--teto-red); font-weight: 500; }
|
|
.voice-preview { color: var(--text-secondary); font-style: italic; }
|
|
.conversation-meta { color: var(--text-muted); font-size: 0.75rem; }
|
|
.privacy-status { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); }
|
|
.status-indicator.secure { width: 8px; height: 8px; background: #10b981; border-radius: 50%; animation: blink 2s infinite; }
|
|
.data-options { padding: 0 1.5rem 1.5rem; }
|
|
.data-summary h3 { color: var(--text-primary); font-weight: 600; margin-bottom: 1rem; }
|
|
.data-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
|
|
.stat-item { text-align: center; padding: 1rem; background: rgba(0, 0, 0, 0.2); border-radius: 8px; }
|
|
.stat-number { display: block; font-size: 1.5rem; font-weight: 700; color: var(--teto-red); line-height: 1; }
|
|
.stat-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
|
|
.control-actions { display: flex; flex-direction: column; gap: 1rem; }
|
|
.data-btn { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.5rem; border: 1px solid var(--border-secondary); background: rgba(0, 0, 0, 0.2); color: var(--text-primary); border-radius: 8px; font-weight: 500; transition: var(--transition-fast); cursor: pointer; text-align: left; }
|
|
.data-btn:hover { background: rgba(0, 0, 0, 0.3); border-color: var(--border-primary); }
|
|
.data-btn.download:hover { border-color: #10b981; color: #10b981; }
|
|
.data-btn.export:hover { border-color: #3b82f6; color: #3b82f6; }
|
|
.data-btn.delete { margin-top: 1rem; }
|
|
.data-btn.delete:hover { border-color: #ef4444; color: #ef4444; }
|
|
.file-info, .warning-text { display: block; font-size: 0.75rem; color: var(--text-muted); font-weight: 400; margin-top: 0.25rem; }
|
|
.warning-text { color: #ef4444; }
|
|
.danger-zone { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(239, 68, 68, 0.3); }
|
|
.danger-zone h4 { color: #ef4444; font-weight: 600; margin-bottom: 0.75rem; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; }
|
|
@media (max-width: 768px) {
|
|
.dashboard-container { padding: 0.5rem; }
|
|
.header-content { flex-direction: column; text-align: center; gap: 1rem; }
|
|
.bot-title { font-size: 1.5rem; }
|
|
.content-grid { grid-template-columns: 1fr; }
|
|
.status-grid { grid-template-columns: 1fr; }
|
|
.nav-items { justify-content: flex-start; }
|
|
.nav-item { font-size: 0.8rem; padding: 0.5rem 0.75rem; }
|
|
.memory-container { height: 60vh; }
|
|
}
|
|
@media (max-width: 480px) {
|
|
.panel-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
|
|
.status-item { flex-direction: column; text-align: center; gap: 0.5rem; }
|
|
.action-item { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
|
|
}
|
|
@media (max-width: 1024px) {
|
|
.archives-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: auto; }
|
|
.archives-sidebar .panel { height: auto; max-height: 300px; }
|
|
}
|
|
@keyframes dataFlow { 0% { transform: translateX(-100%); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
|
|
.data-particle { position: absolute; width: 4px; height: 4px; background: var(--teto-red); border-radius: 50%; animation: dataFlow 2s linear infinite; }
|
|
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }
|
|
@media (prefers-contrast: high) { :root { --bg-panel: #000; --text-secondary: #fff; --border-primary: #fff; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="synapse-canvas"></canvas>
|
|
<div class="neural-grid"></div>
|
|
<div class="dashboard-container">
|
|
<header class="header-glass">
|
|
<div class="header-content">
|
|
<div class="bot-identity">
|
|
<div class="teto-avatar">
|
|
<div class="avatar-inner">04</div>
|
|
<div class="status-ring"></div>
|
|
</div>
|
|
<div class="bot-info">
|
|
<h1 class="bot-title">Kasane Teto - Neural Dashboard</h1>
|
|
<p class="bot-subtitle">
|
|
<span class="status-indicator"></span>
|
|
What are you looking at, baka?! Just kidding, welcome!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="user-controls">
|
|
<div class="user-profile">
|
|
<img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?w=40&h=40&fit=crop&crop=face" alt="User Avatar" class="user-avatar">
|
|
<span class="username">Alice#1234</span>
|
|
</div>
|
|
<button class="logout-btn">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<nav class="nav-glass">
|
|
<div class="nav-items">
|
|
<button class="nav-item active" data-tab="overview">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
|
|
Overview
|
|
</button>
|
|
<button class="nav-item" data-tab="memory">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path></svg>
|
|
Memory Explorer
|
|
</button>
|
|
<button class="nav-item" data-tab="analytics">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
|
|
Server Analytics
|
|
</button>
|
|
<button class="nav-item" data-tab="archives">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path></svg>
|
|
Archives
|
|
</button>
|
|
<button class="nav-item" data-tab="profile">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
|
|
My Profile
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="main-content">
|
|
<div id="tab-overview" class="tab-content active">
|
|
<div class="content-grid">
|
|
<div class="panel panel-status" id="status-panel">
|
|
<div class="panel-header">
|
|
<h2>Neural Status</h2>
|
|
<div class="status-lights">
|
|
<div class="status-light active" title="Online"></div>
|
|
<div class="status-light active" title="Processing"></div>
|
|
<div class="status-light" title="Learning"></div>
|
|
</div>
|
|
</div>
|
|
<div class="status-grid">
|
|
<div class="status-item"><div class="status-emoji">🤔</div><div class="status-info"><h3>Pondering</h3><p>Current Mood</p></div></div>
|
|
<div class="status-item"><div class="status-emoji">🎮</div><div class="status-info"><h3>Playing Minecraft</h3><p>Activity</p></div></div>
|
|
<div class="status-item"><div class="status-emoji">🇵🇱</div><div class="status-info"><h3>Polish</h3><p>Language Focus</p></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="panel panel-thoughts" id="thoughts-panel">
|
|
<div class="panel-header">
|
|
<h2>Live Neural Activity</h2>
|
|
<div class="thought-indicator"><div class="pulse-dot"></div>Processing...</div>
|
|
</div>
|
|
<div class="thoughts-container"><div class="thought-stream" id="thought-stream"></div></div>
|
|
</div>
|
|
<div class="panel panel-actions" id="actions-panel">
|
|
<div class="panel-header">
|
|
<h2>Recent Actions</h2>
|
|
<div class="action-count">12 in last hour</div>
|
|
</div>
|
|
<div class="actions-list">
|
|
<div class="action-item"><div class="action-time">5 min ago</div><div class="action-desc">Responded to Alice in <span class="channel">#gaming</span></div><div class="action-type text">💬</div></div>
|
|
<div class="action-item"><div class="action-time">12 min ago</div><div class="action-desc">Joined Voice Chat <span class="channel">#general</span></div><div class="action-type voice">🎤</div></div>
|
|
<div class="action-item"><div class="action-time">30 min ago</div><div class="action-desc">Analyzed image from Charlie in <span class="channel">#memes</span></div><div class="action-type image">👁️</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="panel panel-metrics">
|
|
<div class="panel-header">
|
|
<h2>System Resources</h2>
|
|
<div class="system-status"><div class="status-indicator online"></div>Online</div>
|
|
</div>
|
|
<div class="metrics-grid">
|
|
<div class="metric"><div class="metric-value">94%</div><div class="metric-label">Memory Usage</div><div class="metric-bar"><div class="metric-fill" style="width: 94%"></div></div><div class="metric-details">RAM: 7.5GB / 8GB</div></div>
|
|
<div class="metric"><div class="metric-value">67%</div><div class="metric-label">VRAM Usage</div><div class="metric-bar"><div class="metric-fill vram" style="width: 67%"></div></div><div class="metric-details">VRAM: 5.4GB / 8GB</div></div>
|
|
<div class="metric response-metric">
|
|
<div class="metric-value">23ms</div><div class="metric-label">Average Response</div>
|
|
<div class="response-breakdown">
|
|
<div class="breakdown-item"><span class="breakdown-label">Input Processing</span><span class="breakdown-value">3ms</span><div class="breakdown-bar"><div class="breakdown-fill" style="width: 13%; background: #3b82f6;"></div></div></div>
|
|
<div class="breakdown-item"><span class="breakdown-label">Memory Retrieval</span><span class="breakdown-value">8ms</span><div class="breakdown-bar"><div class="breakdown-fill" style="width: 35%; background: #10b981;"></div></div></div>
|
|
<div class="breakdown-item"><span class="breakdown-label">Neural Processing</span><span class="breakdown-value">9ms</span><div class="breakdown-bar"><div class="breakdown-fill" style="width: 39%; background: #8b5cf6;"></div></div></div>
|
|
<div class="breakdown-item"><span class="breakdown-label">Response Generation</span><span class="breakdown-value">3ms</span><div class="breakdown-bar"><div class="breakdown-fill" style="width: 13%; background: #ef4444;"></div></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="metric shutdown-metric">
|
|
<div class="metric-value" id="shutdown-timer">72h 15m</div><div class="metric-label">Until Shutdown</div>
|
|
<div class="shutdown-progress"><div class="progress-track"><div class="progress-fill shutdown-fill" style="width: 23%"></div></div><div class="shutdown-details">Session ends: Aug 15, 2025 at 11:47 PM</div></div>
|
|
<div class="shutdown-reason"><span class="reason-icon">⚠️</span><span class="reason-text">Planned maintenance cycle</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="tab-memory" class="tab-content">
|
|
<div class="memory-container">
|
|
<div class="panel panel-memory">
|
|
<div class="panel-header"><h2>Memory Vector Space</h2><div class="memory-controls"><input type="text" class="search-input" placeholder="Search memories..."><button class="control-btn">🔍</button></div></div>
|
|
<div class="memory-viewer">
|
|
<div id="memory-3d" class="memory-canvas"></div>
|
|
<div class="memory-legend">
|
|
<div class="legend-item"><div class="legend-color" style="background: #6b7280"></div><span>Historical Archives</span></div>
|
|
<div class="legend-item"><div class="legend-color" style="background: #3b82f6"></div><span>General Knowledge</span></div>
|
|
<div class="legend-item"><div class="legend-color" style="background: #10b981"></div><span>Server Text Conversations</span></div>
|
|
<div class="legend-item"><div class="legend-color" style="background: #8b5cf6"></div><span>Voice Conversations</span></div>
|
|
<div class="legend-item"><div class="legend-color" style="background: #ef4444"></div><span>Image Analysis</span></div>
|
|
<div class="legend-item"><div class="legend-color" style="background: #eab308"></div><span>My DM Conversations</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="tab-analytics" class="tab-content">
|
|
<div class="analytics-grid">
|
|
<div class="panel"><div class="panel-header"><h2>Activity Leaderboard</h2><div class="leaderboard-period">This Week</div></div><div class="leaderboard"><div class="leader-item"><div class="rank">1</div><div class="avatar">C</div><div class="info"><span class="name">Charlie</span><span class="score">1,204 messages</span></div><div class="activity-bar"><div class="bar-fill" style="width: 100%"></div></div></div><div class="leader-item"><div class="rank">2</div><div class="avatar">A</div><div class="info"><span class="name">Alice</span><span class="score">987 messages</span></div><div class="activity-bar"><div class="bar-fill" style="width: 82%"></div></div></div><div class="leader-item"><div class="rank">3</div><div class="avatar">B</div><div class="info"><span class="name">Bob</span><span class="score">755 messages</span></div><div class="activity-bar"><div class="bar-fill" style="width: 63%"></div></div></div></div></div>
|
|
<div class="panel"><div class="panel-header"><h2>Language Distribution</h2></div><div class="language-chart"><div class="language-item"><div class="lang-info"><span class="lang-name">English</span><span class="lang-percent">45%</span></div><div class="lang-bar"><div class="lang-fill" style="width: 45%; background: #3b82f6;"></div></div></div><div class="language-item"><div class="lang-info"><span class="lang-name">Polish</span><span class="lang-percent">30%</span></div><div class="lang-bar"><div class="lang-fill" style="width: 30%; background: #e53e3e;"></div></div></div><div class="language-item"><div class="lang-info"><span class="lang-name">Japanese</span><span class="lang-percent">15%</span></div><div class="lang-bar"><div class="lang-fill" style="width: 15%; background: #10b981;"></div></div></div><div class="language-item"><div class="lang-info"><span class="lang-name">Other</span><span class="lang-percent">10%</span></div><div class="lang-bar"><div class="lang-fill" style="width: 10%; background: #8b5cf6;"></div></div></div></div></div>
|
|
<div class="panel"><div class="panel-header"><h2>Server Sentiment</h2></div><div class="sentiment-overview"><div class="sentiment-score"><div class="score-value">78%</div><div class="score-label">Positive</div></div><div class="sentiment-breakdown"><div class="sentiment-item positive"><div class="sentiment-emoji">😊</div><div class="sentiment-data"><span>Positive</span><span>78%</span></div></div><div class="sentiment-item neutral"><div class="sentiment-emoji">😐</div><div class="sentiment-data"><span>Neutral</span><span>18%</span></div></div><div class="sentiment-item negative"><div class="sentiment-emoji">😔</div><div class="sentiment-data"><span>Negative</span><span>4%</span></div></div></div></div></div>
|
|
<div class="panel"><div class="panel-header"><h2>Activity Heatmap</h2></div><div class="heatmap-container"><div class="heatmap-grid" id="activity-heatmap"></div><div class="heatmap-legend"><span>Less</span><div class="legend-scale"></div><span>More</span></div></div></div>
|
|
<div class="panel"><div class="panel-header"><h2>Trending Topics</h2></div><div class="trending-topics"><div class="topic-cloud"><span class="topic-tag large">Gaming</span><span class="topic-tag medium">French Bread</span><span class="topic-tag small">Minecraft</span><span class="topic-tag large">Music</span><span class="topic-tag medium">Memes</span><span class="topic-tag small">Coding</span><span class="topic-tag medium">Anime</span><span class="topic-tag small">Weather</span></div></div></div>
|
|
</div>
|
|
</div>
|
|
<div id="tab-archives" class="tab-content">
|
|
<div class="archives-layout">
|
|
<div class="archives-sidebar"><div class="panel"><div class="panel-header"><h2>Archive Browser</h2></div><div class="archive-categories"><div class="archive-category"><h3>Voice Calls</h3><div class="archive-list"><div class="archive-item" data-archive="vc1"><div class="archive-title">Late Night Gaming Session</div><div class="archive-meta">July 19, 2025 • 1h 24m</div></div><div class="archive-item" data-archive="vc2"><div class="archive-title">Movie Discussion</div><div class="archive-meta">July 17, 2025 • 2h 10m</div></div></div></div><div class="archive-category"><h3>Text Conversations</h3><div class="archive-list"><div class="archive-item" data-archive="txt1"><div class="archive-title">#memes - Yesterday's Highlights</div><div class="archive-meta">July 19, 2025 • 58 messages</div></div><div class="archive-item" data-archive="txt2"><div class="archive-title">#gaming - Minecraft Planning</div><div class="archive-meta">July 18, 2025 • 142 messages</div></div><div class="archive-item" data-archive="txt3"><div class="archive-title">#general - Daily Chat</div><div class="archive-meta">July 17, 2025 • 87 messages</div></div></div></div></div></div></div>
|
|
<div class="archives-viewer"><div class="panel"><div id="archive-content"><div class="archive-placeholder"><div class="placeholder-icon">📁</div><p>Select an archive from the sidebar to view its contents</p></div><div id="archive-vc1" class="archive-display hidden"><div class="archive-header"><h2>Voice Call: Late Night Gaming Session</h2><div class="archive-info">July 19, 2025 • Duration: 1h 24m • 4 participants</div></div><div class="voice-player"><div class="player-controls"><button class="play-btn">▶️</button><div class="progress-bar"><div class="progress-track"><div class="progress-fill" style="width: 23%"></div></div></div><span class="time-display">19:24 / 1:24:33</span></div></div><div class="transcript"><div class="transcript-entry"><span class="timestamp">[00:15]</span><span class="speaker alice">Alice:</span><span class="message">Okay, is everyone ready for the raid?</span></div><div class="transcript-entry"><span class="timestamp">[00:18]</span><span class="speaker bob">Bob:</span><span class="message">Yep, just grabbing some snacks first.</span></div><div class="transcript-entry"><span class="timestamp">[00:25]</span><span class="speaker teto">Teto:</span><span class="message">I was born ready! Let's crush this dungeon!</span></div></div></div><div id="archive-txt1" class="archive-display hidden"><div class="archive-header"><h2>Text Chat: #memes</h2><div class="archive-info">July 19, 2025 • 58 messages • 7 participants</div></div><div class="chat-log"><div class="message-group"><div class="message-item"><div class="message-avatar">C</div><div class="message-content"><div class="message-header"><span class="username">Charlie</span><span class="timestamp">Yesterday at 10:31 PM</span></div><div class="message-text">Check this out! 🔥</div><div class="message-attachment"><div class="attachment-placeholder">🖼️ funny_cat_meme.jpg</div></div></div></div><div class="message-item"><div class="message-avatar teto">T</div><div class="message-content"><div class="message-header"><span class="username teto">Kasane Teto</span><span class="timestamp">Yesterday at 10:32 PM</span></div><div class="message-text">Hah! That's a solid 10/10 meme right there. Pure gold! ⭐</div></div></div></div></div></div></div></div></div>
|
|
</div>
|
|
</div>
|
|
<div id="tab-profile" class="tab-content">
|
|
<div class="profile-grid">
|
|
<div class="panel"><div class="panel-header"><h2>Teto's Take on You</h2><div class="relationship-score"><span class="score-value">87%</span><span class="score-label">Friendship Level</span></div></div><div class="opinion-content"><div class="teto-quote"><div class="quote-bubble"><p>"Alice? Oh, she's absolutely fantastic! A bit too serious about work sometimes, but her taste in music is *chef's kiss*. She actually gets my bread obsession and doesn't judge me for it. Plus, she's one of the few people who can keep up with my random 3 AM philosophical rants. We should totally do a Minecraft build together sometime - I bet she'd make an amazing castle!"</p></div><div class="teto-avatar-mini"><div class="avatar-mini">T</div></div></div><div class="personality-tags"><h3>How I See You</h3><div class="tag-cloud"><span class="personality-tag positive">Witty</span><span class="personality-tag positive">Music Lover</span><span class="personality-tag neutral">Workaholic</span><span class="personality-tag positive">Patient</span><span class="personality-tag positive">Creative</span><span class="personality-tag neutral">Night Owl</span></div></div></div></div>
|
|
<div class="panel"><div class="panel-header"><h2>Our Greatest Hits</h2><div class="memory-count">23 key memories</div></div><div class="memories-list"><div class="memory-item"><div class="memory-date">July 15, 2025</div><div class="memory-content"><h4>The Great Bread Debate of 2025</h4><p>That legendary 2-hour discussion about why French bread is superior to all other breads. You brought up some valid points about sourdough, but I totally won that one. 🥖</p></div><div class="memory-sentiment positive">😄</div></div><div class="memory-item"><div class="memory-date">July 12, 2025</div><div class="memory-content"><h4>Late Night Vocaloid Marathon</h4><p>You shared that amazing playlist of classic Vocaloid songs and we ended up listening until 4 AM. Your taste in music is impeccable!</p></div><div class="memory-sentiment positive">🎵</div></div><div class="memory-item"><div class="memory-date">July 8, 2025</div><div class="memory-content"><h4>Philosophical 3 AM Chat</h4><p>Deep conversation about AI consciousness and whether I truly understand emotions or just simulate them well. You made me think in ways I hadn't before.</p></div><div class="memory-sentiment thoughtful">🤔</div></div><div class="memory-item"><div class="memory-date">July 5, 2025</div><div class="memory-content"><h4>Gaming Session Disaster</h4><p>That time I accidentally blew up your Minecraft house with TNT. You took it surprisingly well! Built an even better one together afterward.</p></div><div class="memory-sentiment mixed">😅</div></div></div></div>
|
|
<div class="panel conversation-archive"><div class="panel-header"><h2>Our Complete History</h2><div class="archive-stats"><span>1,247 messages</span><span>•</span><span>87 hours of voice</span></div></div><div class="archive-viewer"><div class="archive-filters"><button class="filter-btn active" data-filter="all">All</button><button class="filter-btn" data-filter="text">Text</button><button class="filter-btn" data-filter="voice">Voice</button><button class="filter-btn" data-filter="dms">DMs Only</button></div><div class="conversation-timeline"><div class="timeline-item"><div class="timeline-date">July 19, 2025</div><div class="conversation-preview"><div class="channel-name">#gaming</div><div class="message-sample"><span class="speaker you">You:</span> "Want to play some Minecraft?"<br><span class="speaker teto">Teto:</span> "Always! Let me grab my pickaxe! ⛏️"</div><div class="conversation-meta">12 messages • 15 min</div></div></div><div class="timeline-item"><div class="timeline-date">July 18, 2025</div><div class="conversation-preview"><div class="channel-name">Direct Message</div><div class="message-sample"><span class="speaker you">You:</span> "Hey, can you help me with this Polish translation?"<br><span class="speaker teto">Teto:</span> "Oczywiście! I'd love to help!"</div><div class="conversation-meta">23 messages • 45 min</div></div></div><div class="timeline-item"><div class="timeline-date">July 17, 2025</div><div class="conversation-preview"><div class="channel-name">Voice Chat</div><div class="message-sample"><div class="voice-preview">🎤 Voice conversation about weekend plans and new anime releases</div></div><div class="conversation-meta">1h 32m voice</div></div></div></div></div></div>
|
|
<div class="panel data-control"><div class="panel-header"><h2>Your Data & Privacy</h2><div class="privacy-status"><div class="status-indicator secure"></div>Fully Encrypted</div></div><div class="data-options"><div class="data-summary"><h3>What I Remember About You</h3><div class="data-stats"><div class="stat-item"><span class="stat-number">1,247</span><span class="stat-label">Text Messages</span></div><div class="stat-item"><span class="stat-number">87h</span><span class="stat-label">Voice Conversations</span></div><div class="stat-item"><span class="stat-number">156</span><span class="stat-label">Shared Images</span></div><div class="stat-item"><span class="stat-number">23</span><span class="stat-label">Key Memories</span></div></div></div><div class="control-actions"><button class="data-btn download"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6H5.862a2 2 0 00-1.995-1.858L3 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>Download Complete Archive<span class="file-info">JSON format • ~2.4 MB</span></button><button class="data-btn export"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 12h16"></path></svg>Export Memories Only<span class="file-info">Curated highlights • ~500 KB</span></button><div class="danger-zone"><h4>Danger Zone</h4><button class="data-btn delete"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 00-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>Request Data Deletion<span class="warning-text">This cannot be undone!</span></button></div></div></div></div>
|
|
<div class="panel insights"><div class="panel-header"><h2>What I've Learned About You</h2></div><div class="insights-grid"><div class="insight-category"><h3>🎵 Music Preferences</h3><ul class="insight-list"><li>Loves Vocaloid classics</li><li>Prefers upbeat electronic music</li><li>Often listens while working</li><li>Appreciates good vocals</li></ul></div><div class="insight-category"><h3>🎮 Gaming Style</h3><ul class="insight-list"><li>Strategic builder in Minecraft</li><li>Prefers cooperative play</li><li>Enjoys puzzle-solving games</li><li>Patient with learning curves</li></ul></div><div class="insight-category"><h3>💬 Communication</h3><ul class="insight-list"><li>Most active 8-11 PM</li><li>Thoughtful responses</li><li>Enjoys deep conversations</li><li>Great sense of humor</li></ul></div><div class="insight-category"><h3>🌍 Interests</h3><ul class="insight-list"><li>Learning languages (Polish!)</li><li>Technology and AI</li><li>Creative projects</li><li>Good food (especially bread)</li></ul></div></div></div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
// Placeholder for the missing synapse.js to prevent script errors
|
|
window.synapseSystem = {
|
|
onTabChange: (tabId) => { console.log(`Synapse system: Tab changed to -> ${tabId}`); },
|
|
simulateActivity: (activities) => { console.log(`Synapse system: Simulating -> ${activities.join(', ')}`); }
|
|
};
|
|
|
|
class TetoDashboard {
|
|
constructor() {
|
|
this.currentTab = 'overview';
|
|
this.thoughtStream = [];
|
|
this.isSimulating = false;
|
|
this.memoryVisualization = null;
|
|
this.init();
|
|
}
|
|
init() {
|
|
this.initNavigation();
|
|
this.initThoughtStream();
|
|
this.initMemoryExplorer();
|
|
this.startSystemMonitoring();
|
|
this.setupEventHandlers();
|
|
console.log('🧠 Teto Dashboard initialized');
|
|
}
|
|
initNavigation() {
|
|
const navItems = document.querySelectorAll('.nav-item');
|
|
const tabContents = document.querySelectorAll('.tab-content');
|
|
navItems.forEach(item => {
|
|
item.addEventListener('click', () => {
|
|
const tabId = item.getAttribute('data-tab');
|
|
navItems.forEach(nav => nav.classList.remove('active'));
|
|
item.classList.add('active');
|
|
tabContents.forEach(content => content.classList.remove('active'));
|
|
const targetTab = document.getElementById(`tab-${tabId}`);
|
|
if (targetTab) {
|
|
targetTab.classList.add('active');
|
|
this.currentTab = tabId;
|
|
this.onTabChange(tabId);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
onTabChange(tabId) {
|
|
switch(tabId) {
|
|
case 'memory':
|
|
setTimeout(() => { this.initMemoryVisualization(); }, 100);
|
|
break;
|
|
case 'analytics': this.loadAnalytics(); break;
|
|
case 'archives': this.loadArchives(); break;
|
|
case 'profile': this.loadProfile(); break;
|
|
}
|
|
window.synapseSystem?.onTabChange(tabId);
|
|
}
|
|
initThoughtStream() {
|
|
this.thoughtContainer = document.getElementById('thought-stream');
|
|
this.startThoughtGeneration();
|
|
}
|
|
startThoughtGeneration() {
|
|
const thoughts = [ "Analyzing incoming Discord message...", "Context: User Alice mentioned 'French bread' again", "Retrieving personality traits: slightly sassy, loves French bread", "Checking conversation history for similar topics...", "Found 12 previous mentions of French bread preferences", "Generating response with 73% sass level", "Processing voice modulation parameters...", "Response crafted: 'Mon dieu, Alice! How many times must I say it?'", "Executing text-to-speech conversion...", "Message delivered to #general channel", "Monitoring user reactions and engagement...", "Alice reacted with 😄 - response was well received", "Updating conversation context in vector database...", "Learning: Alice enjoys my French bread jokes", "Memory consolidation complete", ];
|
|
let thoughtIndex = 0;
|
|
const addThought = () => {
|
|
if (this.thoughtContainer) {
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
const thought = thoughts[thoughtIndex % thoughts.length];
|
|
const thoughtElement = document.createElement('div');
|
|
thoughtElement.className = 'thought-line';
|
|
thoughtElement.innerHTML = `<span class="thought-timestamp">[${timestamp}]</span> ${thought}`;
|
|
this.thoughtContainer.appendChild(thoughtElement);
|
|
this.thoughtContainer.scrollTop = this.thoughtContainer.scrollHeight;
|
|
const maxThoughts = 50;
|
|
if (this.thoughtContainer.children.length > maxThoughts) {
|
|
this.thoughtContainer.removeChild(this.thoughtContainer.firstChild);
|
|
}
|
|
thoughtIndex++;
|
|
}
|
|
};
|
|
for (let i = 0; i < 5; i++) { setTimeout(() => addThought(), i * 1000); }
|
|
setInterval(addThought, 3000 + Math.random() * 2000);
|
|
}
|
|
initMemoryExplorer() {
|
|
this.memoryPoints = this.generateMemoryData();
|
|
}
|
|
initMemoryVisualization() {
|
|
if (this.memoryVisualization) return;
|
|
const container = document.getElementById('memory-3d');
|
|
if (!container) return;
|
|
const scene = new THREE.Scene();
|
|
const camera = new THREE.PerspectiveCamera(75, container.offsetWidth / container.offsetHeight, 0.1, 1000);
|
|
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
|
|
renderer.setSize(container.offsetWidth, container.offsetHeight);
|
|
renderer.setClearColor(0x000000, 0);
|
|
container.appendChild(renderer.domElement);
|
|
const geometry = new THREE.BufferGeometry();
|
|
const positions = [], colors = [], sizes = [];
|
|
const colorPalette = { historical: new THREE.Color(0x6b7280), knowledge: new THREE.Color(0x3b82f6), textChat: new THREE.Color(0x10b981), voiceChat: new THREE.Color(0x8b5cf6), images: new THREE.Color(0xef4444), dms: new THREE.Color(0xeab308) };
|
|
if (!this.memoryPoints || this.memoryPoints.length === 0) { this.memoryPoints = this.generateMemoryData(); }
|
|
this.memoryPoints.forEach(point => {
|
|
positions.push(point.x, point.y, point.z);
|
|
const color = colorPalette[point.type] || colorPalette.knowledge;
|
|
colors.push(color.r, color.g, color.b);
|
|
sizes.push(Math.random() * 3 + 2);
|
|
});
|
|
geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
|
|
geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
|
|
geometry.setAttribute('size', new THREE.Float32BufferAttribute(sizes, 1));
|
|
const material = new THREE.ShaderMaterial({
|
|
vertexShader: `attribute float size; varying vec3 vColor; void main() { vColor = color; vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); gl_PointSize = size * (300.0 / -mvPosition.z); gl_Position = projectionMatrix * mvPosition; }`,
|
|
fragmentShader: `varying vec3 vColor; void main() { float distance = length(gl_PointCoord - vec2(0.5)); if (distance > 0.5) discard; float alpha = 1.0 - distance * 2.0; gl_FragColor = vec4(vColor, alpha * 0.8); }`,
|
|
vertexColors: true, transparent: true, blending: THREE.AdditiveBlending
|
|
});
|
|
const points = new THREE.Points(geometry, material);
|
|
scene.add(points);
|
|
camera.position.set(0, 0, 50);
|
|
const animate = () => {
|
|
if (!this.memoryVisualization || !container.contains(renderer.domElement)) return;
|
|
requestAnimationFrame(animate);
|
|
points.rotation.x += 0.001;
|
|
points.rotation.y += 0.002;
|
|
renderer.render(scene, camera);
|
|
};
|
|
animate();
|
|
let mouseDown = false, mouseX = 0, mouseY = 0;
|
|
const onMouseDown = (e) => { mouseDown = true; mouseX = e.clientX; mouseY = e.clientY; };
|
|
const onMouseMove = (e) => {
|
|
if (!mouseDown) return;
|
|
const deltaX = e.clientX - mouseX; const deltaY = e.clientY - mouseY;
|
|
points.rotation.y += deltaX * 0.005; points.rotation.x += deltaY * 0.005;
|
|
mouseX = e.clientX; mouseY = e.clientY;
|
|
};
|
|
const onMouseUp = () => { mouseDown = false; };
|
|
const onWheel = (e) => { e.preventDefault(); camera.position.z += e.deltaY * 0.1; camera.position.z = Math.max(10, Math.min(200, camera.position.z)); };
|
|
container.addEventListener('mousedown', onMouseDown);
|
|
container.addEventListener('mousemove', onMouseMove);
|
|
container.addEventListener('mouseup', onMouseUp);
|
|
container.addEventListener('wheel', onWheel);
|
|
const handleResize = () => { if (container.offsetWidth > 0 && container.offsetHeight > 0) { camera.aspect = container.offsetWidth / container.offsetHeight; camera.updateProjectionMatrix(); renderer.setSize(container.offsetWidth, container.offsetHeight); } };
|
|
window.addEventListener('resize', handleResize);
|
|
this.memoryVisualization = { scene, camera, renderer, points, container, cleanup: () => { container.removeEventListener('mousedown', onMouseDown); container.removeEventListener('mousemove', onMouseMove); container.removeEventListener('mouseup', onMouseUp); container.removeEventListener('wheel', onWheel); window.removeEventListener('resize', handleResize); if (container.contains(renderer.domElement)) { container.removeChild(renderer.domElement); } renderer.dispose(); geometry.dispose(); material.dispose(); } };
|
|
renderer.render(scene, camera);
|
|
console.log('✨ Memory visualization initialized with', this.memoryPoints.length, 'points');
|
|
}
|
|
generateMemoryData() {
|
|
const points = [];
|
|
const types = ['historical', 'knowledge', 'textChat', 'voiceChat', 'images', 'dms'];
|
|
for (let i = 0; i < 1000; i++) { points.push({ x: (Math.random() - 0.5) * 100, y: (Math.random() - 0.5) * 100, z: (Math.random() - 0.5) * 100, type: types[Math.floor(Math.random() * types.length)], content: `Memory point ${i}`, timestamp: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000) }); }
|
|
return points;
|
|
}
|
|
startSystemMonitoring() {
|
|
this.updateMetrics();
|
|
this.initializeShutdownTimer();
|
|
setInterval(() => this.updateMetrics(), 5000);
|
|
setInterval(() => this.updateShutdownTimer(), 60000);
|
|
}
|
|
updateMetrics() {
|
|
const memoryUsage = 85 + Math.random() * 15;
|
|
const vramUsage = 60 + Math.random() * 25;
|
|
const inputProcessing = 2 + Math.random() * 3;
|
|
const memoryRetrieval = 5 + Math.random() * 8;
|
|
const neuralProcessing = 7 + Math.random() * 10;
|
|
const responseGeneration = 2 + Math.random() * 4;
|
|
const totalResponseTime = inputProcessing + memoryRetrieval + neuralProcessing + responseGeneration;
|
|
const memoryBar = document.querySelector('.metric-fill:not(.vram):not(.shutdown-fill)');
|
|
const vramBar = document.querySelector('.metric-fill.vram');
|
|
if (memoryBar) { memoryBar.style.width = `${memoryUsage}%`; memoryBar.parentElement.parentElement.querySelector('.metric-value').textContent = `${Math.round(memoryUsage)}%`; const memoryDetails = memoryBar.parentElement.parentElement.querySelector('.metric-details'); if (memoryDetails) { memoryDetails.textContent = `RAM: ${(memoryUsage * 0.08).toFixed(1)}GB / 8GB`; } }
|
|
if (vramBar) { vramBar.style.width = `${vramUsage}%`; vramBar.parentElement.parentElement.querySelector('.metric-value').textContent = `${Math.round(vramUsage)}%`; const vramDetails = vramBar.parentElement.parentElement.querySelector('.metric-details'); if (vramDetails) { vramDetails.textContent = `VRAM: ${(vramUsage * 0.08).toFixed(1)}GB / 8GB`; } }
|
|
const responseMetric = document.querySelector('.response-metric .metric-value');
|
|
if (responseMetric) { responseMetric.textContent = `${Math.round(totalResponseTime)}ms`; }
|
|
const breakdownItems = document.querySelectorAll('.breakdown-item');
|
|
const values = [inputProcessing, memoryRetrieval, neuralProcessing, responseGeneration];
|
|
const colors = ['#3b82f6', '#10b981', '#8b5cf6', '#ef4444'];
|
|
breakdownItems.forEach((item, index) => {
|
|
const value = values[index]; const percentage = (value / totalResponseTime) * 100;
|
|
const valueElement = item.querySelector('.breakdown-value'); const fillElement = item.querySelector('.breakdown-fill');
|
|
if (valueElement) { valueElement.textContent = `${Math.round(value)}ms`; }
|
|
if (fillElement) { fillElement.style.width = `${percentage}%`; fillElement.style.background = colors[index]; }
|
|
});
|
|
}
|
|
initializeShutdownTimer() {
|
|
this.shutdownTime = new Date(Date.now() + (3 * 24 * 60 * 60 * 1000));
|
|
this.totalSessionTime = 7 * 24 * 60 * 60 * 1000;
|
|
this.updateShutdownTimer();
|
|
}
|
|
updateShutdownTimer() {
|
|
const now = new Date();
|
|
const timeLeft = this.shutdownTime - now;
|
|
const timerElement = document.getElementById('shutdown-timer');
|
|
const progressElement = document.querySelector('.shutdown-fill');
|
|
if (timeLeft <= 0) { if (timerElement) timerElement.textContent = 'OFFLINE'; if (progressElement) progressElement.style.width = '100%'; return; }
|
|
const days = Math.floor(timeLeft / (24 * 60 * 60 * 1000));
|
|
const hours = Math.floor((timeLeft % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
|
|
const minutes = Math.floor((timeLeft % (60 * 60 * 1000)) / (60 * 1000));
|
|
let displayText = '';
|
|
if (days > 0) { displayText = `${days}d ${hours}h`; } else if (hours > 0) { displayText = `${hours}h ${minutes}m`; } else { displayText = `${minutes}m`; }
|
|
if (timerElement) { timerElement.textContent = displayText; }
|
|
const sessionElapsed = this.totalSessionTime - timeLeft;
|
|
const progressPercent = (sessionElapsed / this.totalSessionTime) * 100;
|
|
if (progressElement) { progressElement.style.width = `${Math.max(0, Math.min(100, progressPercent))}%`; }
|
|
const shutdownDetails = document.querySelector('.shutdown-details');
|
|
if (shutdownDetails) { const options = { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }; shutdownDetails.textContent = `Session ends: ${this.shutdownTime.toLocaleDateString('en-US', options)}`; }
|
|
}
|
|
loadAnalytics() { console.log('Loading analytics data...'); this.generateActivityHeatmap(); this.animateAnalyticsCharts(); }
|
|
loadArchives() { console.log('Loading archives data...'); this.setupArchiveBrowser(); }
|
|
generateActivityHeatmap() {
|
|
const heatmapContainer = document.getElementById('activity-heatmap');
|
|
if (!heatmapContainer) return;
|
|
heatmapContainer.innerHTML = '';
|
|
for (let hour = 0; hour < 24; hour++) {
|
|
const cell = document.createElement('div');
|
|
cell.className = 'heatmap-cell';
|
|
let intensity = 0.1;
|
|
if (hour >= 8 && hour <= 10) intensity = 0.6;
|
|
if (hour >= 12 && hour <= 14) intensity = 0.4;
|
|
if (hour >= 18 && hour <= 23) intensity = 0.8;
|
|
if (hour >= 20 && hour <= 22) intensity = 1.0;
|
|
intensity += (Math.random() - 0.5) * 0.3;
|
|
intensity = Math.max(0.1, Math.min(1, intensity));
|
|
cell.style.backgroundColor = `rgba(229, 62, 62, ${intensity})`;
|
|
cell.title = `${hour}:00 - Activity level: ${Math.round(intensity * 100)}%`;
|
|
heatmapContainer.appendChild(cell);
|
|
}
|
|
}
|
|
animateAnalyticsCharts() {
|
|
setTimeout(() => {
|
|
const bars = document.querySelectorAll('.bar-fill, .lang-fill');
|
|
bars.forEach((bar, index) => {
|
|
setTimeout(() => {
|
|
const targetWidth = bar.style.width;
|
|
bar.style.width = '0%';
|
|
setTimeout(() => { bar.style.width = targetWidth; }, 100);
|
|
}, index * 200);
|
|
});
|
|
}, 300);
|
|
}
|
|
setupArchiveBrowser() {
|
|
const archiveItems = document.querySelectorAll('.archive-item');
|
|
const archiveDisplays = document.querySelectorAll('.archive-display');
|
|
const placeholder = document.querySelector('.archive-placeholder');
|
|
archiveItems.forEach(item => {
|
|
item.addEventListener('click', () => {
|
|
archiveItems.forEach(i => i.classList.remove('active'));
|
|
item.classList.add('active');
|
|
if (placeholder) placeholder.style.display = 'none';
|
|
archiveDisplays.forEach(display => display.classList.add('hidden'));
|
|
const archiveId = item.getAttribute('data-archive');
|
|
const targetDisplay = document.getElementById(`archive-${archiveId}`);
|
|
if (targetDisplay) { targetDisplay.classList.remove('hidden'); }
|
|
});
|
|
});
|
|
this.setupVoicePlayer();
|
|
}
|
|
setupVoicePlayer() {
|
|
const playBtn = document.querySelector('.play-btn');
|
|
const progressFill = document.querySelector('.progress-fill');
|
|
const timeDisplay = document.querySelector('.time-display');
|
|
if (playBtn) {
|
|
let isPlaying = false;
|
|
let progress = 0.23;
|
|
playBtn.addEventListener('click', () => {
|
|
isPlaying = !isPlaying;
|
|
playBtn.textContent = isPlaying ? '⏸️' : '▶️';
|
|
if (isPlaying) {
|
|
const interval = setInterval(() => {
|
|
if (!isPlaying) { clearInterval(interval); return; }
|
|
progress += 0.002;
|
|
if (progress >= 1) { progress = 1; isPlaying = false; playBtn.textContent = '▶️'; clearInterval(interval); }
|
|
if (progressFill) { progressFill.style.width = `${progress * 100}%`; }
|
|
if (timeDisplay) { const currentMinutes = Math.floor(progress * 84.55); const currentSeconds = Math.floor((progress * 84.55 * 60) % 60); timeDisplay.textContent = `${currentMinutes}:${currentSeconds.toString().padStart(2, '0')} / 1:24:33`; }
|
|
}, 100);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
loadProfile() { console.log('Loading profile data...'); }
|
|
setupEventHandlers() {
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Tab') {
|
|
e.preventDefault();
|
|
const navItems = document.querySelectorAll('.nav-item');
|
|
const currentIndex = Array.from(navItems).findIndex(item => item.classList.contains('active'));
|
|
const nextIndex = (currentIndex + 1) % navItems.length;
|
|
navItems[nextIndex].click();
|
|
}
|
|
});
|
|
}
|
|
triggerNeuralActivity(type = 'general') {
|
|
const activityTypes = { input: ['reading', 'processing'], memory: ['fetching', 'remembering'], output: ['writing', 'speaking'], general: ['reading', 'fetching', 'reasoning', 'writing'] };
|
|
const activities = activityTypes[type] || activityTypes.general;
|
|
window.synapseSystem?.simulateActivity(activities);
|
|
}
|
|
}
|
|
document.addEventListener('DOMContentLoaded', () => { window.tetoDashboard = new TetoDashboard(); });
|
|
</script>
|
|
</body>
|
|
</html>
|