Skip to content

Commit 961ec41

Browse files
committed
Set DE as default language
1 parent 3d41cac commit 961ec41

File tree

1 file changed

+216
-39
lines changed

1 file changed

+216
-39
lines changed

index.html

Lines changed: 216 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,35 @@
191191
transform: scale(1.2);
192192
}
193193

194+
/* Language Toggle */
195+
.lang-toggle {
196+
display: flex;
197+
background: var(--bg-input);
198+
border-radius: 20px;
199+
padding: 2px;
200+
border: 1px solid var(--border-color);
201+
font-size: 12px;
202+
font-weight: 700;
203+
}
204+
205+
.lang-btn {
206+
padding: 4px 10px;
207+
border-radius: 18px;
208+
border: none;
209+
background: transparent;
210+
color: var(--text-muted);
211+
font-family: inherit;
212+
font-size: 12px;
213+
font-weight: 700;
214+
cursor: pointer;
215+
transition: all .2s;
216+
}
217+
218+
.lang-btn.active {
219+
background: var(--accent-gradient);
220+
color: white;
221+
}
222+
194223
/* ========== SEARCH SCREEN ========== */
195224
.search-container {
196225
padding: 20px;
@@ -1284,6 +1313,10 @@
12841313
<header class="header">
12851314
<div class="logo">Bunnygram</div>
12861315
<div class="header-icons">
1316+
<div class="lang-toggle" id="lang-toggle">
1317+
<button class="lang-btn" data-lang="en">EN</button>
1318+
<button class="lang-btn active" data-lang="de">DE</button>
1319+
</div>
12871320
<span class="header-icon">❤️</span>
12881321
<span class="header-icon">✉️</span>
12891322
</div>
@@ -1293,7 +1326,8 @@
12931326
<div class="search-container">
12941327
<div class="search-box" id="search-box">
12951328
<span class="search-icon">🔍</span>
1296-
<input type="text" id="search-input" placeholder="Search for Benny Bunny…" autocomplete="off" />
1329+
<input type="text" id="search-input" placeholder="Search for Benny Bunny…"
1330+
data-i18n-placeholder="searchPlaceholder" autocomplete="off" />
12971331
</div>
12981332
</div>
12991333

@@ -1302,8 +1336,9 @@
13021336

13031337
<!-- Mission Banner -->
13041338
<div class="mission-banner" id="mission-banner">
1305-
<h3>🚨 Mission: Stop the Villain!</h3>
1306-
<p>A sneaky villain named <strong>Benny Bunny</strong> is stealing passwords on Bunnygram! Search for his
1339+
<h3 data-i18n="missionTitle">🚨 Mission: Stop the Villain!</h3>
1340+
<p data-i18n="missionDesc">A sneaky villain named <strong>Benny Bunny</strong> is stealing passwords on
1341+
Bunnygram! Search for his
13071342
profile, find clues, and <strong>lock his account</strong> before he strikes again!</p>
13081343
</div>
13091344

@@ -1417,47 +1452,47 @@ <h1 class="profile-name">Benny Bunny 🐰</h1>
14171452

14181453
<!-- Personal Details -->
14191454
<div class="details-card">
1420-
<h3>📋 Personal Details</h3>
1455+
<h3 data-i18n="personalDetails">📋 Personal Details</h3>
14211456
<div class="detail-row">
14221457
<span class="detail-icon">🎂</span>
1423-
<span class="detail-label">Birthday</span>
1424-
<span class="detail-value">March 15</span>
1458+
<span class="detail-label" data-i18n="lblBirthday">Birthday</span>
1459+
<span class="detail-value" data-i18n="valBirthday">March 15</span>
14251460
</div>
14261461
<div class="detail-row">
14271462
<span class="detail-icon">🐱</span>
1428-
<span class="detail-label">Pet</span>
1429-
<span class="detail-value">Cat named "Carrot"</span>
1463+
<span class="detail-label" data-i18n="lblPet">Pet</span>
1464+
<span class="detail-value" data-i18n="valPet">Cat named "Carrot"</span>
14301465
</div>
14311466
<div class="detail-row">
14321467
<span class="detail-icon">🥕</span>
1433-
<span class="detail-label">Favorite food</span>
1434-
<span class="detail-value">Carrots</span>
1468+
<span class="detail-label" data-i18n="lblFood">Favorite food</span>
1469+
<span class="detail-value" data-i18n="valFood">Carrots</span>
14351470
</div>
14361471
<div class="detail-row">
14371472
<span class="detail-icon">🏫</span>
1438-
<span class="detail-label">School</span>
1439-
<span class="detail-value">Sunny Meadow School</span>
1473+
<span class="detail-label" data-i18n="lblSchool">School</span>
1474+
<span class="detail-value" data-i18n="valSchool">Sunny Meadow School</span>
14401475
</div>
14411476
<div class="detail-row">
14421477
<span class="detail-icon">📍</span>
1443-
<span class="detail-label">Location</span>
1444-
<span class="detail-value">Carrot Valley</span>
1478+
<span class="detail-label" data-i18n="lblLocation">Location</span>
1479+
<span class="detail-value" data-i18n="valLocation">Carrot Valley</span>
14451480
</div>
14461481
<div class="detail-row">
14471482
<span class="detail-icon">🎨</span>
1448-
<span class="detail-label">Fav color</span>
1449-
<span class="detail-value">Orange</span>
1483+
<span class="detail-label" data-i18n="lblColor">Fav color</span>
1484+
<span class="detail-value" data-i18n="valColor">Orange</span>
14501485
</div>
14511486
<div class="detail-row">
14521487
<span class="detail-icon">🎮</span>
1453-
<span class="detail-label">Interest</span>
1488+
<span class="detail-label" data-i18n="lblInterest">Interest</span>
14541489
<span class="detail-value">Hop Game</span>
14551490
</div>
14561491
</div>
14571492

14581493
<!-- Action Buttons -->
1459-
<button class="send-msg-btn" id="send-msg-btn">✉️ Send Message to Benny</button>
1460-
<button class="lock-btn" id="lock-btn">🔒 Lock Benny's Account</button>
1494+
<button class="send-msg-btn" id="send-msg-btn" data-i18n="sendMsgBtn">✉️ Send Message to Benny</button>
1495+
<button class="lock-btn" id="lock-btn" data-i18n="lockBtn">🔒 Lock Benny's Account</button>
14611496

14621497
<!-- Posts feed -->
14631498
<div class="profile-posts-label">📸 Posts</div>
@@ -1632,36 +1667,37 @@ <h3>🎣 What is Phishing?</h3>
16321667
</ul>
16331668
</div>
16341669

1635-
<button class="use-pw-btn" id="use-pw-btn">🔒 Use Password to Lock Benny's Account</button>
1670+
<button class="use-pw-btn" id="use-pw-btn" data-i18n="usePwBtn">🔒 Use Password to Lock Benny's Account</button>
16361671
</div>
16371672
</div>
16381673

16391674
<!-- ==================== SCREEN 7: LOCK / PASSWORD ==================== -->
16401675
<div id="screen-lock" class="screen">
16411676
<header class="header">
16421677
<span class="back-link" id="back-to-profile" style="margin:0;font-size:22px;">⬅️</span>
1643-
<div class="logo" style="font-size:20px;">Lock Account</div>
1678+
<div class="logo" style="font-size:20px;" data-i18n="lockAccountTitle">Lock Account</div>
16441679
<span style="width:30px;"></span>
16451680
</header>
16461681

16471682
<div class="lock-screen">
16481683
<span class="lock-emoji">🔐</span>
1649-
<h2>Guess Benny's Password</h2>
1650-
<p class="subtitle">Use the clues from Benny's profile to figure out his password and lock his account for good!
1684+
<h2 data-i18n="guessTitle">Guess Benny's Password</h2>
1685+
<p class="subtitle" data-i18n="guessSubtitle">Use the clues from Benny's profile to figure out his password and
1686+
lock his account for good!
16511687
</p>
16521688

16531689
<div class="password-form">
16541690
<div class="password-input-wrap">
16551691
<input type="password" class="password-input" id="password-input" placeholder="Type the password…"
1656-
autocomplete="off" />
1692+
data-i18n-placeholder="pwPlaceholder" autocomplete="off" />
16571693
<button class="toggle-pw" id="toggle-pw" type="button">👁️</button>
16581694
</div>
1659-
<button class="submit-pw" id="submit-pw">🔓 Try Password</button>
1695+
<button class="submit-pw" id="submit-pw" data-i18n="tryPwBtn">🔓 Try Password</button>
16601696
<p class="attempts-counter" id="attempts-counter"></p>
16611697
<div id="hint-container"></div>
16621698
</div>
16631699

1664-
<a class="back-link" id="back-to-profile-2">⬅️ Back to Benny's profile</a>
1700+
<a class="back-link" id="back-to-profile-2" data-i18n="backToProfile">⬅️ Back to Benny's profile</a>
16651701
</div>
16661702
</div>
16671703

@@ -1676,30 +1712,165 @@ <h2>Guess Benny's Password</h2>
16761712

16771713
<div class="success-screen">
16781714
<span class="success-icon">🎉</span>
1679-
<h2>Account Locked!</h2>
1680-
<p class="success-msg">
1715+
<h2 data-i18n="accountLocked">Account Locked!</h2>
1716+
<p class="success-msg" data-i18n="successMsg">
16811717
Amazing work, detective! 🕵️ You guessed Benny's password and locked his account. No more password stealing!
16821718
</p>
16831719

16841720
<div class="lesson-card">
1685-
<h3>🧠 What Did We Learn?</h3>
1721+
<h3 data-i18n="lessonTitle">🧠 What Did We Learn?</h3>
16861722
<ul>
1687-
<li><span></span> Never use your birthday, pet's name, or favorite things as your password.</li>
1688-
<li><span></span> Don't use easy numbers like 123 or your lucky number.</li>
1689-
<li><span></span> Use long, random passwords that are hard to guess.</li>
1690-
<li><span></span> Mix uppercase letters, lowercase letters, numbers, and symbols!</li>
1691-
<li><span></span> Use a different password for every account.</li>
1692-
<li><span>🔐</span> Ask a grown-up to help you use a password manager!</li>
1723+
<li><span></span> <span data-i18n="lesson1">Never use your birthday, pet's name, or favorite things as your
1724+
password.</span></li>
1725+
<li><span></span> <span data-i18n="lesson2">Don't use easy numbers like 123 or your lucky number.</span>
1726+
</li>
1727+
<li><span></span> <span data-i18n="lesson3">Use long, random passwords that are hard to guess.</span></li>
1728+
<li><span></span> <span data-i18n="lesson4">Mix uppercase letters, lowercase letters, numbers, and
1729+
symbols!</span></li>
1730+
<li><span></span> <span data-i18n="lesson5">Use a different password for every account.</span></li>
1731+
<li><span>🔐</span> <span data-i18n="lesson6">Ask a grown-up to help you use a password manager!</span></li>
16931732
</ul>
16941733
</div>
16951734

1696-
<button class="restart-btn" id="restart-btn">🔄 Play Again</button>
1735+
<button class="restart-btn" id="restart-btn" data-i18n="playAgain">🔄 Play Again</button>
16971736
</div>
16981737
</div>
16991738

17001739
</div>
17011740

17021741
<script>
1742+
// ==================== i18n / Language Toggle ====================
1743+
let currentLang = 'de';
1744+
1745+
const translations = {
1746+
en: {
1747+
searchPlaceholder: 'Search for Benny Bunny…',
1748+
missionTitle: '🚨 Mission: Stop the Villain!',
1749+
missionDesc: 'A sneaky villain named <strong>Benny Bunny</strong> is stealing passwords on Bunnygram! Search for his profile, find clues, and <strong>lock his account</strong> before he strikes again!',
1750+
personalDetails: '📋 Personal Details',
1751+
lblBirthday: 'Birthday', valBirthday: 'March 15',
1752+
lblPet: 'Pet', valPet: 'Cat named "Carrot"',
1753+
lblFood: 'Favorite food', valFood: 'Carrots',
1754+
lblSchool: 'School', valSchool: 'Sunny Meadow School',
1755+
lblLocation: 'Location', valLocation: 'Carrot Valley',
1756+
lblColor: 'Fav color', valColor: 'Orange',
1757+
lblLucky: 'Lucky number',
1758+
lblInterest: 'Interest',
1759+
sendMsgBtn: '✉️ Send Message to Benny',
1760+
lockBtn: '🔒 Lock Benny\'s Account',
1761+
lockAccountTitle: 'Lock Account',
1762+
guessTitle: 'Guess Benny\'s Password',
1763+
guessSubtitle: 'Use the clues from Benny\'s profile to figure out his password and lock his account for good!',
1764+
pwPlaceholder: 'Type the password…',
1765+
tryPwBtn: '🔓 Try Password',
1766+
backToProfile: '⬅️ Back to Benny\'s profile',
1767+
accountLocked: 'Account Locked!',
1768+
successMsg: 'Amazing work, detective! 🕵️ You guessed Benny\'s password and locked his account. No more password stealing!',
1769+
lessonTitle: '🧠 What Did We Learn?',
1770+
lesson1: 'Never use your birthday, pet\'s name, or favorite things as your password.',
1771+
lesson2: 'Don\'t use easy numbers like 123 or your lucky number.',
1772+
lesson3: 'Use long, random passwords that are hard to guess.',
1773+
lesson4: 'Mix uppercase letters, lowercase letters, numbers, and symbols!',
1774+
lesson5: 'Use a different password for every account.',
1775+
lesson6: 'Ask a grown-up to help you use a password manager!',
1776+
playAgain: '🔄 Play Again',
1777+
pwStolen: 'Password Stolen!',
1778+
pwStolenDesc: 'Benny fell for the phishing trick! He typed his real password into a <strong>fake website</strong>. Now we have it and can lock his account!',
1779+
bennysPw: 'Benny\'s Password',
1780+
phishTitle: '🎣 What is Phishing?',
1781+
phish1: 'Phishing is when someone sends a <strong>fake message</strong> with a link to a <strong>fake website</strong>.',
1782+
phish2: 'The fake website looks real but steals your password when you type it in.',
1783+
phish3: 'Never click links from strangers or enter your password on unfamiliar sites.',
1784+
phish4: 'Always check the website address (URL) before entering any information!',
1785+
phish5: 'If something seems too good to be true, it probably is!',
1786+
usePwBtn: '🔒 Use Password to Lock Benny\'s Account',
1787+
hint1: '💡 Hint 1: Think about Benny\'s favourite food… What does he love to eat? 🥕',
1788+
hint2: '💡 Hint 2: Benny has a lucky number. Look at his profile details! 🔢',
1789+
hint3: '💡 Hint 3: Put his favourite food and lucky number together! (e.g. something + numbers) 🤫',
1790+
wrongAttempt: 'Attempt {n} — That\'s not it! Try again 💪',
1791+
needClue: 'Need a clue?',
1792+
},
1793+
de: {
1794+
searchPlaceholder: 'Suche nach Benny Bunny…',
1795+
missionTitle: '🚨 Mission: Stoppt den Bösewicht!',
1796+
missionDesc: 'Ein hinterhältiger Bösewicht namens <strong>Benny Bunny</strong> stiehlt Passwörter auf Bunnygram! Suche sein Profil, finde Hinweise und <strong>sperre sein Konto</strong>, bevor er wieder zuschlägt!',
1797+
personalDetails: '📋 Persönliche Daten',
1798+
lblBirthday: 'Geburtstag', valBirthday: '15. März',
1799+
lblPet: 'Haustier', valPet: 'Katze namens „Carrot"',
1800+
lblFood: 'Lieblingsessen', valFood: 'Karotten',
1801+
lblSchool: 'Schule', valSchool: 'Sonnige-Wiesen-Schule',
1802+
lblLocation: 'Standort', valLocation: 'Karottental',
1803+
lblColor: 'Lieblingsfarbe', valColor: 'Orange',
1804+
lblLucky: 'Glückszahl',
1805+
lblInterest: 'Interesse',
1806+
sendMsgBtn: '✉️ Nachricht an Benny senden',
1807+
lockBtn: '🔒 Bennys Konto sperren',
1808+
lockAccountTitle: 'Konto sperren',
1809+
guessTitle: 'Errate Bennys Passwort',
1810+
guessSubtitle: 'Nutze die Hinweise aus Bennys Profil, um sein Passwort herauszufinden und sein Konto endgültig zu sperren!',
1811+
pwPlaceholder: 'Passwort eingeben…',
1812+
tryPwBtn: '🔓 Passwort testen',
1813+
backToProfile: '⬅️ Zurück zu Bennys Profil',
1814+
accountLocked: 'Konto gesperrt!',
1815+
successMsg: 'Super Arbeit, Detektiv! 🕵️ Du hast Bennys Passwort erraten und sein Konto gesperrt. Kein Passwort-Diebstahl mehr!',
1816+
lessonTitle: '🧠 Was haben wir gelernt?',
1817+
lesson1: 'Verwende niemals deinen Geburtstag, den Namen deines Haustiers oder Lieblingsdinge als Passwort.',
1818+
lesson2: 'Benutze keine einfachen Zahlen wie 123 oder deine Glückszahl.',
1819+
lesson3: 'Verwende lange, zufällige Passwörter, die schwer zu erraten sind.',
1820+
lesson4: 'Mische Großbuchstaben, Kleinbuchstaben, Zahlen und Symbole!',
1821+
lesson5: 'Verwende für jedes Konto ein anderes Passwort.',
1822+
lesson6: 'Bitte einen Erwachsenen, dir bei einem Passwort-Manager zu helfen!',
1823+
playAgain: '🔄 Nochmal spielen',
1824+
pwStolen: 'Passwort gestohlen!',
1825+
pwStolenDesc: 'Benny ist auf den Phishing-Trick hereingefallen! Er hat sein echtes Passwort auf einer <strong>gefälschten Webseite</strong> eingegeben. Jetzt können wir sein Konto sperren!',
1826+
bennysPw: 'Bennys Passwort',
1827+
phishTitle: '🎣 Was ist Phishing?',
1828+
phish1: 'Phishing ist, wenn jemand eine <strong>gefälschte Nachricht</strong> mit einem Link zu einer <strong>gefälschten Webseite</strong> schickt.',
1829+
phish2: 'Die gefälschte Webseite sieht echt aus, aber stiehlt dein Passwort, wenn du es eingibst.',
1830+
phish3: 'Klicke niemals auf Links von Fremden und gib dein Passwort nicht auf unbekannten Seiten ein.',
1831+
phish4: 'Überprüfe immer die Webadresse (URL), bevor du Informationen eingibst!',
1832+
phish5: 'Wenn etwas zu gut klingt, um wahr zu sein, ist es das wahrscheinlich auch!',
1833+
usePwBtn: '🔒 Passwort verwenden, um Bennys Konto zu sperren',
1834+
hint1: '💡 Hinweis 1: Denke an Bennys Lieblingsessen… Was isst er am liebsten? 🥕',
1835+
hint2: '💡 Hinweis 2: Benny hat eine Glückszahl. Schau dir seine Profil-Details an! 🔢',
1836+
hint3: '💡 Hinweis 3: Kombiniere sein Lieblingsessen und seine Glückszahl! (z.B. etwas + Zahlen) 🤫',
1837+
wrongAttempt: 'Versuch {n} — Das war\'s nicht! Versuch es nochmal 💪',
1838+
needClue: 'Brauchst du einen Hinweis?',
1839+
}
1840+
};
1841+
1842+
function applyLanguage(lang) {
1843+
currentLang = lang;
1844+
const t = translations[lang];
1845+
1846+
// Update all data-i18n elements
1847+
document.querySelectorAll('[data-i18n]').forEach(el => {
1848+
const key = el.getAttribute('data-i18n');
1849+
if (t[key]) el.innerHTML = t[key];
1850+
});
1851+
1852+
// Update all data-i18n-placeholder elements
1853+
document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
1854+
const key = el.getAttribute('data-i18n-placeholder');
1855+
if (t[key]) el.placeholder = t[key];
1856+
});
1857+
1858+
// Update toggle button styles
1859+
document.querySelectorAll('.lang-btn').forEach(btn => {
1860+
btn.classList.toggle('active', btn.dataset.lang === lang);
1861+
});
1862+
}
1863+
1864+
// Language toggle handler
1865+
document.getElementById('lang-toggle').addEventListener('click', (e) => {
1866+
if (e.target.classList.contains('lang-btn')) {
1867+
applyLanguage(e.target.dataset.lang);
1868+
}
1869+
});
1870+
1871+
// Apply default language on load
1872+
applyLanguage('de');
1873+
17031874
// ==================== Screen Navigation ====================
17041875
const screens = {
17051876
home: document.getElementById('screen-home'),
@@ -1895,6 +2066,11 @@ <h4>Benny Bunny <span class="villain-badge">VILLAIN</span></h4>
18952066
"💡 Hint 3: Put his favourite food and lucky number together! (e.g. something + numbers) 🤫",
18962067
];
18972068

2069+
function getHint(index) {
2070+
const t = translations[currentLang];
2071+
return [t.hint1, t.hint2, t.hint3][index] || hints[index];
2072+
}
2073+
18982074
async function sha256(message) {
18992075
const msgBuffer = new TextEncoder().encode(message);
19002076
const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);
@@ -1936,14 +2112,15 @@ <h4>Benny Bunny <span class="villain-badge">VILLAIN</span></h4>
19362112
passwordInput.classList.add('error');
19372113
setTimeout(() => passwordInput.classList.remove('error'), 400);
19382114

1939-
attemptsCounter.textContent = `Attempt ${attempts} — That's not it! Try again 💪`;
2115+
const t = translations[currentLang];
2116+
attemptsCounter.textContent = t.wrongAttempt.replace('{n}', attempts);
19402117
attemptsCounter.style.color = '#ef4444';
19412118

19422119
if (attempts <= maxHints) {
19432120
hintContainer.innerHTML = `
19442121
<div class="hint-box">
1945-
<h4>Need a clue?</h4>
1946-
<p>${hints[attempts - 1]}</p>
2122+
<h4>${t.needClue}</h4>
2123+
<p>${getHint(attempts - 1)}</p>
19472124
</div>
19482125
`;
19492126
}

0 commit comments

Comments
 (0)