Initial commit: Brachnha Insight project setup
- Next.js 14+ with App Router and TypeScript - Tailwind CSS and ShadCN UI styling - Zustand state management - Dexie.js for IndexedDB (local-first data) - Auth.js v5 for authentication - BMAD framework integration Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Max
161
_bmad-output/planning-artifacts/ux-design-directions.html
Normal file
161
_bmad-output/planning-artifacts/ux-design-directions.html
Normal file
@@ -0,0 +1,161 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Test01 Design Directions</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
brand: {
|
||||
50: '#f8fafc', // Background
|
||||
100: '#f1f5f9',
|
||||
500: '#64748b', // Primary
|
||||
800: '#334155', // Text
|
||||
900: '#0f172a',
|
||||
}
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'sans-serif'],
|
||||
serif: ['Merriweather', 'serif'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Merriweather:wght@300;400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; background-color: #e2e8f0; }
|
||||
.device { width: 375px; height: 812px; background: #f8fafc; border-radius: 40px; border: 8px solid #1e293b; overflow: hidden; position: relative; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
|
||||
.statusbar { height: 44px; width: 100%; display: flex; justify-content: space-between; padding: 0 24px; align-items: center; font-size: 12px; font-weight: 600; color: #334155; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="p-10 flex flex-col items-center gap-10">
|
||||
|
||||
<header class="text-center space-y-2">
|
||||
<h1 class="text-3xl font-bold text-slate-800">Test01 Design Directions</h1>
|
||||
<p class="text-slate-600">Theme: Morning Mist | Flow: The Venting Ritual</p>
|
||||
</header>
|
||||
|
||||
<div class="flex flex-wrap justify-center gap-16">
|
||||
|
||||
<!-- Direction A: The "Friendly Chat" (Telegram-like) -->
|
||||
<div class="flex flex-col items-center space-y-4">
|
||||
<h2 class="text-xl font-semibold text-slate-700">A. The "Buddy" Chat</h2>
|
||||
<p class="text-sm text-slate-500 w-64 text-center">Standard chat UI. Familiar, safe, conversational.</p>
|
||||
<div class="device flex flex-col">
|
||||
<div class="statusbar"><span>9:41</span><span>🔋</span></div>
|
||||
<!-- Header -->
|
||||
<div class="h-16 border-b border-slate-100 flex items-center px-6 bg-white/80 backdrop-blur">
|
||||
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold text-xs">AI</div>
|
||||
<span class="ml-3 font-semibold text-brand-800">Teacher Agent</span>
|
||||
</div>
|
||||
<!-- Chat Area -->
|
||||
<div class="flex-1 p-4 space-y-4 overflow-y-auto">
|
||||
<!-- AI Msg -->
|
||||
<div class="flex items-end">
|
||||
<div class="bg-indigo-50 text-brand-800 p-3 rounded-2xl rounded-bl-sm max-w-[85%] text-sm leading-relaxed">
|
||||
What has been the most frustrating part of your SQL study today?
|
||||
</div>
|
||||
</div>
|
||||
<!-- User Msg -->
|
||||
<div class="flex items-end justify-end">
|
||||
<div class="bg-brand-500 text-white p-3 rounded-2xl rounded-br-sm max-w-[85%] text-sm leading-relaxed shadow-sm">
|
||||
I honestly just can't get my head around window functions. Why is PARTITION BY so confusing?
|
||||
</div>
|
||||
</div>
|
||||
<!-- AI Msg -->
|
||||
<div class="flex items-end">
|
||||
<div class="bg-indigo-50 text-brand-800 p-3 rounded-2xl rounded-bl-sm max-w-[85%] text-sm leading-relaxed">
|
||||
I feel that. It's a huge mental leap. What specifically trips you up?
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Input Area -->
|
||||
<div class="p-4 bg-white border-t border-slate-100">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex-1 bg-slate-50 rounded-full h-10 px-4 flex items-center text-sm text-slate-400">Type your vent...</div>
|
||||
<button class="w-10 h-10 rounded-full bg-brand-500 flex items-center justify-center text-white">↑</button>
|
||||
</div>
|
||||
<button class="mt-2 w-full text-indigo-500 text-xs font-medium py-2">✨ Draft Post</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Direction B: The "Journal" (Focus Mode) -->
|
||||
<div class="flex flex-col items-center space-y-4">
|
||||
<h2 class="text-xl font-semibold text-slate-700">B. The "Journal" Focus</h2>
|
||||
<p class="text-sm text-slate-500 w-64 text-center">Minimalist. Less "chatty", more "stream of thought".</p>
|
||||
<div class="device flex flex-col bg-[#FDFDFD]">
|
||||
<div class="statusbar"><span>9:41</span><span>🔋</span></div>
|
||||
|
||||
<!-- Content Area -->
|
||||
<div class="flex-1 p-6 space-y-8 overflow-y-auto pt-10">
|
||||
<div class="space-y-2">
|
||||
<span class="text-xs font-bold text-slate-300 uppercase tracking-widest">Today</span>
|
||||
<h1 class="text-2xl font-serif text-brand-800 leading-tight">What's blocking you right now?</h1>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<p class="text-brand-800 text-lg leading-relaxed font-serif opacity-90 border-l-2 border-brand-500 pl-4 py-1">
|
||||
I honestly just can't get my head around window functions. Why is PARTITION BY so confusing?
|
||||
</p>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-6 h-6 rounded-full bg-slate-100 flex-shrink-0"></div>
|
||||
<p class="text-slate-500 text-sm italic">It's a common struggle. Is it the syntax or the logic?</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action -->
|
||||
<div class="p-6">
|
||||
<button class="w-full h-14 bg-brand-800 text-white rounded-xl shadow-lg font-medium flex items-center justify-center gap-2">
|
||||
<span>✨</span> Create Draft
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Direction C: The "Result" (The Medium Post) -->
|
||||
<div class="flex flex-col items-center space-y-4">
|
||||
<h2 class="text-xl font-semibold text-slate-700">C. The Generated Draft</h2>
|
||||
<p class="text-sm text-slate-500 w-64 text-center">Output view. High-end typography (Merriweather).</p>
|
||||
<div class="device flex flex-col bg-white">
|
||||
<div class="statusbar"><span>9:41</span><span>🔋</span></div>
|
||||
|
||||
<div class="p-6 flex-1 overflow-y-auto">
|
||||
<!-- Success Header -->
|
||||
<div class="flex flex-col items-center py-6 space-y-2">
|
||||
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center text-xl">🎉</div>
|
||||
<p class="text-sm font-medium text-green-700">Draft Ready</p>
|
||||
</div>
|
||||
|
||||
<!-- The Card -->
|
||||
<div class="bg-slate-50 p-6 rounded-2xl border border-slate-100 shadow-sm space-y-4">
|
||||
<h3 class="font-serif font-bold text-xl text-brand-900 leading-snug">Why SQL Window Functions broke my brain (and how I fixed it)</h3>
|
||||
<p class="font-serif text-slate-600 text-sm leading-relaxed">
|
||||
I spent 3 hours today staring at a <code>PARTITION BY</code> error. It felt like I hit a wall. But then I realized: window functions aren't just grouping, they're...
|
||||
</p>
|
||||
<div class="text-xs text-slate-400 font-medium">#DataAnalytics #Learning #SQL</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex gap-4 mt-8">
|
||||
<button class="flex-1 h-12 bg-white border border-slate-200 rounded-xl text-slate-500 font-medium flex items-center justify-center gap-2 shadow-sm">
|
||||
👎 Revise
|
||||
</button>
|
||||
<button class="flex-1 h-12 bg-brand-500 text-white rounded-xl font-medium flex items-center justify-center gap-2 shadow-sm">
|
||||
👍 Post It
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user