Skip to content

feat: add drag-and-drop screenshot URL scanner with OCR #175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
riyanshigupta890-cloud wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: add drag-and-drop screenshot URL scanner with OCR #175

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1795a85
feat: add drag-and-drop screenshot URL scanner with OCR
riyanshigupta890-cloud Jul 1, 2026
1d75084
Merge branch 'main' into feature/screenshot-url-scanner
riyanshigupta890-cloud Jul 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,12 @@
[![Contributors](https://img.shields.io/github/contributors/mrinalray/Cybershield_URL?style=for-the-badge&color=8b5cf6&label=Contributors)](https://github.com/mrinalray/Cybershield_URL/graphs/contributors)
[![Stars](https://img.shields.io/github/stars/mrinalray/Cybershield_URL?style=for-the-badge&color=f59e0b)](https://github.com/mrinalray/Cybershield_URL/stargazers)

</div>
* 🔍 **Real-time URL scanning**
* 🛡️ **Detects phishing, malware, and social engineering threats**
* ⚡ **Fast and responsive UI**
* 🌐 **Uses Google Safe Browsing API**
* ✅ **Simple and user-friendly interface**
* 📸 **Screenshot URL Scanner**

---

Expand Down
356 changes: 182 additions & 174 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,174 +1,182 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CyberShield — URL Security Scanner</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="favicon.png" />
</head>
<body>

<!-- ── Loading Screen ── -->
<div id="loader">
<div class="loader-inner">
<div class="loader-sonar">
<div class="loader-core">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" style="color:#00f5ff">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
</svg>
</div>
</div>
<div class="loader-brand">CyberShield</div>
<div class="loader-tagline">Your Security, In Your Hands</div>
<div class="loader-bar-wrap"><div class="loader-bar"></div></div>
</div>
</div>

<!-- ── Theme Toggle (fixed) ── -->
<button id="themeToggle" class="theme-toggle-btn" aria-label="Toggle theme">
<div class="toggle-icon-wrap">
<svg class="sun-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="4"/>
<path d="M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41m12.72-12.72l-1.41 1.41"/>
</svg>
<svg class="moon-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>
</svg>
</div>
</button>

<!-- ── Main Page ── -->
<div id="mainPage" class="hidden">
<div class="wrapper">

<!-- Header -->
<header class="header">
<div class="logo-badge">
<div class="dot"></div>
CyberShield
</div>
<h1>CyberSheild URL Scanner</h1>
<p>Check any link instantly to see if it is safe to visit </p>
<p class="subtitle">Real-time threat detection powered by Google Safe Browsing API. Scans for phishing, malware &amp; social engineering.</p>
</header>

<!-- Scanner Card -->
<div class="scanner-card">
<div class="input-row">
<div class="input-wrap">
<svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
</svg>
<input type="text" id="urlInput" placeholder="Paste your link hereto scan..." autocomplete="off" spellcheck="false">
</div>
<button class="scan-btn" id="scanBtn" onclick="checkSecurity()">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
</svg>
Scan URL
</button>
</div>

<div class="examples">
<span class="examples-label">Try:</span>
<span class="example-chip" onclick="fillExample('https://google.com')">google.com</span>
<span class="example-chip" onclick="fillExample('https://github.com')">github.com</span>
<span class="example-chip" onclick="fillExample('http://testsafebrowsing.appspot.com/s/phishing.html')">phishing test</span>
<span class="example-chip" onclick="fillExample('http://testsafebrowsing.appspot.com/s/malware.html')">malware test</span>
</div>

<div id="result"></div>
</div>

<!-- Stats -->
<div class="stats-row">
<div class="stat-card">
<div class="stat-num" id="totalScans">0</div>
<div class="stat-label">URLs Scanned</div>
</div>
<div class="stat-card">
<div class="stat-num" id="safeCount">0</div>
<div class="stat-label">Safe</div>
</div>
<div class="stat-card">
<div class="stat-num" id="dangerCount">0</div>
<div class="stat-label">Threats Blocked</div>
</div>
</div>

<!-- Nav Links -->
<div class="dashboard-cta" style="margin-top:20px">
<a class="scan-btn" href="chat.html">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
</svg>
Scam Text Detector
</a>
<a class="scan-btn" href="dashboard.html" style="background:var(--card-bg); color:var(--accent-cyan); border:1px solid var(--card-border);">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>
<rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
</svg>
Threat Dashboard
</a>
</div>

<!-- Features -->
<div class="features">
<div class="feature-item">
<div class="feature-icon">🛡️</div>
<div class="feature-title">Malware Detection</div>
<div class="feature-desc">Identifies URLs hosting malicious software targeting your device</div>
</div>
<div class="feature-item">
<div class="feature-icon">🎣</div>
<div class="feature-title">Phishing Shield</div>
<div class="feature-desc">Catches social engineering &amp; credential theft attempts</div>
</div>
<div class="feature-item">
<div class="feature-icon">⚡</div>
<div class="feature-title">Real-time API</div>
<div class="feature-desc">Live data from Google Safe Browsing threat database</div>
</div>
</div>

<!-- Team Section -->

<div class="footer">Built for Security &mdash; Powered by Google Safe Browsing API</div>

</div>

<!-- Footer -->
<footer class="main-footer">
<div class="footer-content">
<div class="footer-brand">
<div class="logo-badge"><div class="dot"></div>CyberShield</div>
<p>Real-time URL security analysis to protect your digital footprint from evolving threats.</p>
</div>
<div class="footer-links">
<div class="footer-col">
<h4>Tools</h4>
<a href="chat.html">Scam Detector Chat</a>
<a href="dashboard.html">Threat Dashboard</a>
</div>
<div class="footer-col">
<h4>Legal</h4>
<a href="privacy.html">Privacy Policy</a>
<a href="terms.html">Terms of Service</a>
</div>
<div class="footer-col">
<h4>Resources</h4>
<a href="docs.html">Documentation</a>
<a href="https://github.com/Mrinalray/Cybershield_URL" target="_blank" rel="noopener noreferrer">GitHub Repo</a>
</div>
</div>
</div>
<div class="footer-bottom">&copy; 2026 CyberShield URL Scanner. Built for Security &mdash; Powered by Google Safe Browsing API.</div>
</footer>
</div>

<script src="script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CyberShield — URL Security Scanner</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<!-- ── Loading Screen ── -->
<div id="loader">
<div class="loader-inner">
<div class="loader-ring"></div>
<div class="loader-logo">
<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#00ffb4" stroke-width="1.8">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
</svg>
</div>
<div class="loader-brand">CyberShield</div>
<div class="loader-tagline">Your Security, In Your Hands.</div>
<div class="loader-bar-wrap"><div class="loader-bar"></div></div>
</div>
</div>

<!-- ── Main Page ── -->
<div id="mainPage" class="hidden">
<div class="wrapper">

<!-- Header -->
<header class="header">
<div class="logo-badge">
<div class="dot"></div>
CyberShield
</div>
<h1>Is This URL<br><span>Safe to Visit?</span></h1>
<p class="subtitle">Real-time threat detection powered by Google Safe Browsing API. Scans for phishing, malware &amp; social engineering.</p>
</header>

<div class="dashboard-cta">
<a class="scan-btn" href="dashboard.html">View Threat Analytics Dashboard</a>
</div>

<!-- Scanner -->
<div class="scanner-card">
<div class="input-row">
<div class="input-wrap">
<svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
</svg>
<input type="text" id="urlInput" placeholder="https://example.com" autocomplete="off" spellcheck="false" aria-label="Enter website URL to scan" aria-describedby="urlHint">
<small id="urlHint" class="sr-only">Enter a URL starting with http:// or https:// to scan for security threats</small>
</div>
<button class="scan-btn" id="scanBtn" onclick="checkSecurity()" aria-label="Scan the entered URL for security threats">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
</svg>
Scan URL
</button>
</div>
<div class="upload-row">
<div id="dropZone" class="drop-zone" tabindex="0" role="button"
aria-label="Upload a screenshot to extract and scan a URL">
<input type="file" id="fileInput" accept="image/*" hidden>
<svg class="upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="17 8 12 3 7 8"/>
<line x1="12" y1="3" x2="12" y2="15"/>
</svg>
<div class="drop-zone-text">
<strong>Drag & drop a screenshot</strong> or click to upload
<span class="drop-zone-sub">We'll extract the URL and scan it automatically</span>
</div>
<img id="previewImg" class="preview-img hidden" alt="Uploaded screenshot preview">
</div>
<div id="ocrStatus" class="ocr-status" aria-live="polite"></div>
</div>

<div class="examples" role="group" aria-label="Quick example URLs">
<span class="examples-label" id="examplesLabel">Try:</span>
<button class="example-chip" onclick="fillExample('https://google.com')" tabindex="0" aria-label="Scan google.com">google.com</button>
<button class="example-chip" onclick="fillExample('https://github.com')" tabindex="0" aria-label="Scan github.com">github.com</button>
<button class="example-chip" onclick="fillExample('http://testsafebrowsing.appspot.com/s/phishing.html')" tabindex="0" aria-label="Scan phishing test URL">phishing test</button>
<button class="example-chip" onclick="fillExample('http://testsafebrowsing.appspot.com/s/malware.html')" tabindex="0" aria-label="Scan malware test URL">malware test</button>
</div>

<div id="result" aria-live="polite" aria-atomic="true" role="status"></div>
</div>

<!-- Stats -->
<div class="stats-row">
<div class="stat-card">
<div class="stat-num" id="totalScans">0</div>
<div class="stat-label">URLs Scanned</div>
</div>
<div class="stat-card">
<div class="stat-num" id="safeCount">0</div>
<div class="stat-label">Safe</div>
</div>
<div class="stat-card">
<div class="stat-num" id="dangerCount">0</div>
<div class="stat-label">Threats Blocked</div>
</div>
</div>

<!-- Features -->
<div class="features">
<div class="feature-item">
<div class="feature-icon">🛡️</div>
<div class="feature-title">Malware Detection</div>
<div class="feature-desc">Identifies URLs hosting malicious software</div>
</div>
<div class="feature-item">
<div class="feature-icon">🎣</div>
<div class="feature-title">Phishing Shield</div>
<div class="feature-desc">Catches social engineering &amp; credential theft</div>
</div>
<div class="feature-item">
<div class="feature-icon">⚡</div>
<div class="feature-title">Real-time API</div>
<div class="feature-desc">Live data from Google Safe Browsing database</div>
</div>
</div>

<!-- Team Section -->
<div class="team-section">
<div class="team-header">
<div class="section-tag">The Team</div>
<h2 class="team-title">Meet the builders</h2>
<p class="team-sub">The people who made CyberShield possible</p>
</div>

<!-- Toggle arrow button -->
<button class="team-toggle" id="teamToggle" onclick="toggleTeam()" aria-label="Show team members" aria-expanded="false" aria-controls="teamGridWrap">
<svg id="toggleIcon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
<polyline points="6 9 12 15 18 9"/>
</svg>
</button>

<!-- Collapsible grid -->
<div class="team-grid-wrap" id="teamGridWrap">
<div class="team-grid" id="teamGrid"></div>
</div>
</div>

<!-- Main Footer -->
<footer class="main-footer">
<div class="footer-content">
<div class="footer-brand">
<div class="logo-badge">
<div class="dot"></div>
CyberShield
</div>
<p>Providing real-time URL security analysis to protect your digital footprint from evolving threats.</p>
</div>

<div class="footer-links">
<div class="footer-col">
<h4>Legal</h4>
<a href="privacy.html">Privacy Policy</a>
<a href="terms.html">Terms of Service</a>
</div>
<div class="footer-col">
<h4>Resources</h4>
<a href="docs.html">Documentation</a>
<a href="dashboard.html">Threat Analytics Dashboard</a>
<a href="https://github.com/Mrinalray/Cybershield_URL" target="_blank" rel="noopener noreferrer">GitHub Repo</a>
</div>
</div>
</div>
<div class="footer-bottom">
&copy; 2026 CyberShield URL Scanner. Built for Security &mdash; Powered by Google Safe Browsing API.
</div>
</footer>

</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Loading