Skip to content

Commit

Permalink
v3.3.2
Browse files Browse the repository at this point in the history 
qol improvements:

- auto dark mode set using device data with manual setting override
- auto language set on device data
- finished translation of private algorithm to the remaining languages
- added faq items for private algorithm
- set title and description based of language set
- noscript header
  • Loading branch information
@mqxym
mqxym committed Nov 9, 2024
1 parent e65a8cd commit 8914151
Show file tree
Hide file tree
Showing 4 changed files with 242 additions and 79 deletions.
6 changes: 3 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# EmojiCrypt Version 3.3.0 🌈
# EmojiCrypt Version 3.3.2 🌈

Your convenient and secure text encryption, where emojis are all that matters.
This repo is hosted here:
Expand All @@ -22,8 +22,8 @@ The idea is to implement a protocol where only you and the receiver knows what t
- Generate emoji keys which look like encrypted messages
- Save keys within the browser
- Site can be added to homescreen on Android and iOS to act as an app (Webapp)
- The web app is available in 7 languages (feel free to improve the automated translations, not all features have been translated yet)
- Dark mode
- The web app is available in 7 languages (feel free to improve the automated translations)
- Auto Dark mode

### Basic Security Information 🔐

Expand Down
111 changes: 92 additions & 19 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -343,6 +343,31 @@ <h5 class="mb-0">
</div>
</div>
</div>
<!-- FAQ Item 25 -->
<div class="card">
<div class="card-header" id="faqHeading25">
<h5 class="mb-0">
<button class="btn faq-button collapsed" type="button" data-toggle="collapse" data-target="#faqCollapse25" aria-expanded="false" aria-controls="faqCollapse25">
<strong id="faqQuestion25">How do I use the private algorithm?</strong>
</button>
</h5>
</div>
<div id="faqCollapse25" class="collapse" aria-labelledby="faqHeading3" data-parent="#faqAccordion">
<div class="card-body">
<span id="faqAnswer25">
To use the private algorithm:
<ul>
<li>Ensure you're on the <strong>Conversion</strong> app (the default app).</li>
<li>Click <strong>💎 Private Algorithm</strong> and generate a key.</li>
<li>You can use the conversion app like before.</li>
<li>Share the link with your receipient.</li>
<li>When the key does not match, the output is gibberish.</li>
<li>The more you use the same key for different messages and the longer the messages are, the easier it is to crack the key.</li>
</ul>
</span>
</div>
</div>
</div>
<!-- FAQ Item 4 -->
<div class="card">
<div class="card-header" id="faqHeading4">
Expand Down Expand Up @@ -795,6 +820,25 @@ <h5 class="card-title">Privacy Policy for NasaEmoji</h5>
{ code: 'fr', name: 'French 🇫🇷' },
{ code: 'ar', name: 'Arabic 🇸🇦' },
];

/**
* Retrieves the matching language code from the global languages array by reading the user set language.
*
* @returns {string|null} The matching language code if found, otherwise `null`.
*/
function getUserLanguageCode() {
// Get the user's preferred language from the browser
const userLanguage = navigator.language || (navigator.languages && navigator.languages[0]) || 'en';

// Extract the primary language code (e.g., 'en' from 'en-US')
const primaryCode = userLanguage.split('-')[0].toLowerCase();

// Find the language with the primary code
const language = languages.find(lang => lang.code.toLowerCase() === primaryCode);

// Return the language code if found, otherwise null
return language ? language.code : null;
}

/**
* Get the language code from the URL parameter 'lang'.
Expand All @@ -819,10 +863,11 @@ <h5 class="card-title">Privacy Policy for NasaEmoji</h5>
* @returns {Object} An object containing languageCode and languageIndex.
*/
function initializeLanguage() {
let languageCode = getLanguageCodeFromURL() || localStorage.getItem('lang') || 'en';
let languageCode = getLanguageCodeFromURL() || localStorage.getItem('lang') || getUserLanguageCode() || 'en';
let languageIndex = getLanguageIndexFromCode(languageCode);

if (languageIndex === -1) {

languageCode = 'en';
languageIndex = 0;
}
Expand Down Expand Up @@ -880,7 +925,7 @@ <h5 class="card-title">Privacy Policy for NasaEmoji</h5>
* @param {number} languageIndex - Index of the current language.
*/
function updateFAQItems(languageIndex) {
const faqItemCount = 24;
const faqItemCount = 25;
for (let i = 1; i <= faqItemCount; i++) {
$(`#faqQuestion${i}`).html(getTranslation(`faqQuestion${i}`, languageIndex));
$(`#faqAnswer${i}`).html(getTranslation(`faqAnswer${i}`, languageIndex));
Expand Down Expand Up @@ -972,11 +1017,22 @@ <h5 class="card-title">Privacy Policy for NasaEmoji</h5>

/**
* Check if dark mode is enabled.
* @returns {boolean} True if dark mode is enabled.
* @returns {boolean} True if dark mode is enabled
*/
function isDarkModeEnabled() {
return localStorage.getItem('darkMode') === 'true';
}

/**
* DarkMode Toggle for site device
*/
function handleDarkModeToggle () {
if (isDarkModeEnabled()) {
disableDarkMode();
} else {
enableDarkMode();
}
}

const darkModeClassToggles = [
{ selector: 'body', classes: 'bg-dark text-light dark-mode' },
Expand All @@ -993,11 +1049,11 @@ <h5 class="card-title">Privacy Policy for NasaEmoji</h5>
{ selector: '.form-control', classes: 'bg-secondary text-light' },
{ selector: 'footer', removeClasses: 'bg-light', classes: 'bg-dark text-light' },
];

/**
* Enable dark mode by adding appropriate classes.
*/
function enableDarkMode() {
function enableDarkMode(fromToggle = false) {
darkModeClassToggles.forEach((item) => {
if (item.removeClasses) {
$(item.selector).removeClass(item.removeClasses);
Expand Down Expand Up @@ -1037,6 +1093,22 @@ <h5 class="card-title">Privacy Policy for NasaEmoji</h5>
localStorage.setItem('darkMode', 'false');
$('#darkModeMenu').html(getTranslation('enableDarkMode', languageIndex));
}

function setAutoDarkMode () {
if (darkModeDeviceIsActive()) {
enableDarkMode();
} else {
disableDarkMode();
}
}
/**
* Get device dark mode information
*
* @returns {boolean} Returns True if device dark mode is enabled
*/
function darkModeDeviceIsActive() {
return (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
}

// =======================================
// Section Transition Handling
Expand Down Expand Up @@ -1224,16 +1296,16 @@ <h5 class="card-title">Privacy Policy for NasaEmoji</h5>

switch (currentMenu) {
case 'encryptSection':
title = 'Encrypt Text with Emojis - Emoji Encryption Tool';
description = 'Securely encrypt and decrypt messages using emojis.';
title = getTranslation('metaTitleEncrypt', languageIndex);
description = getTranslation('metaDescriptionEncrypt', languageIndex);
break;
case 'convertSection':
title = 'Convert Text to Emojis - Emoji Conversion Tool';
description = 'Easily convert your text into emojis and back.';
title = getTranslation('metaTitleConvert', languageIndex);
description = getTranslation('metaTitleEncrypt', languageIndex);
break;
case 'aboutSection':
title = 'About Emoji Encryption Tool';
description = 'Learn more about our emoji encryption and conversion tool.';
title = getTranslation('metaTitleAbout', languageIndex);
description = getTranslation('metaDescriptionAbout', languageIndex);
break;
}

Expand Down Expand Up @@ -1285,17 +1357,17 @@ <h5 class="card-title">Privacy Policy for NasaEmoji</h5>
};

// Dark Mode Toggle
if (isDarkModeEnabled()) {
enableDarkMode();
} else {
disableDarkMode();
}
setAutoDarkMode();

$('#darkModeMenu').click(function () {
if (isDarkModeEnabled()) {
disableDarkMode();
} else {
handleDarkModeToggle()
});

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
if (event.matches) {
enableDarkMode();
} else {
disableDarkMode();
}
});

Expand Down Expand Up @@ -1553,6 +1625,7 @@ <h5 class="card-title">Privacy Policy for NasaEmoji</h5>

// Update the UI language
updateUILanguage();
updateMetadata();

// Update the URL
history.pushState(null, '', href);
Expand Down
2 changes: 1 addition & 1 deletion js/emo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* @returns {string} The current version.
*/
function getVersion() {
return "3.3.0";
return "3.3.2";
}

/*
Expand Down
Loading

0 comments on commit 8914151

Please sign in to comment.