┌─────────────────────────────────────────────────────────────────────┐
│ 🛡️ TruthGuard AI Home Analyze Chrome About 🌐EN ☀️ [Login] │
└─────────────────────────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────────────────────────┐
│ 🛡️ TruthGuard AI Home Analyze Chrome About 🌐EN ☀️ [👤 John] │
│ ↓ │
│ ┌──────────────────────┐ │
│ │ 👤 John Doe │ │
│ │ john@example.com │ │
│ ├──────────────────────┤ │
│ │ 👤 Profile │ │
│ │ ⚙️ Settings │ │
│ ├──────────────────────┤ │
│ │ 🚪 Logout │ │
│ └──────────────────────┘ │
└──────────────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────┬──────────────────────┐
│ │ 🕐 Recent Analysis │
│ ┌──────────────────────────────────────────┐ │ │
│ │ 📄 Text 🖼️ Image 🎬 Video 🎤 Audio │ │ ┌─────────────────┐ │
│ │ │ │ │ 📄 NEWS │ │
│ └──────────────────────────────────────────┘ │ │ Breaking news... │ │
│ │ │ ✅ REAL 95% │ │
│ ┌──────────────────────────────────────────┐ │ │ 2 mins ago 🗑️ │ │
│ │ │ │ └─────────────────┘ │
│ │ 📤 Upload Zone │ │ │
│ │ │ │ ┌─────────────────┐ │
│ │ Drag & drop image file here │ │ │ 🖼️ PHOTO │ │
│ │ or click to browse │ │ │ vacation.jpg │ │
│ │ │ │ │ 🚨 FAKE 87% │ │
│ │ Supported: JPG, PNG, WebP (Max 10MB) │ │ │ 5 mins ago 🗑️ │ │
│ │ │ │ └─────────────────┘ │
│ └──────────────────────────────────────────┘ │ │
│ │ [🗑️ Clear All] │
│ [Analyze Content] │ │
└────────────────────────────────────────────────┴──────────────────────┘
┌────────────────────────────────────────────────┬──────────────────────┐
│ ┌──────────────────────────────────────────┐ │ 🕐 Recent Analysis │
│ │ 📄 Text 🖼️ Image 🎬 Video 🎤 Audio │ │ │
│ └──────────────────────────────────────────┘ │ History items... │
│ │ │
│ ┌──────────────────────────────────────────┐ │ │
│ │ │ │ │
│ │ 🖼️ │ │ │
│ │ │ │ │
│ │ ✅ vacation.jpg │ │ │
│ │ 2.5 MB │ │ │
│ │ │ │ │
│ │ [❌ Remove File] │ │ │
│ │ │ │ │
│ └──────────────────────────────────────────┘ │ │
│ │ │
│ [✨ Analyze Content] [New Analysis] │ │
└────────────────────────────────────────────────┴──────────────────────┘
┌────────────────────────────────────────────────┬──────────────────────┐
│ [New Analysis] │ 🕐 Recent Analysis │
│ │ │
│ ┌──────────────────────────────────────────┐ │ ✅ Just added! │
│ │ │ │ ┌─────────────────┐ │
│ │ 🚨 FAKE DETECTED │ │ │ 🖼️ PHOTO │ │
│ │ │ │ │ vacation.jpg │ │
│ │ Confidence: 87.3% │ │ │ 🚨 FAKE 87% │ │
│ │ Model: DeepfakeNet v2.1 │ │ │ Just now 🗑️ │ │
│ │ Processing Time: 1234ms │ │ └─────────────────┘ │
│ │ │ │ │
│ │ Explanation: │ │ Previous items... │
│ │ This image shows signs of AI generation│ │ │
│ │ including unnatural facial features │ │ │
│ │ and inconsistent lighting patterns. │ │ │
│ │ │ │ │
│ └──────────────────────────────────────────┘ │ │
└────────────────────────────────────────────────┴──────────────────────┘
┌──────────────────────────────────────────────────────────────────────┐
│ Profile Settings │
│ Customize your avatar and manage your account │
└──────────────────────────────────────────────────────────────────────┘
┌─────────────────────┬──────────────────────────────────────────────────┐
│ │ │
│ ┌─────┐ │ 📷 Custom Image │
│ │ JD │ │ ┌────────────────────────────────────────────┐ │
│ └─────┘ │ │ │ │
│ John Doe │ │ 📤 Upload Custom Image │ │
│ john@example.com │ │ (Max 5MB) │ │
│ │ │ │ │
│ ───────────────── │ └────────────────────────────────────────────┘ │
│ │ │
│ 📧 Email: │ 🎭 Emoji Avatars │
│ ✅ Verified │ ┌────────────────────────────────────────────┐ │
│ │ │ 😊 😎 🤓 🥳 🤖 👨💻 👩🔬 🦸 │ │
│ 📅 Member since: │ │ 🧙 🐱 🐶 🦊 🐼 🦁 🐺 🦄 │ │
│ Jan 2024 │ └────────────────────────────────────────────┘ │
│ │ │
│ 🛡️ User ID: │ 🎨 Gradient Backgrounds │
│ abc12345... │ ┌────────────────────────────────────────────┐ │
│ │ │ [Ocean] [Sunset] [Forest] [Fire] │ │
│ │ │ [Sky] [Purple] [Rose] [Emerald] │ │
│ │ └────────────────────────────────────────────┘ │
│ │ │
│ │ [💾 Save Avatar Settings] │
│ │ │
└─────────────────────┴──────────────────────────────────────────────────┘
1. Ocean: #6366f1 → #8b5cf6 (Indigo → Purple)
████████████████████
2. Sunset: #f97316 → #ec4899 (Orange → Pink)
████████████████████
3. Forest: #10b981 → #14b8a6 (Green → Teal)
████████████████████
4. Fire: #ef4444 → #f59e0b (Red → Amber)
████████████████████
5. Sky: #3b82f6 → #06b6d4 (Blue → Cyan)
████████████████████
6. Purple: #8b5cf6 → #d946ef (Purple → Fuchsia)
████████████████████
7. Rose: #e11d48 → #f472b6 (Rose → Pink)
████████████████████
8. Emerald: #059669 → #10b981 (Emerald → Green)
████████████████████✅ REAL → Green #10b981
🚨 FAKE → Red #ef4444
⚠️ UNVERIFIED → Yellow #f59e0bPrimary Button: Blue-Purple Gradient (#3b82f6 → #8b5cf6)
Secondary Button: Gray (#6b7280)
Delete Button: Red (#ef4444)
Hover States: Lighter shade (+10% brightness)
Active States: Blue tint (#3b82f6 with 20% opacity)┌─────────────────────────────────────────────────────────────┐
│ Header (Full Navigation + Avatar Menu) │
├──────────────────────────────┬──────────────────────────────┤
│ │ │
│ Main Content (66%) │ Sidebar (33%) │
│ - File Upload │ - History │
│ - Analysis Results │ - Quick Actions │
│ │ │
│ │ │
└──────────────────────────────┴──────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ Header (Responsive Navigation + Avatar Menu) │
├─────────────────────────────────────────────────────────────┤
│ │
│ Main Content (Full Width) │
│ - File Upload │
│ - Analysis Results │
│ │
├─────────────────────────────────────────────────────────────┤
│ Sidebar (Below Content) │
│ - History in Tabs or Collapsed │
└─────────────────────────────────────────────────────────────┘
┌──────────────────────────┐
│ Header (Hamburger Menu) │
│ [☰] Logo [👤] │
├──────────────────────────┤
│ │
│ Main Content (Stack) │
│ - File Upload │
│ - Results │
│ │
├──────────────────────────┤
│ History (Expandable) │
│ [v] Show History │
└──────────────────────────┘
State 1: Normal
┌────────────────────────┐
│ │
│ Drag & drop here │
│ or click to browse │
│ │
└────────────────────────┘
Border: Gray dashed
State 2: Drag Over (dragActive = true)
┌════════════════════════┐
║ ║
║ 📤 Drop file here ║
║ ║
║ ║
└════════════════════════┘
Border: Blue solid
Background: Blue tint
Scale: 1.02
State 3: File Selected
┌────────────────────────┐
│ ✅ vacation.jpg │
│ 2.5 MB │
│ [Remove File] │
└────────────────────────┘
Border: Green
Icon: Checkmark
Closed:
┌──────┐
│ [JD] │
└──────┘
Opening (0.2s):
┌──────┐
│ [JD] │ ⤵️
└──┬───┘
│ Opacity: 0 → 1
│ Y: -10 → 0
↓
┌──────────────┐
│ John Doe │
│ john@ex... │
├──────────────┤
│ 👤 Profile │
│ ⚙️ Settings │
├──────────────┤
│ 🚪 Logout │
└──────────────┘
Closing (0.2s):
Reverse animation
Normal:
┌─────────────────────┐
│ 📄 NEWS │
│ Breaking news... │
│ ✅ REAL 95% │
│ 2 mins ago │
└─────────────────────┘
Hover:
┌─────────────────────┐
│ 📄 NEWS 🗑️ │ ← Delete icon appears
│ Breaking news... │ (opacity: 0 → 1)
│ ✅ REAL 95% │
│ 2 mins ago │
└─────────────────────┘
Click Delete:
┌─────────────────────────────────┐
│ Are you sure you want to │
│ delete this item? │
│ │
│ [Cancel] [Delete] │
└─────────────────────────────────┘
Deleted:
Item fades out (opacity: 1 → 0)
Slides up (y: 0 → -20)
Duration: 0.3s
Normal:
[Analyze Content]
Background: Blue-Purple gradient
Text: White
Border: None
Hover:
[Analyze Content]
Background: Darker gradient
Transform: scale(1.02)
Shadow: Larger
Cursor: pointer
Active (Clicking):
[Analyze Content]
Transform: scale(0.98)
Shadow: Smaller
Disabled:
[Analyze Content]
Background: Gray
Cursor: not-allowed
Opacity: 0.5
Empty:
┌──────────────────────────────┐
│ Paste news article... │
└──────────────────────────────┘
Border: Gray
Focus:
┌══════════════════════════════┐
│ Paste news article..._ │
└══════════════════════════════┘
Border: Blue (2px)
Shadow: Blue glow
Filled:
┌──────────────────────────────┐
│ Breaking news: Scientists... │
└──────────────────────────────┘
Border: Gray
Text: Black
Avatar Sizes:
- Small (sm): 32px (w-8 h-8) [Header avatar]
- Medium (md): 40px (w-10 h-10) [Settings preview]
- Large (lg): 64px (w-16 h-16) [Profile page]
Button Heights:
- Small: 32px (py-2)
- Medium: 40px (py-3)
- Large: 48px (py-4)
- XLarge: 56px (py-6) [Save Settings button]
Card Padding:
- Small: 16px (p-4)
- Medium: 24px (p-6)
- Large: 32px (p-8)
Border Radius:
- Small: 4px (rounded)
- Medium: 8px (rounded-lg)
- Large: 12px (rounded-xl)
- Circle: 50% (rounded-full) [Avatars]Container:
Max Width: 1280px (max-w-6xl)
Padding: 16px (px-4)
Grid Columns:
- Desktop: 3 columns (grid-cols-3)
- Tablet: 2 columns (md:grid-cols-2)
- Mobile: 1 column (grid-cols-1)
Gap Spacing:
- Small: 8px (gap-2)
- Medium: 16px (gap-4)
- Large: 24px (gap-6)
User sees avatar → Clicks → Dropdown opens
↓
User sees 3 options:
├─→ Profile (navigates)
├─→ Settings (navigates)
└─→ Logout (shows confirmation)
User on Analyze page → Selects media tab → Sees upload zone
↓
User action:
├─→ Drag file (visual feedback)
└─→ Click zone (file picker)
↓
File validated
├─→ ✅ Valid: Show preview
└─→ ❌ Invalid: Show error toast
User hovers history item → Delete icon appears
↓
User clicks delete → Confirmation dialog
↓
User confirms → Item animates out → Updates localStorage
↓
Success toast shown
✅ File uploaded successfully
✅ Analysis complete
✅ Settings saved
✅ History item deleted
✅ History cleared
Visual: Green toast notification (bottom-right)
Duration: 3 seconds
Animation: Slide in from right
❌ Invalid file type
❌ File too large
❌ Analysis failed
❌ Please log in
Visual: Red toast notification (bottom-right)
Duration: 5 seconds
Animation: Slide in from right
Icon: X or Alert icon
⏳ Analyzing...
⏳ Uploading...
⏳ Saving...
Visual: Button text changes
Disabled state (gray, cursor not-allowed)
Optional: Spinner icon
This visual guide shows exactly how your application will look and behave! 🎨✨
All animations are smooth (0.2-0.3s), all feedback is immediate, and the entire experience feels modern and professional! 🚀