<html>
<head>
<style>
html{
background-color: #fff;
}
h2, h4, textarea {
font-size: 18px;
font-style: normal;
margin-top: 0px;
margin-bottom: 0px;
font-weight: bold;
text-transform: initial;
letter-spacing: 0px;
line-height: 1.5;
text-decoration: none;
white-space: pre-wrap;
word-wrap: break-word;
font-family: 'monospace', sans-serif;
text-overflow: ellipsis;
margin:0 auto;
hyphens: auto;
}

h2 {
margin: 10px auto;
color: #FF6384;
text-align: center;
font-size: 24px;
}

h4, textarea {
color: #123456;
text-align: left;
font-size: 18px;
}

  textarea{
    
  }

.description {
font-size: 18px;
color: #4c4d33;
text-align: left;
margin-top: 5px;
margin-bottom: 0px;
}

div {
border: 10px solid #a1b5c9;
border-radius: 10px;
padding: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h2>RSA Encryption Algorithm Visualization</h2>
<div>
<h4>🔒 Select two distinct prime numbers, p and q: <span id='primeNumbers'></span><span id='primeLength'></span></h4><p class='description'><b>→ Get special numbers that can only be divided evenly by 1 and themselves. Pick two different special numbers.</b> <i>Imagine picking two unique and extraordinary friends for a game. These friends, represented by the prime numbers p and q, possess exceptional qualities just like star players in a game. Similar to how these friends stand out from the crowd, prime numbers can only be divided evenly by 1 and themselves. The distinctness of p and q ensures a solid foundation for the RSA encryption algorithm, creating a perfect duo for an extraordinary adventure.</i></p>
</div>

<div>
<h4>✖️ Calculate n by multiplying p and q: n = p * q</h4>
<p class='description'><b>→ Combine the two special numbers into a larger number.</b> <i>Combining the powers of two extraordinary forces, represented by the prime numbers p and q, is like multiplying the strengths of two special players. Just as their strengths multiply when they join forces, the numbers p and q multiply to form a new and powerful number, n. This multiplication creates a robust and unbreakable lock mechanism that protects your valuable secrets, serving as the cornerstone of the RSA encryption algorithm.</i></p>
</div>

<div>
<h4>⚖️ Calculate Euler's totient function of n: φ(n) = (p-1) * (q-1)</h4>
<p class='description'><b>→ Do a magic trick that counts how many numbers play nicely with the larger number.</b> <i>Euler's totient function, represented by φ(n), is like a mysterious magic trick that counts how many numbers form a harmonious relationship with the larger number, n. Just as the special numbers had no common factors with the larger number in the previous step, these numbers also have no common factors. The totient function, like a magician's wand, reveals this hidden count, holding the key to unlocking the secrets of encryption and decryption in the RSA algorithm.</i></p>
</div>

<div>
<h4>🔑 Select a public exponent e, relatively prime to φ(n)</h4>
<p class='description'><b>→ Choose a magic number that doesn't have any common factors with the result of the magic trick.</b> <i>Choosing a public exponent, denoted as e, is like finding a special key that unlocks the encryption process. This key, represented by the letter 'e', must be uniquely different from the result obtained in the previous step. Just like a key code completely different from a magic trick result, the public exponent ensures secure encryption by having no common factors with Euler's totient function of n (φ(n)).</i></p>
</div>

<div>
<h4>🔢 Calculate the private exponent d, satisfying (d * e) % φ(n) = 1</h4>
<p class='description'><b>→ Through some mathematical magic, find a secret number that, when multiplied by the magic number and divided by the result of the magic trick, results in an answer of 1.</b> <i>Calculating the private exponent, represented by d, is like solving a math puzzle to discover the secret number that, when multiplied by the public exponent 'e' and divided by Euler's totient function of n (φ(n)), equals 1. This special number, known only to the owner, unlocks and decrypts messages encrypted using the public key. The relationship between d, e, and φ(n) guarantees the ability to reverse the encryption process and reveal the original message.</i></p>
</div>

<div>
<h4>🌐 Public Key: (e, n)</h4>
<p class='description'><b>→ The public key is like a toy that everyone can play with. It has two numbers: the magic number and the larger number.</b> <i>The public key, represented as (e, n), is like a toy that can be freely shared among friends. It consists of two numbers: the public exponent, e, and the larger number, n. Just as a toy brings joy to multiple people, the public key enables secure communication between sender and recipient. The magic number, e, serves as the key to unlocking the encryption process, and the larger number, n, forms the foundation of the encryption algorithm.</i></p>
</div>

<div>
<h4>📂 Encryption: To encrypt a message M, compute C = (M^e) % n</h4>
<p class='description'><b>→ Imagine you have a secret message. Put that message inside a special box, raise it to the power of the magic number, and take the remainder when divided by the larger number. The result is the encrypted message.</b> <i>Encryption is like sealing a secret message inside a special box. To encrypt a message M, we raise it to the power of the public exponent, e, and then take the remainder when divided by the larger number, n. This transformation turns the message into an unreadable form, represented by the ciphertext, C. It's like protecting the secret message with an unbreakable seal, ensuring that only the intended recipient with the private key can unlock and read it.</i></p>
</div>

<div>
<h4>🔓 Decryption: To decrypt the ciphertext C, compute M = (C^d) % n</h4>
<p class='description'><b>→ If you have the encrypted message and the secret numbers, take the encrypted message, raise it to the power of the secret number, and take the remainder when divided by the larger number. The result will be the original secret message.</b> <i>Decryption is like using a special key to unlock a sealed box and reveal the original secret message. To decrypt the ciphertext C, we raise it to the power of the private exponent, d, and then take the remainder when divided by the larger number, n. This reverse transformation, using the private key associated with the public key used for encryption, turns the ciphertext back into the original message, represented by M. It's like unlocking the sealed box and retrieving the hidden treasure inside. Only the intended recipient with the private key can decrypt and read the message.</i></p>
</div>
</body>
  <script>
// Function to generate a random prime number
function getRandomPrimeNumber() {
  // Generate a random number
  var randomNumber = Math.floor(Math.random() * 10000000000) + 1000;

  // Check if it is a prime number
  while (!isPrime(randomNumber)) {
    randomNumber = Math.floor(Math.random() * 10000000000) + 1000;
  }

  return randomNumber;
}

// Function to check if a number is prime
function isPrime(number) {
  if (number < 2) return false;
  for (var i = 2; i <= Math.sqrt(number); i++) {
    if (number % i === 0) {
      return false;
    }
  }
  return true;
}

// Function to generate random prime numbers
function generatePrimeNumbers() {
  var p = getRandomPrimeNumber();
  var q = getRandomPrimeNumber();

  document.getElementById('primeNumbers').textContent = `p = ${p}, q = ${q}`;

  var primeLength = Math.max(Math.floor(Math.log2(p)), Math.floor(Math.log2(q)));
  document.getElementById('primeLength').textContent = ` Prime Length: ${primeLength} bits`;
}

// Generate prime numbers on page load
generatePrimeNumbers();

// Animate changing values every 1 second
setInterval(generatePrimeNumbers, 100);
  </script>
</html>                                       <–got some questions… what if you do like that “<h4>✖️ Calculate n by multiplying p and q: n = p * q<span></span></h4>” and add some javascript to textarea element to represent functionality? so, you should represent randomly changing (or how it performs in actual RSA algorithm) numbers inside this span element. any better ideas? would be nice to animate it through some update time to see the varying values all around, how it should perform in actual RSA algorithm. that is the point here.