Skip to content

Commit f6803f9

Browse files
patrickking67patrickking67
committed
Add password presets, update docs with inspiration credits
1 parent 9d275b1 commit f6803f9

5 files changed

Lines changed: 272 additions & 7 deletions

File tree

‎README.md‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
- [Getting Started](#getting-started)
3939
- [Deployment](#deployment)
4040
- [Privacy](#privacy)
41+
- [Inspiration](#inspiration)
4142
- [License](#license)
4243

4344
---
@@ -61,11 +62,11 @@ Sign in with Google, GitHub, or email to save results across devices via Firebas
6162
| | Feature | Description |
6263
|---|---------|-------------|
6364
| :globe_with_meridians: | **IP & Geolocation** | Detect your public IP, ISP, ASN, proxy/VPN status, and map your approximate location |
64-
| :zap: | **Speed Test** | Measure download, upload, and ping with animated gauges via Cloudflare |
65+
| :zap: | **Speed Test** | Multi-connection download, upload, ping, and jitter with animated gauges via Cloudflare |
6566
| :shield: | **Breach Check** | Check emails (XposedOrNot) and passwords (HIBP k-anonymity) against known breaches |
66-
| :lock: | **Password Generator** | Generate strong passwords with configurable length, character sets, and strength meter |
67+
| :lock: | **Password Generator** | One-click presets (Password, PIN, Passphrase, Hex Key) plus custom length, character sets, and strength meter |
6768
| :satellite: | **DNS & Security Scan** | Lookup DNS records, check SPF/DMARC/DKIM, DNSSEC, and WebRTC leak detection |
68-
| :rocket: | **Run All** | Execute every test in sequence with one click |
69+
| :rocket: | **Full Scan** | Run every security test in sequence with a step-by-step progress overlay |
6970
| :outbox_tray: | **Export** | Copy results, share via email, or download a PDF report |
7071
| :art: | **Dark / Light Theme** | Toggle between themes with persistent preference |
7172
| :bust_in_silhouette: | **Authentication** | Sign in with Google, GitHub, or email/password via Firebase |
@@ -85,7 +86,7 @@ Pure HTML, CSS, and JavaScript. The repo root **is** the deployable output — n
8586
| Email Breach | [XposedOrNot](https://xposedornot.com/) | Checks email against breach databases |
8687
| DNS Lookup | [Google DNS-over-HTTPS](https://dns.google/) | Resolves DNS records over HTTPS |
8788
| Maps | [Leaflet](https://leafletjs.com/) + [OpenStreetMap](https://www.openstreetmap.org/) | Interactive geolocation map |
88-
| Speed Test | [Cloudflare](https://speed.cloudflare.com/) | Download/upload/ping measurements |
89+
| Speed Test | [Cloudflare](https://speed.cloudflare.com/) | Multi-connection download/upload, ping, and jitter |
8990
| Auth & Database | [Firebase](https://firebase.google.com/) | Google, GitHub, & email auth + Firestore |
9091
| PDF Export | [jsPDF](https://github.com/parallax/jsPDF) | Client-side PDF generation |
9192

@@ -181,6 +182,14 @@ Push to main → .github/workflows/static.yml → Live on GitHub Pages
181182
- **Sign-in is optional.** Every feature works without an account.
182183
- **Cloud saves are private.** If signed in, results are stored in your own Firestore collection.
183184

185+
## Inspiration
186+
187+
NetScope was inspired by several outstanding tools and services:
188+
189+
- **[DivergeIT Security Scanner](https://check.divergeit.com)** — Created by Connor Bescos and Brian Yeo. A major inspiration for NetScope's approach to client-side security scanning.
190+
- **[Ookla Speedtest](https://www.speedtest.net)** — The gold standard for internet speed testing. Inspired the multi-connection speed test with animated gauges and jitter measurement.
191+
- **[Have I Been Pwned](https://haveibeenpwned.com)** — Troy Hunt's pioneering breach notification service. NetScope uses HIBP's k-anonymity API for privacy-preserving password breach checks.
192+
184193
## License
185194

186195
This project is licensed under the [MIT License](LICENSE).

‎about.html‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ <h3>IP & Geolocation</h3>
7474
<div class="about-feature">
7575
<div class="card-icon card-icon--purple"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg></div>
7676
<h3>Speed Test</h3>
77-
<p>Measures download speed, upload speed, and latency using Cloudflare's global CDN infrastructure.</p>
77+
<p>Measures download, upload, ping, and jitter using multi-connection transfers via Cloudflare's global CDN.</p>
7878
</div>
7979
<div class="about-feature">
8080
<div class="card-icon card-icon--red"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></div>
@@ -84,7 +84,7 @@ <h3>Breach Check</h3>
8484
<div class="about-feature">
8585
<div class="card-icon card-icon--green"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></div>
8686
<h3>Password Generator</h3>
87-
<p>Generates cryptographically secure passwords with configurable length and character sets.</p>
87+
<p>Generates cryptographically secure passwords, PINs, passphrases, and hex keys with one-click presets or custom configuration.</p>
8888
</div>
8989
<div class="about-feature">
9090
<div class="card-icon card-icon--cyan"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20"><rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></svg></div>
@@ -121,6 +121,16 @@ <h2 class="about-heading">Tech Stack</h2>
121121
</ul>
122122
</section>
123123

124+
<section class="card card--wide reveal">
125+
<h2 class="about-heading">Inspiration</h2>
126+
<p class="about-text">NetScope was inspired by several outstanding tools and services:</p>
127+
<ul class="about-list">
128+
<li><strong><a href="https://check.divergeit.com" target="_blank" rel="noopener">DivergeIT Security Scanner</a></strong> &mdash; Created by Connor Bescos and Brian Yeo. A major inspiration for NetScope's approach to client-side security scanning.</li>
129+
<li><strong><a href="https://www.speedtest.net" target="_blank" rel="noopener">Ookla Speedtest</a></strong> &mdash; The gold standard for internet speed testing. Inspired NetScope's multi-connection speed test with animated gauges and jitter measurement.</li>
130+
<li><strong><a href="https://haveibeenpwned.com" target="_blank" rel="noopener">Have I Been Pwned</a></strong> &mdash; Troy Hunt's pioneering breach notification service. NetScope uses HIBP's k-anonymity API for privacy-preserving password breach checks.</li>
131+
</ul>
132+
</section>
133+
124134
<section class="card card--wide reveal">
125135
<h2 class="about-heading">Open Source</h2>
126136
<p class="about-text">NetScope is open source under the MIT License. Contributions, issues, and forks are welcome.</p>

‎app.html‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -354,6 +354,24 @@ <h2 class="auth-title">Reset Password</h2>
354354
<div class="card-icon card-icon--green"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="22" height="22"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></div>
355355
<div><h2 class="card-title">Password Generator</h2><p class="card-subtitle">Generate cryptographically secure passwords instantly</p></div>
356356
</div>
357+
<div class="pwgen-presets">
358+
<button class="pwgen-preset active" data-preset="password">
359+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
360+
Password
361+
</button>
362+
<button class="pwgen-preset" data-preset="pin">
363+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>
364+
PIN
365+
</button>
366+
<button class="pwgen-preset" data-preset="passphrase">
367+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><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>
368+
Passphrase
369+
</button>
370+
<button class="pwgen-preset" data-preset="hex">
371+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
372+
Hex Key
373+
</button>
374+
</div>
357375
<div class="pwgen-output">
358376
<code class="pwgen-password" id="pwgen-password">Your password will appear here</code>
359377
<button class="pwgen-copy" id="pwgen-copy" title="Copy password">
@@ -362,7 +380,7 @@ <h2 class="auth-title">Reset Password</h2>
362380
</div>
363381
<div class="pwgen-strength"><div class="pwgen-strength-bar" id="pwgen-strength-bar"></div></div>
364382
<div class="pwgen-strength-label" id="pwgen-strength-label">--</div>
365-
<div class="pwgen-controls">
383+
<div class="pwgen-controls" id="pwgen-controls">
366384
<div class="pwgen-slider-group">
367385
<label class="pwgen-label">Length: <strong id="pwgen-length-val">20</strong></label>
368386
<input type="range" id="pwgen-length" class="pwgen-slider" min="8" max="64" value="20">

‎css/style.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1323,6 +1323,38 @@ input, select { font-family: inherit; color: inherit; }
13231323
[data-theme="light"] .fullscan-bar { background: rgba(0,0,0,0.06); }
13241324
[data-theme="light"] .settings-panel-inner { background: var(--bg-body); }
13251325

1326+
/* ===== Password Generator Presets ===== */
1327+
.pwgen-presets {
1328+
display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap;
1329+
}
1330+
.pwgen-preset {
1331+
display: inline-flex; align-items: center; gap: 6px;
1332+
padding: 8px 16px; border-radius: 999px;
1333+
font-size: 13px; font-weight: 500;
1334+
background: rgba(255,255,255,0.04);
1335+
border: 1px solid var(--border);
1336+
color: var(--text-secondary);
1337+
transition: all 0.2s ease; cursor: pointer;
1338+
}
1339+
.pwgen-preset:hover {
1340+
border-color: var(--border-hover);
1341+
color: var(--text-primary);
1342+
background: rgba(255,255,255,0.07);
1343+
}
1344+
.pwgen-preset.active {
1345+
background: rgba(59,130,246,0.12);
1346+
border-color: rgba(59,130,246,0.4);
1347+
color: var(--accent-blue);
1348+
}
1349+
.pwgen-preset svg { flex-shrink: 0; }
1350+
[data-theme="light"] .pwgen-preset { background: rgba(0,0,0,0.03); }
1351+
[data-theme="light"] .pwgen-preset:hover { background: rgba(0,0,0,0.06); }
1352+
[data-theme="light"] .pwgen-preset.active {
1353+
background: rgba(59,130,246,0.08);
1354+
border-color: rgba(59,130,246,0.35);
1355+
}
1356+
.pwgen-controls.hidden { display: none; }
1357+
13261358
/* ===== Enhanced Card Animations ===== */
13271359
@keyframes tabSlideIn {
13281360
from { opacity: 0; transform: translateY(12px); }
@@ -1348,4 +1380,6 @@ input, select { font-family: inherit; color: inherit; }
13481380
.fullscan-title { font-size: 20px; }
13491381
.fullscan-step { padding: 12px 14px; gap: 12px; }
13501382
.settings-panel-inner { max-width: 100%; }
1383+
.pwgen-presets { gap: 6px; }
1384+
.pwgen-preset { padding: 7px 12px; font-size: 12px; }
13511385
}

0 commit comments

Comments
 (0)