From ec49bbe436879afba106792cab7b30dd3ff51b6c Mon Sep 17 00:00:00 2001 From: Muzahid Hossen Date: Fri, 24 Oct 2025 02:31:19 +0600 Subject: [PATCH] Add files via upload --- data/awareness-tips.json | 114 +++++++++ data/localization.json | 242 +++++++++++++++++++ data/openai-key.json | 3 + index.html | 54 +++++ pages/awareness.html | 40 ++++ pages/chatbot.html | 43 ++++ pages/password-analyzer.html | 31 +++ pages/phishing-checker.html | 27 +++ script.js | 446 +++++++++++++++++++++++++++++++++++ style.css | 428 +++++++++++++++++++++++++++++++++ 10 files changed, 1428 insertions(+) create mode 100644 data/awareness-tips.json create mode 100644 data/localization.json create mode 100644 data/openai-key.json create mode 100644 index.html create mode 100644 pages/awareness.html create mode 100644 pages/chatbot.html create mode 100644 pages/password-analyzer.html create mode 100644 pages/phishing-checker.html create mode 100644 script.js create mode 100644 style.css diff --git a/data/awareness-tips.json b/data/awareness-tips.json new file mode 100644 index 0000000..8e1a5fd --- /dev/null +++ b/data/awareness-tips.json @@ -0,0 +1,114 @@ +[ + { + "title": "Use Strong Passwords", + "content": "Create passwords with at least 12 characters, including uppercase, lowercase, numbers, and symbols. Avoid using personal info." + }, + { + "title": "Enable Two-Factor Authentication (2FA)", + "content": "Always turn on 2FA for your accounts. Even if someone gets your password, they can't log in without the second step." + }, + { + "title": "Think Before You Click", + "content": "Never click links from unknown emails or messages. Hover over links to see the real URL before clicking." + }, + { + "title": "Use HTTPS Websites", + "content": "Only enter sensitive information on websites that start with 'https://' and show a padlock icon." + }, + { + "title": "Keep Software Updated", + "content": "Regularly update your phone, apps, and antivirus. Updates fix security holes that hackers can exploit." + }, + { + "title": "Avoid Public Wi-Fi for Sensitive Tasks", + "content": "Don't do banking or login on public Wi-Fi. Use a VPN if you must connect." + }, + { + "title": "Be Careful with Email Attachments", + "content": "Don't open attachments from unknown senders. They may contain malware." + }, + { + "title": "Use Antivirus Software", + "content": "Install and keep updated a reputable antivirus program to protect against viruses and malware." + }, + { + "title": "Use Strong Passwords", + "content": "Create passwords with at least 12 characters, including uppercase, lowercase, numbers, and symbols. Avoid using personal info." + }, + { + "title": "Enable Two-Factor Authentication (2FA)", + "content": "Always turn on 2FA for your accounts. Even if someone gets your password, they can't log in without the second step." + }, + { + "title": "Think Before You Click", + "content": "Never click links from unknown emails or messages. Hover over links to see the real URL before clicking." + }, + { + "title": "Use HTTPS Websites", + "content": "Only enter sensitive information on websites that start with 'https://' and show a padlock icon." + }, + { + "title": "Keep Software Updated", + "content": "Regularly update your phone, apps, and antivirus. Updates fix security holes that hackers can exploit." + }, + { + "title": "Avoid Public Wi-Fi for Sensitive Tasks", + "content": "Don't do banking or login on public Wi-Fi. Use a VPN if you must connect." + }, + { + "title": "Be Careful with Email Attachments", + "content": "Don't open attachments from unknown senders. They may contain malware." + }, + { + "title": "Use Antivirus Software", + "content": "Install and keep updated a reputable antivirus program to protect against viruses and malware." + }, + { + "title": "Don’t Share Personal Info Online", + "content": "Avoid sharing ID numbers, bank details, or home address on social media or unknown sites." + }, + { + "title": "Use a Password Manager", + "content": "Store strong, unique passwords for each account using a trusted password manager." + }, + { + "title": "Beware of Phishing Emails", + "content": "Scammers pretend to be banks or companies. Never enter login details on pop-up forms." + }, + { + "title": "Lock Your Devices", + "content": "Use PIN, fingerprint, or face ID to lock your phone and laptop. Enable auto-lock after 1 minute." + }, + { + "title": "Backup Your Data", + "content": "Regularly back up important files to cloud or external drive. Ransomware can lock your data." + }, + { + "title": "Use VPN on Public Networks", + "content": "A VPN encrypts your internet traffic, protecting you from hackers on public Wi-Fi." + }, + { + "title": "Limit App Permissions", + "content": "Only allow apps to access camera, location, or microphone when necessary." + }, + { + "title": "Avoid Free 'Cracked' Software", + "content": "Pirated apps often contain malware. Download only from official stores." + }, + { + "title": "Use Incognito for Sensitive Searches", + "content": "Private browsing prevents saving history, cookies, or login data." + }, + { + "title": "Report Suspicious Messages", + "content": "Forward spam or phishing SMS to 7726 (in many countries) to help stop scams." + }, + { + "title": "Teach Kids About Online Safety", + "content": "Educate children not to talk to strangers online or share photos without permission." + }, + { + "title": "Monitor Your Online Accounts", + "content": "Regularly check bank and email accounts for unusual activity." + } +] \ No newline at end of file diff --git a/data/localization.json b/data/localization.json new file mode 100644 index 0000000..b9edf6b --- /dev/null +++ b/data/localization.json @@ -0,0 +1,242 @@ +{ + "en": { + "chatbot": { + "title": "AI Cyber Assistant", + "subtitle": "Ask anything about online safety — get instant AI-powered answers!", + "placeholder": "Type your question here...", + "sendBtn": "Send", + "welcome": "Hello! I'm your Cyber Safety Assistant. Ask me anything about online safety.", + "back": "Back to Home" + }, + "phishing": { + "title": "Phishing URL Checker", + "subtitle": "Enter a link to check if it's safe or suspicious.", + "placeholder": "Enter URL here...", + "checkBtn": "Check Now", + "checking": "Checking...", + "safe": "Success: This link seems safe to visit.", + "unsafe": "Warning: This link looks suspicious. Avoid clicking!", + "back": "Back to Home" + }, + "password": { + "title": "Password Strength Analyzer", + "subtitle": "Check how strong your password is.", + "placeholder": "Enter your password...", + "analyzeBtn": "Analyze", + "noPassword": "Please enter a password.", + "weak": "Weak", + "medium": "Medium", + "strong": "Strong", + "great": "Great! Your password is strong.", + "tips": "Tips:" + }, + "awareness": { + "title": "Cyber Awareness Tips", + "subtitle": "Learn how to stay safe and smart online.", + "search": "Search tips...", + "back": "Back to Home" + }, + "tips": [ + { + "title": "Use Strong Passwords", + "content": "Create passwords with at least 12 characters — mix uppercase, lowercase, numbers, and symbols. Avoid personal info." + }, + { + "title": "Enable Two-Factor Authentication (2FA)", + "content": "Turn on 2FA for all accounts. Even if password is stolen, hackers can't log in." + }, + { + "title": "Think Before You Click", + "content": "Never click links in unknown emails or messages. Hover to see the real URL." + }, + { + "title": "Use HTTPS Websites", + "content": "Only enter sensitive info on sites starting with 'https://' and showing a lock icon." + }, + { + "title": "Keep Software Updated", + "content": "Regularly update phone, apps, and antivirus. Old software has security holes." + }, + { + "title": "Be Careful on Public Wi-Fi", + "content": "Avoid banking or logging in on public Wi-Fi. Use a VPN if needed." + }, + { + "title": "Open Email Attachments Carefully", + "content": "Never open attachments from unknown senders. They may contain malware." + }, + { + "title": "Use Antivirus Software", + "content": "Install trusted antivirus and keep it updated." + }, + { + "title": "Don't Share Personal Info", + "content": "Never share ID number, bank details, or address on unknown sites or social media." + }, + { + "title": "Use a Password Manager", + "content": "Store unique strong passwords for each account using a trusted manager." + }, + { + "title": "Beware of Phishing Emails", + "content": "Fake emails pretending to be from banks or companies. Never enter login info in pop-ups." + }, + { + "title": "Lock Your Devices", + "content": "Use PIN, fingerprint, or face ID on phone and laptop. Enable auto-lock after 1 minute." + }, + { + "title": "Backup Your Data", + "content": "Backup important files to cloud or external drive. Avoid data loss from ransomware." + }, + { + "title": "Use VPN on Public Networks", + "content": "VPN encrypts your internet traffic. Stay safe from hackers on public Wi-Fi." + }, + { + "title": "Limit App Permissions", + "content": "Only allow camera, location, or microphone access when necessary." + }, + { + "title": "Avoid Cracked Software", + "content": "Pirated apps contain malware. Download only from official stores." + }, + { + "title": "Use Incognito Mode", + "content": "Use private browsing for sensitive searches. History and cookies won't be saved." + }, + { + "title": "Report Suspicious Messages", + "content": "Forward spam or phishing SMS to 7726. Help stop scams." + }, + { + "title": "Teach Kids Online Safety", + "content": "Tell children not to talk to strangers or share photos online." + }, + { + "title": "Monitor Your Accounts", + "content": "Regularly check bank and email accounts for unusual activity." + } + ] + }, + "bn": { + "chatbot": { + "title": "এআই সাইবার সহকারী", + "subtitle": "অনলাইন নিরাপত্তা নিয়ে যেকোনো প্রশ্ন করো — তাৎক্ষণিক উত্তর পাও!", + "placeholder": "এখানে প্রশ্ন লিখুন...", + "sendBtn": "পাঠান", + "welcome": "হ্যালো! আমি তোমার সাইবার নিরাপত্তা সহকারী। অনলাইন নিরাপত্তা নিয়ে যেকোনো প্রশ্ন করো।", + "back": "হোমে ফিরে যাও" + }, + "phishing": { + "title": "ফিশিং URL চেকার", + "subtitle": "লিংকটি নিরাপদ না সন্দেহজনক তা যাচাই করো।", + "placeholder": "এখানে URL লিখুন...", + "checkBtn": "এখনই চেক করো", + "checking": "যাচাই করা হচ্ছে...", + "safe": "সফল: এই লিংকটি নিরাপদ বলে মনে হচ্ছে।", + "unsafe": "সতর্কতা: এই লিংকটি সন্দেহজনক। ক্লিক করবেন না!", + "back": "হোমে ফিরুন" + }, + "password": { + "title": "পাসওয়ার্ড শক্তি বিশ্লেষক", + "subtitle": "তোমার পাসওয়ার্ড কতটা শক্তিশালী তা পরীক্ষা করো।", + "placeholder": "তোমার পাসওয়ার্ড লিখুন...", + "analyzeBtn": "বিশ্লেষণ করো", + "noPassword": "একটি পাসওয়ার্ড লিখুন।", + "weak": "দুর্বল", + "medium": "মাঝারি", + "strong": "শক্তিশালী", + "great": "দারুণ! তোমার পাসওয়ার্ড শক্তিশালী।", + "tips": "টিপস:" + }, + "awareness": { + "title": "সাইবার সচেতনতা টিপস", + "subtitle": "অনলাইনে নিরাপদ ও স্মার্ট থাকার উপায় শেখো।", + "search": "টিপস খুঁজুন...", + "back": "হোমে ফিরে যাও" + }, + "tips": [ + { + "title": "শক্তিশালী পাসওয়ার্ড ব্যবহার করুন", + "content": "কমপক্ষে ১২ অক্ষরের পাসওয়ার্ড তৈরি করুন — বড় হাতের, ছোট হাতের, সংখ্যা ও চিহ্ন মিশিয়ে। ব্যক্তিগত তথ্য ব্যবহার করবেন না।" + }, + { + "title": "টু-ফ্যাক্টর অথেনটিকেশন (2FA) চালু করুন", + "content": "সব অ্যাকাউন্টে 2FA চালু রাখুন। পাসওয়ার্ড চুরি হলেও হ্যাকার লগইন করতে পারবে না।" + }, + { + "title": "ক্লিক করার আগে ভাবুন", + "content": "অজানা ইমেইল বা মেসেজের লিংকে ক্লিক করবেন না। লিংকের উপর হোভার করে আসল URL দেখুন।" + }, + { + "title": "HTTPS ওয়েবসাইট ব্যবহার করুন", + "content": "শুধুমাত্র 'https://' দিয়ে শুরু হওয়া ও তালা আইকনযুক্ত সাইটে গোপন তথ্য দিন।" + }, + { + "title": "সফটওয়্যার আপডেট রাখুন", + "content": "ফোন, অ্যাপ ও অ্যান্টিভাইরাস নিয়মিত আপডেট করুন। পুরনো সফটওয়্যারে নিরাপত্তার ফাঁক থাকে।" + }, + { + "title": "পাবলিক Wi-Fi-এ সতর্ক থাকুন", + "content": "পাবলিক Wi-Fi-এ ব্যাংকিং বা লগইন করবেন না। দরকার হলে VPN ব্যবহার করুন।" + }, + { + "title": "ইমেইল অ্যাটাচমেন্ট সাবধানে খুলুন", + "content": "অজানা প্রেরকের অ্যাটাচমেন্ট খুলবেন না। এতে ম্যালওয়্যার থাকতে পারে।" + }, + { + "title": "অ্যান্টিভাইরাস ব্যবহার করুন", + "content": "বিশ্বস্ত অ্যান্টিভাইরাস ইনস্টল করে নিয়মিত আপডেট রাখুন।" + }, + { + "title": "ব্যক্তিগত তথ্য শেয়ার করবেন না", + "content": "আইডি নম্বর, ব্যাংক তথ্য বা ঠিকানা অজানা সাইটে বা সোশ্যাল মিডিয়ায় শেয়ার করবেন না।" + }, + { + "title": "পাসওয়ার্ড ম্যানেজার ব্যবহার করুন", + "content": "প্রতি অ্যাকাউন্টের জন্য আলাদা শক্তিশালী পাসওয়ার্ড সংরক্ষণ করতে বিশ্বস্ত ম্যানেজার ব্যবহার করুন।" + }, + { + "title": "ফিশিং ইমেইল থেকে সাবধান", + "content": "ব্যাংক বা কোম্পানির নামে জাল ইমেইল আসে। লগইন তথ্য কখনো পপ-আপে দিবেন না।" + }, + { + "title": "ডিভাইস লক করুন", + "content": "ফোন ও ল্যাপটপে পিন, ফিঙ্গারপ্রিন্ট বা ফেস আইডি ব্যবহার করুন। ১ মিনিট পর অটো-লক চালু করুন।" + }, + { + "title": "ডেটা ব্যাকআপ রাখুন", + "content": "গুরুত্বপূর্ণ ফাইল ক্লাউড বা এক্সটার্নাল ড্রাইভে ব্যাকআপ করুন। র‍্যানসমওয়্যার আক্রমণে ডেটা হারাবেন না।" + }, + { + "title": "পাবলিক নেটওয়ার্কে VPN ব্যবহার করুন", + "content": "VPN তোমার ইন্টারনেট ট্রাফিক এনক্রিপ্ট করে। পাবলিক Wi-Fi-এ হ্যাকার থেকে রক্ষা পাও।" + }, + { + "title": "অ্যাপের অনুমতি সীমিত করুন", + "content": "ক্যামেরা, লোকেশন বা মাইক্রোফোন শুধু প্রয়োজন হলে অ্যাপকে দিন।" + }, + { + "title": "ফ্রি 'ক্র্যাকড' সফটওয়্যার এড়িয়ে চলুন", + "content": "পাইরেটেড অ্যাপে ম্যালওয়্যার থাকে। শুধু অফিসিয়াল স্টোর থেকে ডাউনলোড করো।" + }, + { + "title": "ইনকগনিটো মোড ব্যবহার করুন", + "content": "গোপন সার্চের জন্য প্রাইভেট ব্রাউজিং ব্যবহার করো। হিস্ট্রি বা কুকি সেভ হবে না।" + }, + { + "title": "সন্দেহজনক মেসেজ রিপোর্ট করুন", + "content": "স্প্যাম বা ফিশিং SMS ৭৭২৬ নম্বরে ফরওয়ার্ড করো। স্ক্যাম বন্ধে সাহায্য করো।" + }, + { + "title": "শিশুদের অনলাইন নিরাপত্তা শেখাও", + "content": "বাচ্চাদের অপরিচিতদের সাথে কথা বলতে বা ছবি শেয়ার করতে নিষেধ করো।" + }, + { + "title": "অ্যাকাউন্ট মনিটর করুন", + "content": "ব্যাংক ও ইমেইল অ্যাকাউন্টে অস্বাভাবিক কার্যকলাপ নিয়মিত চেক করো।" + } + ] + } +} \ No newline at end of file diff --git a/data/openai-key.json b/data/openai-key.json new file mode 100644 index 0000000..c83bb3a --- /dev/null +++ b/data/openai-key.json @@ -0,0 +1,3 @@ +{ + "openai_api_key": "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" +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..4e29777 --- /dev/null +++ b/index.html @@ -0,0 +1,54 @@ + + + + + + Cyber Safety Toolkit + + + + + +
+ +

Cyber Safety Toolkit

+

Your AI-powered companion for online safety

+ +
+
+
+
+ +
+
+ + Phishing Icon +

Phishing Checker

+

Check if a link is safe before you click.

+ + + + Password Icon +

Password Analyzer

+

Test your password strength securely.

+ + + + Chatbot Icon +

AI Chatbot

+

Ask safety questions, get instant answers.

+ + + + Awareness Icon +

Awareness Tips

+

Learn how to stay safe online.

+ +
+
+ + + + diff --git a/pages/awareness.html b/pages/awareness.html new file mode 100644 index 0000000..1d16821 --- /dev/null +++ b/pages/awareness.html @@ -0,0 +1,40 @@ + + + + + + Cyber Awareness Tips | Cyber Safety Toolkit + + + +
+

Cyber Awareness Tips

+

Learn how to stay safe and smart online.

+ + +
+ + +
+
+ +
+
+ +
+ +
+ +
+ + Back to Home +
+ + + + \ No newline at end of file diff --git a/pages/chatbot.html b/pages/chatbot.html new file mode 100644 index 0000000..e2ac048 --- /dev/null +++ b/pages/chatbot.html @@ -0,0 +1,43 @@ + + + + + + AI Chat | Cyber Safety Toolkit + + + +
+

AI Cyber Assistant

+

Ask anything about online safety — get instant AI-powered answers!

+ + +
+ + +
+
+ +
+
+
+ +
+ + +
+
+ + Back to Home +
+ + + + \ No newline at end of file diff --git a/pages/password-analyzer.html b/pages/password-analyzer.html new file mode 100644 index 0000000..997d285 --- /dev/null +++ b/pages/password-analyzer.html @@ -0,0 +1,31 @@ + + + + + + Password Analyzer | Cyber Safety Toolkit + + + + +
+

🔒 Password Strength Analyzer

+

Check how strong your password is.

+
+ +
+
+ + + +
+

+

+
+ + ← Back to Home +
+ + + + diff --git a/pages/phishing-checker.html b/pages/phishing-checker.html new file mode 100644 index 0000000..e01f616 --- /dev/null +++ b/pages/phishing-checker.html @@ -0,0 +1,27 @@ + + + + + + Phishing Checker | Cyber Safety Toolkit + + + +
+

🔍 Phishing URL Checker

+

Enter a link to check if it's safe or suspicious.

+
+ +
+
+ + +

+
+ + ← Back to Home +
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..74da2d1 --- /dev/null +++ b/script.js @@ -0,0 +1,446 @@ +/* ============================== + Cyber Safety Toolkit - script.js + FINAL: API Fixed + Welcome Message + Play Removed for Bangla Tips + ============================== */ + +let currentLang = localStorage.getItem("lang") || "en"; +let translations = {}; +let chatBox = null; +let apiKey = null; // Initialize as null + +// Global addMessage +window.addMessage = function(text, sender) { + if (!chatBox) return; + const msg = document.createElement("div"); + msg.classList.add("message", sender); + msg.innerHTML = text; + chatBox.appendChild(msg); + chatBox.scrollTop = chatBox.scrollHeight; + return msg; +}; + +/* ============================== + TEXT-TO-SPEECH: Play/Stop + ============================== */ + +window.speak = function(text, button) { + if (!('speechSynthesis' in window)) { + alert("Sorry, your browser doesn't support text-to-speech."); + return; + } + + if (window.speechSynthesis.speaking) { + window.speechSynthesis.cancel(); + if (button) { + button.innerHTML = '▶ Play'; + button.classList.remove("playing"); + } + return; + } + + const utterance = new SpeechSynthesisUtterance(text); + utterance.lang = currentLang === "bn" ? "bn-BD" : "en-US"; + utterance.rate = 0.9; + + utterance.onend = () => { + if (button) { + button.innerHTML = '▶ Play'; + button.classList.remove("playing"); + } + }; + + window.speechSynthesis.speak(utterance); + if (button) { + button.innerHTML = '⏹ Stop'; + button.classList.add("playing"); + } +}; + +/* ============================== + DARK MODE: Toggle + System + ============================== */ + +function applyTheme() { + const toggle = document.getElementById("themeToggle"); + if (!toggle) return; + + const saved = localStorage.getItem("theme"); + const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; + const theme = saved || (prefersDark ? "dark" : "light"); + + document.documentElement.setAttribute("data-theme", theme); + localStorage.setItem("theme", theme); + + const slider = toggle.querySelector(".toggle-slider"); + if (slider) { + slider.style.transform = theme === "dark" ? "translateX(26px)" : "translateX(0)"; + slider.style.background = theme === "dark" ? "#ffd700" : "#004aad"; + } +} + +function setupThemeToggle() { + const toggle = document.getElementById("themeToggle"); + if (!toggle) return; + + toggle.addEventListener("click", () => { + const current = document.documentElement.getAttribute("data-theme") || "light"; + const newTheme = current === "dark" ? "light" : "dark"; + + document.documentElement.setAttribute("data-theme", newTheme); + localStorage.setItem("theme", newTheme); + + const slider = toggle.querySelector(".toggle-slider"); + if (slider) { + slider.style.transform = newTheme === "dark" ? "translateX(26px)" : "translateX(0)"; + slider.style.background = newTheme === "dark" ? "#ffd700" : "#004aad"; + } + }); +} + +/* ============================== + LOAD TIPS FROM localization.json + ============================== */ + +async function loadAwarenessTips() { + const tipsContainer = document.getElementById("tipsContainer"); + const searchInput = document.getElementById("searchInput"); + + if (!tipsContainer || !translations[currentLang]) return; + + const tips = translations[currentLang].tips || []; + + let filtered = tips; + + displayTips(filtered); + + if (searchInput) { + searchInput.addEventListener("input", () => { + const query = searchInput.value.toLowerCase(); + filtered = tips.filter(tip => + (tip.title?.toLowerCase().includes(query)) || + (tip.content?.toLowerCase().includes(query)) + ); + displayTips(filtered); + }); + } + + function displayTips(tips) { + tipsContainer.innerHTML = ""; + if (!tips.length) { + tipsContainer.innerHTML = "

No tips found.

"; + return; + } + + tips.forEach(tip => { + const div = document.createElement("div"); + div.classList.add("tip-card"); + + const title = tip.title || ""; + const content = tip.content || ""; + + let audioHTML = ''; + // Add Play button only for English (EN) tips + if (currentLang === "en") { + audioHTML = ` + + `; + } + + div.innerHTML = ` +

${title}

+

${content}

+
${audioHTML}
+ `; + tipsContainer.appendChild(div); + }); + } +} + +// Load OpenAI API Key +async function loadApiKey() { + try { + const res = await fetch("../data/openai-key.json"); + if (!res.ok) throw new Error("API key file not found"); + const data = await res.json(); + apiKey = data.openai_api_key; + console.log("API key loaded successfully."); + } catch (err) { + console.warn("API key failed to load:", err); + apiKey = null; + addMessage("Warning: API key not found. Using fallback responses.", "bot"); + } +} + +// Load translations +async function loadTranslations() { + try { + const res = await fetch("../data/localization.json"); + if (!res.ok) throw new Error("Localization not found"); + translations = await res.json(); + applyLanguage(currentLang); + } catch (err) { + console.error("Failed to load translations:", err); + } +} + +// Apply language +function applyLanguage(lang) { + currentLang = lang; + localStorage.setItem("lang", lang); + + const t = translations[lang] || translations["en"]; + + document.querySelectorAll("[data-lang]").forEach(el => { + const key = el.getAttribute("data-lang"); + const keys = key.split("."); + let value = t; + for (let k of keys) value = value?.[k]; + if (value) el.textContent = value; + }); + + document.querySelectorAll("[data-lang-placeholder]").forEach(el => { + const key = el.getAttribute("data-lang-placeholder"); + const keys = key.split("."); + let value = t; + for (let k of keys) value = value?.[k]; + if (value) el.placeholder = value; + }); + + document.querySelectorAll(".lang-btn").forEach(btn => { + btn.classList.remove("active"); + if (btn.id === `lang-${lang}`) btn.classList.add("active"); + }); + + // Update welcome message when language changes + if (chatBox) { + chatBox.innerHTML = ""; // Clear existing messages + const welcomeText = t?.chatbot?.welcome || "Hello!"; + addMessage(welcomeText, "bot"); + } + + if (window.location.pathname.includes("awareness")) { + loadAwarenessTips(); + } +} + +// Language switcher +document.addEventListener("click", (e) => { + if (e.target.classList.contains("lang-btn")) { + const lang = e.target.id.split("-")[1]; + if (currentLang !== lang) { + applyLanguage(lang); + } + } +}); + +// OpenAI API Call with Fallback +async function callOpenAI(question) { + if (!apiKey) { + return getFallbackResponse(question); + } + + const prompt = currentLang === "bn" + ? `সাইবার নিরাপত্তা বিষয়ে বাংলায় সংক্ষিপ্ত উত্তর দাও: ${question}` + : `Answer briefly in English about cyber safety: ${question}`; + + try { + const res = await fetch("https://api.openai.com/v1/chat/completions", { + method: "POST", + headers: { + "Authorization": `Bearer ${apiKey}`, + "Content-Type": "application/json" + }, + body: JSON.stringify({ + model: "gpt-3.5-turbo", + messages: [{ role: "user", content: prompt }], + temperature: 0.7, + max_tokens: 150 + }) + }); + + if (!res.ok) { + throw new Error(`HTTP ${res.status}: ${res.statusText}`); + } + + const data = await res.json(); + return data.choices[0].message.content.trim(); + } catch (err) { + console.warn("OpenAI API call failed:", err); + addMessage("Error: API call failed. Using fallback response.", "bot"); + return getFallbackResponse(question); + } +} + +// Fallback Response +function getFallbackResponse(question) { + const q = question.toLowerCase(); + if (q.includes("hi") || q.includes("hello") || q.includes("হাই")) { + return currentLang === "bn" + ? "হ্যালো! অনলাইন নিরাপত্তা নিয়ে কী জানতে চাও?" + : "Hi! How can I help you with online safety?"; + } + if (q.includes("phishing") || q.includes("ফিশিং")) { + return currentLang === "bn" + ? "ফিশিং হলো জাল ইমেইল/লিংক।

চেনার উপায়:
• 'https' আছে কিনা
• প্রেরক সন্দেহজনক কিনা" + : "Phishing is a fake email/link.

How to spot:
• Check 'https'
• Suspicious sender"; + } + return currentLang === "bn" + ? "খুব ভালো প্রশ্ন!

থিঙ্ক বিফোর ইউ ক্লিক।" + : "Great question!

Think Before You Click."; +} + +/* ============================== + DOM LOADED + ============================== */ + +document.addEventListener("DOMContentLoaded", async () => { + applyTheme(); + setupThemeToggle(); + + chatBox = document.getElementById("chatBox"); + await loadApiKey(); + await loadTranslations(); + + /* Phishing URL Checker */ + const checkBtn = document.getElementById("checkBtn"); + const urlInput = document.getElementById("urlInput"); + const resultMessage = document.getElementById("resultMessage"); + + if (checkBtn && urlInput && resultMessage) { + checkBtn.addEventListener("click", () => { + const url = urlInput.value.trim(); + if (!url) { + resultMessage.textContent = currentLang === "bn" ? "একটি URL লিখুন।" : "Please enter a URL."; + resultMessage.className = ""; + return; + } + resultMessage.textContent = currentLang === "bn" ? "যাচাই করা হচ্ছে..." : "Checking..."; + resultMessage.className = ""; + + const suspiciousWords = ["login", "verify", "update", "bank", "free", "click", "secure", "account"]; + const isSuspicious = suspiciousWords.some(word => url.toLowerCase().includes(word)); + + setTimeout(() => { + if (isSuspicious) { + resultMessage.innerHTML = currentLang === "bn" + ? "Warning: এই লিংকটি সন্দেহজনক। ক্লিক করবেন না!" + : "Warning: This link looks suspicious. Avoid clicking!"; + resultMessage.className = "unsafe"; + } else { + resultMessage.innerHTML = currentLang === "bn" + ? "Success: এই লিংকটি নিরাপদ বলে মনে হচ্ছে।" + : "Success: This link seems safe to visit."; + resultMessage.className = "safe"; + } + }, 1200); + }); + } + + /* Password Strength Analyzer */ + const analyzeBtn = document.getElementById("analyzeBtn"); + const passwordInput = document.getElementById("passwordInput"); + const strengthText = document.getElementById("strengthText"); + const suggestionText = document.getElementById("suggestionText"); + const strengthBar = document.getElementById("strengthBar"); + + if (analyzeBtn && passwordInput && strengthText && suggestionText && strengthBar) { + analyzeBtn.addEventListener("click", () => { + const password = passwordInput.value; + strengthBar.innerHTML = ""; + strengthText.textContent = ""; + suggestionText.textContent = ""; + + if (!password) { + strengthText.textContent = currentLang === "bn" ? "একটি পাসওয়ার্ড লিখুন।" : "Please enter a password."; + return; + } + + let score = 0; + const feedback = []; + + if (password.length >= 12) score += 2; + else if (password.length >= 8) score += 1; + else feedback.push(currentLang === "bn" ? "কমপক্ষে ৮ অক্ষর ব্যবহার করুন" : "Use at least 8 characters"); + + if (/[A-Z]/.test(password)) score++; + else feedback.push(currentLang === "bn" ? "বড় হাতের অক্ষর যোগ করুন" : "Add uppercase letters"); + + if (/[a-z]/.test(password)) score++; + else feedback.push(currentLang === "bn" ? "ছোট হাতের অক্ষর যোগ করুন" : "Add lowercase letters"); + + if (/[0-9]/.test(password)) score++; + else feedback.push(currentLang === "bn" ? "সংখ্যা যোগ করুন" : "Add numbers"); + + if (/[^A-Za-z0-9]/.test(password)) score++; + else feedback.push(currentLang === "bn" ? "চিহ্ন যোগ করুন (!@#$%)" : "Add symbols (!@#$%)"); + + if (password.length > 0 && !/(name|123|password|abc)/i.test(password)) score++; + else if (password.length > 0) feedback.push(currentLang === "bn" ? "সাধারণ শব্দ এড়িয়ে চলুন" : "Avoid common words"); + + const bar = document.createElement("div"); + bar.style.height = "8px"; + bar.style.borderRadius = "4px"; + bar.style.transition = "all 0.3s"; + + if (score <= 3) { + bar.style.width = "30%"; + bar.style.background = "#f85149"; + strengthText.textContent = currentLang === "bn" ? "দুর্বল" : "Weak"; + strengthText.style.color = "#f85149"; + } else if (score <= 5) { + bar.style.width = "60%"; + bar.style.background = "#f8b500"; + strengthText.textContent = currentLang === "bn" ? "মাঝারি" : "Medium"; + strengthText.style.color = "#f8b500"; + } else { + bar.style.width = "100%"; + bar.style.background = "#3fb950"; + strengthText.textContent = currentLang === "bn" ? "শক্তিশালী" : "Strong"; + strengthText.style.color = "#3fb950"; + } + + strengthBar.appendChild(bar); + + if (feedback.length > 0) { + suggestionText.innerHTML = (currentLang === "bn" ? "টিপস:" : "Tips:") + " " + feedback.slice(0, 3).join(" • "); + } else { + suggestionText.textContent = currentLang === "bn" ? "দারুণ! তোমার পাসওয়ার্ড শক্তিশালী।" : "Great! Your password is strong."; + } + }); + } + + /* Awareness Tips */ + if (window.location.pathname.includes("awareness")) { + loadAwarenessTips(); + } + + /* OpenAI Chatbot */ + const sendBtn = document.getElementById("sendBtn"); + const userInput = document.getElementById("userInput"); + + if (sendBtn && userInput && chatBox) { + sendBtn.addEventListener("click", sendMessage); + userInput.addEventListener("keypress", (e) => { + if (e.key === "Enter") sendMessage(); + }); + userInput.focus(); + + async function sendMessage() { + const question = userInput.value.trim(); + if (!question) return; + + addMessage(question, "user"); + userInput.value = ""; + + const thinkingMsg = addMessage( + currentLang === "bn" ? "টাইপ করা হচ্ছে..." : "Typing...", + "bot" + ); + + const response = await callOpenAI(question); + thinkingMsg.innerHTML = response; + } + } +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..f774933 --- /dev/null +++ b/style.css @@ -0,0 +1,428 @@ +/* ============================== + Cyber Safety Toolkit - style.css + FINAL: Dark Mode + Icons + Play/Stop Audio + CLEAN + ============================== */ + +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); + +/* Light Mode */ +:root { + --bg: #f4f7fb; + --text: #333; + --card: #fff; + --primary: #004aad; + --primary-hover: #0066ff; + --border: #ccc; + --shadow: rgba(0, 0, 0, 0.1); + --input-bg: #fff; + --footer-bg: #004aad; + --footer-text: white; + --chat-user: #004aad; + --chat-bot: #eaeaea; + --chat-bot-text: #333; + --tip-footer-bg: #f0f0f0; +} + +/* Dark Mode */ +[data-theme="dark"] { + --bg: #1a1a1a; + --text: #e0e0e0; + --card: #2d2d2d; + --primary: #4da6ff; + --primary-hover: #66b3ff; + --border: #444; + --shadow: rgba(0, 0, 0, 0.3); + --input-bg: #333; + --footer-bg: #0d1b2a; + --footer-text: #ccc; + --chat-user: #4da6ff; + --chat-bot: #3a3a3a; + --chat-bot-text: #ddd; + --tip-footer-bg: #333; +} + +body { + margin: 0; + font-family: 'Poppins', sans-serif; + background-color: var(--bg); + color: var(--text); + text-align: center; + transition: background-color 0.3s, color 0.3s; +} + +header { + padding: 40px 20px; + position: relative; +} + +.logo { + width: 80px; + height: auto; +} + +h1 { + font-size: 2em; + margin-bottom: 5px; + color: var(--primary); +} + +p { + font-size: 1em; + color: #555; +} + +/* ======================================== + DARK MODE TOGGLE - PERFECT WORKING + ======================================== */ +.theme-toggle { + position: absolute; + top: 20px; + right: 20px; + width: 56px; + height: 30px; + background: var(--card); + border: 1px solid var(--border); + border-radius: 50px; + cursor: pointer; + display: flex; + align-items: center; + padding: 3px; + transition: all 0.3s; + overflow: hidden; +} + +.toggle-slider { + position: relative; + width: 24px; + height: 24px; + background: var(--primary); + border-radius: 50%; + transition: all 0.3s ease; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2px 4px rgba(0,0,0,0.2); +} + +.icon-sun, .icon-moon { + font-size: 14px; + position: absolute; + transition: opacity 0.3s; +} + +.icon-sun { opacity: 1; } +.icon-moon { opacity: 0; } + +[data-theme="dark"] .icon-sun { opacity: 0; } +[data-theme="dark"] .icon-moon { opacity: 1; } + +[data-theme="dark"] .toggle-slider { + transform: translateX(26px); + background: #ffd700; +} + +[data-theme="dark"] .theme-toggle { + background: #333; +} + +/* Features Grid */ +.features { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); + gap: 20px; + padding: 30px; + max-width: 1000px; + margin: auto; +} + +.feature-card { + background: var(--card); + border-radius: 15px; + padding: 25px; + box-shadow: 0 4px 10px var(--shadow); + text-decoration: none; + color: inherit; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.feature-card:hover { + transform: translateY(-5px); + box-shadow: 0 6px 15px var(--shadow); +} + +.feature-card img { + width: 60px; + height: auto; + margin-bottom: 15px; +} + +/* Footer */ +footer { + background-color: var(--footer-bg); + color: var(--footer-text); + padding: 15px 0; + font-size: 0.9em; + margin-top: 40px; +} + +/* Checker Box */ +.checker-box { + background: var(--card); + padding: 40px 20px; + border-radius: 15px; + max-width: 450px; + margin: 50px auto; + box-shadow: 0 4px 10px var(--shadow); +} + +/* Inputs */ +#urlInput, +#passwordInput, +.chat-input input, +.search-box input, +#searchInput { + width: 80%; + padding: 10px; + border-radius: 8px; + border: 1px solid var(--border); + background: var(--input-bg); + color: var(--text); + margin-bottom: 15px; + font-size: 1em; +} + +/* Buttons */ +#checkBtn, +#analyzeBtn, +.chat-input button, +.audio-btn { + padding: 10px 20px; + border: none; + background-color: var(--primary); + color: white; + border-radius: 8px; + cursor: pointer; + font-size: 1em; + transition: 0.2s; + min-width: 100px; +} + +#checkBtn:hover, +#analyzeBtn:hover, +.chat-input button:hover, +.audio-btn:hover { + background-color: var(--primary-hover); +} + +.audio-btn.playing { + background-color: #dc3545; +} + +/* Result */ +#resultMessage { + margin-top: 20px; + font-weight: 600; +} + +.safe { color: #3fb950; } +.unsafe { color: #f85149; } + +#strengthBar { + width: 80%; + height: 10px; + background-color: #444; + border-radius: 5px; + margin: 15px auto; + overflow: hidden; +} + +#strengthBar > div { + height: 100%; + border-radius: 5px; + transition: width 0.3s ease; +} + +#strengthText { + font-weight: 600; + margin-top: 10px; +} + +#suggestionText { + color: #aaa; + font-size: 0.9em; + margin-top: 5px; +} + +/* Back Button */ +.back-btn { + display: inline-block; + margin-top: 30px; + text-decoration: none; + color: var(--primary); + font-weight: 600; +} + +/* Search */ +.search-box, .search-container { + margin: 30px auto; + max-width: 500px; +} + +/* Tips */ +.tips-container, .tips-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 20px; + max-width: 1000px; + margin: auto; + padding: 20px; +} + +.tip-card { + background: var(--card); + border-radius: 12px; + box-shadow: 0 4px 10px var(--shadow); + padding: 20px; + text-align: left; +} + +.tip-card h3 { + color: var(--primary); + margin-bottom: 10px; +} + +.tip-footer { + margin-top: 15px; + text-align: right; + background: var(--tip-footer-bg); + padding: 8px; + border-radius: 6px; +} + +/* Audio Button - Play/Stop */ +.audio-btn { + display: inline-flex; + align-items: center; + gap: 6px; + justify-content: center; +} + +.audio-btn::before { + content: "▶ Play"; + font-size: 14px; +} + +.audio-btn.playing::before { + content: "⏹ Stop"; +} + +/* Chat */ +.chat-container { + max-width: 600px; + margin: 40px auto; + background: var(--card); + border-radius: 12px; + box-shadow: 0 4px 12px var(--shadow); + display: flex; + flex-direction: column; + height: 70vh; + overflow: hidden; +} + +.chat-box { + flex: 1; + padding: 20px; + overflow-y: auto; + text-align: left; +} + +.message { + margin-bottom: 15px; + padding: 10px 14px; + border-radius: 12px; + max-width: 80%; + word-wrap: break-word; +} + +.user { + background: var(--chat-user); + color: white; + margin-left: auto; +} + +.bot { + background: var(--chat-bot); + color: var(--chat-bot-text); + margin-right: auto; +} + +.chat-input { + display: flex; + padding: 10px; + border-top: 1px solid var(--border); + background: #f9f9f9; +} + +[data-theme="dark"] .chat-input { + background: #2a2a2a; +} + +/* Language Switcher */ +.lang-switcher { + margin-top: 15px; + display: flex; + gap: 8px; + justify-content: center; +} + +.lang-btn { + padding: 6px 12px; + border: 1px solid var(--primary); + background: var(--card); + color: var(--primary); + border-radius: 6px; + font-size: 0.9em; + cursor: pointer; + transition: all 0.2s; +} + +.lang-btn.active { + background: var(--primary); + color: white; +} + +.lang-btn:hover:not(.active) { + background: #f0f7ff; +} + +/* Responsive */ +@media (max-width: 600px) { + .features, .tips-container, .tips-grid { + grid-template-columns: 1fr; + padding: 15px; + } + + #urlInput, #passwordInput, .chat-input input, .search-box input, #searchInput { + width: 90%; + } + + .theme-toggle { + top: 15px; + right: 15px; + width: 50px; + height: 28px; + } + + .toggle-slider { + width: 22px; + height: 22px; + } + + [data-theme="dark"] .toggle-slider { + transform: translateX(22px); + } + + .checker-box { + padding: 20px 15px; + } +} \ No newline at end of file