838 lines
48 KiB
HTML
838 lines
48 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">
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<!-- Synapse Canvas Background -->
|
|
<canvas id="synapse-canvas"></canvas>
|
|
|
|
<!-- Neural Grid Background -->
|
|
<div class="neural-grid"></div>
|
|
|
|
<div class="dashboard-container">
|
|
<!-- Header -->
|
|
<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>
|
|
|
|
<!-- Navigation -->
|
|
<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 Content -->
|
|
<main class="main-content">
|
|
<!-- Overview Tab -->
|
|
<div id="tab-overview" class="tab-content active">
|
|
<div class="content-grid">
|
|
<!-- Bot Status Panel -->
|
|
<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>
|
|
|
|
<!-- Live Thoughts Panel -->
|
|
<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>
|
|
|
|
<!-- Recent Actions Panel -->
|
|
<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>
|
|
|
|
<!-- Real-time Metrics -->
|
|
<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>
|
|
|
|
<!-- Memory Explorer Tab -->
|
|
<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>
|
|
|
|
<!-- Other tabs will be similar in structure but I'll keep this response focused -->
|
|
<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>
|
|
|
|
<!-- Voice Archive Content -->
|
|
<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>
|
|
|
|
<!-- Text Archive Content -->
|
|
<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">
|
|
<!-- Teto's Opinion Panel -->
|
|
<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>
|
|
|
|
<!-- Key Memories Panel -->
|
|
<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>
|
|
|
|
<!-- Conversation Archive -->
|
|
<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>
|
|
|
|
<!-- Data Control Panel -->
|
|
<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>
|
|
|
|
<!-- Interests & Insights -->
|
|
<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>
|
|
|
|
<!-- Scripts -->
|
|
<script src="dashboard.js"></script>
|
|
<script src="synapse.js"></script>
|
|
</body>
|
|
</html>
|