bitshield-2

byShree

Build a complete, working, responsive web app called BITSHIELD - Bitcoin Scam Risk Detector. It must feel like a polished college cybersecurity project demo, not a mockup. TECH: ONE self-contained HTML file. HTML + CSS in <style> + vanilla JS in <script>. No frameworks, libraries, backend, API, database, wallet, blockchain or external requests. Must work fully offline. Use system font fallbacks: headings "Bricolage Grotesque", Arial, system-ui; body "IBM Plex Sans", system-ui; evidence text "IBM Plex Mono", ui-monospace, monospace. PURPOSE: User pastes a suspicious Bitcoin message. A local rule engine shows: Risk Score 0-100, Risk Level (LOW/MEDIUM/HIGH/CRITICAL), warning signs, highlighted suspicious phrases in the original message, beginner-friendly reasons, next steps, scam stage tracker, scam type, math reality check, and rules checked but not matched. NOT a simple scam/not-scam verdict. Flow: RISK SCORE > WARNING SIGNS > WHY RISKY > WHAT TO CHECK. Sample/test data only. Never handle real Bitcoin, keys or payments. DESIGN - "Cybersecurity Evidence Desk": pale blue-grey workspace, dark navy ink text, white evidence-sheet cards with subtle borders, monospace message evidence, small taped evidence labels for matched phrases, and a slightly rotated deep-red rubber-stamp risk verdict. Muted amber for medium, dark muted green for clear. NO neon, glow gradients, glassmorphism, emoji icons, or generic SaaS/crypto-dashboard look. Simple CSS shield mark, no emoji logo. HEADER: BITSHIELD / Bitcoin Scam Risk Detector. Status labels: OFFLINE DEMO, NO REAL CRYPTO, NO DATA SENT. Text: "Analyze suspicious Bitcoin messages using transparent warning patterns and understand why a message may be risky." INPUT: Section "Submit the Evidence". Label "Suspicious message or offer". Large textarea, max 5000 chars, live counter "0 / 5000". Buttons CHECK MESSAGE and CLEAR. Handle empty, whitespace, emoji, Unicode, non-English, long and pasted text with friendly messages. Wrap analysis in try/catch; never show raw errors. SAMPLES: 5 buttons: Fake Giveaway, Guaranteed Profit, Fake Support, Withdrawal Fee, Normal Question. Click = fill textarea, update counter, auto-analyze. On page load, auto-load and analyze Guaranteed Profit. Giveaway: "Congratulations! You have been selected for an exclusive Bitcoin giveaway. Send 0.01 BTC to the address below and we will send 0.1 BTC back. Act now, this offer expires in 10 minutes!" Guaranteed Profit: "Our private Bitcoin investment program guarantees 8% daily profit with zero risk. Deposit BTC today and your returns are guaranteed. Pay a small upfront activation fee before withdrawal." Fake Support: "URGENT SECURITY ALERT: Your Bitcoin exchange account will be suspended today. I am from exchange support. Verify your wallet immediately by sending your seed phrase or private key to our support agent." Withdrawal Fee: "Your Bitcoin withdrawal is ready, but a refundable 0.02 BTC compliance fee must be paid first. Send the fee to unlock your funds. If you do not pay today, your account may face legal action." Normal: "Hi, I am learning about Bitcoin. What is the difference between a Bitcoin wallet address and a private key? I will never share my seed phrase." RULE ENGINE: JS array of 18-20 rules, each with id, label, weight, regex, explanation, tip, family, stage. Cover: guaranteed profit, unrealistic returns, Bitcoin giveaway, send BTC to get more back, urgency, seed phrase request, private key request, fake exchange support, fake security alert, gift card payment, crypto ATM payment, wallet address, short links, look-alike domains, secrecy, upfront fees, recovery scam, remote-access software, legal threats, password/OTP request, unexpected crypto payment demand. IGNORE NEGATIONS: "Never share your seed phrase" and "Do not send Bitcoin" must NOT trigger. Use safe regex only: no nested quantifiers, bounded wildcards like [\s\S]{0,60}. SCORING: sum = total matched weights. score = round(100 x (1 - e^(-sum/45))), cap 100. Add +12 bonus to sum when urgency AND payment rules both match. Levels: 0-24 LOW, 25-47 MEDIUM, 48-71 HIGH, 72-100 CRITICAL. Show the full calculation (weights, bonus, formula, final score). Targets: Giveaway, Guaranteed Profit, Fake Support = CRITICAL; Withdrawal Fee = HIGH; Normal = LOW. Tune weights so these pass. RESULT: Prominent stamp-style level + "86 / 100" + text progress bar, then "Why this score?" listing patterns, weights, bonus, formula. Wrap updates in aria-live. HIGHLIGHTS: Show original message with matched phrases in evidence-tape styling. NEVER use innerHTML with user text; use textContent/createElement/appendChild. No eval or Function. Clicking a highlight scrolls/focuses its finding. FINDINGS: "Warning Signs Detected". Each: severity, rule name, matched evidence, why risky, what to check. Plain beginner language. SCAM TYPE CARD: strongest family from Investment, Giveaway, Impersonation, Credential Theft, Phishing, Pressure, Advance Fee, Recovery, Device Takeover, Payment. Show name + "How it works". Note: educational classification, not a legal determination. STAGE TRACKER: HOOK > TRUST > PRESSURE > PAYMENT > EXIT, active stages from matched rules. Horizontal on desktop, stacked on mobile. REALITY CHECK: Detect "X% daily/weekly/monthly" claims, compute compounded yearly return (e.g. (1.08^365 - 1) x 100), display it. Add: "This is a mathematical reality check, not proof that the sender's claim is true. Extremely large repeated returns are a reason to stop and independently verify the offer." WHAT TO DO NOW: Dynamic checklist. High risk: don't send Bitcoin, don't pay upfront fees, verify independently, never share seed phrase/private key/passwords/OTP, no remote-access software, don't click suspicious links, ignore deadlines. Low risk: keep verifying, don't share credentials, verify payment requests independently. Include India Cyber Crime Portal https://cybercrime.gov.in/ (opens in new tab, rel="noopener noreferrer") and Helpline 1930. CHECKED AND CLEAR: list rules that did not match with a check mark. Note: "No matched rule is not proof that a message is legitimate." PRACTICE MODE: exactly 6 scenarios, each with SCAM and SAFE buttons, then correct/incorrect feedback + explanation. Cover: send BTC get more back, simple Bitcoin price question, seed phrase request, recovery fee, "Never share your seed phrase", independent verification. SELF-TEST: Button RUN SELF-TEST that really runs the analyzer on all 5 samples, compares to expected levels, shows "Fake Giveaway ..... PASS" lines and "5/5 SELF-TESTS PASSED" (or X/5). ACCESSIBILITY: proper labels, keyboard navigation, visible focus, aria-live, WCAG AA contrast, meaning never by color alone, touch-friendly buttons. RESPONSIVE: Works at 320/360/390px, tablet, desktop with NO horizontal scroll. Mobile = single column, full-width buttons. Desktop = two columns: LEFT input + highlighted message + findings; RIGHT scam type, reality check, what to do, checked and clear, practice, self-test. THEME: light and dark via CSS variables following prefers-color-scheme. Dark = dark blue-grey paper, light ink, muted borders, deep red stamp. Not cyberpunk. ANIMATION: only one subtle entrance fade/slide. Static slight stamp rotation. Disable all motion for prefers-reduced-motion. localStorage optional, in try/catch. HIERARCHY: Risk level and score are the loudest elements, then warning signs, highlighted evidence, why risky, what to do; secondary cards quieter. FOOTER: "BitShield provides pattern-based educational guidance, not proof that a message is a scam or legitimate. Always verify important claims independently. This demo uses sample/test data only and never handles real Bitcoin or money." FINAL CHECK: no console errors, all five sample levels correct, negation works, bonus works, formula shown, highlights safe and clickable, 6 practice questions, self-test truly runs, works offline. Output the complete finished file.