| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Adware Defense Game</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.js"></script> |
| | <style> |
| | body { |
| | font-family: 'Inter', sans-serif; |
| | overscroll-behavior: none; |
| | } |
| | .chat-bubble { |
| | max-width: 70%; |
| | padding: 10px 15px; |
| | border-radius: 20px; |
| | margin-bottom: 10px; |
| | word-wrap: break-word; |
| | } |
| | .user-bubble { |
| | background-color: #DCF8C6; |
| | align-self: flex-end; |
| | margin-left: auto; |
| | } |
| | .friend-bubble { |
| | background-color: #E5E7EB; |
| | align-self: flex-start; |
| | } |
| | .ad-bubble { |
| | background-color: #FECACA; |
| | border: 2px dashed #F87171; |
| | align-self: center; |
| | width: 80%; |
| | text-align: center; |
| | animation: fadeIn 0.5s ease-out; |
| | } |
| | @keyframes fadeIn { |
| | from { opacity: 0; transform: translateY(10px); } |
| | to { opacity: 1; transform: translateY(0); } |
| | } |
| | .device-icon { |
| | font-size: 3rem; |
| | margin-bottom: 0.5rem; |
| | } |
| | .control-button { |
| | padding: 0.75rem 1.5rem; |
| | border-radius: 0.5rem; |
| | font-weight: 600; |
| | transition: all 0.2s ease-in-out; |
| | box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
| | } |
| | .control-button:hover { |
| | transform: translateY(-2px); |
| | box-shadow: 0 4px 8px rgba(0,0,0,0.15); |
| | } |
| | .control-button:active { |
| | transform: translateY(0px); |
| | box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
| | } |
| | .info-panel { |
| | background-color: rgba(0,0,0,0.75); |
| | color: white; |
| | padding: 2rem; |
| | border-radius: 1rem; |
| | position: fixed; |
| | top: 50%; |
| | left: 50%; |
| | transform: translate(-50%, -50%); |
| | z-index: 100; |
| | width: 90%; |
| | max-width: 600px; |
| | text-align: center; |
| | box-shadow: 0 10px 25px rgba(0,0,0,0.3); |
| | } |
| | .info-panel h2 { |
| | font-size: 2rem; |
| | margin-bottom: 1rem; |
| | } |
| | .info-panel p, .info-panel li { |
| | font-size: 1.1rem; |
| | line-height: 1.6; |
| | } |
| | .game-title { |
| | font-size: 2.5rem; |
| | font-weight: bold; |
| | margin-bottom: 1rem; |
| | color: #1E40AF; |
| | } |
| | .step-title { |
| | font-size: 1.5rem; |
| | font-weight: 600; |
| | margin-bottom: 1rem; |
| | color: #1D4ED8; |
| | } |
| | .highlight-box { |
| | border: 3px dashed #F59E0B; |
| | padding: 1rem; |
| | border-radius: 0.5rem; |
| | margin-top: 1rem; |
| | background-color: #FFFBEB; |
| | } |
| | .mermaid-diagram-container { |
| | background-color: white; |
| | padding: 1rem; |
| | border-radius: 0.5rem; |
| | box-shadow: 0 4px 6px rgba(0,0,0,0.1); |
| | margin: 1rem 0; |
| | overflow-x: auto; |
| | } |
| | |
| | .mermaid svg text { |
| | fill: #111827 !important; |
| | stroke: none !important; |
| | font-size: 16px !important; |
| | } |
| | .mermaid svg .label { |
| | font-size: 16px !important; |
| | } |
| | .mermaid svg .actor { |
| | fill: #BFDBFE !important; |
| | stroke: #3B82F6 !important; |
| | } |
| | .mermaid svg .messageText, .mermaid svg .noteText { |
| | font-size: 14px !important; |
| | } |
| | |
| | </style> |
| | </head> |
| | <body class="bg-gradient-to-br from-blue-100 via-indigo-50 to-purple-100 min-h-screen flex flex-col items-center justify-center p-4 overflow-hidden"> |
| |
|
| | <div id="gameContainer" class="w-full max-w-4xl bg-white p-6 rounded-xl shadow-2xl"> |
| | <h1 class="game-title text-center">🛡️ Adware Defense Sim 🛡️</h1> |
| | <p class="text-center text-gray-600 mb-6 text-lg">Experience how adware can inject ads and how to stay vigilant!</p> |
| |
|
| | <div id="stepIndicator" class="text-center mb-4"> |
| | <span id="currentStep" class="text-xl font-bold text-indigo-600">Step 1</span> / 10 |
| | </div> |
| |
|
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
| | |
| | <div class="border p-4 rounded-lg bg-gray-50 shadow-md"> |
| | <h2 class="step-title text-center">💻 Your PC (Chrome Browser)</h2> |
| | <div class="device-icon text-center">🖥️</div> |
| | <div id="pcChatArea" class="h-64 overflow-y-auto p-2 border rounded bg-white flex flex-col space-y-2"> |
| | |
| | </div> |
| | <input type="text" id="pcMessageInput" placeholder="Type a message..." class="w-full mt-2 p-2 border rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"> |
| | <div id="pcInfo" class="text-sm text-gray-500 mt-2"></div> |
| | </div> |
| |
|
| | |
| | <div class="border p-4 rounded-lg bg-gray-50 shadow-md"> |
| | <h2 class="step-title text-center">📱 Your Android Phone (Fold2)</h2> |
| | <div class="device-icon text-center">📱</div> |
| | <div id="phoneChatArea" class="h-64 overflow-y-auto p-2 border rounded bg-white flex flex-col space-y-2"> |
| | |
| | </div> |
| | <div id="phoneInfo" class="text-sm text-gray-500 mt-2"></div> |
| | </div> |
| | </div> |
| |
|
| | <div id="gameMessage" class="text-center text-lg font-semibold my-4 p-3 bg-yellow-100 border border-yellow-300 rounded-lg text-yellow-800"> |
| | Welcome! Click "Next Step" to begin the simulation. |
| | </div> |
| |
|
| | <div class="text-center mt-6"> |
| | <button id="nextStepButton" class="control-button bg-blue-600 hover:bg-blue-700 text-white"> |
| | Next Step 🚀 |
| | </button> |
| | </div> |
| |
|
| | <div id="mermaidContainer" class="mermaid-diagram-container hidden mt-8"> |
| | <h3 class="text-xl font-semibold text-center mb-2">Attack Flow Visualization</h3> |
| | <pre class="mermaid" id="mermaidDiagram"> |
| | // Diagram will be populated by JS |
| | </pre> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="infoPanel" class="info-panel hidden"> |
| | <h2 id="infoPanelTitle">Information</h2> |
| | <div id="infoPanelContent" class="text-left"></div> |
| | <button id="infoPanelCloseButton" class="control-button bg-green-500 hover:bg-green-600 text-white mt-6">Got it!</button> |
| | </div> |
| |
|
| |
|
| | <script> |
| | |
| | mermaid.initialize({ startOnLoad: false, theme: 'base', securityLevel: 'loose', |
| | fontFamily: 'Inter, sans-serif', |
| | themeVariables: { |
| | primaryColor: '#EFF6FF', |
| | primaryTextColor: '#111827', |
| | primaryBorderColor: '#60A5FA', |
| | lineColor: '#3B82F6', |
| | secondaryColor: '#DBEAFE', |
| | tertiaryColor: '#BFDBFE' |
| | } |
| | }); |
| | |
| | const pcChatArea = document.getElementById('pcChatArea'); |
| | const phoneChatArea = document.getElementById('phoneChatArea'); |
| | const pcMessageInput = document.getElementById('pcMessageInput'); |
| | const nextStepButton = document.getElementById('nextStepButton'); |
| | const gameMessage = document.getElementById('gameMessage'); |
| | const currentStepEl = document.getElementById('currentStep'); |
| | const pcInfo = document.getElementById('pcInfo'); |
| | const phoneInfo = document.getElementById('phoneInfo'); |
| | |
| | const mermaidContainer = document.getElementById('mermaidContainer'); |
| | const mermaidDiagramEl = document.getElementById('mermaidDiagram'); |
| | |
| | const infoPanel = document.getElementById('infoPanel'); |
| | const infoPanelTitle = document.getElementById('infoPanelTitle'); |
| | const infoPanelContent = document.getElementById('infoPanelContent'); |
| | const infoPanelCloseButton = document.getElementById('infoPanelCloseButton'); |
| | |
| | let step = 0; |
| | const totalSteps = 10; |
| | |
| | const steps = [ |
| | |
| | () => { |
| | gameMessage.textContent = "STEP 1: You're on your PC using Google Messages for web. Type a friendly message to your contact (e.g., 'Hello!') and imagine pressing Enter."; |
| | pcMessageInput.value = "Hello from my PC! 👋"; |
| | pcMessageInput.focus(); |
| | pcInfo.innerHTML = "💡 Google Messages for web syncs with your phone."; |
| | }, |
| | |
| | () => { |
| | const msgText = pcMessageInput.value || "Hello from my PC! 👋"; |
| | addChatMessage(pcChatArea, msgText, 'user'); |
| | gameMessage.textContent = "STEP 2: Message 'sent'! It appears on your PC and syncs to your Android phone via Google's servers (simulated Wi-Fi sync)."; |
| | setTimeout(() => { |
| | addChatMessage(phoneChatArea, msgText, 'user'); |
| | phoneInfo.innerHTML = "📱 Message received from PC via sync!"; |
| | }, 500); |
| | pcMessageInput.value = ""; |
| | }, |
| | |
| | () => { |
| | gameMessage.textContent = "STEP 3: Now, you paste a link into the chat on your PC. Let's say it's a link to a cool Hugging Face Space that shows an HTML component (e.g., from a YAML config)."; |
| | pcMessageInput.value = "https://huggingface.co/spaces/cool-project/app"; |
| | pcInfo.innerHTML = "🔗 Pasting a link often generates a preview."; |
| | }, |
| | |
| | () => { |
| | const linkText = pcMessageInput.value || "https://huggingface.co/spaces/cool-project/app"; |
| | addChatMessage(pcChatArea, `Pasted Link: ${linkText}`, 'user'); |
| | |
| | const previewBubble = document.createElement('div'); |
| | previewBubble.className = 'chat-bubble user-bubble'; |
| | previewBubble.innerHTML = ` |
| | <p class="font-semibold">Preview: Cool Project App</p> |
| | <p class="text-xs text-gray-600">${linkText}</p> |
| | <div class="mt-1 p-2 border border-gray-300 rounded bg-gray-100">✨ Interactive HTML Component ✨</div> |
| | `; |
| | pcChatArea.appendChild(previewBubble); |
| | pcChatArea.scrollTop = pcChatArea.scrollHeight; |
| | |
| | gameMessage.textContent = "STEP 4: The link preview for the Hugging Face Space appears normally in your PC chat. So far, so good..."; |
| | setTimeout(() => { |
| | addChatMessage(phoneChatArea, `Link: ${linkText}`, 'user'); |
| | const phonePreviewBubble = document.createElement('div'); |
| | phonePreviewBubble.className = 'chat-bubble user-bubble'; |
| | phonePreviewBubble.innerHTML = ` |
| | <p class="font-semibold">Preview: Cool Project App</p> |
| | <p class="text-xs text-gray-600">${linkText}</p> |
| | `; |
| | phoneChatArea.appendChild(phonePreviewBubble); |
| | phoneChatArea.scrollTop = phoneChatArea.scrollHeight; |
| | |
| | }, 500); |
| | pcMessageInput.value = ""; |
| | }, |
| | |
| | () => { |
| | gameMessage.innerHTML = ` |
| | <span class="text-red-600 font-bold text-xl">🚨 STEP 5: ATTACK! 🚨</span><br> |
| | Unknown to you, adware on your PC (e.g., a malicious browser extension) has been monitoring your web activity. |
| | Pasting the link and the page updating to show a preview triggered it! |
| | `; |
| | pcInfo.innerHTML = "<strong class='text-red-500'>🔴 Adware Activated!</strong> It's preparing to inject an ad by manipulating the webpage's code (DOM)."; |
| | pcChatArea.classList.add('border-red-500', 'border-2'); |
| | phoneChatArea.classList.remove('border-red-500', 'border-2'); |
| | }, |
| | |
| | async () => { |
| | gameMessage.textContent = "STEP 6: Let's visualize how this ad injection happens with a diagram."; |
| | mermaidContainer.classList.remove('hidden'); |
| | const diagramDefinition = ` |
| | sequenceDiagram |
| | actor UserPC as 💻 User on PC |
| | participant Browser as🌐 Chrome Browser (PC) |
| | participant AdwareExt as 😈 Adware Extension (PC) |
| | participant GoogleMessagesWeb as 💬 Google Messages Web UI |
| | participant AdServer as 💰 Ad Server (e.g., AdFox) |
| | |
| | UserPC->>Browser: Pastes link (e.g., HF Space) |
| | Browser->>GoogleMessagesWeb: Updates UI with link/preview |
| | Note over AdwareExt,GoogleMessagesWeb: Adware monitors DOM changes or network activity |
| | AdwareExt-->>GoogleMessagesWeb: 🔍 Detects UI update (trigger!) |
| | AdwareExt->>Browser: 💉 Injects malicious script into page |
| | Browser->>AdServer: Script requests ad content |
| | AdServer-->>Browser: Delivers ad 🖼️ (e.g., dealsbe.com) |
| | Browser->>GoogleMessagesWeb: Script manipulates DOM to display ad |
| | Note over GoogleMessagesWeb: Ad appears in chat flow, looking like part of it! |
| | UserPC-->>GoogleMessagesWeb: Sees unexpected ad 😡 |
| | `; |
| | mermaidDiagramEl.textContent = diagramDefinition; |
| | try { |
| | const { svg } = await mermaid.render('mermaid-graph', diagramDefinition); |
| | mermaidDiagramEl.innerHTML = svg; |
| | |
| | const svgElement = mermaidDiagramEl.querySelector('svg'); |
| | if (svgElement) { |
| | svgElement.setAttribute('height', '100%'); |
| | svgElement.setAttribute('width', '100%'); |
| | |
| | |
| | |
| | } |
| | } catch (error) { |
| | console.error("Mermaid rendering error:", error); |
| | mermaidDiagramEl.textContent = "Error rendering diagram. Please see console."; |
| | } |
| | pcInfo.innerHTML = "📜 Diagram shows the ad injection process."; |
| | }, |
| | |
| | () => { |
| | mermaidContainer.classList.add('hidden'); |
| | gameMessage.textContent = "STEP 7: The adware successfully injects an ad directly into your Google Messages chat flow on your PC!"; |
| | const adBubble = document.createElement('div'); |
| | adBubble.className = 'chat-bubble ad-bubble'; |
| | adBubble.innerHTML = ` |
| | <p class="font-bold text-lg">🎉 Special Offer from DealsBe.com! 🎉</p> |
| | <img src="https://placehold.co/300x150/FFDDDD/CC0000?text=Fake+AdFox+Ad!" alt="Fake Ad" class="mx-auto my-2 rounded shadow-sm"> |
| | <p class="text-sm">Click here for UNBEATABLE DEALS! (Don't actually click! 😉)</p> |
| | <p class="text-xs text-gray-700 mt-1">Powered by 🦊 AdFox (Simulated)</p> |
| | `; |
| | pcChatArea.appendChild(adBubble); |
| | pcChatArea.scrollTop = pcChatArea.scrollHeight; |
| | pcInfo.innerHTML = "<strong class='text-red-500'>⚠️ Injected Ad Displayed!</strong> This is NOT from Google Messages."; |
| | phoneInfo.innerHTML = "📱 Your phone chat remains clean... for now. The attack is on your PC's browser."; |
| | }, |
| | |
| | () => { |
| | gameMessage.textContent = "STEP 8: Your PC has a conceptual 'AI-Powered Security Sandbox' that monitors browser behavior for anomalies."; |
| | pcInfo.innerHTML = ` |
| | <div class="highlight-box"> |
| | <p class="text-lg font-semibold">🤖 AI Sandbox Activated! 🤖</p> |
| | <p>Scanning browser activity for unauthorized DOM manipulations and suspicious network requests...</p> |
| | <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700 mt-2"> |
| | <div id="aiScanProgress" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div> |
| | </div> |
| | </div> |
| | `; |
| | let progress = 0; |
| | const interval = setInterval(() => { |
| | progress += 10; |
| | document.getElementById('aiScanProgress').style.width = progress + '%'; |
| | if (progress >= 100) clearInterval(interval); |
| | }, 100); |
| | }, |
| | |
| | () => { |
| | gameMessage.innerHTML = ` |
| | <span class="text-green-600 font-bold text-xl">🛡️ STEP 9: THREAT DETECTED! 🛡️</span><br> |
| | The AI Sandbox identifies the unauthorized ad injection! |
| | `; |
| | pcInfo.innerHTML = ` |
| | <div class="highlight-box border-green-500 bg-green-50"> |
| | <p class="text-lg font-semibold text-green-700">✅ Anomaly Found!</p> |
| | <p>Detected: Unauthorized script modified chat interface.</p> |
| | <p>Source: Suspected adware browser extension.</p> |
| | <p>Action: Flagged suspicious activity.</p> |
| | </div> |
| | `; |
| | pcChatArea.classList.remove('border-red-500'); |
| | pcChatArea.classList.add('border-green-500'); |
| | }, |
| | |
| | () => { |
| | gameMessage.textContent = "STEP 10: Understanding the Threat & Solution."; |
| | showInfoPanel( |
| | "💡 Understanding & Defense 💡", |
| | ` |
| | <p class="mb-3">You've seen how adware can sneakily inject ads. This wasn't Google's fault, but a malicious program on <em>your PC</em>.</p> |
| | <p class="mb-3"><strong>Key Takeaways:</strong></p> |
| | <ul class="list-disc list-inside mb-3 text-left space-y-1"> |
| | <li>Adware often comes from unsafe downloads or deceptive browser extensions.</li> |
| | <li>It manipulates website code (DOM) locally in <em>your browser</em>.</li> |
| | <li>Your actual message content is usually not the primary target for simple ad-injectors, but your browsing data might be.</li> |
| | <li>Google Messages' Privacy Policy covers their service, not third-party malware on your device. Always check extension permissions!</li> |
| | </ul> |
| | <div class="p-4 bg-blue-800 rounded-lg mt-4"> |
| | <h3 class="text-xl font-semibold mb-2">✨ Introducing 'Guardian AI Shield' (Conceptual) ✨</h3> |
| | <p>Imagine an advanced AI agent, like the one that detected this, constantly protecting you!</p> |
| | <p class="mt-2"><strong>Guardian AI Shield could:</strong></p> |
| | <ul class="list-disc list-inside text-left space-y-1"> |
| | <li>Proactively block known adware sources.</li> |
| | <li>Detect and neutralize new ad injection techniques in real-time.</li> |
| | <li>Analyze browser extension behavior for risks.</li> |
| | <li>Offer one-click cleanup of detected threats.</li> |
| | </ul> |
| | <p class="mt-3 font-semibold">Stay safe by being vigilant and using robust security tools!</p> |
| | </div> |
| | ` |
| | ); |
| | nextStepButton.textContent = "Restart Simulation 🔄"; |
| | nextStepButton.classList.remove('bg-blue-600', 'hover:bg-blue-700'); |
| | nextStepButton.classList.add('bg-green-600', 'hover:bg-green-700'); |
| | } |
| | ]; |
| | |
| | function addChatMessage(area, message, type) { |
| | const bubble = document.createElement('div'); |
| | bubble.className = `chat-bubble ${type === 'user' ? 'user-bubble' : (type === 'friend' ? 'friend-bubble' : 'ad-bubble')}`; |
| | bubble.textContent = message; |
| | area.appendChild(bubble); |
| | area.scrollTop = area.scrollHeight; |
| | } |
| | |
| | function showInfoPanel(title, content) { |
| | infoPanelTitle.textContent = title; |
| | infoPanelContent.innerHTML = content; |
| | infoPanel.classList.remove('hidden'); |
| | } |
| | |
| | infoPanelCloseButton.addEventListener('click', () => { |
| | infoPanel.classList.add('hidden'); |
| | }); |
| | |
| | function resetSimulation() { |
| | step = 0; |
| | pcChatArea.innerHTML = ''; |
| | phoneChatArea.innerHTML = ''; |
| | pcMessageInput.value = ''; |
| | pcInfo.innerHTML = ''; |
| | phoneInfo.innerHTML = ''; |
| | mermaidContainer.classList.add('hidden'); |
| | mermaidDiagramEl.innerHTML = ''; |
| | pcChatArea.classList.remove('border-red-500', 'border-green-500', 'border-2'); |
| | nextStepButton.textContent = "Next Step 🚀"; |
| | nextStepButton.classList.remove('bg-green-600', 'hover:bg-green-700'); |
| | nextStepButton.classList.add('bg-blue-600', 'hover:bg-blue-700'); |
| | updateStepIndicator(); |
| | steps[step](); |
| | } |
| | |
| | function updateStepIndicator() { |
| | currentStepEl.textContent = `Step ${step + 1}`; |
| | } |
| | |
| | nextStepButton.addEventListener('click', () => { |
| | if (step < totalSteps -1) { |
| | step++; |
| | updateStepIndicator(); |
| | steps[step](); |
| | } else if (step === totalSteps -1 && nextStepButton.textContent.includes("Restart")) { |
| | resetSimulation(); |
| | } else { |
| | steps[step](); |
| | } |
| | }); |
| | |
| | |
| | updateStepIndicator(); |
| | steps[step](); |
| | |
| | </script> |
| | </body> |
| | </html> |
| |
|
