Cryptography Visualization Platform

Overview

Welcome to the Cryptography Visualization Platform! This project is designed to make complex cryptographic theories more accessible and understandable through intuitive visualizations. We focus on providing a seamless user experience with a high standard of Human-Computer Interaction (HCI) and UI/UX design, ensuring that learning about cryptography is both engaging and educational.

Table of Contents

• Cryptography Visualization Platform
  • Overview
  • Features
  • Technologies Used
  • Getting Started
  • Project Structure
  • Visualizations
  • Contact

Features

• Interactive Visualizations: Detailed and interactive visualizations for a variety of cryptographic algorithms.
• User-Friendly Interface: A clean and intuitive interface designed for ease of navigation and a great user experience.
• Educational Content: Clear explanations and examples to help you understand the core concepts of cryptography.
• HCI/UI/UX Focus: Built with Nielsen's heuristics in mind to ensure a high level of usability and user satisfaction.

Technologies Used

• Frontend: HTML, JavaScript
• Styling: CSS, Bootstrap
• Visualization: JavaScript
• HCI/UI/UX Principles: Nielsen's Heuristics

Getting Started

To get started with the Cryptography Visualization Platform, simply open the index.html file in your web browser. From there, you can navigate to the different algorithm visualizations.

Project Structure

The project is organized into several directories, each containing a specific cryptographic algorithm visualization:

• /AES: The AES encryption visualizer.
• /Caeser cipher: The Caesar cipher visualization.
• /DES: The DES encryption visualizer.
• /DiffieHellman-main: The Diffie-Hellman key exchange visualization.
• /ElGamal: The ElGamal encryption visualization.
• /Hash Function: A tool for visualizing hash functions.
• /Playfair Cipher: The Playfair cipher visualization.
• /RSA Cipher: The RSA encryption visualization.
• /Rail Fence Cipher: The Rail Fence cipher visualization.
• /SHA: The SHA hashing algorithm visualization.
• /TripleDES: The Triple DES encryption visualizer.
• /Vigenère Cipher: The Vigenère cipher visualization.

Visualizations

Below are some screenshots of the platform:

Home Page

Algorithms Page

Caesar Cipher

Contact

If you have any questions, feedback, or suggestions, feel free to reach out:

• X: coderfay
• GitHub: coderfay

AES README

AES Encryption Visualizer

This directory contains an interactive visualization of the Advanced Encryption Standard (AES) algorithm. The tool is designed to help you understand the inner workings of AES by visualizing each step of the encryption process.

How to Use

1. Open the index.html file in this directory in your web browser.
2. Enter the plaintext you want to encrypt and the secret key.
3. Click the "Encrypt" button to see the step-by-step visualization of the AES encryption process.

The website is also hosted at: https://ai-deen.github.io/AES_Encryption/

Caesar Cipher Visualizer

This directory contains a visualization of the Caesar cipher, a simple substitution cipher. This tool allows you to see how the Caesar cipher works by shifting the letters of the alphabet.

How to Use

1. Open the index.html file in this directory.
2. Enter the text you want to encrypt or decrypt.
3. Specify the shift value (the key).
4. The tool will visualize the encryption/decryption process and show you the resulting ciphertext or plaintext.

DES Encryption Visualizer

This directory contains a visualization of the Data Encryption Standard (DES) algorithm. The tool provides a step-by-step walkthrough of the DES encryption process, making it easier to understand this classic symmetric-key algorithm.

How to Use

1. Open the index.html file in this directory.
2. Enter the plaintext and the secret key.
3. Click "Encrypt" to see the visualization of the DES algorithm in action.

The website is also hosted at: https://ai-deen.github.io/AES_Encryption/