Cybershield_URL/docs.html at main · Mrinalray/Cybershield_URL · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documentation — CyberShield</title>
  <link rel="stylesheet" href="style.css">
  <link rel="icon" type="image/png" href="favicon.png" />
  <script>
    (function() {
      const t = localStorage.getItem('theme') || 'dark';
      if (t === 'light') document.documentElement.classList.add('light-mode');
    })();
  </script>
</head>
<body>

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

  <div class="wrapper">
    <div class="docs-container">
      <a href="index.html" class="back-link">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
          <path d="M19 12H5M12 19l-7-7 7-7"/>
        </svg>
        Back to Scanner
      </a>

      <h1>Documentation</h1>

      <section id="intro">
        <h2>Introduction</h2>
        <p>CyberShield is a real-time URL security scanner designed to identify potentially harmful websites before you visit them. By leveraging the <strong>Google Safe Browsing API</strong>, CyberShield provides instant feedback on whether a link is associated with phishing, malware, or other social engineering threats.</p>
        <p>CyberShield also includes an AI-powered Scam Text Detector, which uses the Google Gemini API to analyze suspicious messages, emails, job offers, and SMS texts for fraud patterns.</p>
      </section>

      <section id="usage">
        <h2>How to Use</h2>
        <p>Using CyberShield is straightforward:</p>
        <ul>
          <li><strong>Step 1:</strong> Copy the URL you wish to check.</li>
          <li><strong>Step 2:</strong> Paste it into the scanner input box on the home page.</li>
          <li><strong>Step 3:</strong> Press <strong>Enter</strong> or click <strong>Scan URL</strong>.</li>
          <li><strong>Step 4:</strong> Review the result and any flagged threat categories.</li>
        </ul>
        <p>For text/message scanning, head to the <a href="chat.html" style="color:var(--accent-cyan)">Scam Detector Chat</a> and paste any suspicious message.</p>
      </section>

      <section id="results">
        <h2>Understanding Results</h2>
        <p>CyberShield categorizes URLs into two states:</p>

        <h3><span class="status-badge safe-badge">SAFE</span>No Threats Detected</h3>
        <p>The URL is not currently listed in the Google Safe Browsing database as a threat. While highly reliable, always exercise caution with unfamiliar websites.</p>

        <h3><span class="status-badge danger-badge">DANGER</span>Threat Detected</h3>
        <p>The URL has been flagged as malicious. Common threat types include:</p>
        <ul>
          <li><strong>Malware</strong> — Sites that install harmful software on your device.</li>
          <li><strong>Phishing (Social Engineering)</strong> — Sites that trick you into revealing passwords or card details.</li>
          <li><strong>Unwanted Software</strong> — Sites pushing deceptive or potentially harmful programs.</li>
        </ul>
      </section>

      <section id="developer">
        <h2>For Developers</h2>
        <p>To run CyberShield locally, ensure Node.js v14+ is installed, then:</p>
        <div style="position:relative">
          <button onclick="copyCommands()" style="position:absolute; right:10px; top:10px; padding:6px 12px; font-size:11px; background:var(--accent-cyan); color:#020818; border:none; border-radius:6px; cursor:pointer; font-weight:700">Copy</button>
          <pre id="cmdBlock" class="code-block" style="margin:0; white-space:pre-wrap">git clone https://github.com/Mrinalray/Cybershield_URL.git
cd Cybershield_URL
npm install
node server.js</pre>
        </div>

        <h3>Environment Variables</h3>
        <p>Create a <code style="background:var(--input-bg); padding:2px 6px; border-radius:4px; font-family:monospace; font-size:13px">.env</code> file in the project root:</p>
        <pre class="code-block">API_KEY=your_google_safe_browsing_key
GEMINI_API_KEY=your_gemini_api_key
CORS_ORIGINS=http://localhost:3000,https://yourdomain.com
REQUEST_TIMEOUT_MS=8000
REQUEST_RETRIES=2</pre>
        <p>Get your Google Safe Browsing key at <a href="https://console.cloud.google.com/" target="_blank" rel="noopener" style="color:var(--accent-cyan)">Google Cloud Console</a>. Never commit the <code style="background:var(--input-bg); padding:2px 6px; border-radius:4px; font-family:monospace; font-size:13px">.env</code> file — it is in <code style="background:var(--input-bg); padding:2px 6px; border-radius:4px; font-family:monospace; font-size:13px">.gitignore</code>.</p>

        <h3>API Endpoints</h3>
        <pre class="code-block">POST /check             — URL threat scan (Google Safe Browsing)
POST /api/scam-detect   — Text scam analysis (Gemini AI)
GET  /                  — Health check</pre>
      </section>
    </div>
  </div>

  <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.</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="https://github.com/Mrinalray/Cybershield_URL" target="_blank" rel="noopener noreferrer">GitHub</a>
        </div>
      </div>
    </div>
    <div class="footer-bottom">&copy; 2026 CyberShield URL Scanner. Powered by Google Safe Browsing API.</div>
  </footer>

  <script>
    document.getElementById('themeToggle').addEventListener('click', () => {
      const isLight = document.documentElement.classList.toggle('light-mode');
      localStorage.setItem('theme', isLight ? 'light' : 'dark');
    });

    function copyCommands() {
      const text = document.getElementById('cmdBlock').innerText;
      navigator.clipboard.writeText(text);
      const btn = document.querySelector('button[onclick="copyCommands()"]');
      btn.textContent = 'Copied!';
      setTimeout(() => { btn.textContent = 'Copy'; }, 2000);
    }
  </script>
</body>
</html>