V .4.1
This commit is contained in:
Tyler
+281
-75
@@ -1,7 +1,7 @@
|
||||
/* ===== Global Reset ===== */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
margin: 3px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@ header {
|
||||
box-shadow: 0 0 15px rgba(0, 255, 153, 0.4);
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 40px !important;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
@@ -48,8 +48,8 @@ main {
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
padding: 20px;
|
||||
gap: 30px;
|
||||
padding: 0;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
/* ===== Card Styling ===== */
|
||||
@@ -68,6 +68,7 @@ main {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0px;
|
||||
max-width: 725px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -79,14 +80,17 @@ input[type="file"] {
|
||||
width: 80%;
|
||||
max-width: 500px;
|
||||
padding: 12px 20px;
|
||||
border: 2px solid #00ff99;
|
||||
border: 1px solid #00ff99;
|
||||
border-radius: 8px;
|
||||
background-color: #2c2f33;
|
||||
color: #00ff99;
|
||||
font-size: 1em;
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
transition: 0.3s;
|
||||
margin:10px auto;
|
||||
}
|
||||
|
||||
select {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
textarea {
|
||||
@@ -122,7 +126,7 @@ input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 8px rgba(0, 255, 153, 0.8);
|
||||
box-shadow: 0 0 10px rgba(0, 255, 153, 0.8);
|
||||
}
|
||||
|
||||
/* ===== Textareas Specific Widths ===== */
|
||||
@@ -136,10 +140,9 @@ select:focus {
|
||||
/* ===== Button Group Styling ===== */
|
||||
.button-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
margin: 10px auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -152,23 +155,34 @@ button {
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
/* margin: 10px auto; */
|
||||
width: auto;
|
||||
min-width: 225px;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #00ff99;
|
||||
color: #121212;
|
||||
box-shadow: 0 0 10px rgba(0, 255, 153, 0.4);
|
||||
}
|
||||
|
||||
.danger-button {
|
||||
background-color: #5f3131;
|
||||
box-shadow: 0 0 20px rgba(185, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.danger-button:hover {
|
||||
background-color: #ff0000;
|
||||
color: #121212;
|
||||
box-shadow: 0 0 40px rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
/* ===== Toggle Switch Styling ===== */
|
||||
.toggle-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -207,15 +221,15 @@ button {
|
||||
/* The circle knob */
|
||||
.slider::before {
|
||||
content: "";
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
background-color: #00ff99;
|
||||
border-radius: 50%;
|
||||
transition: .4s;
|
||||
transform: translateX(4px);
|
||||
transform: translateX(2px);
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 2.5px;
|
||||
left: auto;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
input:checked + .slider::before {
|
||||
@@ -295,9 +309,9 @@ footer {
|
||||
color: #00ff99;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 0 15px rgba(0, 255, 153, 0.4);
|
||||
margin-top: 30px;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
footer a {
|
||||
@@ -309,39 +323,70 @@ footer {
|
||||
color: #ff0066;
|
||||
}
|
||||
|
||||
/* ===== Responsive Tweaks ===== */
|
||||
/* ===== Responsive Design ===== */
|
||||
@media (max-width: 600px) {
|
||||
input, textarea, select, #input-text, #output-text {
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
#input-text,
|
||||
#output-text {
|
||||
width: 100%;
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Copy Feedback Message ===== */
|
||||
.copy-feedback {
|
||||
background-color: #2a2a2a;
|
||||
border: 1px solid #00ff99;
|
||||
.copy-feedback, #shared-link-feedback {
|
||||
background-color: #2c2f33;
|
||||
padding: 6px 12px;
|
||||
margin-top: 6px;
|
||||
border-radius: 6px;
|
||||
color: #00ff99;
|
||||
font-size: 0.9em;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
text-align: center;
|
||||
max-width: 300px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.copy-feedback.show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
.copy-feedback.show, #shared-link-feedback.show {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.share-link-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
#share-link {
|
||||
display: block;
|
||||
background-color: #2c2f33;
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
color: #00ff99;
|
||||
font-size: 0.9em;
|
||||
text-align: center;
|
||||
max-width: 720px;
|
||||
width: 100%;
|
||||
word-break: break-all;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#share-link:hover {
|
||||
color: #00cc77;
|
||||
background-color: #36393f;
|
||||
}
|
||||
|
||||
/* ===== Form Styling ===== */
|
||||
form {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@@ -349,65 +394,39 @@ form {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
form input,
|
||||
form button {
|
||||
width: 80%;
|
||||
max-width: 500px;
|
||||
margin-bottom: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
form input {
|
||||
width: 80%;
|
||||
max-width: 500px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* ===== Section Card Styling ===== */
|
||||
section.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.copy-feedback.show {
|
||||
display: block;
|
||||
width: fit-content;
|
||||
margin-top: 10px;
|
||||
padding: 6px 12px;
|
||||
background-color: #2a2a2a;
|
||||
color: #00ff99;
|
||||
border: 1px solid #00ff99;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
#logContainer {
|
||||
white-space: pre-wrap; /* Wrap long lines */
|
||||
word-wrap: break-word; /* Break long words if needed */
|
||||
overflow-wrap: anywhere; /* Ensures long strings don't overflow */
|
||||
background: black;
|
||||
color: lime;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ===== Pacman Game Styling ===== */
|
||||
#pacmanCanvas {
|
||||
background-color: black;
|
||||
display: block;
|
||||
margin: auto;
|
||||
border: 2px solid #00ff99;
|
||||
border-radius: 12px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
aspect-ratio: 4/3;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
#pacman-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
display: block;
|
||||
margin: auto;
|
||||
border: 2px solid #00ff99;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 25px;
|
||||
max-width: 725px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pacman-wrapper {
|
||||
@@ -415,10 +434,197 @@ section.card {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
/* ===== Utility: Hidden Class ===== */
|
||||
/* ===== Utility Classes ===== */
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* ===== Section Spacing ===== */
|
||||
#password-generator-section {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
#encoding-section {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
/* ===== File Input Section ===== */
|
||||
#encoding-section #file-section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#encoding-section #file-section:not(.hidden) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Ensure PacCrypt sharing file uploader is always visible */
|
||||
#sharing-section #file-section {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Mobile-friendly download button */
|
||||
.download-btn {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.download-btn:hover {
|
||||
background-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
/* Mobile form adjustments */
|
||||
.pickup-form {
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.pickup-form input[type="password"] {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
background-color: var(--input-bg);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* Mobile-specific styles */
|
||||
@media (max-width: 768px) {
|
||||
.download-btn {
|
||||
padding: 15px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.pickup-form input[type="password"] {
|
||||
padding: 15px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Admin Section Styling ===== */
|
||||
#sitemap-section,
|
||||
#password-change-section,
|
||||
#server-update-section,
|
||||
#server-status-section,
|
||||
#server-logs-section,
|
||||
#system-settings-section {
|
||||
margin-bottom: 25px;
|
||||
padding: 25px;
|
||||
background-color: #1e1e1e;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 0 15px rgba(0, 255, 153, 0.4);
|
||||
}
|
||||
|
||||
.sitemap-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.sitemap-header h3 {
|
||||
color: #00ff99;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #00ff99;
|
||||
font-size: 1.2em;
|
||||
cursor: pointer;
|
||||
padding: 5px 10px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.collapse-btn:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.sitemap-content {
|
||||
transition: all 0.3s ease;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#sitemap-section ul,
|
||||
#server-status-section ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
#sitemap-section li,
|
||||
#server-status-section li {
|
||||
margin-bottom: 10px;
|
||||
padding: 8px;
|
||||
background-color: #2c2f33;
|
||||
border-radius: 6px;
|
||||
color: #00ff99;
|
||||
}
|
||||
|
||||
#server-logs-section button {
|
||||
margin-bottom: 15px;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
#logLoader {
|
||||
color: #00ff99;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#logContainer {
|
||||
background-color: #2c2f33;
|
||||
color: #00ff99;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
font-family: monospace;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
#system-settings-section {
|
||||
margin-bottom: unset !important;
|
||||
padding: 25px;
|
||||
background-color: #1e1e1e;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 0 15px rgba(0, 255, 153, 0.4);
|
||||
}
|
||||
|
||||
/* ===== 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;
|
||||
}
|
||||
}
|
||||
|
||||
+29
-11
@@ -1,10 +1,21 @@
|
||||
// encryption.js
|
||||
/**
|
||||
* Encryption module.
|
||||
* Handles cryptographic operations using Web Crypto API.
|
||||
* Implements AES-GCM encryption with PBKDF2 key derivation.
|
||||
*/
|
||||
|
||||
// ===== Constants =====
|
||||
const SALT_LENGTH = 16;
|
||||
const IV_LENGTH = 12;
|
||||
const PBKDF2_ITERATIONS = 200_000;
|
||||
const KEY_LENGTH = 256;
|
||||
|
||||
// ===== Key Derivation =====
|
||||
/**
|
||||
* Derives an AES-GCM key from a password using PBKDF2.
|
||||
* @param {string} password - User-supplied password.
|
||||
* @param {Uint8Array} salt - Randomly generated salt.
|
||||
* @returns {Promise<CryptoKey>}
|
||||
* @returns {Promise<CryptoKey>} - Derived cryptographic key.
|
||||
*/
|
||||
export async function deriveKey(password, salt) {
|
||||
const encoder = new TextEncoder();
|
||||
@@ -20,16 +31,17 @@ export async function deriveKey(password, salt) {
|
||||
{
|
||||
name: 'PBKDF2',
|
||||
salt,
|
||||
iterations: 200_000,
|
||||
iterations: PBKDF2_ITERATIONS,
|
||||
hash: 'SHA-256'
|
||||
},
|
||||
keyMaterial,
|
||||
{ name: 'AES-GCM', length: 256 },
|
||||
{ name: 'AES-GCM', length: KEY_LENGTH },
|
||||
false,
|
||||
['encrypt', 'decrypt']
|
||||
);
|
||||
}
|
||||
|
||||
// ===== Encryption =====
|
||||
/**
|
||||
* Encrypts a message using AES-GCM with a derived key.
|
||||
* @param {string} message - Plaintext message to encrypt.
|
||||
@@ -38,12 +50,16 @@ export async function deriveKey(password, salt) {
|
||||
*/
|
||||
export async function encryptAdvanced(message, password) {
|
||||
const encoder = new TextEncoder();
|
||||
const salt = crypto.getRandomValues(new Uint8Array(16));
|
||||
const iv = crypto.getRandomValues(new Uint8Array(12));
|
||||
const salt = crypto.getRandomValues(new Uint8Array(SALT_LENGTH));
|
||||
const iv = crypto.getRandomValues(new Uint8Array(IV_LENGTH));
|
||||
const key = await deriveKey(password, salt);
|
||||
const encoded = encoder.encode(message);
|
||||
|
||||
const ciphertext = await crypto.subtle.encrypt({ name: 'AES-GCM', iv }, key, encoded);
|
||||
const ciphertext = await crypto.subtle.encrypt(
|
||||
{ name: 'AES-GCM', iv },
|
||||
key,
|
||||
encoded
|
||||
);
|
||||
|
||||
const output = new Uint8Array(salt.length + iv.length + ciphertext.byteLength);
|
||||
output.set(salt);
|
||||
@@ -53,6 +69,7 @@ export async function encryptAdvanced(message, password) {
|
||||
return btoa(String.fromCharCode(...output));
|
||||
}
|
||||
|
||||
// ===== Decryption =====
|
||||
/**
|
||||
* Decrypts an AES-GCM encrypted string.
|
||||
* @param {string} encryptedData - Base64-encoded ciphertext.
|
||||
@@ -64,9 +81,9 @@ export async function decryptAdvanced(encryptedData, password) {
|
||||
atob(encryptedData).split('').map(c => c.charCodeAt(0))
|
||||
);
|
||||
|
||||
const salt = encrypted.slice(0, 16);
|
||||
const iv = encrypted.slice(16, 28);
|
||||
const ciphertext = encrypted.slice(28);
|
||||
const salt = encrypted.slice(0, SALT_LENGTH);
|
||||
const iv = encrypted.slice(SALT_LENGTH, SALT_LENGTH + IV_LENGTH);
|
||||
const ciphertext = encrypted.slice(SALT_LENGTH + IV_LENGTH);
|
||||
const key = await deriveKey(password, salt);
|
||||
|
||||
const decrypted = await crypto.subtle.decrypt(
|
||||
@@ -78,8 +95,9 @@ export async function decryptAdvanced(encryptedData, password) {
|
||||
return new TextDecoder().decode(decrypted);
|
||||
}
|
||||
|
||||
// ===== Module Initialization =====
|
||||
/**
|
||||
* Optional init logging for module diagnostics.
|
||||
* Initializes the encryption module and logs its status.
|
||||
*/
|
||||
export function setupEncryption() {
|
||||
console.log('[Encryption] Module loaded');
|
||||
|
||||
+107
-80
@@ -1,92 +1,119 @@
|
||||
// fileops.js
|
||||
|
||||
import { encryptAdvanced, decryptAdvanced } from './encryption.js';
|
||||
|
||||
/**
|
||||
* Encrypts the selected file and triggers download of the encrypted version.
|
||||
* @param {HTMLInputElement} fileInput - The input element of type 'file'.
|
||||
* @param {string} password - Password for encryption.
|
||||
* File operations module.
|
||||
* Handles file encryption and decryption operations.
|
||||
*/
|
||||
export function encryptFile(fileInput, password) {
|
||||
if (!fileInput.files.length) {
|
||||
alert("Please select a file!");
|
||||
return;
|
||||
}
|
||||
|
||||
// ===== Constants =====
|
||||
const CHUNK_SIZE = 1024 * 1024; // 1MB chunks
|
||||
|
||||
// ===== Public Interface =====
|
||||
export async function encryptFile(fileInput, password) {
|
||||
const file = fileInput.files[0];
|
||||
const reader = new FileReader();
|
||||
if (!file) return;
|
||||
|
||||
reader.onload = async (e) => {
|
||||
const rawBytes = new Uint8Array(e.target.result);
|
||||
const base64 = btoa(String.fromCharCode(...rawBytes));
|
||||
const encrypted = await encryptAdvanced(base64, password);
|
||||
downloadFile(encrypted, file.name + ".enc");
|
||||
};
|
||||
|
||||
reader.readAsArrayBuffer(file);
|
||||
try {
|
||||
const encryptedChunks = await processFile(file, password, true);
|
||||
downloadEncryptedFile(encryptedChunks, file.name);
|
||||
} catch (error) {
|
||||
alert("Error encrypting file: " + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Decrypts the selected encrypted file and triggers download of the original.
|
||||
* @param {HTMLInputElement} fileInput - The input element of type 'file'.
|
||||
* @param {string} password - Password for decryption.
|
||||
*/
|
||||
export function decryptFile(fileInput, password) {
|
||||
if (!fileInput.files.length) {
|
||||
alert("Please select a file!");
|
||||
return;
|
||||
export async function decryptFile(fileInput, password) {
|
||||
const file = fileInput.files[0];
|
||||
if (!file) return;
|
||||
|
||||
try {
|
||||
const decryptedChunks = await processFile(file, password, false);
|
||||
downloadDecryptedFile(decryptedChunks, file.name);
|
||||
} catch (error) {
|
||||
alert("Error decrypting file: " + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// ===== File Processing =====
|
||||
async function processFile(file, password, isEncrypt) {
|
||||
const chunks = [];
|
||||
const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
|
||||
let processedChunks = 0;
|
||||
|
||||
for (let start = 0; start < file.size; start += CHUNK_SIZE) {
|
||||
const chunk = file.slice(start, start + CHUNK_SIZE);
|
||||
const arrayBuffer = await chunk.arrayBuffer();
|
||||
const uint8Array = new Uint8Array(arrayBuffer);
|
||||
|
||||
const processedChunk = await processChunk(uint8Array, password, isEncrypt);
|
||||
chunks.push(processedChunk);
|
||||
|
||||
processedChunks++;
|
||||
updateProgress(processedChunks, totalChunks);
|
||||
}
|
||||
|
||||
const file = fileInput.files[0];
|
||||
const reader = new FileReader();
|
||||
return chunks;
|
||||
}
|
||||
|
||||
reader.onload = async (e) => {
|
||||
try {
|
||||
const encryptedText = e.target.result;
|
||||
const base64Decrypted = await decryptAdvanced(encryptedText, password);
|
||||
const byteArray = new Uint8Array(
|
||||
[...atob(base64Decrypted)].map(c => c.charCodeAt(0))
|
||||
);
|
||||
downloadFileBinary(byteArray, file.name.replace(/\.enc$/, ''));
|
||||
} catch (err) {
|
||||
console.error("[Decryption Error]", err);
|
||||
alert("Decryption failed: wrong password or corrupted file.");
|
||||
async function processChunk(data, password, isEncrypt) {
|
||||
const payload = {
|
||||
"encryption-type": "advanced",
|
||||
operation: isEncrypt ? "encrypt" : "decrypt",
|
||||
message: Array.from(data).join(','),
|
||||
password: password
|
||||
};
|
||||
|
||||
const response = await fetch("/", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
return new Uint8Array(result.result.split(',').map(Number));
|
||||
}
|
||||
|
||||
// ===== File Download =====
|
||||
function downloadEncryptedFile(chunks, originalName) {
|
||||
const blob = new Blob(chunks, { type: 'application/octet-stream' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = originalName + '.encrypted';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
function downloadDecryptedFile(chunks, originalName) {
|
||||
const blob = new Blob(chunks, { type: 'application/octet-stream' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = originalName.replace('.encrypted', '');
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
// ===== Progress Tracking =====
|
||||
function updateProgress(processed, total) {
|
||||
const progressBar = document.getElementById("file-progress");
|
||||
const progressText = document.getElementById("file-progress-text");
|
||||
|
||||
if (progressBar && progressText) {
|
||||
const percent = Math.round((processed / total) * 100);
|
||||
progressBar.style.width = percent + "%";
|
||||
progressText.textContent = `Processing: ${percent}%`;
|
||||
|
||||
if (processed === total) {
|
||||
setTimeout(() => {
|
||||
progressBar.style.width = "0%";
|
||||
progressText.textContent = "";
|
||||
}, 1000);
|
||||
}
|
||||
};
|
||||
|
||||
reader.readAsText(file);
|
||||
}
|
||||
|
||||
/**
|
||||
* Downloads a text-based file (encrypted string).
|
||||
* @param {string} content - The file content to download.
|
||||
* @param {string} filename - Desired name for the downloaded file.
|
||||
*/
|
||||
function downloadFile(content, filename) {
|
||||
const blob = new Blob([content], { type: "application/octet-stream" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
a.click();
|
||||
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
/**
|
||||
* Downloads a binary file (Uint8Array).
|
||||
* @param {Uint8Array} byteArray - The binary content.
|
||||
* @param {string} filename - Desired name for the downloaded file.
|
||||
*/
|
||||
function downloadFileBinary(byteArray, filename) {
|
||||
const blob = new Blob([byteArray], { type: "application/octet-stream" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
a.click();
|
||||
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
}
|
||||
|
||||
+5
-4
@@ -1,11 +1,12 @@
|
||||
// main.js
|
||||
/**
|
||||
* Main application entry point.
|
||||
* Initializes UI and game components when the DOM is loaded.
|
||||
*/
|
||||
|
||||
import { setupUI } from './ui.js';
|
||||
import { setupGame } from './pacman.js';
|
||||
|
||||
/**
|
||||
* Initialize UI and game once the DOM is fully loaded.
|
||||
*/
|
||||
// Initialize application when DOM is fully loaded
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
setupUI();
|
||||
setupGame();
|
||||
|
||||
+90
-56
@@ -1,47 +1,28 @@
|
||||
// pacman.js
|
||||
/**
|
||||
* Pacman game module.
|
||||
* Handles game logic, rendering, and user interaction.
|
||||
*/
|
||||
|
||||
// ===== Game Constants =====
|
||||
const PACMAN_SPEED = 40;
|
||||
const ENEMY_SPEED = 20;
|
||||
const CELL_SIZE = 40;
|
||||
const DOT_SIZE = 5;
|
||||
|
||||
// ===== Game State =====
|
||||
let canvas, ctx, pacman, enemy, walls, dots, score;
|
||||
let cols, rows, randSeed, gameInterval;
|
||||
|
||||
// ===== Public Interface =====
|
||||
export function setupGame() {
|
||||
console.log('[PacMan] Game module loaded.');
|
||||
|
||||
window.startPacman = startPacman;
|
||||
window.exitGame = exitGame;
|
||||
}
|
||||
|
||||
// ====== Game Constants & State ======
|
||||
let canvas, ctx, pacman, enemy, walls, dots, score;
|
||||
let pacmanSpeed = 40,
|
||||
enemySpeed = 20,
|
||||
cellSize = 40,
|
||||
dotSize = 5,
|
||||
cols, rows, randSeed, gameInterval;
|
||||
|
||||
// ====== Game Initialization ======
|
||||
|
||||
export function startPacman() {
|
||||
canvas = document.getElementById("pacmanCanvas");
|
||||
ctx = canvas.getContext("2d");
|
||||
|
||||
cols = Math.floor(canvas.width / cellSize);
|
||||
rows = Math.floor(canvas.height / cellSize);
|
||||
walls = [];
|
||||
dots = [];
|
||||
score = 0;
|
||||
|
||||
clearInterval(gameInterval);
|
||||
const seedSource = document.getElementById("password")?.value || "pacman";
|
||||
randSeed = [...seedSource].reduce((s, c) => s + c.charCodeAt(0), 0);
|
||||
|
||||
|
||||
generateWalls();
|
||||
generateDots();
|
||||
|
||||
pacman = spawn();
|
||||
do { enemy = spawn(); } while (enemy.x === pacman.x && enemy.y === pacman.y);
|
||||
|
||||
pacman.dx = pacman.dy = 0;
|
||||
document.addEventListener("keydown", movePacman);
|
||||
|
||||
gameInterval = setInterval(gameLoop, 150);
|
||||
initializeGame();
|
||||
setupGameLoop();
|
||||
}
|
||||
|
||||
export function stopPacman() {
|
||||
@@ -61,8 +42,39 @@ export function exitGame() {
|
||||
document.getElementById("encoding-section").style.display = "block";
|
||||
}
|
||||
|
||||
// ====== Game Setup Helpers ======
|
||||
// ===== Game Initialization =====
|
||||
function initializeGame() {
|
||||
canvas = document.getElementById("pacmanCanvas");
|
||||
ctx = canvas.getContext("2d");
|
||||
|
||||
cols = Math.floor(canvas.width / CELL_SIZE);
|
||||
rows = Math.floor(canvas.height / CELL_SIZE);
|
||||
walls = [];
|
||||
dots = [];
|
||||
score = 0;
|
||||
|
||||
clearInterval(gameInterval);
|
||||
|
||||
// Get seed from generated password or use default
|
||||
const passwordField = document.getElementById("generated-password");
|
||||
const seedSource = passwordField?.value || "pacman";
|
||||
randSeed = [...seedSource].reduce((s, c) => s + c.charCodeAt(0), 0);
|
||||
|
||||
generateWalls();
|
||||
generateDots();
|
||||
|
||||
pacman = spawn();
|
||||
do { enemy = spawn(); } while (enemy.x === pacman.x && enemy.y === pacman.y);
|
||||
|
||||
pacman.dx = pacman.dy = 0;
|
||||
document.addEventListener("keydown", movePacman);
|
||||
}
|
||||
|
||||
function setupGameLoop() {
|
||||
gameInterval = setInterval(gameLoop, 150);
|
||||
}
|
||||
|
||||
// ===== Game Setup Helpers =====
|
||||
function spawn() {
|
||||
const options = [];
|
||||
for (let c = 1; c < cols - 1; c++) {
|
||||
@@ -80,9 +92,9 @@ function spawn() {
|
||||
}
|
||||
const s = options[Math.floor(rand() * options.length)];
|
||||
return {
|
||||
x: s.c * cellSize + cellSize / 2,
|
||||
y: s.r * cellSize + cellSize / 2,
|
||||
size: cellSize / 2 - 5,
|
||||
x: s.c * CELL_SIZE + CELL_SIZE / 2,
|
||||
y: s.r * CELL_SIZE + CELL_SIZE / 2,
|
||||
size: CELL_SIZE / 2 - 5,
|
||||
dx: 0,
|
||||
dy: 0
|
||||
};
|
||||
@@ -94,6 +106,7 @@ function rand() {
|
||||
}
|
||||
|
||||
function generateWalls() {
|
||||
// First pass: generate initial walls
|
||||
for (let c = 0; c < cols; c++) {
|
||||
for (let r = 0; r < rows; r++) {
|
||||
if (c === 0 || r === 0 || c === cols - 1 || r === rows - 1 || rand() < 0.2) {
|
||||
@@ -101,6 +114,25 @@ function generateWalls() {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Second pass: check for enclosed spaces
|
||||
for (let c = 1; c < cols - 1; c++) {
|
||||
for (let r = 1; r < rows - 1; r++) {
|
||||
// Skip if already a wall
|
||||
if (walls.some(w => w.c === c && w.r === r)) continue;
|
||||
|
||||
// Check all four sides
|
||||
const hasWallAbove = walls.some(w => w.c === c && w.r === r - 1);
|
||||
const hasWallBelow = walls.some(w => w.c === c && w.r === r + 1);
|
||||
const hasWallLeft = walls.some(w => w.c === c - 1 && w.r === r);
|
||||
const hasWallRight = walls.some(w => w.c === c + 1 && w.r === r);
|
||||
|
||||
// If all sides are walls, make this spot a wall too
|
||||
if (hasWallAbove && hasWallBelow && hasWallLeft && hasWallRight) {
|
||||
walls.push({ c, r });
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function generateDots() {
|
||||
@@ -120,8 +152,7 @@ function generateDots() {
|
||||
}
|
||||
}
|
||||
|
||||
// ====== Game Loop & Drawing ======
|
||||
|
||||
// ===== Game Loop & Rendering =====
|
||||
function gameLoop() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
drawWalls();
|
||||
@@ -137,7 +168,7 @@ function gameLoop() {
|
||||
function drawWalls() {
|
||||
ctx.fillStyle = "blue";
|
||||
walls.forEach(w => {
|
||||
ctx.fillRect(w.c * cellSize, w.r * cellSize, cellSize, cellSize);
|
||||
ctx.fillRect(w.c * CELL_SIZE, w.r * CELL_SIZE, CELL_SIZE, CELL_SIZE);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -151,7 +182,10 @@ function drawChar(ch, color) {
|
||||
function drawScore() {
|
||||
ctx.fillStyle = "white";
|
||||
ctx.font = "20px Poppins";
|
||||
ctx.fillText("Score: " + score, 10, 25);
|
||||
ctx.textAlign = "left";
|
||||
// Add padding to prevent clipping
|
||||
const padding = 10;
|
||||
ctx.fillText("Score: " + score, padding, 25);
|
||||
}
|
||||
|
||||
function checkGameOver() {
|
||||
@@ -167,17 +201,16 @@ function checkGameOver() {
|
||||
}
|
||||
}
|
||||
|
||||
// ====== Movement Logic ======
|
||||
|
||||
// ===== Movement Logic =====
|
||||
function movePacman(e) {
|
||||
const k = e.key;
|
||||
if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(k)) return;
|
||||
e.preventDefault();
|
||||
|
||||
if (k === "ArrowUp") { pacman.dx = 0; pacman.dy = -pacmanSpeed; }
|
||||
if (k === "ArrowDown") { pacman.dx = 0; pacman.dy = pacmanSpeed; }
|
||||
if (k === "ArrowLeft") { pacman.dx = -pacmanSpeed; pacman.dy = 0; }
|
||||
if (k === "ArrowRight") { pacman.dx = pacmanSpeed; pacman.dy = 0; }
|
||||
if (k === "ArrowUp") { pacman.dx = 0; pacman.dy = -PACMAN_SPEED; }
|
||||
if (k === "ArrowDown") { pacman.dx = 0; pacman.dy = PACMAN_SPEED; }
|
||||
if (k === "ArrowLeft") { pacman.dx = -PACMAN_SPEED; pacman.dy = 0; }
|
||||
if (k === "ArrowRight") { pacman.dx = PACMAN_SPEED; pacman.dy = 0; }
|
||||
}
|
||||
|
||||
function moveChar(ch) {
|
||||
@@ -191,7 +224,7 @@ function moveChar(ch) {
|
||||
|
||||
function moveEnemy() {
|
||||
const options = [];
|
||||
const moves = [[enemySpeed, 0], [-enemySpeed, 0], [0, enemySpeed], [0, -enemySpeed]];
|
||||
const moves = [[ENEMY_SPEED, 0], [-ENEMY_SPEED, 0], [0, ENEMY_SPEED], [0, -ENEMY_SPEED]];
|
||||
|
||||
moves.forEach(([dx, dy]) => {
|
||||
const nx = enemy.x + dx;
|
||||
@@ -225,8 +258,8 @@ function willCollide(x, y, size) {
|
||||
const top = y - size, bottom = y + size;
|
||||
|
||||
return walls.some(w => {
|
||||
const wx1 = w.c * cellSize, wy1 = w.r * cellSize;
|
||||
const wx2 = wx1 + cellSize, wy2 = wy1 + cellSize;
|
||||
const wx1 = w.c * CELL_SIZE, wy1 = w.r * CELL_SIZE;
|
||||
const wx2 = wx1 + CELL_SIZE, wy2 = wy1 + CELL_SIZE;
|
||||
return right > wx1 && left < wx2 && bottom > wy1 && top < wy2;
|
||||
});
|
||||
}
|
||||
@@ -235,8 +268,8 @@ function eatDots() {
|
||||
const chompSound = document.getElementById("chomp-sound");
|
||||
|
||||
dots = dots.filter(d => {
|
||||
const dx = d.c * cellSize + cellSize / 2;
|
||||
const dy = d.r * cellSize + cellSize / 2;
|
||||
const dx = d.c * CELL_SIZE + CELL_SIZE / 2;
|
||||
const dy = d.r * CELL_SIZE + CELL_SIZE / 2;
|
||||
|
||||
if (Math.abs(pacman.x - dx) < pacman.size && Math.abs(pacman.y - dy) < pacman.size) {
|
||||
score++;
|
||||
@@ -253,10 +286,11 @@ function eatDots() {
|
||||
ctx.fillStyle = "white";
|
||||
dots.forEach(d => {
|
||||
ctx.beginPath();
|
||||
ctx.arc(d.c * cellSize + cellSize / 2, d.r * cellSize + cellSize / 2, dotSize, 0, Math.PI * 2);
|
||||
ctx.arc(d.c * CELL_SIZE + CELL_SIZE / 2, d.r * CELL_SIZE + CELL_SIZE / 2, DOT_SIZE, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
});
|
||||
}
|
||||
|
||||
// ===== Global Functions =====
|
||||
window.resetGame = resetGame;
|
||||
window.exitGame = exitGame;
|
||||
|
||||
+121
-64
@@ -1,72 +1,99 @@
|
||||
// ui.js
|
||||
/**
|
||||
* UI management module.
|
||||
* Handles user interface interactions and form handling.
|
||||
*/
|
||||
|
||||
import { encryptFile, decryptFile } from './fileops.js';
|
||||
|
||||
/**
|
||||
* Initialize all UI functionality after DOM is loaded
|
||||
*/
|
||||
// ===== UI Initialization =====
|
||||
export function setupUI() {
|
||||
toggleEncryptionOptions();
|
||||
toggleInputMode();
|
||||
// Set initial state of remove button to hidden
|
||||
const removeBtn = document.getElementById("remove-file-btn");
|
||||
if (removeBtn) {
|
||||
removeBtn.style.display = "none";
|
||||
}
|
||||
|
||||
initializeEventListeners();
|
||||
}
|
||||
|
||||
const encryptionTypeEl = document.getElementById("encryption-type");
|
||||
const inputTextEl = document.getElementById("input-text");
|
||||
const formEl = document.getElementById("crypto-form");
|
||||
const removeFileBtn = document.getElementById("remove-file-btn");
|
||||
const clearAllBtn = document.getElementById("clear-all-btn");
|
||||
const generateBtn = document.getElementById("generate-btn");
|
||||
const copyPasswordBtn = document.getElementById("copy-btn");
|
||||
const copyOutputBtn = document.getElementById("copy-output-btn");
|
||||
const toggleSwitch = document.getElementById("operation-toggle");
|
||||
const copyShareBtn = document.getElementById("copy-share-btn");
|
||||
const shareLink = document.getElementById("share-link");
|
||||
// ===== 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 (
|
||||
encryptionTypeEl && inputTextEl && formEl && removeFileBtn &&
|
||||
clearAllBtn && generateBtn && copyPasswordBtn && toggleSwitch
|
||||
) {
|
||||
encryptionTypeEl.addEventListener("change", toggleEncryptionOptions);
|
||||
inputTextEl.addEventListener("input", () => {
|
||||
toggleInputMode();
|
||||
checkForPacman();
|
||||
});
|
||||
formEl.addEventListener("submit", handleSubmit);
|
||||
removeFileBtn.addEventListener("click", removeFile);
|
||||
clearAllBtn.addEventListener("click", clearAll);
|
||||
generateBtn.addEventListener("click", generateRandomPassword);
|
||||
copyPasswordBtn.addEventListener("click", () => copyToClipboard("generated-password", "password-copy-feedback"));
|
||||
copyOutputBtn?.addEventListener("click", () => copyToClipboard("output-text", "output-copy-feedback"));
|
||||
toggleSwitch.addEventListener("change", updateToggleLabels);
|
||||
|
||||
const copySharedLinkBtn = document.getElementById("copy-shared-link");
|
||||
const sharedLinkEl = document.getElementById("shared-link");
|
||||
|
||||
if (copySharedLinkBtn && sharedLinkEl) {
|
||||
copySharedLinkBtn.addEventListener("click", () => {
|
||||
navigator.clipboard.writeText(sharedLinkEl.textContent.trim()).then(() => {
|
||||
const feedback = document.getElementById("shared-link-feedback");
|
||||
if (feedback) {
|
||||
feedback.classList.remove("hidden");
|
||||
feedback.classList.add("show");
|
||||
|
||||
setTimeout(() => {
|
||||
feedback.classList.remove("show");
|
||||
feedback.classList.add("hidden");
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
sharedLinkEl.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
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", updateToggleLabels);
|
||||
|
||||
// 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) {
|
||||
@@ -77,11 +104,18 @@ function toggleEncryptionOptions() {
|
||||
}
|
||||
}
|
||||
|
||||
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");
|
||||
@@ -112,6 +146,7 @@ function toggleInputMode() {
|
||||
removeBtn.style.display = fileSelected ? "inline-block" : "none";
|
||||
}
|
||||
|
||||
// ===== Form Handling =====
|
||||
async function handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
||||
@@ -133,6 +168,10 @@ async function handleSubmit(event) {
|
||||
: decryptFile(fileInput, password);
|
||||
}
|
||||
|
||||
await handleTextOperation(encryptionType, operation, password);
|
||||
}
|
||||
|
||||
async function handleTextOperation(encryptionType, operation, password) {
|
||||
const payload = {
|
||||
"encryption-type": encryptionType,
|
||||
operation: operation,
|
||||
@@ -153,6 +192,7 @@ async function handleSubmit(event) {
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Utility Functions =====
|
||||
function removeFile() {
|
||||
const fileInput = document.getElementById("file-input");
|
||||
if (fileInput) fileInput.value = "";
|
||||
@@ -168,19 +208,30 @@ function generateRandomPassword() {
|
||||
charset.charAt(Math.floor(Math.random() * charset.length))
|
||||
).join("");
|
||||
const passwordField = document.getElementById("generated-password");
|
||||
if (passwordField) passwordField.value = 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 || !feedback) return;
|
||||
|
||||
navigator.clipboard.writeText(el.textContent || el.value || "").then(() => {
|
||||
feedback.classList.add("show");
|
||||
setTimeout(() => {
|
||||
feedback.classList.remove("show");
|
||||
}, 3000);
|
||||
if (!el || !el.value) return;
|
||||
|
||||
navigator.clipboard.writeText(el.value).then(() => {
|
||||
if (feedback) {
|
||||
feedback.style.display = "block";
|
||||
feedback.classList.add("show");
|
||||
setTimeout(() => {
|
||||
feedback.classList.remove("show");
|
||||
setTimeout(() => {
|
||||
feedback.style.display = "none";
|
||||
}, 300); // Wait for fade-out animation to complete
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -196,6 +247,11 @@ function clearAll() {
|
||||
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");
|
||||
@@ -210,6 +266,7 @@ function checkForPacman() {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function startPacman() { }
|
||||
function exitGame() { }
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user