Hugging Face's logo

Spaces:
AUXteam
/
UserSyncUI
Sleeping

App Files Community
UserSyncUI / stitch_dashboard.html
AUXteam's picture
AUXteam
Upload folder using huggingface_hub
c1d0c23 verified
raw
history blame contribute delete
19.7 kB
 <!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Tiny Factory Simulation Dashboard</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#135bec",
"background-light": "#f6f6f8",
"background-dark": "#101622",
},
fontFamily: {
"display": ["Space Grotesk"]
},
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
},
},
}
</script>
<style>
body { font-family: 'Space Grotesk', sans-serif; }
.mesh-gradient {
background: radial-gradient(circle at 50% 50%, rgba(19, 91, 236, 0.1) 0%, transparent 70%);
}
.node-pulse {
box-shadow: 0 0 0 0 rgba(19, 91, 236, 0.4);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(19, 91, 236, 0.4); }
70% { box-shadow: 0 0 0 10px rgba(19, 91, 236, 0); }
100% { box-shadow: 0 0 0 0 rgba(19, 91, 236, 0); }
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 min-h-screen flex flex-col overflow-hidden">
<!-- Top Navigation Bar -->
<header class="flex items-center justify-between border-b border-primary/20 bg-background-light dark:bg-background-dark px-6 py-3 shrink-0">
<div class="flex items-center gap-8">
<div class="flex items-center gap-3">
<div class="size-8 bg-primary rounded-lg flex items-center justify-center text-white">
<span class="material-symbols-outlined">factory</span>
</div>
<h1 class="text-xl font-bold tracking-tight text-primary dark:text-white">Tiny Factory</h1>
</div>
<nav class="hidden md:flex items-center gap-6">
<a class="text-primary font-medium text-sm flex items-center gap-1 border-b-2 border-primary pb-1" href="#">
<span class="material-symbols-outlined text-lg">dashboard</span> Dashboard
</a>
<a class="text-slate-500 hover:text-primary transition-colors font-medium text-sm flex items-center gap-1" href="#">
<span class="material-symbols-outlined text-lg">group</span> Personas
</a>
<a class="text-slate-500 hover:text-primary transition-colors font-medium text-sm flex items-center gap-1" href="#">
<span class="material-symbols-outlined text-lg">analytics</span> Analytics
</a>
</nav>
</div>
<div class="flex items-center gap-4">
<div class="flex items-center gap-2 bg-primary/10 px-3 py-1 rounded-full border border-primary/20">
<span class="size-2 bg-green-500 rounded-full"></span>
<span class="text-xs font-mono text-primary font-bold">SIMULATION ACTIVE: V2.4</span>
</div>
<button class="bg-primary hover:bg-primary/90 text-white px-5 py-2 rounded-lg font-bold text-sm transition-all flex items-center gap-2">
<span class="material-symbols-outlined text-sm">play_arrow</span> Run Simulation
</button>
<div class="w-10 h-10 rounded-full border-2 border-primary/30 p-0.5">
<img class="w-full h-full rounded-full bg-primary/20" data-alt="User profile avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAkVVuGBti2Jd5-RKL_R_tCdwsZ0ON-ZhcOhDwzwSulcDeFou5yp_2ey46Vc1V7gNfIsVozUhBFwJYAwDbajL5kbIa_sonSUHfuNZ2fAzwAYIwrOccRMjqtZKJ4VflJinHHmq5gxMuC9dU5AyoXEiTXlbhVRsAHOBF93OVai9oh8Rkw7skIgMnH_USmIkahOnVlESWhJ3f7AQsY7CcMdI7ejo8sOmakJHEupdW2wT4C_d0qzld2ZPXiWQvVCy507NIsIitSUqJX22M"/>
</div>
</div>
</header>
<!-- Main Dashboard Area -->
<main class="flex-1 flex overflow-hidden">
<!-- Left Panel: Content Input -->
<aside class="w-80 border-r border-primary/10 flex flex-col bg-background-light/50 dark:bg-slate-900/30 overflow-y-auto">
<div class="p-4 space-y-6">
<div>
<h2 class="text-sm font-bold uppercase tracking-wider text-primary mb-4 flex items-center gap-2">
<span class="material-symbols-outlined text-base">edit_note</span> Content Feed
</h2>
<div class="space-y-4">
<!-- Blog Input -->
<div class="space-y-2">
<label class="text-xs font-bold text-slate-500 uppercase">Blog Post</label>
<textarea class="w-full h-32 bg-background-light dark:bg-background-dark border border-primary/20 rounded-lg p-3 text-sm focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all resize-none" placeholder="Draft long-form insights..."></textarea>
</div>
<!-- LinkedIn Input -->
<div class="space-y-2">
<label class="text-xs font-bold text-slate-500 uppercase">LinkedIn Article</label>
<textarea class="w-full h-24 bg-background-light dark:bg-background-dark border border-primary/20 rounded-lg p-3 text-sm focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all resize-none" placeholder="Professional networking updates..."></textarea>
</div>
<!-- Tweet Input -->
<div class="space-y-2">
<label class="text-xs font-bold text-slate-500 uppercase">Tweet / X Thread</label>
<div class="relative">
<textarea class="w-full h-20 bg-background-light dark:bg-background-dark border border-primary/20 rounded-lg p-3 text-sm focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all resize-none" placeholder="Short form punchy content..."></textarea>
<span class="absolute bottom-2 right-2 text-[10px] text-slate-500">0 / 280</span>
</div>
</div>
</div>
</div>
<div class="pt-4 border-t border-primary/10">
<button class="w-full py-3 bg-primary/10 hover:bg-primary/20 text-primary rounded-lg font-bold text-sm transition-all border border-primary/20">
Inject To Network
</button>
</div>
</div>
</aside>
<!-- Center Area: Mesh Network View -->
<section class="flex-1 relative overflow-hidden bg-background-light dark:bg-[#0c111b] mesh-gradient">
<div class="absolute top-4 left-4 z-10">
<div class="bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-md p-3 rounded-xl border border-primary/20 shadow-xl">
<p class="text-xs font-bold text-primary flex items-center gap-2 mb-1">
<span class="material-symbols-outlined text-xs">hub</span> LIVE NETWORK
</p>
<p class="text-lg font-bold">142 Active Nodes</p>
</div>
</div>
<!-- SVG Simulation Placeholder -->
<div class="absolute inset-0 flex items-center justify-center pointer-events-none">
<svg class="w-full h-full opacity-30 dark:opacity-40" viewbox="0 0 800 600">
<!-- Connections -->
<line stroke="#135bec" stroke-width="1" x1="150" x2="400" y1="150" y2="300"></line>
<line stroke="#135bec" stroke-width="1" x1="400" x2="650" y1="300" y2="150"></line>
<line stroke="#135bec" stroke-width="1" x1="400" x2="400" y1="300" y2="500"></line>
<line stroke="#135bec" stroke-dasharray="4" stroke-width="0.5" x1="150" x2="650" y1="150" y2="150"></line>
</svg>
</div>
<!-- Personas as Nodes -->
<div class="absolute top-1/4 left-1/4 group cursor-pointer">
<div class="size-12 bg-primary rounded-full border-4 border-background-dark node-pulse flex items-center justify-center overflow-hidden">
<img class="w-full h-full" data-alt="Persona Sarah node" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAvQkFffNtbkRbVrP_IQmsinnVFgSGDhRHhatss0CKWLJfb0QaoEemwsUgd3GxADHacjVIuNtO9W7nJKIIreae2G9ivvZ4LVS2SisoFeBeUobglr9YveDX9ZhAJ_C7JxW0lUHxd-ZHoFWD0IRBYaMOj-tsD_KTNYy1PsIAPp6mFOEs2ZL9GVN_ivoFYNKWzlODR5VXpGZF2mdeWqdkI9pWUko4NDfC_unfQNHgDlZqglawIOmOZ9-SdNq7wIS8DROkNS7RPPTvsHNU"/>
</div>
<div class="absolute top-14 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity bg-background-dark border border-primary/30 p-3 rounded-lg w-48 shadow-2xl z-20">
<p class="font-bold text-xs text-primary mb-1">Sarah Chen</p>
<p class="text-[10px] leading-snug">Tech journalist specializing in AI ethics and digital sociology.</p>
</div>
</div>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 group cursor-pointer">
<div class="size-16 bg-primary/80 rounded-full border-4 border-background-dark node-pulse flex items-center justify-center overflow-hidden scale-110">
<img class="w-full h-full" data-alt="Persona Mark node" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAZ0b_swUOvtRSHgElZPfJTnFAOX7vUOon00KLvt-LRrZH3EMaAa4nGbR-iwA64kl9wBdmBR76VpE0wj_a3zYXF0beGPbxa_eizM4VTuMkey2TplZsqWUgtHIEHGpEoHvllUsj0qvtgfuDGCqYYvOXKM22eAvE-W79BtMUB79NNY70k-nFOj8yQQFve92FKEzoGzpsEMioF9W1YBIRa0hq2qcRitdCcTr8Yk2oSYQXu7dbvOUKreMwBuf6fF0aNgjS3AyUnH9zQOQo"/>
</div>
<div class="absolute top-20 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity bg-background-dark border border-primary/30 p-3 rounded-lg w-48 shadow-2xl z-20">
<p class="font-bold text-xs text-primary mb-1">Marcus Thorne</p>
<p class="text-[10px] leading-snug">Venture capitalist looking for the next 'Mesh' breakthrough.</p>
</div>
</div>
<div class="absolute top-1/4 right-1/4 group cursor-pointer">
<div class="size-12 bg-slate-700 rounded-full border-4 border-background-dark flex items-center justify-center overflow-hidden">
<img class="w-full h-full" data-alt="Persona Elena node" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA-lCPF_HUx9YHjROEc7g413oDE-cxCPguqB44qS6ZR9JXXlCsCuPnhVglxZH23QQUGONxJojYERAvCEqjoyMpKaLn9EsKhHdUMh4gOmn488QSIcSQmvfAMh8z8gRhFxkRtfGjitwlxBVfrIFfuOVo-A6k4Ao-EuJwadzsCLZSGa7HtTfhcQgseusZ0G9rakf3qE2w1RmPS2liyE0S00gWOIPTksKVXLInY5vTh9dXrbbl87yztEUug11zW5C9Q6T0exMqpeDOx5A4"/>
</div>
<div class="absolute top-14 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity bg-background-dark border border-primary/30 p-3 rounded-lg w-48 shadow-2xl z-20">
<p class="font-bold text-xs text-primary mb-1">Elena Rodriguez</p>
<p class="text-[10px] leading-snug">Grassroots community organizer with a skeptical eye on tech.</p>
</div>
</div>
<!-- View Controls -->
<div class="absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-2 bg-background-light/50 dark:bg-background-dark/50 backdrop-blur-md p-1.5 rounded-full border border-primary/20">
<button class="p-2 hover:bg-primary/20 rounded-full transition-colors"><span class="material-symbols-outlined text-base">zoom_in</span></button>
<button class="p-2 hover:bg-primary/20 rounded-full transition-colors"><span class="material-symbols-outlined text-base">zoom_out</span></button>
<div class="w-px h-4 bg-primary/20 mx-1"></div>
<button class="p-2 hover:bg-primary/20 rounded-full transition-colors"><span class="material-symbols-outlined text-base">center_focus_weak</span></button>
<button class="p-2 bg-primary text-white rounded-full transition-colors"><span class="material-symbols-outlined text-base">drag_pan</span></button>
</div>
</section>
<!-- Right Panel: Simulation Options -->
<aside class="w-80 border-l border-primary/10 flex flex-col bg-background-light/50 dark:bg-slate-900/30">
<div class="flex border-b border-primary/10">
<button class="flex-1 py-3 text-xs font-bold text-primary border-b-2 border-primary">NETWORK</button>
<button class="flex-1 py-3 text-xs font-bold text-slate-500 hover:text-primary transition-colors">PERSONAS</button>
<button class="flex-1 py-3 text-xs font-bold text-slate-500 hover:text-primary transition-colors">METRICS</button>
</div>
<div class="p-5 space-y-8 overflow-y-auto">
<div class="space-y-4">
<h3 class="text-xs font-bold text-slate-500 uppercase tracking-widest">Configuration</h3>
<div class="space-y-2">
<label class="text-xs font-medium">Network Architecture</label>
<select class="w-full bg-background-light dark:bg-background-dark border border-primary/20 rounded-lg py-2 px-3 text-sm focus:ring-primary focus:border-primary">
<option>Small-World Mesh</option>
<option>Scale-Free Network</option>
<option>Hierarchical Cluster</option>
<option>Random Distribution</option>
</select>
</div>
<div class="space-y-4">
<div class="flex justify-between items-center">
<label class="text-xs font-medium">Persona Count</label>
<span class="text-xs font-mono bg-primary/20 text-primary px-2 py-0.5 rounded">142</span>
</div>
<input class="w-full h-1.5 bg-primary/20 rounded-lg appearance-none cursor-pointer accent-primary" max="500" min="10" type="range" value="142"/>
</div>
<div class="space-y-4">
<div class="flex justify-between items-center">
<label class="text-xs font-medium">Simulation Speed</label>
<span class="text-xs font-mono bg-primary/20 text-primary px-2 py-0.5 rounded">2.4x</span>
</div>
<input class="w-full h-1.5 bg-primary/20 rounded-lg appearance-none cursor-pointer accent-primary" max="5.0" min="0.5" step="0.1" type="range" value="2.4"/>
</div>
</div>
<div class="space-y-4">
<h3 class="text-xs font-bold text-slate-500 uppercase tracking-widest">Interaction Rules</h3>
<div class="space-y-3">
<label class="flex items-center gap-3 cursor-pointer group">
<input checked="" class="rounded border-primary/30 text-primary focus:ring-primary bg-transparent" type="checkbox"/>
<span class="text-sm group-hover:text-primary transition-colors">Allow Echo Chambers</span>
</label>
<label class="flex items-center gap-3 cursor-pointer group">
<input class="rounded border-primary/30 text-primary focus:ring-primary bg-transparent" type="checkbox"/>
<span class="text-sm group-hover:text-primary transition-colors">Simulate Content Viral Decay</span>
</label>
<label class="flex items-center gap-3 cursor-pointer group">
<input checked="" class="rounded border-primary/30 text-primary focus:ring-primary bg-transparent" type="checkbox"/>
<span class="text-sm group-hover:text-primary transition-colors">Cross-Platform Propagation</span>
</label>
</div>
</div>
<div class="pt-2">
<div class="p-4 bg-primary/5 rounded-xl border border-primary/10">
<p class="text-[10px] font-bold text-slate-500 mb-2 uppercase tracking-tighter">System Health</p>
<div class="flex items-center gap-2 mb-2">
<div class="flex-1 h-1 bg-primary/20 rounded-full overflow-hidden">
<div class="w-3/4 h-full bg-primary"></div>
</div>
<span class="text-[10px] font-mono">75% Load</span>
</div>
<p class="text-[10px] text-slate-500 leading-tight">Processing 4.2k interactions per second in current mesh configuration.</p>
</div>
</div>
</div>
</aside>
</main>
<!-- Bottom Panel: Analysis Output -->
<footer class="h-64 border-t border-primary/20 bg-background-light dark:bg-background-dark flex flex-col shrink-0">
<div class="px-6 py-3 border-b border-primary/10 flex items-center justify-between">
<h2 class="text-sm font-bold flex items-center gap-2">
<span class="material-symbols-outlined text-primary text-lg">data_table</span> Real-Time Reaction Log
</h2>
<div class="flex items-center gap-4">
<div class="flex items-center gap-2 text-xs">
<span class="material-symbols-outlined text-xs text-green-500">fiber_manual_record</span>
<span class="text-slate-500 font-medium">Positive</span>
</div>
<div class="flex items-center gap-2 text-xs">
<span class="material-symbols-outlined text-xs text-red-500">fiber_manual_record</span>
<span class="text-slate-500 font-medium">Negative</span>
</div>
<button class="text-xs font-bold text-primary hover:underline">Export CSV</button>
</div>
</div>
<div class="flex-1 overflow-y-auto">
<table class="w-full text-left border-collapse">
<thead class="sticky top-0 bg-background-light dark:bg-background-dark shadow-sm z-10">
<tr class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">
<th class="px-6 py-3 border-b border-primary/10">Persona Name</th>
<th class="px-6 py-3 border-b border-primary/10">Reaction</th>
<th class="px-6 py-3 border-b border-primary/10">Analysis</th>
<th class="px-6 py-3 border-b border-primary/10">Direct Implications</th>
</tr>
</thead>
<tbody class="text-sm divide-y divide-primary/5">
<tr class="hover:bg-primary/5 transition-colors group">
<td class="px-6 py-3">
<div class="flex items-center gap-3">
<img class="size-6 rounded-full bg-primary/10" data-alt="Sarah thumbnail" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCND8eDTF8hecwkGehMFvV6iWSQiCrvPO08qR5hiC5GwtYmAzz8DHiinLDo2oUhm7dqx5xNkbY7Qn8grAEORRUdb6B0FSMa1eLZo1A0m-xWvYo4fdysgSwmNgwSeZ5bZ_6NPTtwVsemgm2rf2XhXa6amQ7SKnd5LaZFo3CEmHt17v0AlyrxnYZ7rHrWUYjsCJlkBt4nDbla78JeeFNP3jrYO705BcSSRKtm8RHfQ8aTSmh5yFg92ZhG981pFas2m0__BdFJWj153MU"/>
<span class="font-bold">Sarah Chen</span>
</div>
</td>
<td class="px-6 py-3">
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[10px] font-bold bg-green-500/10 text-green-500 border border-green-500/20">
<span class="material-symbols-outlined text-[10px]">thumb_up</span> OPTIMISTIC
</span>
</td>
<td class="px-6 py-3 text-slate-400">Values the decentralized approach. Sees it as a step toward digital sovereignty.</td>
<td class="px-6 py-3 font-medium text-primary">Likely to retweet and amplify to journalist network.</td>
</tr>
<tr class="hover:bg-primary/5 transition-colors group">
<td class="px-6 py-3">
<div class="flex items-center gap-3">
<img class="size-6 rounded-full bg-primary/10" data-alt="Mark thumbnail" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAmErxj-NYbwhk3Nz1bGn6KgQAgOOPpHyk4vyVluyVaYYtK5ocKbprxdf2uw-c086hExEC57__ZC6j1_fR4YGrD9Rj4aoh1xVNg5cs3r-L9rlz3HpNoaynvhdD8YB_ntTZKhec0Ff1BHMkEiT3Bs5QE6Rs8hIptCMM3aHOnaKUGct7u1XWVu6rNOaPMb81drRNKZBAb8SCDvV75ArGxurCjr-MNGqoS4jmkL6Y5Jkk00ltb6O9UkbCL1-mib2tl39zkaz2ORnBZTck"/>
<span class="font-bold">Marcus Thorne</span>
</div>
</td>
<td class="px-6 py-3">
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[10px] font-bold bg-primary/10 text-primary border border-primary/20">
<span class="material-symbols-outlined text-[10px]">trending_up</span> STRATEGIC
</span>
</td>
<td class="px-6 py-3 text-slate-400">Comparing the model with previous Web3 failures. Looking for monetization vectors.</td>
<td class="px-6 py-3 font-medium text-primary">Will request private briefing / more technical whitepaper.</td>
</tr>
<tr class="hover:bg-primary/5 transition-colors group">
<td class="px-6 py-3">
<div class="flex items-center gap-3">
<img class="size-6 rounded-full bg-primary/10" data-alt="Elena thumbnail" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDgzLD7cYx_1syr6voWEAUApAYE9B3-t2HhzUgCHy7PALLuoV7q15E5Pf8jUXa_F8MAj9W24dudb7KEsyZJuUH8H1cO4p3uEoK2wHcNUAso8a-DDzA5xePofoYk53dAj_JuRpdtTU6NxtTr_sbPh8zbxV1CIPqmwVQ752TBhWlglQ-hh_T1vp25xvlgOgabw_B2equ6OM7nja-Fq8QdW6SZflYSi8tTgEgxZVosXs3aiOpADs_43-puToww3K6nC4Lm-c9w63055zw"/>
<span class="font-bold">Elena Rodriguez</span>
</div>
</td>
<td class="px-6 py-3">
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[10px] font-bold bg-red-500/10 text-red-500 border border-red-500/20">
<span class="material-symbols-outlined text-[10px]">warning</span> SKEPTICAL
</span>
</td>
<td class="px-6 py-3 text-slate-400">Concerned about accessibility for non-technical users in low-income brackets.</td>
<td class="px-6 py-3 font-medium text-primary">May draft a critical counter-opinion on ethics forum.</td>
</tr>
</tbody>
</table>
</div>
</footer>
</body></html>