Enhance UI with modern, colorful, and engaging design

app/web/templates/_result_block.html

@@ -1,35 +1,331 @@
-<div class="card">
+<div class="result-card">
   <style>
-    .badge { display:inline-block; padding:4px 10px; border-radius:999px; font-weight:600; font-size:14px; }
-    .True { background:#e6ffed; color:#05620d; border:1px solid #b1f0b8; }
-    .False { background:#ffe8e6; color:#7b1010; border:1px solid #f3b3ad; }
-    .Misleading { background:#fff6e0; color:#6a4b00; border:1px solid #f3d49a; }
-    .Unverified { background:#eef2f7; color:#3b4252; border:1px solid #d0d7e2; }
-    .muted { color:#6b7280; font-size:14px; }
-    .sources li{ margin: 6px 0; }
-    pre { background:#f6f8fa; padding:8px; border-radius:8px; overflow:auto; }
-    button { padding:8px 12px; border-radius:8px; border:1px solid #d1d5db; cursor:pointer; }
+    .result-card {
+      background: white;
+      border-radius: 20px;
+      padding: 2rem;
+      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+      border: 1px solid #e5e7eb;
+      margin-top: 2rem;
+    }
+    
+    .verdict-section {
+      text-align: center;
+      margin-bottom: 2rem;
+      padding: 1.5rem;
+      border-radius: 16px;
+      background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+    }
+    
+    .verdict-badge {
+      display: inline-block;
+      padding: 0.75rem 2rem;
+      border-radius: 50px;
+      font-weight: 700;
+      font-size: 1.25rem;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 1rem;
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    }
+    
+    .True {
+      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+      color: white;
+      box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
+    }
+    
+    .False {
+      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+      color: white;
+      box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
+    }
+    
+    .Misleading {
+      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+      color: white;
+      box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
+    }
+    
+    .Unverified {
+      background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
+      color: white;
+      box-shadow: 0 4px 15px rgba(107, 114, 128, 0.3);
+    }
+    
+    .confidence-bar {
+      margin-top: 1rem;
+      background: #e5e7eb;
+      height: 8px;
+      border-radius: 4px;
+      overflow: hidden;
+    }
+    
+    .confidence-fill {
+      height: 100%;
+      background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%);
+      border-radius: 4px;
+      transition: width 1s ease-out;
+    }
+    
+    .section {
+      margin: 2rem 0;
+    }
+    
+    .section-title {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: #374151;
+      margin-bottom: 1rem;
+      padding-bottom: 0.5rem;
+      border-bottom: 2px solid #e5e7eb;
+    }
+    
+    .claim-text {
+      background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+      border-left: 4px solid #3b82f6;
+      padding: 1.5rem;
+      border-radius: 0 12px 12px 0;
+      font-size: 1.1rem;
+      line-height: 1.6;
+      font-style: italic;
+      margin-bottom: 1rem;
+    }
+    
+    .rationale-text {
+      background: #f8fafc;
+      padding: 1.5rem;
+      border-radius: 12px;
+      line-height: 1.7;
+      color: #374151;
+      border: 1px solid #e2e8f0;
+    }
+    
+    .post-container {
+      background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
+      border: 2px dashed #3b82f6;
+      border-radius: 16px;
+      padding: 1.5rem;
+      position: relative;
+    }
+    
+    .post-text {
+      font-family: system-ui, sans-serif;
+      font-size: 1rem;
+      line-height: 1.6;
+      color: #1f2937;
+      margin: 0;
+      white-space: pre-wrap;
+      background: white;
+      padding: 1rem;
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+    
+    .copy-button {
+      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+      color: white;
+      border: none;
+      padding: 0.75rem 1.5rem;
+      border-radius: 25px;
+      font-weight: 600;
+      cursor: pointer;
+      margin-top: 1rem;
+      transition: all 0.3s ease;
+      box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
+    }
+    
+    .copy-button:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
+    }
+    
+    .copy-button:active {
+      transform: translateY(0);
+    }
+    
+    .sources-grid {
+      display: grid;
+      gap: 1rem;
+    }
+    
+    .source-card {
+      background: white;
+      border: 1px solid #e5e7eb;
+      border-radius: 12px;
+      padding: 1.25rem;
+      transition: all 0.3s ease;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    }
+    
+    .source-card:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+      border-color: #3b82f6;
+    }
+    
+    .source-title {
+      font-weight: 600;
+      color: #1f2937;
+      text-decoration: none;
+      font-size: 1.05rem;
+      line-height: 1.4;
+      display: block;
+      margin-bottom: 0.5rem;
+    }
+    
+    .source-title:hover {
+      color: #3b82f6;
+    }
+    
+    .source-snippet {
+      color: #6b7280;
+      font-size: 0.9rem;
+      line-height: 1.5;
+      margin-top: 0.5rem;
+    }
+    
+    .source-url {
+      color: #3b82f6;
+      font-size: 0.85rem;
+      margin-top: 0.5rem;
+      word-break: break-all;
+    }
+    
+    .meta-info {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 1rem;
+      background: #f8fafc;
+      border-radius: 12px;
+      font-size: 0.9rem;
+      color: #6b7280;
+      margin-top: 1rem;
+    }
+    
+    .share-link {
+      color: #3b82f6;
+      text-decoration: none;
+      font-weight: 500;
+    }
+    
+    .share-link:hover {
+      text-decoration: underline;
+    }
+    
+    .icon {
+      font-size: 1.25rem;
+    }
+    
+    @keyframes slideIn {
+      from { opacity: 0; transform: translateY(20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    
+    .result-card {
+      animation: slideIn 0.6s ease-out;
+    }
   </style>
 
-  <div><span class="badge {{ r.verdict }}">{{ r.verdict }}</span></div>
-  <h3 style="margin:10px 0 6px 0;">Claim</h3>
-  <p>{{ r.claim }}</p>
+  <div class="verdict-section">
+    <div class="verdict-badge {{ r.verdict }}">
+      {% if r.verdict == 'True' %}✅ Verified True
+      {% elif r.verdict == 'False' %}❌ Verified False
+      {% elif r.verdict == 'Misleading' %}⚠️ Misleading
+      {% else %}❓ Unverified
+      {% endif %}
+    </div>
+    <div style="font-size: 1rem; color: #6b7280; margin-bottom: 0.5rem;">Confidence Score</div>
+    <div style="font-size: 1.5rem; font-weight: 700; color: #1f2937;">{{ '%.0f' % (r.confidence * 100) }}%</div>
+    <div class="confidence-bar">
+      <div class="confidence-fill" style="width: {{ '%.0f' % (r.confidence * 100) }}%"></div>
+    </div>
+  </div>
 
-  <h3 style="margin:10px 0 6px 0;">Rationale</h3>
-  <p>{{ r.rationale }}</p>
-  <div class="muted">Confidence: {{ '%.2f' % r.confidence }} · <a href="/r/{{ r.id }}" target="_blank" rel="noopener">Share link</a></div>
+  <div class="section">
+    <h3 class="section-title">
+      <span class="icon">💬</span>
+      Claim Being Verified
+    </h3>
+    <div class="claim-text">{{ r.claim }}</div>
+  </div>
 
-  <h3 style="margin:16px 0 6px 0;">Ready-to-post</h3>
-  <pre id="post">{{ r.post }}</pre>
-  <button onclick="navigator.clipboard.writeText(document.getElementById('post').innerText)">Copy</button>
+  <div class="section">
+    <h3 class="section-title">
+      <span class="icon">🧠</span>
+      AI Analysis & Reasoning
+    </h3>
+    <div class="rationale-text">{{ r.rationale }}</div>
+  </div>
 
-  <h3 style="margin:16px 0 6px 0;">Sources</h3>
-  <ol class="sources">
-    {% for s in r.sources %}
-      <li>
-        <a href="{{ s.url }}" target="_blank" rel="noopener">{{ s.title }}</a>
-        {% if s.snippet %}<div class="muted">{{ s.snippet }}</div>{% endif %}
-      </li>
-    {% endfor %}
-  </ol>
+  <div class="section">
+    <h3 class="section-title">
+      <span class="icon">📱</span>
+      Ready-to-Share Social Media Post
+    </h3>
+    <div class="post-container">
+      <div class="post-text" id="post-{{ r.id }}">{{ r.post }}</div>
+      <button class="copy-button" onclick="copyToClipboard('post-{{ r.id }}')">
+        📋 Copy to Clipboard
+      </button>
+    </div>
+  </div>
+
+  <div class="section">
+    <h3 class="section-title">
+      <span class="icon">🔍</span>
+      Sources Analyzed ({{ r.sources|length }})
+    </h3>
+    <div class="sources-grid">
+      {% for s in r.sources %}
+        <div class="source-card">
+          <a href="{{ s.url }}" target="_blank" rel="noopener" class="source-title">
+            {{ s.title }}
+          </a>
+          <div class="source-url">{{ s.url }}</div>
+          {% if s.snippet %}
+            <div class="source-snippet">{{ s.snippet }}</div>
+          {% endif %}
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+
+  <div class="meta-info">
+    <div>
+      <strong>Fact-check ID:</strong> {{ r.id }}
+    </div>
+    <div>
+      <a href="/r/{{ r.id }}" target="_blank" rel="noopener" class="share-link">
+        🔗 Share this fact-check
+      </a>
+    </div>
+  </div>
 </div>
+
+<script>
+function copyToClipboard(elementId) {
+  const element = document.getElementById(elementId);
+  const text = element.innerText;
+  
+  navigator.clipboard.writeText(text).then(function() {
+    // Show success feedback
+    const button = event.target;
+    const originalText = button.innerHTML;
+    button.innerHTML = '✅ Copied!';
+    button.style.background = 'linear-gradient(135deg, #10b981 0%, #059669 100%)';
+    
+    setTimeout(() => {
+      button.innerHTML = originalText;
+      button.style.background = 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)';
+    }, 2000);
+  }).catch(function(err) {
+    console.error('Failed to copy text: ', err);
+    alert('Failed to copy to clipboard');
+  });
+}
+</script>

app/web/templates/index.html

@@ -2,33 +2,353 @@
 <html lang="en">
 <head>
   <meta charset="utf-8" />
-  <title>Automated Fact-Checker</title>
+  <title>🔍 AI Fact-Checker - Verify Claims Instantly</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <script src="https://unpkg.com/[email protected]" defer></script>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
   <style>
-    :root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color-scheme: light dark; }
-    body { margin:0; padding:24px; max-width:900px; }
-    .wrap { display:grid; gap:16px; }
-    textarea { width:100%; min-height:110px; padding:12px; border-radius:10px; border:1px solid #d1d5db; }
-    button { padding:10px 14px; border-radius:10px; border:1px solid #d1d5db; cursor:pointer; }
-    .muted { color:#6b7280; font-size:14px; }
-    .card { border:1px solid #e5e7eb; border-radius:12px; padding:16px; }
-  </style>
+    :root { 
+      --primary: #3b82f6;
+      --primary-dark: #2563eb;
+      --secondary: #10b981;
+      --danger: #ef4444;
+      --warning: #f59e0b;
+      --gray-50: #f9fafb;
+      --gray-100: #f3f4f6;
+      --gray-200: #e5e7eb;
+      --gray-300: #d1d5db;
+      --gray-600: #4b5563;
+      --gray-700: #374151;
+      --gray-900: #111827;
+      font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    }
+    
+    * { box-sizing: border-box; }
+    
+    body { 
+      margin: 0; 
+      padding: 0; 
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      min-height: 100vh;
+      color: var(--gray-900);
+    }
+    
+    .container {
+      max-width: 1000px;
+      margin: 0 auto;
+      padding: 2rem;
+    }
+    
+    .hero {
+      text-align: center;
+      margin-bottom: 3rem;
+      color: white;
+    }
+    
+    .hero h1 {
+      font-size: 3.5rem;
+      font-weight: 700;
+      margin: 0 0 1rem;
+      background: linear-gradient(45deg, #fff, #f0f9ff);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      text-shadow: 0 4px 20px rgba(0,0,0,0.1);
+    }
+    
+    .hero p {
+      font-size: 1.25rem;
+      font-weight: 300;
+      margin: 0;
+      opacity: 0.9;
+    }
+    
+    .main-card {
+      background: white;
+      border-radius: 24px;
+      padding: 2.5rem;
+      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      backdrop-filter: blur(10px);
+    }
+    
+    .form-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 1.5rem;
+    }
+    
+    .input-group {
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+    }
+    
+    .input-label {
+      font-weight: 600;
+      color: var(--gray-700);
+      font-size: 1.1rem;
+    }
+    
+    .claim-input {
+      width: 100%;
+      min-height: 140px;
+      padding: 1.5rem;
+      border: 2px solid var(--gray-200);
+      border-radius: 16px;
+      font-size: 1rem;
+      font-family: inherit;
+      resize: vertical;
+      transition: all 0.3s ease;
+      background: var(--gray-50);
+    }
+    
+    .claim-input:focus {
+      outline: none;
+      border-color: var(--primary);
+      background: white;
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+      transform: translateY(-2px);
+    }
+    
+    .claim-input::placeholder {
+      color: var(--gray-600);
+      font-style: italic;
+    }
+    
+    .submit-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 1rem;
+    }
+    
+    .submit-btn {
+      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+      color: white;
+      border: none;
+      padding: 1rem 3rem;
+      border-radius: 50px;
+      font-size: 1.1rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    
+    .submit-btn:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 12px 35px rgba(59, 130, 246, 0.4);
+      background: linear-gradient(135deg, var(--primary-dark) 0%, #1d4ed8 100%);
+    }
+    
+    .submit-btn:active {
+      transform: translateY(-1px);
+    }
+    
+    .help-text {
+      color: var(--gray-600);
+      font-size: 0.95rem;
+      text-align: center;
+      line-height: 1.6;
+    }
+    
+    .examples {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 1rem;
+      margin-top: 2rem;
+    }
+    
+    .example-card {
+      background: var(--gray-50);
+      border: 1px solid var(--gray-200);
+      border-radius: 12px;
+      padding: 1rem;
+      cursor: pointer;
+      transition: all 0.3s ease;
+    }
+    
+    .example-card:hover {
+      background: var(--primary);
+      color: white;
+      transform: translateY(-2px);
+      box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
+    }
+    
+    .example-card strong {
+      display: block;
+      margin-bottom: 0.5rem;
+      font-size: 0.9rem;
+    }
+    
+    .result-container {
+      margin-top: 2rem;
+    }
+    
+    .loading {
+      display: none;
+      text-align: center;
+      padding: 2rem;
+      color: var(--gray-600);
+    }
+    
+    .loading.htmx-request {
+      display: block;
+    }
+    
+    .spinner {
+      display: inline-block;
+      width: 40px;
+      height: 40px;
+      border: 4px solid var(--gray-200);
+      border-top: 4px solid var(--primary);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      margin-bottom: 1rem;
+    }
+    
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+    
+    .feature-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 1.5rem;
+      margin-top: 3rem;
+    }
+    
+    .feature {
+      text-align: center;
+      color: white;
+      padding: 1.5rem;
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 16px;
+      backdrop-filter: blur(10px);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+    }
+    
+    .feature-icon {
+      font-size: 2.5rem;
+      margin-bottom: 1rem;
+      display: block;
+    }
+    
+    .feature h3 {
+      margin: 0 0 0.5rem;
+      font-weight: 600;
+    }
+    
+    .feature p {
+      margin: 0;
+      opacity: 0.9;
+      font-size: 0.9rem;
+    }
+    
+    @media (max-width: 768px) {
+      .container { padding: 1rem; }
+      .hero h1 { font-size: 2.5rem; }
+      .main-card { padding: 1.5rem; }
+      .submit-btn { padding: 0.875rem 2rem; }
+    }
+  </link>
 </head>
 <body>
-  <h1 class="muted">Automated Fact-Checker & Synthesizer</h1>
+  <div class="container">
+    <div class="hero">
+      <h1>🔍 AI Fact-Checker</h1>
+      <p>Verify claims instantly with AI-powered research and analysis</p>
+    </div>
 
-  <div class="card">
-    <form class="wrap" hx-post="/ui/check" hx-target="#result" hx-swap="innerHTML">
-      <label for="claim" class="muted">Paste a single claim</label>
-      <textarea id="claim" name="claim" placeholder="e.g., The Earth orbits the Sun"></textarea>
-      <div>
-        <button type="submit">Check claim</button>
-        <span class="muted">You'll get sources, a verdict, and a shareable post.</span>
+    <div class="main-card">
+      <form class="form-wrapper" hx-post="/ui/check" hx-target="#result" hx-swap="innerHTML">
+        <div class="input-group">
+          <label for="claim" class="input-label">💬 Enter your claim to fact-check</label>
+          <textarea 
+            id="claim" 
+            name="claim" 
+            class="claim-input"
+            placeholder="Type any claim you want to verify... e.g., 'The Earth orbits the Sun' or 'Climate change is caused by human activity'"
+            required
+          ></textarea>
+        </div>
+        
+        <div class="submit-section">
+          <button type="submit" class="submit-btn">🚀 Fact-Check Now</button>
+          <p class="help-text">
+            Our AI will search multiple sources, analyze evidence, and provide you with a verdict plus a shareable social media post
+          </p>
+        </div>
+      </form>
+      
+      <div class="examples">
+        <div class="example-card" onclick="fillExample('The Earth is flat and not spherical')">
+          <strong>🌍 Geography Claim</strong>
+          "The Earth is flat and not spherical"
+        </div>
+        <div class="example-card" onclick="fillExample('Vaccines cause autism in children')">
+          <strong>🏥 Medical Claim</strong>
+          "Vaccines cause autism in children"
+        </div>
+        <div class="example-card" onclick="fillExample('Climate change is a natural phenomenon, not caused by humans')">
+          <strong>🌡️ Climate Claim</strong>
+          "Climate change is a natural phenomenon"
+        </div>
       </div>
-    </form>
+    </div>
+
+    <div class="feature-grid">
+      <div class="feature">
+        <span class="feature-icon">🔍</span>
+        <h3>Multi-Source Research</h3>
+        <p>Searches and analyzes multiple authoritative sources across the web</p>
+      </div>
+      <div class="feature">
+        <span class="feature-icon">🧠</span>
+        <h3>AI-Powered Analysis</h3>
+        <p>Uses advanced NLP models for semantic understanding and inference</p>
+      </div>
+      <div class="feature">
+        <span class="feature-icon">📊</span>
+        <h3>Confidence Scoring</h3>
+        <p>Provides confidence levels and detailed reasoning for each verdict</p>
+      </div>
+      <div class="feature">
+        <span class="feature-icon">📱</span>
+        <h3>Social Media Ready</h3>
+        <p>Generates shareable posts perfect for social media platforms</p>
+      </div>
+    </div>
+
+    <div class="result-container">
+      <div class="loading" id="loading">
+        <div class="spinner"></div>
+        <p>🤖 AI is researching your claim across multiple sources...</p>
+        <p style="font-size: 0.9rem; opacity: 0.7;">This may take 10-15 seconds</p>
+      </div>
+      <div id="result"></div>
+    </div>
   </div>
 
-  <div id="result" class="wrap" style="margin-top:16px;"></div>
+  <script>
+    function fillExample(text) {
+      document.getElementById('claim').value = text;
+      document.getElementById('claim').focus();
+    }
+    
+    // Show loading state
+    document.body.addEventListener('htmx:beforeRequest', function() {
+      document.getElementById('loading').style.display = 'block';
+      document.getElementById('result').innerHTML = '';
+    });
+    
+    document.body.addEventListener('htmx:afterRequest', function() {
+      document.getElementById('loading').style.display = 'none';
+    });
+  </script>
 </body>
 </html>

app/web/templates/result.html

@@ -2,65 +2,377 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>{{ r.verdict }} • Fact-Check</title>
+  <title>{{ r.verdict }} • AI Fact-Check Results</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
   <style>
-    :root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color-scheme: light dark; }
-    body { margin: 0; padding: 24px; max-width: 900px; }
-    .badge { display:inline-block; padding:4px 10px; border-radius:999px; font-weight:600; font-size:14px; }
-    .True { background:#e6ffed; color:#05620d; border:1px solid #b1f0b8; }
-    .False { background:#ffe8e6; color:#7b1010; border:1px solid #f3b3ad; }
-    .Misleading { background:#fff6e0; color:#6a4b00; border:1px solid #f3d49a; }
-    .Unverified { background:#eef2f7; color:#3b4252; border:1px solid #d0d7e2; }
-    .card { border:1px solid #e5e7eb; border-radius:12px; padding:16px; margin:12px 0; }
-    .muted { color:#6b7280; font-size:14px; }
-    .sources li{ margin: 6px 0; }
-    code, pre { background:#f6f8fa; padding:8px; border-radius:8px; display:block; overflow:auto; }
-    button { padding:8px 12px; border-radius:8px; border:1px solid #d1d5db; cursor:pointer; }
+    :root { 
+      --primary: #3b82f6;
+      --primary-dark: #2563eb;
+      --secondary: #10b981;
+      --danger: #ef4444;
+      --warning: #f59e0b;
+      --gray-50: #f9fafb;
+      --gray-100: #f3f4f6;
+      --gray-200: #e5e7eb;
+      --gray-300: #d1d5db;
+      --gray-600: #4b5563;
+      --gray-700: #374151;
+      --gray-900: #111827;
+      font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    }
+    
+    * { box-sizing: border-box; }
+    
+    body { 
+      margin: 0; 
+      padding: 0; 
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      min-height: 100vh;
+      color: var(--gray-900);
+    }
+    
+    .container {
+      max-width: 1000px;
+      margin: 0 auto;
+      padding: 2rem;
+    }
+    
+    .header {
+      text-align: center;
+      margin-bottom: 2rem;
+      color: white;
+    }
+    
+    .header h1 {
+      font-size: 2.5rem;
+      font-weight: 700;
+      margin: 0 0 0.5rem;
+      background: linear-gradient(45deg, #fff, #f0f9ff);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    
+    .header p {
+      font-size: 1.1rem;
+      opacity: 0.9;
+      margin: 0;
+    }
+    
+    .main-card {
+      background: white;
+      border-radius: 24px;
+      padding: 2.5rem;
+      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      backdrop-filter: blur(10px);
+    }
+    
+    .verdict-section {
+      text-align: center;
+      margin-bottom: 2rem;
+      padding: 2rem;
+      border-radius: 20px;
+      background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+    }
+    
+    .verdict-badge {
+      display: inline-block;
+      padding: 1rem 2.5rem;
+      border-radius: 50px;
+      font-weight: 700;
+      font-size: 1.5rem;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 1rem;
+      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+    }
+    
+    .True {
+      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+      color: white;
+    }
+    
+    .False {
+      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+      color: white;
+    }
+    
+    .Misleading {
+      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+      color: white;
+    }
+    
+    .Unverified {
+      background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
+      color: white;
+    }
+    
+    .confidence-display {
+      font-size: 2rem;
+      font-weight: 700;
+      color: var(--gray-700);
+      margin: 1rem 0;
+    }
+    
+    .section {
+      margin: 2.5rem 0;
+    }
+    
+    .section-title {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      font-size: 1.5rem;
+      font-weight: 600;
+      color: #374151;
+      margin-bottom: 1.5rem;
+      padding-bottom: 0.75rem;
+      border-bottom: 3px solid #e5e7eb;
+    }
+    
+    .claim-text {
+      background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+      border-left: 6px solid var(--primary);
+      padding: 2rem;
+      border-radius: 0 16px 16px 0;
+      font-size: 1.2rem;
+      line-height: 1.7;
+      font-style: italic;
+      margin-bottom: 1.5rem;
+      box-shadow: 0 4px 15px rgba(59, 130, 246, 0.1);
+    }
+    
+    .rationale-text {
+      background: #f8fafc;
+      padding: 2rem;
+      border-radius: 16px;
+      line-height: 1.8;
+      color: #374151;
+      border: 1px solid #e2e8f0;
+      font-size: 1.05rem;
+    }
+    
+    .post-container {
+      background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
+      border: 3px dashed var(--primary);
+      border-radius: 20px;
+      padding: 2rem;
+      position: relative;
+    }
+    
+    .post-text {
+      font-family: system-ui, sans-serif;
+      font-size: 1.1rem;
+      line-height: 1.7;
+      color: #1f2937;
+      margin: 0;
+      white-space: pre-wrap;
+      background: white;
+      padding: 1.5rem;
+      border-radius: 12px;
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    }
+    
+    .copy-button {
+      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+      color: white;
+      border: none;
+      padding: 1rem 2rem;
+      border-radius: 30px;
+      font-weight: 600;
+      cursor: pointer;
+      margin-top: 1.5rem;
+      transition: all 0.3s ease;
+      box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
+      font-size: 1rem;
+    }
+    
+    .copy-button:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
+    }
+    
+    .sources-grid {
+      display: grid;
+      gap: 1.5rem;
+    }
+    
+    .source-card {
+      background: white;
+      border: 1px solid #e5e7eb;
+      border-radius: 16px;
+      padding: 1.5rem;
+      transition: all 0.3s ease;
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+    }
+    
+    .source-card:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
+      border-color: var(--primary);
+    }
+    
+    .source-title {
+      font-weight: 600;
+      color: #1f2937;
+      text-decoration: none;
+      font-size: 1.1rem;
+      line-height: 1.5;
+      display: block;
+      margin-bottom: 0.75rem;
+    }
+    
+    .source-title:hover {
+      color: var(--primary);
+    }
+    
+    .source-snippet {
+      color: #6b7280;
+      font-size: 0.95rem;
+      line-height: 1.6;
+      margin-top: 0.75rem;
+    }
+    
+    .source-url {
+      color: var(--primary);
+      font-size: 0.85rem;
+      margin-top: 0.75rem;
+      word-break: break-all;
+      background: #f8fafc;
+      padding: 0.5rem;
+      border-radius: 6px;
+    }
+    
+    .footer {
+      text-align: center;
+      margin-top: 3rem;
+      padding: 2rem;
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 20px;
+      backdrop-filter: blur(10px);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      color: white;
+    }
+    
+    .footer a {
+      color: white;
+      text-decoration: none;
+      font-weight: 500;
+      background: rgba(255, 255, 255, 0.2);
+      padding: 0.5rem 1rem;
+      border-radius: 25px;
+      transition: all 0.3s ease;
+    }
+    
+    .footer a:hover {
+      background: rgba(255, 255, 255, 0.3);
+      transform: translateY(-2px);
+    }
+    
+    @media (max-width: 768px) {
+      .container { padding: 1rem; }
+      .main-card { padding: 1.5rem; }
+      .verdict-badge { font-size: 1.2rem; padding: 0.75rem 1.5rem; }
+      .section-title { font-size: 1.25rem; }
+    }
   </style>
 </head>
 <body>
-  <h1 class="muted">Automated Fact-Check</h1>
-  <div class="card">
-    <div><span class="badge {{ r.verdict }}">{{ r.verdict }}</span></div>
-    <h2 style="margin:10px 0 6px 0;">Claim</h2>
-    <p>{{ r.claim }}</p>
-    <h3 style="margin:10px 0 6px 0;">Rationale</h3>
-    <p>{{ r.rationale }}</p>
-    <div class="muted">Confidence: {{ '%.2f' % r.confidence }}</div>
-  </div>
+  <div class="container">
+    <div class="header">
+      <h1>🔍 Fact-Check Results</h1>
+      <p>AI-powered claim verification and analysis</p>
+    </div>
 
-  <div class="card">
-    <h3 style="margin:0 0 6px 0;">Ready-to-post</h3>
-    <pre id="post">{{ r.post }}</pre>
-    <button onclick="copyPost()">Copy</button>
-  </div>
+    <div class="main-card">
+      <div class="verdict-section">
+        <div class="verdict-badge {{ r.verdict }}">
+          {% if r.verdict == 'True' %}✅ Verified True
+          {% elif r.verdict == 'False' %}❌ Verified False
+          {% elif r.verdict == 'Misleading' %}⚠️ Misleading
+          {% else %}❓ Unverified
+          {% endif %}
+        </div>
+        <div class="confidence-display">{{ '%.0f' % (r.confidence * 100) }}% Confidence</div>
+      </div>
+
+      <div class="section">
+        <h2 class="section-title">
+          <span>💬</span>
+          Claim Verified
+        </h2>
+        <div class="claim-text">{{ r.claim }}</div>
+      </div>
+
+      <div class="section">
+        <h2 class="section-title">
+          <span>🧠</span>
+          AI Analysis & Reasoning
+        </h2>
+        <div class="rationale-text">{{ r.rationale }}</div>
+      </div>
+
+      <div class="section">
+        <h2 class="section-title">
+          <span>📱</span>
+          Ready-to-Share Social Media Post
+        </h2>
+        <div class="post-container">
+          <div class="post-text" id="social-post">{{ r.post }}</div>
+          <button class="copy-button" onclick="copyPost()">
+            📋 Copy to Clipboard
+          </button>
+        </div>
+      </div>
+
+      <div class="section">
+        <h2 class="section-title">
+          <span>🔍</span>
+          Sources Analyzed ({{ r.sources|length }})
+        </h2>
+        <div class="sources-grid">
+          {% for s in r.sources %}
+            <div class="source-card">
+              <a href="{{ s.url }}" target="_blank" rel="noopener" class="source-title">
+                {{ s.title }}
+              </a>
+              <div class="source-url">{{ s.url }}</div>
+              {% if s.snippet %}
+                <div class="source-snippet">{{ s.snippet }}</div>
+              {% endif %}
+            </div>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
 
-  <div class="card">
-    <h3 style="margin:0 0 6px 0;">Sources</h3>
-    <ol class="sources">
-      {% for s in r.sources %}
-      <li>
-        <a href="{{ s.url }}" target="_blank" rel="noopener">{{ s.title }}</a>
-        {% if s.snippet %}<div class="muted">{{ s.snippet }}</div>{% endif %}
-        {% if s.evidence and s.evidence|length > 0 %}
-          <details><summary>evidence</summary>
-            <ul>
-              {% for ev in s.evidence %}
-              <li>{{ ev }}</li>
-              {% endfor %}
-            </ul>
-          </details>
-        {% endif %}
-      </li>
-      {% endfor %}
-    </ol>
+    <div class="footer">
+      <p style="margin: 0 0 1rem;">Want to fact-check another claim?</p>
+      <a href="/">🚀 Try Another Fact-Check</a>
+    </div>
   </div>
 
   <script>
     function copyPost() {
-      const txt = document.getElementById('post').innerText;
-      navigator.clipboard.writeText(txt);
+      const element = document.getElementById('social-post');
+      const text = element.innerText;
+      
+      navigator.clipboard.writeText(text).then(function() {
+        const button = event.target;
+        const originalText = button.innerHTML;
+        button.innerHTML = '✅ Copied!';
+        button.style.background = 'linear-gradient(135deg, #10b981 0%, #059669 100%)';
+        
+        setTimeout(() => {
+          button.innerHTML = originalText;
+          button.style.background = 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)';
+        }, 2000);
+      }).catch(function(err) {
+        console.error('Failed to copy text: ', err);
+        alert('Failed to copy to clipboard');
+      });
     }
   </script>
 </body>