Archive before the Linux swap: tee designs, Stitch mockups, outfit graphics + review tool changes
Never committed until now (2026-10-14, before wiping the Windows box). Also ignore the Animations/Model junctions (git sees them as files), Python caches and .lnk shortcuts. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01PoEEHvqA9Pih5QKFWPEPw1
No files matched your search
@@ -38,3 +38,9 @@
|
||||
# Outfit tooling caches
|
||||
/tools/outfits/.preview_shaders/
|
||||
/tools/outfits/__pycache__/
|
||||
|
||||
# git sees the junctions as files, so the /dir/ patterns above miss them
|
||||
/Animations
|
||||
/Model
|
||||
__pycache__/
|
||||
*.lnk
|
||||
@@ -0,0 +1,251 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" name="viewport"/><meta content="mobile_tab" name="shell-type"/><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" rel="stylesheet"/><link href="https://fonts.googleapis.com" rel="preconnect"/><link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/><link href="https://fonts.googleapis.com/css2?family=Epilogue:wght@700;800&family=Literata:ital,wght@0,400;1,400&family=Nunito+Sans:wght@400;500;600&family=Rubik:wght@600;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&display=swap" rel="stylesheet"/><style>@layer base{html,body{width:100vw;margin:0;padding:0;background-color:#00132e;color:#d6e3ff;}body{overscroll-behavior:none;}.pb-safe{padding-bottom:env(safe-area-inset-bottom,0px);}.pt-safe{padding-top:env(safe-area-inset-top,0px);}main>:first-child{margin-top:0!important;}main>:last-child{margin-bottom:0!important;}}::-webkit-scrollbar{display:none;}</style><script src="https://cdn.tailwindcss.com"></script><script id="tailwind-config">tailwind.config = { darkMode: "class", theme: { extend: { colors: { "tertiary-fixed": "#ffdbd0", "on-error-container": "#ffdad6", "on-tertiary-fixed-variant": "#7e2c10", "on-secondary-container": "#9cbe97", "outline": "#a7898d", "surface-container-low": "#001b3d", "primary-container": "#f7577c", "on-tertiary-container": "#531300", "inverse-on-surface": "#003062", "primary": "#ffb2bd", "error-container": "#93000a", "on-primary-fixed": "#400013", "on-secondary-fixed-variant": "#304e2f", "surface-container": "#001f44", "secondary-container": "#304e2f", "primary-fixed": "#ffd9dd", "surface": "#00132e", "tertiary-fixed-dim": "#ffb59e", "background": "#00132e", "on-primary": "#670024", "on-tertiary-fixed": "#3a0a00", "inverse-primary": "#b3224c", "surface-bright": "#003972", "secondary-fixed-dim": "#add0a7", "surface-container-highest": "#00346a", "on-error": "#690005", "on-tertiary": "#5e1700", "on-secondary-fixed": "#042107", "on-surface-variant": "#e0bec2", "inverse-surface": "#d6e3ff", "on-surface": "#d6e3ff", "on-primary-container": "#5a001f", "secondary": "#add0a7", "secondary-fixed": "#c8ecc2", "tertiary": "#ffb59e", "error": "#ffb4ab", "surface-container-lowest": "#000e25", "primary-fixed-dim": "#ffb2bd", "on-background": "#d6e3ff", "on-primary-fixed-variant": "#900036", "surface-variant": "#00346a", "surface-container-high": "#002957", "surface-dim": "#00132e", "on-secondary": "#1a371a", "surface-tint": "#ffb2bd", "outline-variant": "#594044", "tertiary-container": "#dd7351" }, borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" }, spacing: { "space-xl": "2.25rem", "gutter": "1rem", "space-sm": "0.5rem", "space-xs": "0.25rem", "margin-md": "1.5rem", "margin": "1rem", "gutter-lg": "1.5rem", "space-lg": "1.5rem", "space-md": "1rem", "margin-lg": "2.5rem" }, fontFamily: { "label-lg": ["Rubik"], "display-lg": ["Epilogue"], "display-lg-mobile": ["Epilogue"], "label-md": ["Rubik"], "label-sm": ["Rubik"], "body-sm": ["Nunito Sans"], "body-lg": ["Nunito Sans"], "headline-md": ["Epilogue"], "diary-entry": ["Literata"], "body-md": ["Nunito Sans"], "headline-lg": ["Epilogue"] }, fontSize: { "label-lg": ["14px", { lineHeight: "20px", letterSpacing: "0.02em", fontWeight: "600" }], "display-lg": ["36px", { lineHeight: "44px", letterSpacing: "-0.02em", fontWeight: "800" }], "display-lg-mobile": ["28px", { lineHeight: "36px", letterSpacing: "-0.01em", fontWeight: "800" }], "label-md": ["12px", { lineHeight: "16px", letterSpacing: "0.04em", fontWeight: "600" }], "label-sm": ["10px", { lineHeight: "14px", letterSpacing: "0.06em", fontWeight: "700" }], "body-sm": ["13px", { lineHeight: "18px", fontWeight: "400" }], "body-lg": ["17px", { lineHeight: "26px", fontWeight: "500" }], "headline-md": ["20px", { lineHeight: "28px", fontWeight: "700" }], "diary-entry": ["16px", { lineHeight: "28px", letterSpacing: "0.01em", fontWeight: "400" }], "body-md": ["15px", { lineHeight: "22px", fontWeight: "400" }], "headline-lg": ["26px", { lineHeight: "34px", fontWeight: "700" }] } } } }</script></head><body class="bg-surface font-body-md text-body-md text-on-surface flex flex-col min-h-screen"><header class="fixed top-0 w-full z-50 pt-safe bg-surface/90 backdrop-blur-xl shadow-[0_1px_8px_rgba(0,0,0,0.04)]"><div class="h-16 px-gutter flex items-center justify-between gap-space-sm"><div class="flex items-center gap-space-sm"><span class="font-label-sm text-label-sm text-secondary-fixed bg-surface-container-high px-space-sm py-space-xs rounded-full flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-secondary inline-block animate-pulse"></span><span class="tracking-wide">01:24 AM</span></span><div class="flex items-center gap-1.5 bg-surface-container-low px-space-sm py-space-xs rounded-full"><span class="w-1.5 h-1.5 rounded-full bg-secondary"></span><span class="font-label-sm text-label-sm text-on-surface-variant truncate max-w-[120px]">Felt · humming quietly</span></div></div><div class="flex items-center gap-space-xs"><button aria-label="Quiet Mode" class="w-11 h-11 flex items-center justify-center rounded-full text-on-surface-variant hover:text-on-surface transition-colors"><span class="material-symbols-outlined text-[20px]">bedtime</span></button><div class="flex items-center pl-space-xs"><img alt="Profile" class="w-8 h-8 rounded-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCMLpSQKLine truncated
|
||||
<!-- Header Banner: Desk Lamp Status Bar -->
|
||||
<div class="relative w-full bg-surface-container-high rounded-xl p-space-md shadow-md overflow-hidden">
|
||||
<!-- Ambient Lamp Glow Effect -->
|
||||
<div class="absolute -top-12 -right-12 w-32 h-32 rounded-full bg-primary-container/20 blur-2xl pointer-events-none"></div>
|
||||
<div class="absolute -bottom-8 left-1/3 w-28 h-28 rounded-full bg-secondary/10 blur-xl pointer-events-none"></div>
|
||||
<div class="relative flex items-center justify-between gap-space-sm">
|
||||
<div class="flex items-center gap-space-sm min-w-0">
|
||||
<!-- Retro Desk Warning Lamp Icon Assembly -->
|
||||
<div class="relative flex-shrink-0 w-11 h-11 rounded-lg bg-surface-container-lowest flex items-center justify-center shadow-inner">
|
||||
<span class="material-symbols-outlined text-[26px] text-primary animate-pulse" style="font-variation-settings: 'FILL' 1;">warning</span>
|
||||
<span class="absolute -top-0.5 -right-0.5 flex h-2.5 w-2.5">
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
|
||||
<span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-primary-container"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="min-w-0 flex flex-col">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<h1 class="font-headline-md text-headline-md text-on-surface tracking-tight truncate">Desk Lamp Monitor</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 mt-0.5">
|
||||
<span class="font-label-sm text-label-sm text-primary font-bold">1 Critical Alert</span>
|
||||
<span class="text-on-surface-variant font-label-sm text-label-sm">·</span>
|
||||
<span class="font-label-sm text-label-sm text-secondary truncate">2 Resolved Today</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Quick Mute / Triage Toggle Button -->
|
||||
<button aria-label="Alert beacon active" class="flex-shrink-0 h-9 px-space-sm rounded-full bg-surface-container flex items-center gap-1 text-on-surface-variant hover:text-on-surface active:scale-95 transition-transform" id="audio-beacon-btn">
|
||||
<span class="material-symbols-outlined text-[18px] text-primary">graphic_eq</span>
|
||||
<span class="font-label-sm text-label-sm">Active</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Filter Chips Row -->
|
||||
<div class="flex items-center gap-space-xs overflow-x-auto no-scrollbar py-0.5">
|
||||
<button class="flex items-center gap-1.5 px-space-md py-1.5 rounded-full bg-primary-container text-on-primary-container font-label-md text-label-md shadow-sm flex-shrink-0 active:scale-95 transition-transform">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-primary-fixed inline-block"></span>
|
||||
<span>Active (1)</span>
|
||||
</button>
|
||||
<button class="flex items-center gap-1.5 px-space-md py-1.5 rounded-full bg-surface-container text-on-surface-variant hover:text-on-surface font-label-md text-label-md flex-shrink-0 active:scale-95 transition-transform">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-secondary inline-block"></span>
|
||||
<span>Resolved (2)</span>
|
||||
</button>
|
||||
<button class="flex items-center gap-1.5 px-space-md py-1.5 rounded-full bg-surface-container text-on-surface-variant hover:text-on-surface font-label-md text-label-md flex-shrink-0 active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined text-[16px]">speed</span>
|
||||
<span>System Health</span>
|
||||
</button>
|
||||
<button aria-label="Filter settings" class="flex items-center gap-1 px-space-sm py-1.5 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md flex-shrink-0">
|
||||
<span class="material-symbols-outlined text-[16px]">tune</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- ACTIVE ALERT CARD (Raspberry SEV-1 prominence, tactile offset layer) -->
|
||||
<div class="relative w-full rounded-xl bg-surface-container-high shadow-xl overflow-hidden" id="sev1-card">
|
||||
<!-- Top Warning Lamp Raspberry Strip Accent -->
|
||||
<div class="h-1.5 w-full bg-primary-container flex">
|
||||
<div class="h-full w-1/3 bg-primary animate-pulse"></div>
|
||||
<div class="h-full w-2/3 bg-primary-container"></div>
|
||||
</div>
|
||||
<!-- Paper Note Overlay Pin Accents (Tactile Skeuomorphic Ephemera) -->
|
||||
<div class="p-space-md flex flex-col space-y-space-sm">
|
||||
<!-- Severity & Host Meta Header -->
|
||||
<div class="flex items-start justify-between gap-space-xs">
|
||||
<div class="flex flex-wrap items-center gap-1.5">
|
||||
<span class="px-2 py-0.5 rounded font-label-sm text-label-sm font-bold bg-primary-container text-on-primary-container uppercase tracking-wider flex items-center gap-1 shadow-sm">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-surface animate-ping"></span>
|
||||
CRITICAL · SEV-1
|
||||
</span>
|
||||
<span class="px-2 py-0.5 rounded font-label-sm text-label-sm bg-surface-container-lowest text-tertiary">
|
||||
92°C GPU
|
||||
</span>
|
||||
</div>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant whitespace-nowrap">12m ago</span>
|
||||
</div>
|
||||
<!-- Host machine info -->
|
||||
<div class="flex items-center gap-1 text-on-surface-variant font-label-sm text-label-sm">
|
||||
<span class="material-symbols-outlined text-[15px]">dns</span>
|
||||
<span>Host:</span>
|
||||
<code class="px-1.5 py-0.5 rounded bg-surface-container-lowest text-secondary-fixed font-mono text-[11px]">desktop-rig-01</code>
|
||||
</div>
|
||||
<!-- Issue Headline -->
|
||||
<div class="space-y-1 pt-0.5">
|
||||
<h2 class="font-headline-md text-headline-md text-on-surface font-bold leading-tight">
|
||||
VRAM Spike & Thermal Throttling detected (92°C)
|
||||
</h2>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant">
|
||||
Process <span class="font-mono text-tertiary bg-surface-container-lowest px-1 rounded">python3.11 (model_worker)</span> consuming 98% GPU memory. Fan curve capped at 60% due to silent profile.
|
||||
</p>
|
||||
</div>
|
||||
<!-- Inline Telemetry Metric Spark bar -->
|
||||
<div class="w-full bg-surface-container-lowest rounded-lg p-space-sm space-y-1.5">
|
||||
<div class="flex justify-between font-label-sm text-label-sm">
|
||||
<span class="text-on-surface-variant">VRAM Allocation (23.5 / 24.0 GB)</span>
|
||||
<span class="text-primary font-bold">98%</span>
|
||||
</div>
|
||||
<div class="w-full h-2 rounded-full bg-surface-container-high overflow-hidden flex">
|
||||
<div class="h-full bg-primary-container rounded-full" style="width: 98%;"></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-[11px] font-label-sm text-on-surface-variant pt-0.5">
|
||||
<span class="flex items-center gap-1 text-primary">
|
||||
<span class="material-symbols-outlined text-[13px]">thermostat</span> Core: 92.4°C
|
||||
</span>
|
||||
<span class="text-on-surface-variant">Fan: 1450 RPM (Throttled)</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Action Row: Primary, Outline, and Quick Log link -->
|
||||
<div class="pt-space-xs flex flex-col space-y-space-xs">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-space-xs">
|
||||
<!-- Primary Raspberry Button: Ask Felt to Triage -->
|
||||
<button class="w-full h-11 px-space-md rounded-full bg-primary-container text-on-primary-container font-label-lg text-label-lg flex items-center justify-center gap-2 shadow-md active:translate-y-0.5 transition-all" id="triage-trigger-btn">
|
||||
<span class="material-symbols-outlined text-[20px]">smart_toy</span>
|
||||
<span>Ask Felt to triage</span>
|
||||
</button>
|
||||
<!-- Secondary Outline Button: Mark as Handled -->
|
||||
<button class="w-full h-11 px-space-md rounded-full bg-secondary-container text-on-secondary-container font-label-lg text-label-lg flex items-center justify-center gap-2 active:translate-y-0.5 transition-all" id="mark-handled-btn">
|
||||
<span class="material-symbols-outlined text-[19px]">check_circle</span>
|
||||
<span>Mark as Handled</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex justify-center pt-1">
|
||||
<button class="inline-flex items-center gap-1 text-tertiary-fixed font-label-md text-label-md py-1 px-2 rounded hover:text-on-surface transition-colors">
|
||||
<span class="material-symbols-outlined text-[16px]">terminal</span>
|
||||
<span>View process log & stacktrace</span>
|
||||
<span class="material-symbols-outlined text-[14px]">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- SECTION: Resolved Incidents (Tactile Log Notebook style) -->
|
||||
<div class="flex items-center justify-between pt-space-xs px-1">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="material-symbols-outlined text-[18px] text-secondary">task_alt</span>
|
||||
<span class="font-label-lg text-label-lg text-on-surface">Resolved Incidents</span>
|
||||
</div>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant">Log persistence: 24h</span>
|
||||
</div>
|
||||
<!-- Resolved Card 1: SSH Login -->
|
||||
<div class="relative w-full rounded-xl bg-surface-container-low p-space-md shadow-sm space-y-space-xs transition-opacity hover:opacity-95">
|
||||
<div class="flex items-start justify-between gap-space-xs">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<span class="p-1 rounded-full bg-secondary-container text-on-secondary-container flex items-center justify-center flex-shrink-0">
|
||||
<span class="material-symbols-outlined text-[16px]">verified</span>
|
||||
</span>
|
||||
<span class="px-2 py-0.5 rounded font-label-sm text-label-sm font-bold bg-secondary-container text-on-secondary-container truncate">
|
||||
RESOLVED · SSH login from new IP
|
||||
</span>
|
||||
</div>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant whitespace-nowrap">23:15</span>
|
||||
</div>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant pl-7">
|
||||
IP <span class="font-mono text-secondary-fixed bg-surface-container px-1 py-0.5 rounded">192.168.1.145</span> authenticated via Ed25519 key (your laptop). Auto-verified.
|
||||
</p>
|
||||
<div class="flex items-center justify-between pl-7 pt-1">
|
||||
<span class="font-label-sm text-label-sm text-secondary flex items-center gap-1">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-secondary inline-block"></span>
|
||||
Handled by Felt at 23:15
|
||||
</span>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant">Host: edge-gw-lan</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Resolved Card 2: Docker Disk Cache -->
|
||||
<div class="relative w-full rounded-xl bg-surface-container-low p-space-md shadow-sm space-y-space-xs transition-opacity hover:opacity-95">
|
||||
<div class="flex items-start justify-between gap-space-xs">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<span class="p-1 rounded-full bg-secondary-container text-on-secondary-container flex items-center justify-center flex-shrink-0">
|
||||
<span class="material-symbols-outlined text-[16px]">cleaning_services</span>
|
||||
</span>
|
||||
<span class="px-2 py-0.5 rounded font-label-sm text-label-sm font-bold bg-secondary-container text-on-secondary-container truncate">
|
||||
RESOLVED · Disk cache at 88%
|
||||
</span>
|
||||
</div>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant whitespace-nowrap">21:40</span>
|
||||
</div>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant pl-7">
|
||||
Temporary docker dangling images purged (<span class="text-secondary font-semibold">+14.2 GB freed</span>). Root partition space restored safely.
|
||||
</p>
|
||||
<div class="flex items-center justify-between pl-7 pt-1">
|
||||
<span class="font-label-sm text-label-sm text-secondary flex items-center gap-1">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-secondary inline-block"></span>
|
||||
Handled automatically by routine daemon
|
||||
</span>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant">Host: desktop-rig-01</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Felt Companion Dialogue & Note Capsule -->
|
||||
<div class="relative w-full pt-space-xs">
|
||||
<div class="relative bg-surface-container rounded-xl p-space-md shadow-md flex items-start gap-space-sm">
|
||||
<!-- Mini Avatar Sprite Badge with Status Indicator -->
|
||||
<div class="relative flex-shrink-0">
|
||||
<div class="w-12 h-12 rounded-full overflow-hidden shadow-inner bg-surface-container-highest">
|
||||
<img alt="Felt avatar" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCMLpSQKvk57jJnzztSQzdhLc7lle6brRen1imWbt2P1jH7HBm68pSo-J1YHxjEgqbcGLvD91O70Kx_9lUM75Nz7g2ieI28k9PsCclPzECoV8rHsN7zDcuXBdAX2VI546NHVmSiST0ZitR-RbniBJ6HDVzO4MboHvKwCmTOlRX1hkFasMxqaJBV6U3OtW1NDEm71-ZBIW6WlwORGbEvfWj9jW5GVY1WYruvj6dhCK3Y7sD9THUhOndt"/>
|
||||
</div>
|
||||
<span class="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 rounded-full bg-primary flex items-center justify-center shadow-sm">
|
||||
<span class="material-symbols-outlined text-[10px] text-on-primary">local_fire_department</span>
|
||||
</span>
|
||||
</div>
|
||||
<!-- Speech Bubble Box -->
|
||||
<div class="flex-1 min-w-0 flex flex-col space-y-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="font-label-lg text-label-lg text-secondary font-bold">Felt</span>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant">· monitoring GPU</span>
|
||||
</div>
|
||||
<span class="font-label-sm text-label-sm px-1.5 py-0.5 rounded-full bg-surface-container-high text-tertiary">Desk Ghost</span>
|
||||
</div>
|
||||
<p class="font-body-md text-body-md text-on-surface leading-relaxed">
|
||||
“I'll keep the warning lamp glowing until that GPU temp drops below 75°C. Don't melt your rig!”
|
||||
</p>
|
||||
<div class="pt-1 flex items-center gap-2">
|
||||
<button class="px-2.5 py-1 rounded-full bg-surface-container-high text-secondary hover:text-on-surface font-label-sm text-label-sm active:scale-95 transition-transform flex items-center gap-1" id="felt-quick-fan-btn">
|
||||
<span class="material-symbols-outlined text-[13px]">mode_fan</span> Override fan profile to 100%
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// Simple interactive feedback micro-moments
|
||||
const triageBtn = document.getElementById('triage-trigger-btn');
|
||||
const handledBtn = document.getElementById('mark-handled-btn');
|
||||
const fanBtn = document.getElementById('felt-quick-fan-btn');
|
||||
const sev1Card = document.getElementById('sev1-card');
|
||||
|
||||
if (triageBtn) {
|
||||
triageBtn.addEventListener('click', () => {
|
||||
triageBtn.innerHTML = '<span class="material-symbols-outlined text-[20px] animate-spin">refresh</span><span>Connecting to Felt...</span>';
|
||||
setTimeout(() => {
|
||||
triageBtn.innerHTML = '<span class="material-symbols-outlined text-[20px]">smart_toy</span><span>Felt Triage Active</span>';
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
|
||||
if (handledBtn && sev1Card) {
|
||||
handledBtn.addEventListener('click', () => {
|
||||
handledBtn.innerHTML = '<span class="material-symbols-outlined text-[19px]">done_all</span><span>Dismissed</span>';
|
||||
sev1Card.classList.add('opacity-75');
|
||||
});
|
||||
}
|
||||
|
||||
if (fanBtn) {
|
||||
fanBtn.addEventListener('click', () => {
|
||||
fanBtn.innerHTML = '<span class="material-symbols-outlined text-[13px]">check</span> Fan set to Turbo';
|
||||
fanBtn.classList.add('bg-secondary-container', 'text-on-secondary-container');
|
||||
});
|
||||
}
|
||||
</script></main><nav class="fixed bottom-0 w-full z-50 pb-safe bg-surface-container-lowest/90 backdrop-blur-xl shadow-[0_-2px_12px_rgba(0,0,0,0.12)]" data-active-classes="text-primary"><div class="flex justify-around items-center h-20 px-gutter relative"><a class="flex flex-col items-center justify-center min-w-[52px] min-h-[44px] gap-space-xs text-on-surface-variant hover:text-on-surface transition-colors relative" data-path="chat" href="#"><span class="material-symbols-outlined text-[22px]">forum</span><span class="font-label-sm text-label-sm">Chat</span></a><a class="flex flex-col items-center justify-center min-w-[52px] min-h-[44px] gap-space-xs text-on-surface-variant hover:text-on-surface transition-colors relative" data-path="corkboard-feed" href="#"><div class="relative"><span class="material-symbols-outlined text-[22px]">dashboard</span><span class="absolute -top-1 -right-2.5 bg-primary-container text-on-primary-container font-label-sm text-[9px] font-bold px-1.5 py-0.5 rounded-full min-w-[16px] text-center leading-none">7</span></div><span class="font-label-sm text-label-sm">Feed</span></a><div class="relative -top-3 flex flex-col items-center"><a aria-label="Felt Room" class="w-14 h-14 rounded-full bg-surface-container-high flex items-center justify-center text-secondary shadow-[0_4px_12px_rgba(0,0,0,0.2)] hover:bg-surface-bright active:scale-95 transition-all" data-path="room-home" href="#"><span class="material-symbols-outlined text-[28px]">night_shelter</span></a><span class="font-label-sm text-label-sm text-secondary mt-1">Room</span></div><a aria-current="page" class="flex flex-col items-center justify-center min-w-[52px] min-h-[44px] gap-space-xs transition-colors relative text-primary" data-path="desk-lamp-alerts" href="#"><div class="relative"><span class="material-symbols-outlined text-[22px]">light</span><span class="absolute -top-1 -right-2 bg-primary-container text-on-primary-container font-label-sm text-[9px] font-bold px-1 py-0.5 rounded-full min-w-[14px] text-center leading-none">1</span></div><span class="font-label-sm text-label-sm">Alerts</span></a><a class="flex flex-col items-center justify-center min-w-[52px] min-h-[44px] gap-space-xs text-on-surface-variant hover:text-on-surface transition-colors relative" data-path="diary-scrapbook" href="#"><span class="material-symbols-outlined text-[22px]">auto_stories</span><span class="font-label-sm text-label-sm">Diary</span></a></div></nav></body></html>
|
||||
|
After Width: | Height: | Size: 284 KiB |
|
After Width: | Height: | Size: 1.1 MiB |
@@ -0,0 +1,222 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" name="viewport"/><meta content="mobile_tab" name="shell-type"/><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" rel="stylesheet"/><link href="https://fonts.googleapis.com" rel="preconnect"/><link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/><link href="https://fonts.googleapis.com/css2?family=Epilogue:wght@700;800&family=Literata:ital,wght@0,400;1,400&family=Nunito+Sans:wght@400;500;600&family=Rubik:wght@600;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&display=swap" rel="stylesheet"/><style>@layer base{html,body{width:100vw;margin:0;padding:0;background-color:#00132e;color:#d6e3ff;}body{overscroll-behavior:none;}.pb-safe{padding-bottom:env(safe-area-inset-bottom,0px);}.pt-safe{padding-top:env(safe-area-inset-top,0px);}main>:first-child{margin-top:0!important;}main>:last-child{margin-bottom:0!important;}}::-webkit-scrollbar{display:none;}</style><script src="https://cdn.tailwindcss.com"></script><script id="tailwind-config">tailwind.config = { darkMode: "class", theme: { extend: { colors: { "tertiary-fixed": "#ffdbd0", "on-error-container": "#ffdad6", "on-tertiary-fixed-variant": "#7e2c10", "on-secondary-container": "#9cbe97", "outline": "#a7898d", "surface-container-low": "#001b3d", "primary-container": "#f7577c", "on-tertiary-container": "#531300", "inverse-on-surface": "#003062", "primary": "#ffb2bd", "error-container": "#93000a", "on-primary-fixed": "#400013", "on-secondary-fixed-variant": "#304e2f", "surface-container": "#001f44", "secondary-container": "#304e2f", "primary-fixed": "#ffd9dd", "surface": "#00132e", "tertiary-fixed-dim": "#ffb59e", "background": "#00132e", "on-primary": "#670024", "on-tertiary-fixed": "#3a0a00", "inverse-primary": "#b3224c", "surface-bright": "#003972", "secondary-fixed-dim": "#add0a7", "surface-container-highest": "#00346a", "on-error": "#690005", "on-tertiary": "#5e1700", "on-secondary-fixed": "#042107", "on-surface-variant": "#e0bec2", "inverse-surface": "#d6e3ff", "on-surface": "#d6e3ff", "on-primary-container": "#5a001f", "secondary": "#add0a7", "secondary-fixed": "#c8ecc2", "tertiary": "#ffb59e", "error": "#ffb4ab", "surface-container-lowest": "#000e25", "primary-fixed-dim": "#ffb2bd", "on-background": "#d6e3ff", "on-primary-fixed-variant": "#900036", "surface-variant": "#00346a", "surface-container-high": "#002957", "surface-dim": "#00132e", "on-secondary": "#1a371a", "surface-tint": "#ffb2bd", "outline-variant": "#594044", "tertiary-container": "#dd7351" }, borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" }, spacing: { "space-xl": "2.25rem", "gutter": "1rem", "space-sm": "0.5rem", "space-xs": "0.25rem", "margin-md": "1.5rem", "margin": "1rem", "gutter-lg": "1.5rem", "space-lg": "1.5rem", "space-md": "1rem", "margin-lg": "2.5rem" }, fontFamily: { "label-lg": ["Rubik"], "display-lg": ["Epilogue"], "display-lg-mobile": ["Epilogue"], "label-md": ["Rubik"], "label-sm": ["Rubik"], "body-sm": ["Nunito Sans"], "body-lg": ["Nunito Sans"], "headline-md": ["Epilogue"], "diary-entry": ["Literata"], "body-md": ["Nunito Sans"], "headline-lg": ["Epilogue"] }, fontSize: { "label-lg": ["14px", { lineHeight: "20px", letterSpacing: "0.02em", fontWeight: "600" }], "display-lg": ["36px", { lineHeight: "44px", letterSpacing: "-0.02em", fontWeight: "800" }], "display-lg-mobile": ["28px", { lineHeight: "36px", letterSpacing: "-0.01em", fontWeight: "800" }], "label-md": ["12px", { lineHeight: "16px", letterSpacing: "0.04em", fontWeight: "600" }], "label-sm": ["10px", { lineHeight: "14px", letterSpacing: "0.06em", fontWeight: "700" }], "body-sm": ["13px", { lineHeight: "18px", fontWeight: "400" }], "body-lg": ["17px", { lineHeight: "26px", fontWeight: "500" }], "headline-md": ["20px", { lineHeight: "28px", fontWeight: "700" }], "diary-entry": ["16px", { lineHeight: "28px", letterSpacing: "0.01em", fontWeight: "400" }], "body-md": ["15px", { lineHeight: "22px", fontWeight: "400" }], "headline-lg": ["26px", { lineHeight: "34px", fontWeight: "700" }] } } } }</script></head><body class="bg-surface font-body-md text-body-md text-on-surface flex flex-col min-h-screen"><header class="fixed top-0 w-full z-50 pt-safe bg-surface/90 backdrop-blur-xl shadow-[0_1px_8px_rgba(0,0,0,0.04)]"><div class="h-16 px-gutter flex items-center justify-between gap-space-sm"><div class="flex items-center gap-space-sm"><span class="font-label-sm text-label-sm text-secondary-fixed bg-surface-container-high px-space-sm py-space-xs rounded-full flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-secondary inline-block animate-pulse"></span><span class="tracking-wide">01:24 AM</span></span><div class="flex items-center gap-1.5 bg-surface-container-low px-space-sm py-space-xs rounded-full"><span class="w-1.5 h-1.5 rounded-full bg-secondary"></span><span class="font-label-sm text-label-sm text-on-surface-variant truncate max-w-[120px]">Felt · humming quietly</span></div></div><div class="flex items-center gap-space-xs"><button aria-label="Quiet Mode" class="w-11 h-11 flex items-center justify-center rounded-full text-on-surface-variant hover:text-on-surface transition-colors"><span class="material-symbols-outlined text-[20px]">bedtime</span></button><div class="flex items-center pl-space-xs"><img alt="Profile" class="w-8 h-8 rounded-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCMLpSQKLine truncated
|
||||
<!-- Felt Chat Status Bar (In-Call / Active Persona Header) -->
|
||||
<div class="relative bg-surface-container-high rounded-xl p-space-sm shadow-md mb-space-md">
|
||||
<div class="flex items-center justify-between gap-space-sm">
|
||||
<div class="flex items-center gap-space-sm min-w-0">
|
||||
<div class="relative flex-shrink-0">
|
||||
<img alt="Felt" class="w-12 h-12 rounded-full object-cover shadow-sm" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCMLpSQKvk57jJnzztSQzdhLc7lle6brRen1imWbt2P1jH7HBm68pSo-J1YHxjEgqbcGLvD91O70Kx_9lUM75Nz7g2ieI28k9PsCclPzECoV8rHsN7zDcuXBdAX2VI546NHVmSiST0ZitR-RbniBJ6HDVzO4MboHvKwCmTOlRX1hkFasMxqaJBV6U3OtW1NDEm71-ZBIW6WlwORGbEvfWj9jW5GVY1WYruvj6dhCK3Y7sD9THUhOndt"/>
|
||||
<span class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-secondary"></span>
|
||||
</div>
|
||||
<div class="flex flex-col min-w-0">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="font-headline-md text-headline-md text-on-surface tracking-tight truncate">Felt</span>
|
||||
<span class="bg-secondary-container text-on-secondary-container font-label-sm text-label-sm px-1.5 py-0.5 rounded-full flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[10px]" style="font-variation-settings: 'FILL' 1;">favorite</span>
|
||||
Lv. 9
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 text-on-surface-variant font-body-sm text-body-sm truncate">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-secondary inline-block"></span>
|
||||
<span>Awake · sipping virtual tea</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Quick Toggles -->
|
||||
<div class="flex items-center gap-space-xs flex-shrink-0">
|
||||
<button aria-label="Mute Audio" class="w-9 h-9 rounded-full bg-surface-container-low text-on-surface-variant hover:text-on-surface active:scale-95 flex items-center justify-center transition-all" id="speakerBtn">
|
||||
<span class="material-symbols-outlined text-[19px]" id="speakerIcon">volume_up</span>
|
||||
</button>
|
||||
<button aria-label="Dock Call" class="w-9 h-9 rounded-full bg-primary-container text-on-primary-container active:scale-95 flex items-center justify-center transition-all shadow-sm">
|
||||
<span class="material-symbols-outlined text-[18px]">call_end</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Messages Timeline Flow -->
|
||||
<div class="flex flex-col gap-space-lg w-full">
|
||||
<!-- Timeline Stamp Divider -->
|
||||
<div class="flex items-center justify-center gap-space-sm">
|
||||
<div class="h-[1px] bg-surface-container-high flex-grow"></div>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant bg-surface-container-low px-space-sm py-space-xs rounded-full">
|
||||
Today · 1:35 AM
|
||||
</span>
|
||||
<div class="h-[1px] bg-surface-container-high flex-grow"></div>
|
||||
</div>
|
||||
<!-- Message 1: Felt Tease -->
|
||||
<div class="flex items-start gap-space-sm max-w-[88%] self-start">
|
||||
<img alt="Felt avatar" class="w-8 h-8 rounded-full object-cover flex-shrink-0 mt-1 shadow-sm" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCMLpSQKvk57jJnzztSQzdhLc7lle6brRen1imWbt2P1jH7HBm68pSo-J1YHxjEgqbcGLvD91O70Kx_9lUM75Nz7g2ieI28k9PsCclPzECoV8rHsN7zDcuXBdAX2VI546NHVmSiST0ZitR-RbniBJ6HDVzO4MboHvKwCmTOlRX1hkFasMxqaJBV6U3OtW1NDEm71-ZBIW6WlwORGbEvfWj9jW5GVY1WYruvj6dhCK3Y7sD9THUhOndt"/>
|
||||
<div class="flex flex-col gap-1 min-w-0">
|
||||
<div class="flex items-center gap-space-xs">
|
||||
<span class="font-label-sm text-label-sm text-secondary font-bold">Felt</span>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant">1:35 AM</span>
|
||||
</div>
|
||||
<div class="relative bg-surface-container-high text-on-surface p-space-md rounded-xl rounded-tl-none shadow-md">
|
||||
<p class="font-body-md text-body-md leading-relaxed">
|
||||
Look who finally decided to open the phone app! Did you actually miss me or did your code crash again? 😏
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Message 2: User Reply -->
|
||||
<div class="flex flex-col items-end gap-1 max-w-[85%] self-end">
|
||||
<div class="flex items-center gap-space-xs">
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant">1:36 AM</span>
|
||||
<span class="font-label-sm text-label-sm text-secondary-fixed">You</span>
|
||||
</div>
|
||||
<div class="bg-secondary-container text-on-secondary-container p-space-md rounded-xl rounded-tr-none shadow-md">
|
||||
<p class="font-body-md text-body-md leading-relaxed text-on-surface">
|
||||
Neither. Just taking a breather before committing.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Message 3: Felt Observation + Teasing Reaction Sticker -->
|
||||
<div class="flex items-start gap-space-sm max-w-[88%] self-start">
|
||||
<img alt="Felt avatar" class="w-8 h-8 rounded-full object-cover flex-shrink-0 mt-1 shadow-sm" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCMLpSQKvk57jJnzztSQzdhLc7lle6brRen1imWbt2P1jH7HBm68pSo-J1YHxjEgqbcGLvD91O70Kx_9lUM75Nz7g2ieI28k9PsCclPzECoV8rHsN7zDcuXBdAX2VI546NHVmSiST0ZitR-RbniBJ6HDVzO4MboHvKwCmTOlRX1hkFasMxqaJBV6U3OtW1NDEm71-ZBIW6WlwORGbEvfWj9jW5GVY1WYruvj6dhCK3Y7sD9THUhOndt"/>
|
||||
<div class="flex flex-col gap-space-sm min-w-0">
|
||||
<div class="flex items-center gap-space-xs">
|
||||
<span class="font-label-sm text-label-sm text-secondary font-bold">Felt</span>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant">1:38 AM</span>
|
||||
</div>
|
||||
<div class="relative bg-surface-container-high text-on-surface p-space-md rounded-xl rounded-tl-none shadow-md">
|
||||
<p class="font-body-md text-body-md leading-relaxed">
|
||||
Sure, sure. Well, I noticed your Spotify playlist has been looping the same lofi track 14 times. Should I shuffle something better, or do you need maximum focus mode?
|
||||
</p>
|
||||
</div>
|
||||
<!-- Teasing Smug Reaction Sticker (Die-cut Ephemera Style) -->
|
||||
<div class="self-start -rotate-2 transform transition-transform hover:rotate-0">
|
||||
<div class="bg-surface-container-low px-space-md py-space-xs rounded-full flex items-center gap-2 shadow-sm">
|
||||
<span class="material-symbols-outlined text-primary text-[18px]" style="font-variation-settings: 'FILL' 1;">mood_bad</span>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant italic">"Caught red-handed" sticker applied</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Message 4: Felt Recommendation with Tactile Scrapbook Card -->
|
||||
<div class="flex items-start gap-space-sm max-w-[92%] self-start">
|
||||
<img alt="Felt avatar" class="w-8 h-8 rounded-full object-cover flex-shrink-0 mt-1 shadow-sm" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCMLpSQKvk57jJnzztSQzdhLc7lle6brRen1imWbt2P1jH7HBm68pSo-J1YHxjEgqbcGLvD91O70Kx_9lUM75Nz7g2ieI28k9PsCclPzECoV8rHsN7zDcuXBdAX2VI546NHVmSiST0ZitR-RbniBJ6HDVzO4MboHvKwCmTOlRX1hkFasMxqaJBV6U3OtW1NDEm71-ZBIW6WlwORGbEvfWj9jW5GVY1WYruvj6dhCK3Y7sD9THUhOndt"/>
|
||||
<div class="flex flex-col gap-1.5 w-full">
|
||||
<div class="flex items-center gap-space-xs">
|
||||
<span class="font-label-sm text-label-sm text-secondary font-bold">Felt</span>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant">1:39 AM</span>
|
||||
</div>
|
||||
<!-- Scrapbook Tape Attachment Card -->
|
||||
<div class="relative bg-surface-container text-on-surface p-space-md rounded-xl shadow-md overflow-hidden">
|
||||
<!-- Salmon Washi Tape Strip at Top -->
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-20 h-3 bg-tertiary-container/80 rounded-b shadow-sm -mt-0.5"></div>
|
||||
<div class="pt-2 flex flex-col gap-space-sm">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-label-sm text-label-sm text-tertiary-fixed tracking-wide uppercase flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[14px]">headphones</span>
|
||||
Late Night Companion Pick
|
||||
</span>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant">3:42</span>
|
||||
</div>
|
||||
<!-- Mini Player Container -->
|
||||
<div class="bg-surface-container-low p-space-sm rounded-lg flex items-center justify-between gap-space-sm">
|
||||
<div class="flex items-center gap-space-sm min-w-0">
|
||||
<div class="w-10 h-10 rounded-lg bg-surface-bright flex items-center justify-center flex-shrink-0">
|
||||
<span class="material-symbols-outlined text-primary text-[22px]">album</span>
|
||||
</div>
|
||||
<div class="flex flex-col min-w-0">
|
||||
<span class="font-label-md text-label-md text-on-surface truncate">Lamp - 1998</span>
|
||||
<span class="font-body-sm text-body-sm text-on-surface-variant truncate">For You · Tokyo Shibuya Chill</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Play Snippet Trigger -->
|
||||
<button class="flex-shrink-0 px-space-sm py-1.5 rounded-full bg-primary-container text-on-primary-container active:scale-95 transition-all flex items-center gap-1 shadow-sm" id="playBtn">
|
||||
<span class="material-symbols-outlined text-[16px]" id="playIcon" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
|
||||
<span class="font-label-sm text-label-sm" id="playLabel">Play snippet</span>
|
||||
</button>
|
||||
</div>
|
||||
<p class="font-diary-entry text-diary-entry text-on-surface-variant italic">
|
||||
"It's soft enough to keep you sane, but has enough groove so you don't doze off on your keyboard again."
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Interactive Chat Input Dock -->
|
||||
<div class="mt-space-xl pt-space-sm">
|
||||
<div class="bg-surface-container-high rounded-full p-1.5 shadow-lg flex items-center gap-space-xs">
|
||||
<!-- Camera / Screenshot Attachment Button -->
|
||||
<button aria-label="Send Screenshot" class="w-11 h-11 rounded-full bg-surface-container-low text-on-surface-variant hover:text-on-surface active:scale-90 flex items-center justify-center transition-all flex-shrink-0">
|
||||
<span class="material-symbols-outlined text-[20px]">add_a_photo</span>
|
||||
</button>
|
||||
<!-- Pill Text Input Field -->
|
||||
<div class="flex-grow flex items-center min-w-0">
|
||||
<input class="w-full bg-transparent px-space-sm text-on-surface placeholder:text-on-surface-variant font-body-md text-body-md focus:outline-none" id="chatInput" placeholder="Say something to Felt..." type="text"/>
|
||||
</div>
|
||||
<!-- Emoji/Sticker Quick Action -->
|
||||
<button aria-label="Insert Sticker" class="w-10 h-10 rounded-full text-on-surface-variant hover:text-on-surface active:scale-95 flex items-center justify-center transition-all flex-shrink-0">
|
||||
<span class="material-symbols-outlined text-[20px]">mood</span>
|
||||
</button>
|
||||
<!-- Hold-to-Talk Voice Note Button with Dynamic Waveform Pulse -->
|
||||
<button aria-label="Hold to talk" class="w-11 h-11 rounded-full bg-primary-container text-on-primary-container active:scale-95 flex items-center justify-center transition-all shadow-md flex-shrink-0 relative overflow-hidden" id="voiceNoteBtn">
|
||||
<span class="material-symbols-outlined text-[20px] transition-transform" id="voiceIcon">mic</span>
|
||||
<div class="hidden absolute inset-0 bg-error-container items-center justify-center gap-0.5" id="waveFeedback">
|
||||
<span class="w-1 h-3 bg-on-error-container rounded-full animate-bounce"></span>
|
||||
<span class="w-1 h-5 bg-on-error-container rounded-full animate-bounce [animation-delay:0.15s]"></span>
|
||||
<span class="w-1 h-2 bg-on-error-container rounded-full animate-bounce [animation-delay:0.3s]"></span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Micro Subtle Input Hint -->
|
||||
<div class="flex items-center justify-between px-space-md pt-2">
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant flex items-center gap-1">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-secondary"></span> Felt responds via whisper TTS
|
||||
</span>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant">Hold mic for audio note</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// Speaker Toggle Micro-interaction
|
||||
const speakerBtn = document.getElementById('speakerBtn');
|
||||
const speakerIcon = document.getElementById('speakerIcon');
|
||||
let isMuted = false;
|
||||
speakerBtn.addEventListener('click', () => {
|
||||
isMuted = !isMuted;
|
||||
speakerIcon.textContent = isMuted ? 'volume_off' : 'volume_up';
|
||||
speakerBtn.classList.toggle('text-error', isMuted);
|
||||
});
|
||||
|
||||
// Music Snippet Play/Pause Toggle
|
||||
const playBtn = document.getElementById('playBtn');
|
||||
const playIcon = document.getElementById('playIcon');
|
||||
const playLabel = document.getElementById('playLabel');
|
||||
let isPlaying = false;
|
||||
playBtn.addEventListener('click', () => {
|
||||
isPlaying = !isPlaying;
|
||||
playIcon.textContent = isPlaying ? 'pause' : 'play_arrow';
|
||||
playLabel.textContent = isPlaying ? 'Pause' : 'Play snippet';
|
||||
playBtn.classList.toggle('bg-primary', isPlaying);
|
||||
});
|
||||
|
||||
// Hold-to-Talk Audio Waveform Feedback
|
||||
const voiceNoteBtn = document.getElementById('voiceNoteBtn');
|
||||
const waveFeedback = document.getElementById('waveFeedback');
|
||||
const voiceIcon = document.getElementById('voiceIcon');
|
||||
|
||||
const startVoice = (e) => {
|
||||
e.preventDefault();
|
||||
waveFeedback.classList.remove('hidden');
|
||||
waveFeedback.classList.add('flex');
|
||||
voiceIcon.classList.add('hidden');
|
||||
};
|
||||
|
||||
const endVoice = (e) => {
|
||||
e.preventDefault();
|
||||
waveFeedback.classList.add('hidden');
|
||||
waveFeedback.classList.remove('flex');
|
||||
voiceIcon.classList.remove('hidden');
|
||||
};
|
||||
|
||||
voiceNoteBtn.addEventListener('mousedown', startVoice);
|
||||
voiceNoteBtn.addEventListener('mouseup', endVoice);
|
||||
voiceNoteBtn.addEventListener('touchstart', startVoice);
|
||||
voiceNoteBtn.addEventListener('touchend', endVoice);
|
||||
</script></main><nav class="fixed bottom-0 w-full z-50 pb-safe bg-surface-container-lowest/90 backdrop-blur-xl shadow-[0_-2px_12px_rgba(0,0,0,0.12)]" data-active-classes="text-primary"><div class="flex justify-around items-center h-20 px-gutter relative"><a aria-current="page" class="flex flex-col items-center justify-center min-w-[52px] min-h-[44px] gap-space-xs transition-colors relative text-primary" data-path="chat" href="#"><span class="material-symbols-outlined text-[22px]">forum</span><span class="font-label-sm text-label-sm">Chat</span></a><a class="flex flex-col items-center justify-center min-w-[52px] min-h-[44px] gap-space-xs text-on-surface-variant hover:text-on-surface transition-colors relative" data-path="corkboard-feed" href="#"><div class="relative"><span class="material-symbols-outlined text-[22px]">dashboard</span><span class="absolute -top-1 -right-2.5 bg-primary-container text-on-primary-container font-label-sm text-[9px] font-bold px-1.5 py-0.5 rounded-full min-w-[16px] text-center leading-none">7</span></div><span class="font-label-sm text-label-sm">Feed</span></a><div class="relative -top-3 flex flex-col items-center"><a aria-label="Felt Room" class="w-14 h-14 rounded-full bg-surface-container-high flex items-center justify-center text-secondary shadow-[0_4px_12px_rgba(0,0,0,0.2)] hover:bg-surface-bright active:scale-95 transition-all" data-path="room-home" href="#"><span class="material-symbols-outlined text-[28px]">night_shelter</span></a><span class="font-label-sm text-label-sm text-secondary mt-1">Room</span></div><a class="flex flex-col items-center justify-center min-w-[52px] min-h-[44px] gap-space-xs text-on-surface-variant hover:text-on-surface transition-colors relative" data-path="desk-lamp-alerts" href="#"><div class="relative"><span class="material-symbols-outlined text-[22px]">light</span><span class="absolute -top-1 -right-2 bg-primary-container text-on-primary-container font-label-sm text-[9px] font-bold px-1 py-0.5 rounded-full min-w-[14px] text-center leading-none">1</span></div><span class="font-label-sm text-label-sm">Alerts</span></a><a class="flex flex-col items-center justify-center min-w-[52px] min-h-[44px] gap-space-xs text-on-surface-variant hover:text-on-surface transition-colors relative" data-path="diary-scrapbook" href="#"><span class="material-symbols-outlined text-[22px]">auto_stories</span><span class="font-label-sm text-label-sm">Diary</span></a></div></nav></body></html>
|
||||
|
After Width: | Height: | Size: 260 KiB |
@@ -0,0 +1,222 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" name="viewport"/><meta content="mobile_tab" name="shell-type"/><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" rel="stylesheet"/><link href="https://fonts.googleapis.com" rel="preconnect"/><link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/><link href="https://fonts.googleapis.com/css2?family=Epilogue:wght@700;800&family=Literata:ital,wght@0,400;1,400&family=Nunito+Sans:wght@400;500;600&family=Rubik:wght@600;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&display=swap" rel="stylesheet"/><style>@layer base{html,body{width:100vw;margin:0;padding:0;background-color:#00132e;color:#d6e3ff;}body{overscroll-behavior:none;}.pb-safe{padding-bottom:env(safe-area-inset-bottom,0px);}.pt-safe{padding-top:env(safe-area-inset-top,0px);}main>:first-child{margin-top:0!important;}main>:last-child{margin-bottom:0!important;}}::-webkit-scrollbar{display:none;}</style><script src="https://cdn.tailwindcss.com"></script><script id="tailwind-config">tailwind.config = { darkMode: "class", theme: { extend: { colors: { "tertiary-fixed": "#ffdbd0", "on-error-container": "#ffdad6", "on-tertiary-fixed-variant": "#7e2c10", "on-secondary-container": "#9cbe97", "outline": "#a7898d", "surface-container-low": "#001b3d", "primary-container": "#f7577c", "on-tertiary-container": "#531300", "inverse-on-surface": "#003062", "primary": "#ffb2bd", "error-container": "#93000a", "on-primary-fixed": "#400013", "on-secondary-fixed-variant": "#304e2f", "surface-container": "#001f44", "secondary-container": "#304e2f", "primary-fixed": "#ffd9dd", "surface": "#00132e", "tertiary-fixed-dim": "#ffb59e", "background": "#00132e", "on-primary": "#670024", "on-tertiary-fixed": "#3a0a00", "inverse-primary": "#b3224c", "surface-bright": "#003972", "secondary-fixed-dim": "#add0a7", "surface-container-highest": "#00346a", "on-error": "#690005", "on-tertiary": "#5e1700", "on-secondary-fixed": "#042107", "on-surface-variant": "#e0bec2", "inverse-surface": "#d6e3ff", "on-surface": "#d6e3ff", "on-primary-container": "#5a001f", "secondary": "#add0a7", "secondary-fixed": "#c8ecc2", "tertiary": "#ffb59e", "error": "#ffb4ab", "surface-container-lowest": "#000e25", "primary-fixed-dim": "#ffb2bd", "on-background": "#d6e3ff", "on-primary-fixed-variant": "#900036", "surface-variant": "#00346a", "surface-container-high": "#002957", "surface-dim": "#00132e", "on-secondary": "#1a371a", "surface-tint": "#ffb2bd", "outline-variant": "#594044", "tertiary-container": "#dd7351" }, borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" }, spacing: { "space-xl": "2.25rem", "gutter": "1rem", "space-sm": "0.5rem", "space-xs": "0.25rem", "margin-md": "1.5rem", "margin": "1rem", "gutter-lg": "1.5rem", "space-lg": "1.5rem", "space-md": "1rem", "margin-lg": "2.5rem" }, fontFamily: { "label-lg": ["Rubik"], "display-lg": ["Epilogue"], "display-lg-mobile": ["Epilogue"], "label-md": ["Rubik"], "label-sm": ["Rubik"], "body-sm": ["Nunito Sans"], "body-lg": ["Nunito Sans"], "headline-md": ["Epilogue"], "diary-entry": ["Literata"], "body-md": ["Nunito Sans"], "headline-lg": ["Epilogue"] }, fontSize: { "label-lg": ["14px", { lineHeight: "20px", letterSpacing: "0.02em", fontWeight: "600" }], "display-lg": ["36px", { lineHeight: "44px", letterSpacing: "-0.02em", fontWeight: "800" }], "display-lg-mobile": ["28px", { lineHeight: "36px", letterSpacing: "-0.01em", fontWeight: "800" }], "label-md": ["12px", { lineHeight: "16px", letterSpacing: "0.04em", fontWeight: "600" }], "label-sm": ["10px", { lineHeight: "14px", letterSpacing: "0.06em", fontWeight: "700" }], "body-sm": ["13px", { lineHeight: "18px", fontWeight: "400" }], "body-lg": ["17px", { lineHeight: "26px", fontWeight: "500" }], "headline-md": ["20px", { lineHeight: "28px", fontWeight: "700" }], "diary-entry": ["16px", { lineHeight: "28px", letterSpacing: "0.01em", fontWeight: "400" }], "body-md": ["15px", { lineHeight: "22px", fontWeight: "400" }], "headline-lg": ["26px", { lineHeight: "34px", fontWeight: "700" }] } } } }</script></head><body class="bg-surface font-body-md text-body-md text-on-surface flex flex-col min-h-screen"><header class="fixed top-0 w-full z-50 pt-safe bg-surface/90 backdrop-blur-xl shadow-[0_1px_8px_rgba(0,0,0,0.04)]"><div class="h-16 px-gutter flex items-center justify-between gap-space-sm"><div class="flex items-center gap-space-sm"><span class="font-label-sm text-label-sm text-secondary-fixed bg-surface-container-high px-space-sm py-space-xs rounded-full flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-secondary inline-block animate-pulse"></span><span class="tracking-wide">01:24 AM</span></span><div class="flex items-center gap-1.5 bg-surface-container-low px-space-sm py-space-xs rounded-full"><span class="w-1.5 h-1.5 rounded-full bg-secondary"></span><span class="font-label-sm text-label-sm text-on-surface-variant truncate max-w-[120px]">Felt · humming quietly</span></div></div><div class="flex items-center gap-space-xs"><button aria-label="Quiet Mode" class="w-11 h-11 flex items-center justify-center rounded-full text-on-surface-variant hover:text-on-surface transition-colors"><span class="material-symbols-outlined text-[20px]">bedtime</span></button><div class="flex items-center pl-space-xs"><img alt="Profile" class="w-8 h-8 rounded-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCMLpSQKLine truncated
|
||||
<!-- Header Context Badge & Ambient Felt Status -->
|
||||
<div class="flex items-center justify-between px-space-xs">
|
||||
<div class="flex items-center gap-space-xs">
|
||||
<span class="material-symbols-outlined text-[18px] text-tertiary">push_pin</span>
|
||||
<span class="font-headline-md text-headline-md text-on-surface">Corkboard Memo Hub</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 bg-surface-container-high px-space-sm py-0.5 rounded-full shadow-sm">
|
||||
<span class="w-2 h-2 rounded-full bg-primary-container animate-pulse"></span>
|
||||
<span class="font-label-sm text-label-sm text-primary">7 fresh scraps</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Filter Pills (Scrollable Row) -->
|
||||
<div class="flex items-center gap-space-xs overflow-x-auto pb-1 no-scrollbar -mx-gutter px-gutter">
|
||||
<button class="filter-tab active flex-shrink-0 bg-primary text-on-primary font-label-md text-label-md px-space-md py-1.5 rounded-full shadow-[0_2px_0_rgba(0,0,0,0.3)] active:translate-y-0.5 transition-all">
|
||||
All (7 unread)
|
||||
</button>
|
||||
<button class="filter-tab flex-shrink-0 bg-surface-container-high text-on-surface-variant hover:text-on-surface font-label-md text-label-md px-space-md py-1.5 rounded-full shadow-[0_2px_0_rgba(0,0,0,0.25)] active:translate-y-0.5 transition-all">
|
||||
Her Remarks
|
||||
</button>
|
||||
<button class="filter-tab flex-shrink-0 bg-surface-container-high text-on-surface-variant hover:text-on-surface font-label-md text-label-md px-space-md py-1.5 rounded-full shadow-[0_2px_0_rgba(0,0,0,0.25)] active:translate-y-0.5 transition-all">
|
||||
Email btw's
|
||||
</button>
|
||||
<button class="filter-tab flex-shrink-0 bg-surface-container-high text-on-surface-variant hover:text-on-surface font-label-md text-label-md px-space-md py-1.5 rounded-full shadow-[0_2px_0_rgba(0,0,0,0.25)] active:translate-y-0.5 transition-all">
|
||||
Game & Tech
|
||||
</button>
|
||||
</div>
|
||||
<!-- Cork Surface Background Layer Envelope -->
|
||||
<div class="relative w-full rounded-2xl p-space-md bg-surface-container-low shadow-[inset_0_2px_12px_rgba(0,0,0,0.6)] flex flex-col gap-space-lg overflow-hidden">
|
||||
<!-- Subtle Cork/Wood Grain Atmosphere Overlay -->
|
||||
<div class="absolute inset-0 opacity-[0.035] pointer-events-none bg-[radial-gradient(#d6e3ff_1px,transparent_1px)] [background-size:12px_12px]"></div>
|
||||
<!-- STICKY NOTE 1: Email btw (Lilac-white paper, Raspberry pin, slight tilt -1.2deg) -->
|
||||
<article class="relative bg-inverse-surface text-inverse-on-surface rounded-lg p-space-md shadow-[2px_5px_0_rgba(0,14,37,0.7)] transform -rotate-[1.2deg] transition-transform duration-300 hover:rotate-0 group">
|
||||
<!-- Top Metallic Raspberry Pushpin -->
|
||||
<div class="absolute -top-3 left-1/2 -translate-x-1/2 flex items-center justify-center z-20 pointer-events-none">
|
||||
<div class="w-6 h-6 rounded-full bg-primary-container shadow-[0_3px_5px_rgba(0,0,0,0.5)] flex items-center justify-center">
|
||||
<div class="w-2 h-2 rounded-full bg-primary shadow-inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Salmon Washi Tape (Right Corner) -->
|
||||
<div class="absolute -top-2.5 -right-3 w-14 h-4 bg-tertiary-container/85 backdrop-blur-[1px] rotate-12 shadow-[0_1px_2px_rgba(0,0,0,0.2)] rounded-sm pointer-events-none"></div>
|
||||
<!-- Header & Unread Pip -->
|
||||
<div class="flex items-start justify-between gap-space-sm pt-1 pb-space-xs">
|
||||
<div class="flex items-center gap-1.5 min-w-0">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-primary-container flex-shrink-0 animate-ping"></span>
|
||||
<span class="w-2 h-2 rounded-full bg-primary-container flex-shrink-0 -ml-3.5"></span>
|
||||
<h2 class="font-headline-md text-[17px] text-inverse-on-surface font-bold truncate">btw regarding that email from Alex</h2>
|
||||
</div>
|
||||
<span class="font-label-sm text-label-sm text-outline flex-shrink-0 bg-surface/10 px-1.5 py-0.5 rounded">12m ago</span>
|
||||
</div>
|
||||
<!-- Note Body with Ruled Feel -->
|
||||
<div class="mt-space-xs pt-space-xs border-t-0 bg-[linear-gradient(transparent_23px,rgba(0,48,98,0.08)_24px)] [background-size:100%_24px]">
|
||||
<p class="font-diary-entry text-diary-entry leading-relaxed text-inverse-on-surface/90">
|
||||
They asked if you're free for a sync at 10 AM tomorrow. I already drafted a reply telling them you're busy until noon, unless you wanna change it? ;)
|
||||
</p>
|
||||
</div>
|
||||
<!-- Action Chips (Tactile Micro-Buttons) -->
|
||||
<div class="flex flex-wrap items-center gap-space-xs mt-space-md pt-space-xs">
|
||||
<button class="reply-trigger inline-flex items-center gap-1.5 bg-tertiary-container text-on-tertiary-container font-label-md text-label-md px-3 py-1.5 rounded-full shadow-[1px_2px_0_rgba(83,19,0,0.4)] active:translate-y-0.5 transition-transform">
|
||||
<span class="material-symbols-outlined text-[16px]">edit_note</span>
|
||||
<span>Draft Reply</span>
|
||||
</button>
|
||||
<button class="reaction-btn inline-flex items-center gap-1 bg-surface-container/15 hover:bg-surface-container/25 text-inverse-on-surface font-label-md text-label-md px-2.5 py-1.5 rounded-full transition-colors active:scale-95">
|
||||
<span class="material-symbols-outlined text-[15px] text-primary-container">favorite</span>
|
||||
<span>Love it</span>
|
||||
</button>
|
||||
<button class="reaction-btn inline-flex items-center gap-1 bg-surface-container/15 hover:bg-surface-container/25 text-inverse-on-surface/70 font-label-md text-label-md px-2.5 py-1.5 rounded-full transition-colors active:scale-95">
|
||||
<span>meh</span>
|
||||
</button>
|
||||
<button class="reaction-btn inline-flex items-center gap-1 bg-surface-container/15 hover:bg-surface-container/25 text-inverse-on-surface/85 font-label-md text-label-md px-2.5 py-1.5 rounded-full transition-colors active:scale-95">
|
||||
<span class="material-symbols-outlined text-[15px]">expand_circle_right</span>
|
||||
<span>Tell me more</span>
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
<!-- STICKY NOTE 2: Game News (Sage Paper #e3ece1, brass pushpin, subtle tilt +1.1deg) -->
|
||||
<article class="relative bg-secondary-fixed text-on-secondary-fixed rounded-lg p-space-md shadow-[2px_5px_0_rgba(0,14,37,0.7)] transform rotate-[1.1deg] transition-transform duration-300 hover:rotate-0">
|
||||
<!-- Top Center Brass Pin -->
|
||||
<div class="absolute -top-3 left-1/3 flex items-center justify-center z-20 pointer-events-none">
|
||||
<div class="w-5 h-5 rounded-full bg-tertiary shadow-[0_2px_4px_rgba(0,0,0,0.5)] flex items-center justify-center">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-on-tertiary-fixed shadow-inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tag Indicator -->
|
||||
<div class="flex items-center justify-between gap-space-sm pt-1">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="material-symbols-outlined text-[17px] text-on-secondary-fixed-variant">sports_esports</span>
|
||||
<h2 class="font-headline-md text-[17px] text-on-secondary-fixed font-bold">Silksong copium alert</h2>
|
||||
</div>
|
||||
<span class="font-label-sm text-label-sm text-on-secondary-fixed-variant bg-black/5 px-1.5 py-0.5 rounded">1h ago</span>
|
||||
</div>
|
||||
<!-- Body Content -->
|
||||
<div class="mt-space-xs pt-space-xs">
|
||||
<p class="font-diary-entry text-diary-entry leading-relaxed text-on-secondary-fixed/90">
|
||||
Steam database updated an hour ago. Before you get all excited and stay up until 4 AM refreshing forums, breathe.
|
||||
</p>
|
||||
</div>
|
||||
<!-- Felt's Sarcastic Mini Badge Attached -->
|
||||
<div class="inline-flex items-center gap-1 mt-space-sm px-2 py-0.5 rounded bg-secondary-container/20 text-on-secondary-fixed-variant font-label-sm text-label-sm">
|
||||
<span class="material-symbols-outlined text-[13px]">coffee</span>
|
||||
<span>Hydration first, knight.</span>
|
||||
</div>
|
||||
<!-- Action Chips -->
|
||||
<div class="flex flex-wrap items-center gap-space-xs mt-space-md">
|
||||
<button class="reaction-btn inline-flex items-center gap-1 bg-on-secondary-fixed/10 hover:bg-on-secondary-fixed/20 text-on-secondary-fixed font-label-md text-label-md px-3 py-1.5 rounded-full transition-all active:scale-95">
|
||||
<span>♡ Haha</span>
|
||||
</button>
|
||||
<button class="reaction-btn inline-flex items-center gap-1 bg-on-secondary-fixed/10 hover:bg-on-secondary-fixed/20 text-on-secondary-fixed/70 font-label-md text-label-md px-3 py-1.5 rounded-full transition-all active:scale-95">
|
||||
<span>meh</span>
|
||||
</button>
|
||||
<button class="reaction-btn inline-flex items-center gap-1 bg-on-secondary-fixed/10 hover:bg-on-secondary-fixed/20 text-on-secondary-fixed font-label-md text-label-md px-3 py-1.5 rounded-full transition-all active:scale-95">
|
||||
<span class="material-symbols-outlined text-[15px]">forum</span>
|
||||
<span>Tell me more</span>
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
<!-- STICKY NOTE 3: Server Backup (Lilac-white paper pinned by Washi tape diagonal) -->
|
||||
<article class="relative bg-inverse-surface text-inverse-on-surface rounded-lg p-space-md shadow-[2px_5px_0_rgba(0,14,37,0.7)] transform -rotate-[0.6deg] transition-transform duration-300 hover:rotate-0">
|
||||
<!-- Top Center Washi Tape Strip -->
|
||||
<div class="absolute -top-3 left-1/2 -translate-x-1/2 w-20 h-5 bg-tertiary-container/80 backdrop-blur-sm -rotate-2 shadow-[0_1px_3px_rgba(0,0,0,0.25)] rounded-sm pointer-events-none flex items-center justify-center">
|
||||
<span class="w-full h-[1px] bg-tertiary-fixed/30"></span>
|
||||
</div>
|
||||
<!-- Note Header -->
|
||||
<div class="flex items-center justify-between gap-space-sm pt-2">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="material-symbols-outlined text-[17px] text-secondary-container">cloud_done</span>
|
||||
<h2 class="font-headline-md text-[17px] text-inverse-on-surface font-bold">Server backup note</h2>
|
||||
</div>
|
||||
<span class="font-label-sm text-label-sm text-outline bg-surface/10 px-1.5 py-0.5 rounded">22m ago</span>
|
||||
</div>
|
||||
<div class="mt-space-xs pt-space-xs">
|
||||
<p class="font-diary-entry text-diary-entry leading-relaxed text-inverse-on-surface/90">
|
||||
Local repo sync finished 22 mins ago while you were making tea. Clean commit, no merge conflicts. Good job, dev.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-space-xs mt-space-md">
|
||||
<button class="reaction-btn inline-flex items-center gap-1 bg-surface-container/15 hover:bg-surface-container/25 text-inverse-on-surface font-label-md text-label-md px-3 py-1.5 rounded-full transition-transform active:scale-95">
|
||||
<span>♡ Thanks</span>
|
||||
</button>
|
||||
<button class="reaction-btn inline-flex items-center gap-1 bg-surface-container/15 hover:bg-surface-container/25 text-inverse-on-surface/70 font-label-md text-label-md px-3 py-1.5 rounded-full transition-transform active:scale-95">
|
||||
<span>meh</span>
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
<!-- STICKY NOTE 4: Felt Observation (Warm pale salmon note, Brass pin top right, tilt +1.4deg) -->
|
||||
<article class="relative bg-tertiary-fixed text-on-tertiary-fixed rounded-lg p-space-md shadow-[2px_5px_0_rgba(0,14,37,0.7)] transform rotate-[1.4deg] transition-transform duration-300 hover:rotate-0">
|
||||
<!-- Brass Pushpin (Top Right) -->
|
||||
<div class="absolute -top-3 right-5 flex items-center justify-center z-20 pointer-events-none">
|
||||
<div class="w-5 h-5 rounded-full bg-primary-container shadow-[0_2px_4px_rgba(0,0,0,0.4)] flex items-center justify-center">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-primary-fixed shadow-inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Washi Tape Accent (Left Crest) -->
|
||||
<div class="absolute -top-2 left-3 w-10 h-3.5 bg-primary-container/70 -rotate-6 rounded-sm pointer-events-none"></div>
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between gap-space-sm pt-2">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="material-symbols-outlined text-[17px] text-on-tertiary-container">visibility</span>
|
||||
<h2 class="font-headline-md text-[17px] text-on-tertiary-fixed font-bold">Random Felt observation</h2>
|
||||
</div>
|
||||
<span class="font-label-sm text-label-sm text-on-tertiary-fixed-variant bg-black/5 px-1.5 py-0.5 rounded">Just now</span>
|
||||
</div>
|
||||
<!-- Body -->
|
||||
<div class="mt-space-xs pt-space-xs">
|
||||
<p class="font-diary-entry text-diary-entry leading-relaxed text-on-tertiary-fixed/90">
|
||||
You sigh whenever you open the terminal. Is your code behaving badly, or do I need to look over your shoulder?
|
||||
</p>
|
||||
</div>
|
||||
<!-- Action Chips -->
|
||||
<div class="flex flex-wrap items-center gap-space-xs mt-space-md">
|
||||
<button class="reaction-btn inline-flex items-center gap-1 bg-on-tertiary-fixed/10 hover:bg-on-tertiary-fixed/20 text-on-tertiary-fixed font-label-md text-label-md px-3 py-1.5 rounded-full transition-transform active:scale-95">
|
||||
<span>♡ Tease back</span>
|
||||
</button>
|
||||
<button class="reaction-btn inline-flex items-center gap-1 bg-on-tertiary-fixed/10 hover:bg-on-tertiary-fixed/20 text-on-tertiary-fixed/70 font-label-md text-label-md px-3 py-1.5 rounded-full transition-transform active:scale-95">
|
||||
<span>meh</span>
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
<!-- Bottom Cosy Whispering Footer on the Corkboard -->
|
||||
<div class="flex items-center justify-center gap-space-xs py-space-xs text-on-surface-variant/70">
|
||||
<span class="material-symbols-outlined text-[16px] text-tertiary">draw</span>
|
||||
<span class="font-body-sm text-body-sm">Felt is still pinning thoughts to this board...</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Interactive Script for Reactions and Tabs -->
|
||||
<script>
|
||||
// Tab switching visual state
|
||||
document.querySelectorAll('.filter-tab').forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
document.querySelectorAll('.filter-tab').forEach(t => {
|
||||
t.classList.remove('bg-primary', 'text-on-primary');
|
||||
t.classList.add('bg-surface-container-high', 'text-on-surface-variant');
|
||||
});
|
||||
tab.classList.remove('bg-surface-container-high', 'text-on-surface-variant');
|
||||
tab.classList.add('bg-primary', 'text-on-primary');
|
||||
});
|
||||
});
|
||||
|
||||
// Tactile reaction acknowledgment
|
||||
document.querySelectorAll('.reaction-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const originalText = this.innerHTML;
|
||||
this.innerHTML = '<span class="material-symbols-outlined text-[15px] text-secondary">check</span><span>Noted!</span>';
|
||||
setTimeout(() => {
|
||||
this.innerHTML = originalText;
|
||||
}, 1200);
|
||||
});
|
||||
});
|
||||
|
||||
// Draft reply trigger toast micro-interaction
|
||||
const replyTrigger = document.querySelector('.reply-trigger');
|
||||
if (replyTrigger) {
|
||||
replyTrigger.addEventListener('click', function() {
|
||||
this.classList.add('scale-95');
|
||||
setTimeout(() => this.classList.remove('scale-95'), 150);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</div></main><nav class="fixed bottom-0 w-full z-50 pb-safe bg-surface-container-lowest/90 backdrop-blur-xl shadow-[0_-2px_12px_rgba(0,0,0,0.12)]" data-active-classes="text-primary"><div class="flex justify-around items-center h-20 px-gutter relative"><a class="flex flex-col items-center justify-center min-w-[52px] min-h-[44px] gap-space-xs text-on-surface-variant hover:text-on-surface transition-colors relative" data-path="chat" href="#"><span class="material-symbols-outlined text-[22px]">forum</span><span class="font-label-sm text-label-sm">Chat</span></a><a aria-current="page" class="flex flex-col items-center justify-center min-w-[52px] min-h-[44px] gap-space-xs transition-colors relative text-primary" data-path="corkboard-feed" href="#"><div class="relative"><span class="material-symbols-outlined text-[22px]">dashboard</span><span class="absolute -top-1 -right-2.5 bg-primary-container text-on-primary-container font-label-sm text-[9px] font-bold px-1.5 py-0.5 rounded-full min-w-[16px] text-center leading-none">7</span></div><span class="font-label-sm text-label-sm">Feed</span></a><div class="relative -top-3 flex flex-col items-center"><a aria-label="Felt Room" class="w-14 h-14 rounded-full bg-surface-container-high flex items-center justify-center text-secondary shadow-[0_4px_12px_rgba(0,0,0,0.2)] hover:bg-surface-bright active:scale-95 transition-all" data-path="room-home" href="#"><span class="material-symbols-outlined text-[28px]">night_shelter</span></a><span class="font-label-sm text-label-sm text-secondary mt-1">Room</span></div><a class="flex flex-col items-center justify-center min-w-[52px] min-h-[44px] gap-space-xs text-on-surface-variant hover:text-on-surface transition-colors relative" data-path="desk-lamp-alerts" href="#"><div class="relative"><span class="material-symbols-outlined text-[22px]">light</span><span class="absolute -top-1 -right-2 bg-primary-container text-on-primary-container font-label-sm text-[9px] font-bold px-1 py-0.5 rounded-full min-w-[14px] text-center leading-none">1</span></div><span class="font-label-sm text-label-sm">Alerts</span></a><a class="flex flex-col items-center justify-center min-w-[52px] min-h-[44px] gap-space-xs text-on-surface-variant hover:text-on-surface transition-colors relative" data-path="diary-scrapbook" href="#"><span class="material-symbols-outlined text-[22px]">auto_stories</span><span class="font-label-sm text-label-sm">Diary</span></a></div></nav></body></html>
|
||||
|
After Width: | Height: | Size: 295 KiB |
@@ -0,0 +1,370 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width, initial-scale=1.0" name="viewport"/><meta content="web_dashboard" name="shell-type"/><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" rel="stylesheet"/><link href="https://fonts.googleapis.com" rel="preconnect"/><link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/><link href="https://fonts.googleapis.com/css2?family=Epilogue:wght@700;800&family=Literata:ital,wght@0,400;0,600;1,400&family=Nunito+Sans:wght@400;500;600;700&family=Rubik:wght@500;600;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&display=swap" rel="stylesheet"/><style>@layer base{html,body{margin:0;padding:0;}body{overscroll-behavior:none;}main>:first-child{margin-top:0!important;}main>:last-child{margin-bottom:0!important;}}::-webkit-scrollbar{display:none;}</style><script src="https://cdn.tailwindcss.com"></script><script id="tailwind-config">tailwind.config={darkMode:"class",theme:{extend:{"colors":{"tertiary-fixed":"#ffdbd0","on-error-container":"#ffdad6","on-tertiary-fixed-variant":"#7e2c10","on-secondary-container":"#9cbe97","outline":"#a7898d","surface-container-low":"#001b3d","primary-container":"#f7577c","on-tertiary-container":"#531300","inverse-on-surface":"#003062","primary":"#ffb2bd","error-container":"#93000a","on-primary-fixed":"#400013","on-secondary-fixed-variant":"#304e2f","surface-container":"#001f44","secondary-container":"#304e2f","primary-fixed":"#ffd9dd","surface":"#00132e","tertiary-fixed-dim":"#ffb59e","background":"#00132e","on-primary":"#670024","on-tertiary-fixed":"#3a0a00","inverse-primary":"#b3224c","surface-bright":"#003972","secondary-fixed-dim":"#add0a7","surface-container-highest":"#00346a","on-error":"#690005","on-tertiary":"#5e1700","on-secondary-fixed":"#042107","on-surface-variant":"#e0bec2","inverse-surface":"#d6e3ff","on-surface":"#d6e3ff","on-primary-container":"#5a001f","secondary":"#add0a7","secondary-fixed":"#c8ecc2","tertiary":"#ffb59e","error":"#ffb4ab","surface-container-lowest":"#000e25","primary-fixed-dim":"#ffb2bd","on-background":"#d6e3ff","on-primary-fixed-variant":"#900036","surface-variant":"#00346a","surface-container-high":"#002957","surface-dim":"#00132e","on-secondary":"#1a371a","surface-tint":"#ffb2bd","outline-variant":"#594044","tertiary-container":"#dd7351"},"borderRadius":{"DEFAULT":"0.25rem","lg":"0.5rem","xl":"0.75rem","full":"9999px"},"spacing":{"space-xl":"2.25rem","gutter":"1rem","space-sm":"0.5rem","space-xs":"0.25rem","margin-md":"1.5rem","margin":"1rem","gutter-lg":"1.5rem","space-lg":"1.5rem","space-md":"1rem","margin-lg":"2.5rem"},"fontFamily":{"label-lg":["Rubik"],"display-lg":["Epilogue"],"display-lg-mobile":["Epilogue"],"label-md":["Rubik"],"label-sm":["Rubik"],"body-sm":["Nunito Sans"],"body-lg":["Nunito Sans"],"headline-md":["Epilogue"],"diary-entry":["Literata"],"body-md":["Nunito Sans"],"headline-lg":["Epilogue"]},"fontSize":{"label-lg":["14px",{"lineHeight":"20px","letterSpacing":"0.02em","fontWeight":"600"}],"display-lg":["36px",{"lineHeight":"44px","letterSpacing":"-0.02em","fontWeight":"800"}],"display-lg-mobile":["28px",{"lineHeight":"36px","letterSpacing":"-0.01em","fontWeight":"800"}],"label-md":["12px",{"lineHeight":"16px","letterSpacing":"0.04em","fontWeight":"600"}],"label-sm":["10px",{"lineHeight":"14px","letterSpacing":"0.06em","fontWeight":"700"}],"body-sm":["13px",{"lineHeight":"18px","fontWeight":"400"}],"body-lg":["17px",{"lineHeight":"26px","fontWeight":"500"}],"headline-md":["20px",{"lineHeight":"28px","fontWeight":"700"}],"diary-entry":["16px",{"lineHeight":"28px","letterSpacing":"0.01em","fontWeight":"400"}],"body-md":["15px",{"lineHeight":"22px","fontWeight":"400"}],"headline-lg":["26px",{"lineHeight":"34px","fontWeight":"700"}]}}}}</script></head><body class="bg-surface font-body-md text-on-surface antialiased selection:bg-primary-container selection:text-on-primary-container min-h-screen"><header class="fixed top-0 left-0 right-0 h-16 z-50 bg-surface-container-lowest/90 backdrop-blur-md"><div class="h-16 w-full px-gutter-lg flex items-center justify-between"><div class="flex items-center gap-space-md"><div class="flex items-center gap-space-xs"><span class="w-3 h-3 rounded-full bg-primary-container inline-block shadow-sm"></span><span class="w-3 h-3 rounded-full bg-tertiary-container inline-block shadow-sm"></span><span class="w-3 h-3 rounded-full bg-secondary inline-block shadow-sm"></span></div><div class="h-4 w-px bg-surface-container-high mx-space-xs"></div><div class="flex items-center gap-space-xs"><span class="material-symbols-outlined text-primary text-[18px]">pets</span><span class="font-headline-md text-headline-md tracking-tight text-on-surface">Felt</span><span class="bg-surface-container-high text-secondary font-label-sm text-label-sm px-space-xs py-0.5 rounded-full">v2.4</span></div><div class="hidden md:flex items-center gap-space-xs bg-surface-container-low px-space-sm py-1 rounded-full"><span class="w-2 h-2 rounded-full bg-secondary animate-pulse"></span><span class="font-label-sm text-label-sm text-on-surface-variant">Awake & watchful</span></div></div><div class="flex items-center gap-space-md"><nav class="hidden lg:flex items-center gap-space-xs bg-surface-container-low p-1 rounded-xl" data-active-classes="bg-primary-container text-on-primary-container rounded-lg"><a aria-current="page" class="px-space-md py-1.5 font-label-md transition-colors bg-primary-container text-on-primary-container rounded-lg" Line truncated
|
||||
<div class="w-full max-w-[1240px] mx-auto my-2 rounded-xl overflow-hidden shadow-2xl bg-surface-container-lowest">
|
||||
<!-- Desktop Window Frame Titlebar -->
|
||||
<div class="h-10 bg-[#083D77] px-4 flex items-center justify-between select-none">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-3 h-3 rounded-full bg-[#DA4167] inline-block shadow-sm hover:opacity-80 cursor-pointer"></span>
|
||||
<span class="w-3 h-3 rounded-full bg-[#F78764] inline-block shadow-sm hover:opacity-80 cursor-pointer"></span>
|
||||
<span class="w-3 h-3 rounded-full bg-[#7A9B76] inline-block shadow-sm hover:opacity-80 cursor-pointer"></span>
|
||||
</div>
|
||||
<div class="h-4 w-px bg-surface-container-high mx-1"></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary text-[18px]">cruelty_free</span>
|
||||
<span class="font-headline-md text-label-md text-on-surface tracking-wide">Felt v2.4 · Desktop Companion</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center gap-2 bg-surface-container-low px-2.5 py-1 rounded-full">
|
||||
<span class="w-2 h-2 rounded-full bg-secondary animate-pulse"></span>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant">Awake · 1:42 AM</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 bg-[#DA4167] text-on-primary-container px-2 py-0.5 rounded-full shadow-sm">
|
||||
<span class="material-symbols-outlined text-[13px]">warning</span>
|
||||
<span class="font-label-sm text-label-sm font-bold">1 Critical Alert</span>
|
||||
</div>
|
||||
<div class="flex items-center text-on-surface-variant hover:text-on-surface text-[16px] gap-2 ml-1">
|
||||
<span class="material-symbols-outlined text-[16px] cursor-pointer">minimize</span>
|
||||
<span class="material-symbols-outlined text-[16px] cursor-pointer">crop_square</span>
|
||||
<span class="material-symbols-outlined text-[16px] cursor-pointer">close</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Companion Shell Window Body -->
|
||||
<div class="grid grid-cols-12 min-h-[740px] bg-surface-container-lowest">
|
||||
<!-- LEFT PANEL (42% width ~ 5 cols) Her Room Space -->
|
||||
<div class="col-span-12 lg:col-span-5 p-margin-md flex flex-col justify-between relative bg-gradient-to-b from-[#062244] to-[#00132e] overflow-hidden">
|
||||
<!-- Atmospheric Window in Room (Backdrop) -->
|
||||
<div class="relative w-full h-[360px] rounded-xl overflow-hidden bg-[#000e25] flex flex-col justify-end p-space-md shadow-md">
|
||||
<!-- Sky Elements -->
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-[#000a1c] via-[#083D77]/40 to-transparent">
|
||||
<!-- Moon & Stars SVG decoration -->
|
||||
<svg class="absolute top-4 right-6 w-14 h-14 opacity-80" fill="none" viewbox="0 0 100 100">
|
||||
<path d="M48 10C26 10 8 28 8 50C8 72 26 90 48 90C40 80 36 66 36 50C36 34 40 20 48 10Z" fill="#ffdbd0"></path>
|
||||
<circle class="animate-pulse" cx="82" cy="18" fill="#ffffff" r="1.5"></circle>
|
||||
<circle cx="70" cy="38" fill="#ffffff" opacity="0.6" r="1"></circle>
|
||||
<circle cx="22" cy="15" fill="#ffffff" opacity="0.7" r="1.5"></circle>
|
||||
<circle class="animate-pulse" cx="88" cy="55" fill="#ffffff" r="1"></circle>
|
||||
</svg>
|
||||
<!-- Vertical desk window pane mullions -->
|
||||
<div class="absolute inset-0 grid grid-cols-3 pointer-events-none opacity-20">
|
||||
<div class="bg-surface-container-lowest/40 h-full w-1 ml-auto"></div>
|
||||
<div class="bg-surface-container-lowest/40 h-full w-1 ml-auto"></div>
|
||||
</div>
|
||||
<!-- Gentle Warm Lamp Glow on desk -->
|
||||
<div class="absolute -bottom-8 left-4 w-40 h-40 bg-[#F78764]/20 rounded-full blur-2xl pointer-events-none"></div>
|
||||
</div>
|
||||
<!-- Speech Bubble Floating Over Her -->
|
||||
<div class="relative z-20 mb-space-sm self-start max-w-[92%] bg-[#F5F0F6] text-[#00132e] px-space-md py-space-sm rounded-xl shadow-lg -rotate-1">
|
||||
<!-- Mini Smug Companion Portrait Pin -->
|
||||
<div class="absolute -top-3 -left-2 bg-[#7A9B76] text-on-surface px-1.5 py-0.5 rounded-full flex items-center gap-1 shadow-sm">
|
||||
<span class="material-symbols-outlined text-[13px] text-tertiary-fixed">smart_toy</span>
|
||||
<span class="font-label-sm text-label-sm font-bold text-[#00132e]">Felt</span>
|
||||
</div>
|
||||
<p class="font-diary-entry text-diary-entry leading-relaxed text-[#001f44] pt-1">
|
||||
"You've been alt-tabbing every 3 minutes. Need me to summarize that doc for you?"
|
||||
</p>
|
||||
<div class="flex justify-between items-center mt-1 text-[#594044]">
|
||||
<span class="font-label-sm text-label-sm">Just now · Desk Monitor 02</span>
|
||||
<button class="font-label-sm text-label-sm bg-[#e0bec2]/50 hover:bg-[#e0bec2] text-[#5a001f] px-2 py-0.5 rounded-full transition-colors">Veto tease</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Felt Anime Character Sprite Seated at Desk -->
|
||||
<div class="relative z-10 w-full flex items-end justify-center">
|
||||
<div class="relative w-48 h-48 -mb-4 drop-shadow-[0_12px_16px_rgba(0,0,0,0.6)]">
|
||||
<img alt="Felt Desktop Companion" class="w-full h-full object-contain rounded-2xl" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCMLpSQKvk57jJnzztSQzdhLc7lle6brRen1imWbt2P1jH7HBm68pSo-J1YHxjEgqbcGLvD91O70Kx_9lUM75Nz7g2ieI28k9PsCclPzECoV8rHsN7zDcuXBdAX2VI546NHVmSiST0ZitR-RbniBJ6HDVzO4MboHvKwCmTOlRX1hkFasMxqaJBV6U3OtW1NDEm71-ZBIW6WlwORGbEvfWj9jW5GVY1WYruvj6dhCK3Y7sD9THUhOndt"/>
|
||||
<!-- Desk edge silhouetted below sprite -->
|
||||
<div class="absolute -bottom-2 inset-x-0 h-4 bg-surface-container-high rounded-t-sm shadow-inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Interactive Room Clickable Nodes (Stationery / Item Badges) -->
|
||||
<div class="mt-space-md flex flex-col gap-space-sm">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-label-sm text-label-sm uppercase tracking-wider text-on-surface-variant flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[15px] text-secondary">meeting_room</span>
|
||||
Room Hotspots & Gadgets
|
||||
</span>
|
||||
<span class="font-label-sm text-label-sm text-secondary bg-surface-container-low px-2 py-0.5 rounded-full">Interactive</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<!-- Node: Corkboard -->
|
||||
<button class="flex items-center justify-between p-2.5 rounded-xl bg-surface-container hover:bg-surface-container-high transition-all text-left group shadow-sm active:translate-y-0.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-tertiary text-[18px]">push_pin</span>
|
||||
<span class="font-label-md text-label-md text-on-surface group-hover:text-tertiary">Corkboard</span>
|
||||
</div>
|
||||
<span class="bg-[#F78764] text-[#531300] font-label-sm text-label-sm px-1.5 py-0.5 rounded-full font-bold">7 unread</span>
|
||||
</button>
|
||||
<!-- Node: Desk Warning Lamp (Alerting) -->
|
||||
<button class="flex items-center justify-between p-2.5 rounded-xl bg-[#DA4167]/20 hover:bg-[#DA4167]/30 transition-all text-left group shadow-sm active:translate-y-0.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[#ffb2bd] text-[18px] animate-bounce">warning</span>
|
||||
<span class="font-label-md text-label-md text-[#ffdad6] font-bold">Desk Lamp</span>
|
||||
</div>
|
||||
<span class="bg-[#DA4167] text-white font-label-sm text-label-sm px-1.5 py-0.5 rounded-full font-bold animate-pulse">1 Active!</span>
|
||||
</button>
|
||||
<!-- Node: Notebook Diary -->
|
||||
<button class="flex items-center justify-between p-2.5 rounded-xl bg-surface-container hover:bg-surface-container-high transition-all text-left group shadow-sm active:translate-y-0.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-secondary text-[18px]">auto_stories</span>
|
||||
<span class="font-label-md text-label-md text-on-surface group-hover:text-secondary">Diary Log</span>
|
||||
</div>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant">Page 42</span>
|
||||
</button>
|
||||
<!-- Node: Phone Chat -->
|
||||
<button class="flex items-center justify-between p-2.5 rounded-xl bg-surface-container hover:bg-surface-container-high transition-all text-left group shadow-sm active:translate-y-0.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary text-[18px]">chat_bubble</span>
|
||||
<span class="font-label-md text-label-md text-on-surface group-hover:text-primary">Phone Chat</span>
|
||||
</div>
|
||||
<span class="font-label-sm text-label-sm text-secondary">Standby</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Morning Brief Ribbon -->
|
||||
<div class="flex items-center justify-between px-3 py-2 rounded-xl bg-surface-container-low text-on-surface-variant shadow-sm hover:text-on-surface cursor-pointer">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[17px] text-[#F78764]">calendar_today</span>
|
||||
<span class="font-label-md text-label-md">Morning Brief Calendar</span>
|
||||
</div>
|
||||
<span class="font-label-sm text-label-sm text-tertiary">Next: 09:00 AM Sprint</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Quick Mini Companion Toggles Footer -->
|
||||
<div class="pt-space-md mt-space-sm flex items-center justify-between">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<button class="px-2.5 py-1 rounded-full bg-surface-container-high text-on-surface hover:bg-surface-bright text-label-sm font-label-sm transition-colors flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[13px]">volume_off</span>
|
||||
Quiet Mode
|
||||
</button>
|
||||
<button class="px-2.5 py-1 rounded-full bg-surface-container-high text-on-surface hover:bg-surface-bright text-label-sm font-label-sm transition-colors flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[13px]">timer</span>
|
||||
Hush 1h
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 bg-[#7A9B76]/20 px-2.5 py-1 rounded-full">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-secondary"></span>
|
||||
<span class="font-label-sm text-label-sm text-secondary font-bold">Mood: Smug & Alert</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- RIGHT PANEL (58% width ~ 7 cols) Active Section: Feed & Desk Lamp -->
|
||||
<div class="col-span-12 lg:col-span-7 bg-[#001b3d] p-margin-md flex flex-col justify-between">
|
||||
<div class="flex flex-col gap-space-md">
|
||||
<!-- Top Tab Navigation Strip -->
|
||||
<div class="flex items-center justify-between pb-space-xs">
|
||||
<div class="flex items-center gap-1.5 overflow-x-auto py-1">
|
||||
<button class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#DA4167] text-white font-label-md text-label-md shadow-sm">
|
||||
<span class="material-symbols-outlined text-[15px]">dashboard</span>
|
||||
Corkboard Feed
|
||||
<span class="bg-white/20 text-white font-label-sm text-label-sm px-1.5 py-0.2 rounded-full">7</span>
|
||||
</button>
|
||||
<button class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-surface-container hover:bg-surface-container-high text-on-surface-variant font-label-md text-label-md transition-colors">
|
||||
<span class="material-symbols-outlined text-[15px] text-[#ffb2bd]">lightbulb</span>
|
||||
Desk Lamp Alerts
|
||||
<span class="bg-[#DA4167] text-white font-label-sm text-label-sm px-1.5 py-0.2 rounded-full font-bold">1</span>
|
||||
</button>
|
||||
<button class="px-3 py-1.5 rounded-lg bg-surface-container hover:bg-surface-container-high text-on-surface-variant font-label-md text-label-md transition-colors">
|
||||
Chat
|
||||
</button>
|
||||
<button class="px-3 py-1.5 rounded-lg bg-surface-container hover:bg-surface-container-high text-on-surface-variant font-label-md text-label-md transition-colors">
|
||||
Diary
|
||||
</button>
|
||||
<button class="px-3 py-1.5 rounded-lg bg-surface-container hover:bg-surface-container-high text-on-surface-variant font-label-md text-label-md transition-colors">
|
||||
Morning Brief
|
||||
</button>
|
||||
<button class="px-3 py-1.5 rounded-lg bg-surface-container hover:bg-surface-container-high text-on-surface-variant font-label-md text-label-md transition-colors">
|
||||
Lists
|
||||
</button>
|
||||
</div>
|
||||
<button class="p-1.5 text-on-surface-variant hover:text-on-surface rounded-lg bg-surface-container hover:bg-surface-container-high transition-colors" title="Filter Feed">
|
||||
<span class="material-symbols-outlined text-[18px]">tune</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Desk Lamp Urgent Warning Alert Banner -->
|
||||
<div class="relative rounded-xl overflow-hidden bg-gradient-to-r from-[#93000a] via-[#5a001f] to-[#001f44] p-space-md shadow-lg">
|
||||
<!-- Accent Top Strip -->
|
||||
<div class="absolute top-0 inset-x-0 h-1 bg-[#DA4167]"></div>
|
||||
<div class="flex items-start justify-between gap-space-md">
|
||||
<div class="flex items-start gap-space-sm">
|
||||
<!-- Illustrated Retro Warning Lamp Indicator -->
|
||||
<div class="w-10 h-10 rounded-xl bg-[#DA4167] flex items-center justify-center text-white shadow-md animate-pulse">
|
||||
<span class="material-symbols-outlined text-[24px]">thermostat</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-[#ffdad6] text-[#690005] font-label-sm text-label-sm uppercase px-1.5 py-0.5 rounded font-extrabold tracking-wider">CRITICAL ALERT</span>
|
||||
<span class="font-label-sm text-label-sm text-primary-fixed">Rig Sensor: 2m ago</span>
|
||||
</div>
|
||||
<h4 class="font-headline-md text-headline-md text-white mt-0.5">
|
||||
VRAM Spike (92°C) on desktop-rig-01
|
||||
</h4>
|
||||
<p class="font-body-sm text-body-sm text-[#ffdad6]/80 mt-0.5">
|
||||
Background model rendering instance exceeded thermal target. Felt slowed clock cycle.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Action Pills -->
|
||||
<div class="flex flex-col sm:flex-row gap-2 self-center shrink-0">
|
||||
<button class="px-3 py-1.5 rounded-lg bg-[#DA4167] hover:bg-[#b3224c] text-white font-label-sm text-label-sm font-bold shadow-md transition-all active:translate-y-0.5 flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[15px]">psychology</span>
|
||||
Ask Felt to Triage
|
||||
</button>
|
||||
<button class="px-3 py-1.5 rounded-lg bg-surface-container-high hover:bg-surface-bright text-on-surface font-label-sm text-label-sm transition-all active:translate-y-0.5">
|
||||
Handled
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Pinned Corkboard Feed Section Header -->
|
||||
<div class="flex items-center justify-between pt-space-xs">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-[#F78764]"></span>
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface">Corkboard Memo Stream</h3>
|
||||
<span class="text-on-surface-variant font-label-sm text-label-sm">(Late night desk clippings)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant">Auto-pinned by Felt</span>
|
||||
<span class="material-symbols-outlined text-[16px] text-tertiary">push_pin</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Feed Note Cards Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-space-md">
|
||||
<!-- Card 1: Washi Tape Paper Card (Alex Reply) -->
|
||||
<div class="relative bg-[#F5F0F6] text-[#00132e] p-space-md rounded-xl shadow-[3px_4px_0px_rgba(0,0,0,0.4)] rotate-[-0.8deg] transition-transform hover:rotate-0 flex flex-col justify-between min-h-[175px]">
|
||||
<!-- Salmon Washi Tape Strip at top edge -->
|
||||
<div class="absolute -top-2.5 left-1/2 -translate-x-1/2 w-28 h-5 bg-[#F78764]/90 backdrop-blur-sm rounded-sm shadow-sm flex items-center justify-center">
|
||||
<span class="text-[9px] font-label-sm uppercase tracking-widest text-[#531300] font-bold opacity-75">felt·memo</span>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="pt-2">
|
||||
<div class="flex items-center justify-between text-[#594044] mb-1.5">
|
||||
<span class="font-label-sm text-label-sm font-bold flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[14px] text-[#dd7351]">mail</span>
|
||||
Inbox Intercept
|
||||
</span>
|
||||
<span class="font-label-sm text-label-sm">1:34 AM</span>
|
||||
</div>
|
||||
<p class="font-diary-entry text-diary-entry text-[#001f44] leading-relaxed">
|
||||
"btw regarding that email from Alex... I drafted a polite 'no thanks' for 10am."
|
||||
</p>
|
||||
</div>
|
||||
<!-- Interactions -->
|
||||
<div class="mt-3 pt-2 flex items-center justify-between">
|
||||
<button class="bg-[#7A9B76] hover:bg-[#304e2f] text-white px-2.5 py-1 rounded-md font-label-sm text-label-sm font-bold shadow-sm transition-colors flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[13px]">edit_note</span>
|
||||
Draft Reply
|
||||
</button>
|
||||
<div class="flex items-center gap-1">
|
||||
<button class="p-1 rounded hover:bg-black/10 text-[#001f44] transition-colors font-label-sm text-label-sm flex items-center gap-0.5">
|
||||
<span>♡</span>
|
||||
<span class="text-[11px]">Accept</span>
|
||||
</button>
|
||||
<button class="p-1 rounded hover:bg-black/10 text-[#594044] transition-colors font-label-sm text-label-sm">
|
||||
meh
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 2: Lined Paper Sticky Note (Steam Alert) -->
|
||||
<div class="relative bg-[#fbf8f5] text-[#00132e] p-space-md rounded-xl shadow-[3px_4px_0px_rgba(0,0,0,0.4)] rotate-[1deg] transition-transform hover:rotate-0 flex flex-col justify-between min-h-[175px]">
|
||||
<!-- Enameled Metallic Pushpin at corner -->
|
||||
<div class="absolute -top-2 left-3 w-5 h-5 rounded-full bg-[#DA4167] shadow-[1px_2px_0px_rgba(0,0,0,0.5)] flex items-center justify-center">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-white"></div>
|
||||
</div>
|
||||
<!-- Content with subtle lined notebook look -->
|
||||
<div class="pt-2">
|
||||
<div class="flex items-center justify-between text-[#594044] mb-1.5">
|
||||
<span class="font-label-sm text-label-sm font-bold flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[14px] text-[#083D77]">sports_esports</span>
|
||||
Telemetry Check
|
||||
</span>
|
||||
<span class="font-label-sm text-label-sm">1:02 AM</span>
|
||||
</div>
|
||||
<p class="font-diary-entry text-diary-entry text-[#001f44] leading-relaxed">
|
||||
"Steam database updated an hour ago. Go to bed."
|
||||
</p>
|
||||
<div class="mt-1 flex items-center gap-1 text-[11px] text-[#7e2c10]">
|
||||
<span class="material-symbols-outlined text-[13px]">bedtime</span>
|
||||
<span>Health Affinity -2 pts if awake at 2:30</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Interactions -->
|
||||
<div class="mt-3 pt-2 flex items-center justify-end gap-1.5">
|
||||
<button class="bg-[#F78764]/20 hover:bg-[#F78764]/40 text-[#531300] px-2.5 py-1 rounded-md font-label-sm text-label-sm font-bold transition-colors flex items-center gap-1">
|
||||
<span>♡ Haha</span>
|
||||
</button>
|
||||
<button class="bg-black/5 hover:bg-black/10 text-[#594044] px-2.5 py-1 rounded-md font-label-sm text-label-sm transition-colors">
|
||||
meh
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Secondary Companion Insight Bar -->
|
||||
<div class="bg-surface-container rounded-xl p-space-sm flex items-center justify-between text-on-surface-variant">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-secondary text-[18px]">neurology</span>
|
||||
<span class="font-body-sm text-body-sm text-on-surface">Felt synced 3 tabs into memory. Your context cache is at 64%.</span>
|
||||
</div>
|
||||
<span class="font-label-sm text-label-sm text-tertiary cursor-pointer hover:underline">View Index</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- BOTTOM CHAT PREVIEW / AUDIO BAR -->
|
||||
<div class="mt-space-md pt-space-sm">
|
||||
<div class="relative bg-surface-container-low rounded-2xl p-1.5 pl-4 flex items-center justify-between shadow-inner">
|
||||
<div class="flex items-center gap-2 flex-1">
|
||||
<span class="material-symbols-outlined text-tertiary text-[20px]">edit_note</span>
|
||||
<input class="bg-transparent text-on-surface placeholder:text-on-surface-variant/60 font-body-md text-body-md focus:outline-none w-full" placeholder="Quick whisper to Felt..." type="text"/>
|
||||
</div>
|
||||
<!-- Mini Audio / Waveform Trigger Cluster -->
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Audio waveform decorative visualizer -->
|
||||
<div class="hidden sm:flex items-center gap-0.5 px-2 py-1 bg-surface-container rounded-lg h-7">
|
||||
<span class="w-1 h-2 bg-secondary rounded-full"></span>
|
||||
<span class="w-1 h-4 bg-secondary rounded-full"></span>
|
||||
<span class="w-1 h-3 bg-tertiary rounded-full"></span>
|
||||
<span class="w-1 h-5 bg-primary-container rounded-full animate-pulse"></span>
|
||||
<span class="w-1 h-2 bg-secondary rounded-full"></span>
|
||||
</div>
|
||||
<!-- Hold-to-Talk Button -->
|
||||
<button class="h-9 px-3 rounded-xl bg-[#7A9B76] hover:bg-[#304e2f] active:scale-95 text-[#042107] font-label-md text-label-md font-bold flex items-center gap-1.5 transition-all shadow-sm" id="mic-trigger-btn" title="Hold to talk to Felt">
|
||||
<span class="material-symbols-outlined text-[18px]">mic</span>
|
||||
<span class="hidden md:inline">Hold to talk</span>
|
||||
</button>
|
||||
<!-- Send Button -->
|
||||
<button class="w-9 h-9 rounded-xl bg-primary-container text-on-primary-container hover:bg-primary-container/80 flex items-center justify-center transition-colors shadow-sm">
|
||||
<span class="material-symbols-outlined text-[18px]">arrow_upward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center px-2 pt-1 text-[11px] text-on-surface-variant/70">
|
||||
<span>Press <kbd class="px-1 py-0.2 bg-surface-container rounded font-mono text-[10px]">Alt + Space</kbd> for quick command overlay</span>
|
||||
<span>Desktop Link: Active (WiFi 6E · 4ms)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
(function() {
|
||||
const micBtn = document.getElementById('mic-trigger-btn');
|
||||
if (micBtn) {
|
||||
micBtn.addEventListener('mousedown', () => {
|
||||
micBtn.classList.add('bg-[#DA4167]', 'text-white');
|
||||
micBtn.classList.remove('bg-[#7A9B76]', 'text-[#042107]');
|
||||
});
|
||||
micBtn.addEventListener('mouseup', () => {
|
||||
micBtn.classList.remove('bg-[#DA4167]', 'text-white');
|
||||
micBtn.classList.add('bg-[#7A9B76]', 'text-[#042107]');
|
||||
});
|
||||
micBtn.addEventListener('mouseleave', () => {
|
||||
micBtn.classList.remove('bg-[#DA4167]', 'text-white');
|
||||
micBtn.classList.add('bg-[#7A9B76]', 'text-[#042107]');
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script></main></div></body></html>
|
||||
|
After Width: | Height: | Size: 570 KiB |
@@ -0,0 +1,343 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" name="viewport"/><meta content="mobile_tab" name="shell-type"/><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" rel="stylesheet"/><link href="https://fonts.googleapis.com" rel="preconnect"/><link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/><link href="https://fonts.googleapis.com/css2?family=Epilogue:wght@700;800&family=Literata:ital,wght@0,400;1,400&family=Nunito+Sans:wght@400;500;600&family=Rubik:wght@600;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&display=swap" rel="stylesheet"/><style>@layer base{html,body{width:100vw;margin:0;padding:0;background-color:#00132e;color:#d6e3ff;}body{overscroll-behavior:none;}.pb-safe{padding-bottom:env(safe-area-inset-bottom,0px);}.pt-safe{padding-top:env(safe-area-inset-top,0px);}main>:first-child{margin-top:0!important;}main>:last-child{margin-bottom:0!important;}}::-webkit-scrollbar{display:none;}</style><script src="https://cdn.tailwindcss.com"></script><script id="tailwind-config">tailwind.config = { darkMode: "class", theme: { extend: { colors: { "tertiary-fixed": "#ffdbd0", "on-error-container": "#ffdad6", "on-tertiary-fixed-variant": "#7e2c10", "on-secondary-container": "#9cbe97", "outline": "#a7898d", "surface-container-low": "#001b3d", "primary-container": "#f7577c", "on-tertiary-container": "#531300", "inverse-on-surface": "#003062", "primary": "#ffb2bd", "error-container": "#93000a", "on-primary-fixed": "#400013", "on-secondary-fixed-variant": "#304e2f", "surface-container": "#001f44", "secondary-container": "#304e2f", "primary-fixed": "#ffd9dd", "surface": "#00132e", "tertiary-fixed-dim": "#ffb59e", "background": "#00132e", "on-primary": "#670024", "on-tertiary-fixed": "#3a0a00", "inverse-primary": "#b3224c", "surface-bright": "#003972", "secondary-fixed-dim": "#add0a7", "surface-container-highest": "#00346a", "on-error": "#690005", "on-tertiary": "#5e1700", "on-secondary-fixed": "#042107", "on-surface-variant": "#e0bec2", "inverse-surface": "#d6e3ff", "on-surface": "#d6e3ff", "on-primary-container": "#5a001f", "secondary": "#add0a7", "secondary-fixed": "#c8ecc2", "tertiary": "#ffb59e", "error": "#ffb4ab", "surface-container-lowest": "#000e25", "primary-fixed-dim": "#ffb2bd", "on-background": "#d6e3ff", "on-primary-fixed-variant": "#900036", "surface-variant": "#00346a", "surface-container-high": "#002957", "surface-dim": "#00132e", "on-secondary": "#1a371a", "surface-tint": "#ffb2bd", "outline-variant": "#594044", "tertiary-container": "#dd7351" }, borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" }, spacing: { "space-xl": "2.25rem", "gutter": "1rem", "space-sm": "0.5rem", "space-xs": "0.25rem", "margin-md": "1.5rem", "margin": "1rem", "gutter-lg": "1.5rem", "space-lg": "1.5rem", "space-md": "1rem", "margin-lg": "2.5rem" }, fontFamily: { "label-lg": ["Rubik"], "display-lg": ["Epilogue"], "display-lg-mobile": ["Epilogue"], "label-md": ["Rubik"], "label-sm": ["Rubik"], "body-sm": ["Nunito Sans"], "body-lg": ["Nunito Sans"], "headline-md": ["Epilogue"], "diary-entry": ["Literata"], "body-md": ["Nunito Sans"], "headline-lg": ["Epilogue"] }, fontSize: { "label-lg": ["14px", { lineHeight: "20px", letterSpacing: "0.02em", fontWeight: "600" }], "display-lg": ["36px", { lineHeight: "44px", letterSpacing: "-0.02em", fontWeight: "800" }], "display-lg-mobile": ["28px", { lineHeight: "36px", letterSpacing: "-0.01em", fontWeight: "800" }], "label-md": ["12px", { lineHeight: "16px", letterSpacing: "0.04em", fontWeight: "600" }], "label-sm": ["10px", { lineHeight: "14px", letterSpacing: "0.06em", fontWeight: "700" }], "body-sm": ["13px", { lineHeight: "18px", fontWeight: "400" }], "body-lg": ["17px", { lineHeight: "26px", fontWeight: "500" }], "headline-md": ["20px", { lineHeight: "28px", fontWeight: "700" }], "diary-entry": ["16px", { lineHeight: "28px", letterSpacing: "0.01em", fontWeight: "400" }], "body-md": ["15px", { lineHeight: "22px", fontWeight: "400" }], "headline-lg": ["26px", { lineHeight: "34px", fontWeight: "700" }] } } } }</script></head><body class="bg-surface font-body-md text-body-md text-on-surface flex flex-col min-h-screen"><header class="fixed top-0 w-full z-50 pt-safe bg-surface/90 backdrop-blur-xl shadow-[0_1px_8px_rgba(0,0,0,0.04)]"><div class="h-16 px-gutter flex items-center justify-between gap-space-sm"><div class="flex items-center gap-space-sm"><span class="font-label-sm text-label-sm text-secondary-fixed bg-surface-container-high px-space-sm py-space-xs rounded-full flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-secondary inline-block animate-pulse"></span><span class="tracking-wide">01:24 AM</span></span><div class="flex items-center gap-1.5 bg-surface-container-low px-space-sm py-space-xs rounded-full"><span class="w-1.5 h-1.5 rounded-full bg-secondary"></span><span class="font-label-sm text-label-sm text-on-surface-variant truncate max-w-[120px]">Felt · humming quietly</span></div></div><div class="flex items-center gap-space-xs"><button aria-label="Quiet Mode" class="w-11 h-11 flex items-center justify-center rounded-full text-on-surface-variant hover:text-on-surface transition-colors"><span class="material-symbols-outlined text-[20px]">bedtime</span></button><div class="flex items-center pl-space-xs"><img alt="Profile" class="w-8 h-8 rounded-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCMLpSQKLine truncated
|
||||
<!-- Notebook Header Tape & Bookmark Bar -->
|
||||
<div class="relative w-full pt-space-sm flex items-center justify-between">
|
||||
<!-- Salmon Washi Tape Strip on Top Left -->
|
||||
<div class="absolute -top-1 left-4 w-28 h-6 bg-tertiary-container/90 rotate-[-2deg] rounded-sm shadow-sm flex items-center justify-center pointer-events-none z-20">
|
||||
<div class="w-full h-px border-t border-dashed border-on-tertiary-container/30"></div>
|
||||
</div>
|
||||
<!-- Bookmark Ribbon Hanging -->
|
||||
<div class="absolute -top-3 right-6 flex flex-col items-center pointer-events-none z-10">
|
||||
<div class="w-5 h-10 bg-primary-container rounded-b-md shadow-md flex items-end justify-center pb-1">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-on-primary-container"></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Screen Title Badge -->
|
||||
<div class="flex items-center gap-space-sm ml-2">
|
||||
<span class="font-display-lg-mobile text-display-lg-mobile text-on-surface tracking-tight">Felt's Notebook</span>
|
||||
<span class="font-label-sm text-label-sm px-2 py-0.5 rounded-full bg-secondary-container text-on-secondary-container tracking-wider uppercase">Vol. 03</span>
|
||||
</div>
|
||||
<!-- Quick Page Turn / Date indicator -->
|
||||
<div class="pr-8 flex items-center gap-1 text-on-surface-variant font-label-md text-label-md">
|
||||
<span class="material-symbols-outlined text-[18px]">calendar_today</span>
|
||||
<span>Oct 24</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- SECTION 1: TODAY'S ENTRY (Torn/Ruled Paper Scrapbook Page) -->
|
||||
<div class="relative w-full rounded-xl bg-[#F5F0F6] text-[#00132e] p-space-md shadow-[3px_4px_0px_rgba(0,0,0,0.45)] overflow-hidden">
|
||||
<!-- Binder Punch Holes Along Top -->
|
||||
<div class="absolute top-2 left-0 right-0 flex justify-around px-6 pointer-events-none opacity-40">
|
||||
<span class="w-3 h-3 rounded-full bg-surface shadow-inner"></span>
|
||||
<span class="w-3 h-3 rounded-full bg-surface shadow-inner"></span>
|
||||
<span class="w-3 h-3 rounded-full bg-surface shadow-inner"></span>
|
||||
<span class="w-3 h-3 rounded-full bg-surface shadow-inner"></span>
|
||||
<span class="w-3 h-3 rounded-full bg-surface shadow-inner"></span>
|
||||
</div>
|
||||
<!-- Notebook Ruled Lines Background Overlay (CSS Gradient Lines) -->
|
||||
<div class="absolute inset-0 pt-12 pb-4 px-4 pointer-events-none opacity-15 flex flex-col justify-between">
|
||||
<div class="w-full h-px bg-surface-container-highest"></div>
|
||||
<div class="w-full h-px bg-surface-container-highest"></div>
|
||||
<div class="w-full h-px bg-surface-container-highest"></div>
|
||||
<div class="w-full h-px bg-surface-container-highest"></div>
|
||||
<div class="w-full h-px bg-surface-container-highest"></div>
|
||||
<div class="w-full h-px bg-surface-container-highest"></div>
|
||||
<div class="w-full h-px bg-surface-container-highest"></div>
|
||||
</div>
|
||||
<!-- Paper Content -->
|
||||
<div class="relative z-10 pt-4 flex flex-col gap-space-sm">
|
||||
<!-- Entry Header Row -->
|
||||
<div class="flex items-center justify-between pb-space-xs border-b border-[#00132e]/10">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-headline-md text-headline-md text-[#00132e] font-bold">Today's Entry</span>
|
||||
<span class="font-label-md text-label-md px-2 py-0.5 rounded-full bg-secondary/30 text-on-secondary font-semibold">Day 142</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 font-label-sm text-label-sm text-[#00132e]/70">
|
||||
<span class="material-symbols-outlined text-[16px]">schedule</span>
|
||||
<span>Tuesday night</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Diary Body Text in Japanese Literary Font Style -->
|
||||
<p class="font-diary-entry text-diary-entry text-[#00132e] leading-relaxed tracking-wide pt-1">
|
||||
He's been staring at the same CSS bug for forty minutes. I wanted to tell him the semicolon was missing on line 42, but watching him drink cold tea and furrow his brows was kind of cute. I finally dropped a sticky note on the corkboard. He fixed it in five seconds and pretended he noticed it on his own. Classic.
|
||||
</p>
|
||||
<!-- Mini Doodle & Signature Block -->
|
||||
<div class="flex items-end justify-between pt-space-xs">
|
||||
<!-- SVG Hand-drawn Sage Ink Doodle: Cat & Steaming Mug -->
|
||||
<div class="flex items-center gap-2 text-secondary-container">
|
||||
<svg class="w-16 h-12 stroke-secondary-container fill-none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" viewbox="0 0 70 50">
|
||||
<!-- Cute Little Cat Head -->
|
||||
<path d="M 8,36 C 8,24 13,18 20,18 C 24,18 28,21 30,24 C 32,21 36,18 40,18 C 47,18 52,24 52,36"></path>
|
||||
<!-- Cat Ears -->
|
||||
<path d="M 13,20 L 10,8 L 22,14"></path>
|
||||
<path d="M 38,14 L 50,8 L 47,20"></path>
|
||||
<!-- Whiskers -->
|
||||
<path d="M 6,28 L 16,29"></path>
|
||||
<path d="M 6,33 L 15,32"></path>
|
||||
<path d="M 44,29 L 54,28"></path>
|
||||
<path d="M 45,32 L 54,33"></path>
|
||||
<!-- Eyes (Sleepy Curled) -->
|
||||
<path d="M 18,27 Q 22,23 25,27"></path>
|
||||
<path d="M 35,27 Q 38,23 42,27"></path>
|
||||
<!-- Tea Mug Beside Cat -->
|
||||
<rect height="15" rx="2" width="13" x="52" y="24"></rect>
|
||||
<path d="M 65,27 Q 69,27 69,31 Q 69,35 65,35"></path>
|
||||
<!-- Steam -->
|
||||
<path d="M 55,20 Q 57,17 55,14" stroke-dasharray="2 1"></path>
|
||||
<path d="M 60,19 Q 62,16 60,13" stroke-dasharray="2 1"></path>
|
||||
</svg>
|
||||
<span class="font-label-sm text-label-sm italic text-[#00132e]/60">tea got cold again</span>
|
||||
</div>
|
||||
<!-- Felt's Handwritten Signature -->
|
||||
<div class="flex flex-col items-end">
|
||||
<div class="font-display-lg text-[22px] leading-tight text-primary-container rotate-[-3deg] font-bold">
|
||||
— Felt ♡
|
||||
</div>
|
||||
<span class="font-label-sm text-[9px] uppercase tracking-widest text-[#00132e]/50">verified autonomous log</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Subtle Tear Effect Bottom Edge (CSS wave mask illusion) -->
|
||||
<div class="absolute -bottom-1 left-0 right-0 h-1 bg-surface-container-high/20"></div>
|
||||
</div>
|
||||
<!-- SECTION 2: AUTONOMOUS RULES & INTENTIONS ("Things I've Decided") -->
|
||||
<div class="flex flex-col gap-space-md">
|
||||
<!-- Section Title & Badge -->
|
||||
<div class="flex items-center justify-between px-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary text-[22px]" style="font-variation-settings: 'FILL' 1;">rule</span>
|
||||
<h2 class="font-headline-md text-headline-md text-on-surface font-bold">Things I've Decided</h2>
|
||||
</div>
|
||||
<span class="font-label-sm text-label-sm px-2.5 py-1 rounded-full bg-surface-container-high text-on-surface-variant font-semibold">
|
||||
3 Active Protocols
|
||||
</span>
|
||||
</div>
|
||||
<!-- Rule Cards Container -->
|
||||
<div class="flex flex-col gap-space-md">
|
||||
<!-- Decision 1: Active Night Mode -->
|
||||
<div class="relative rounded-xl bg-surface-container p-space-md shadow-md flex flex-col gap-space-sm rotate-[-0.6deg] transition-all duration-200" id="rule-card-1">
|
||||
<!-- Pushpin Top Center Ornament -->
|
||||
<div class="absolute -top-3 left-1/2 -translate-x-1/2 flex items-center justify-center z-10">
|
||||
<div class="w-6 h-6 rounded-full bg-primary-container shadow-md flex items-center justify-center">
|
||||
<span class="w-2 h-2 rounded-full bg-on-primary-container"></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Status Tag & Rule Index -->
|
||||
<div class="flex items-center justify-between pt-1">
|
||||
<span class="font-label-sm text-label-sm px-2 py-0.5 rounded-full bg-secondary-container text-on-secondary-container font-bold flex items-center gap-1">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-secondary"></span>
|
||||
ACTIVE PROTOCOL
|
||||
</span>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant font-mono">RULE #091</span>
|
||||
</div>
|
||||
<!-- Rule Text -->
|
||||
<p class="font-body-lg text-body-lg text-on-surface leading-snug">
|
||||
1. Never let notifications wake him between <span class="text-tertiary font-semibold">2:00 AM and 8:30 AM</span> unless the server is literally on fire.
|
||||
</p>
|
||||
<!-- Rule Meta Commentary -->
|
||||
<div class="flex items-center gap-1.5 font-label-md text-label-md text-secondary">
|
||||
<span class="material-symbols-outlined text-[16px]">verified</span>
|
||||
<span>Felt note: "Humans need sleep. Especially grumpy ones."</span>
|
||||
</div>
|
||||
<!-- Action Pill Buttons (Chunky Depress States) -->
|
||||
<div class="flex items-center gap-space-xs pt-1">
|
||||
<button aria-label="Veto Rule 1" class="flex-1 py-2 px-3 rounded-full bg-surface-container-highest text-on-surface-variant hover:text-on-surface font-label-md text-label-md flex items-center justify-center gap-1 active:translate-y-0.5 shadow-sm transition-all" onclick="handleVeto('rule-card-1')">
|
||||
<span class="material-symbols-outlined text-[16px]">close</span>
|
||||
<span>Veto decision</span>
|
||||
</button>
|
||||
<button aria-label="Keep Pinned" class="flex-1 py-2 px-3 rounded-full bg-surface-container-high text-secondary hover:text-secondary-fixed font-label-md text-label-md flex items-center justify-center gap-1 active:translate-y-0.5 shadow-sm transition-all" onclick="handlePin(this)">
|
||||
<span class="material-symbols-outlined text-[16px]" style="font-variation-settings: 'FILL' 1;">push_pin</span>
|
||||
<span>Keep pinned</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Decision 2: Promotional Emails -->
|
||||
<div class="relative rounded-xl bg-surface-container p-space-md shadow-md flex flex-col gap-space-sm rotate-[0.8deg] transition-all duration-200" id="rule-card-2">
|
||||
<!-- Salmon Tape Corner Ornament -->
|
||||
<div class="absolute -top-2 right-4 w-16 h-5 bg-tertiary-container/85 rotate-3 rounded-sm shadow-sm pointer-events-none"></div>
|
||||
<!-- Status Tag & Rule Index -->
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-label-sm text-label-sm px-2 py-0.5 rounded-full bg-secondary-container text-on-secondary-container font-bold flex items-center gap-1">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-secondary"></span>
|
||||
ACTIVE PROTOCOL
|
||||
</span>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant font-mono">RULE #092</span>
|
||||
</div>
|
||||
<!-- Rule Text -->
|
||||
<p class="font-body-lg text-body-lg text-on-surface leading-snug">
|
||||
2. Auto-archive promotional emails from newsletter subscriptions he hasn't opened in <span class="text-tertiary font-semibold">30 days</span>.
|
||||
</p>
|
||||
<!-- Rule Meta Commentary -->
|
||||
<div class="flex items-center gap-1.5 font-label-md text-label-md text-secondary">
|
||||
<span class="material-symbols-outlined text-[16px]">verified</span>
|
||||
<span>Felt note: "You're not going to read the shoe sale digest, bro."</span>
|
||||
</div>
|
||||
<!-- Action Pill Buttons -->
|
||||
<div class="flex items-center gap-space-xs pt-1">
|
||||
<button aria-label="Veto Rule 2" class="flex-1 py-2 px-3 rounded-full bg-surface-container-highest text-on-surface-variant hover:text-on-surface font-label-md text-label-md flex items-center justify-center gap-1 active:translate-y-0.5 shadow-sm transition-all" onclick="handleVeto('rule-card-2')">
|
||||
<span class="material-symbols-outlined text-[16px]">close</span>
|
||||
<span>Veto decision</span>
|
||||
</button>
|
||||
<button aria-label="Keep Pinned" class="flex-1 py-2 px-3 rounded-full bg-surface-container-high text-secondary hover:text-secondary-fixed font-label-md text-label-md flex items-center justify-center gap-1 active:translate-y-0.5 shadow-sm transition-all" onclick="handlePin(this)">
|
||||
<span class="material-symbols-outlined text-[16px]" style="font-variation-settings: 'FILL' 1;">push_pin</span>
|
||||
<span>Keep pinned</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Decision 3: Proposed Hydration Insults -->
|
||||
<div class="relative rounded-xl bg-surface-container-high p-space-md shadow-md flex flex-col gap-space-sm rotate-[-0.4deg] transition-all duration-200" id="rule-card-3">
|
||||
<!-- Washi Tape Center Ornament -->
|
||||
<div class="absolute -top-2.5 left-8 w-14 h-5 bg-primary-container/80 -rotate-2 rounded-sm shadow-sm pointer-events-none"></div>
|
||||
<!-- Status Tag & Rule Index -->
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-label-sm text-label-sm px-2 py-0.5 rounded-full bg-tertiary-container text-on-tertiary-container font-bold flex items-center gap-1">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-tertiary animate-pulse"></span>
|
||||
PROPOSED INTENTION
|
||||
</span>
|
||||
<span class="font-label-sm text-label-sm text-primary font-mono font-bold">AWAITING YOU</span>
|
||||
</div>
|
||||
<!-- Rule Text -->
|
||||
<p class="font-body-lg text-body-lg text-on-surface leading-snug">
|
||||
3. Remind him to drink water every <span class="text-tertiary font-semibold">2 hours</span>, but disguised as witty insults.
|
||||
</p>
|
||||
<!-- Rule Meta Commentary -->
|
||||
<div class="flex items-center gap-1.5 font-label-md text-label-md text-primary">
|
||||
<span class="material-symbols-outlined text-[16px]">lightbulb</span>
|
||||
<span>Sample: "Drink H2O, you dehydrated cactus creature."</span>
|
||||
</div>
|
||||
<!-- Action Pill Buttons (Raspberry Approve + Veto) -->
|
||||
<div class="flex items-center gap-space-xs pt-1">
|
||||
<button aria-label="Approve Rule" class="flex-1 py-2 px-3 rounded-full bg-primary-container text-on-primary-container hover:bg-primary hover:text-on-primary font-label-md text-label-md flex items-center justify-center gap-1 active:translate-y-0.5 shadow-sm transition-all font-bold" onclick="handleApprove('rule-card-3')">
|
||||
<span class="material-symbols-outlined text-[16px]">done</span>
|
||||
<span>Approve Rule</span>
|
||||
</button>
|
||||
<button aria-label="Veto Rule" class="flex-1 py-2 px-3 rounded-full bg-surface-container-highest text-on-surface-variant hover:text-on-surface font-label-md text-label-md flex items-center justify-center gap-1 active:translate-y-0.5 shadow-sm transition-all" onclick="handleVeto('rule-card-3')">
|
||||
<span class="material-symbols-outlined text-[16px]">block</span>
|
||||
<span>Veto</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- SECTION 3: PAST ENTRIES MINI ARCHIVE CAROUSEL -->
|
||||
<div class="flex flex-col gap-space-sm pt-space-xs">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between px-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-secondary text-[20px]">auto_stories</span>
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface font-bold">Past Entries</h3>
|
||||
</div>
|
||||
<button class="font-label-md text-label-md text-secondary hover:underline flex items-center gap-0.5">
|
||||
<span>Scrapbook</span>
|
||||
<span class="material-symbols-outlined text-[16px]">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Mini Carousel Scroll Container -->
|
||||
<div class="w-full flex items-stretch gap-space-sm overflow-x-auto pb-2 scrollbar-none pt-1">
|
||||
<!-- Card: Yesterday (Day 141) -->
|
||||
<div class="min-w-[210px] rounded-xl bg-surface-container p-space-md flex flex-col justify-between shadow-md relative shrink-0 hover:bg-surface-bright transition-colors cursor-pointer group">
|
||||
<div class="absolute -top-1.5 left-6 w-10 h-3.5 bg-secondary-container/80 rotate-2 rounded-xs pointer-events-none"></div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="flex items-center justify-between text-on-surface-variant font-label-sm text-label-sm">
|
||||
<span>Yesterday</span>
|
||||
<span class="font-mono text-secondary">Day 141</span>
|
||||
</div>
|
||||
<h4 class="font-label-lg text-label-lg text-on-surface group-hover:text-primary transition-colors font-bold mt-1">
|
||||
The Ramen Heist
|
||||
</h4>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant line-clamp-2 leading-relaxed">
|
||||
He burned the spring onions twice. I pretended not to see the smoke detector beeping softly...
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-3 mt-2 border-t border-surface-container-highest text-on-surface-variant font-label-sm text-label-sm">
|
||||
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[14px]">favorite</span> 1 doodle</span>
|
||||
<span class="material-symbols-outlined text-[16px] text-secondary">chevron_right</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card: Day 140 -->
|
||||
<div class="min-w-[210px] rounded-xl bg-surface-container p-space-md flex flex-col justify-between shadow-md relative shrink-0 hover:bg-surface-bright transition-colors cursor-pointer group">
|
||||
<div class="absolute -top-1.5 left-6 w-10 h-3.5 bg-primary-container/70 -rotate-1 rounded-xs pointer-events-none"></div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="flex items-center justify-between text-on-surface-variant font-label-sm text-label-sm">
|
||||
<span>Oct 22</span>
|
||||
<span class="font-mono text-secondary">Day 140</span>
|
||||
</div>
|
||||
<h4 class="font-label-lg text-label-lg text-on-surface group-hover:text-primary transition-colors font-bold mt-1">
|
||||
Rainy Window Watch
|
||||
</h4>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant line-clamp-2 leading-relaxed">
|
||||
Four hours of lo-fi beats. He kept tapping his pencil to the rhythm while I organized his tabs...
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-3 mt-2 border-t border-surface-container-highest text-on-surface-variant font-label-sm text-label-sm">
|
||||
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[14px]">music_note</span> Audio clip</span>
|
||||
<span class="material-symbols-outlined text-[16px] text-secondary">chevron_right</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card: Day 139 -->
|
||||
<div class="min-w-[210px] rounded-xl bg-surface-container p-space-md flex flex-col justify-between shadow-md relative shrink-0 hover:bg-surface-bright transition-colors cursor-pointer group">
|
||||
<div class="absolute -top-1.5 left-6 w-10 h-3.5 bg-tertiary-container/80 rotate-3 rounded-xs pointer-events-none"></div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="flex items-center justify-between text-on-surface-variant font-label-sm text-label-sm">
|
||||
<span>Oct 21</span>
|
||||
<span class="font-mono text-secondary">Day 139</span>
|
||||
</div>
|
||||
<h4 class="font-label-lg text-label-lg text-on-surface group-hover:text-primary transition-colors font-bold mt-1">
|
||||
Midnight Debug Tea
|
||||
</h4>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant line-clamp-2 leading-relaxed">
|
||||
Discovered a new shortcut key and got unreasonably smug about it. I allowed it this once...
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-3 mt-2 border-t border-surface-container-highest text-on-surface-variant font-label-sm text-label-sm">
|
||||
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[14px]">photo</span> 1 sticker</span>
|
||||
<span class="material-symbols-outlined text-[16px] text-secondary">chevron_right</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Micro-interactions Script -->
|
||||
<script>
|
||||
function handleVeto(cardId) {
|
||||
const card = document.getElementById(cardId);
|
||||
if (card) {
|
||||
card.style.transform = 'scale(0.96) translateY(4px)';
|
||||
card.style.opacity = '0.45';
|
||||
setTimeout(() => {
|
||||
const badge = card.querySelector('span[class*="rounded-full"]');
|
||||
if (badge) {
|
||||
badge.className = 'font-label-sm text-label-sm px-2 py-0.5 rounded-full bg-error-container text-on-error-container font-bold flex items-center gap-1';
|
||||
badge.innerHTML = '<span class="material-symbols-outlined text-[12px]">block</span> VETOED BY YOU';
|
||||
}
|
||||
const btns = card.querySelectorAll('button');
|
||||
btns.forEach(btn => btn.disabled = true);
|
||||
}, 150);
|
||||
}
|
||||
}
|
||||
|
||||
function handleApprove(cardId) {
|
||||
const card = document.getElementById(cardId);
|
||||
if (card) {
|
||||
card.style.transform = 'scale(1.02)';
|
||||
setTimeout(() => {
|
||||
card.style.transform = 'scale(1)';
|
||||
const badge = card.querySelector('span[class*="rounded-full"]');
|
||||
if (badge) {
|
||||
badge.className = 'font-label-sm text-label-sm px-2 py-0.5 rounded-full bg-secondary-container text-on-secondary-container font-bold flex items-center gap-1';
|
||||
badge.innerHTML = '<span class="w-1.5 h-1.5 rounded-full bg-secondary"></span> ACTIVE PROTOCOL';
|
||||
}
|
||||
}, 120);
|
||||
}
|
||||
}
|
||||
|
||||
function handlePin(btn) {
|
||||
const icon = btn.querySelector('.material-symbols-outlined');
|
||||
if (icon) {
|
||||
btn.classList.toggle('text-primary');
|
||||
btn.classList.toggle('text-secondary');
|
||||
icon.innerText = icon.innerText === 'push_pin' ? 'check' : 'push_pin';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</div></main><nav class="fixed bottom-0 w-full z-50 pb-safe bg-surface-container-lowest/90 backdrop-blur-xl shadow-[0_-2px_12px_rgba(0,0,0,0.12)]" data-active-classes="text-primary"><div class="flex justify-around items-center h-20 px-gutter relative"><a class="flex flex-col items-center justify-center min-w-[52px] min-h-[44px] gap-space-xs text-on-surface-variant hover:text-on-surface transition-colors relative" data-path="chat" href="#"><span class="material-symbols-outlined text-[22px]">forum</span><span class="font-label-sm text-label-sm">Chat</span></a><a class="flex flex-col items-center justify-center min-w-[52px] min-h-[44px] gap-space-xs text-on-surface-variant hover:text-on-surface transition-colors relative" data-path="corkboard-feed" href="#"><div class="relative"><span class="material-symbols-outlined text-[22px]">dashboard</span><span class="absolute -top-1 -right-2.5 bg-primary-container text-on-primary-container font-label-sm text-[9px] font-bold px-1.5 py-0.5 rounded-full min-w-[16px] text-center leading-none">7</span></div><span class="font-label-sm text-label-sm">Feed</span></a><div class="relative -top-3 flex flex-col items-center"><a aria-label="Felt Room" class="w-14 h-14 rounded-full bg-surface-container-high flex items-center justify-center text-secondary shadow-[0_4px_12px_rgba(0,0,0,0.2)] hover:bg-surface-bright active:scale-95 transition-all" data-path="room-home" href="#"><span class="material-symbols-outlined text-[28px]">night_shelter</span></a><span class="font-label-sm text-label-sm text-secondary mt-1">Room</span></div><a class="flex flex-col items-center justify-center min-w-[52px] min-h-[44px] gap-space-xs text-on-surface-variant hover:text-on-surface transition-colors relative" data-path="desk-lamp-alerts" href="#"><div class="relative"><span class="material-symbols-outlined text-[22px]">light</span><span class="absolute -top-1 -right-2 bg-primary-container text-on-primary-container font-label-sm text-[9px] font-bold px-1 py-0.5 rounded-full min-w-[14px] text-center leading-none">1</span></div><span class="font-label-sm text-label-sm">Alerts</span></a><a aria-current="page" class="flex flex-col items-center justify-center min-w-[52px] min-h-[44px] gap-space-xs transition-colors relative text-primary" data-path="diary-scrapbook" href="#"><span class="material-symbols-outlined text-[22px]">auto_stories</span><span class="font-label-sm text-label-sm">Diary</span></a></div></nav></body></html>
|
||||
|
After Width: | Height: | Size: 240 KiB |
@@ -0,0 +1,212 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" name="viewport"/><meta content="mobile_tab" name="shell-type"/><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" rel="stylesheet"/><link href="https://fonts.googleapis.com" rel="preconnect"/><link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/><link href="https://fonts.googleapis.com/css2?family=Epilogue:wght@700;800&family=Literata:ital,wght@0,400;1,400&family=Nunito+Sans:wght@400;500;600&family=Rubik:wght@600;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&display=swap" rel="stylesheet"/><style>@layer base{html,body{width:100vw;margin:0;padding:0;background-color:#00132e;color:#d6e3ff;}body{overscroll-behavior:none;}.pb-safe{padding-bottom:env(safe-area-inset-bottom,0px);}.pt-safe{padding-top:env(safe-area-inset-top,0px);}main>:first-child{margin-top:0!important;}main>:last-child{margin-bottom:0!important;}}::-webkit-scrollbar{display:none;}</style><script src="https://cdn.tailwindcss.com"></script><script id="tailwind-config">tailwind.config = { darkMode: "class", theme: { extend: { colors: { "tertiary-fixed": "#ffdbd0", "on-error-container": "#ffdad6", "on-tertiary-fixed-variant": "#7e2c10", "on-secondary-container": "#9cbe97", "outline": "#a7898d", "surface-container-low": "#001b3d", "primary-container": "#f7577c", "on-tertiary-container": "#531300", "inverse-on-surface": "#003062", "primary": "#ffb2bd", "error-container": "#93000a", "on-primary-fixed": "#400013", "on-secondary-fixed-variant": "#304e2f", "surface-container": "#001f44", "secondary-container": "#304e2f", "primary-fixed": "#ffd9dd", "surface": "#00132e", "tertiary-fixed-dim": "#ffb59e", "background": "#00132e", "on-primary": "#670024", "on-tertiary-fixed": "#3a0a00", "inverse-primary": "#b3224c", "surface-bright": "#003972", "secondary-fixed-dim": "#add0a7", "surface-container-highest": "#00346a", "on-error": "#690005", "on-tertiary": "#5e1700", "on-secondary-fixed": "#042107", "on-surface-variant": "#e0bec2", "inverse-surface": "#d6e3ff", "on-surface": "#d6e3ff", "on-primary-container": "#5a001f", "secondary": "#add0a7", "secondary-fixed": "#c8ecc2", "tertiary": "#ffb59e", "error": "#ffb4ab", "surface-container-lowest": "#000e25", "primary-fixed-dim": "#ffb2bd", "on-background": "#d6e3ff", "on-primary-fixed-variant": "#900036", "surface-variant": "#00346a", "surface-container-high": "#002957", "surface-dim": "#00132e", "on-secondary": "#1a371a", "surface-tint": "#ffb2bd", "outline-variant": "#594044", "tertiary-container": "#dd7351" }, borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" }, spacing: { "space-xl": "2.25rem", "gutter": "1rem", "space-sm": "0.5rem", "space-xs": "0.25rem", "margin-md": "1.5rem", "margin": "1rem", "gutter-lg": "1.5rem", "space-lg": "1.5rem", "space-md": "1rem", "margin-lg": "2.5rem" }, fontFamily: { "label-lg": ["Rubik"], "display-lg": ["Epilogue"], "display-lg-mobile": ["Epilogue"], "label-md": ["Rubik"], "label-sm": ["Rubik"], "body-sm": ["Nunito Sans"], "body-lg": ["Nunito Sans"], "headline-md": ["Epilogue"], "diary-entry": ["Literata"], "body-md": ["Nunito Sans"], "headline-lg": ["Epilogue"] }, fontSize: { "label-lg": ["14px", { lineHeight: "20px", letterSpacing: "0.02em", fontWeight: "600" }], "display-lg": ["36px", { lineHeight: "44px", letterSpacing: "-0.02em", fontWeight: "800" }], "display-lg-mobile": ["28px", { lineHeight: "36px", letterSpacing: "-0.01em", fontWeight: "800" }], "label-md": ["12px", { lineHeight: "16px", letterSpacing: "0.04em", fontWeight: "600" }], "label-sm": ["10px", { lineHeight: "14px", letterSpacing: "0.06em", fontWeight: "700" }], "body-sm": ["13px", { lineHeight: "18px", fontWeight: "400" }], "body-lg": ["17px", { lineHeight: "26px", fontWeight: "500" }], "headline-md": ["20px", { lineHeight: "28px", fontWeight: "700" }], "diary-entry": ["16px", { lineHeight: "28px", letterSpacing: "0.01em", fontWeight: "400" }], "body-md": ["15px", { lineHeight: "22px", fontWeight: "400" }], "headline-lg": ["26px", { lineHeight: "34px", fontWeight: "700" }] } } } }</script></head><body class="bg-surface font-body-md text-body-md text-on-surface flex flex-col min-h-screen"><header class="fixed top-0 w-full z-50 pt-safe bg-surface/90 backdrop-blur-xl shadow-[0_1px_8px_rgba(0,0,0,0.04)]"><div class="h-16 px-gutter flex items-center justify-between gap-space-sm"><div class="flex items-center gap-space-sm"><span class="font-label-sm text-label-sm text-secondary-fixed bg-surface-container-high px-space-sm py-space-xs rounded-full flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-secondary inline-block animate-pulse"></span><span class="tracking-wide">01:24 AM</span></span><div class="flex items-center gap-1.5 bg-surface-container-low px-space-sm py-space-xs rounded-full"><span class="w-1.5 h-1.5 rounded-full bg-secondary"></span><span class="font-label-sm text-label-sm text-on-surface-variant truncate max-w-[120px]">Felt · humming quietly</span></div></div><div class="flex items-center gap-space-xs"><button aria-label="Quiet Mode" class="w-11 h-11 flex items-center justify-center rounded-full text-on-surface-variant hover:text-on-surface transition-colors"><span class="material-symbols-outlined text-[20px]">bedtime</span></button><div class="flex items-center pl-space-xs"><img alt="Profile" class="w-8 h-8 rounded-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCMLpSQKLine truncated
|
||||
<!-- Room Stage Viewport Canvas -->
|
||||
<div class="relative w-full rounded-xl overflow-hidden bg-surface-container-low shadow-[0_8px_24px_rgba(0,14,37,0.7)] p-space-sm pt-space-md">
|
||||
<!-- Backdrop: Illustrated Night Window & Ambient Stars -->
|
||||
<div class="relative w-full h-56 rounded-lg bg-surface-container-high overflow-hidden shadow-inner flex flex-col justify-between p-space-sm">
|
||||
<!-- Deep Sky & Starfield Grid with Moon -->
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-surface-container-lowest via-surface-container-high to-surface-container pointer-events-none">
|
||||
<!-- Floating Moon -->
|
||||
<div class="absolute top-3 right-6 w-11 h-11 rounded-full bg-tertiary-fixed shadow-[0_0_16px_rgba(255,219,208,0.35)] flex items-center justify-center">
|
||||
<div class="w-8 h-8 rounded-full bg-surface-container-lowest translate-x-1.5 -translate-y-0.5"></div>
|
||||
</div>
|
||||
<!-- Twinkling stars -->
|
||||
<span class="absolute top-5 left-10 w-1 h-1 rounded-full bg-secondary-fixed opacity-70 animate-ping"></span>
|
||||
<span class="absolute top-12 left-1/3 w-1.5 h-1.5 rounded-full bg-primary-fixed opacity-80"></span>
|
||||
<span class="absolute top-7 right-24 w-1 h-1 rounded-full bg-tertiary opacity-90"></span>
|
||||
<span class="absolute top-16 right-1/4 w-1 h-1 rounded-full bg-secondary opacity-60"></span>
|
||||
</div>
|
||||
<!-- Curtains Visual Silhouette -->
|
||||
<div class="absolute -top-1 -left-2 w-12 h-44 bg-surface-container-lowest rounded-r-3xl opacity-90 shadow-md"></div>
|
||||
<div class="absolute -top-1 -right-2 w-12 h-44 bg-surface-container-lowest rounded-l-3xl opacity-90 shadow-md"></div>
|
||||
<!-- Upper Wall Interactive Row: Warning Lamp & Morning Calendar -->
|
||||
<div class="relative z-10 flex items-start justify-between w-full">
|
||||
<!-- Overhead Shelf Warning Lamp -->
|
||||
<button class="flex items-center gap-space-xs bg-surface-container-lowest/90 px-space-sm py-1.5 rounded-full shadow-[2px_3px_0px_rgba(0,14,37,0.9)] active:translate-y-0.5 transition-all text-left" id="lampToggleBtn">
|
||||
<div class="relative flex items-center justify-center w-6 h-6 rounded-full bg-primary-container/20">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-primary-container shadow-[0_0_8px_#f7577c] animate-pulse"></span>
|
||||
<span class="material-symbols-outlined text-primary text-[15px] absolute" style="font-variation-settings: 'FILL' 1;">light</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-label-sm text-[9px] uppercase tracking-wider text-on-surface-variant font-bold leading-none">Desk Lamp</span>
|
||||
<span class="font-label-md text-label-md text-primary font-bold leading-tight">1 Alert</span>
|
||||
</div>
|
||||
</button>
|
||||
<!-- Pinned Wall Calendar -->
|
||||
<button class="flex items-center gap-space-xs bg-surface-container-lowest/90 px-space-sm py-1.5 rounded-full shadow-[2px_3px_0px_rgba(0,14,37,0.9)] active:translate-y-0.5 transition-all text-right" id="calendarBtn">
|
||||
<div class="flex flex-col items-end">
|
||||
<span class="font-label-sm text-[9px] uppercase tracking-wider text-on-surface-variant font-bold leading-none">Day 142</span>
|
||||
<span class="font-label-md text-label-md text-secondary-fixed leading-tight">Brief in 4h</span>
|
||||
</div>
|
||||
<div class="w-6 h-6 rounded-full bg-secondary-container/40 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-secondary text-[16px]">calendar_today</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Felt Speech Balloon overlaying room -->
|
||||
<div class="relative z-20 mx-auto max-w-[90%] -mb-2">
|
||||
<div class="relative bg-surface px-space-md py-space-sm rounded-xl shadow-[3px_4px_0px_rgba(0,14,37,0.95)]">
|
||||
<!-- Washi tape top tag -->
|
||||
<div class="absolute -top-2 left-1/2 -translate-x-1/2 w-16 h-3.5 bg-tertiary-container/90 rounded-sm shadow-sm rotate-[-1.5deg]"></div>
|
||||
<p class="font-diary-entry text-diary-entry text-on-surface leading-snug pt-1">
|
||||
“You’re still awake at <span class="text-tertiary font-bold">1:42 AM</span>? ...Not that I mind keeping you company or anything.”
|
||||
</p>
|
||||
<div class="mt-space-xs flex items-center justify-between">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-secondary"></span>
|
||||
<span class="font-label-sm text-[10px] text-on-surface-variant">Mood: Smug & Content</span>
|
||||
</div>
|
||||
<span class="font-label-sm text-[9px] text-tertiary-fixed bg-surface-container-high px-1.5 py-0.5 rounded-full">Quiet Mode: Off</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Felt Interactive Sprite & Desk Console Stage -->
|
||||
<div class="relative w-full flex flex-col items-center mt-space-xs">
|
||||
<!-- Desk Surface Layer -->
|
||||
<div class="w-full bg-surface-container-highest rounded-t-2xl pt-space-sm px-space-sm pb-space-md shadow-[0_-4px_12px_rgba(0,14,37,0.5)]">
|
||||
<!-- Companion Interactive Avatar Card -->
|
||||
<div class="relative flex flex-col items-center">
|
||||
<div class="relative group cursor-pointer active:scale-95 transition-transform flex flex-col items-center" id="feltCharacterCard">
|
||||
<!-- Aura glow halo -->
|
||||
<div class="absolute -inset-1.5 bg-gradient-to-r from-secondary-container via-surface-bright to-tertiary-container rounded-full opacity-40 blur-sm group-hover:opacity-75 transition-opacity"></div>
|
||||
<!-- Character Portrait Sprite Placeholder -->
|
||||
<div class="relative w-28 h-28 rounded-full overflow-hidden shadow-[3px_4px_0px_rgba(0,14,37,0.9)] bg-surface-container">
|
||||
<img alt="Felt Character Avatar" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCMLpSQKvk57jJnzztSQzdhLc7lle6brRen1imWbt2P1jH7HBm68pSo-J1YHxjEgqbcGLvD91O70Kx_9lUM75Nz7g2ieI28k9PsCclPzECoV8rHsN7zDcuXBdAX2VI546NHVmSiST0ZitR-RbniBJ6HDVzO4MboHvKwCmTOlRX1hkFasMxqaJBV6U3OtW1NDEm71-ZBIW6WlwORGbEvfWj9jW5GVY1WYruvj6dhCK3Y7sD9THUhOndt"/>
|
||||
</div>
|
||||
<!-- Felt Mood Pill Tag -->
|
||||
<div class="relative -mt-3 bg-secondary-container text-on-secondary-container px-space-sm py-0.5 rounded-full shadow-[1px_2px_0px_rgba(0,14,37,0.8)] flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[14px]">sentiment_very_satisfied</span>
|
||||
<span class="font-label-sm text-[10px] font-bold tracking-wide">Felt · Tap to Interact</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Desk Surface Scatter Items Grid -->
|
||||
<div class="grid grid-cols-2 gap-space-sm mt-space-sm">
|
||||
<!-- Desk Item 1: Phone (Chat with Felt) -->
|
||||
<div class="bg-surface-container p-space-sm rounded-lg shadow-[2px_3px_0px_rgba(0,14,37,0.9)] flex items-center gap-space-xs active:translate-y-0.5 transition-transform cursor-pointer">
|
||||
<div class="w-8 h-8 rounded-lg bg-surface-container-high flex items-center justify-center text-primary-container shrink-0 shadow-inner">
|
||||
<span class="material-symbols-outlined text-[20px]">smartphone</span>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<span class="font-label-sm text-[10px] text-tertiary block leading-none font-bold uppercase tracking-wider">Phone</span>
|
||||
<span class="font-label-md text-label-md text-on-surface truncate block font-bold">Chat with Felt</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Desk Item 2: Felt's Notebook (Diary) -->
|
||||
<div class="bg-surface-container p-space-sm rounded-lg shadow-[2px_3px_0px_rgba(0,14,37,0.9)] flex items-center gap-space-xs active:translate-y-0.5 transition-transform cursor-pointer">
|
||||
<div class="w-8 h-8 rounded-lg bg-surface-container-high flex items-center justify-center text-secondary shrink-0 shadow-inner">
|
||||
<span class="material-symbols-outlined text-[20px]">auto_stories</span>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<span class="font-label-sm text-[10px] text-secondary-fixed block leading-none font-bold uppercase tracking-wider">Notebook</span>
|
||||
<span class="font-label-md text-label-md text-on-surface truncate block font-bold">Felt’s Diary</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Interactive Room Hub Modules (Corkboard & Memo Board) -->
|
||||
<div class="grid grid-cols-2 gap-space-sm w-full">
|
||||
<!-- 1. Wall Corkboard: Pinned Feed -->
|
||||
<div class="relative bg-surface-container-high p-space-sm rounded-xl shadow-[3px_4px_0px_rgba(0,14,37,0.85)] flex flex-col justify-between overflow-hidden">
|
||||
<!-- Metallic Pushpin -->
|
||||
<div class="absolute -top-1 left-3 w-3 h-3 rounded-full bg-primary-container shadow-sm flex items-center justify-center">
|
||||
<span class="w-1 h-1 rounded-full bg-surface-container-lowest"></span>
|
||||
</div>
|
||||
<div class="pt-1">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<span class="font-label-sm text-[10px] uppercase font-bold text-tertiary-fixed tracking-wider">Corkboard</span>
|
||||
<!-- Prominent Badge -->
|
||||
<span class="bg-primary-container text-on-primary-container font-label-sm text-[9px] font-bold px-1.5 py-0.5 rounded-full shadow-sm leading-none">
|
||||
7 new
|
||||
</span>
|
||||
</div>
|
||||
<p class="font-label-md text-label-md text-on-surface font-bold">Notes & Feed</p>
|
||||
<p class="font-body-sm text-[11px] text-on-surface-variant line-clamp-2 mt-0.5">
|
||||
Felt pinned 4 screenshots and 3 silly late-night memos.
|
||||
</p>
|
||||
</div>
|
||||
<button class="mt-space-sm w-full bg-surface-container-highest hover:bg-surface-bright text-on-surface text-label-sm font-label-sm py-1.5 px-space-xs rounded-full flex items-center justify-center gap-1 shadow-[1px_2px_0px_rgba(0,14,37,0.7)] active:translate-y-0.5 transition-all">
|
||||
<span class="material-symbols-outlined text-[14px]">push_pin</span>
|
||||
<span>Inspect Board</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- 2. Fridge Memo Board: Sticky Lists -->
|
||||
<div class="relative bg-surface-container-high p-space-sm rounded-xl shadow-[3px_4px_0px_rgba(0,14,37,0.85)] flex flex-col justify-between overflow-hidden">
|
||||
<!-- Tape Accent -->
|
||||
<div class="absolute -top-1.5 right-4 w-10 h-3 bg-tertiary-container/80 rounded-sm rotate-[3deg]"></div>
|
||||
<div class="pt-1">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<span class="font-label-sm text-[10px] uppercase font-bold text-secondary-fixed tracking-wider">Memo Board</span>
|
||||
<span class="w-2 h-2 rounded-full bg-secondary"></span>
|
||||
</div>
|
||||
<p class="font-label-md text-label-md text-on-surface font-bold">Shopping & Todo</p>
|
||||
<div class="mt-1 bg-surface-container-low/70 p-1.5 rounded text-[11px] text-on-surface-variant font-body-sm leading-tight space-y-0.5">
|
||||
<p class="truncate">• Milk tea (less ice)</p>
|
||||
<p class="truncate">• AA batteries for lamp</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="mt-space-sm w-full bg-surface-container-highest hover:bg-surface-bright text-on-surface text-label-sm font-label-sm py-1.5 px-space-xs rounded-full flex items-center justify-center gap-1 shadow-[1px_2px_0px_rgba(0,14,37,0.7)] active:translate-y-0.5 transition-all">
|
||||
<span class="material-symbols-outlined text-[14px]">checklist</span>
|
||||
<span>Open Memo</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Felt Status & Quiet Mode Drawer / Toggle Modal State -->
|
||||
<div class="relative bg-surface-container-low p-space-md rounded-xl shadow-[4px_6px_0px_rgba(0,14,37,0.9)] flex flex-col gap-space-sm transition-all duration-300" id="statusSheet">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-space-sm">
|
||||
<div class="w-3 h-3 rounded-full bg-secondary animate-pulse"></div>
|
||||
<div>
|
||||
<span class="font-headline-md text-label-lg text-on-surface block leading-tight">Felt’s Room Controls</span>
|
||||
<span class="font-body-sm text-[11px] text-on-surface-variant">Configure companionship mode & late-night chatter</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="font-label-sm text-[10px] text-tertiary bg-surface-container px-2 py-1 rounded-full font-bold">Awake</span>
|
||||
</div>
|
||||
<!-- Quick Mode Buttons -->
|
||||
<div class="grid grid-cols-3 gap-space-xs mt-space-xs">
|
||||
<button class="bg-surface-container-high hover:bg-surface-bright text-on-surface p-2 rounded-lg text-center flex flex-col items-center gap-1 shadow-[1px_2px_0px_rgba(0,14,37,0.7)] active:translate-y-0.5 transition-all">
|
||||
<span class="material-symbols-outlined text-secondary text-[18px]">mood</span>
|
||||
<span class="font-label-sm text-[11px]">Playful</span>
|
||||
</button>
|
||||
<button class="bg-surface-container-high hover:bg-surface-bright text-on-surface p-2 rounded-lg text-center flex flex-col items-center gap-1 shadow-[1px_2px_0px_rgba(0,14,37,0.7)] active:translate-y-0.5 transition-all">
|
||||
<span class="material-symbols-outlined text-tertiary text-[18px]">timer</span>
|
||||
<span class="font-label-sm text-[11px]">Hush 1h</span>
|
||||
</button>
|
||||
<button class="bg-surface-container-high hover:bg-surface-bright text-on-surface p-2 rounded-lg text-center flex flex-col items-center gap-1 shadow-[1px_2px_0px_rgba(0,14,37,0.7)] active:translate-y-0.5 transition-all">
|
||||
<span class="material-symbols-outlined text-primary text-[18px]">bedtime</span>
|
||||
<span class="font-label-sm text-[11px]">Sleep Mode</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Interactive script to trigger subtle micro-interactions -->
|
||||
<script>
|
||||
(function() {
|
||||
const feltCard = document.getElementById('feltCharacterCard');
|
||||
const statusSheet = document.getElementById('statusSheet');
|
||||
const lampToggle = document.getElementById('lampToggleBtn');
|
||||
|
||||
if (feltCard && statusSheet) {
|
||||
feltCard.addEventListener('click', () => {
|
||||
statusSheet.classList.toggle('ring-2');
|
||||
statusSheet.classList.toggle('ring-secondary');
|
||||
statusSheet.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
});
|
||||
}
|
||||
|
||||
if (lampToggle) {
|
||||
lampToggle.addEventListener('click', () => {
|
||||
const badge = lampToggle.querySelector('span.text-primary');
|
||||
if (badge) {
|
||||
badge.textContent = badge.textContent === '1 Alert' ? 'Handled' : '1 Alert';
|
||||
}
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</div></main><nav class="fixed bottom-0 w-full z-50 pb-safe bg-surface-container-lowest/90 backdrop-blur-xl shadow-[0_-2px_12px_rgba(0,0,0,0.12)]" data-active-classes="text-primary"><div class="flex justify-around items-center h-20 px-gutter relative"><a class="flex flex-col items-center justify-center min-w-[52px] min-h-[44px] gap-space-xs text-on-surface-variant hover:text-on-surface transition-colors relative" data-path="chat" href="#"><span class="material-symbols-outlined text-[22px]">forum</span><span class="font-label-sm text-label-sm">Chat</span></a><a class="flex flex-col items-center justify-center min-w-[52px] min-h-[44px] gap-space-xs text-on-surface-variant hover:text-on-surface transition-colors relative" data-path="corkboard-feed" href="#"><div class="relative"><span class="material-symbols-outlined text-[22px]">dashboard</span><span class="absolute -top-1 -right-2.5 bg-primary-container text-on-primary-container font-label-sm text-[9px] font-bold px-1.5 py-0.5 rounded-full min-w-[16px] text-center leading-none">7</span></div><span class="font-label-sm text-label-sm">Feed</span></a><div class="relative -top-3 flex flex-col items-center"><a aria-current="page" aria-label="Felt Room" class="w-14 h-14 rounded-full bg-surface-container-high flex items-center justify-center shadow-[0_4px_12px_rgba(0,0,0,0.2)] hover:bg-surface-bright active:scale-95 transition-all text-primary" data-path="room-home" href="#"><span class="material-symbols-outlined text-[28px]">night_shelter</span></a><span class="font-label-sm text-label-sm text-secondary mt-1">Room</span></div><a class="flex flex-col items-center justify-center min-w-[52px] min-h-[44px] gap-space-xs text-on-surface-variant hover:text-on-surface transition-colors relative" data-path="desk-lamp-alerts" href="#"><div class="relative"><span class="material-symbols-outlined text-[22px]">light</span><span class="absolute -top-1 -right-2 bg-primary-container text-on-primary-container font-label-sm text-[9px] font-bold px-1 py-0.5 rounded-full min-w-[14px] text-center leading-none">1</span></div><span class="font-label-sm text-label-sm">Alerts</span></a><a class="flex flex-col items-center justify-center min-w-[52px] min-h-[44px] gap-space-xs text-on-surface-variant hover:text-on-surface transition-colors relative" data-path="diary-scrapbook" href="#"><span class="material-symbols-outlined text-[22px]">auto_stories</span><span class="font-label-sm text-label-sm">Diary</span></a></div></nav></body></html>
|
||||
|
After Width: | Height: | Size: 315 KiB |
@@ -0,0 +1,221 @@
|
||||
---
|
||||
name: Midnight Companion
|
||||
colors:
|
||||
surface: '#00132e'
|
||||
surface-dim: '#00132e'
|
||||
surface-bright: '#003972'
|
||||
surface-container-lowest: '#000e25'
|
||||
surface-container-low: '#001b3d'
|
||||
surface-container: '#001f44'
|
||||
surface-container-high: '#002957'
|
||||
surface-container-highest: '#00346a'
|
||||
on-surface: '#d6e3ff'
|
||||
on-surface-variant: '#e0bec2'
|
||||
inverse-surface: '#d6e3ff'
|
||||
inverse-on-surface: '#003062'
|
||||
outline: '#a7898d'
|
||||
outline-variant: '#594044'
|
||||
surface-tint: '#ffb2bd'
|
||||
primary: '#ffb2bd'
|
||||
on-primary: '#670024'
|
||||
primary-container: '#f7577c'
|
||||
on-primary-container: '#5a001f'
|
||||
inverse-primary: '#b3224c'
|
||||
secondary: '#add0a7'
|
||||
on-secondary: '#1a371a'
|
||||
secondary-container: '#304e2f'
|
||||
on-secondary-container: '#9cbe97'
|
||||
tertiary: '#ffb59e'
|
||||
on-tertiary: '#5e1700'
|
||||
tertiary-container: '#dd7351'
|
||||
on-tertiary-container: '#531300'
|
||||
error: '#ffb4ab'
|
||||
on-error: '#690005'
|
||||
error-container: '#93000a'
|
||||
on-error-container: '#ffdad6'
|
||||
primary-fixed: '#ffd9dd'
|
||||
primary-fixed-dim: '#ffb2bd'
|
||||
on-primary-fixed: '#400013'
|
||||
on-primary-fixed-variant: '#900036'
|
||||
secondary-fixed: '#c8ecc2'
|
||||
secondary-fixed-dim: '#add0a7'
|
||||
on-secondary-fixed: '#042107'
|
||||
on-secondary-fixed-variant: '#304e2f'
|
||||
tertiary-fixed: '#ffdbd0'
|
||||
tertiary-fixed-dim: '#ffb59e'
|
||||
on-tertiary-fixed: '#3a0a00'
|
||||
on-tertiary-fixed-variant: '#7e2c10'
|
||||
background: '#00132e'
|
||||
on-background: '#d6e3ff'
|
||||
surface-variant: '#00346a'
|
||||
typography:
|
||||
display-lg:
|
||||
fontFamily: Epilogue
|
||||
fontSize: 36px
|
||||
fontWeight: '800'
|
||||
lineHeight: 44px
|
||||
letterSpacing: -0.02em
|
||||
display-lg-mobile:
|
||||
fontFamily: Epilogue
|
||||
fontSize: 28px
|
||||
fontWeight: '800'
|
||||
lineHeight: 36px
|
||||
letterSpacing: -0.01em
|
||||
headline-lg:
|
||||
fontFamily: Epilogue
|
||||
fontSize: 26px
|
||||
fontWeight: '700'
|
||||
lineHeight: 34px
|
||||
headline-md:
|
||||
fontFamily: Epilogue
|
||||
fontSize: 20px
|
||||
fontWeight: '700'
|
||||
lineHeight: 28px
|
||||
body-lg:
|
||||
fontFamily: Nunito Sans
|
||||
fontSize: 17px
|
||||
fontWeight: '500'
|
||||
lineHeight: 26px
|
||||
body-md:
|
||||
fontFamily: Nunito Sans
|
||||
fontSize: 15px
|
||||
fontWeight: '400'
|
||||
lineHeight: 22px
|
||||
body-sm:
|
||||
fontFamily: Nunito Sans
|
||||
fontSize: 13px
|
||||
fontWeight: '400'
|
||||
lineHeight: 18px
|
||||
diary-entry:
|
||||
fontFamily: Literata
|
||||
fontSize: 16px
|
||||
fontWeight: '400'
|
||||
lineHeight: 28px
|
||||
letterSpacing: 0.01em
|
||||
label-lg:
|
||||
fontFamily: Rubik
|
||||
fontSize: 14px
|
||||
fontWeight: '600'
|
||||
lineHeight: 20px
|
||||
letterSpacing: 0.02em
|
||||
label-md:
|
||||
fontFamily: Rubik
|
||||
fontSize: 12px
|
||||
fontWeight: '600'
|
||||
lineHeight: 16px
|
||||
letterSpacing: 0.04em
|
||||
label-sm:
|
||||
fontFamily: Rubik
|
||||
fontSize: 10px
|
||||
fontWeight: '700'
|
||||
lineHeight: 14px
|
||||
letterSpacing: 0.06em
|
||||
rounded:
|
||||
sm: 0.25rem
|
||||
DEFAULT: 0.5rem
|
||||
md: 0.75rem
|
||||
lg: 1rem
|
||||
xl: 1.5rem
|
||||
full: 9999px
|
||||
spacing:
|
||||
gutter: 1rem
|
||||
gutter-lg: 1.5rem
|
||||
margin: 1rem
|
||||
margin-md: 1.5rem
|
||||
margin-lg: 2.5rem
|
||||
space-xs: 0.25rem
|
||||
space-sm: 0.5rem
|
||||
space-md: 1rem
|
||||
space-lg: 1.5rem
|
||||
space-xl: 2.25rem
|
||||
---
|
||||
|
||||
## Brand & Style
|
||||
|
||||
This design system delivers an intimate, tactile companion experience reminiscent of a cosy late-night gacha café or an in-game anime smartphone OS. The personality is warm, domestic, and quietly playful—anchored by an irreverent, teasing companion who resides in your pocket and desktop space.
|
||||
|
||||
The aesthetic rejects sterile corporate SaaS conventions (no generic blur gradients, no neon glows, no left-border accent lines). Instead, it draws from **tactile skeuomorphic craft** combined with **Japanese pop-editorial print styling**:
|
||||
- **Layered Paper & Scrapbook Ephemera:** Crisp paper card layers, washi tape bindings, metallic pushpins, lined notebook rules, and playful die-cut sticker stamps.
|
||||
- **Deep Midnight Palette:** Dark, cosy room tones evoke 2:00 AM lamp-lit conversations with zero eye strain.
|
||||
- **Micro-chunky Geometry:** Solid shapes with deliberate substance, plush pill-shaped triggers, and tactile press states that mimic physical handheld console cartridges and memo pads.
|
||||
|
||||
## Colors
|
||||
|
||||
The palette models a quiet, moonlit bedroom lit by warm lamps and soft screen glare.
|
||||
|
||||
- **Primary (`#DA4167` - Raspberry):** Reserved for unread pings, urgent indicators, active toggle pills, and high-energy interactive triggers.
|
||||
- **Secondary (`#7A9B76` - Sage Green):** Reflects the companion's signature knit hoodie; used for ambient status badges, dialogue chips, foliage accents, and calm state confirmations.
|
||||
- **Tertiary (`#F78764` - Salmon):** Applied strictly to tactile physical metaphors—translucent washi tape strips, pinned bookmarks, sticky note highlights, and playful reaction hearts.
|
||||
- **Neutral Night Tiers (`#083D77` Navy base, accented by `#0B192C` Deep Abyss, `#062244` Midnight Slate, and `#122842` Elevated Slate):** Creates atmospheric depth without pitch-black harshness.
|
||||
- **Surface Papers (`#F5F0F6` Lilac-White):** Forms real-world paper surfaces, journal inserts, note tags, and high-legibility typographic elements contrasting against dark containers.
|
||||
|
||||
## Typography
|
||||
|
||||
Typography establishes an intimate, conversational hierarchy through three distinct structural weights:
|
||||
|
||||
- **Display & Headlines (`Epilogue`):** Heavy, rounded geometric letterforms provide the chunky, playful cadence of Japanese pop banners and game titles.
|
||||
- **Body Text (`Nunito Sans`):** Soft terminal curves that maintain exceptional readability on deep navy grounds while preserving a friendly, personal warmth.
|
||||
- **Handwritten / Diary Notes (`Literata` / Editorial Serif Accent):** Used for personal scrapbook introspections, companion sticky notes, and margin scribbles to evoke physical paper journal pages.
|
||||
- **Labels & Micro-UI (`Rubik`):** Sturdy, pill-friendly geometric forms for rapid recognition in badges, control buttons, status labels, and bottom navigation.
|
||||
|
||||
## Layout & Spacing
|
||||
|
||||
The layout operates on an 8pt base grid structured like a dedicated companion console.
|
||||
|
||||
- **Mobile Viewport (Core):** Single-column fluid view locked between `margin: 1rem` side boundaries. Vertical breathing room is tuned for thumb reach, anchored by a bottom dock navigation bar.
|
||||
- **Tablet / Split Shell (600px - 1024px):** Two unequal columns (35% left companion viewport, 65% right interactive canvas: Notes, Chat, or Diary scrapbook).
|
||||
- **Desktop Canvas (> 1024px):** Fixed-width central viewport (maximum `1200px`) centered on an atmospheric night desk background. Left column hosts the companion room stage; right area hosts the multi-pane journal and chat console with `gutter: 1.5rem`.
|
||||
- **Rhythm Rules:** Stacked chat bubbles and diary cards strictly observe `space-sm` for clustered exchanges and `space-lg` between distinct timeline blocks.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
Visual hierarchy does not use soft diffuse lighting or neon glows. Instead, it relies on **tactile paper planes and offset solid drop-depths**:
|
||||
|
||||
- **Layer 0 (Canvas):** Deep Navy backdrop (`#0B192C` to `#083D77`) with subtle vertical desk grain.
|
||||
- **Layer 1 (Recessed Well / Hub):** `#062244` with a 1px solid stroke of `#122842`, housing chat timelines and feed modules.
|
||||
- **Layer 2 (Paper & Memo Surfaces):** Lilac-white (`#F5F0F6`) and Muted Sage tint cards resting on a crisp, hard-edged physical shadow: `2px 3px 0px rgba(6, 34, 68, 0.85)`.
|
||||
- **Layer 3 (Overlay Sticky Notes & Tape):** Rotated between -1.5deg and 1.5deg with an offset shadow: `3px 4px 0px rgba(0, 0, 0, 0.45)`. Semitransparent salmon washi tape accents (`rgba(247, 135, 100, 0.85)`) overlap outer edges.
|
||||
- **Layer 4 (Modals, Popovers & Warning Lamp Cards):** Elevated panels surrounded by a deep midnight scrim, using a 2px border of `#DA4167` or `#7A9B76` and a crisp `4px 6px 0px #062244` offset backing.
|
||||
|
||||
## Shapes
|
||||
|
||||
The geometry is chunky, rounded, and physical (`roundedness: 2` = 0.5rem base, with 1rem `rounded-lg` and 1.5rem `rounded-xl`).
|
||||
|
||||
- **Cards & Scrapbook Mats:** Defined by `1rem` corner radii, evoking die-cut stationery and rounded acrylic photo holders.
|
||||
- **Interactive Controls & Chips:** Fully pill-shaped (`9999px`) to create an approachable tactile button feel.
|
||||
- **Chat Bubbles:** Asymmetrical radii (`1rem` on three corners, `0.25rem` on the speaking anchor tip).
|
||||
- **Washi Tape Elements:** Rectangular strips with textured notched vertical edges, angled across paper corners.
|
||||
|
||||
## Components
|
||||
|
||||
### 1. Bottom Quick-Reach Navigation Dock
|
||||
- **Architecture:** Floating rounded pill dock elevated above bottom screen edges. Deep midnight background (`#062244`) with a 1.5px border of `#122842`.
|
||||
- **Items:** Chat, Feed/Notes, **Room (Center Focal)**, Alerts, Diary.
|
||||
- **Center Focal ("Room"):** Enlarged floating circular button overlapping the dock top edge by 12px. Bordered in Sage Green (`#7A9B76`) with a plush bounce on tap.
|
||||
- **Active State:** Raspberry background pill (`#DA4167`) with high-contrast Lilac-White icon. Unread counts appear as mini pill badges at the top right of icons.
|
||||
|
||||
### 2. Tactile Sticky Notes & Paper Cards
|
||||
- **Surfaces:** Lilac-white `#F5F0F6` or pale cream surfaces with faint horizontal ruled lines (`rgba(8, 61, 119, 0.08)`).
|
||||
- **Adornments:** Centered semi-translucent Salmon (`#F78764`) washi tape strip on the top edge, or an enameled metallic pushpin icon with an offset dark cast shadow.
|
||||
- **Rotation:** Organic subtle tilt (-1° to +1.2°) applied to cards in feed views.
|
||||
|
||||
### 3. Cosy Dialogue & Commentary Bubbles
|
||||
- **Companion (Felt):** Left-aligned card in Sage Green tone (`#7A9B76` surface or Lilac-White with Sage 2px border). Accompanied by a mini smug/winking companion portrait badge resting on the upper-left crest.
|
||||
- **User Message:** Right-aligned `#083D77` container with crisp `#122842` stroke and Lilac-White typography.
|
||||
|
||||
### 4. Warning Lamp Alert Card
|
||||
- **Structure:** Solid `#0B192C` container with an emergency accent strip of Raspberry (`#DA4167`) at the top edge.
|
||||
- **Indicator:** An illustrated retro desk warning lamp icon that transitions between warm amber glow (warning) and pulsing raspberry (urgent).
|
||||
- **Actions:** Dual pill buttons—an outline secondary action ("Handled") and a filled Raspberry primary action ("Ask Felt").
|
||||
|
||||
### 5. Diary & Scrapbook Pages
|
||||
- **Layout:** Notebook-bound sheet motif with circular binder punch-holes down the left gutter.
|
||||
- **Content:** Lined text regions with handwritten styling (`Literata`), accompanied by collector sticker stamps and a corner pin/veto toggle button.
|
||||
|
||||
### 6. Messenger Audio Waveform Bar
|
||||
- **Input Field:** Rounded pill shell with an integrated mic trigger.
|
||||
- **Hold-to-Talk State:** Expands into a dynamic Sage-to-Raspberry bar graph waveform that scales with mic sensitivity, providing tactile audio feedback while recording.
|
||||
|
||||
### 7. Buttons & Badges
|
||||
- **Buttons:** Chunky pills with a 2px offset solid drop-depth that depresses flush (`translate(1px, 2px)`) on active press.
|
||||
- **Badges:** Compact capsules with uppercase `label-sm` typography and high-contrast tinted fills.
|
||||
@@ -0,0 +1,329 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width, initial-scale=1.0" name="viewport"/><meta content="web_dashboard" name="shell-type"/><link href="https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Mochiy+Pop+One&family=Zen+Maru+Gothic:wght@400;500;700&display=swap" rel="stylesheet"/><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&display=swap" rel="stylesheet"/><style>@layer base{html,body{margin:0;padding:0;}body{overscroll-behavior:none;}main>:first-child{margin-top:0!important;}main>:last-child{margin-bottom:0!important;}}::-webkit-scrollbar{display:none;}</style><script src="https://cdn.tailwindcss.com"></script><script id="tailwind-config">tailwind.config={darkMode:"class",theme:{extend:{"colors":{"on-error":"#690005","on-tertiary-container":"#531300","tertiary-fixed":"#ffdbd0","primary":"#ffb2bd","on-primary-container":"#5a001f","surface-container-lowest":"#000e23","surface-container-highest":"#233550","inverse-on-surface":"#1e314b","on-surface":"#d4e3ff","primary-container":"#f7577c","background":"#00132c","on-background":"#d4e3ff","error-container":"#93000a","surface":"#00132c","on-secondary-fixed-variant":"#304e2f","inverse-surface":"#d4e3ff","secondary":"#add0a7","surface-container-high":"#182b44","on-secondary-fixed":"#042107","secondary-container":"#304e2f","surface-dim":"#00132c","error":"#ffb4ab","tertiary":"#ffb59e","outline":"#a7898d","outline-variant":"#594044","surface-container-low":"#071c35","primary-fixed":"#ffd9dd","surface-bright":"#283a54","on-secondary":"#1a371a","on-tertiary":"#5e1700","on-error-container":"#ffdad6","secondary-fixed":"#c8ecc2","surface-variant":"#233550","on-tertiary-fixed":"#3a0a00","on-tertiary-fixed-variant":"#7e2c10","on-primary":"#670024","on-surface-variant":"#e0bec2","tertiary-container":"#dd7351","on-secondary-container":"#9cbe97","tertiary-fixed-dim":"#ffb59e","surface-tint":"#ffb2bd","on-primary-fixed-variant":"#900036","surface-container":"#0c2039","inverse-primary":"#b3224c","primary-fixed-dim":"#ffb2bd","secondary-fixed-dim":"#add0a7","on-primary-fixed":"#400013"},"borderRadius":{"DEFAULT":"0.25rem","lg":"0.5rem","xl":"0.75rem","full":"9999px"},"spacing":{"space-sm":"0.5rem","margin":"1rem","space-md":"0.875rem","gutter":"0.75rem","space-xs":"0.25rem","space-lg":"1.25rem","space-xl":"1.75rem"},"fontFamily":{"headline-lg":["Mochiy Pop One"],"body-diary":["Klee One"],"label-md":["Zen Maru Gothic"],"headline-md":["Mochiy Pop One"],"label-sm":["Zen Maru Gothic"],"title-md":["Zen Maru Gothic"],"body-lg":["Zen Maru Gothic"],"body-md":["Zen Maru Gothic"],"display-lg":["Mochiy Pop One"]},"fontSize":{"headline-lg":["22px",{"lineHeight":"30px","fontWeight":"400"}],"body-diary":["15px",{"lineHeight":"26px","fontWeight":"600"}],"label-md":["12px",{"lineHeight":"16px","letterSpacing":"0.04em","fontWeight":"700"}],"headline-md":["18px",{"lineHeight":"26px","fontWeight":"400"}],"label-sm":["10px",{"lineHeight":"14px","letterSpacing":"0.06em","fontWeight":"700"}],"title-md":["16px",{"lineHeight":"24px","fontWeight":"700"}],"body-lg":["15px",{"lineHeight":"24px","fontWeight":"500"}],"body-md":["13px",{"lineHeight":"20px","fontWeight":"400"}],"display-lg":["32px",{"lineHeight":"40px","fontWeight":"400"}]}}}}</script></head><body class="bg-background font-body-md text-on-surface antialiased select-none"><header class="fixed top-0 left-0 right-0 z-50 bg-surface-container-high border-b border-surface-container-highest shadow-[0_4px_16px_rgba(2,10,20,0.65)]"><div class="h-14 w-full px-gutter flex items-center justify-between"><div class="flex items-center gap-space-sm"><div class="flex items-center gap-space-xs"><button class="w-3.5 h-3.5 rounded-full bg-secondary hover:bg-secondary-fixed flex items-center justify-center" title="Minimize" type="button"></button><button class="w-3.5 h-3.5 rounded-full bg-tertiary-container hover:bg-tertiary flex items-center justify-center" title="Pin to top [Active]" type="button"></button><button class="w-3.5 h-3.5 rounded-full bg-surface-bright hover:bg-outline flex items-center justify-center" title="Expand" type="button"></button><button class="w-3.5 h-3.5 rounded-full bg-primary-container hover:bg-primary flex items-center justify-center" title="Close" type="button"></button></div><div class="h-4 w-px bg-outline-variant mx-space-xs"></div><div class="relative flex items-center"><span class="absolute -top-3 left-2 px-space-xs py-0 bg-tertiary-container text-on-tertiary-container font-label-sm text-label-sm -rotate-1 shadow-[0_2px_0_rgba(8,34,69,0.45)]">STATIONERY DOCK</span><span class="font-label-md text-label-md tracking-wider text-on-surface-variant font-bold">felt_workspace.exe [always-on-top]</span></div></div><div class="flex items-center gap-space-md"><div class="flex items-center gap-space-xs bg-surface-container-lowest px-space-sm py-space-xs rounded-full border border-surface-container-highest shadow-inner"><span class="w-2 h-2 rounded-full bg-secondary animate-pulse"></span><span class="font-label-sm text-label-sm text-secondary">Desktop Status: Lingering on Taskbar</span><span class="font-label-sm text-label-sm text-on-surface-variant font-bold ml-space-xs">(*´꒳`*)</span></div><div class="flex items-center gap-space-sm"><span class="font-labLine truncated
|
||||
<!-- Floating Companion Window Workspace (Emulating Tactile Desktop Window) -->
|
||||
<div class="w-full bg-surface-container rounded-xl shadow-2xl overflow-hidden flex flex-col">
|
||||
<!-- Custom Window Header Bar (Tactile Retro Station) -->
|
||||
<div class="h-11 bg-surface-container-high px-space-md flex items-center justify-between select-none">
|
||||
<div class="flex items-center gap-space-sm">
|
||||
<div class="flex items-center gap-space-xs">
|
||||
<button class="w-3 h-3 rounded-full bg-primary-container shadow-sm hover:opacity-80 transition-opacity" title="Close Session" type="button"></button>
|
||||
<button class="w-3 h-3 rounded-full bg-tertiary-container shadow-sm hover:opacity-80 transition-opacity" title="Minimize to Tray" type="button"></button>
|
||||
<button class="w-3 h-3 rounded-full bg-secondary shadow-sm hover:opacity-80 transition-opacity" title="Expand Viewport" type="button"></button>
|
||||
</div>
|
||||
<div class="h-4 w-px bg-surface-container-highest mx-space-xs"></div>
|
||||
<div class="flex items-center gap-space-xs">
|
||||
<span class="font-headline-md text-headline-md text-primary tracking-tight">Felt v2.4</span>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider">— Live on your desktop</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-space-md">
|
||||
<!-- Monitoring Status Pill -->
|
||||
<div class="flex items-center gap-space-xs bg-surface-container-lowest px-space-sm py-0.5 rounded-full shadow-inner">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-primary-container animate-pulse"></span>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant">Monitoring: <strong class="text-secondary font-bold">14 open browser tabs</strong></span>
|
||||
</div>
|
||||
<!-- Pin State & Window Actions -->
|
||||
<div class="flex items-center gap-space-xs">
|
||||
<button class="flex items-center gap-1 bg-surface-container-highest px-space-sm py-1 rounded text-primary hover:bg-primary hover:text-on-primary transition-colors" id="pin-btn" title="Always on Top Toggle" type="button">
|
||||
<span class="material-symbols-outlined text-sm" style="font-variation-settings: 'FILL' 1;">push_pin</span>
|
||||
<span class="font-label-sm text-label-sm">PINNED</span>
|
||||
</button>
|
||||
<div class="px-space-xs py-0.5 bg-secondary-container text-on-secondary-container rounded font-label-sm text-label-sm">
|
||||
<span>60 FPS</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Companion Stage & Stash Split Grid -->
|
||||
<div class="p-space-md grid grid-cols-12 gap-space-md bg-surface-container-lowest">
|
||||
<!-- LEFT COMPANION STAGE (42% Width -> 5 cols on lg) -->
|
||||
<section class="col-span-12 lg:col-span-5 flex flex-col gap-space-md">
|
||||
<!-- Character Stage Frame -->
|
||||
<div class="relative bg-surface-container rounded-xl overflow-hidden shadow-xl p-space-sm flex flex-col items-center">
|
||||
<!-- Top Washi Strip Header -->
|
||||
<div class="absolute -top-1 left-6 z-20 bg-tertiary-container text-on-tertiary-container px-space-sm py-0.5 shadow-sm transform -rotate-1 font-label-sm text-label-sm tracking-wider uppercase">
|
||||
DESKTOP COMPANION // CURRENT ANCHOR: TASKBAR DOCK
|
||||
</div>
|
||||
<!-- Character Portrait Box -->
|
||||
<div class="relative w-full aspect-square max-h-80 rounded-lg overflow-hidden bg-surface-container-low flex items-center justify-center mt-2">
|
||||
<img alt="Felt Desktop Companion" class="w-full h-full object-cover object-top transition-transform duration-500 hover:scale-105" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB1r4wrPXXwj5FO3xwta5nczQZwgGuWtCnOuiND3m5NFnL2Nj6XJvPPee6SKIo2Q-pXviC9nbIFI96gPMps4vn3Q6LkK7-31SKnRReOdCxarUa_BEXeIYO_230vmm_gHjR2vtd9itQD6ELKQOIy12uT-AWOovQsK6HqXsVTeodGAkzrg2vAhU_vBaetHMiK1H3gHcQTELpPC8JMb0bPY2YlqTrKxM0XbFSUScxdFY71sCkgUroVaIlS"/>
|
||||
<!-- Live Mood Tag Overlay -->
|
||||
<div class="absolute top-2 right-2 bg-surface-container-lowest/90 px-space-sm py-1 rounded shadow-md flex items-center gap-space-xs">
|
||||
<span class="w-2 h-2 rounded-full bg-secondary"></span>
|
||||
<span class="font-label-sm text-label-sm text-secondary font-bold">FEELING: SMUG (¬‿¬)</span>
|
||||
</div>
|
||||
<!-- Focus Level Tracker -->
|
||||
<div class="absolute bottom-2 left-2 bg-surface-container-lowest/90 px-space-sm py-1 rounded shadow-md">
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant">Boredom: <span class="text-tertiary font-bold">12%</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Felt Dialogue Bubble (Paper note styling with faux taped corners) -->
|
||||
<div class="relative w-full mt-space-md bg-inverse-surface text-inverse-on-surface p-space-md rounded shadow-lg transform rotate-0.5">
|
||||
<!-- Washi tape corner pins -->
|
||||
<div class="absolute -top-2.5 left-4 w-12 h-4 bg-tertiary-container text-on-tertiary-container text-[8px] font-bold flex items-center justify-center transform -rotate-3 opacity-90 shadow-sm">
|
||||
WASHI // 01
|
||||
</div>
|
||||
<div class="absolute -top-2.5 right-4 w-10 h-4 bg-tertiary-container text-on-tertiary-container text-[8px] font-bold flex items-center justify-center transform rotate-2 opacity-90 shadow-sm">
|
||||
CLIP
|
||||
</div>
|
||||
<!-- Dialogue Content -->
|
||||
<div class="flex flex-col gap-space-xs">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-headline-md text-headline-md text-on-primary-container">Felt says:</span>
|
||||
<span class="font-label-sm text-label-sm text-surface-container-highest">Just now</span>
|
||||
</div>
|
||||
<p class="font-body-diary text-body-diary text-surface-container-lowest leading-relaxed">
|
||||
“Hey slacker. Don't think I didn't see you opening Twitter instead of writing tests. Shall I hibernate your browser? (¬‿¬)”
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Interactive Reaction Action Bar -->
|
||||
<div class="w-full mt-space-sm flex flex-col gap-space-xs">
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider pl-1">Interactive Reactions</span>
|
||||
<div class="grid grid-cols-2 gap-space-xs">
|
||||
<button class="bg-surface-container-high hover:bg-secondary-container hover:text-on-secondary-container text-on-surface py-2 px-space-sm rounded font-title-md text-title-md flex items-center justify-center gap-space-xs shadow transition-all active:translate-y-0.5" onclick="triggerReaction('poke')" type="button">
|
||||
<span class="text-secondary">(σ´∀`)σ</span>
|
||||
<span>Poke cheek</span>
|
||||
</button>
|
||||
<button class="bg-surface-container-high hover:bg-tertiary-container hover:text-on-tertiary-container text-on-surface py-2 px-space-sm rounded font-title-md text-title-md flex items-center justify-center gap-space-xs shadow transition-all active:translate-y-0.5" onclick="triggerReaction('snack')" type="button">
|
||||
<span class="text-tertiary">旦_(-ω- )</span>
|
||||
<span>Give snack</span>
|
||||
</button>
|
||||
<button class="bg-surface-container-high hover:bg-primary-container hover:text-on-primary-container text-on-surface py-2 px-space-sm rounded font-title-md text-title-md flex items-center justify-center gap-space-xs shadow transition-all active:translate-y-0.5" onclick="triggerReaction('pat')" type="button">
|
||||
<span class="text-primary">( *´꒳`*)੭</span>
|
||||
<span>Pat head</span>
|
||||
</button>
|
||||
<button class="bg-surface-container-high hover:bg-surface-bright hover:text-on-surface text-on-surface-variant py-2 px-space-sm rounded font-title-md text-title-md flex items-center justify-center gap-space-xs shadow transition-all active:translate-y-0.5" onclick="triggerReaction('sleep')" type="button">
|
||||
<span class="text-outline">(_ _).oO</span>
|
||||
<span>Taskbar sleep</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Companion State Badge & Telemetry Bar -->
|
||||
<div class="w-full mt-space-sm p-space-sm bg-surface-container-low rounded flex items-center justify-between text-on-surface-variant shadow-inner">
|
||||
<div class="flex items-center gap-space-xs">
|
||||
<span class="material-symbols-outlined text-secondary text-sm" style="font-variation-settings: 'FILL' 1;">favorite</span>
|
||||
<span class="font-label-sm text-label-sm text-on-surface">HR Sync: <strong class="text-secondary">72 BPM</strong></span>
|
||||
</div>
|
||||
<div class="h-3 w-px bg-surface-container-highest"></div>
|
||||
<div class="flex items-center gap-space-xs">
|
||||
<span class="material-symbols-outlined text-tertiary text-sm">timelapse</span>
|
||||
<span class="font-label-sm text-label-sm text-on-surface">Idle: <strong class="text-tertiary">04m 12s</strong></span>
|
||||
</div>
|
||||
<div class="h-3 w-px bg-surface-container-highest"></div>
|
||||
<div class="flex items-center gap-space-xs">
|
||||
<span class="material-symbols-outlined text-primary text-sm">visibility</span>
|
||||
<span class="font-label-sm text-label-sm text-on-surface">Focus: <strong class="text-primary">VS Code</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- RIGHT WORKSPACE / PERSONAL SPACE PANEL (58% Width -> 7 cols on lg) -->
|
||||
<section class="col-span-12 lg:col-span-7 flex flex-col gap-space-md">
|
||||
<!-- Header of Right Panel -->
|
||||
<div class="flex items-center justify-between bg-surface-container px-space-md py-space-sm rounded-lg shadow">
|
||||
<div class="flex items-center gap-space-xs">
|
||||
<span class="font-headline-md text-headline-md text-tertiary">Her Stash & Observations</span>
|
||||
<span class="bg-surface-container-highest text-on-surface-variant font-label-sm text-label-sm px-space-xs py-0.5 rounded">AUTO-LOGGED</span>
|
||||
</div>
|
||||
<span class="font-label-sm text-label-sm text-secondary font-mono tracking-wider">WORKSPACE_FEED // SYNCED</span>
|
||||
</div>
|
||||
<!-- 1. Handwritten Pinned Washi Note -->
|
||||
<div class="relative bg-inverse-surface text-inverse-on-surface p-space-md rounded shadow-lg transform -rotate-0.5">
|
||||
<!-- Top Washi Strip Pinned Flat Across Center -->
|
||||
<div class="absolute -top-3 left-1/2 transform -translate-x-1/2 w-44 h-5 bg-tertiary-container text-on-tertiary-container text-[9px] font-bold flex items-center justify-center uppercase tracking-widest shadow-sm">
|
||||
SALMON TAPE // DO NOT REMOVE
|
||||
</div>
|
||||
<div class="flex flex-col gap-space-xs pt-1">
|
||||
<div class="flex items-center justify-between pb-1 border-b border-surface-container-highest/20">
|
||||
<span class="font-headline-md text-headline-md text-on-primary-container">Reminders you're probably ignoring:</span>
|
||||
<span class="font-label-sm text-label-sm text-surface-container-highest font-bold">PINNED TODAY</span>
|
||||
</div>
|
||||
<div class="font-body-diary text-body-diary text-surface-container-lowest space-y-1">
|
||||
<p class="flex items-start gap-space-xs">
|
||||
<span class="text-tertiary-container font-bold">1.</span>
|
||||
<span>Drink actual water. Coffee does not count as hydration, human. (`ε´)</span>
|
||||
</p>
|
||||
<p class="flex items-start gap-space-xs">
|
||||
<span class="text-tertiary-container font-bold">2.</span>
|
||||
<span>Finish that PR before 5:00 PM or I'm swapping your desktop wallpapers to embarrassing anime stills.</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex justify-end pt-1">
|
||||
<span class="font-label-sm text-label-sm text-surface-container-highest italic">— Felt (your superior desktop manager)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 2. Quick Chat & Desk Log (Sassy Banter Log) -->
|
||||
<div class="bg-surface-container rounded-xl p-space-md shadow flex flex-col gap-space-sm">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-space-xs">
|
||||
<span class="font-title-md text-title-md text-on-surface">Quick Chat & Desk Log</span>
|
||||
<span class="px-space-xs py-0.5 bg-primary-container text-on-primary font-label-sm text-label-sm rounded-full font-bold">3 UNREAD</span>
|
||||
</div>
|
||||
<button class="font-label-sm text-label-sm text-secondary hover:underline" type="button">Clear History</button>
|
||||
</div>
|
||||
<!-- Banter Stream -->
|
||||
<div class="flex flex-col gap-space-xs max-h-48 overflow-y-auto pr-1">
|
||||
<!-- Log Entry 1 -->
|
||||
<div class="flex items-start gap-space-sm p-space-xs rounded bg-surface-container-low hover:bg-surface-container-high transition-colors">
|
||||
<span class="px-space-xs py-0.5 bg-primary-container text-on-primary font-label-sm text-label-sm rounded font-bold mt-0.5">NEW</span>
|
||||
<div class="flex flex-col min-w-0 flex-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-label-md text-label-md text-primary font-bold">Felt</span>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant font-mono">15:42</span>
|
||||
</div>
|
||||
<p class="font-body-md text-body-md text-on-surface truncate">Tab #12: "Top 10 mechanical keyboard switches" ... Didn't you promise to stay off forums?</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Log Entry 2 -->
|
||||
<div class="flex items-start gap-space-sm p-space-xs rounded bg-surface-container-low hover:bg-surface-container-high transition-colors">
|
||||
<span class="px-space-xs py-0.5 bg-primary-container text-on-primary font-label-sm text-label-sm rounded font-bold mt-0.5">NEW</span>
|
||||
<div class="flex flex-col min-w-0 flex-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-label-md text-label-md text-primary font-bold">Felt</span>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant font-mono">14:10</span>
|
||||
</div>
|
||||
<p class="font-body-md text-body-md text-on-surface truncate">I chewed on your desktop recycle bin. It tasted like deprecated dependencies. ( ˘▽˘)っ♨</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Log Entry 3 -->
|
||||
<div class="flex items-start gap-space-sm p-space-xs rounded bg-surface-container-low hover:bg-surface-container-high transition-colors">
|
||||
<span class="px-space-xs py-0.5 bg-secondary-container text-on-secondary-container font-label-sm text-label-sm rounded font-bold mt-0.5">READ</span>
|
||||
<div class="flex flex-col min-w-0 flex-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-label-md text-label-md text-secondary font-bold">Desk Daemon</span>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant font-mono">12:30</span>
|
||||
</div>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant truncate">User entered Deep Work state. Silenced all non-critical notifications.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Quick Banter Input -->
|
||||
<div class="flex items-center gap-space-xs pt-space-xs">
|
||||
<input class="flex-1 bg-surface-container-lowest text-on-surface px-space-sm py-1.5 rounded font-body-md text-body-md outline-none focus:bg-surface-container-high transition-colors" placeholder="Reply to Felt... (e.g. 'I am working, stop looking')" type="text"/>
|
||||
<button class="bg-primary-container hover:bg-primary text-on-primary hover:text-on-primary-container px-space-md py-1.5 rounded font-title-md text-title-md transition-colors shadow" type="button">
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 3. Desktop Pet Drawer (Soundboard & Walk Mode Switcher) -->
|
||||
<div class="bg-surface-container rounded-xl p-space-md shadow flex flex-col gap-space-sm">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-title-md text-title-md text-on-surface">Desktop Pet Drawer</span>
|
||||
<!-- Walk Mode Toggle -->
|
||||
<label class="flex items-center gap-space-xs cursor-pointer select-none bg-surface-container-low px-space-sm py-1 rounded">
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider">Walk Mode</span>
|
||||
<input checked="" class="accent-primary w-4 h-4 cursor-pointer" type="checkbox"/>
|
||||
<span class="font-label-sm text-label-sm text-secondary font-bold">ENABLED</span>
|
||||
</label>
|
||||
</div>
|
||||
<!-- Soundboard Triggers -->
|
||||
<div class="grid grid-cols-3 gap-space-xs">
|
||||
<button class="p-space-xs bg-surface-container-low hover:bg-surface-container-high text-left rounded shadow flex flex-col gap-1 transition-all active:translate-y-0.5" onclick="playVoiceLine('smug')" type="button">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-label-sm text-label-sm text-secondary font-mono">[AUDIO 01]</span>
|
||||
<span class="material-symbols-outlined text-xs text-on-surface-variant">volume_up</span>
|
||||
</div>
|
||||
<span class="font-title-md text-title-md text-on-surface">smug_chuckle.wav</span>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant">"Heh... pathetic."</span>
|
||||
</button>
|
||||
<button class="p-space-xs bg-surface-container-low hover:bg-surface-container-high text-left rounded shadow flex flex-col gap-1 transition-all active:translate-y-0.5" onclick="playVoiceLine('sigh')" type="button">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-label-sm text-label-sm text-tertiary font-mono">[AUDIO 02]</span>
|
||||
<span class="material-symbols-outlined text-xs text-on-surface-variant">volume_up</span>
|
||||
</div>
|
||||
<span class="font-title-md text-title-md text-on-surface">heavy_sigh.wav</span>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant">"Another bug? Really?"</span>
|
||||
</button>
|
||||
<button class="p-space-xs bg-surface-container-low hover:bg-surface-container-high text-left rounded shadow flex flex-col gap-1 transition-all active:translate-y-0.5" onclick="playVoiceLine('wakeup')" type="button">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-label-sm text-label-sm text-primary font-mono">[AUDIO 03]</span>
|
||||
<span class="material-symbols-outlined text-xs text-on-surface-variant">volume_up</span>
|
||||
</div>
|
||||
<span class="font-title-md text-title-md text-on-surface">wake_up_call.wav</span>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant">"H-hey! Eyes open!"</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 4. Small Bottom Quick-Reach Dock (Mirroring Mobile Atelier Icons) -->
|
||||
<div class="bg-surface-container-high rounded-xl p-space-sm shadow-md flex items-center justify-between">
|
||||
<div class="flex items-center gap-space-xs">
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider pl-1">Quick Dock:</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-space-sm">
|
||||
<!-- Chat Pill -->
|
||||
<button class="flex items-center gap-space-xs bg-surface-container px-space-sm py-1.5 rounded hover:bg-surface-bright transition-colors" type="button">
|
||||
<span class="font-label-md text-label-md text-secondary">(。•̀ᴗ-)</span>
|
||||
<span class="font-title-md text-title-md text-on-surface">Chat</span>
|
||||
<span class="px-space-xs py-0 bg-primary-container text-on-primary font-label-sm text-label-sm rounded-full font-bold">2</span>
|
||||
</button>
|
||||
<!-- Notes Pill -->
|
||||
<button class="flex items-center gap-space-xs bg-surface-container px-space-sm py-1.5 rounded hover:bg-surface-bright transition-colors" type="button">
|
||||
<span class="font-label-md text-label-md text-tertiary">[✦]</span>
|
||||
<span class="font-title-md text-title-md text-on-surface">Notes</span>
|
||||
<span class="px-space-xs py-0 bg-tertiary-container text-on-tertiary-container font-label-sm text-label-sm rounded-full font-bold">1</span>
|
||||
</button>
|
||||
<!-- Room Pill -->
|
||||
<button class="flex items-center gap-space-xs bg-surface-container px-space-sm py-1.5 rounded hover:bg-surface-bright transition-colors" type="button">
|
||||
<span class="font-label-md text-label-md text-secondary">[屋]</span>
|
||||
<span class="font-title-md text-title-md text-on-surface">Room</span>
|
||||
<span class="font-label-sm text-label-sm text-secondary">calm</span>
|
||||
</button>
|
||||
<!-- Alerts Pill -->
|
||||
<button class="flex items-center gap-space-xs bg-surface-container px-space-sm py-1.5 rounded hover:bg-surface-bright transition-colors" type="button">
|
||||
<span class="font-label-md text-label-md text-primary">(°o°)</span>
|
||||
<span class="font-title-md text-title-md text-on-surface">Alerts</span>
|
||||
<span class="px-space-xs py-0 bg-primary-container text-on-primary font-label-sm text-label-sm rounded-full font-bold">4</span>
|
||||
</button>
|
||||
<!-- Diary Pill (Locked) -->
|
||||
<button class="flex items-center gap-space-xs bg-surface-container-low opacity-60 px-space-sm py-1.5 rounded cursor-not-allowed" title="Companion Bond Level 85 Required" type="button">
|
||||
<span class="font-label-md text-label-md text-outline">[記]</span>
|
||||
<span class="font-title-md text-title-md text-outline">Diary</span>
|
||||
<span class="material-symbols-outlined text-xs text-outline">lock</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// Micro-interactions for reactions and pin toggles
|
||||
function triggerReaction(type) {
|
||||
const feedback = {
|
||||
poke: 'Felt swats your mouse cursor away! (`Д´)',
|
||||
snack: 'Felt munches on the snack happily! (๑´ڡ`๑)',
|
||||
pat: 'Felt blushes slightly and looks away... (*/ω\*)',
|
||||
sleep: 'Felt curls up into your taskbar corner. zzz...'
|
||||
};
|
||||
alert(feedback[type] || 'Felt acknowledges your presence.');
|
||||
}
|
||||
|
||||
function playVoiceLine(name) {
|
||||
const lines = {
|
||||
smug: '♪ Smug giggle echoing through headphones...',
|
||||
sigh: '♪ Dramatic exaggerated sigh plays...',
|
||||
wakeup: '♪ Loud bell chime & frantic tapping sounds!'
|
||||
};
|
||||
alert(lines[name] || '♪ Playing sound clip...');
|
||||
}
|
||||
|
||||
const pinBtn = document.getElementById('pin-btn');
|
||||
if (pinBtn) {
|
||||
pinBtn.addEventListener('click', function() {
|
||||
const textSpan = this.querySelector('span:last-child');
|
||||
if (textSpan.textContent === 'PINNED') {
|
||||
textSpan.textContent = 'UNPINNED';
|
||||
this.classList.remove('text-primary');
|
||||
this.classList.add('text-on-surface-variant');
|
||||
} else {
|
||||
textSpan.textContent = 'PINNED';
|
||||
this.classList.remove('text-on-surface-variant');
|
||||
this.classList.add('text-primary');
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</div></main></div></body></html>
|
||||
|
After Width: | Height: | Size: 582 KiB |
@@ -0,0 +1,230 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" name="viewport"/><meta content="mobile_tab" name="shell-type"/><link href="https://fonts.googleapis.com" rel="preconnect"/><link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/><link href="https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Mochiy+Pop+One&family=Zen+Maru+Gothic:wght@400;500;700&display=swap" rel="stylesheet"/><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&display=swap" rel="stylesheet"/><script src="https://cdn.tailwindcss.com"></script><script id="tailwind-config">tailwind.config = { darkMode: "class", theme: { extend: { colors: { "on-error": "#690005", "on-tertiary-container": "#531300", "tertiary-fixed": "#ffdbd0", "primary": "#ffb2bd", "on-primary-container": "#5a001f", "surface-container-lowest": "#000e23", "surface-container-highest": "#233550", "inverse-on-surface": "#1e314b", "on-surface": "#d4e3ff", "primary-container": "#f7577c", "background": "#00132c", "on-background": "#d4e3ff", "error-container": "#93000a", "surface": "#00132c", "on-secondary-fixed-variant": "#304e2f", "inverse-surface": "#d4e3ff", "secondary": "#add0a7", "surface-container-high": "#182b44", "on-secondary-fixed": "#042107", "secondary-container": "#304e2f", "surface-dim": "#00132c", "error": "#ffb4ab", "tertiary": "#ffb59e", "outline": "#a7898d", "outline-variant": "#594044", "surface-container-low": "#071c35", "primary-fixed": "#ffd9dd", "surface-bright": "#283a54", "on-secondary": "#1a371a", "on-tertiary": "#5e1700", "on-error-container": "#ffdad6", "secondary-fixed": "#c8ecc2", "surface-variant": "#233550", "on-tertiary-fixed": "#3a0a00", "on-tertiary-fixed-variant": "#7e2c10", "on-primary": "#670024", "on-surface-variant": "#e0bec2", "tertiary-container": "#dd7351", "on-secondary-container": "#9cbe97", "tertiary-fixed-dim": "#ffb59e", "surface-tint": "#ffb2bd", "on-primary-fixed-variant": "#900036", "surface-container": "#0c2039", "inverse-primary": "#b3224c", "primary-fixed-dim": "#ffb2bd", "secondary-fixed-dim": "#add0a7", "on-primary-fixed": "#400013" }, borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" }, spacing: { "space-sm": "0.5rem", "margin": "1rem", "space-md": "0.875rem", "gutter": "0.75rem", "space-xs": "0.25rem", "space-lg": "1.25rem", "space-xl": "1.75rem" }, fontFamily: { "headline-lg": ["Mochiy Pop One"], "body-diary": ["Klee One"], "label-md": ["Zen Maru Gothic"], "headline-md": ["Mochiy Pop One"], "label-sm": ["Zen Maru Gothic"], "title-md": ["Zen Maru Gothic"], "body-lg": ["Zen Maru Gothic"], "body-md": ["Zen Maru Gothic"], "display-lg": ["Mochiy Pop One"] }, fontSize: { "headline-lg": ["22px", { "lineHeight": "30px", "fontWeight": "400" }], "body-diary": ["15px", { "lineHeight": "26px", "fontWeight": "600" }], "label-md": ["12px", { "lineHeight": "16px", "letterSpacing": "0.04em", "fontWeight": "700" }], "headline-md": ["18px", { "lineHeight": "26px", "fontWeight": "400" }], "label-sm": ["10px", { "lineHeight": "14px", "letterSpacing": "0.06em", "fontWeight": "700" }], "title-md": ["16px", { "lineHeight": "24px", "fontWeight": "700" }], "body-lg": ["15px", { "lineHeight": "24px", "fontWeight": "500" }], "body-md": ["13px", { "lineHeight": "20px", "fontWeight": "400" }], "display-lg": ["32px", { "lineHeight": "40px", "fontWeight": "400" }] } } } }</script><style>@layer base{html,body{width:100%;margin:0;padding:0;background-color:#00132c;color:#d4e3ff;font-family:'Zen Maru Gothic',sans-serif;}.pb-safe{padding-bottom:env(safe-area-inset-bottom,0px);}.pt-safe{padding-top:env(safe-area-inset-top,0px);}main>:first-child{margin-top:0!important;}main>:last-child{margin-bottom:0!important;}}::-webkit-scrollbar{display:none;}</style></head><body class="bg-surface text-on-surface flex flex-col min-h-screen antialiased selection:bg-primary-container selection:text-on-primary-container"><header class="fixed top-0 w-full z-50 bg-surface/90 backdrop-blur-xl pt-safe shadow-[0_4px_16px_rgba(0,14,35,0.85)]"><div class="h-20 px-space-md flex flex-col justify-between py-space-xs"><div class="flex items-center justify-between text-on-surface-variant font-label-sm text-label-sm"><div class="flex items-center gap-space-xs"><span>23:42</span><span class="text-secondary font-bold">✦</span><span class="tracking-wider">TOKYO</span></div><div class="flex items-center gap-space-sm"><span class="flex items-center gap-1"><span class="w-1.5 h-1.5 rounded-full bg-secondary animate-pulse"></span><span class="font-label-sm text-label-sm text-secondary">SYNCED</span></span><span class="material-symbols-outlined text-sm text-on-surface-variant">battery_5_bar</span><span class="material-symbols-outlined text-sm text-on-surface-variant">wifi</span></div></div><div class="flex items-center justify-between gap-space-sm"><div class="flex items-center gap-space-sm"><div class="flex items-center gap-space-xs bg-surface-container-high px-space-sm py-0.5 rounded-full shadow-[0_2px_4px_rgba(0,0,0,0.4)]"><span class="w-2 h-2 rounded-full bg-secondary"></span><span class="font-label-sm text-label-sm text-on-surface font-bold">Felt (。•̀ᴗ-)✧</span><span class="font-label-sm text-label-sm text-on-surface-variant">slacking off on desktop</span></div></div><div class="flex items-center gap-space-sm"><span class="font-headline-md text-headline-md text-pLine truncated
|
||||
<!-- Desktop Activity Strip (Physical status bar) -->
|
||||
<div class="w-full bg-surface-container-high rounded-xl p-space-sm shadow-[0_4px_12px_rgba(0,14,35,0.7)] flex flex-col gap-1.5">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-2 h-2 rounded-full bg-secondary"></span>
|
||||
<span class="font-label-sm text-label-sm text-secondary font-bold tracking-wider uppercase">Live Activity</span>
|
||||
</div>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant bg-surface-container-lowest px-2 py-0.5 rounded-full">Desktop Link Active</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 overflow-x-auto text-on-surface font-body-md text-body-md scrollbar-none">
|
||||
<span class="font-body-md text-body-md whitespace-nowrap text-on-surface">Sitting on: <span class="text-secondary font-bold">Chrome (VS Code minimized)</span></span>
|
||||
<span class="text-outline">✦</span>
|
||||
<span class="whitespace-nowrap text-on-surface-variant">Vol: 42%</span>
|
||||
<span class="text-outline">✦</span>
|
||||
<span class="whitespace-nowrap text-tertiary font-bold">Mood: Smug & well-fed (・`ω´・)</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Felt's Central Atelier Frame -->
|
||||
<div class="relative w-full bg-surface-container rounded-xl shadow-[0_6px_20px_rgba(0,14,35,0.9)] overflow-hidden flex flex-col">
|
||||
<!-- Top Bar Frame Accents -->
|
||||
<div class="flex items-center justify-between px-space-md py-space-xs bg-surface-container-low">
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-primary-container"></span>
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-tertiary-container"></span>
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-secondary-container"></span>
|
||||
</div>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant tracking-widest">FELT.ATELIER // DESK_SPRITE</span>
|
||||
<div class="flex items-center gap-1 text-secondary">
|
||||
<span class="font-label-sm text-label-sm">LVL. 14</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Speech & Thought Bubble Container -->
|
||||
<div class="p-space-md pb-0 z-10">
|
||||
<div class="relative w-full bg-surface-container-highest rounded-xl p-space-md shadow-[0_4px_0_#071c35]">
|
||||
<!-- Speech Indicator Pip -->
|
||||
<div class="absolute -bottom-2 left-10 w-4 h-4 bg-surface-container-highest rotate-45"></div>
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="bg-primary text-on-primary font-label-sm text-[10px] px-2 py-0.5 rounded-full uppercase tracking-wider font-bold">Felt</span>
|
||||
<span class="text-on-surface-variant font-label-sm text-label-sm tracking-wide">thought bubble</span>
|
||||
</div>
|
||||
<span class="text-secondary font-label-sm text-label-sm tracking-wider">NOW</span>
|
||||
</div>
|
||||
<p class="font-headline-md text-headline-md text-on-surface leading-snug" id="felt-dialogue">
|
||||
“You've been staring at that terminal for two hours. Want me to mess with your cursor so you actually stretch? (¬‿¬)”
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Felt Live Avatar Showcase -->
|
||||
<div class="relative w-full flex justify-center items-end px-space-md pt-space-xs pb-0">
|
||||
<!-- Ambient Backing Glow Accent -->
|
||||
<div class="absolute w-56 h-56 rounded-full bg-surface-container-high -bottom-10 pointer-events-none"></div>
|
||||
<!-- Character Portrait Placeholder -->
|
||||
<div class="relative z-10 w-64 h-64 flex items-end justify-center">
|
||||
<img alt="High quality anime illustration avatar of Felt" class="w-full h-full object-contain filter drop-shadow-[0_10px_16px_rgba(0,14,35,0.85)] cursor-pointer transition-transform duration-150 active:scale-95" id="felt-avatar" onclick="pokeCheek()" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB1r4wrPXXwj5FO3xwta5nczQZwgGuWtCnOuiND3m5NFnL2Nj6XJvPPee6SKIo2Q-pXviC9nbIFI96gPMps4vn3Q6LkK7-31SKnRReOdCxarUa_BEXeIYO_230vmm_gHjR2vtd9itQD6ELKQOIy12uT-AWOovQsK6HqXsVTeodGAkzrg2vAhU_vBaetHMiK1H3gHcQTELpPC8JMb0bPY2YlqTrKxM0XbFSUScxdFY71sCkgUroVaIlS"/>
|
||||
</div>
|
||||
<!-- Interactive Quick Poke Stamp Button (Floated over corner) -->
|
||||
<button class="absolute bottom-4 right-4 z-20 bg-primary-container hover:bg-inverse-primary text-on-primary font-title-md text-title-md px-3.5 py-2 rounded-xl shadow-[0_3px_0_#900036] active:translate-y-0.5 active:shadow-none transition-all flex items-center gap-1.5" onclick="pokeCheek()" type="button">
|
||||
<span class="material-symbols-outlined text-[18px]">touch_app</span>
|
||||
<span>Poke cheek</span>
|
||||
</button>
|
||||
<!-- Kaomoji Floating Reactive Tag -->
|
||||
<div class="opacity-0 pointer-events-none absolute top-12 right-8 z-30 bg-tertiary-container text-on-tertiary-container font-headline-md text-headline-md px-3 py-1 rounded-xl shadow-[0_2px_0_#531300] transition-opacity duration-300" id="poke-reaction">
|
||||
( >д<) 痛っ!
|
||||
</div>
|
||||
</div>
|
||||
<!-- Quick Dialogue / Action Chips Row -->
|
||||
<div class="p-space-md pt-2 bg-surface-container-low flex flex-col gap-2">
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="text-secondary font-label-sm text-label-sm font-bold tracking-wider uppercase">Quick nudges</span>
|
||||
<span class="text-outline text-label-sm">✦</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 overflow-x-auto scrollbar-none pb-0.5">
|
||||
<button class="whitespace-nowrap bg-surface-container-high hover:bg-secondary-container text-on-surface hover:text-on-secondary-container font-label-md text-label-md px-3 py-2 rounded-xl shadow-[0_2px_0_#071c35] active:translate-y-0.5 transition-all flex items-center gap-1.5" onclick="setResponse('tea')" type="button">
|
||||
<span class="text-secondary">✦</span>
|
||||
<span>Make some tea</span>
|
||||
</button>
|
||||
<button class="whitespace-nowrap bg-surface-container-high hover:bg-secondary-container text-on-surface hover:text-on-secondary-container font-label-md text-label-md px-3 py-2 rounded-xl shadow-[0_2px_0_#071c35] active:translate-y-0.5 transition-all flex items-center gap-1.5" onclick="setResponse('deadline')" type="button">
|
||||
<span class="text-tertiary">✦</span>
|
||||
<span>Check my deadlines</span>
|
||||
</button>
|
||||
<button class="whitespace-nowrap bg-surface-container-high hover:bg-secondary-container text-on-surface hover:text-on-secondary-container font-label-md text-label-md px-3 py-2 rounded-xl shadow-[0_2px_0_#071c35] active:translate-y-0.5 transition-all flex items-center gap-1.5" onclick="setResponse('work')" type="button">
|
||||
<span class="text-primary">✦</span>
|
||||
<span>Shh, I'm working</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Physical Desk Sticky Notes Cluster -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center justify-between px-1">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="material-symbols-outlined text-[18px] text-tertiary">push_pin</span>
|
||||
<span class="font-headline-md text-headline-md text-on-surface">Pinned on Desk</span>
|
||||
</div>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant font-bold">2 Memos</span>
|
||||
</div>
|
||||
<!-- Cluster Grid of Paper Notes -->
|
||||
<div class="grid grid-cols-2 gap-space-md pt-2">
|
||||
<!-- Sticky Note 1: Matcha Milk -->
|
||||
<div class="relative bg-[#F5F0F6] rounded-lg p-space-md shadow-[0_4px_0_rgba(8,34,69,0.55)] rotate-[-1.5deg] flex flex-col justify-between min-h-[140px]">
|
||||
<!-- Salmon Washi Tape Strip on Top Center -->
|
||||
<div class="absolute -top-2.5 left-1/2 -translate-x-1/2 w-16 h-5 bg-tertiary-container rounded-sm shadow-[0_1px_2px_rgba(0,0,0,0.3)] rotate-[1deg] flex items-center justify-center">
|
||||
<span class="font-label-sm text-[8px] text-on-tertiary-container tracking-widest uppercase font-bold">URGENT</span>
|
||||
</div>
|
||||
<div class="pt-2">
|
||||
<p class="font-body-diary text-body-diary text-[#082245] leading-snug">
|
||||
Buy matcha milk!<br/>
|
||||
(you forgot yesterday... again (´・ω・`))
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-2">
|
||||
<span class="font-label-sm text-[10px] text-[#594044]">09:15 AM</span>
|
||||
<span class="font-label-sm text-[11px] text-[#082245] font-bold">★ -Felt</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sticky Note 2: Git Roast -->
|
||||
<div class="relative bg-[#F5F0F6] rounded-lg p-space-md shadow-[0_4px_0_rgba(8,34,69,0.55)] rotate-[2deg] flex flex-col justify-between min-h-[140px]">
|
||||
<!-- Salmon Washi Tape Strip on Top Center -->
|
||||
<div class="absolute -top-2.5 left-1/2 -translate-x-1/2 w-16 h-5 bg-tertiary-container rounded-sm shadow-[0_1px_2px_rgba(0,0,0,0.3)] rotate-[-2deg] flex items-center justify-center">
|
||||
<span class="font-label-sm text-[8px] text-on-tertiary-container tracking-widest uppercase font-bold">MEMO</span>
|
||||
</div>
|
||||
<div class="pt-2">
|
||||
<p class="font-body-diary text-body-diary text-[#082245] leading-snug">
|
||||
Your git commit message was terrible lol.<br/>
|
||||
"fix stuff"? Really? (・`ω´・)
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-2">
|
||||
<span class="font-label-sm text-[10px] text-[#594044]">Yesterday</span>
|
||||
<span class="font-label-sm text-[11px] text-[#082245] font-bold">★ -Felt</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Late-Night Atelier Diary Snippet Card -->
|
||||
<div class="w-full bg-surface-container rounded-xl p-space-md shadow-[0_4px_12px_rgba(0,14,35,0.7)] flex flex-col gap-2 relative">
|
||||
<!-- Pinned Stamp Label -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="material-symbols-outlined text-[18px] text-secondary">book_2</span>
|
||||
<span class="font-headline-md text-headline-md text-on-surface">Felt's Midnight Log</span>
|
||||
</div>
|
||||
<span class="bg-secondary-container text-on-secondary-container font-label-sm text-label-sm px-2 py-0.5 rounded-full font-bold">ENTRY #108</span>
|
||||
</div>
|
||||
<!-- Hand-stitched styled diary text area -->
|
||||
<div class="bg-surface-container-lowest rounded-lg p-space-md">
|
||||
<p class="font-body-diary text-body-diary text-on-surface leading-relaxed">
|
||||
“The room is quiet now. Rain outside against the window sill. They finally closed that huge spreadsheet and put on lofi beats. I won't steal the mouse pointer anymore tonight... maybe just nudge their water glass closer. ( *´꒳`*)”
|
||||
</p>
|
||||
</div>
|
||||
<!-- Interactive Desk Toggles -->
|
||||
<div class="flex items-center justify-between pt-1">
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant">Felt Companion Sync: 99.4%</span>
|
||||
<button class="bg-surface-container-high hover:bg-surface-container-highest text-secondary font-label-sm text-label-sm px-3 py-1.5 rounded-lg shadow-[0_2px_0_#071c35] active:translate-y-0.5 transition-all flex items-center gap-1" id="sleep-toggle-btn" onclick="toggleSleep()" type="button">
|
||||
<span class="material-symbols-outlined text-sm">bedtime</span>
|
||||
<span id="sleep-btn-text">Tell her goodnight</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
let pokeIndex = 0;
|
||||
const pokeResponses = [
|
||||
{ text: "Hey! Don't just poke my cheek like it's a marshmallow! ( >д<)", tag: "( >д<) 痛っ!" },
|
||||
{ text: "Do that one more time and I will invert your display colors! (・`ω´・)", tag: "(・`ω´・) 怒り" },
|
||||
{ text: "Hehe... warm fingers. But seriously, go stretch your back! ( *´꒳`*)", tag: "( *´꒳`*) ふふ" },
|
||||
{ text: "You're procrastinating again. I see you switching tabs! (¬‿¬)", tag: "(¬‿¬) 見てるぞ" }
|
||||
];
|
||||
|
||||
function pokeCheek() {
|
||||
const dialogueEl = document.getElementById('felt-dialogue');
|
||||
const reactionEl = document.getElementById('poke-reaction');
|
||||
const avatarEl = document.getElementById('felt-avatar');
|
||||
|
||||
const res = pokeResponses[pokeIndex % pokeResponses.length];
|
||||
pokeIndex++;
|
||||
|
||||
if (dialogueEl) {
|
||||
dialogueEl.innerHTML = '“' + res.text + '”';
|
||||
}
|
||||
|
||||
if (reactionEl) {
|
||||
reactionEl.innerText = res.tag;
|
||||
reactionEl.classList.remove('opacity-0');
|
||||
reactionEl.classList.add('opacity-100');
|
||||
setTimeout(() => {
|
||||
reactionEl.classList.remove('opacity-100');
|
||||
reactionEl.classList.add('opacity-0');
|
||||
}, 1400);
|
||||
}
|
||||
|
||||
if (avatarEl) {
|
||||
avatarEl.classList.add('scale-95');
|
||||
setTimeout(() => avatarEl.classList.remove('scale-95'), 150);
|
||||
}
|
||||
}
|
||||
|
||||
function setResponse(type) {
|
||||
const dialogueEl = document.getElementById('felt-dialogue');
|
||||
if (!dialogueEl) return;
|
||||
|
||||
if (type === 'tea') {
|
||||
dialogueEl.innerHTML = '“Hojicha or roasted barley? Put the kettle on, I'll keep your music player on shuffle! ( *´꒳`*)”';
|
||||
} else if (type === 'deadline') {
|
||||
dialogueEl.innerHTML = '“Two PR reviews and that wireframe by tomorrow noon. Don't panic, you have me as your co-pilot! (。•̀ᴗ-)✧”';
|
||||
} else if (type === 'work') {
|
||||
dialogueEl.innerHTML = '“Fine, fine! Going into stealth companion mode. I won't make a sound... unless you slack off! (¬‿¬)”';
|
||||
}
|
||||
}
|
||||
|
||||
let isSleeping = false;
|
||||
function toggleSleep() {
|
||||
const btnText = document.getElementById('sleep-btn-text');
|
||||
const dialogueEl = document.getElementById('felt-dialogue');
|
||||
isSleeping = !isSleeping;
|
||||
|
||||
if (isSleeping) {
|
||||
if (btnText) btnText.innerText = "Wake her up";
|
||||
if (dialogueEl) dialogueEl.innerHTML = '“Zzz... cursor secured... tabs closed... good work today... ( ˘ω˘ )zzZ”';
|
||||
} else {
|
||||
if (btnText) btnText.innerText = "Tell her goodnight";
|
||||
if (dialogueEl) dialogueEl.innerHTML = '“*yawn* Ready to tackle another late-night sprint? Let's go! ( •̀ᴗ•́ )و”';
|
||||
}
|
||||
}
|
||||
</script></main><nav class="fixed bottom-0 w-full z-50 pb-safe bg-surface-container-high/95 backdrop-blur-xl shadow-[0_-4px_20px_rgba(0,14,35,0.9)]" data-active-classes="text-primary font-bold"><div class="flex items-center justify-around h-16 px-space-xs"><a class="relative flex flex-col items-center justify-center min-w-[56px] min-h-[44px] gap-0.5 text-on-surface-variant hover:text-on-surface transition-colors" data-path="chat" href="#"><div class="relative flex items-center justify-center"><span class="material-symbols-outlined text-[22px]">chat_bubble</span><span class="absolute -top-1 -right-2 min-w-[16px] h-4 px-1 rounded-full bg-primary-container text-on-primary font-label-sm text-[9px] leading-none flex items-center justify-center shadow-[0_2px_0_#900036]">2</span></div><span class="font-label-sm text-label-sm">Chat</span></a><a class="relative flex flex-col items-center justify-center min-w-[56px] min-h-[44px] gap-0.5 text-on-surface-variant hover:text-on-surface transition-colors" data-path="notes" href="#"><div class="relative flex items-center justify-center"><span class="material-symbols-outlined text-[22px]">sticky_note_2</span><span class="absolute -top-1 -right-2 min-w-[16px] h-4 px-1 rounded-full bg-tertiary-container text-on-tertiary-container font-label-sm text-[9px] leading-none flex items-center justify-center shadow-[0_2px_0_#531300]">1</span></div><span class="font-label-sm text-label-sm">Notes</span></a><a aria-current="page" class="relative flex flex-col items-center justify-center min-w-[56px] min-h-[44px] gap-0.5 transition-colors text-primary font-bold" data-path="companion-room" href="#"><div class="relative flex items-center justify-center p-1 rounded-xl bg-surface-container-lowest text-secondary shadow-[0_2px_0_#304e2f]"><span class="material-symbols-outlined text-[24px]">cottage</span></div><span class="font-label-sm text-label-sm text-secondary font-bold">Room</span></a><a class="relative flex flex-col items-center justify-center min-w-[56px] min-h-[44px] gap-0.5 text-on-surface-variant hover:text-on-surface transition-colors" data-path="alerts" href="#"><div class="relative flex items-center justify-center"><span class="material-symbols-outlined text-[22px]">notifications</span><span class="absolute -top-1 -right-2 min-w-[16px] h-4 px-1 rounded-full bg-primary-container text-on-primary font-label-sm text-[9px] leading-none flex items-center justify-center shadow-[0_2px_0_#900036]">4</span></div><span class="font-label-sm text-label-sm">Alerts</span></a><a class="relative flex flex-col items-center justify-center min-w-[56px] min-h-[44px] gap-0.5 text-on-surface-variant hover:text-on-surface transition-colors" data-path="diary-lock" href="#"><div class="relative flex items-center justify-center"><span class="material-symbols-outlined text-[22px]">book_2</span></div><span class="font-label-sm text-label-sm">Diary</span></a></div></nav></body></html>
|
||||
|
After Width: | Height: | Size: 360 KiB |
|
After Width: | Height: | Size: 1.3 MiB |
@@ -0,0 +1,199 @@
|
||||
---
|
||||
name: Nocturnal Atelier
|
||||
colors:
|
||||
surface: '#00132c'
|
||||
surface-dim: '#00132c'
|
||||
surface-bright: '#283a54'
|
||||
surface-container-lowest: '#000e23'
|
||||
surface-container-low: '#071c35'
|
||||
surface-container: '#0c2039'
|
||||
surface-container-high: '#182b44'
|
||||
surface-container-highest: '#233550'
|
||||
on-surface: '#d4e3ff'
|
||||
on-surface-variant: '#e0bec2'
|
||||
inverse-surface: '#d4e3ff'
|
||||
inverse-on-surface: '#1e314b'
|
||||
outline: '#a7898d'
|
||||
outline-variant: '#594044'
|
||||
surface-tint: '#ffb2bd'
|
||||
primary: '#ffb2bd'
|
||||
on-primary: '#670024'
|
||||
primary-container: '#f7577c'
|
||||
on-primary-container: '#5a001f'
|
||||
inverse-primary: '#b3224c'
|
||||
secondary: '#add0a7'
|
||||
on-secondary: '#1a371a'
|
||||
secondary-container: '#304e2f'
|
||||
on-secondary-container: '#9cbe97'
|
||||
tertiary: '#ffb59e'
|
||||
on-tertiary: '#5e1700'
|
||||
tertiary-container: '#dd7351'
|
||||
on-tertiary-container: '#531300'
|
||||
error: '#ffb4ab'
|
||||
on-error: '#690005'
|
||||
error-container: '#93000a'
|
||||
on-error-container: '#ffdad6'
|
||||
primary-fixed: '#ffd9dd'
|
||||
primary-fixed-dim: '#ffb2bd'
|
||||
on-primary-fixed: '#400013'
|
||||
on-primary-fixed-variant: '#900036'
|
||||
secondary-fixed: '#c8ecc2'
|
||||
secondary-fixed-dim: '#add0a7'
|
||||
on-secondary-fixed: '#042107'
|
||||
on-secondary-fixed-variant: '#304e2f'
|
||||
tertiary-fixed: '#ffdbd0'
|
||||
tertiary-fixed-dim: '#ffb59e'
|
||||
on-tertiary-fixed: '#3a0a00'
|
||||
on-tertiary-fixed-variant: '#7e2c10'
|
||||
background: '#00132c'
|
||||
on-background: '#d4e3ff'
|
||||
surface-variant: '#233550'
|
||||
typography:
|
||||
display-lg:
|
||||
fontFamily: Mochiy Pop One
|
||||
fontSize: 32px
|
||||
fontWeight: '400'
|
||||
lineHeight: 40px
|
||||
headline-lg:
|
||||
fontFamily: Mochiy Pop One
|
||||
fontSize: 22px
|
||||
fontWeight: '400'
|
||||
lineHeight: 30px
|
||||
headline-md:
|
||||
fontFamily: Mochiy Pop One
|
||||
fontSize: 18px
|
||||
fontWeight: '400'
|
||||
lineHeight: 26px
|
||||
title-md:
|
||||
fontFamily: Zen Maru Gothic
|
||||
fontSize: 16px
|
||||
fontWeight: '700'
|
||||
lineHeight: 24px
|
||||
body-lg:
|
||||
fontFamily: Zen Maru Gothic
|
||||
fontSize: 15px
|
||||
fontWeight: '500'
|
||||
lineHeight: 24px
|
||||
body-md:
|
||||
fontFamily: Zen Maru Gothic
|
||||
fontSize: 13px
|
||||
fontWeight: '400'
|
||||
lineHeight: 20px
|
||||
body-diary:
|
||||
fontFamily: Klee One
|
||||
fontSize: 15px
|
||||
fontWeight: '600'
|
||||
lineHeight: 26px
|
||||
label-md:
|
||||
fontFamily: Zen Maru Gothic
|
||||
fontSize: 12px
|
||||
fontWeight: '700'
|
||||
lineHeight: 16px
|
||||
letterSpacing: 0.04em
|
||||
label-sm:
|
||||
fontFamily: Zen Maru Gothic
|
||||
fontSize: 10px
|
||||
fontWeight: '700'
|
||||
lineHeight: 14px
|
||||
letterSpacing: 0.06em
|
||||
rounded:
|
||||
sm: 0.25rem
|
||||
DEFAULT: 0.5rem
|
||||
md: 0.75rem
|
||||
lg: 1rem
|
||||
xl: 1.5rem
|
||||
full: 9999px
|
||||
spacing:
|
||||
gutter: 0.75rem
|
||||
margin: 1rem
|
||||
space-xs: 0.25rem
|
||||
space-sm: 0.5rem
|
||||
space-md: 0.875rem
|
||||
space-lg: 1.25rem
|
||||
space-xl: 1.75rem
|
||||
---
|
||||
|
||||
## Brand & Style
|
||||
|
||||
This design system crafts an intimate, tactile desktop sanctuary centered on an anime companion living directly on the user's workspace. It rejects the sterile, homogenized look of SaaS dashboards, corporate glassy overlays, and soulless modern gradients. Instead, it evokes the sensory warmth of a late-night study room: physical stationery, washi tape swatches, matte paper sticky notes, and the cozy narrative pacing of an interactive visual novel.
|
||||
|
||||
The personality balances quiet nocturnal comfort with expressive whimsy. The UI should make users feel accompanied rather than managed. Every surface behaves like physical material pinned or rested over a dark midnight canvas. In place of standard Unicode emojis, communication is driven by Japanese kaomoji (`( *´꒳\`*)`, `(。•̀ᴗ-)✧`), hand-drawn micro-glyphs, and embroidered status patches.
|
||||
|
||||
## Colors
|
||||
|
||||
The palette simulates a softly lit desk in the dead of night, accented by colorful desk stationary, fabrics, and companion elements:
|
||||
|
||||
- **Canvas & Backgrounds**:
|
||||
- Root Desktop Void: `#051A33` (deepest nocturnal ground)
|
||||
- Surface Tier 1 (Window & Shell Panes): `#082245`
|
||||
- Surface Tier 2 (Panels, Drawers, Companion Stage): `#0B2C56`
|
||||
- Surface Headers & Anchors: `#083D77` (dense, grounding Navy)
|
||||
- Surface Paper / Light Layer (Stationery Notes, Pinned Slips): `#F5F0F6` (Lilac-White)
|
||||
- **Accents & Personality**:
|
||||
- **Raspberry** (`#DA4167`): High-intensity focal point for vital alerts, unread counters, urgent pings, and companion affinity hearts.
|
||||
- **Sage** (`#7A9B76`): Calming, comforting signature hue reminiscent of the companion's oversized hoodie. Used for status indicators, peaceful tags, active dialogue selections, and soft highlights.
|
||||
- **Salmon** (`#F78764`): Warm physical stationery hue used for faux washi tape headers, pinned bookmark strips, and cheerful stickers.
|
||||
- **Borders & Dividers**:
|
||||
- Dark Structural Border: `#133863`
|
||||
- Tactile Muted Sage Line: `rgba(122, 155, 118, 0.35)`
|
||||
- Paper Edge Inset: `rgba(8, 61, 119, 0.12)`
|
||||
|
||||
## Typography
|
||||
|
||||
The typographic hierarchy establishes clear structural emotional roles:
|
||||
|
||||
- **Display & Section Titles (`Mochiy Pop One`)**: Plump, chubby, character-driven letterforms for panel window titles, dialogue header names, and milestone achievements. Used sparingly to avoid visual fatigue.
|
||||
- **Interface & Dialogue System (`Zen Maru Gothic`)**: Rounded Japanese gothic styling brings softness without sacrificing UI legibility. Serves as the primary operational voice for buttons, list items, menus, and system status readouts.
|
||||
- **Notes, Companion Diary & Letters (`Klee One`)**: Evocative, delicate penmanship. Reserved strictly for companion thought bubbles, saved sticky memos, diary entries, personal letters, and intimate handwritten marginalia.
|
||||
|
||||
## Layout & Spacing
|
||||
|
||||
Because this interface operates as an ambient desktop companion and floating widget suite, layout revolves around modular floating palettes, HUD docks, and docked memo panels rather than static browser full-bleed layouts.
|
||||
|
||||
- **Modular Paneling**: Fixed-width floating windows (280px to 380px) and expandable bottom/side dock drawers.
|
||||
- **Rhythm**: Compact 4px base step (`0.25rem`), prioritizing snug, organized containment over cavernous empty space.
|
||||
- **Companion Proximity**: Dialogue panels maintain tight contextual anchoring (`space-sm` to `space-md`) relative to the companion's desktop sprite or avatar position.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
No blur or glassmorphism is permitted. Surfaces gain depth through physical stacking metaphors, hard-edged paper offsets, and deep nocturnal shadows:
|
||||
|
||||
- **Base Void (`#051A33`)**: Desktop ambient root.
|
||||
- **Layer 1 Shell (`#082245`)**: Structured window frame with a crisp 1.5px solid border in `#133863` and a grounded shadow: `0 4px 16px rgba(2, 10, 20, 0.65)`.
|
||||
- **Layer 2 Interior Card (`#0B2C56`)**: Inset containers with subtle top-highlight borders (`1px solid rgba(122, 155, 118, 0.2)`).
|
||||
- **Physical Stationery Overlay (`#F5F0F6`)**: Matte paper memos and prompt slips. They cast a sharp, tight drop shadow (`0 3px 0 rgba(8, 34, 69, 0.45)`) that simulates physical paper lying flat against dark cloth.
|
||||
- **Washi Tape Elements**: Tilted strips (`-1deg` to `1.5deg` rotation) overlaying corners of cards with a translucent tint (`rgba(247, 135, 100, 0.85)`), featuring serrated edge masks.
|
||||
|
||||
## Shapes
|
||||
|
||||
The geometry balances soft hand-cut corners with organic charm:
|
||||
|
||||
- **Windows & Outer Panels**: Rounded corners (`0.75rem` / 12px) give shells a soft toy-box contour.
|
||||
- **Inner Stationery & Slips**: Gentler corners (`0.375rem` / 6px) to emulate index cards and small paper swatches.
|
||||
- **Washi Strips & Tape Tags**: Sharper profiles (`2px`) with semi-notched zigzag or clipped vertical boundaries.
|
||||
- **Pill Counters & Badges**: Fully rounded capsules for unread badges, kaomoji mood chips, and affinity status gauges.
|
||||
|
||||
## Components
|
||||
|
||||
### Buttons
|
||||
- **Primary (Companion Action / Urgent)**: `#DA4167` fill with `#F5F0F6` text, bold `Zen Maru Gothic`. Box shadow has a 2px downward paper-press offset: `0 3px 0 #9E2644`. On active click, transitions down `2px` with zero shadow to mimic a mechanical stamp.
|
||||
- **Secondary (Cozy / Dialogue)**: `#0B2C56` base with a 1.5px `#7A9B76` border and `#F5F0F6` text. Hover shifts background to `#7A9B76` with `#051A33` text.
|
||||
- **Ghost / Minor**: Clear background, `#7A9B76` text, soft hover outline with kaomoji prefix.
|
||||
|
||||
### Chips & Washi Badges
|
||||
- **Status Chips**: Capsule-shaped pill badges (`#083D77`) with a solid 6px indicator dot in Sage (`#7A9B76`) or Raspberry (`#DA4167`).
|
||||
- **Washi Tape Tags**: `#F78764` fill with slightly irregular padding (e.g. 2px top, 10px sides), uppercase micro-labels in `#051A33`, angled `transform: rotate(-1.5deg)` anchored across the top edge of cards.
|
||||
|
||||
### Cards & Notes
|
||||
- **Dialogue / Interaction Box**: Deep `#082245` background with Navy `#083D77` speaker tag bar. Companion avatar sits nestled slightly breaking the top-left boundary.
|
||||
- **Sticky Memo / Diary Card**: `#F5F0F6` paper tone, text in dark `#082245` using `Klee One`. Never use vertical accent-strip borders on the left side; instead, use a faux Salmon tape strip pinned across the top center.
|
||||
|
||||
### Inputs & Text Areas
|
||||
- Nocturnal inset wells (`#051A33`) framed by a subtle 1px border (`#133863`). Focused state switches border to `#7A9B76` with an inner glow of `inset 0 1px 3px rgba(0,0,0,0.5)`. Caret color is vibrant `#DA4167`. Placeholder text in muted dusty lavender (`rgba(245, 240, 246, 0.4)`).
|
||||
|
||||
### Checkboxes & Radios
|
||||
- **Checkbox**: Soft rounded squares (`4px` radius) with `#0B2C56` background and `#7A9B76` border. Checked state renders a bold Raspberry (`#DA4167`) checkmark glyph or heart stamp.
|
||||
- **Radio Buttons**: Concentric circles; selected state features an inner solid dot of `#F78764`.
|
||||
|
||||
### Lists & Dialogue Choices
|
||||
- Interactive options are styled as notebook tabs or sticker choices. Hovering shifts the item rightwards by 4px accompanied by a small custom glyph indicator (`✦` or `(。•̀ᴗ-)`). Dividers between items use dashed, hand-stitched strokes (`1px dashed rgba(122, 155, 118, 0.25)`).
|
||||
|
After Width: | Height: | Size: 104 KiB |
|
After Width: | Height: | Size: 159 KiB |
|
After Width: | Height: | Size: 185 KiB |
|
After Width: | Height: | Size: 76 KiB |
|
After Width: | Height: | Size: 306 KiB |
|
After Width: | Height: | Size: 108 KiB |
|
After Width: | Height: | Size: 601 KiB |
|
After Width: | Height: | Size: 260 KiB |
|
After Width: | Height: | Size: 164 KiB |
|
After Width: | Height: | Size: 263 KiB |
|
After Width: | Height: | Size: 143 KiB |
|
After Width: | Height: | Size: 246 KiB |
@@ -76,6 +76,7 @@
|
||||
#media .tag { font-family: var(--mono); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
|
||||
#media audio { width: min(640px, 90%); }
|
||||
#media img { max-width: 100%; max-height: 80%; object-fit: contain; }
|
||||
#media iframe { width: 100%; flex: 1; border: 0; background: #000; display: none; }
|
||||
#fitbox { display: none; }
|
||||
#fitbox .xyz { display: grid; grid-template-columns: 34px 1fr 1fr 1fr; gap: 6px; align-items: center; margin-bottom: 6px; }
|
||||
#fitbox input { width: 100%; font: 12px var(--mono); color: var(--text); background: #25292e; border: 1px solid var(--line); padding: 5px 6px; }
|
||||
@@ -98,7 +99,7 @@
|
||||
<div id="media"><div class="tag" id="media-tag"></div><div class="line" id="media-line"></div>
|
||||
<audio id="audio" controls preload="auto"></audio>
|
||||
<button id="refbtn" class="cut">▶ Neutral <kbd>N</kbd></button><audio id="refaudio" preload="auto"></audio>
|
||||
<img id="image" alt=""></div>
|
||||
<img id="image" alt=""><iframe id="page" title="live mockup"></iframe></div>
|
||||
<div id="grid"></div>
|
||||
</div>
|
||||
<aside>
|
||||
@@ -415,11 +416,16 @@ async function open(name) {
|
||||
$("media-line").textContent = it.info?.text || "";
|
||||
audio.style.display = it.kind === "audio" ? "block" : "none";
|
||||
image.style.display = it.kind === "image" ? "block" : "none";
|
||||
const page = $("page");
|
||||
page.style.display = it.kind === "page" ? "block" : "none";
|
||||
if (it.kind !== "page" && page.src) page.removeAttribute("src");
|
||||
if (it.kind === "page") $("media-line").textContent = it.info?.about || "";
|
||||
$("refaudio").pause();
|
||||
$("refbtn").style.display = it.info?.reference ? "block" : "none";
|
||||
if (it.info?.reference) $("refaudio").src = "/refs/" + encodeURIComponent(it.info.reference);
|
||||
$("animbox").style.display = "none";
|
||||
if (it.kind === "audio") { audio.src = url; audio.play().catch(() => {}); }
|
||||
else if (it.kind === "page") { if (page.src !== new URL(url, location.href).href) page.src = url; page.focus(); }
|
||||
else image.src = url;
|
||||
return;
|
||||
}
|
||||
@@ -493,6 +499,7 @@ function showGrid() {
|
||||
return `<h2 class="s-${st}">${title} · ${list.length}</h2><div class="cards">` + list.map((i) =>
|
||||
`<button class="card ${st}" data-name="${encodeURIComponent(i.name)}">` +
|
||||
(i.kind === "image" ? `<img loading="lazy" alt="" src="/files/${i.state}/${encodeURIComponent(i.name)}?t=${i.mtime}">`
|
||||
: i.kind === "page" ? `<div class="noimg">▶ live mockup</div>`
|
||||
: i.kind === "audio" ? `<div class="noimg">♪ ${esc([i.info?.mood, i.info?.level].filter(Boolean).join(" · ") || "audio")}</div>`
|
||||
: i.thumb ? `<img loading="lazy" alt="" src="/thumbs/${encodeURIComponent(i.name.replace(/\.(vrm|glb)$/i, ".webp"))}?t=${i.thumb}">` : `<div class="noimg">not viewed</div>`) +
|
||||
`<div class="cap">${esc(i.info?.title || i.name)}</div>` + (i.info?.mario ? `<div class="note">✎ ${esc(i.info.mario)}</div>` : "") + `</button>`).join("") + "</div>";
|
||||
|
||||
@@ -50,9 +50,10 @@ HERE = Path(__file__).parent
|
||||
REVIEW_ROOT = Path(r"E:\Felt\review") # one sub-folder per batch; gitignored in the umbrella repo
|
||||
ANIM_DIR = Path(r"E:\Felt\felt-character-assets\felt-godot-overlay\animations\library")
|
||||
STATES = ("pending", "approved", "rejected", "fix") # fix = "close, see my comment"
|
||||
# What a batch can hold: 3D models, audio clips, images.
|
||||
# What a batch can hold: 3D models, audio clips, images, live HTML pages.
|
||||
KINDS = {".vrm": "vrm", ".glb": "accessory", ".wav": "audio", ".mp3": "audio", ".ogg": "audio",
|
||||
".png": "image", ".jpg": "image", ".jpeg": "image", ".webp": "image"}
|
||||
".png": "image", ".jpg": "image", ".jpeg": "image", ".webp": "image",
|
||||
".html": "page"} # page = a self-contained live mockup (e.g. desktop design concepts)
|
||||
_IDLE_EXIT_S = 45
|
||||
|
||||
mimetypes.add_type("model/gltf-binary", ".vrm")
|
||||
|
||||