| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <meta name="theme-color" content="#312e81"> |
| <meta name="description" content="Review suspicious Pakistani messages before you click, pay, or reply."> |
| <title>NoticeCheck</title> |
| <link rel="icon" href="/static/mark.svg" type="image/svg+xml"> |
| <link rel="stylesheet" href="/static/styles.css"> |
| <script> |
| |
| |
| const ZEROGPU_HEADERS_MSG = "supports-zerogpu-headers"; |
| window.addEventListener("message", (event) => { |
| if (event.data === ZEROGPU_HEADERS_MSG) { |
| window.supports_zerogpu_headers = true; |
| } |
| }); |
| const hostname = window.location.hostname; |
| if (hostname.endsWith(".hf.space") || hostname.includes(".dev.")) { |
| const origin = hostname.includes(".dev.") |
| ? `https://moon-${hostname.split(".")[1]}.dev.spaces.huggingface.tech` |
| : "https://huggingface.co"; |
| window.parent.postMessage(ZEROGPU_HEADERS_MSG, origin); |
| } |
| </script> |
| <script src="/static/app.js" defer></script> |
| </head> |
| <body> |
| <header class="topbar"> |
| <div class="topbar-left"> |
| <a class="brand" href="/" aria-label="NoticeCheck home"> |
| <span class="brand-mark"><img src="/static/mark.svg" alt=""></span> |
| <span class="brand-name">NoticeCheck</span> |
| </a> |
| </div> |
| <div class="status-row"> |
| <span id="modelStatus" class="status-badge"><span class="status-dot"></span><span class="status-text" data-i18n="statusChecking">Checking model</span></span> |
| </div> |
| </header> |
|
|
| <main> |
| <section class="hero"> |
| <div> |
| <p class="eyebrow" data-i18n="heroEyebrow">Pause. Inspect. Decide.</p> |
| <h1><span data-i18n="heroTitle">Look twice before you</span> <span data-i18n="heroSafe">trust it.</span></h1> |
| <p class="hero-text" data-i18n="heroText">NoticeCheck reviews suspicious messages and screenshots for pressure tactics, unsafe requests, and scam warning signs.</p> |
| </div> |
| <div class="hero-art"> |
| <img src="/static/hero.png" alt="NoticeCheck preview" class="hero-image"> |
| </div> |
| </section> |
|
|
| <section class="workspace" aria-labelledby="checkerTitle"> |
| <div class="section-heading"> |
| <div> |
| <p class="eyebrow" data-i18n="checkerEyebrow">Message review</p> |
| <h2 id="checkerTitle" data-i18n="checkerTitle">What did you receive?</h2> |
| </div> |
| <p data-i18n="modelDescription">MiniCPM5-1B reviews messages; Nemotron OCR v2 reads screenshots.</p> |
| </div> |
|
|
| <form id="noticeForm"> |
| <div class="input-grid"> |
| <div class="field-card upload-card"> |
| <div class="field-label"><span>1</span><span class="field-label-text" data-i18n="uploadLabel">Upload a screenshot</span></div> |
| <label id="dropZone" class="drop-zone" for="imageInput"> |
| <input id="imageInput" type="file" accept="image/png,image/jpeg,image/webp"> |
| <span class="upload-icon" aria-hidden="true">↑</span> |
| <strong data-i18n="dropImage">Drop an image here</strong> |
| <small data-i18n="browseImage">or tap to browse PNG, JPG, or WebP</small> |
| <img id="imagePreview" alt="Selected notice preview" data-i18n-alt="previewAlt"> |
| <button id="removeImage" class="text-button" type="button" data-i18n="removeImage">Remove image</button> |
| </label> |
| <div id="uploadHint" class="mode-hint"><span class="hint-icon">↑</span><span data-i18n="imageMode">Screenshot mode active — text input is locked</span></div> |
| </div> |
|
|
| <div class="field-card"> |
| <label class="field-label" for="noticeText"><span>2</span><span class="field-label-text" data-i18n="pasteLabel">Or paste the message</span></label> |
| <textarea id="noticeText" dir="auto" maxlength="12000" placeholder="Paste the SMS, email, bill text, or notice here..." data-i18n-placeholder="textPlaceholder"></textarea> |
| <div class="field-meta"><span data-i18n="languageSupport">English interface</span><span id="charCount">0 / 12,000</span></div> |
| <div id="textHint" class="mode-hint"><span class="hint-icon">✎</span><span data-i18n="textMode">Text mode active — image upload is locked</span></div> |
| </div> |
| </div> |
|
|
| <div id="formError" class="form-error" role="alert"></div> |
| <label class="trace-consent" for="saveTrace"> |
| <input id="saveTrace" type="checkbox" checked> |
| <span> |
| <strong data-i18n="traceTitle">Publish privacy-safe trace</strong> |
| <small data-i18n="traceText">Stores automated redacted text or an image description. Raw text, screenshots, links, identifiers, and model text are not stored.</small> |
| </span> |
| </label> |
| <div class="form-actions"> |
| <button id="analyzeButton" class="primary-button" type="submit"> |
| <span class="button-label" data-i18n="checkButton">Check this notice</span> |
| <span class="spinner" aria-hidden="true"></span> |
| </button> |
| <button id="resetButton" class="reset-button" type="button"> |
| <span data-i18n="startOver">Start over</span> |
| </button> |
| </div> |
| </form> |
| </section> |
|
|
| <section class="examples" aria-labelledby="examplesTitle"> |
| <div class="section-heading compact"> |
| <div><p class="eyebrow" data-i18n="examplesEyebrow">Practice cases</p><h2 id="examplesTitle" data-i18n="examplesTitle">Recognize the pressure pattern</h2></div> |
| </div> |
| <div class="example-grid"> |
| <button class="example-card" data-example-id="text-courier" data-example="PAKISTAN POST: Your parcel address is incomplete. Pay Rs. 85 today at http://pakpost-delivery.xyz or the parcel will be destroyed."> |
| <span class="example-icon">PK</span><span><strong data-i18n="courierFee">Courier fee</strong><small data-i18n="courierFeeText">Urgent parcel payment link</small></span> |
| </button> |
| <button class="example-card" data-example-id="text-fbr" data-example="FBR REFUND: You are eligible for Rs 42,500. Submit your CNIC and bank card details at the link today to receive payment."> |
| <span class="example-icon">FBR</span><span><strong data-i18n="taxRefund">Tax refund</strong><small data-i18n="taxRefundText">Unexpected refund request</small></span> |
| </button> |
| <button class="example-card" data-example-id="text-bank" data-example="HBL Security: Your account will be suspended. Share the OTP sent to your phone with our support team immediately."> |
| <span class="example-icon">OTP</span><span><strong data-i18n="bankAlert">Bank alert</strong><small data-i18n="bankAlertText">Security code request</small></span> |
| </button> |
| </div> |
|
|
| <p class="eyebrow" style="margin:28px 0 14px" data-i18n="screenshotsTitle">Real scam screenshots</p> |
| <div class="example-grid example-grid-images"> |
| <button class="example-card example-image-card" data-example-id="image-courier" data-image="/static/example-courier.jpeg"> |
| <img src="/static/example-courier.jpeg" alt="Courier scam screenshot" class="example-thumb"> |
| <span><strong data-i18n="courierScam">Courier scam</strong><small data-i18n="courierScamText">Fake delivery fee message</small></span> |
| </button> |
| <button class="example-card example-image-card" data-example-id="image-mobile" data-image="/static/example-mobile.png"> |
| <img src="/static/example-mobile.png" alt="Mobile scam screenshot" class="example-thumb"> |
| <span><strong data-i18n="mobileScam">Mobile scam</strong><small data-i18n="mobileScamText">Fake mobile operator message</small></span> |
| </button> |
| <button class="example-card example-image-card" data-example-id="image-traffic" data-image="/static/example-trafic.png"> |
| <img src="/static/example-trafic.png" alt="Traffic challan scam screenshot" class="example-thumb"> |
| <span><strong data-i18n="trafficScam">Traffic challan</strong><small data-i18n="trafficScamText">Fake e-challan fine message</small></span> |
| </button> |
| </div> |
| </section> |
|
|
| <section id="results" class="results" aria-live="polite" hidden> |
| <div class="result-header"> |
| <div><p class="eyebrow" data-i18n="resultsEyebrow">Safety assessment</p><h2 data-i18n="resultsTitle">What we found</h2></div> |
| <div id="riskBadge" class="risk-badge"></div> |
| </div> |
| <p id="resultSource" class="result-source"></p> |
| <div class="result-grid"> |
| <article class="result-card explanation-card"> |
| <div class="card-title"><span>i</span><h3 data-i18n="explanationTitle">Simple explanation</h3><button class="copy-button" data-copy="explanationText" data-i18n="copy">Copy</button></div> |
| <p id="explanationText"></p> |
| </article> |
| <article class="result-card"> |
| <div class="card-title"><span>!</span><h3 data-i18n="redFlagsTitle">Red flags found</h3><button class="copy-button" data-copy="redFlagsList" data-i18n="copy">Copy</button></div> |
| <ul id="redFlagsList"></ul> |
| </article> |
| <article class="result-card"> |
| <div class="card-title"><span>✓</span><h3 data-i18n="nextStepsTitle">Safe next steps</h3><button class="copy-button" data-copy="nextStepsList" data-i18n="copy">Copy</button></div> |
| <ol id="nextStepsList"></ol> |
| </article> |
| <article id="replyCard" class="result-card reply-card"> |
| <div class="card-title"><span>↗</span><h3 data-i18n="replyTitle">Polite reply draft</h3><button class="copy-button" data-copy="replyText" data-i18n="copy">Copy</button></div> |
| <p id="replyText"></p> |
| </article> |
| </div> |
| </section> |
|
|
| <section class="disclaimer"> |
| <strong data-i18n="disclaimerTitle">Important safety note</strong> |
| <p data-i18n="disclaimerText">NoticeCheck does not verify senders or provide legal or financial advice. Confirm through contact details you find independently before paying, clicking, replying, or sharing information.</p> |
| </section> |
| </main> |
|
|
| <footer><span data-i18n="footerOne">NoticeCheck · A local-first message review tool</span><span data-i18n="footerTwo">Never share OTPs, PINs, passwords, or CVVs.</span></footer> |
| </body> |
| </html> |
|
|
