From 7aa036e6be42863d9620eba7f6567199ab886139 Mon Sep 17 00:00:00 2001
From: Galaxy Rawat <144615927+Galaxicitti@users.noreply.github.com>
Date: Wed, 24 Sep 2025 00:13:32 +0530
Subject: [PATCH] Added my file

---
 templates/index.html | 817 +++++++++++++++++++++++++++----------------
 1 file changed, 518 insertions(+), 299 deletions(-)
diff --git a/templates/index.html b/templates/index.html
index 8a7d165..e950937 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,6 +3,20 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Free AI-powered tool to verify news articles and claims.">
+    <link rel="canonical" href="https://yoursite.com/fact-checker" />
+    <!-- Open Graph / Social -->
+    <meta property="og:title" content="Quick Fact Checker">
+    <meta property="og:description" content="Verify news authenticity with AI-powered analysis.">
+    <meta property="og:image" content="https://yoursite.com/logo-preview.png">
+    <meta property="og:url" content="https://yoursite.com/fact-checker">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Quick Fact Checker">
+    <meta name="twitter:description" content="Verify news authenticity with AI-powered analysis.">
+    <meta name="twitter:image" content="https://yoursite.com/logo-preview.png">
+    <!-- PWA -->
+    <link rel="manifest" href="/manifest.json">
+    <meta name="theme-color" content="#4f46e5">
     <title>Enhanced Quick Fact Checker with Modern UI/UX</title>
     <style>
         :root {
@@ -34,13 +48,11 @@
             --shadow-light: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
             --shadow-dark: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
         }
-
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
-
         body {
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
                 Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
@@ -51,24 +63,20 @@
             background: var(--background-light);
             color: var(--text-primary-light);
         }
-
         body.dark {
             background: var(--background-dark);
             color: var(--text-primary-dark);
         }
-
         .container {
             max-width: 1000px;
             margin: 0 auto;
             padding: 2rem 0;
         }
-
         .header {
             text-align: center;
             margin-bottom: 3rem;
             position: relative;
         }
-
         .theme-toggle {
             position: absolute;
             right: 0;
@@ -87,18 +95,15 @@
             backdrop-filter: blur(10px);
             transform: scale(1);
         }
-
         body.dark .theme-toggle {
             background: var(--card-dark);
             color: var(--text-primary-dark);
             box-shadow: var(--shadow-dark);
         }
-
         .theme-toggle:hover {
             transform: scale(1.1);
             box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
         }
-
         .logo-container {
             width: 80px;
             height: 80px;
@@ -111,17 +116,15 @@
             color: white;
             box-shadow: var(--shadow-light);
             animation: float 3s ease-in-out infinite;
+            will-change: transform;
         }
-
         body.dark .logo-container {
             box-shadow: var(--shadow-dark);
         }
-
         @keyframes float {
             0%, 100% { transform: translateY(0px); }
             50% { transform: translateY(-10px); }
         }
-
         h1 {
             font-size: clamp(2rem, 5vw, 3.5rem);
             font-weight: 700;
@@ -131,17 +134,14 @@
             -webkit-text-fill-color: transparent;
             background-clip: text;
         }
-
         .subtitle {
             color: var(--text-secondary-light);
             font-size: 1.25rem;
             margin-bottom: 2rem;
         }
-
         body.dark .subtitle {
             color: var(--text-secondary-dark);
         }
-
         .main-card {
             background: var(--card-light);
             border-radius: 1.5rem;
@@ -152,17 +152,14 @@
             border: 1px solid rgba(255, 255, 255, 0.2);
             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
-
         body.dark .main-card {
             background: var(--card-dark);
             box-shadow: var(--shadow-dark);
             border: 1px solid rgba(255, 255, 255, 0.1);
         }
-
         .form-group {
             margin-bottom: 2rem;
         }
-
         label {
             display: block;
             font-size: 0.875rem;
@@ -170,15 +167,12 @@
             margin-bottom: 0.75rem;
             color: var(--text-primary-light);
         }
-
         body.dark label {
             color: var(--text-primary-dark);
         }
-
         .textarea-container {
             position: relative;
         }
-
         textarea {
             width: 100%;
             min-height: 120px;
@@ -194,28 +188,23 @@
             color: var(--text-primary-light);
             line-height: 1.5;
         }
-
         body.dark textarea {
             background: rgba(31, 41, 55, 0.5);
             color: var(--text-primary-dark);
             border-color: var(--border-dark);
         }
-
         textarea:focus {
             outline: none;
             border-color: var(--primary-color);
             box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
             transform: translateY(-2px);
         }
-
         textarea::placeholder {
             color: var(--text-secondary-light);
         }
-
         body.dark textarea::placeholder {
             color: var(--text-secondary-dark);
         }
-
         .char-count {
             position: absolute;
             bottom: 0.75rem;
@@ -226,34 +215,43 @@
             padding: 0.25rem 0.5rem;
             border-radius: 0.5rem;
             backdrop-filter: blur(10px);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .clear-btn {
+            background: none;
+            border: none;
+            color: var(--text-secondary-light);
+            cursor: pointer;
+            font-size: 0.875rem;
+            padding: 0;
+            display: none;
+        }
+        .clear-btn:hover {
+            color: var(--error);
         }
-
         body.dark .char-count {
             color: var(--text-secondary-dark);
             background: var(--card-dark);
         }
-
         .sample-inputs {
             margin-bottom: 1.5rem;
         }
-
         .sample-inputs p {
             font-size: 0.875rem;
             font-weight: 500;
             margin-bottom: 0.75rem;
             color: var(--text-secondary-light);
         }
-
         body.dark .sample-inputs p {
             color: var(--text-secondary-dark);
         }
-
         .sample-buttons {
             display: flex;
             flex-wrap: wrap;
             gap: 0.5rem;
         }
-
         .sample-btn {
             background: rgba(79, 70, 229, 0.1);
             color: var(--primary-color);
@@ -265,12 +263,10 @@
             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             transform: scale(1);
         }
-
         .sample-btn:hover {
             background: rgba(79, 70, 229, 0.2);
             transform: scale(1.05);
         }
-
         .btn-primary {
             width: 100%;
             padding: 1rem;
@@ -288,24 +284,21 @@
             gap: 0.75rem;
             box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.3);
             transform: scale(1);
+            will-change: transform;
         }
-
         .btn-primary:hover:not(:disabled) {
             transform: scale(1.02) translateY(-2px);
             box-shadow: 0 20px 40px -10px rgba(79, 70, 229, 0.4);
         }
-
         .btn-primary:active:not(:disabled) {
             transform: scale(0.98);
         }
-
         .btn-primary:disabled {
             background: linear-gradient(135deg, #9ca3af, #6b7280);
             cursor: not-allowed;
             transform: none;
             box-shadow: none;
         }
-
         .loading-spinner {
             display: none;
             width: 24px;
@@ -315,11 +308,9 @@
             border-top-color: white;
             animation: spin 1s linear infinite;
         }
-
         @keyframes spin {
             to { transform: rotate(360deg); }
         }
-
         .prediction-result {
             margin-top: 2rem;
             padding: 1.5rem;
@@ -331,49 +322,42 @@
             transform: translateY(20px);
             opacity: 0;
             border: 2px solid transparent;
+            scroll-margin-top: 2rem;
         }
-
         .prediction-result.show {
             display: flex;
             transform: translateY(0);
             opacity: 1;
         }
-
         .prediction-result.success {
             background: var(--success-bg-light);
             color: var(--success);
             border-color: rgba(5, 150, 105, 0.3);
             box-shadow: 0 10px 25px -5px rgba(5, 150, 105, 0.2);
         }
-
         body.dark .prediction-result.success {
             background: var(--success-bg-dark);
             color: var(--success-light);
         }
-
         .prediction-result.error {
             background: var(--error-bg-light);
             color: var(--error);
             border-color: rgba(220, 38, 38, 0.3);
             box-shadow: 0 10px 25px -5px rgba(220, 38, 38, 0.2);
         }
-
         body.dark .prediction-result.error {
             background: var(--error-bg-dark);
             color: var(--error-light);
         }
-
         .prediction-result.warning {
             background: var(--warning-bg-light);
             color: var(--warning);
             border-color: rgba(217, 119, 6, 0.3);
             box-shadow: 0 10px 25px -5px rgba(217, 119, 6, 0.2);
         }
-
         body.dark .prediction-result.warning {
             background: var(--warning-bg-dark);
         }
-
         .result-icon {
             flex-shrink: 0;
             width: 48px;
@@ -384,34 +368,27 @@
             justify-content: center;
             animation: pulse 2s infinite;
         }
-
         .prediction-result.success .result-icon {
             background: rgba(5, 150, 105, 0.2);
         }
-
         .prediction-result.error .result-icon {
             background: rgba(220, 38, 38, 0.2);
         }
-
         .prediction-result.warning .result-icon {
             background: rgba(217, 119, 6, 0.2);
         }
-
         @keyframes pulse {
             0%, 100% { transform: scale(1); }
             50% { transform: scale(1.05); }
         }
-
         .result-content {
             flex: 1;
         }
-
         .result-title {
             font-size: 1.25rem;
             font-weight: 700;
             margin-bottom: 0.5rem;
         }
-
         .confidence-bar {
             width: 100%;
             height: 8px;
@@ -420,28 +397,23 @@
             overflow: hidden;
             margin: 1rem 0;
         }
-
         .confidence-fill {
             height: 100%;
             border-radius: 4px;
             transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
             width: 0%;
         }
-
         .prediction-result.success .confidence-fill {
             background: linear-gradient(90deg, var(--success), var(--success-light));
         }
-
         .prediction-result.error .confidence-fill {
             background: linear-gradient(90deg, var(--error), var(--error-light));
         }
-
         .result-actions {
             display: flex;
             gap: 0.75rem;
             margin-top: 1rem;
         }
-
         .action-btn {
             background: rgba(255, 255, 255, 0.2);
             border: 1px solid rgba(255, 255, 255, 0.3);
@@ -455,12 +427,10 @@
             align-items: center;
             gap: 0.5rem;
         }
-
         .action-btn:hover {
             background: rgba(255, 255, 255, 0.3);
             transform: translateY(-1px);
         }
-
         .history-card {
             background: var(--card-light);
             border-radius: 1.5rem;
@@ -470,13 +440,11 @@
             border: 1px solid rgba(255, 255, 255, 0.2);
             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
-
         body.dark .history-card {
             background: var(--card-dark);
             box-shadow: var(--shadow-dark);
             border: 1px solid rgba(255, 255, 255, 0.1);
         }
-
         .history-header {
             display: flex;
             align-items: center;
@@ -484,7 +452,6 @@
             margin-bottom: 1.5rem;
             cursor: pointer;
         }
-
         .history-title {
             display: flex;
             align-items: center;
@@ -493,29 +460,23 @@
             font-weight: 600;
             color: var(--text-primary-light);
         }
-
         body.dark .history-title {
             color: var(--text-primary-dark);
         }
-
         .history-toggle {
             transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
-
         .history-toggle.expanded {
             transform: rotate(180deg);
         }
-
         .history-items {
             display: none;
             space: 1rem 0;
         }
-
         .history-items.show {
             display: block;
             animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
-
         @keyframes slideDown {
             from {
                 opacity: 0;
@@ -526,7 +487,6 @@
                 transform: translateY(0);
             }
         }
-
         .history-item {
             background: rgba(255, 255, 255, 0.3);
             border-radius: 0.75rem;
@@ -534,47 +494,39 @@
             margin-bottom: 0.75rem;
             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             border: 1px solid rgba(255, 255, 255, 0.2);
+            position: relative;
         }
-
-        body.dark .history-item {
-            background: rgba(31, 41, 55, 0.3);
-            border-color: rgba(255, 255, 255, 0.1);
-        }
-
         .history-item:hover {
             transform: translateY(-2px);
             box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
         }
-
+        body.dark .history-item {
+            background: rgba(31, 41, 55, 0.3);
+            border-color: rgba(255, 255, 255, 0.1);
+        }
         .history-item-header {
             display: flex;
             justify-content: space-between;
             align-items: center;
             margin-bottom: 0.5rem;
         }
-
         .history-result {
             font-weight: 600;
             font-size: 0.875rem;
         }
-
         .history-result.true {
             color: var(--success);
         }
-
         .history-result.false {
             color: var(--error);
         }
-
         .history-date {
             font-size: 0.75rem;
             color: var(--text-secondary-light);
         }
-
         body.dark .history-date {
             color: var(--text-secondary-dark);
         }
-
         .history-text {
             font-size: 0.875rem;
             color: var(--text-secondary-light);
@@ -584,47 +536,50 @@
             -webkit-box-orient: vertical;
             overflow: hidden;
         }
-
         body.dark .history-text {
             color: var(--text-secondary-dark);
         }
-
+        .copy-history-btn {
+            position: absolute;
+            top: 0.5rem;
+            right: 0.5rem;
+            background: none;
+            border: none;
+            color: var(--text-secondary-light);
+            cursor: pointer;
+            font-size: 0.875rem;
+        }
+        .copy-history-btn:hover {
+            color: var(--primary-color);
+        }
         @media (max-width: 768px) {
             .container {
                 padding: 1rem 0;
             }
-
             .main-card, .history-card {
                 padding: 1.5rem;
                 margin-bottom: 1.5rem;
             }
-
             .theme-toggle {
                 position: relative;
                 margin-bottom: 1rem;
             }
-
             .header {
                 margin-bottom: 2rem;
             }
-
             h1 {
                 font-size: 2.5rem;
             }
-
             .subtitle {
                 font-size: 1rem;
             }
-
             .sample-buttons {
                 justify-content: center;
             }
-
             .result-actions {
                 flex-direction: column;
             }
         }
-
         .toast {
             position: fixed;
             bottom: 2rem;
@@ -640,19 +595,35 @@
             opacity: 0;
             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             z-index: 1000;
+            max-width: 300px;
         }
-
         body.dark .toast {
             background: var(--card-dark);
             color: var(--text-primary-dark);
             box-shadow: var(--shadow-dark);
             border-color: rgba(255, 255, 255, 0.1);
         }
-
         .toast.show {
             transform: translateY(0);
             opacity: 1;
         }
+        /* Retry button */
+        .retry-btn {
+            margin-top: 1rem;
+            background: rgba(255,255,255,0.2);
+            border: none;
+            color: inherit;
+            padding: 0.5rem 1rem;
+            border-radius: 0.5rem;
+            cursor: pointer;
+            font-size: 0.875rem;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .retry-btn:hover {
+            background: rgba(255,255,255,0.3);
+        }
     </style>
 </head>
 <body>
@@ -671,7 +642,6 @@
                     <path d="m19.07 4.93-1.41 1.41"/>
                 </svg>
             </button>
-            
             <div class="logo-container">
                 <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
@@ -681,13 +651,11 @@
                     <polyline points="10,9 9,9 8,9"/>
                 </svg>
             </div>
-            
             <h1>Quick Fact Checker</h1>
             <p class="subtitle">Verify the authenticity of news articles and claims with AI-powered analysis</p>
         </div>
-
         <div class="main-card">
-            <form id="prediction-form">
+            <form id="prediction-form" novalidate>
                 <div class="form-group">
                     <label for="text-input">Enter text to analyze</label>
                     <div class="textarea-container">
@@ -695,12 +663,15 @@ <h1>Quick Fact Checker</h1>
                             id="text-input" 
                             name="text" 
                             placeholder="Paste your article, news story, or claim here for fact-checking..."
+                            aria-describedby="char-count"
                             required
                         ></textarea>
-                        <div class="char-count" id="char-count">0 characters</div>
+                        <div class="char-count" id="char-count">
+                            <span id="char-count-text">0 characters</span>
+                            <button type="button" class="clear-btn" id="clear-btn" aria-label="Clear text">✖️</button>
+                        </div>
                     </div>
                 </div>
-
                 <div class="sample-inputs">
                     <p>Try these examples:</p>
                     <div class="sample-buttons">
@@ -709,8 +680,7 @@ <h1>Quick Fact Checker</h1>
                         <button type="button" class="sample-btn" data-sample="Local government announces new infrastructure project to improve city transportation with $50 million budget allocation.">Example 3</button>
                     </div>
                 </div>
-
-                <button type="submit" id="submit-btn" class="btn-primary">
+                <button type="submit" id="submit-btn" class="btn-primary" aria-label="Analyze text">
                     <span class="btn-content">
                         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                             <circle cx="11" cy="11" r="8"/>
@@ -718,11 +688,10 @@ <h1>Quick Fact Checker</h1>
                         </svg>
                         Analyze Text
                     </span>
-                    <span class="loading-spinner"></span>
+                    <span class="loading-spinner" aria-hidden="true"></span>
                 </button>
             </form>
-
-            <div id="prediction-result" class="prediction-result">
+            <div id="prediction-result" class="prediction-result" role="status" aria-live="polite" aria-atomic="true">
                 <div class="result-icon">
                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="result-icon-svg">
                         <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/>
@@ -737,14 +706,14 @@ <h1>Quick Fact Checker</h1>
                     </div>
                     <div id="confidence-text" style="display: none;"></div>
                     <div class="result-actions">
-                        <button class="action-btn" id="copy-btn">
+                        <button class="action-btn" id="copy-btn" aria-label="Copy result">
                             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                 <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
                                 <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
                             </svg>
                             Copy Result
                         </button>
-                        <button class="action-btn" id="share-btn">
+                        <button class="action-btn" id="share-btn" aria-label="Share result">
                             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                 <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/>
                                 <polyline points="16,6 12,2 8,6"/>
@@ -753,12 +722,20 @@ <h1>Quick Fact Checker</h1>
                             Share
                         </button>
                     </div>
+                    <button class="retry-btn" id="retry-btn" style="display: none;" aria-label="Retry analysis">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M21 2v6h-6"/>
+                            <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
+                            <path d="M3 22v-6h6"/>
+                            <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
+                        </svg>
+                        Retry
+                    </button>
                 </div>
             </div>
         </div>
-
         <div class="history-card" id="history-card" style="display: none;">
-            <div class="history-header" id="history-header">
+            <div class="history-header" id="history-header" role="button" aria-expanded="false" tabindex="0">
                 <div class="history-title">
                     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                         <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/>
@@ -771,132 +748,271 @@ <h1>Quick Fact Checker</h1>
                     <polyline points="6,9 12,15 18,9"/>
                 </svg>
             </div>
-            <div class="history-items" id="history-items"></div>
+            <div class="history-items" id="history-items" aria-live="polite"></div>
         </div>
     </div>
-
-    <div class="toast" id="toast"></div>
-
+    <div class="toast" id="toast" role="alert" aria-live="assertive" aria-atomic="true"></div>
+    <!-- Confetti Canvas (hidden by default) -->
+    <canvas id="confetti-canvas" style="position: fixed; pointer-events: none; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: none;"></canvas>
     <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            // Elements
-            const form = document.getElementById('prediction-form');
-            const submitBtn = document.getElementById('submit-btn');
-            const btnContent = submitBtn.querySelector('.btn-content');
-            const loadingSpinner = submitBtn.querySelector('.loading-spinner');
-            const predictionResult = document.getElementById('prediction-result');
-            const themeToggle = document.getElementById('theme-toggle');
-            const themeIcon = themeToggle.querySelector('.theme-icon');
-            const textInput = document.getElementById('text-input');
-            const charCount = document.getElementById('char-count');
-            const sampleBtns = document.querySelectorAll('.sample-btn');
-            const historyCard = document.getElementById('history-card');
-            const historyHeader = document.getElementById('history-header');
-            const historyItems = document.getElementById('history-items');
-            const historyToggle = document.getElementById('history-toggle');
-            const historyCount = document.getElementById('history-count');
-            const copyBtn = document.getElementById('copy-btn');
-            const shareBtn = document.getElementById('share-btn');
-            const toast = document.getElementById('toast');
-
+        // 🎯 IIFE Pattern - Modular, maintainable, scalable
+        (function() {
+            'use strict';
+            // ======================
+            // CONFIG & CONSTANTS
+            // ======================
+            const CONFIG = {
+                MAX_CHARACTERS: 1000,
+                MAX_HISTORY_ITEMS: 5,
+                API_TIMEOUT_MIN: 2000,
+                API_TIMEOUT_MAX: 3000,
+                CONFIDENCE_MIN: 0.65,
+                CONFIDENCE_RANGE: 0.30,
+                STORAGE_KEY: 'fact-check-history',
+                THEME_STORAGE_KEY: 'theme'
+            };
+            // i18n Strings (ready for translation)
+            const STRINGS = {
+                EMPTY_INPUT: "Please enter some text to analyze.",
+                COPIED: "Result copied to clipboard!",
+                COPY_FAILED: "Failed to copy result",
+                SHARED: "Result shared successfully!",
+                SHARE_FAILED: "Failed to share result",
+                LINK_COPIED: "Share link copied to clipboard!",
+                ANALYSIS_ERROR: "Error analyzing text. Please try again.",
+                RETRY_SUCCESS: "Retrying analysis...",
+                CHARACTER_COUNT: (count) => `${count} character${count !== 1 ? 's' : ''}`,
+                RESULT_TRUE: "This text is likely TRUE",
+                RESULT_FALSE: "This text is likely FAKE",
+                ANALYSIS_COMPLETED: (text) => `Analysis completed for: "${text.substring(0, 100)}${text.length > 100 ? '...' : ''}"`,
+                HISTORY_RESULT_TRUE: "TRUE",
+                HISTORY_RESULT_FALSE: "FAKE",
+                SHARE_TEXT: (result, text) => `Quick Fact Checker result: ${result} - "${text.substring(0, 100)}..."`
+            };
+            // DOM Elements
+            const elements = {
+                form: document.getElementById('prediction-form'),
+                submitBtn: document.getElementById('submit-btn'),
+                btnContent: document.querySelector('.btn-content'),
+                loadingSpinner: document.querySelector('.loading-spinner'),
+                predictionResult: document.getElementById('prediction-result'),
+                themeToggle: document.getElementById('theme-toggle'),
+                themeIcon: document.querySelector('.theme-icon'),
+                textInput: document.getElementById('text-input'),
+                charCountText: document.getElementById('char-count-text'),
+                clearBtn: document.getElementById('clear-btn'),
+                sampleBtns: document.querySelectorAll('.sample-btn'),
+                historyCard: document.getElementById('history-card'),
+                historyHeader: document.getElementById('history-header'),
+                historyItems: document.getElementById('history-items'),
+                historyToggle: document.getElementById('history-toggle'),
+                historyCount: document.getElementById('history-count'),
+                copyBtn: document.getElementById('copy-btn'),
+                shareBtn: document.getElementById('share-btn'),
+                retryBtn: document.getElementById('retry-btn'),
+                toast: document.getElementById('toast'),
+                confettiCanvas: document.getElementById('confetti-canvas')
+            };
             // State
             let currentResult = null;
-            let history = JSON.parse(localStorage.getItem('fact-check-history') || '[]');
+            let history = JSON.parse(localStorage.getItem(CONFIG.STORAGE_KEY) || '[]');
             let historyExpanded = false;
-
-            // Theme management
-            const savedTheme = localStorage.getItem('theme') || 'light';
-            if (savedTheme === 'dark') {
-                document.body.classList.add('dark');
-            }
-            updateThemeIcon(savedTheme);
-
-            function updateThemeIcon(theme) {
-                if (theme === 'dark') {
-                    themeIcon.innerHTML = `
-                        <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>
-                    `;
-                } else {
-                    themeIcon.innerHTML = `
-                        <circle cx="12" cy="12" r="4"/>
-                        <path d="M12 2v2"/>
-                        <path d="M12 20v2"/>
-                        <path d="m4.93 4.93 1.41 1.41"/>
-                        <path d="m17.66 17.66 1.41 1.41"/>
-                        <path d="M2 12h2"/>
-                        <path d="M20 12h2"/>
-                        <path d="m6.34 17.66-1.41 1.41"/>
-                        <path d="m19.07 4.93-1.41 1.41"/>
-                    `;
+            let resizeTimeout = null;
+            // Initialize
+            init();
+            function init() {
+                // Theme
+                const savedTheme = localStorage.getItem(CONFIG.THEME_STORAGE_KEY) || 'light';
+                if (savedTheme === 'dark') {
+                    document.body.classList.add('dark');
+                }
+                updateThemeIcon(savedTheme);
+                // Event Listeners
+                bindEvents();
+                // Initial Setup
+                updateCharCount();
+                updateHistoryDisplay();
+                setupConfettiCanvas();
+                // Register Service Worker for PWA
+                if ('serviceWorker' in navigator) {
+                    navigator.serviceWorker.register('/sw.js').catch(console.warn);
                 }
             }
-
-            themeToggle.addEventListener('click', () => {
+            function bindEvents() {
+                // Theme Toggle
+                elements.themeToggle.addEventListener('click', toggleTheme);
+                // Form Submission
+                elements.form.addEventListener('submit', handleFormSubmit);
+                // Textarea Input (Debounced)
+                elements.textInput.addEventListener('input', () => {
+                    clearTimeout(resizeTimeout);
+                    resizeTimeout = setTimeout(() => {
+                        adjustTextareaHeight();
+                        updateCharCount();
+                        toggleClearButton();
+                    }, 100);
+                });
+                // Clear Button
+                elements.clearBtn.addEventListener('click', clearInput);
+                // Sample Buttons
+                elements.sampleBtns.forEach(btn => {
+                    btn.addEventListener('click', () => {
+                        elements.textInput.value = btn.dataset.sample;
+                        adjustTextareaHeight();
+                        updateCharCount();
+                        toggleClearButton();
+                        elements.textInput.focus();
+                        elements.textInput.setSelectionRange(0, elements.textInput.value.length);
+                    });
+                });
+                // History Toggle
+                elements.historyHeader.addEventListener('click', toggleHistory);
+                elements.historyHeader.addEventListener('keydown', (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        toggleHistory();
+                    }
+                });
+                // Copy & Share
+                elements.copyBtn.addEventListener('click', copyResult);
+                elements.shareBtn.addEventListener('click', shareResult);
+                elements.retryBtn.addEventListener('click', retryAnalysis);
+                // Keyboard Navigation
+                document.addEventListener('keydown', handleGlobalKeys);
+            }
+            // ======================
+            // THEME MANAGEMENT
+            // ======================
+            function toggleTheme() {
                 const isDark = document.body.classList.toggle('dark');
                 const newTheme = isDark ? 'dark' : 'light';
-                localStorage.setItem('theme', newTheme);
+                localStorage.setItem(CONFIG.THEME_STORAGE_KEY, newTheme);
                 updateThemeIcon(newTheme);
-            });
-
-            // Auto-resize textarea
+            }
+            function updateThemeIcon(theme) {
+                elements.themeIcon.innerHTML = theme === 'dark' ? 
+                    `<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>` :
+                    `<circle cx="12" cy="12" r="4"/>
+                     <path d="M12 2v2"/>
+                     <path d="M12 20v2"/>
+                     <path d="m4.93 4.93 1.41 1.41"/>
+                     <path d="m17.66 17.66 1.41 1.41"/>
+                     <path d="M2 12h2"/>
+                     <path d="M20 12h2"/>
+                     <path d="m6.34 17.66-1.41 1.41"/>
+                     <path d="m19.07 4.93-1.41 1.41"/>`;
+            }
+            // ======================
+            // TEXTAREA & INPUT
+            // ======================
             function adjustTextareaHeight() {
-                textInput.style.height = 'auto';
-                textInput.style.height = Math.max(120, textInput.scrollHeight) + 'px';
+                elements.textInput.style.height = 'auto';
+                elements.textInput.style.height = Math.max(120, elements.textInput.scrollHeight) + 'px';
             }
-
-            // Character count
             function updateCharCount() {
-                const count = textInput.value.length;
-                charCount.textContent = `${count} character${count !== 1 ? 's' : ''}`;
+                const count = elements.textInput.value.length;
+                elements.charCountText.textContent = STRINGS.CHARACTER_COUNT(count);
+                // Warn if over limit
+                if (count > CONFIG.MAX_CHARACTERS) {
+                    showToast(`Text exceeds ${CONFIG.MAX_CHARACTERS} character limit.`);
+                    elements.submitBtn.disabled = true;
+                } else {
+                    elements.submitBtn.disabled = false;
+                }
+            }
+            function toggleClearButton() {
+                elements.clearBtn.style.display = elements.textInput.value.length > 0 ? 'block' : 'none';
             }
-
-            textInput.addEventListener('input', () => {
+            function clearInput() {
+                elements.textInput.value = '';
                 adjustTextareaHeight();
                 updateCharCount();
-            });
-
-            // Sample inputs
-            sampleBtns.forEach(btn => {
-                btn.addEventListener('click', () => {
-                    textInput.value = btn.dataset.sample;
-                    adjustTextareaHeight();
-                    updateCharCount();
-                    textInput.focus();
-                });
-            });
-
-            // Loading state
+                toggleClearButton();
+                elements.textInput.focus();
+            }
+            // ======================
+            // FORM & API SIMULATION
+            // ======================
+            async function handleFormSubmit(event) {
+                event.preventDefault();
+                const text = elements.textInput.value.trim();
+                if (!text) {
+                    showToast(STRINGS.EMPTY_INPUT);
+                    elements.textInput.focus();
+                    return;
+                }
+                if (text.length > CONFIG.MAX_CHARACTERS) {
+                    showToast(`Text exceeds ${CONFIG.MAX_CHARACTERS} character limit.`);
+                    return;
+                }
+                setLoading(true);
+                elements.predictionResult.classList.remove('show');
+                try {
+                    const result = await analyzeText(text);
+                    showResult(result.prediction, result.confidence, text);
+                } catch (error) {
+                    console.error('Analysis Error:', error);
+                    showResult(-1, null, text);
+                } finally {
+                    setLoading(false);
+                }
+            }
+            async function analyzeText(text) {
+                // Simulate API delay
+                await new Promise(resolve => 
+                    setTimeout(resolve, 
+                        CONFIG.API_TIMEOUT_MIN + 
+                        Math.random() * (CONFIG.API_TIMEOUT_MAX - CONFIG.API_TIMEOUT_MIN)
+                    )
+                );
+                // Mock prediction
+                return {
+                    prediction: Math.random() > 0.5 ? 1 : 0,
+                    confidence: CONFIG.CONFIDENCE_MIN + Math.random() * CONFIG.CONFIDENCE_RANGE
+                };
+            }
+            function retryAnalysis() {
+                elements.retryBtn.disabled = true;
+                elements.retryBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="loading-spinner" style="width:16px;height:16px;"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/></svg> ${STRINGS.RETRY_SUCCESS}`;
+                setTimeout(() => {
+                    handleFormSubmit(new Event('submit'));
+                }, 800);
+            }
+            // ======================
+            // UI & RESULTS
+            // ======================
             function setLoading(isLoading) {
-                submitBtn.disabled = isLoading;
-                btnContent.style.display = isLoading ? 'none' : 'flex';
-                loadingSpinner.style.display = isLoading ? 'block' : 'none';
+                elements.submitBtn.disabled = isLoading;
+                elements.btnContent.style.display = isLoading ? 'none' : 'flex';
+                elements.loadingSpinner.style.display = isLoading ? 'block' : 'none';
             }
-
-            // Show result
             function showResult(prediction, confidence = null, text = '') {
-                currentResult = { prediction, confidence, text, timestamp: new Date() };
-                
+                currentResult = { 
+                    prediction, 
+                    confidence, 
+                    text, 
+                    timestamp: new Date() 
+                };
                 const resultTitle = document.getElementById('result-title');
                 const resultMessage = document.getElementById('result-message');
                 const confidenceBar = document.getElementById('confidence-bar');
                 const confidenceFill = document.getElementById('confidence-fill');
                 const confidenceText = document.getElementById('confidence-text');
-                const resultIconSvg = predictionResult.querySelector('.result-icon-svg');
-
+                const resultIconSvg = elements.predictionResult.querySelector('.result-icon-svg');
                 // Reset classes
-                predictionResult.className = 'prediction-result';
-                
+                elements.predictionResult.className = 'prediction-result';
                 let message, className, iconSvg;
-                
                 if (prediction === 1) {
-                    message = 'This text is likely TRUE';
+                    message = STRINGS.RESULT_TRUE;
                     className = 'success';
                     iconSvg = `
                         <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/>
                         <path d="m9 12 2 2 4-4"/>
                     `;
+                    // Trigger confetti
+                    setTimeout(() => launchConfetti(), 500);
                 } else if (prediction === 0) {
-                    message = 'This text is likely FAKE';
+                    message = STRINGS.RESULT_FALSE;
                     className = 'error';
                     iconSvg = `
                         <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/>
@@ -904,25 +1020,23 @@ <h1>Quick Fact Checker</h1>
                         <path d="M12 17h.01"/>
                     `;
                 } else {
-                    message = 'Error analyzing text. Please try again.';
+                    message = STRINGS.ANALYSIS_ERROR;
                     className = 'warning';
                     iconSvg = `
                         <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/>
                         <path d="M12 9v4"/>
                         <path d="M12 17h.01"/>
                     `;
+                    elements.retryBtn.style.display = 'block';
                 }
-
-                predictionResult.classList.add(className);
+                elements.predictionResult.classList.add(className);
                 resultTitle.textContent = message;
-                resultMessage.textContent = `Analysis completed for: "${text.substring(0, 100)}${text.length > 100 ? '...' : ''}"`;
+                resultMessage.textContent = STRINGS.ANALYSIS_COMPLETED(text);
                 resultIconSvg.innerHTML = iconSvg;
-
                 if (confidence !== null && prediction !== -1) {
                     confidenceBar.style.display = 'block';
                     confidenceText.style.display = 'block';
                     confidenceText.textContent = `Confidence: ${Math.round(confidence * 100)}%`;
-                    
                     setTimeout(() => {
                         confidenceFill.style.width = `${confidence * 100}%`;
                     }, 300);
@@ -930,153 +1044,258 @@ <h1>Quick Fact Checker</h1>
                     confidenceBar.style.display = 'none';
                     confidenceText.style.display = 'none';
                 }
-
                 // Show result with animation
                 setTimeout(() => {
-                    predictionResult.classList.add('show');
-                    predictionResult.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                    elements.predictionResult.classList.add('show');
+                    elements.predictionResult.scrollIntoView({ 
+                        behavior: 'smooth', 
+                        block: 'start' 
+                    });
+                    elements.retryBtn.style.display = 'none';
+                    elements.retryBtn.disabled = false;
+                    elements.retryBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2v6h-6"/><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M3 22v-6h6"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/></svg> Retry`;
                 }, 100);
-
                 // Add to history
                 if (prediction !== -1) {
                     addToHistory(currentResult);
                 }
             }
-
-            // History management
+            // ======================
+            // HISTORY MANAGEMENT
+            // ======================
             function addToHistory(result) {
                 const historyItem = {
                     id: Date.now().toString(),
                     ...result
                 };
-                
                 history.unshift(historyItem);
-                history = history.slice(0, 5); // Keep only last 5
-                localStorage.setItem('fact-check-history', JSON.stringify(history));
+                history = history.slice(0, CONFIG.MAX_HISTORY_ITEMS);
+                localStorage.setItem(CONFIG.STORAGE_KEY, JSON.stringify(history));
                 updateHistoryDisplay();
             }
-
             function updateHistoryDisplay() {
                 if (history.length === 0) {
-                    historyCard.style.display = 'none';
+                    elements.historyCard.style.display = 'none';
                     return;
                 }
-
-                historyCard.style.display = 'block';
-                historyCount.textContent = history.length;
-
-                historyItems.innerHTML = history.map(item => {
-                    const resultText = item.prediction === 1 ? 'TRUE' : 'FAKE';
-                    const resultClass = item.prediction === 1 ? 'true' : 'false';
+                elements.historyCard.style.display = 'block';
+                elements.historyCount.textContent = history.length;
+                // Lazy render only if expanded
+                if (historyExpanded) {
+                    renderHistoryItems();
+                }
+            }
+            function renderHistoryItems() {
+                elements.historyItems.innerHTML = history.map(item => {
+                    const isTrue = item.prediction === 1;
+                    const resultText = isTrue ? STRINGS.HISTORY_RESULT_TRUE : STRINGS.HISTORY_RESULT_FALSE;
+                    const resultClass = isTrue ? 'true' : 'false';
                     const confidenceText = item.confidence ? ` (${Math.round(item.confidence * 100)}%)` : '';
-                    
                     return `
-                        <div class="history-item">
+                        <div class="history-item" tabindex="0">
+                            <button class="copy-history-btn" data-text="${encodeURIComponent(item.text)}" aria-label="Copy this text to input">
+                                📋
+                            </button>
                             <div class="history-item-header">
                                 <span class="history-result ${resultClass}">
-                                    ${item.prediction === 1 ? '✓' : '✗'} ${resultText}${confidenceText}
+                                    ${isTrue ? '✓' : '✗'} ${resultText}${confidenceText}
                                 </span>
-                                <span class="history-date">${item.timestamp.toLocaleDateString()}</span>
+                                <span class="history-date">${new Date(item.timestamp).toLocaleDateString()}</span>
                             </div>
                             <div class="history-text">${item.text}</div>
                         </div>
                     `;
                 }).join('');
+                // Bind copy events for history items
+                document.querySelectorAll('.copy-history-btn').forEach(btn => {
+                    btn.addEventListener('click', function(e) {
+                        e.stopPropagation();
+                        const text = decodeURIComponent(this.dataset.text);
+                        elements.textInput.value = text;
+                        adjustTextareaHeight();
+                        updateCharCount();
+                        toggleClearButton();
+                        elements.textInput.focus();
+                        showToast("Text copied to input!");
+                    });
+                });
             }
-
-            historyHeader.addEventListener('click', () => {
+            function toggleHistory() {
                 historyExpanded = !historyExpanded;
-                historyToggle.classList.toggle('expanded', historyExpanded);
-                
+                elements.historyToggle.classList.toggle('expanded', historyExpanded);
+                elements.historyHeader.setAttribute('aria-expanded', historyExpanded);
                 if (historyExpanded) {
-                    historyItems.classList.add('show');
+                    elements.historyItems.classList.add('show');
+                    renderHistoryItems();
                 } else {
-                    historyItems.classList.remove('show');
+                    elements.historyItems.classList.remove('show');
                 }
-            });
-
-            // Copy and share functionality
-            function showToast(message) {
-                toast.textContent = message;
-                toast.classList.add('show');
-                setTimeout(() => {
-                    toast.classList.remove('show');
-                }, 3000);
             }
-
-            copyBtn.addEventListener('click', () => {
+            // ======================
+            // COPY & SHARE
+            // ======================
+            function copyResult() {
                 if (!currentResult) return;
-                
-                const resultText = currentResult.prediction === 1 ? 'TRUE' : 'FAKE';
+                const resultText = currentResult.prediction === 1 ? STRINGS.HISTORY_RESULT_TRUE : STRINGS.HISTORY_RESULT_FALSE;
                 const confidenceText = currentResult.confidence ? ` (${Math.round(currentResult.confidence * 100)}% confidence)` : '';
-                const copyText = `Fact Check Result: ${resultText}${confidenceText}\n\nText analyzed: "${currentResult.text}"`;
-                
+                const copyText = `Fact Check Result: ${resultText}${confidenceText}
+Text analyzed: "${currentResult.text}"`;
                 navigator.clipboard.writeText(copyText).then(() => {
-                    showToast('Result copied to clipboard!');
+                    showToast(STRINGS.COPIED);
                 }).catch(() => {
-                    showToast('Failed to copy result');
+                    showToast(STRINGS.COPY_FAILED);
                 });
-            });
-
-            shareBtn.addEventListener('click', async () => {
+            }
+            async function shareResult() {
                 if (!currentResult) return;
-                
-                const resultText = currentResult.prediction === 1 ? 'TRUE' : 'FAKE';
+                const resultText = currentResult.prediction === 1 ? STRINGS.HISTORY_RESULT_TRUE : STRINGS.HISTORY_RESULT_FALSE;
                 const shareData = {
                     title: 'Fact Check Result',
-                    text: `Quick Fact Checker result: ${resultText} - "${currentResult.text.substring(0, 100)}..."`,
+                    text: STRINGS.SHARE_TEXT(resultText, currentResult.text),
                     url: window.location.href
                 };
-
                 if (navigator.share) {
                     try {
                         await navigator.share(shareData);
-                        showToast('Result shared successfully!');
+                        showToast(STRINGS.SHARED);
                     } catch (err) {
                         if (err.name !== 'AbortError') {
-                            showToast('Failed to share result');
+                            showToast(STRINGS.SHARE_FAILED);
                         }
                     }
                 } else {
-                    navigator.clipboard.writeText(`${shareData.text}\n${shareData.url}`).then(() => {
-                        showToast('Share link copied to clipboard!');
+                    navigator.clipboard.writeText(`${shareData.text}
+${shareData.url}`).then(() => {
+                        showToast(STRINGS.LINK_COPIED);
                     }).catch(() => {
-                        showToast('Failed to copy share link');
+                        showToast(STRINGS.COPY_FAILED);
                     });
                 }
-            });
-
-            // Form submission
-            form.addEventListener('submit', async function(event) {
-                event.preventDefault();
-                
-                const text = textInput.value.trim();
-                if (!text) return;
-
-                setLoading(true);
-                predictionResult.classList.remove('show');
-
-                try {
-                    // Simulate API call with realistic delay
-                    await new Promise(resolve => setTimeout(resolve, 2000 + Math.random() * 1000));
-                    
-                    // Mock prediction with realistic confidence
-                    const mockPrediction = Math.random() > 0.5 ? 1 : 0;
-                    const mockConfidence = 0.65 + Math.random() * 0.3; // 65-95%
-                    
-                    showResult(mockPrediction, mockConfidence, text);
-                } catch (error) {
-                    console.error('Error:', error);
-                    showResult(-1, null, text);
-                } finally {
-                    setLoading(false);
+            }
+            // ======================
+            // UTILITIES
+            // ======================
+            function showToast(message) {
+                elements.toast.textContent = message;
+                elements.toast.classList.add('show');
+                setTimeout(() => {
+                    elements.toast.classList.remove('show');
+                }, 3000);
+            }
+            function handleGlobalKeys(e) {
+                // Escape to collapse history
+                if (e.key === 'Escape' && historyExpanded) {
+                    toggleHistory();
                 }
-            });
-
-            // Initialize
-            updateCharCount();
-            updateHistoryDisplay();
-        });
+            }
+            // ======================
+            // CONFETTI EFFECT (on TRUE)
+            // ======================
+            function setupConfettiCanvas() {
+                const canvas = elements.confettiCanvas;
+                const ctx = canvas.getContext('2d');
+                let confetti = [];
+                let animationId = null;
+                function resizeCanvas() {
+                    canvas.width = window.innerWidth;
+                    canvas.height = window.innerHeight;
+                }
+                function createConfetti() {
+                    const count = 150;
+                    confetti = [];
+                    for (let i = 0; i < count; i++) {
+                        confetti.push({
+                            x: Math.random() * canvas.width,
+                            y: Math.random() * -canvas.height,
+                            size: Math.random() * 5 + 3,
+                            color: ['#4f46e5', '#7c3aed', '#10b981', '#f59e0b'][Math.floor(Math.random() * 4)],
+                            speed: Math.random() * 3 + 2,
+                            rotation: Math.random() * 360,
+                            rotationSpeed: (Math.random() - 0.5) * 10
+                        });
+                    }
+                }
+                function updateConfetti() {
+                    ctx.clearRect(0, 0, canvas.width, canvas.height);
+                    let stillFalling = false;
+                    confetti.forEach(p => {
+                        p.y += p.speed;
+                        p.rotation += p.rotationSpeed;
+                        if (p.y < canvas.height + 10) {
+                            stillFalling = true;
+                            ctx.save();
+                            ctx.translate(p.x, p.y);
+                            ctx.rotate(p.rotation * Math.PI / 180);
+                            ctx.fillStyle = p.color;
+                            ctx.fillRect(-p.size/2, -p.size/2, p.size, p.size);
+                            ctx.restore();
+                        }
+                    });
+                    if (stillFalling) {
+                        animationId = requestAnimationFrame(updateConfetti);
+                    } else {
+                        canvas.style.display = 'none';
+                        if (animationId) {
+                            cancelAnimationFrame(animationId);
+                            animationId = null;
+                        }
+                    }
+                }
+                window.addEventListener('resize', resizeCanvas);
+                resizeCanvas();
+                createConfetti();
+                window.launchConfetti = function() {
+                    canvas.style.display = 'block';
+                    resizeCanvas();
+                    createConfetti();
+                    if (animationId) cancelAnimationFrame(animationId);
+                    animationId = requestAnimationFrame(updateConfetti);
+                };
+            }
+        })(); // End IIFE
+    </script>
+    <!-- Manifest.json placeholder -->
+    <script>
+        // For demo: create manifest.json dynamically
+        if (!document.querySelector('link[rel="manifest"]')) {
+            const manifest = {
+                "name": "Quick Fact Checker",
+                "short_name": "FactCheck",
+                "start_url": "/",
+                "display": "standalone",
+                "background_color": "#4f46e5",
+                "theme_color": "#4f46e5",
+                "icons": [
+                    {
+                        "src": "/icon-192.png",
+                        "sizes": "192x192",
+                        "type": "image/png"
+                    },
+                    {
+                        "src": "/icon-512.png",
+                        "sizes": "512x512",
+                        "type": "image/png"
+                    }
+                ]
+            };
+            const manifestBlob = new Blob([JSON.stringify(manifest)], {type: 'application/json'});
+            const manifestURL = URL.createObjectURL(manifestBlob);
+            const link = document.createElement('link');
+            link.rel = 'manifest';
+            link.href = manifestURL;
+            document.head.appendChild(link);
+        }
+        // Mock service worker for demo
+        if ('serviceWorker' in navigator && !navigator.serviceWorker.controller) {
+            const swScript = `
+                self.addEventListener('install', e => e.waitUntil(self.skipWaiting()));
+                self.addEventListener('activate', e => e.waitUntil(self.clients.claim()));
+                self.addEventListener('fetch', () => {});
+            `;
+            const swBlob = new Blob([swScript], {type: 'application/javascript'});
+            const swURL = URL.createObjectURL(swBlob);
+            navigator.serviceWorker.register(swURL).catch(console.warn);
+        }
     </script>
 </body>
 </html>
\ No newline at end of file
