Brachnha/brachnha-insight
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ignore and untrack BMad directories

Browse Source
This commit is contained in:
Max
2026-01-26 15:49:36 +07:00
parent 7b732372e3
commit 6b113e0392
525 changed files with 2 additions and 112645 deletions
Download Patch File Download Diff File Expand all files Collapse all files

347
_bmad-output/planning-artifacts/ux-screens-preview.html
View File

@@ -1,347 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test01 - App Screens Preview</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:ital,wght@0,300;0,400;0,700;1,400&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #0F172A;
}
.font-serif {
font-family: 'Merriweather', serif;
}
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
</style>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand: {
50: '#F1F5F9',
100: '#E2E8F0',
500: '#64748B', // Slate Blue
700: '#334155',
900: '#0F172A',
}
}
}
}
}
</script>
</head>
<body class="min-h-screen text-slate-300 p-8">
<div class="max-w-7xl mx-auto">
<header class="mb-12 text-center">
<h1 class="text-3xl font-bold text-white mb-2">Test01 App Flow</h1>
<p class="text-slate-400">Key screens for the "Guided Venting Ritual" MVP</p>
</header>
<!-- Grid of Screens -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 justify-items-center">
<!-- SCREEN 1: ONBOARDING / LOGIN -->
<div class="flex flex-col gap-4">
<h2 class="text-center font-medium text-white">1. The Gate (Login)</h2>
<div
class="relative w-[320px] h-[680px] bg-white rounded-[40px] shadow-2xl overflow-hidden border-8 border-slate-800 flex flex-col">
<!-- Status Bar -->
<div
class="h-6 bg-transparent flex justify-between px-5 pt-2 text-[10px] font-medium text-slate-900 z-10">
<span>9:41</span>
<div class="flex gap-1">
<i data-lucide="wifi" class="w-3 h-3"></i>
<i data-lucide="battery" class="w-3 h-3"></i>
</div>
</div>
<!-- Content -->
<div class="flex-1 flex flex-col items-center justify-center p-8 text-center relative">
<!-- BG Decoration -->
<div class="absolute top-0 left-0 w-full h-[50%] bg-brand-50 rounded-b-[60px] -z-10"></div>
<div
class="w-20 h-20 bg-brand-500 rounded-3xl flex items-center justify-center text-white mb-8 shadow-xl shadow-brand-500/20 rotate-3">
<i data-lucide="message-circle-heart" class="w-10 h-10"></i>
</div>
<h1 class="text-2xl font-bold text-slate-900 mb-2">Turn Stress into<br>Success</h1>
<p class="text-slate-500 text-sm mb-10 leading-relaxed">
Stop venting into the void. Turn your daily struggles into professional personal branding
content with one click.
</p>
<div class="w-full space-y-3">
<button
class="w-full py-3.5 bg-slate-900 text-white rounded-xl font-medium text-sm flex items-center justify-center gap-3 hover:bg-slate-800 transition">
<i data-lucide="github" class="w-4 h-4"></i>
Continue with GitHub
</button>
<button
class="w-full py-3.5 bg-white border border-slate-200 text-slate-700 rounded-xl font-medium text-sm flex items-center justify-center gap-3 hover:bg-slate-50 transition">
<svg class="w-4 h-4" viewBox="0 0 24 24">
<path
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
fill="#4285F4" />
<path
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
fill="#34A853" />
<path
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
fill="#FBBC05" />
<path
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
fill="#EA4335" />
</svg>
Continue with Google
</button>
</div>
</div>
</div>
</div>
<!-- SCREEN 2: CHAT (Input) -->
<div class="flex flex-col gap-4">
<h2 class="text-center font-medium text-white">2. The Vent (Input)</h2>
<div
class="relative w-[320px] h-[680px] bg-[#F8FAFC] rounded-[40px] shadow-2xl overflow-hidden border-8 border-slate-800 flex flex-col">
<!-- Header -->
<div
class="h-20 bg-white/80 backdrop-blur border-b border-slate-100 flex items-end pb-3 px-5 justify-between sticky top-0 z-10">
<div class="flex items-center gap-3">
<div
class="w-8 h-8 bg-brand-100 rounded-full flex items-center justify-center text-brand-500">
<i data-lucide="bot" class="w-4 h-4"></i>
</div>
<div>
<div class="text-xs font-semibold text-slate-800">Teacher AI</div>
<div class="text-[10px] text-green-500 font-medium">Online</div>
</div>
</div>
<i data-lucide="more-horizontal" class="w-5 h-5 text-slate-400"></i>
</div>
<!-- Chat Area -->
<div class="flex-1 p-4 space-y-4 overflow-y-auto hide-scrollbar">
<!-- AI Message -->
<div class="flex gap-3">
<div
class="w-6 h-6 bg-brand-100 rounded-full flex-shrink-0 flex items-center justify-center text-brand-500 mt-1">
<i data-lucide="bot" class="w-3 h-3"></i>
</div>
<div
class="bg-white border border-slate-100 p-3 rounded-2xl rounded-tl-sm text-sm text-slate-600 shadow-sm max-w-[85%]">
Rough day? I saw you struggling with that SQL query.
</div>
</div>
<!-- User Message -->
<div class="flex gap-3 flex-row-reverse">
<div
class="w-6 h-6 bg-brand-500 rounded-full flex-shrink-0 flex items-center justify-center text-white mt-1">
<i data-lucide="user" class="w-3 h-3"></i>
</div>
<div
class="bg-brand-500 text-white p-3 rounded-2xl rounded-tr-sm text-sm shadow-sm max-w-[85%]">
It was a nightmare. I know the logic is right but the JOINs keep duplicating rows. I
felt so dumb.
</div>
</div>
<!-- AI Message -->
<div class="flex gap-3">
<div
class="w-6 h-6 bg-brand-100 rounded-full flex-shrink-0 flex items-center justify-center text-brand-500 mt-1">
<i data-lucide="bot" class="w-3 h-3"></i>
</div>
<div
class="bg-white border border-slate-100 p-3 rounded-2xl rounded-tl-sm text-sm text-slate-600 shadow-sm max-w-[85%]">
Duplication usually means a one-to-many relationship you missed. That's a classic
"gotcha," not a stupidity problem. Want me to draft a post about "Mastering the JOIN"?
</div>
</div>
<!-- Ghost Writer Prompt -->
<div class="flex justify-center py-2">
<button
class="bg-brand-500 text-white text-xs font-medium px-4 py-2 rounded-full shadow-lg shadow-brand-500/20 flex items-center gap-2 animate-bounce">
<i data-lucide="sparkles" class="w-3 h-3"></i>
Draft It
</button>
</div>
</div>
<!-- Input -->
<div class="h-16 bg-white border-t border-slate-100 px-4 flex items-center gap-2">
<button class="p-2 text-slate-400"><i data-lucide="plus" class="w-5 h-5"></i></button>
<div class="flex-1 h-9 bg-slate-50 rounded-full flex items-center px-3 text-sm text-slate-400">
Reply...</div>
<button class="p-2 text-brand-500"><i data-lucide="send" class="w-5 h-5"></i></button>
</div>
</div>
</div>
<!-- SCREEN 3: RESULT (The Draft) -->
<div class="flex flex-col gap-4">
<h2 class="text-center font-medium text-white">3. The Magic (Result)</h2>
<div
class="relative w-[320px] h-[680px] bg-slate-800 rounded-[40px] shadow-2xl overflow-hidden border-8 border-slate-800 flex flex-col">
<!-- Overlay Background (Simulating Sheet open over chat) -->
<div class="absolute inset-x-0 top-0 h-20 bg-slate-900/50 z-0"></div>
<!-- The Sheet -->
<div class="flex-1 mt-10 bg-white rounded-t-3xl overflow-hidden flex flex-col z-10 relative">
<!-- Handle -->
<div class="w-12 h-1 bg-slate-200 rounded-full mx-auto mt-3 mb-4"></div>
<!-- Content -->
<div class="flex-1 overflow-y-scroll px-6 pb-24 hide-scrollbar">
<div
class="flex items-center gap-2 text-brand-500 bg-brand-50 w-max px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider mb-4">
Ghostwriter Draft
</div>
<h2 class="text-xl font-bold text-slate-900 font-sans leading-tight mb-4">
SQL JOINs: Why 1+1 Sometimes Equals 4 (And How to Fix It)
</h2>
<div class="flex items-center gap-2 mb-6">
<div class="h-px bg-gray-100 flex-1"></div>
<span class="text-[10px] text-gray-400 uppercase tracking-wider">Created just now</span>
<div class="h-px bg-gray-100 flex-1"></div>
</div>
<p class="font-serif text-slate-600 text-sm leading-7 mb-4">
today I spent 2 hours staring at a dataset that doubled in size every time I ran a
query. I thought I was bad at math. Turns out, I was just bad at JOINs.
</p>
<p class="font-serif text-slate-600 text-sm leading-7 mb-4">
I learned the hard way: if you JOIN a table with duplicates, you don't just "add"
data—you multiply it. This is why understanding your primary keys matters more than
writing complex logic.
</p>
<p class="font-serif text-slate-600 text-sm leading-7">
Data isn't just numbers; it's relationships. And today, I finally understood this one.
💡
<br><br>
#DataAnalytics #SQL #LearningJourney #Tech
</p>
</div>
<!-- Sticky Actions -->
<div
class="absolute bottom-0 w-full p-4 bg-white/95 backdrop-blur border-t border-slate-100 flex gap-3">
<button
class="flex-1 py-3 border border-slate-200 rounded-xl text-slate-500 text-sm font-medium flex items-center justify-center gap-2">
<i data-lucide="thumbs-down" class="w-4 h-4"></i>
Fix
</button>
<button
class="flex-[2] py-3 bg-brand-500 rounded-xl text-white text-sm font-medium flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25">
<i data-lucide="thumbs-up" class="w-4 h-4"></i>
Approve & Copy
</button>
</div>
</div>
</div>
</div>
<!-- SCREEN 4: HISTORY -->
<div class="flex flex-col gap-4">
<h2 class="text-center font-medium text-white">4. Reflection (History)</h2>
<div
class="relative w-[320px] h-[680px] bg-[#F8FAFC] rounded-[40px] shadow-2xl overflow-hidden border-8 border-slate-800 flex flex-col">
<!-- Header -->
<div class="h-24 bg-white px-6 pt-10 pb-4 flex justify-between items-end border-b border-slate-100">
<h1 class="text-2xl font-bold text-slate-900">History</h1>
<div class="w-8 h-8 rounded-full bg-slate-100 border border-white shadow-sm overflow-hidden">
<div class="w-full h-full flex items-center justify-center bg-brand-500 text-white text-xs">
MA</div>
</div>
</div>
<!-- List -->
<div class="flex-1 overflow-y-auto p-4 space-y-3 hide-scrollbar">
<!-- Item 1 -->
<div
class="bg-white p-4 rounded-2xl shadow-sm border border-slate-100/50 relative overflow-hidden group">
<div class="absolute left-0 top-0 bottom-0 w-1 bg-brand-500"></div>
<div class="flex justify-between items-start mb-2">
<h3 class="font-bold text-slate-800 text-sm">SQL JOINs: Why 1+1...</h3>
<span
class="text-[10px] text-slate-400 bg-slate-50 px-2 py-0.5 rounded-full">Today</span>
</div>
<p class="text-xs text-slate-500 line-clamp-2 leading-relaxed mb-3">
Today I spent 2 hours staring at a dataset that doubled in size every time I ran a
query. I thought I was bad at math...
</p>
<div class="flex gap-2">
<button
class="flex-1 bg-slate-50 hover:bg-slate-100 text-slate-600 text-[10px] font-medium py-1.5 rounded-lg transition">View</button>
<button
class="flex-1 bg-brand-50 hover:bg-brand-100 text-brand-600 text-[10px] font-medium py-1.5 rounded-lg transition flex items-center justify-center gap-1">
<i data-lucide="copy" class="w-3 h-3"></i> Copy
</button>
</div>
</div>
<!-- Item 2 -->
<div
class="bg-white p-4 rounded-2xl shadow-sm border border-slate-100/50 relative overflow-hidden opacity-70">
<div class="absolute left-0 top-0 bottom-0 w-1 bg-gray-300"></div>
<div class="flex justify-between items-start mb-2">
<h3 class="font-bold text-slate-800 text-sm">Python Indentation...</h3>
<span
class="text-[10px] text-slate-400 bg-slate-50 px-2 py-0.5 rounded-full">Yesterday</span>
</div>
<p class="text-xs text-slate-500 line-clamp-2 leading-relaxed">
Python whitespace drove me crazy today. Why does an invisible character break my entire
script? Here is what I learned...
</p>
</div>
</div>
<!-- Bottom Nav -->
<div class="h-16 bg-white border-t border-slate-100 flex justify-around items-center px-2">
<button class="p-2 flex flex-col items-center gap-1 text-slate-400 hover:text-brand-500">
<i data-lucide="message-square" class="w-5 h-5"></i>
<span class="text-[10px] font-medium">Vent</span>
</button>
<button class="p-2 flex flex-col items-center gap-1 text-brand-500">
<i data-lucide="book-open" class="w-5 h-5"></i>
<span class="text-[10px] font-medium">History</span>
</button>
<button class="p-2 flex flex-col items-center gap-1 text-slate-400 hover:text-brand-500">
<i data-lucide="user" class="w-5 h-5"></i>
<span class="text-[10px] font-medium">Profile</span>
</button>
</div>
</div>
</div>
</div>
</div>
<script>
lucide.createIcons();
</script>
</body>
</html>