u

page-uc/textEditor.html

@@ -2879,109 +2879,142 @@ <h4>🔒 Text Encryption and Decryption</h4>
 
           <style>
             .crypt-container {
-              display: flex;
+              display: grid;
+              grid-template-columns: 1fr 1fr;
               gap: 2rem;
               padding: 1rem;
             }
 
             @media (max-width: 768px) {
               .crypt-container {
-                flex-direction: column;
+                grid-template-columns: 1fr;
               }
             }
 
             .crypt-section {
-              flex: 1;
-              min-width: 300px;
+              display: flex;
+              flex-direction: column;
+              gap: 1rem;
             }
 
             .crypt-section h3 {
-              margin-bottom: 1rem;
-              color: #333;
+              margin: 0;
+              color: var(--editor-text);
+              font-size: 1.5rem;
             }
 
             .instructions {
+              color: var(--editor-text);
+              opacity: 0.8;
               font-size: 0.9rem;
-              color: #666;
-              margin-bottom: 1rem;
-              line-height: 1.4;
+              line-height: 1.5;
+              margin: 0;
             }
 
             .password-container {
               display: flex;
               gap: 0.5rem;
-              margin: 1rem 0;
+              margin: 0.5rem 0;
             }
 
             .password-container input {
               flex: 1;
-              padding: 0.5rem;
-              border: 1px solid #ccc;
+              padding: 0.75rem;
+              border: 1px solid var(--textarea-border);
               border-radius: 4px;
+              font-size: 1rem;
+              background-color: var(--textarea-bg);
+              color: var(--textarea-text);
             }
 
             .crypt-button {
-              padding: 0.5rem 1rem;
-              background-color: #007bff;
-              color: white;
-              border: none;
+              padding: 0.75rem 1.5rem;
+              background-color: var(--button-bg);
+              color: var(--button-text);
+              border: 1px solid var(--button-border);
               border-radius: 4px;
               cursor: pointer;
+              font-size: 1rem;
             }
 
             .crypt-button:hover {
-              background-color: #0056b3;
+              background-color: var(--button-hover);
+              color: var(--button-hover-text);
             }
 
             .result-container {
               position: relative;
             }
 
-            .result-container textarea {
+            .crypt-textarea {
               width: 100%;
-              min-height: 100px;
-              padding: 0.5rem;
-              margin-bottom: 0.5rem;
-              border: 1px solid #ccc;
+              min-height: 120px;
+              padding: 0.75rem;
+              border: 1px solid var(--textarea-border);
               border-radius: 4px;
+              font-size: 1rem;
               resize: vertical;
+              background-color: var(--textarea-bg);
+              color: var(--textarea-text);
+              font-family: inherit;
+            }
+
+            .crypt-textarea::placeholder {
+              color: var(--textarea-text);
+              opacity: 0.6;
             }
 
-            .result-container .copy-button {
+            .copy-button {
               position: absolute;
               right: 0.5rem;
               top: 0.5rem;
-              padding: 0.25rem 0.5rem;
-              background-color: white;
-              border: 1px solid #ccc;
+              padding: 0.5rem 1rem;
+              background-color: var(--button-bg);
+              color: var(--button-text);
+              border: 1px solid var(--button-border);
               border-radius: 4px;
               cursor: pointer;
+              font-size: 0.9rem;
+            }
+
+            .copy-button:hover {
+              background-color: var(--button-hover);
+              color: var(--button-hover-text);
+            }
+
+            /* Focus styles */
+            .crypt-textarea:focus,
+            .password-container input:focus {
+              outline: none;
+              border-color: var(--button-hover);
             }
           </style>
 
           <div class="crypt-container">
             <div class="crypt-section">
-              <h4>Encrypt Text</h4>
+              <h3>Encrypt Text</h3>
               <p class="instructions">
                 1. Enter text to encrypt below<br />
                 2. Enter a password in the password field<br />
                 3. Click "Encrypt" to generate encrypted text
               </p>
               <textarea
                 id="textToEncrypt"
+                class="crypt-textarea"
                 placeholder="Enter text to encrypt..."
               ></textarea>
               <div class="password-container">
                 <input
                   type="password"
                   id="encryptPassword"
-                  placeholder="Enter password"
+                  placeholder="Enter password (optional)"
                 />
                 <button id="encryptButton" class="crypt-button">Encrypt</button>
               </div>
               <div class="result-container">
                 <textarea
                   id="encryptedText"
+                  class="crypt-textarea"
                   readonly
                   placeholder="Encrypted text will appear here..."
                 ></textarea>
@@ -2990,27 +3023,29 @@ <h4>Encrypt Text</h4>
             </div>
 
             <div class="crypt-section">
-              <h4>Decrypt Text</h4>
+              <h3>Decrypt Text</h3>
               <p class="instructions">
                 1. Paste encrypted text below<br />
                 2. Enter the same password used for encryption<br />
-                3. Click "Decrypt" to reveal the original text
+                3. Click "Decrypt" to reveal original text
               </p>
               <textarea
                 id="textToDecrypt"
+                class="crypt-textarea"
                 placeholder="Enter encrypted text..."
               ></textarea>
               <div class="password-container">
                 <input
                   type="password"
                   id="decryptPassword"
-                  placeholder="Enter password"
+                  placeholder="Enter password (optional)"
                 />
                 <button id="decryptButton" class="crypt-button">Decrypt</button>
               </div>
               <div class="result-container">
                 <textarea
                   id="decryptedText"
+                  class="crypt-textarea"
                   readonly
                   placeholder="Decrypted text will appear here..."
                 ></textarea>