Spaces:
Running on Zero
Running on Zero
| <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> | |
| // ZeroGPU auth handshake — required for PRO quota in HF iframe. | |
| // Without this, gr.Server custom frontends are treated as unauthenticated. | |
| 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> | |