TySS-Dev/PacCrypt-Webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Version .3

Browse Source 
Some changes to UI, file encryption, the pacman game and the readme.
This commit is contained in:
Tyler
2025-04-27 23:22:56 -10:00
committed by GitHub
parent 9e45c34365
commit 265dff3329
14 changed files with 492 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/audio/chomp.mp3
BIN
View File
Binary file not shown.
static/css/styles.css
+60 -47
View File
@@ -9,23 +9,25 @@
body {
font-family: 'Poppins', sans-serif;
background-color: #121212;
color: #f0f0f0;
color: #00ff99;
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: center; /* Vertically center content */
align-items: center; /* Horizontally center content */
justify-content: center;
align-items: center;
padding: 20px;
}
/* ===== Header ===== */
header {
text-align: center;
padding: 30px 20px;
padding: 25px;
background-color: #1c1c1c;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
border-radius: 12px;
box-shadow: 0 0 15px rgba(0, 255, 153, 0.4);
width: 100%;
max-width: 800px;
margin-bottom: 30px;
}
header h1 {
@@ -35,7 +37,7 @@ header {
}
header p {
font-size: 1.1em;
font-size: 1.2em;
color: #00ff99;
}
@@ -49,13 +51,12 @@ main {
max-width: 800px;
padding: 20px;
gap: 30px;
justify-content: center;
}
/* ===== Section Card Styling ===== */
.card {
background-color: #1e1e1e;
padding: 20px 25px;
padding: 25px;
width: 100%;
max-width: 800px;
border-radius: 12px;
@@ -68,7 +69,7 @@ main {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
gap: 20px;
width: 100%;
}
@@ -92,7 +93,8 @@ textarea {
resize: none;
}
input[type="password"] {
input[type="password"],
#password {
min-height: 50px;
}
@@ -123,7 +125,7 @@ select:focus {
box-shadow: 0 0 8px rgba(0, 255, 153, 0.8);
}
/* ===== Match input and output textarea sizes ===== */
/* ===== Match input and output sizes ===== */
#input-text,
#output-text {
width: 80%;
@@ -138,8 +140,8 @@ select:focus {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 8px;
gap: 15px;
margin-top: 15px;
width: 100%;
}
@@ -152,8 +154,8 @@ button {
font-size: 1em;
cursor: pointer;
transition: 0.3s;
width: 100%; /* Makes buttons stretch to fill container */
max-width: 200px; /* Restricts button width */
width: 100%;
max-width: 200px;
}
button:hover {
@@ -161,7 +163,7 @@ button {
color: #121212;
}
/* ===== Toggle Buttons ===== */
/* ===== Toggle Buttons (Encode/Decode, Encrypt/Decrypt) ===== */
.radio-group {
display: flex;
justify-content: center;
@@ -174,13 +176,15 @@ button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 18px;
padding: 1px 1px;
border: 2px solid #00ff99;
border-radius: 8px;
background-color: #2c2f33;
color: #00ff99;
cursor: pointer;
transition: 0.3s;
position: relative;
box-shadow: none;
}
.radio-button:hover {
@@ -188,21 +192,27 @@ button {
color: #121212;
}
/* Hide the actual radio input */
.radio-button input {
display: none;
}
/* When selected, make the ENTIRE BUTTON glow */
.radio-button input:checked + span {
background-color: #00ff99;
color: #121212;
padding: 8px 18px;
background-color: #2c2f33;
color: #00ff99;
box-shadow: 0 0 15px rgba(0, 255, 153, 0.7);
border-radius: 8px;
display: inline-block;
padding: 8px 18px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ===== Remove File Button ===== */
#remove-file-btn {
display: none; /* only shows when a file is selected */
display: none;
margin-top: 8px;
padding: 8px 16px;
border: 2px solid #ff5555;
@@ -221,14 +231,19 @@ button {
/* ===== Toast Notifications ===== */
.toast {
visibility: hidden;
min-width: 250px;
width: 80%;
max-width: 500px;
min-height: 50px;
background-color: #333;
color: #00ff99;
text-align: center;
border-radius: 6px;
padding: 10px;
margin-top: 8px;
font-size: 0.9em;
border-radius: 8px;
padding: 14px;
margin: 10px auto 0 auto;
font-size: 1em;
display: flex;
align-items: center;
justify-content: center;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@@ -274,11 +289,14 @@ button {
/* ===== Footer ===== */
footer {
text-align: center;
padding: 18px;
padding: 25px;
background-color: #1c1c1c;
color: #00ff99;
margin-top: auto;
border-radius: 12px;
box-shadow: 0 0 15px rgba(0, 255, 153, 0.4);
margin-top: 30px;
width: 100%;
max-width: 800px;
}
footer a {
@@ -290,22 +308,17 @@ footer {
color: #ff0066;
}
/* ===== Password Input Field ===== */
#password-input {
display: flex; /* Password input is visible by default */
margin-top: 15px;
flex-direction: column;
gap: 10px;
width: 100%;
max-width: 500px;
}
#password-input input {
padding: 12px;
font-size: 1em;
border: 2px solid #00ff99;
border-radius: 8px;
background-color: #2c2f33;
color: #00ff99;
width: 100%; /* Ensure the password field takes full width */
/* ===== Responsive Tweaks ===== */
@media (max-width: 600px) {
input,
textarea,
select,
#input-text,
#output-text,
#password-field,
#password,
#file-password {
width: 100%;
max-width: 90%;
}
}
static/js/script.js
+86 -107
View File
@@ -1,41 +1,31 @@
// ===== AES Encryption =====
// ===== AES Advanced Encryption =====
async function encryptAdvanced(message, password) {
// Create a random salt for key derivation
const salt = crypto.getRandomValues(new Uint8Array(16));
// Derive a key from the password using PBKDF2 and the salt
const key = await deriveKey(password, salt);
// Create a random initialization vector (IV)
const iv = crypto.getRandomValues(new Uint8Array(12));
// Encode the message as a Uint8Array
const encoder = new TextEncoder();
const encodedMessage = encoder.encode(message);
// Encrypt the message using AES-GCM
const encryptedMessage = await crypto.subtle.encrypt(
{ name: 'AES-GCM', iv: iv },
key,
encodedMessage
);
// Combine salt, IV, and encrypted message
const encryptedArray = new Uint8Array(salt.length + iv.length + encryptedMessage.byteLength);
encryptedArray.set(salt);
encryptedArray.set(iv, salt.length);
encryptedArray.set(new Uint8Array(encryptedMessage), salt.length + iv.length);
// Convert the result to base64 to send to the server
return btoa(String.fromCharCode.apply(null, encryptedArray));
return btoa(String.fromCharCode(...encryptedArray));
}
// Derive a key from the password using PBKDF2
async function deriveKey(password, salt) {
const encoder = new TextEncoder();
const passwordBuffer = encoder.encode(password);
const key = await crypto.subtle.importKey(
const keyMaterial = await crypto.subtle.importKey(
'raw',
passwordBuffer,
{ name: 'PBKDF2' },
@@ -47,37 +37,31 @@ async function deriveKey(password, salt) {
{
name: 'PBKDF2',
salt: salt,
iterations: 100000,
iterations: 200000,
hash: 'SHA-256',
},
key,
keyMaterial,
{ name: 'AES-GCM', length: 256 },
false,
['encrypt', 'decrypt']
);
}
// ===== AES Decryption =====
async function decryptAdvanced(encryptedData, password) {
// Decode the base64-encoded encrypted data
const encryptedArray = new Uint8Array(atob(encryptedData).split("").map(char => char.charCodeAt(0)));
const encryptedArray = new Uint8Array(atob(encryptedData).split("").map(c => c.charCodeAt(0)));
// Extract salt, IV, and encrypted message from the encrypted data
const salt = encryptedArray.slice(0, 16);
const iv = encryptedArray.slice(16, 28);
const encryptedMessage = encryptedArray.slice(28);
// Derive the key from the password and salt
const key = await deriveKey(password, salt);
// Decrypt the message using AES-GCM
const decryptedMessage = await crypto.subtle.decrypt(
{ name: 'AES-GCM', iv: iv },
key,
encryptedMessage
);
// Decode the decrypted message to text
const decoder = new TextDecoder();
return decoder.decode(decryptedMessage);
}
@@ -85,81 +69,54 @@ async function decryptAdvanced(encryptedData, password) {
// ===== UI Toggles =====
function toggleEncryptionOptions() {
const type = document.getElementById("encryption-type").value;
const pwdContainer = document.getElementById("password-input");
pwdContainer.style.display = (type === 'advanced') ? 'flex' : 'none';
document.getElementById("password-input").style.display = (type === 'advanced') ? 'flex' : 'none';
if (type === 'basic') removeFile();
toggleInputMode();
document.getElementById("encrypt-label").textContent =
(type === 'basic') ? "Encode" : "Encrypt";
document.getElementById("decrypt-label").textContent =
(type === 'basic') ? "Decode" : "Decrypt";
document.getElementById("encrypt-label").textContent = (type === 'basic') ? "Encode" : "Encrypt";
document.getElementById("decrypt-label").textContent = (type === 'basic') ? "Decode" : "Decrypt";
}
// ===== Remove File Button =====
function removeFile() {
document.getElementById("file-input").value = ""; // Clear the file input
document.getElementById("remove-file-btn").style.display = 'none'; // Hide the remove file button
toggleInputMode(); // Reapply the input mode logic
document.getElementById("file-password-input").style.display = 'none'; // Hide the file password input
document.getElementById("file-input").value = "";
document.getElementById("remove-file-btn").style.display = 'none';
toggleInputMode();
}
// ===== Input vs. File Toggle =====
function toggleInputMode() {
const textValue = document.getElementById("input-text").value.trim();
const fileSelected = document.getElementById("file-input").files.length > 0;
const isAdvanced = document.getElementById("encryption-type").value === 'advanced';
// Show/hide text area based on file selection
document.getElementById("text-section").style.display =
fileSelected ? 'none' : 'flex';
document.getElementById("text-section").style.display = fileSelected ? 'none' : 'flex';
document.getElementById("file-section").style.display = (isAdvanced && !textValue) ? 'flex' : 'none';
document.getElementById("remove-file-btn").style.display = fileSelected ? 'inline-block' : 'none';
// Show/hide file input section when in advanced mode and no text input is given
document.getElementById("file-section").style.display =
(isAdvanced && !textValue) ? 'flex' : 'none';
// Show/hide the remove file button
document.getElementById("remove-file-btn").style.display =
fileSelected ? 'inline-block' : 'none';
// ALWAYS show the password input in advanced mode
if (isAdvanced) {
document.getElementById("password-input").style.display = 'flex';
} else {
document.getElementById("password-input").style.display = 'none';
}
// Show the dedicated password input for file encryption if a file is selected
if (fileSelected) {
document.getElementById("file-password-input").style.display = 'flex'; // Show password input for files
} else {
document.getElementById("file-password-input").style.display = 'none'; // Hide when no file is selected
}
}
// ===== Validate and Submit Form =====
// ===== Form Submission =====
async function handleSubmit(event) {
event.preventDefault();
// If the encryption type is advanced, ensure password is provided
const password = document.getElementById("password").value;
const filePassword = document.getElementById("file-password") ? document.getElementById("file-password").value : '';
const encryptionType = document.getElementById("encryption-type").value;
if (encryptionType === 'advanced' && !password && !filePassword) {
if (encryptionType === 'advanced' && !password) {
alert("Password is required for advanced encryption.");
return;
}
// Prepare the form data
const payload = {
"encryption-type": encryptionType,
operation: document.querySelector('input[name="operation"]:checked').value,
message: document.getElementById("input-text").value,
password: password,
"file-password": filePassword
password: password
};
// Handle file upload encryption/decryption
const fileInput = document.getElementById("file-input");
if (fileInput.files.length > 0) {
const op = document.querySelector('input[name="operation"]:checked').value;
@@ -168,7 +125,6 @@ async function handleSubmit(event) {
return;
}
// Handle text encryption/decryption
try {
const resp = await fetch("/", {
method: "POST",
@@ -185,30 +141,35 @@ async function handleSubmit(event) {
// ===== File Encryption / Decryption =====
function encryptFile() {
const f = document.getElementById("file-input");
const pwd = document.getElementById("file-password").value;
const pwd = document.getElementById("password").value;
if (!pwd) return alert("Please enter a password!");
if (!f.files.length) return alert("Please select a file!");
const reader = new FileReader();
reader.onload = async (e) => {
const raw = e.target.result;
let encryptedMessage = await encryptAdvanced(raw, pwd);
downloadFile(encryptedMessage, f.files[0].name + ".enc");
const raw = new Uint8Array(e.target.result);
const base64Raw = btoa(String.fromCharCode(...raw));
const encrypted = await encryptAdvanced(base64Raw, pwd);
downloadFile(encrypted, f.files[0].name + ".enc");
};
reader.readAsText(f.files[0]);
reader.readAsArrayBuffer(f.files[0]);
}
function decryptFile() {
const f = document.getElementById("file-input");
const pwd = document.getElementById("file-password").value;
const pwd = document.getElementById("password").value;
if (!pwd) return alert("Please enter a password!");
if (!f.files.length) return alert("Please select a file!");
const reader = new FileReader();
reader.onload = async (e) => {
try {
const enc = e.target.result;
const decryptedMessage = await decryptAdvanced(enc, pwd);
downloadFile(decryptedMessage, f.files[0].name.replace(/\.enc$/, ''));
} catch {
const encryptedText = e.target.result;
const decryptedBase64 = await decryptAdvanced(encryptedText, pwd);
const byteString = atob(decryptedBase64);
const byteArray = new Uint8Array([...byteString].map(c => c.charCodeAt(0)));
downloadFileBinary(byteArray, f.files[0].name.replace(/\.enc$/, ''));
} catch (err) {
alert("Decryption failed: wrong password or corrupted file.");
}
};
@@ -225,6 +186,16 @@ function downloadFile(content, filename) {
URL.revokeObjectURL(url);
}
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);
}
// ===== Password Generator =====
function generateRandomPassword() {
const length = 30;
@@ -240,13 +211,12 @@ function generateRandomPassword() {
function copyToClipboard(elementId, toastId) {
const copyText = document.getElementById(elementId);
copyText.select();
copyText.setSelectionRange(0, 99999); // For mobile devices
copyText.setSelectionRange(0, 99999);
document.execCommand("copy");
// Show toast notification
const toast = document.getElementById(toastId);
toast.classList.add("show");
setTimeout(() => toast.classList.remove("show"), 2000); // Remove toast after 2 seconds
setTimeout(() => toast.classList.remove("show"), 2000);
}
// ===== Pacman Easter Egg =====
@@ -277,6 +247,28 @@ function resetGame() {
startPacman();
}
// ===== Clear All =====
function clearAll() {
document.getElementById("input-text").value = "";
document.getElementById("output-text").value = "";
document.getElementById("file-input").value = "";
document.getElementById("password").value = "";
document.getElementById("pacman-section").style.display = "none";
document.getElementById("encoding-section").style.display = "block";
removeFile();
toggleInputMode();
}
// ===== Initialize =====
document.addEventListener("DOMContentLoaded", () => {
toggleEncryptionOptions();
toggleInputMode();
document.getElementById("input-text").addEventListener("input", checkForPacman);
});
// ===== Pacman Game Variables & Logic =====
let canvas, ctx, pacman, enemy, walls, dots, score;
let pacmanSpeed = 40, enemySpeed = 20, cellSize = 40, dotSize = 5;
@@ -441,18 +433,27 @@ function drawChar(ch,color) {
}
function eatDots() {
dots = dots.filter(d=>{
const dx = d.c*cellSize+cellSize/2, dy = d.r*cellSize+cellSize/2;
if (Math.abs(pacman.x-dx)<pacman.size && Math.abs(pacman.y-dy)<pacman.size) {
const chompSound = document.getElementById("chomp-sound");
dots = dots.filter(d => {
const dx = d.c * cellSize + cellSize / 2;
const dy = d.r * cellSize + cellSize / 2;
if (Math.abs(pacman.x - dx) < pacman.size && Math.abs(pacman.y - dy) < pacman.size) {
score++;
return false;
if (chompSound) {
chompSound.currentTime = 0; // Reset sound
chompSound.volume = 0.4;
chompSound.play();
}
return false; // Remove dot
}
return true;
});
ctx.fillStyle="white";
dots.forEach(d=>{
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 * cellSize + cellSize / 2, d.r * cellSize + cellSize / 2, dotSize, 0, Math.PI * 2);
ctx.fill();
});
}
@@ -471,26 +472,4 @@ function checkGameOver() {
ctx.fillText("Game Over!", canvas.width/2, canvas.height/2);
clearInterval(gameInterval);
}
}
// ===== Clear All Functionality =====
function clearAll() {
document.getElementById("input-text").value = "";
document.getElementById("output-text").value = "";
document.getElementById("file-input").value = "";
document.getElementById("password").value = "";
document.getElementById("file-password").value = "";
document.getElementById("pacman-section").style.display = "none";
document.getElementById("encoding-section").style.display = "block";
removeFile();
toggleInputMode();
}
// ===== Initialize =====
document.addEventListener("DOMContentLoaded", () => {
toggleEncryptionOptions();
toggleInputMode();
document.getElementById("input-text").addEventListener("input", checkForPacman);
});
}