Better UI for both Desktop and Mobile
This commit is contained in:
Tyler
+54
-58
@@ -1,7 +1,7 @@
|
||||
/* ===== Global Reset ===== */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 3px;
|
||||
gap: 6px !important;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -21,21 +21,42 @@ body {
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
#sitemap-section,
|
||||
#password-change-section,
|
||||
#server-update-section,
|
||||
#server-status-section,
|
||||
#server-logs-section,
|
||||
#system-settings-section {
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#sitemap-section li,
|
||||
#server-status-section li {
|
||||
font-size: 0.9em;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
#logContainer {
|
||||
font-size: 0.9em;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 11px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
.button-group,
|
||||
.admin-button-grid {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
align-items: stretch;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button-group button {
|
||||
width: 100%;
|
||||
min-width: unset;
|
||||
max-width: 100%;
|
||||
.button-group button,
|
||||
.admin-button-grid button {
|
||||
min-width: 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
header {
|
||||
@@ -48,7 +69,6 @@ body {
|
||||
.logo-container {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.logo-container img {
|
||||
@@ -77,9 +97,16 @@ body {
|
||||
.admin-button-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.status-list {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ===== Header ===== */
|
||||
header {
|
||||
@@ -99,7 +126,6 @@ header {
|
||||
.logo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px; /* optional: controls spacing between logo and text */
|
||||
}
|
||||
|
||||
.logo-container img {
|
||||
@@ -135,7 +161,6 @@ main {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
padding: 0;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
/* ===== Card Styling ===== */
|
||||
@@ -153,12 +178,22 @@ main {
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0px;
|
||||
max-width: 725px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.status-list {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
|
||||
/* ===== Inputs, Textareas, Selects ===== */
|
||||
|
||||
button,
|
||||
select,
|
||||
input,
|
||||
@@ -182,6 +217,7 @@ input[type="file"] {
|
||||
color: #28E060;
|
||||
text-align: left;
|
||||
transition: 0.3s;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
select {
|
||||
@@ -193,10 +229,6 @@ textarea {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
input[type="password"] {
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
/* ===== File Input Customization ===== */
|
||||
input[type="file"] {
|
||||
border: 2px dashed #28E060;
|
||||
@@ -247,7 +279,6 @@ select:focus {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -287,7 +318,6 @@ button {
|
||||
.admin-button-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--spacer); /* e.g., 20px between rows and columns */
|
||||
justify-items: center;
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
@@ -308,7 +338,6 @@ button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
@@ -376,7 +405,6 @@ button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -524,8 +552,8 @@ footer {
|
||||
select,
|
||||
#input-text,
|
||||
#output-text {
|
||||
width: 100%;
|
||||
max-width: 90%;
|
||||
width: 100% !important;
|
||||
max-width: 90% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -556,7 +584,6 @@ footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
@@ -590,12 +617,6 @@ form {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
form input {
|
||||
min-height: 50px;
|
||||
width: 80%;
|
||||
max-width: 500px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* ===== Section Card Styling ===== */
|
||||
section.card {
|
||||
@@ -620,7 +641,6 @@ section.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 25px;
|
||||
max-width: 725px;
|
||||
width: 100%;
|
||||
@@ -774,7 +794,7 @@ section.card {
|
||||
|
||||
#sitemap-section li,
|
||||
#server-status-section li {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 6px;
|
||||
padding: 8px;
|
||||
background-color: #2c2f33;
|
||||
border-radius: 6px;
|
||||
@@ -810,28 +830,4 @@ section.card {
|
||||
background-color: #1e1e1e;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 0 15px #28E060;
|
||||
}
|
||||
|
||||
/* ===== Mobile Responsive Adjustments ===== */
|
||||
@media (max-width: 768px) {
|
||||
#sitemap-section,
|
||||
#password-change-section,
|
||||
#server-update-section,
|
||||
#server-status-section,
|
||||
#server-logs-section,
|
||||
#system-settings-section {
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#sitemap-section li,
|
||||
#server-status-section li {
|
||||
font-size: 0.9em;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
#logContainer {
|
||||
font-size: 0.9em;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 300 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 235 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 236 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 300 KiB |
+353
-305
@@ -1,305 +1,353 @@
|
||||
/**
|
||||
* UI management module.
|
||||
* Handles user interface interactions and form handling.
|
||||
*/
|
||||
|
||||
import { encryptFile, decryptFile } from './fileops.js';
|
||||
|
||||
// ===== UI Initialization =====
|
||||
export function setupUI() {
|
||||
// Set initial state of remove button to hidden
|
||||
const removeBtn = document.getElementById("remove-file-btn");
|
||||
if (removeBtn) {
|
||||
removeBtn.style.display = "none";
|
||||
}
|
||||
|
||||
initializeEventListeners();
|
||||
}
|
||||
|
||||
// ===== Event Listeners =====
|
||||
function initializeEventListeners() {
|
||||
const elements = {
|
||||
encryptionType: document.getElementById("encryption-type"),
|
||||
inputText: document.getElementById("input-text"),
|
||||
form: document.getElementById("crypto-form"),
|
||||
removeFileBtn: document.getElementById("remove-file-btn"),
|
||||
clearAllBtn: document.getElementById("clear-all-btn"),
|
||||
generateBtn: document.getElementById("generate-btn"),
|
||||
copyPasswordBtn: document.getElementById("copy-btn"),
|
||||
copyOutputBtn: document.getElementById("copy-output-btn"),
|
||||
toggleSwitch: document.getElementById("operation-toggle"),
|
||||
copyShareBtn: document.getElementById("copy-share-btn"),
|
||||
shareLink: document.getElementById("share-link")
|
||||
};
|
||||
|
||||
if (validateElements(elements)) {
|
||||
setupElementListeners(elements);
|
||||
}
|
||||
}
|
||||
|
||||
function validateElements(elements) {
|
||||
return elements.encryptionType && elements.inputText && elements.form &&
|
||||
elements.removeFileBtn && elements.clearAllBtn && elements.generateBtn &&
|
||||
elements.copyPasswordBtn && elements.toggleSwitch;
|
||||
}
|
||||
|
||||
function setupElementListeners(elements) {
|
||||
elements.encryptionType.addEventListener("change", toggleEncryptionOptions);
|
||||
elements.inputText.addEventListener("input", handleInputChange);
|
||||
elements.form.addEventListener("submit", handleSubmit);
|
||||
elements.removeFileBtn.addEventListener("click", removeFile);
|
||||
elements.clearAllBtn.addEventListener("click", clearAll);
|
||||
elements.generateBtn.addEventListener("click", generateRandomPassword);
|
||||
elements.copyPasswordBtn.addEventListener("click", () => copyToClipboard("generated-password", "password-copy-feedback"));
|
||||
elements.copyOutputBtn?.addEventListener("click", () => copyToClipboard("output-text", "output-copy-feedback"));
|
||||
elements.toggleSwitch.addEventListener("change", () => {
|
||||
console.log("Mode:", elements.toggleSwitch.checked ? "Decrypt" : "Encrypt");
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Add file input change listener
|
||||
const fileInput = document.getElementById("file-input");
|
||||
if (fileInput) {
|
||||
fileInput.addEventListener("change", () => {
|
||||
const removeBtn = document.getElementById("remove-file-btn");
|
||||
if (removeBtn) {
|
||||
removeBtn.style.display = fileInput.files.length > 0 ? "inline-block" : "none";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setupShareLinkListeners(elements);
|
||||
}
|
||||
|
||||
function setupShareLinkListeners(elements) {
|
||||
if (elements.copyShareBtn && elements.shareLink) {
|
||||
elements.copyShareBtn.addEventListener("click", () => {
|
||||
const linkText = elements.shareLink.textContent.trim();
|
||||
navigator.clipboard.writeText(linkText).then(() => {
|
||||
const feedback = document.getElementById("shared-link-feedback");
|
||||
if (feedback) {
|
||||
feedback.style.display = "block";
|
||||
feedback.classList.add("show");
|
||||
setTimeout(() => {
|
||||
feedback.classList.remove("show");
|
||||
setTimeout(() => {
|
||||
feedback.style.display = "none";
|
||||
}, 300);
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// ===== UI State Management =====
|
||||
function toggleEncryptionOptions() {
|
||||
const type = document.getElementById("encryption-type").value.trim().toLowerCase();
|
||||
const passwordInputWrapper = document.getElementById("password-input");
|
||||
const fileSection = document.querySelector("#encoding-section #file-section");
|
||||
const isAdvanced = type.includes("advanced");
|
||||
|
||||
if (passwordInputWrapper) {
|
||||
if (isAdvanced) {
|
||||
passwordInputWrapper.classList.remove("hidden");
|
||||
} else {
|
||||
passwordInputWrapper.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
if (fileSection) {
|
||||
if (isAdvanced) {
|
||||
fileSection.classList.remove("hidden");
|
||||
} else {
|
||||
fileSection.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
updateToggleLabels();
|
||||
toggleInputMode();
|
||||
}
|
||||
|
||||
function updateToggleLabels() {
|
||||
const type = document.getElementById("encryption-type")?.value;
|
||||
const leftLabel = document.getElementById("toggle-left-label");
|
||||
const rightLabel = document.getElementById("toggle-right-label");
|
||||
|
||||
if (!type || !leftLabel || !rightLabel) return;
|
||||
|
||||
const isAdvanced = type.toLowerCase().includes("advanced");
|
||||
leftLabel.textContent = isAdvanced ? "Encrypt" : "Encode";
|
||||
rightLabel.textContent = isAdvanced ? "Decrypt" : "Decode";
|
||||
}
|
||||
|
||||
function toggleInputMode() {
|
||||
const fileInput = document.getElementById("file-input");
|
||||
const textValue = document.getElementById("input-text")?.value.trim();
|
||||
const isAdvanced = document.getElementById("encryption-type")?.value === "advanced";
|
||||
|
||||
const textSection = document.getElementById("text-section");
|
||||
const fileSection = document.getElementById("file-section");
|
||||
const removeBtn = document.getElementById("remove-file-btn");
|
||||
|
||||
if (!fileInput || !textSection || !fileSection || !removeBtn) return;
|
||||
|
||||
const fileSelected = fileInput.files.length > 0;
|
||||
|
||||
textSection.style.display = fileSelected ? "none" : "flex";
|
||||
fileSection.style.display = (isAdvanced && !textValue) ? "flex" : "none";
|
||||
removeBtn.style.display = fileSelected ? "inline-block" : "none";
|
||||
}
|
||||
|
||||
// ===== Form Handling =====
|
||||
async function handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const encryptionType = document.getElementById("encryption-type")?.value;
|
||||
const password = document.getElementById("password")?.value;
|
||||
const fileInput = document.getElementById("file-input");
|
||||
const isDecrypt = document.getElementById("operation-toggle").checked;
|
||||
const operation = isDecrypt ? "decrypt" : "encrypt";
|
||||
|
||||
if (!encryptionType || !fileInput) return;
|
||||
|
||||
if (encryptionType === "advanced" && !password) {
|
||||
return alert("Password is required for advanced encryption.");
|
||||
}
|
||||
|
||||
if (fileInput.files.length > 0) {
|
||||
return (operation === "encrypt")
|
||||
? encryptFile(fileInput, password)
|
||||
: decryptFile(fileInput, password);
|
||||
}
|
||||
|
||||
await handleTextOperation(encryptionType, operation, password);
|
||||
}
|
||||
|
||||
async function handleTextOperation(encryptionType, operation, password) {
|
||||
const payload = {
|
||||
"encryption-type": encryptionType,
|
||||
operation: operation,
|
||||
message: document.getElementById("input-text")?.value,
|
||||
password: password
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch("/", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
const data = await response.json();
|
||||
document.getElementById("output-text").value = data.result;
|
||||
} catch (err) {
|
||||
alert("Error processing request: " + err.message);
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Utility Functions =====
|
||||
function removeFile() {
|
||||
const fileInput = document.getElementById("file-input");
|
||||
if (fileInput) fileInput.value = "";
|
||||
const removeBtn = document.getElementById("remove-file-btn");
|
||||
if (removeBtn) removeBtn.style.display = 'none';
|
||||
toggleInputMode();
|
||||
}
|
||||
|
||||
function generateRandomPassword() {
|
||||
const charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+[]{}|;:,.<>?/~";
|
||||
const length = 30;
|
||||
const password = Array.from({ length }, () =>
|
||||
charset.charAt(Math.floor(Math.random() * charset.length))
|
||||
).join("");
|
||||
const passwordField = document.getElementById("generated-password");
|
||||
if (passwordField) {
|
||||
passwordField.value = password;
|
||||
// Check if we should start Pacman
|
||||
checkForPacman();
|
||||
}
|
||||
}
|
||||
|
||||
function copyToClipboard(elementId, feedbackId) {
|
||||
const el = document.getElementById(elementId);
|
||||
const feedback = document.getElementById(feedbackId);
|
||||
|
||||
if (!el || !el.value) return;
|
||||
|
||||
// Create a temporary textarea element
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = el.value;
|
||||
textarea.style.position = 'fixed';
|
||||
textarea.style.opacity = '0';
|
||||
document.body.appendChild(textarea);
|
||||
|
||||
// Select and copy the text
|
||||
textarea.select();
|
||||
textarea.setSelectionRange(0, 99999); // For mobile devices
|
||||
|
||||
try {
|
||||
// Try using the modern clipboard API first
|
||||
navigator.clipboard.writeText(el.value).then(() => {
|
||||
showFeedback(feedback);
|
||||
}).catch(() => {
|
||||
// Fallback to execCommand for older browsers
|
||||
document.execCommand('copy');
|
||||
showFeedback(feedback);
|
||||
});
|
||||
} catch (err) {
|
||||
// Final fallback
|
||||
document.execCommand('copy');
|
||||
showFeedback(feedback);
|
||||
}
|
||||
|
||||
// Clean up
|
||||
document.body.removeChild(textarea);
|
||||
}
|
||||
|
||||
function showFeedback(feedback) {
|
||||
if (feedback) {
|
||||
feedback.style.display = "block";
|
||||
feedback.classList.add("show");
|
||||
setTimeout(() => {
|
||||
feedback.classList.remove("show");
|
||||
setTimeout(() => {
|
||||
feedback.style.display = "none";
|
||||
}, 300);
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
|
||||
function clearAll() {
|
||||
const fields = ["input-text", "output-text", "file-input", "password"];
|
||||
fields.forEach(id => {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.value = "";
|
||||
});
|
||||
removeFile();
|
||||
toggleInputMode();
|
||||
document.getElementById("pacman-section")?.style.setProperty("display", "none");
|
||||
document.getElementById("encoding-section")?.style.setProperty("display", "block");
|
||||
}
|
||||
|
||||
function handleInputChange() {
|
||||
toggleInputMode();
|
||||
checkForPacman();
|
||||
}
|
||||
|
||||
function checkForPacman() {
|
||||
const val = document.getElementById("input-text").value.trim().toLowerCase();
|
||||
const pacSection = document.getElementById("pacman-section");
|
||||
const encSection = document.getElementById("encoding-section");
|
||||
|
||||
if (val.includes("pacman") && pacSection.style.display !== "block") {
|
||||
pacSection.style.display = "block";
|
||||
encSection.style.display = "none";
|
||||
window.startPacman();
|
||||
} else if (pacSection.style.display === "block" && !val.includes("pacman")) {
|
||||
window.exitGame();
|
||||
}
|
||||
}
|
||||
|
||||
function startPacman() { }
|
||||
function exitGame() { }
|
||||
|
||||
|
||||
/**
|
||||
* UI management module.
|
||||
* Handles user interface interactions and form handling.
|
||||
*/
|
||||
|
||||
import { encryptFile, decryptFile } from './fileops.js';
|
||||
|
||||
// ===== UI Initialization =====
|
||||
export function setupUI() {
|
||||
// Set initial state of remove button to hidden
|
||||
const removeBtn = document.getElementById("remove-file-btn");
|
||||
if (removeBtn) {
|
||||
removeBtn.style.display = "none";
|
||||
}
|
||||
|
||||
initializeEventListeners();
|
||||
}
|
||||
|
||||
// ===== Event Listeners =====
|
||||
function initializeEventListeners() {
|
||||
const elements = {
|
||||
encryptionType: document.getElementById("encryption-type"),
|
||||
inputText: document.getElementById("input-text"),
|
||||
form: document.getElementById("crypto-form"),
|
||||
removeFileBtn: document.getElementById("remove-file-btn"),
|
||||
clearAllBtn: document.getElementById("clear-all-btn"),
|
||||
generateBtn: document.getElementById("generate-btn"),
|
||||
copyPasswordBtn: document.getElementById("copy-btn"),
|
||||
copyOutputBtn: document.getElementById("copy-output-btn"),
|
||||
toggleSwitch: document.getElementById("operation-toggle"),
|
||||
copyShareBtn: document.getElementById("copy-share-btn"),
|
||||
shareLink: document.getElementById("share-link")
|
||||
};
|
||||
|
||||
if (validateElements(elements)) {
|
||||
setupElementListeners(elements);
|
||||
}
|
||||
}
|
||||
|
||||
function validateElements(elements) {
|
||||
return elements.encryptionType && elements.inputText && elements.form &&
|
||||
elements.removeFileBtn && elements.clearAllBtn && elements.generateBtn &&
|
||||
elements.copyPasswordBtn && elements.toggleSwitch;
|
||||
}
|
||||
|
||||
function setupElementListeners(elements) {
|
||||
elements.encryptionType.addEventListener("change", toggleEncryptionOptions);
|
||||
elements.inputText.addEventListener("input", handleInputChange);
|
||||
elements.form.addEventListener("submit", handleSubmit);
|
||||
elements.removeFileBtn.addEventListener("click", removeFile);
|
||||
elements.clearAllBtn.addEventListener("click", clearAll);
|
||||
elements.generateBtn.addEventListener("click", generateRandomPassword);
|
||||
elements.copyPasswordBtn.addEventListener("click", () => copyToClipboard("generated-password", "password-copy-feedback"));
|
||||
elements.copyOutputBtn?.addEventListener("click", () => copyToClipboard("output-text", "output-copy-feedback"));
|
||||
elements.toggleSwitch.addEventListener("change", () => {
|
||||
console.log("Mode:", elements.toggleSwitch.checked ? "Decrypt" : "Encrypt");
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Add file input change listener
|
||||
const fileInput = document.getElementById("file-input");
|
||||
if (fileInput) {
|
||||
fileInput.addEventListener("change", () => {
|
||||
const removeBtn = document.getElementById("remove-file-btn");
|
||||
if (removeBtn) {
|
||||
removeBtn.style.display = fileInput.files.length > 0 ? "inline-block" : "none";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setupShareLinkListeners(elements);
|
||||
}
|
||||
|
||||
function setupShareLinkListeners(elements) {
|
||||
if (elements.copyShareBtn && elements.shareLink) {
|
||||
elements.copyShareBtn.addEventListener("click", () => {
|
||||
const linkText = elements.shareLink.textContent.trim();
|
||||
navigator.clipboard.writeText(linkText).then(() => {
|
||||
const feedback = document.getElementById("shared-link-feedback");
|
||||
if (feedback) {
|
||||
feedback.style.display = "block";
|
||||
feedback.classList.add("show");
|
||||
setTimeout(() => {
|
||||
feedback.classList.remove("show");
|
||||
setTimeout(() => {
|
||||
feedback.style.display = "none";
|
||||
}, 300);
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// ===== UI State Management =====
|
||||
function toggleEncryptionOptions() {
|
||||
const type = document.getElementById("encryption-type").value.trim().toLowerCase();
|
||||
const passwordInputWrapper = document.getElementById("password-input");
|
||||
const fileSection = document.querySelector("#encoding-section #file-section");
|
||||
const isAdvanced = type.includes("advanced");
|
||||
|
||||
if (passwordInputWrapper) {
|
||||
if (isAdvanced) {
|
||||
passwordInputWrapper.classList.remove("hidden");
|
||||
} else {
|
||||
passwordInputWrapper.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
if (fileSection) {
|
||||
if (isAdvanced) {
|
||||
fileSection.classList.remove("hidden");
|
||||
} else {
|
||||
fileSection.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
updateToggleLabels();
|
||||
toggleInputMode();
|
||||
}
|
||||
|
||||
function updateToggleLabels() {
|
||||
const type = document.getElementById("encryption-type")?.value;
|
||||
const leftLabel = document.getElementById("toggle-left-label");
|
||||
const rightLabel = document.getElementById("toggle-right-label");
|
||||
|
||||
if (!type || !leftLabel || !rightLabel) return;
|
||||
|
||||
const isAdvanced = type.toLowerCase().includes("advanced");
|
||||
leftLabel.textContent = isAdvanced ? "Encrypt" : "Encode";
|
||||
rightLabel.textContent = isAdvanced ? "Decrypt" : "Decode";
|
||||
}
|
||||
|
||||
function toggleInputMode() {
|
||||
const fileInput = document.getElementById("file-input");
|
||||
const textValue = document.getElementById("input-text")?.value.trim();
|
||||
const isAdvanced = document.getElementById("encryption-type")?.value === "advanced";
|
||||
|
||||
const textSection = document.getElementById("text-section");
|
||||
const fileSection = document.getElementById("file-section");
|
||||
const removeBtn = document.getElementById("remove-file-btn");
|
||||
|
||||
if (!fileInput || !textSection || !fileSection || !removeBtn) return;
|
||||
|
||||
const fileSelected = fileInput.files.length > 0;
|
||||
|
||||
textSection.style.display = fileSelected ? "none" : "flex";
|
||||
fileSection.style.display = (isAdvanced && !textValue) ? "flex" : "none";
|
||||
removeBtn.style.display = fileSelected ? "inline-block" : "none";
|
||||
}
|
||||
|
||||
// ===== Form Handling =====
|
||||
async function handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const encryptionType = document.getElementById("encryption-type")?.value;
|
||||
const password = document.getElementById("password")?.value;
|
||||
const fileInput = document.getElementById("file-input");
|
||||
const isDecrypt = document.getElementById("operation-toggle").checked;
|
||||
const operation = isDecrypt ? "decrypt" : "encrypt";
|
||||
|
||||
if (!encryptionType || !fileInput) return;
|
||||
|
||||
if (encryptionType === "advanced" && !password) {
|
||||
return alert("Password is required for advanced encryption.");
|
||||
}
|
||||
|
||||
if (fileInput.files.length > 0) {
|
||||
return (operation === "encrypt")
|
||||
? encryptFile(fileInput, password)
|
||||
: decryptFile(fileInput, password);
|
||||
}
|
||||
|
||||
await handleTextOperation(encryptionType, operation, password);
|
||||
}
|
||||
|
||||
async function handleTextOperation(encryptionType, operation, password) {
|
||||
const payload = {
|
||||
"encryption-type": encryptionType,
|
||||
operation: operation,
|
||||
message: document.getElementById("input-text")?.value,
|
||||
password: password
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch("/", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
const data = await response.json();
|
||||
document.getElementById("output-text").value = data.result;
|
||||
} catch (err) {
|
||||
alert("Error processing request: " + err.message);
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Utility Functions =====
|
||||
function removeFile() {
|
||||
const fileInput = document.getElementById("file-input");
|
||||
if (fileInput) fileInput.value = "";
|
||||
const removeBtn = document.getElementById("remove-file-btn");
|
||||
if (removeBtn) removeBtn.style.display = 'none';
|
||||
toggleInputMode();
|
||||
}
|
||||
|
||||
function generateRandomPassword() {
|
||||
const charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+[]{}|;:,.<>?/~";
|
||||
const length = 30;
|
||||
const password = Array.from({ length }, () =>
|
||||
charset.charAt(Math.floor(Math.random() * charset.length))
|
||||
).join("");
|
||||
const passwordField = document.getElementById("generated-password");
|
||||
if (passwordField) {
|
||||
passwordField.value = password;
|
||||
// Check if we should start Pacman
|
||||
checkForPacman();
|
||||
}
|
||||
}
|
||||
|
||||
function copyToClipboard(elementId, feedbackId) {
|
||||
const el = document.getElementById(elementId);
|
||||
const feedback = document.getElementById(feedbackId);
|
||||
|
||||
if (!el || !el.value) return;
|
||||
|
||||
// Create a temporary textarea element
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = el.value;
|
||||
textarea.style.position = 'fixed';
|
||||
textarea.style.opacity = '0';
|
||||
document.body.appendChild(textarea);
|
||||
|
||||
// Select and copy the text
|
||||
textarea.select();
|
||||
textarea.setSelectionRange(0, 99999); // For mobile devices
|
||||
|
||||
try {
|
||||
// Try using the modern clipboard API first
|
||||
navigator.clipboard.writeText(el.value).then(() => {
|
||||
showFeedback(feedback);
|
||||
}).catch(() => {
|
||||
// Fallback to execCommand for older browsers
|
||||
document.execCommand('copy');
|
||||
showFeedback(feedback);
|
||||
});
|
||||
} catch (err) {
|
||||
// Final fallback
|
||||
document.execCommand('copy');
|
||||
showFeedback(feedback);
|
||||
}
|
||||
|
||||
// Clean up
|
||||
document.body.removeChild(textarea);
|
||||
}
|
||||
|
||||
function showFeedback(feedback) {
|
||||
if (feedback) {
|
||||
feedback.style.display = "block";
|
||||
feedback.classList.add("show");
|
||||
setTimeout(() => {
|
||||
feedback.classList.remove("show");
|
||||
setTimeout(() => {
|
||||
feedback.style.display = "none";
|
||||
}, 300);
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
|
||||
function clearAll() {
|
||||
const fields = ["input-text", "output-text", "file-input", "password"];
|
||||
fields.forEach(id => {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.value = "";
|
||||
});
|
||||
removeFile();
|
||||
toggleInputMode();
|
||||
document.getElementById("pacman-section")?.style.setProperty("display", "none");
|
||||
document.getElementById("encoding-section")?.style.setProperty("display", "block");
|
||||
}
|
||||
|
||||
function handleInputChange() {
|
||||
toggleInputMode();
|
||||
checkForPacman();
|
||||
}
|
||||
|
||||
function checkForPacman() {
|
||||
const val = document.getElementById("input-text").value.trim().toLowerCase();
|
||||
const pacSection = document.getElementById("pacman-section");
|
||||
const encSection = document.getElementById("encoding-section");
|
||||
|
||||
if (val.includes("pacman") && pacSection.style.display !== "block") {
|
||||
pacSection.style.display = "block";
|
||||
encSection.style.display = "none";
|
||||
window.startPacman();
|
||||
} else if (pacSection.style.display === "block" && !val.includes("pacman")) {
|
||||
window.exitGame();
|
||||
}
|
||||
}
|
||||
function copyShareLink() {
|
||||
const linkEl = document.getElementById("share-link");
|
||||
const feedback = document.getElementById("shared-link-feedback");
|
||||
|
||||
if (!linkEl) return;
|
||||
|
||||
const linkText = linkEl.href || linkEl.textContent.trim();
|
||||
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
navigator.clipboard.writeText(linkText).then(() => {
|
||||
showCopyFeedback(feedback);
|
||||
}).catch(() => {
|
||||
fallbackCopy(linkText, feedback);
|
||||
});
|
||||
} else {
|
||||
fallbackCopy(linkText, feedback);
|
||||
}
|
||||
}
|
||||
|
||||
function fallbackCopy(text, feedbackEl) {
|
||||
const tempInput = document.createElement("input");
|
||||
tempInput.value = text;
|
||||
document.body.appendChild(tempInput);
|
||||
tempInput.select();
|
||||
|
||||
try {
|
||||
document.execCommand("copy");
|
||||
showCopyFeedback(feedbackEl);
|
||||
} catch (err) {
|
||||
alert("Copy failed. Please copy manually.");
|
||||
}
|
||||
|
||||
document.body.removeChild(tempInput);
|
||||
}
|
||||
|
||||
function showCopyFeedback(feedbackEl) {
|
||||
if (!feedbackEl) return;
|
||||
feedbackEl.style.display = "block";
|
||||
feedbackEl.classList.add("show");
|
||||
|
||||
setTimeout(() => {
|
||||
feedbackEl.classList.remove("show");
|
||||
setTimeout(() => {
|
||||
feedbackEl.style.display = "none";
|
||||
}, 300);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
|
||||
function startPacman() { }
|
||||
function exitGame() { }
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user