3fbbb1a93b
- 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>
162 lines
8.7 KiB
HTML
162 lines
8.7 KiB
HTML
<!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>
|