Merge pull request #1923 from Damini2004/Ceaser-Cipher

Ceaser Cipher Added
Sulagna-Dutta-Roy · Jun 25, 2024 · a9ce21a · a9ce21a
2 parents 0b0afd1 + 579188e
commit a9ce21a
Show file tree

Hide file tree

Showing 6 changed files with 380 additions and 0 deletions.
diff --git a/Ceaser Cipher Extension/cipher.css b/Ceaser Cipher Extension/cipher.css
@@ -0,0 +1,108 @@
+body {
+  font-family: Arial, sans-serif;
+  background-color: whitesmoke; /* Dark background color */
+  color: black; /* Light text color */
+  margin: 0;
+  padding: 0;
+}
+header{
+  display: flex;
+  justify-content: space-between;
+  padding: 20px;
+  font-size: 20px;
+}
+h1, h2 {
+  text-align: center;
+  color: black; /* Light heading color */
+}
+#theme-toggle{
+  width: 50px;
+  height: 50px;
+justify-items: center;
+}
+.container{
+  display: flex;
+  justify-content: space-around;
+ padding: 50px;
+}
+#decrypt-button{
+  width: 100%;
+  padding: 10px;
+  border: none;
+  background-color: black; /* Button color */
+  color: #fff; /* Light text color */
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+form {
+
+  border:2px solid black;
+  box-shadow: 2px black; /* White shadow */
+  max-width: 400px;
+  margin: 20px ;
+  background:whitesmoke;
+box-shadow: 32px 32pxpx 32px 32px rgba(21, 26, 106, 0.37);/* Dark form background color */
+backdrop-filter: blur(20px);
+-webkit-backdrop-filter: blur(20px);
+padding: 20px;
+  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
+}
+
+label {
+  font-weight: bold;
+  display: block;
+  margin-bottom: 5px;
+  color: black; /* Light label color */
+}
+
+textarea,
+input[type='number'] {
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid black; /* Dark border color */
+  border-radius: 5px;
+  box-sizing: border-box;
+  background-color: white; /* Dark input background color */
+  color: black; /* Light text color */
+}
+
+input[type='submit'] {
+  width: 100%;
+  padding: 10px;
+  border: none;
+  background-color: black; /* Button color */
+  color: #fff; /* Light text color */
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+input[type='submit']:hover {
+  background-color: rgb(72, 22, 22); /* Button hover color */
+}
+
+#output {
+  max-width: 400px;
+  margin: 20px auto;
+  background-color: whitesmoke; /* Dark output background color */
+  padding: 20px;
+  border-radius: 10px;
+  border: 2px solid black;
+  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); /* White shadow */
+}
+#plaintext{
+  max-width: 400px;
+  margin: 20px ;
+  background-color: whitesmoke; /* Dark output background color */
+  padding: 20px;
+  border-radius: 10px;
+  border: 2px solid black;
+  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); /* White shadow */
+}
+.output-heading {
+  font-size: 1.2em;
+  color: chocolate; /* Light heading color */
+  margin-bottom: 10px;
+}
diff --git a/Ceaser Cipher Extension/image.png b/Ceaser Cipher Extension/image.png
diff --git a/Ceaser Cipher Extension/index.html b/Ceaser Cipher Extension/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Caesar Cipher</title>
+    <link rel="stylesheet" href="style.css" id="theme-style" />
+  </head>
+  <body>
+    <header>
+      <h1>Caesar Cipher</h1>
+      <button id="theme-toggle">🌗</button>
+    </header>
+
+    <div class="container">
+      <div>
+        <form>
+          <label>Plaintext:</label>
+
+          <textarea
+            name="plaintext"
+            placeholder="Add Plaintext here"
+            rows="8"
+            cols="50"
+          ></textarea>
+          <label>Shift:</label>
+          <input type="number" name="shift" value="5" min="1" max="26" />
+          <input type="submit" value="Encrypt" />
+        </form>
+        <h2>Output</h2>
+        <div id="output"></div>
+      </div>
+
+      <div>
+        <form>
+          <label for="ciphertext">Ciphertext:</label>
+          <textarea
+            id="ciphertext"
+            name="ciphertext"
+            type="text"
+            placeholder="Add Ciphertext here"
+            rows="8"
+            cols="50"
+          ></textarea>
+
+          <!-- <input type="text" id="ciphertext" name="ciphertext" > -->
+          <br />
+          <label for="shift">Shift:</label>
+          <input
+            type="number"
+            id="shift"
+            name="shift"
+            min="1"
+            max="25"
+            value="3"
+          />
+          <br />
+          <button type="button" id="decrypt-button">Decrypt</button>
+        </form>
+        <h2>Output</h2>
+        <div id="plaintext"></div>
+      </div>
+    </div>
+
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/Ceaser Cipher Extension/main.js b/Ceaser Cipher Extension/main.js
@@ -0,0 +1,67 @@
+// main.js
+const ALPHABET = 'abcdefghijklmnopqrstuvwxyz';
+
+const form = document.querySelector('form');
+const plaintextInput = document.querySelector('textarea[name="plaintext"]');
+const shiftInput = document.querySelector('input[name="shift"]');
+const outputDiv = document.querySelector('#output');
+const themeToggle = document.getElementById('theme-toggle');
+const themeStyle = document.getElementById('theme-style');
+const decryptButton = document.getElementById('decrypt-button');
+const ciphertextInput = document.getElementById('ciphertext');
+const decryptShiftInput = document.getElementById('shift');
+const plaintextOutputDiv = document.getElementById('plaintext');
+
+// Theme changing code
+themeToggle.addEventListener('click', function() {
+  if (themeStyle.getAttribute('href') === 'style.css') {
+    themeStyle.setAttribute('href', 'cipher.css');
+  } else {
+    themeStyle.setAttribute('href', 'style.css');
+  }
+});
+
+// Encrypt code
+function encrypt(char, shift) {
+  if (ALPHABET.includes(char.toLowerCase())) {
+    const position = ALPHABET.indexOf(char.toLowerCase());
+    const newPosition = (position + shift) % 26;
+    return ALPHABET[newPosition];
+  } else {
+    return char;
+  }
+}
+
+function encryptText(text, shift) {
+  return [...text].map(char => encrypt(char, shift)).join('');
+}
+
+form.addEventListener('submit', (event) => {
+  event.preventDefault();
+  const plaintext = plaintextInput.value;
+  const shift = Number(shiftInput.value);
+  const ciphertext = encryptText(plaintext, shift);
+  outputDiv.innerHTML = ciphertext;
+});
+
+// Decrypt code
+function decrypt(char, shift) {
+  if (ALPHABET.includes(char.toLowerCase())) {
+    const position = ALPHABET.indexOf(char.toLowerCase());
+    const newPosition = (position - shift + 26) % 26;
+    return ALPHABET[newPosition];
+  } else {
+    return char;
+  }
+}
+
+function decryptText(text, shift) {
+  return [...text].map(char => decrypt(char, shift)).join('');
+}
+
+decryptButton.addEventListener('click', () => {
+  const ciphertext = ciphertextInput.value;
+  const shift = Number(decryptShiftInput.value);
+  const plaintext = decryptText(ciphertext, shift);
+  plaintextOutputDiv.textContent = plaintext;
+});
diff --git a/Ceaser Cipher Extension/manifest.json b/Ceaser Cipher Extension/manifest.json
@@ -0,0 +1,11 @@
+{
+    "manifest_version": 3,
+    "name": "Ceaser-Cipher",
+    "version": "1.0",
+    "description": "A fun game to decrypt and encrypt text",
+    "action": {
+      "default_popup": "index.html"
+    },
+    "permissions": []
+  }
+
diff --git a/Ceaser Cipher Extension/style.css b/Ceaser Cipher Extension/style.css
@@ -0,0 +1,128 @@
+body {
+  font-family: Arial, sans-serif;
+  background-color: #050816; /* Dark background color */
+  color: #fff; /* Light text color */
+  margin: 0;
+  padding: 0;
+}
+header {
+  display: flex;
+  justify-content: space-between;
+  padding: 20px;
+  font-size: 20px;
+}
+
+h1,
+h2 {
+  text-align: center;
+  color: #eee; /* Light heading color */
+}
+#theme-toggle {
+  width: 50px;
+  height: 50px;
+}
+form {
+  max-width: 400px;
+  margin: 20px;
+  background: rgba(23, 17, 49, 0.5);
+  box-shadow: 0 8px 32px 0 rgba(21, 26, 106, 0.37); /* Dark form background color */
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); /* White shadow */
+}
+.container {
+  display: flex;
+  justify-content: space-around;
+  padding: 50px;
+}
+label {
+  font-size: 25px;
+  font-weight: bold;
+  display: block;
+  margin-bottom: 5px;
+  color: #ccc; /* Light label color */
+}
+h2,
+h3 {
+  text-align: center;
+}
+textarea,
+input[type="number"] {
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid #555; /* Dark border color */
+  border-radius: 5px;
+  box-sizing: border-box;
+  background-color: #444; /* Dark input background color */
+  color: #fff; /* Light text color */
+}
+/* textarea{
+    height: 200px;
+    width: 400px;
+  } */
+input[type="submit"] {
+  width: 100%;
+  padding: 10px;
+  border: none;
+  background-color: #007bff; /* Button color */
+  color: #fff; /* Light text color */
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+#decrypt-button {
+  width: 100%;
+  padding: 10px;
+  border: none;
+  background-color: #007bff; /* Button color */
+  color: #fff; /* Light text color */
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+input[type="submit"]:hover {
+  background-color: #0056b3; /* Button hover color */
+}
+
+input[type="Decrypt"] {
+  width: 100%;
+  padding: 10px;
+  border: none;
+  background-color: #007bff; /* Button color */
+  color: #fff; /* Light text color */
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+input[type="Decrypt"]:hover {
+  background-color: #0056b3; /* Button hover color */
+}
+
+#output {
+  max-width: 400px;
+  margin: 20px;
+  background-color: #333; /* Dark output background color */
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); /* White shadow */
+}
+#plaintext {
+  color: white;
+  max-width: 400px;
+  margin: 20px auto;
+  background-color: #333; /* Dark output background color */
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); /* White shadow */
+}
+.output-heading {
+  font-size: 1.2em;
+  color: #eee; /* Light heading color */
+  margin-bottom: 10px;
+}