The GSL Encryption Project is a web-based application designed to provide robust encryption and decryption functionalities, along with an interactive user interface for various cryptographic tasks. This project leverages modern web technologies and integrates music selection features to enhance user experience. All current and intended (in privately used repos for now and not published on Gas-Lighting.com -- based on a order of clicking the letters to progress to the vercel app intergration via all the sources below:
- Text Encryption and Decryption: Encrypt and decrypt text input using advanced algorithms.
- File Encryption: Encrypt files uploaded by the user.
- Interactive Canvas: Visualize binary data on an HTML5 canvas.
- Song Selection: Choose from a list of songs to play during encryption/decryption processes.
- Responsive Design: User-friendly interface adaptable to various devices.
- The SLAYY Q Key provides a tool for encoding and decoding messages within images. Inspired by the functionalities and design of SLAYY, this project enables secure message transmission through steganography.
The GSL Encryption Project is a web-based application designed to provide robust encryption and decryption functionalities, along with an interactive user interface for various cryptographic tasks. This project leverages modern web technologies and integrates music selection features to enhance user experience.
- Text Encryption and Decryption: Encrypt and decrypt text input using advanced algorithms.
- File Encryption: Encrypt files uploaded by the user.
- Interactive Canvas: Visualize binary data on an HTML5 canvas.
- Song Selection: Choose from a list of songs to play during encryption/decryption processes.
- Responsive Design: User-friendly interface adaptable to various devices.
- WPM Integration: Calculates Words Per Minute (WPM) during typing and incorporates it into the encryption process.
- Clone the Repository:
git clone https://github.com/musha1140/midi.git cd GSL-Encryption GSL-Encryption/
install these libraries:
npm install tailwindcss postcss autoprefixer
Create tailwind.config.js and postcss.config.js files in your project root directory.
npm install tailwindcss postcss autoprefixer
tailwind.config.js
module.exports = {
purge: ['./public/**/*.html', './src/**/*.js'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
postcss.config.js:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
This file will import the Tailwind CSS base, components, and utilities.
@tailwind base;
@tailwind components;
@tailwind utilities;
package.json:
{
"scripts": {
"build:css": "npx tailwindcss build src/styles.css -o public/style.css"
}
}
Run the following command to build the Tailwind CSS file:
npm run build:css
Install http-server globally if you don't have it already:
npm install -g http-server
Serve the Application:
http-server public
Alternatively, you can use any other static file server or open the index.html file directly in your browser.
│
├── public/
│ ├── index.html
│ ├── style.css
│
├── src/
│ ├── commandHandler.js
│ ├── logic.js
│ ├── styles.css // From tailwind
│
├── index.js
├── tailwind.config.js
├── postcss.config.js
├── package.json
├── package-lock.json
To view the following logic portrayed in Mermaid , you can use the Mermaid Live Editor. Follow these steps:
- Go to the Mermaid Live Editor.
- Copy the Mermaid diagram code below.
- Paste the code into the Mermaid Live Editor.
- The editor will render the diagram, allowing you to visualize the project structure and terminal logic. -- If not visible here
mindmap
root((Input string))
UI
Input Area
Grid Visualization
Binary Canvas
Matrix Display
Console Output
commandHandler.js
handleCommand
help
Available commands
clear
displayMessage("clear")
list songs
listSongs
play [song number]
startProcess(songNumber)
upload
handleFileUpload
save
saveBinaryAsFile
encrypt [message]
handleEncryption(message)
decrypt [last green position]
handleDecryption(position)
Other
displayMessage("Unknown command...")
index.js (Utility Functions)
startProcess
loadMidi
Success
Extract MIDI Notes
Error
displayMessage("Error...")
handleFiles
MIDI File
Extract MIDI Notes
handleEncryption
Convert Text to Binary
AES Encryption
Create Grid Visualization
Play Notes with Variations
Calculate Frequency Range
Store Encrypted Data
Display Artistic Shape
Prompt for Download
Yes
saveBinaryAsFile
No
handleDecryption
Check Last Green Position or .slayy File
Incorrect
displayMessage("Error...")
Correct or .slayy File
Extract Binary Data
AES Decryption
Convert to Text
XOR with Original MIDI Binary
Transition to Grid
Display Grid Animation
Play Encrypted Music
(Proof of concept, though not implemented publicly)
- index.html: The main HTML file.
- style.css: Custom styles.
- logic.js: Main JavaScript logic.
- README.md: Project readme.
- assets/: Directory for assets (images, audio files, etc.).
- libs/: Directory for external libraries (jQuery, Tone.js, Midi.js).
- Console: The terminal console where the user interacts.
- Welcome Message: Initial message displayed to the user.
- User Input: Captures input from the user.
- Command: Determines the action based on user input.
- help: Shows a help message.
- clear: Clears the console.
- list songs: Lists available songs.
- play <song_number>: Plays the specified song.
- encrypt : Encrypts the user-provided message.
- decrypt: Decrypts the message.
- upload: Handles file upload for decryption.
- Encrypt Message Flow:
- Convert the message to binary.
- XOR with ECC.
- Visualize the resulting grid.
- Decrypt Message Flow:
- Convert binary back to the message.
- File Upload:
- Handles the upload and processing of .slayy files for decryption.
- Play Song:
- Fetches the MIDI file.
- Parses the MIDI file.
- Plays the MIDI file.
- Updates the gameboard visualization.
- This project takes inspiration from Ghidra's Sleigh for its robust and versatile approach to data encryption and steganography.
- The SLAYY Q Key steganography was created as my first step into the pattern and encryption programming space.
If you just want to use this repo and have some security I recommend using this structure instead: Static (for future) as it stands incomplete right now:
GSL-Encryption/
│
├── index.html # Main HTML file
├── style.css # Custom styles
├── logic.js # Main JavaScript logic
├── README.md # Project readme
│
├── assets/ # Directory for assets (images, audio files, etc.)
│ ├── song1.mid - ToneJS Midi
│ ├── song2.wav - FFT + Recompile to "simulate midi"
│ └── song3.mp3 - FFT + Using mathJS and reverse engineering the binary files (neondb, mongodb via replit's sql)
│
└── libs/ # Directory for external libraries
├── jquery.min.js
├── tone.min.js
└── midi.min.js
Please use the intended design to create a more polished version, or to use the idea to help better your own idea. https://www.gas-lighting.com is my website (old, used to run a live service Gnome enviroment as an experiment, so it is just sitting there)