| <!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> |
|
|
