@@ -65,6 +70,10 @@ const team = [
}).join('');
+ // Add list role to grid for screen readers
+ grid.setAttribute('role', 'list');
+ grid.setAttribute('aria-label', 'Team members');
+
})();
let teamOpen = false;
@@ -94,6 +103,168 @@ function toggleTeam() {
}
}
+// ─────────────────────────────
+// SECURITY TIPS
+// ─────────────────────────────
+
+const TIPS = {
+
+ MALWARE: [
+ 'Never download files or software from untrusted or unfamiliar websites.',
+ 'Keep your antivirus software updated and run regular scans.',
+ 'Avoid clicking links in unsolicited emails or messages — they may silently install malware.',
+ 'Use a reputable ad blocker; malicious ads can trigger drive-by downloads.',
+ 'Keep your OS and browser updated — patches close exploits malware relies on.',
+ ],
+
+ SOCIAL_ENGINEERING: [
+ 'Legitimate websites never ask for your password via email or a popup.',
+ 'Always check the full URL carefully — phishing sites mimic real ones with subtle typos.',
+ 'Look for HTTPS and a valid padlock before entering any personal information.',
+ 'When in doubt, go directly to the official website instead of clicking a link.',
+ 'Enable two-factor authentication (2FA) so stolen passwords alone cannot access your accounts.',
+ ],
+
+ UNWANTED_SOFTWARE: [
+ 'Only install software from official sources like verified app stores or developer sites.',
+ 'Read permissions carefully before installing browser extensions or apps.',
+ 'Regularly audit installed programs and remove anything you do not recognise.',
+ 'Avoid "free" software bundles — they often include unwanted programs bundled silently.',
+ 'Use a browser with built-in protection against unwanted software downloads.',
+ ],
+
+ POTENTIALLY_HARMFUL_APPLICATION: [
+ 'Avoid sideloading apps from outside official stores unless you fully trust the source.',
+ 'Check app reviews and publisher details before granting installation permissions.',
+ 'Revoke unnecessary permissions for apps that request access to sensitive data.',
+ 'Keep your device OS updated to protect against known app vulnerabilities.',
+ 'Use a mobile security app to scan for potentially harmful applications.',
+ ],
+
+ general: [
+ 'Use a password manager to generate and store strong, unique passwords.',
+ 'Enable two-factor authentication on every account that supports it.',
+ 'Regularly back up important data to an offline or encrypted cloud location.',
+ 'Avoid using public Wi-Fi for banking or sensitive logins without a VPN.',
+ 'Review your privacy settings on social media — oversharing aids social engineering.',
+ 'Check "Have I Been Pwned" (haveibeenpwned.com) to see if your email was leaked.',
+ 'Be sceptical of urgency — scammers manufacture time pressure to bypass your judgement.',
+ 'Lock your devices with a strong PIN or biometric — physical access is a real threat.',
+ 'Use a DNS-level blocker like 1.1.1.1 with filtering to block malicious domains.',
+ 'Think before you click. Pause, inspect the URL, then decide.',
+ ],
+
+};
+
+// Tracks last shown general tip index to avoid repeats
+let lastGeneralTipIndex = -1;
+
+function getRandomTip(arr, lastIndex = -1) {
+ let index;
+ do {
+ index = Math.floor(Math.random() * arr.length);
+ } while (arr.length > 1 && index === lastIndex);
+ lastGeneralTipIndex = index;
+ return { tip: arr[index], index };
+}
+
+function buildTipsHtml(threatTypes) {
+
+ const isThreat = threatTypes && threatTypes.length > 0;
+
+ if (isThreat) {
+
+ // Collect unique tip sets for each detected threat type
+ const sections = [];
+
+ const threatLabels = {
+ MALWARE: { label: 'Malware', icon: '🦠' },
+ SOCIAL_ENGINEERING: { label: 'Phishing / Social Engineering', icon: '🎣' },
+ UNWANTED_SOFTWARE: { label: 'Unwanted Software', icon: '📦' },
+ POTENTIALLY_HARMFUL_APPLICATION: { label: 'Harmful Application', icon: '⚠️' },
+ };
+
+ threatTypes.forEach(threat => {
+ const tipPool = TIPS[threat];
+ if (!tipPool) return;
+
+ const meta = threatLabels[threat] || { label: threat, icon: '⚠️' };
+
+ // Pick 3 random non-repeating tips from the pool
+ const shuffled = [...tipPool].sort(() => Math.random() - 0.5).slice(0, 3);
+
+ sections.push(`
+
+
+ ${meta.icon} ${meta.label} Tips
+
+
+ ${shuffled.map(t => `- ${t}
`).join('')}
+
+
+ `);
+ });
+
+ return `
+
+
+
+ ${sections.join('')}
+
+
+
+ `;
+
+ } else {
+
+ // Safe URL — show a random rotating general tip
+ const { tip } = getRandomTip(TIPS.general, lastGeneralTipIndex);
+
+ return `
+
+
+
+
${tip}
+
+
+
+ `;
+
+ }
+}
+
+function refreshGeneralTip() {
+ const { tip } = getRandomTip(TIPS.general, lastGeneralTipIndex);
+ const tipEl = document.querySelector('.tips-general-tip');
+ if (tipEl) {
+ tipEl.style.opacity = '0';
+ setTimeout(() => {
+ tipEl.textContent = tip;
+ tipEl.style.opacity = '1';
+ }, 200);
+ }
+}
+
+function showTips(threatTypes) {
+ const resultEl = document.getElementById('result');
+ if (!resultEl) return;
+
+ // Remove any existing tips card
+ const existing = resultEl.querySelector('.tips-card');
+ if (existing) existing.remove();
+
+ const tipsHtml = buildTipsHtml(threatTypes);
+ resultEl.insertAdjacentHTML('beforeend', tipsHtml);
+}
+
// ─────────────────────────────
// SCANNER
// ─────────────────────────────
@@ -107,25 +278,7 @@ let dangerCount = 0;
function isValidUrl(urlString) {
try {
- const urlObj = new URL(urlString);
- const hostname = urlObj.hostname;
-
- // To allow local testing
- if (hostname === 'localhost' || hostname === '127.0.0.1') {
- return true;
- }
-
- const parts = hostname.split('.');
- if (parts.length < 2) {
- return false;
- }
-
- const tld = parts[parts.length - 1];
- // TLD must be at least 2 chars & consist of only letters
- if (tld.length < 2 || !/^[a-zA-Z]+$/.test(tld)) {
- return false;
- }
-
+ new URL(urlString);
return true;
} catch (e) {
return false;
@@ -158,15 +311,6 @@ function formatAndValidateUrl(input) {
url = 'https://' + url;
}
- // Validate URL length
- if (url.length > 2048) {
- return {
- valid: false,
- error: 'URL exceeds maximum length of 2048 characters.',
- url: null
- };
- }
-
if (!isValidUrl(url)) {
return {
@@ -213,8 +357,12 @@ function formatAndValidateUrl(input) {
function fillExample(url) {
- document.getElementById('urlInput').value = url;
- document.getElementById('urlInput').focus();
+ const input = document.getElementById('urlInput');
+ input.value = url;
+ input.focus();
+
+ // Update aria-label to reflect filled value for screen readers
+ input.setAttribute('aria-label', `URL input, filled with ${url}. Press Enter or click Scan URL to scan.`);
}
@@ -288,7 +436,7 @@ function calculateRiskScore(url, isThreat) {
score += 10;
breakdown.push({ text: 'Excessive subdomains used', type: 'warning' });
} else {
- breakdown.push({ text: 'Domain structure appears normal', type: 'safe' });
+ breakdown.push({ text: 'Domain structure appears normal', type: 'safe' });
}
} catch (e) {
score += 20;
@@ -312,6 +460,14 @@ function showResult(type, title, desc, url, threats) {
error: '!'
};
+ // Map result type to human-readable label for screen readers
+ const ariaLabels = {
+ safe: 'Safe',
+ danger: 'Danger',
+ error: 'Error',
+ loading: 'Loading'
+ };
+
const isThreat = type === 'danger';
let riskSectionHtml = '';
let riskData = null;
@@ -325,31 +481,39 @@ function showResult(type, title, desc, url, threats) {
let breakdownHtml = riskData.breakdown.map(item => {
let icon = '';
- if (item.type === 'safe') icon = `
`;
- else if (item.type === 'warning') icon = `
`;
- else if (item.type === 'danger') icon = `
`;
+ let iconLabel = '';
+ if (item.type === 'safe') {
+ icon = `
`;
+ iconLabel = 'Safe';
+ } else if (item.type === 'warning') {
+ icon = `
`;
+ iconLabel = 'Warning';
+ } else if (item.type === 'danger') {
+ icon = `
`;
+ iconLabel = 'Danger';
+ }
- return `
${icon} ${item.text}
`;
+ return `
${iconLabel}:${icon} ${item.text}
`;
}).join('');
riskSectionHtml = `
-
+
-
-
+
+
-
@@ -358,36 +522,45 @@ function showResult(type, title, desc, url, threats) {
document.getElementById('result').innerHTML = `
-
+
-
+
- ${type === 'loading'
- ? '
'
- : type === 'scan-loading'
- ? ''
- : `
${icons[type]}`
- }
+ ${
+ type === 'loading'
+ ? '
'
+ : type === 'scan-loading'
+ ? ''
+ : `
${icons[type]}`
+ }
${title}
${desc}
- ${url ? `
${url}
` : ''}
+ ${url ? `
${url}
` : ''}
${threats && threats.length
- ? `
${threats.map(t =>
- `${t}`).join('')}
`
- : ''}
+ ? `
${threats.map(t =>
+ `${t}`).join('')}
`
+ : ''}
${(type === 'safe' || type === 'danger') ? `
-
-
+
+
` : ''}
`;
+ // Move focus to result div so screen readers announce the outcome
+ const resultEl = document.getElementById('result');
+ resultEl.setAttribute('tabindex', '-1');
+ resultEl.focus();
+
if (riskSectionHtml) {
+ // Append risk section inside result div, after the result card
+ resultEl.insertAdjacentHTML('beforeend', riskSectionHtml);
+
setTimeout(() => {
const bar = document.querySelector('.risk-meter-bar');
if (bar) {
@@ -464,27 +637,29 @@ async function checkSecurity() {
document.getElementById('scanBtn');
btn.disabled = true;
+ btn.setAttribute('aria-busy', 'true');
+ btn.setAttribute('aria-label', 'Scanning URL, please wait...');
// Loading State — enhanced scan animation
document.getElementById('result').innerHTML = `
-
+
-
+
Scanning URL...
-
${url}
+
${url}
-
+
@@ -540,23 +715,37 @@ async function checkSecurity() {
updateStats('danger');
showResult('danger', 'Threat Detected!',
`This URL is flagged as dangerous. Do not visit it.
-
-
- ${isHttps ? '✅' : '⚠️'}
HTTPS: ${isHttps ? 'Secure connection' : 'Not secure'}
+
+
+ ${isHttps ? '✅' : '⚠️'}
+ ${isHttps ? 'Secure' : 'Insecure'}:
+ HTTPS: ${isHttps ? 'Secure connection' : 'Not secure'}
-
- ${hasMalware ? '🔴' : '✅'}
Malware: ${hasMalware ? 'Detected!' : 'No malware detected'}
+
+ ${hasMalware ? '🔴' : '✅'}
+ ${hasMalware ? 'Detected' : 'Clear'}:
+ Malware: ${hasMalware ? 'Detected!' : 'No malware detected'}
-
- ${hasPhishing ? '🔴' : '✅'}
Phishing: ${hasPhishing ? 'Phishing detected!' : 'No phishing detected'}
+
+ ${hasPhishing ? '🔴' : '✅'}
+ ${hasPhishing ? 'Detected' : 'Clear'}:
+ Phishing: ${hasPhishing ? 'Phishing detected!' : 'No phishing detected'}
-
- ${hasUnwanted ? '🔴' : '✅'}
Unwanted Software: ${hasUnwanted ? 'Detected!' : 'None detected'}
+
+ ${hasUnwanted ? '🔴' : '✅'}
+ ${hasUnwanted ? 'Detected' : 'Clear'}:
+ Unwanted Software: ${hasUnwanted ? 'Detected!' : 'None detected'}
-
- ${hasHarmful ? '🔴' : '✅'}
Harmful App: ${hasHarmful ? 'Detected!' : 'None detected'}
+
+ ${hasHarmful ? '🔴' : '✅'}
+ ${hasHarmful ? 'Detected' : 'Clear'}:
+ Harmful App: ${hasHarmful ? 'Detected!' : 'None detected'}
`, url, threats);
+
+ // Show threat-specific tips
+ showTips(allThreats);
+
} else {
updateStats('safe');
const urlObj = new URL(url);
@@ -569,23 +758,36 @@ async function checkSecurity() {
showResult('safe', 'URL is Safe',
`No threats detected. Google Safe Browsing found no issues.
-
-
- ${isHttps ? '✅' : '⚠️'}
HTTPS: ${isHttps ? 'Secure connection' : 'Not secure — use with caution'}
+
+
+ ${isHttps ? '✅' : '⚠️'}
+ ${isHttps ? 'Secure' : 'Warning'}:
+ HTTPS: ${isHttps ? 'Secure connection' : 'Not secure — use with caution'}
-
- ${hasMalware ? '🔴' : '✅'}
Malware: ${hasMalware ? 'Detected!' : 'No malware detected'}
+
+ ${hasMalware ? '🔴' : '✅'}
+ ${hasMalware ? 'Detected' : 'Clear'}:
+ Malware: ${hasMalware ? 'Detected!' : 'No malware detected'}
-
- ${hasPhishing ? '🔴' : '✅'}
Phishing: ${hasPhishing ? 'Phishing detected!' : 'No phishing detected'}
+
+ ${hasPhishing ? '🔴' : '✅'}
+ ${hasPhishing ? 'Detected' : 'Clear'}:
+ Phishing: ${hasPhishing ? 'Phishing detected!' : 'No phishing detected'}
-
- ${hasUnwanted ? '🔴' : '✅'}
Unwanted Software: ${hasUnwanted ? 'Detected!' : 'None detected'}
+
+ ${hasUnwanted ? '🔴' : '✅'}
+ ${hasUnwanted ? 'Detected' : 'Clear'}:
+ Unwanted Software: ${hasUnwanted ? 'Detected!' : 'None detected'}
-
- ${hasHarmful ? '🔴' : '✅'}
Harmful App: ${hasHarmful ? 'Detected!' : 'None detected'}
+
+ ${hasHarmful ? '🔴' : '✅'}
+ ${hasHarmful ? 'Detected' : 'Clear'}:
+ Harmful App: ${hasHarmful ? 'Detected!' : 'None detected'}
`, url, []);
+
+ // Show rotating general tip
+ showTips([]);
}
} catch (err) {
@@ -595,7 +797,8 @@ async function checkSecurity() {
'', []);
} finally {
btn.disabled = false;
-
+ btn.removeAttribute('aria-busy');
+ btn.setAttribute('aria-label', 'Scan the entered URL for security threats');
}
}
@@ -603,6 +806,7 @@ async function checkSecurity() {
document.getElementById('urlInput').addEventListener('keydown', e => {
if (e.key === 'Enter') checkSecurity();
});
+
async function captureReport() {
const card = document.querySelector('#result .result-card');
if (!card) return null;
@@ -614,6 +818,7 @@ async function captureReport() {
background: #1e293b; border-radius: 12px;
font-family: sans-serif; color: #f1f5f9;
`;
+ reportDiv.setAttribute('aria-hidden', 'true');
reportDiv.innerHTML = `
🛡️
@@ -657,6 +862,7 @@ async function downloadPDF() {
pdf.addImage(imgData, 'PNG', 0, 20, pageWidth, imgHeight);
pdf.save('cybershield-report.pdf');
}
+
// ─────────────────────────────
// THEME TOGGLE
// ─────────────────────────────
@@ -678,12 +884,20 @@ async function downloadPDF() {
function applyTheme(theme) {
if (theme === 'light') {
document.documentElement.classList.add('light-mode');
- if (btn) btn.textContent = '☀️';
+ if (btn) {
+ btn.textContent = '☀️';
+ btn.setAttribute('aria-label', 'Switch to dark mode');
+ btn.setAttribute('aria-pressed', 'false');
+ }
} else {
document.documentElement.classList.remove('light-mode');
- if (btn) btn.textContent = '🌙';
+ if (btn) {
+ btn.textContent = '🌙';
+ btn.setAttribute('aria-label', 'Switch to light mode');
+ btn.setAttribute('aria-pressed', 'true');
+ }
}
localStorage.setItem('theme', theme);
}
-})();
+})();
\ No newline at end of file
diff --git a/style.css b/style.css
index bf46d56..8613990 100644
--- a/style.css
+++ b/style.css
@@ -1285,4 +1285,140 @@ input[type="text"].input-error {
@media (max-width: 380px) {
.team-grid { grid-template-columns: 1fr; }
+}
+
+/* ── Accessibility: Focus styles ── */
+:focus-visible {
+ outline: 2px solid #00ffb4;
+ outline-offset: 3px;
+ border-radius: 4px;
+}
+
+/* Remove default focus for mouse users only */
+:focus:not(:focus-visible) {
+ outline: none;
+}
+
+/* Screen reader only utility */
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+}
+/* ── Security Tips ── */
+.tips-card {
+ margin-top: 16px;
+ border-radius: 14px;
+ padding: 20px 24px;
+ background: var(--card-bg, #1e293b);
+ border: 1px solid rgba(255,255,255,0.07);
+}
+
+.tips-card.danger-tips {
+ border-left: 4px solid #f87171;
+}
+
+.tips-card.safe-tips {
+ border-left: 4px solid #00ffb4;
+}
+
+.tips-header {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-bottom: 16px;
+}
+
+.tips-header-icon {
+ font-size: 20px;
+}
+
+.tips-header-title {
+ font-size: 15px;
+ font-weight: 700;
+ color: var(--text-primary, #f1f5f9);
+}
+
+.tips-threat-section {
+ margin-bottom: 16px;
+}
+
+.tips-threat-label {
+ font-size: 13px;
+ font-weight: 600;
+ color: #f87171;
+ margin-bottom: 8px;
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.tips-list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+}
+
+.tips-list li {
+ font-size: 13px;
+ color: var(--text-secondary, #94a3b8);
+ padding: 8px 12px;
+ background: rgba(255,255,255,0.04);
+ border-radius: 8px;
+ line-height: 1.5;
+}
+
+.tips-list li::before {
+ content: '→ ';
+ color: #f87171;
+ font-weight: 700;
+}
+
+.tips-footer-note {
+ font-size: 12px;
+ color: #64748b;
+ margin-top: 12px;
+ padding-top: 12px;
+ border-top: 1px solid rgba(255,255,255,0.06);
+}
+
+.tips-footer-note a {
+ color: #00ffb4;
+ text-decoration: none;
+}
+
+.tips-footer-note a:hover {
+ text-decoration: underline;
+}
+
+.tips-general-tip {
+ font-size: 14px;
+ color: var(--text-secondary, #94a3b8);
+ line-height: 1.6;
+ margin: 0 0 14px 0;
+ transition: opacity 0.2s ease;
+}
+
+.tips-refresh-btn {
+ background: rgba(0,255,180,0.08);
+ border: 1px solid rgba(0,255,180,0.2);
+ color: #00ffb4;
+ padding: 7px 14px;
+ border-radius: 8px;
+ font-size: 13px;
+ cursor: pointer;
+ transition: background 0.2s;
+}
+
+.tips-refresh-btn:hover {
+ background: rgba(0,255,180,0.15);
}
\ No newline at end of file