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.

• Overview

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.

1. 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:

1. Go to the Mermaid Live Editor.
2. Copy the Mermaid diagram code below.
3. Paste the code into the Mermaid Live Editor.
4. 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)