├── image
    ├── ED.png
    ├── kk.jpg
    ├── NEW.png
    └── lock-picture.png
├── LICENSE
├── README.md
├── Text.html
├── index.html
└── encryptor.html


/image/ED.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GxAniket/encryptor-decryptor-version-1/HEAD/image/ED.png


--------------------------------------------------------------------------------
/image/kk.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GxAniket/encryptor-decryptor-version-1/HEAD/image/kk.jpg


--------------------------------------------------------------------------------
/image/NEW.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GxAniket/encryptor-decryptor-version-1/HEAD/image/NEW.png


--------------------------------------------------------------------------------
/image/lock-picture.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GxAniket/encryptor-decryptor-version-1/HEAD/image/lock-picture.png


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2025 GxAniket  
2 | All Rights Reserved.
3 | 
4 | This source code and its contents are protected by copyright law.  
5 | You may not copy, modify, distribute, or use any part of this code  
6 | without explicit written permission from the author.
7 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <h1 align="center">🔐 Encryptor ⇄ Decryptor — Secure Your Files in Browser</h1>
  2 | 
  3 | <p align="center">
  4 |   <img src="https://readme-typing-svg.demolab.com?font=Fira+Code&duration=3000&pause=1000&color=00F7FF&center=true&vCenter=true&width=435&lines=Client-Side+File+Encryption;Secure+%26+Offline+Web+Tool;Built+by+Aniket+Sundriyal" alt="Typing animation" />
  5 | </p>
  6 | 
  7 | ---
  8 | 
  9 | ## 📦 Overview
 10 | 
 11 | **Encryptor ⇄ Decryptor** is a browser-based encryption tool that helps you secure any file using modern cryptographic methods — completely offline.  
 12 | Built with **Vanilla JS** and **Web Crypto API**, it provides a clean UI and strong **AES-GCM encryption** for all file types.
 13 | 
 14 | ---
 15 | 
 16 | ## ✨ Features
 17 | 
 18 | - 🔒 Client-side encryption & decryption — **no server involved**
 19 | - 🛡️ AES-GCM encryption with password protection
 20 | - 📁 Works with **any file format** (images, docs, zips, etc.)
 21 | - ⚡ Fully offline & instant – no installations or uploads
 22 | - 🎯 Easy-to-use interface with helpful instructions
 23 | - 🌐 Compatible with modern browsers (Chrome, Firefox, Edge)
 24 | 
 25 | ---
 26 | 
 27 | ## 🧩 Project Structure
 28 | 
 29 | <pre>
 30 | encryptor-decryptor/
 31 | ├── index.html         ← Landing page with navigation
 32 | ├── encryptor.html     ← Core encryption/decryption logic
 33 | ├── text.html          ← Instructions & user help
 34 | └── README.md
 35 | </pre>
 36 | 
 37 | ---
 38 | 
 39 | ## 🖼️ Screenshots
 40 | 
 41 | ### 📌 Main Menu – `index.html`
 42 | 
 43 | Choose your action: Encrypt, Decrypt, or Instructions.
 44 | 
 45 | ![menu](https://github.com/user-attachments/assets/6ea7d832-e805-41fc-985d-e09c1532aebf)
 46 | 
 47 | ---
 48 | 
 49 | ### 📌 Instruction Page – `text.html`
 50 | 
 51 | A help page that guides users through each step.
 52 | 
 53 | ![text](https://github.com/user-attachments/assets/e4a4b64c-9a99-42fd-b063-a9834a532ccd)
 54 | 
 55 | ---
 56 | 
 57 | ### 📌 Tool in Action – `encryptor.html`
 58 | 
 59 | Select your file → Enter password → Encrypt/Decrypt securely.
 60 | 
 61 | ![file](https://github.com/user-attachments/assets/6bd88d24-d8bc-418b-be84-d8d39558b981)
 62 | 
 63 | ---
 64 | 
 65 | 
 66 | ## 🚀 Live Demo
 67 | 
 68 | > 👉 [Try the App Here](https://gxaniket.github.io/encryptor-decryptor-version-1/)  
 69 | > 🔗 No setup required — just open & use in your browser.
 70 | 
 71 | ---
 72 | 
 73 | ## ⚙️ Tech Stack
 74 | 
 75 | | Purpose             | Tools / Technologies       |
 76 | |---------------------|----------------------------|
 77 | | Frontend UI         | HTML5 + CSS3               |
 78 | | Core Functionality  | JavaScript (Vanilla)       |
 79 | | Cryptography        | Web Crypto API (AES-GCM)   |
 80 | | Hosting             | GitHub Pages               |
 81 | | Editor              | VS Code                    |
 82 | 
 83 | ---
 84 | 
 85 | ## 🧾 Extended Use Case
 86 | 
 87 | > This project was built as a privacy-first tool for users who want **quick encryption without backend dependencies**.  
 88 | > Ideal for students, developers, or anyone needing a **simple and secure file locker** without installing software.
 89 | 
 90 | ---
 91 | 
 92 | ## 🙌 Author
 93 | 
 94 | - Made with 💙 by **Aniket Sundriyal**
 95 | 
 96 | <p align="center">
 97 |   <a href="https://github.com/GxAniket">
 98 |     <img src="https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white" />
 99 |   </a>
100 |   <a href="mailto:sundriyalaniket@gmail.com">
101 |     <img src="https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white" />
102 |   </a>
103 |   <a href="https://www.linkedin.com/in/aniket-sundriyal">
104 |     <img src="https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white" />
105 |   </a>
106 | </p>
107 | 
108 | ---
109 | 
110 | ## 💬 Let’s Connect!
111 | 
112 | If you like the project, don’t forget to ⭐ star it — that motivates me to keep building cool stuff!  
113 | Have feedback or suggestions? Connect on LinkedIn or raise an issue.
114 | 
115 | ---
116 | 
117 | ## 🧾 License
118 | 
119 | This project is open-source and available under the [MIT License](LICENSE).  
120 | Feel free to fork, improve, and build upon it — attribution is appreciated 💙
121 | 
122 | ---
123 | 


--------------------------------------------------------------------------------
/Text.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8"/>
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  6 |   <title>Encryptor-Decrpytor</title>
  7 |   <link rel="icon" type="image/x-icon" href="image/lock-picture.png" />
  8 |   <style>
  9 |     body {
 10 |       font-family: Arial, sans-serif;
 11 |       background-image: url('image/NEW.png');
 12 |       background-repeat: no-repeat;
 13 |       background-position: center;
 14 |       background-size: cover;
 15 |       background-color: rgb(148, 144, 144); /* fallback */
 16 |       border-radius: 15px;
 17 |       margin: 0;
 18 |       padding-top: 80px;
 19 |     }
 20 | 
 21 |     .header {
 22 |       background-color: #070707;
 23 |       color: white;
 24 |       text-align: center;
 25 |       padding: 20px 0;
 26 |       font-size: 28px;
 27 |       position: fixed;
 28 |       top: 0;
 29 |       left: 0;
 30 |       right: 0;
 31 |       z-index: 999;
 32 |     }
 33 | 
 34 |     .back-button {
 35 |       position: fixed;
 36 |       top: 15px;
 37 |       left: 15px;
 38 |       background: none;
 39 |       border: 3px solid #9146ff;
 40 |       box-shadow: 0 0 10px #9146ff;
 41 |       font-size: 22px;
 42 |       color: white;
 43 |       cursor: pointer;
 44 |       z-index: 1001;
 45 |       display: flex;
 46 |       align-items: center;
 47 |       border-radius: 15px;
 48 |       gap: 10px;
 49 |       padding: 6px 12px;
 50 |       transition: all 0.3s ease;
 51 |     }
 52 | 
 53 |     .back-button:hover {
 54 |       color: lightskyblue;
 55 |       background-color: rgba(145, 70, 255, 0.1);
 56 |       border: 3px solid #3df3f0;
 57 |       border-radius: 5px;
 58 |       box-shadow: 0 0 10px #9146ff, 0 0 20px #9146ff;
 59 |     }
 60 | 
 61 |     .container {
 62 |       text-align: center;
 63 |       width: 100%;
 64 |       padding: 20px;
 65 |       max-width: 500px;
 66 |       margin: 0 auto;
 67 |       z-index: 1;
 68 |     }
 69 | 
 70 |     img {
 71 |       width: 350px;
 72 |       border-radius: 30px;
 73 |       height: 100%;
 74 |       box-shadow: #070707 0px 0px 30px;
 75 |       display: block;
 76 |       margin: 40px auto;
 77 |     }
 78 | 
 79 |     textarea, input[type="text"], input[type="number"] {
 80 |       width: 100%;
 81 |       margin: 10px;
 82 |       padding: 10px;
 83 |       background-color: #fcfcfc;
 84 |       border: none;
 85 |       border-radius: 10px;
 86 |       font-size: 16px;
 87 |       box-shadow: black 20px 20px 100px;
 88 |       box-sizing: 100%;
 89 |     }
 90 | 
 91 |     textarea {
 92 |       height: 50px;
 93 |       resize: none;
 94 |     }
 95 | 
 96 |     input[type="number"] {
 97 |       width: 150px;
 98 |       text-align: center;
 99 |     }
100 | 
101 |     .buttons {
102 |       display: flex;
103 |       justify-content: space-between;
104 |     }
105 | 
106 |     .encrypt-btn, .decrypt-btn {
107 |       flex: 1;
108 |       margin: 10px 5px;
109 |       padding: 10px 20px;
110 |       font-size: 16px;
111 |       border: none;
112 |       border-radius: 25px;
113 |       cursor: pointer;
114 |       transition: background-color 0.3s, box-shadow 0.3s;
115 |       color: rgb(7, 0, 0);
116 |     }
117 | 
118 |     .encrypt-btn {
119 |       background-color: #4CAF50;
120 |     }
121 | 
122 |     .encrypt-btn:hover {
123 |       background-color: #09ef4e;
124 |       box-shadow: #e42222 0px 0px 15px;
125 |     }
126 | 
127 |     .decrypt-btn {
128 |       background-color: #ec6473;
129 |     }
130 | 
131 |     .decrypt-btn:hover {
132 |       background-color: #e21717;
133 |       box-shadow: #34f72d 0px 0px 15px;
134 |     }
135 | 
136 |     #about {
137 |       padding: 60px 20px;
138 |       background-color: #000000ae;
139 |       text-align: center;
140 |       font-size: 18px;
141 |       color: #ffffff;
142 |       margin-top: 40px;
143 |     }
144 | 
145 |   </style>
146 | </head>
147 | <body>
148 | 
149 |   <!-- Header -->
150 |   <div class="header">
151 |     <b>Encryptor Text - Decryptor Text</b>
152 |   </div>
153 | 
154 |   <!-- Back Button -->
155 |   <button class="back-button" onclick="history.back()">☜ Back</button>
156 | 
157 |   <!-- Main Content -->
158 |   <div class="container">
159 |     <img src="image/kk.jpg" alt="Encryptor Logo" />
160 |     <textarea id="inputText" placeholder="Enter your text here..."></textarea>
161 |     <input type="number" id="shift" value="2" placeholder="Shift Key (e.g. 3)" />
162 | 
163 |     <div class="buttons">
164 |       <button class="encrypt-btn" onclick="encrypt()">Encrypt</button>
165 |       <button class="decrypt-btn" onclick="decrypt()">Decrypt</button>
166 |     </div>
167 | 
168 |     <textarea id="outputText" placeholder="Result will appear here..." readonly></textarea>
169 |   </div>
170 | 
171 |   <div id="about">
172 |     <h2>About Encryptor - Decryptor</h2>
173 |     <p>The Text Encryptor - Decryptor is a secure web-based utility that allows users to encrypt and decrypt text using a custom password (key).</p>
174 |     <p>This ensures that your message remains private and can only be accessed by someone who knows the correct key.</p>
175 |   </div>
176 | 
177 |   <script>
178 |     function encrypt() {
179 |       const text = document.getElementById("inputText").value;
180 |       const shift = parseInt(document.getElementById("shift").value);
181 |       let result = "";
182 | 
183 |       for (let i = 0; i < text.length; i++) {
184 |         const char = text[i];
185 |         if (char.match(/[a-z]/i)) {
186 |           const code = text.charCodeAt(i);
187 |           let shiftedCode;
188 |           if (code >= 65 && code <= 90) {
189 |             shiftedCode = ((code - 65 + shift) % 26) + 65;
190 |           } else if (code >= 97 && code <= 122) {
191 |             shiftedCode = ((code - 97 + shift) % 26) + 97;
192 |           }
193 |           result += String.fromCharCode(shiftedCode);
194 |         } else {
195 |           result += char;
196 |         }
197 |       }
198 | 
199 |       document.getElementById("outputText").value = result;
200 |     }
201 | 
202 |     function decrypt() {
203 |       const text = document.getElementById("inputText").value;
204 |       const shift = parseInt(document.getElementById("shift").value);
205 |       let result = "";
206 | 
207 |       for (let i = 0; i < text.length; i++) {
208 |         const char = text[i];
209 |         if (char.match(/[a-z]/i)) {
210 |           const code = text.charCodeAt(i);
211 |           let shiftedCode;
212 |           if (code >= 65 && code <= 90) {
213 |             shiftedCode = ((code - 65 - shift + 26) % 26) + 65;
214 |           } else if (code >= 97 && code <= 122) {
215 |             shiftedCode = ((code - 97 - shift + 26) % 26) + 97;
216 |           }
217 |           result += String.fromCharCode(shiftedCode);
218 |         } else {
219 |           result += char;
220 |         }
221 |       }
222 | 
223 |       document.getElementById("outputText").value = result;
224 |     }
225 |   </script>
226 | </body>
227 | </html>
228 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5 |   <title>Encryptor - Decryptor</title>
  6 |   <link rel="icon" type="image/x-icon" href=\image\lock-picture.png>
  7 |   <style>
  8 |     * {
  9 |       margin: 0px;
 10 |       padding: 0px;
 11 |       box-sizing: border-box;
 12 |     }
 13 | 
 14 |     html {
 15 |       scroll-behavior: smooth; /* Enables smooth scrolling */
 16 |     }
 17 | 
 18 |     body {
 19 |     font-family: 'Segoe UI', sans-serif;
 20 |     background-color: #f4f4f4; /* fallback color */
 21 |     background-image: url('image/NEW.png'); /* relative path */
 22 |     background-size: cover;           /* scales image to fill the screen */
 23 |     background-repeat: no-repeat;     /* avoids repeating the image */
 24 |     background-position: center;      /* centers the image */
 25 |     }
 26 |     /* HEADER */
 27 |     .header {
 28 |       background-color: #070707;
 29 |       color: white;
 30 |       text-align: center;
 31 |       padding: 20px 0;
 32 |       font-size: 28px;
 33 |       position: relative;
 34 |     }
 35 | 
 36 |     /* MENU BUTTON */
 37 |     .menu-toggle {
 38 |       position: absolute;
 39 |       top: 15px;
 40 |       left: 15px;
 41 |       background: none;
 42 |       border: 3px solid #9146ff; /* vibrant violet */
 43 |       box-shadow: 0 0 20px #9146ff; /* glowing border */
 44 |       border-radius: 15px;
 45 |       font-size: 22px;
 46 |       color: white;
 47 |       cursor: pointer;
 48 |       z-index: 1001;
 49 |       display: flex;
 50 |       align-items: center;
 51 |       gap: 15px;
 52 |       padding: 5px 10px;
 53 |       transition: background 0.3s;
 54 |     }
 55 | 
 56 |     .menu-toggle:hover {
 57 |       color: #82e0f6;
 58 |       border: 3px solid #0be728;
 59 |       box-shadow: 0 0 20px #08e451;
 60 |       background-color: rgba(122, 27, 27, 0.1);
 61 |       border-radius: 5px;
 62 |     }
 63 | 
 64 |     /* SIDE MENU */
 65 |     .side-menu {
 66 |       position: fixed;
 67 |       top: 0;
 68 |       left: -250px;
 69 |       height: 100%;
 70 |       width: 150px;
 71 |       background-color: #2726269a;
 72 |       color: rgb(14, 14, 14);
 73 |       padding-top: 80px;
 74 |       transition: left 0.4s ease;
 75 |       box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
 76 |       z-index: 1000;
 77 |     }
 78 | 
 79 |     .side-menu.open {
 80 |       left: 0px; /* Slide in from the left */
 81 |     }
 82 | 
 83 |     .side-menu a {
 84 |       display: block;
 85 |       padding: 15px 30px;
 86 |       color: white;
 87 |       text-decoration: none;
 88 |       font-size: 22px;
 89 |       border-bottom: 1px solid #040000;
 90 |       transition: background 0.3s, transform 0.3s;
 91 |     }
 92 | 
 93 |     .side-menu a:hover {
 94 |       background-color: #0c0c0ca1;
 95 |       box-shadow: 0 0 20px #67e390;
 96 |       transform: translateX(5px);
 97 |     }
 98 | 
 99 |     /* MAIN CONTENT */
100 |     .main {
101 |       text-align: center;
102 |       padding: 60px 20px;
103 |     }
104 | 
105 |     .logo img {
106 |      max-width: 300px; /* Ensured responsiveness */
107 |      height: auto; /* Maintain aspect ratio */
108 |      margin-bottom: 40px; /* Increased margin */
109 |      box-shadow: 0 0 20px #00090a;
110 |      border-radius: 8px; /* Slightly rounded corners for logo */
111 |     }
112 | 
113 |     .nav-buttons {
114 |       display: flex;
115 |       justify-content: center;
116 |       gap: 30px;
117 |       border-radius: 8px;
118 |       flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
119 |       margin-top: 30px;
120 |     }
121 |     
122 |     .nav-buttons a {
123 |       padding: 15px 30px;
124 |       background-color: #00060b;
125 |       color: white;
126 |       border-radius: 8px;
127 |       box-shadow:0 0 20px#28d4da;
128 |       border: 4px solid #9146ff; /* vibrant violet */
129 |       text-decoration: none;
130 |       font-size: 16px;
131 |       border-radius: 8px;
132 |       transition: background 0.3s;
133 |     }
134 | 
135 |     .nav-buttons a:hover {
136 |      background-color: #00090a;
137 |      color: #88f682;
138 |      transform: translateX(5px);
139 |      border-radius: 30px; /* more curved shape */
140 |      box-shadow: 0 0 20px #9146ff;
141 |     }
142 | 
143 |     /* ABOUT SECTION */
144 |     #about {
145 |       padding: 60px 20px;
146 |       background-color: #0a010196;
147 |       text-align: center;
148 |       font-size: 18px;
149 |       margin-top: 20px;
150 |       color: #ffffff;
151 |     }
152 | 
153 |     /* FOOTER */
154 |     .footer {
155 |       position: fixed;
156 |       bottom: 0;
157 |       width: 100%;
158 |       background-color: #222;
159 |       color: #ccc;
160 |       text-align: center;
161 |       padding: 10px 0;
162 |       font-size:14px;
163 |     }
164 | 
165 |     .footer a {
166 |       color: #e0e0e0;
167 |       text-decoration: none;
168 |     }
169 | 
170 |     .footer a:hover {
171 |       text-decoration: underline;
172 |     }
173 | 
174 |     .side-menu::-webkit-scrollbar {
175 |       width: 0;
176 |     }
177 |   </style>
178 | </head>
179 | <body>
180 | 
181 |   <!-- Menu Toggle Button -->
182 |   <button class="menu-toggle" onclick="toggleMenu()">☰ <span>Menu</span></button>
183 | 
184 | <!-- Side Menu -->
185 | <div class="side-menu" id="sideMenu">
186 |   <a href="Text.html"><b>Encryptor Text</b></a>
187 |   <a href="encryptor.html"><b>File Encryption</b></a>
188 |   <a href="https://github.com/GxAniket" target="_blank"><b>Github</b></a>
189 |   <a href="#about" onclick="toggleMenu()"><b>About</b></a> <!-- Scrolls to #about -->
190 | </div>
191 | 
192 |   <!-- Header -->
193 |   <div class="header">
194 |     <b>Encryptor - Decryptor</b>
195 |   </div>
196 | 
197 |   <!-- Main Section -->
198 |   <div class="main">
199 |     <div class="logo">
200 |       <img src="image/ED.png" alt="Encryptor Logo">
201 |     </div>
202 | 
203 |     <div class="nav-buttons">
204 |       <a href="Text.html"><b>Encrypt-Text</b></a>
205 |       <a href="encryptor.html"><b>Encrypt-File</b></a>
206 |     </div>
207 |   </div>
208 |   
209 |   <div id="about">
210 |         <h2>About Encryptor - Decryptor</h2>
211 |         <p>This tool provides a secure and easy way to encrypt and decrypt your sensitive text and files. Whether you need to protect private messages or secure important documents.</p>
212 |         <p>our solution ensures your data remains confidential.</p>
213 |         <p>Choose between text encryption for quick messages or file encryption for larger documents. We are committed to providing robust and user-friendly encryption services.</p>
214 |     </div>
215 | 
216 |   <!-- Footer -->
217 | <footer style="text-align: center; padding: 10px; color: white;">
218 |   <p>
219 |     Made with ❤️ by Aniket Sundriyal |
220 |     <a href="https://github.com/GxAniket" target="_blank" style="color: lightskyblue; text-decoration: underline;">
221 |       Click here for GitHub
222 |     </a>
223 |   </p>
224 | </footer>
225 | 
226 |   <!-- JavaScript -->
227 |   <script>
228 |     function toggleMenu() {
229 |       const menu = document.getElementById("sideMenu");
230 |       menu.classList.toggle("open");
231 |     }
232 |   </script>
233 | </body>
234 | </html>
235 | 


--------------------------------------------------------------------------------
/encryptor.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>File Encryptor ⇄ Decryptor</title>
  8 |     <style>
  9 |       :root {
 10 |         --bg: #0f172a;
 11 |         --surface: #1e293b;
 12 |         --accent: #3b82f6;
 13 |         --text: #f1f5f9;
 14 |       }
 15 |       * {
 16 |         box-sizing: border-box;
 17 |         font-family: ui-rounded, "Segoe UI", system-ui, sans-serif;
 18 |       }
 19 |       .header {
 20 |       background-color: #070707;
 21 |       color: white;
 22 |       text-align: center;
 23 |       padding: 18px 0;
 24 |       font-size: 25px;
 25 |       position: fixed;
 26 |       top: 0;
 27 |       left: 0;
 28 |       right: 0;
 29 |       z-index: 999;
 30 |     }
 31 |       body {
 32 |         margin: auto;
 33 |         min-height: 100vh;
 34 |         display: grid;
 35 |         place-items: center;
 36 |         background: var(--bg) url('image/NEW.png') no-repeat center center fixed;
 37 |         background-size: cover;
 38 |         color: var(--text);
 39 |         padding-top: 60px;
 40 |       }
 41 |       .card {
 42 |         width: min(90vw, 480px);
 43 |         background: var(--surface);
 44 |         border-radius: 1.5rem;
 45 |         margin-top: 80px;
 46 |         padding: 10px 20px;
 47 |         box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
 48 |       }
 49 |       h1 {
 50 |         font-size: 1.5rem;
 51 |         margin: 0 0 1.5rem;
 52 |         text-align: center;
 53 |       }
 54 |       label {
 55 |         display: block;
 56 |         margin-block: 0.75rem 0.20rem;
 57 |         font-size: 0.9rem;
 58 |       }
 59 |       input[type="file"],
 60 |       input[type="password"] {
 61 |         width: 100%;
 62 |         padding: 0.75rem 1rem;
 63 |         border: 2px solid var(--accent);
 64 |         border-radius: 0.75rem;
 65 |         background: var(--bg);
 66 |         color: var(--text);
 67 |       }
 68 |       .btn-row {
 69 |         display: flex;
 70 |         gap: 1rem;
 71 |         margin-top: 1.5rem;
 72 |       }
 73 |       button {
 74 |         flex: 1;
 75 |         padding: 0.75rem 1rem;
 76 |         border: none;
 77 |         border-radius: 0.75rem;
 78 |         background: var(--accent);
 79 |         color: var(--text);
 80 |         font-weight: 600;
 81 |         cursor: pointer;
 82 |         transition: transform 0.15s ease;
 83 |       }
 84 |       button:hover {
 85 |         transform: translateY(-2px);
 86 |       }
 87 |       button:disabled {
 88 |         background: #64748b;
 89 |         cursor: not-allowed;
 90 |       }
 91 |       .status {
 92 |         margin-top: 1rem;
 93 |         min-height: 1.25rem;
 94 |         text-align: center;
 95 |         font-size: 0.875rem;
 96 |       }
 97 | 
 98 |       .back-button {
 99 |         position: fixed;
100 |         top: 15px;
101 |         left: 15px;
102 |         background: black;
103 |         border: 3px solid #9146ff;
104 |         box-shadow: 0 0 10px #9146ff;
105 |         font-size: 20px;
106 |         color: white;
107 |         cursor: pointer;
108 |         z-index: 1001;
109 |         display: flex;
110 |         align-items: center;
111 |         border-radius: 15px;
112 |         gap: 10px;
113 |         padding: 6px 12px;
114 |         transition: all 0.3s ease;
115 |       }
116 | 
117 |       .back-button:hover {
118 |         color: lightskyblue;
119 |         background-color: rgba(145, 70, 255, 0.1);
120 |         border: 3px solid #3df3f0;
121 |         background: black;
122 |         border-radius: 5px;
123 |         box-shadow: 0 0 10px #9146ff, 0 0 20px #9146ff;
124 |       }
125 | 
126 |       .about {
127 |        padding: 10px 20px;
128 |       background-color: #000000ae;
129 |       text-align: center;
130 |       font-size: 18px;
131 |       color: #ffffff;
132 |       margin-top: 8%;
133 |       }
134 | 
135 |     </style>
136 |   </head>
137 |   <body>
138 | 
139 |     <!-- Header -->
140 |   <div class="header">
141 |     <b>Encryptor files - Decryptor files</b>
142 |   </div>
143 | 
144 |     <!-- Back Button -->
145 |     <button class="back-button" onclick="history.back()">☜ Back</button>
146 | 
147 |     <!-- Main UI -->
148 |     <main class="card">
149 |       <h1>File Encryptor ⇄ Decryptor</h1>
150 | 
151 |       <label for="fileInput">Choose file</label>
152 |       <input id="fileInput" type="file" />
153 | 
154 |       <label for="passwordInput">Password (min 8 chars)</label>
155 |       <input id="passwordInput" type="password" autocomplete="new-password" minlength="8" />
156 | 
157 |       <div class="btn-row">
158 |         <button id="encryptBtn">Encrypt 📁🔒</button>
159 |         <button id="decryptBtn">Decrypt 📂🔑</button>
160 |       </div>
161 | 
162 |       <div id="status" class="status"></div>
163 |     </main>
164 | 
165 |     <!-- About Section -->
166 |     <div class="about">
167 |       <h2 style="margin-bottom: 0.5rem;">About This Tool</h2>
168 |       <p>
169 |         The <strong>File Encryptor ⇄ Decryptor</strong> is a secure, browser-based application developed to help users protect their personal or sensitive files through strong encryption techniques. It allows you to encrypt any file using a password and later decrypt it only with the correct password.
170 |       </p>
171 |       <p>
172 |       All encryption and decryption processes are handled entirely on your device. <strong>No data is uploaded or stored anywhere</strong>, making this tool completely private and secure.
173 |       </p>
174 |     </div>
175 | 
176 |     <!-- JavaScript -->
177 |     <script>
178 |       const enc = new TextEncoder();
179 |       const dec = new TextDecoder();
180 | 
181 |       const toB64 = (buf) => btoa(String.fromCharCode(...new Uint8Array(buf)));
182 |       const fromB64 = (str) => Uint8Array.from(atob(str), (c) => c.charCodeAt(0));
183 | 
184 |       function download(data, filename, mime = "application/octet-stream") {
185 |         const blob = new Blob([data], { type: mime });
186 |         const a = document.createElement("a");
187 |         a.href = URL.createObjectURL(blob);
188 |         a.download = filename;
189 |         a.click();
190 |         URL.revokeObjectURL(a.href);
191 |       }
192 | 
193 |       async function deriveKey(password, salt) {
194 |         const baseKey = await crypto.subtle.importKey(
195 |           "raw",
196 |           enc.encode(password),
197 |           { name: "PBKDF2" },
198 |           false,
199 |           ["deriveKey"]
200 |         );
201 |         return crypto.subtle.deriveKey(
202 |           {
203 |             name: "PBKDF2",
204 |             salt,
205 |             iterations: 250000,
206 |             hash: "SHA-256",
207 |           },
208 |           baseKey,
209 |           { name: "AES-GCM", length: 256 },
210 |           false,
211 |           ["encrypt", "decrypt"]
212 |         );
213 |       }
214 | 
215 |       async function encryptFile(file, password) {
216 |         const fileData = await file.arrayBuffer();
217 |         const salt = crypto.getRandomValues(new Uint8Array(16));
218 |         const iv = crypto.getRandomValues(new Uint8Array(12));
219 |         const key = await deriveKey(password, salt);
220 |         const cipherBuffer = await crypto.subtle.encrypt({ name: "AES-GCM", iv }, key, fileData);
221 |         const payload = JSON.stringify({
222 |           name: file.name,
223 |           salt: toB64(salt),
224 |           iv: toB64(iv),
225 |           data: toB64(cipherBuffer),
226 |         });
227 |         download(payload, file.name + ".enc", "text/plain");
228 |       }
229 | 
230 |       async function decryptFile(file, password) {
231 |         const text = await file.text();
232 |         let payload;
233 |         try {
234 |           payload = JSON.parse(text);
235 |         } catch (_) {
236 |           throw new Error("Not a valid .enc file");
237 |         }
238 | 
239 |         const { name, salt, iv, data } = payload;
240 |         const saltBuf = fromB64(salt);
241 |         const ivBuf = fromB64(iv);
242 |         const cipherBuf = fromB64(data);
243 |         const key = await deriveKey(password, saltBuf);
244 |         let plainBuffer;
245 |         try {
246 |           plainBuffer = await crypto.subtle.decrypt({ name: "AES-GCM", iv: ivBuf }, key, cipherBuf);
247 |         } catch (e) {
248 |           throw new Error("Wrong password or corrupted file");
249 |         }
250 |         download(plainBuffer, name);
251 |       }
252 | 
253 |       const fileInput = document.getElementById("fileInput");
254 |       const passwordInput = document.getElementById("passwordInput");
255 |       const encryptBtn = document.getElementById("encryptBtn");
256 |       const decryptBtn = document.getElementById("decryptBtn");
257 |       const status = document.getElementById("status");
258 | 
259 |       function setStatus(msg, error = false) {
260 |         status.textContent = msg;
261 |         status.style.color = error ? "#f87171" : "#38bdf8";
262 |       }
263 | 
264 |       encryptBtn.addEventListener("click", async () => {
265 |         const file = fileInput.files[0];
266 |         const pwd = passwordInput.value;
267 |         if (!file || pwd.length < 8) return setStatus("Choose a file & 8-char password", true);
268 |         setStatus("Encrypting… please wait");
269 |         encryptBtn.disabled = decryptBtn.disabled = true;
270 |         try {
271 |           await encryptFile(file, pwd);
272 |           setStatus("Encrypted & downloaded ✔️");
273 |         } catch (e) {
274 |           console.error(e);
275 |           setStatus(e.message, true);
276 |         } finally {
277 |           encryptBtn.disabled = decryptBtn.disabled = false;
278 |         }
279 |       });
280 | 
281 |       decryptBtn.addEventListener("click", async () => {
282 |         const file = fileInput.files[0];
283 |         const pwd = passwordInput.value;
284 |         if (!file || pwd.length < 8) return setStatus("Choose a .enc file & 8-char password", true);
285 |         setStatus("Decrypting… please wait");
286 |         encryptBtn.disabled = decryptBtn.disabled = true;
287 |         try {
288 |           await decryptFile(file, pwd);
289 |           setStatus("Decrypted & downloaded ✔️");
290 |         } catch (e) {
291 |           console.error(e);
292 |           setStatus(e.message, true);
293 |         } finally {
294 |           encryptBtn.disabled = decryptBtn.disabled = false;
295 |         }
296 |       });
297 |     </script>
298 |   </body>
299 | </html>
300 | 


--------------------------------------------------------------------------------