updar

src/App.jsx

@@ -16,16 +16,16 @@ function App() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-4">
+    <div className="min-h-screen bg-black text-white flex flex-col items-center justify-center p-4">
       <div className="text-center mb-8">
         <h1 className="text-5xl md:text-7xl font-extrabold mb-2 text-transparent bg-clip-text animated-gradient gradient-text">
           T3XT TR4N5F0RM3R
         </h1>
-        <p className="text-lg md:text-xl text-gray-400">
+        <p className="text-lg md:text-xl text-white">
           Your one-stop tool for text conversions
         </p>
       </div>
-      <div className="w-full max-w-5xl p-6 bg-gray-800 rounded-2xl shadow-2xl">
+      <div className="w-full max-w-5xl p-6 bg-black border-2 border-white rounded-2xl shadow-2xl">
         <Tabs>
           <Tab label="Morse Code">
             <MorseCodeConverter addToMessage={addToCompoundedMessage} />
@@ -48,16 +48,16 @@ function App() {
         </Tabs>
       </div>
 
-      <div className="w-full max-w-5xl p-6 mt-8 bg-gray-800 rounded-2xl shadow-2xl">
+      <div className="w-full max-w-5xl p-6 mt-8 bg-black border-2 border-white rounded-2xl shadow-2xl">
         <h2 className="text-2xl font-bold mb-4 text-white">Compounded Message</h2>
         <textarea
-          className="w-full h-48 p-2 bg-gray-900 border border-gray-700 rounded-md text-white"
+          className="w-full h-48 p-2 bg-black border border-white rounded-md text-white"
           value={compoundedMessage}
           readOnly
           placeholder="Your compounded message will appear here..."
         />
         <button
-          className="mt-4 px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-md text-white font-semibold"
+          className="mt-4 px-4 py-2 bg-invader-pink hover:bg-invader-green rounded-md text-black font-semibold"
           onClick={() => navigator.clipboard.writeText(compoundedMessage)}
         >
           Copy Compounded Message
@@ -71,7 +71,7 @@ function App() {
             href="https://github.com/your-github"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-purple-400 hover:text-pink-500 transition-colors"
+            className="text-invader-green hover:text-invader-pink transition-colors"
           >
             Your Name
           </a>

src/components/Base64Converter.jsx

@@ -51,16 +51,16 @@ const Base64Converter = ({ addToMessage }) => {
   };
 
   return (
-    <div className="p-4 bg-gray-800 rounded-lg">
+    <div className="p-4 bg-black rounded-lg">
       <h2 className="text-2xl font-bold mb-4 text-white">Base64 Converter</h2>
       <div className="grid grid-cols-1 md:grid-cols-[1fr_auto_1fr] gap-4 items-center">
         <div>
-          <label htmlFor="base64-input" className="block text-sm font-medium text-gray-400 mb-2">
+          <label htmlFor="base64-input" className="block text-sm font-medium text-white mb-2">
             {toBase64 ? 'Text' : 'Base64'}
           </label>
           <textarea
             id="base64-input"
-            className="w-full h-32 p-2 bg-gray-900 border border-gray-700 rounded-md text-white focus:ring-blue-500 focus:border-blue-500"
+            className="w-full h-32 p-2 bg-black border border-white rounded-md text-white focus:ring-invader-pink focus:border-invader-pink"
             placeholder={toBase64 ? 'Enter text...' : 'Enter Base64...'}
             value={input}
             onChange={handleInputChange}
@@ -70,7 +70,7 @@ const Base64Converter = ({ addToMessage }) => {
         <div className="flex justify-center">
             <button
                 onClick={swapConversion}
-                className="p-2 bg-gray-700 text-white rounded-full hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+                className="p-2 bg-black border border-white text-white rounded-full hover:bg-invader-green focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-invader-pink"
                 title="Swap conversion direction"
             >
                 <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -80,22 +80,22 @@ const Base64Converter = ({ addToMessage }) => {
         </div>
 
         <div>
-          <label htmlFor="base64-output" className="block text-sm font-medium text-gray-400 mb-2">
+          <label htmlFor="base64-output" className="block text-sm font-medium text-white mb-2">
             {toBase64 ? 'Base64' : 'Text'}
           </label>
-          <div id="base64-output" className="w-full h-32 p-2 bg-gray-900 border border-gray-700 rounded-md text-white relative">
+          <div id="base64-output" className="w-full h-32 p-2 bg-black border border-white rounded-md text-white relative">
             {output}
             {output && !output.startsWith('Error:') && (
               <div className="absolute top-2 right-2 flex flex-col gap-2">
                 <button
                   onClick={copyToClipboard}
-                  className="px-3 py-1 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                  className="px-3 py-1 bg-invader-pink text-black rounded-md hover:bg-invader-green focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-invader-pink"
                 >
                   {copied ? 'Copied!' : 'Copy'}
                 </button>
                 <button
                     onClick={() => addToMessage(output)}
-                    className="px-3 py-1 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
+                    className="px-3 py-1 bg-invader-green text-black rounded-md hover:bg-invader-pink focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-invader-green"
                     >
                     Add
                 </button>

src/components/BinaryConverter.jsx

@@ -50,14 +50,14 @@ const BinaryConverter = ({ addToMessage }) => {
   };
 
   return (
-    <div className="p-4 bg-gray-800 rounded-lg">
+    <div className="p-4 bg-black rounded-lg">
       <h2 className="text-2xl font-bold mb-4 text-white">Binary Converter</h2>
       <div className="grid grid-cols-1 md:grid-cols-[1fr_auto_1fr] gap-4 items-center">
         <div>
-          <label htmlFor="binary-input" className="block text-sm font-medium text-gray-400 mb-2">{toBinary ? 'Text' : 'Binary'}</label>
+          <label htmlFor="binary-input" className="block text-sm font-medium text-white mb-2">{toBinary ? 'Text' : 'Binary'}</label>
           <textarea
             id="binary-input"
-            className="w-full h-32 p-2 bg-gray-900 border border-gray-700 rounded-md text-white focus:ring-blue-500 focus:border-blue-500"
+            className="w-full h-32 p-2 bg-black border border-white rounded-md text-white focus:ring-invader-pink focus:border-invader-pink"
             placeholder={toBinary ? "Enter text to convert to binary" : "Enter binary to convert to text"}
             value={input}
             onChange={handleInputChange}
@@ -66,7 +66,7 @@ const BinaryConverter = ({ addToMessage }) => {
         <div className="flex justify-center">
             <button
                 onClick={swapConversion}
-                className="p-2 bg-gray-700 text-white rounded-full hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+                className="p-2 bg-black border border-white text-white rounded-full hover:bg-invader-green focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-invader-pink"
                 title="Swap conversion direction"
             >
                 <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -75,20 +75,20 @@ const BinaryConverter = ({ addToMessage }) => {
             </button>
         </div>
         <div>
-          <label htmlFor="binary-output" className="block text-sm font-medium text-gray-400 mb-2">{toBinary ? 'Binary' : 'Text'}</label>
-          <div id="binary-output" className="w-full h-32 p-2 bg-gray-900 border border-gray-700 rounded-md text-white relative">
+          <label htmlFor="binary-output" className="block text-sm font-medium text-white mb-2">{toBinary ? 'Binary' : 'Text'}</label>
+          <div id="binary-output" className="w-full h-32 p-2 bg-black border border-white rounded-md text-white relative">
             {output}
             {output && (
               <div className="absolute top-2 right-2 flex flex-col gap-2">
                 <button
                   onClick={copyToClipboard}
-                  className="px-3 py-1 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                  className="px-3 py-1 bg-invader-pink text-black rounded-md hover:bg-invader-green focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-invader-pink"
                 >
                   {copied ? 'Copied!' : 'Copy'}
                 </button>
                 <button
                   onClick={() => addToMessage(output)}
-                  className="px-3 py-1 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
+                  className="px-3 py-1 bg-invader-green text-black rounded-md hover:bg-invader-pink focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-invader-green"
                 >
                   Add
                 </button>

src/components/BrowserView.jsx

@@ -18,7 +18,7 @@ const BrowserView = () => {
   };
 
   return (
-    <div className="p-4 bg-gray-800 rounded-lg text-white">
+    <div className="p-4 bg-black rounded-lg text-white">
       <h2 className="text-2xl font-bold mb-4">Browser</h2>
       <div className="flex space-x-2 mb-4">
         <input
@@ -26,11 +26,11 @@ const BrowserView = () => {
           value={url}
           onChange={handleUrlChange}
           placeholder="Enter a URL"
-          className="w-full p-2 bg-gray-900 border border-gray-700 rounded-md text-white focus:ring-blue-500 focus:border-blue-500"
+          className="w-full p-2 bg-black border border-white rounded-md text-white focus:ring-invader-pink focus:border-invader-pink"
         />
         <button
           onClick={handleLoadUrl}
-          className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+          className="px-4 py-2 bg-invader-pink text-black rounded-md hover:bg-invader-green focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-invader-pink"
         >
           Load
         </button>
@@ -38,7 +38,7 @@ const BrowserView = () => {
       {iframeUrl && (
         <iframe
           src={iframeUrl}
-          className="w-full h-96 rounded-md border border-gray-700"
+          className="w-full h-96 rounded-md border border-white"
           title="Browser"
           sandbox="allow-forms allow-modals allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
         />

src/components/HexConverter.jsx

@@ -59,14 +59,14 @@ const HexConverter = ({ addToMessage }) => {
   };
 
   return (
-    <div className="p-4 bg-gray-800 rounded-lg">
+    <div className="p-4 bg-black rounded-lg">
       <h2 className="text-2xl font-bold mb-4 text-white">Hex Converter</h2>
       <div className="grid grid-cols-1 md:grid-cols-[1fr_auto_1fr] gap-4 items-center">
         <div>
-          <label htmlFor="hex-input" className="block text-sm font-medium text-gray-400 mb-2">{toHex ? 'Text' : 'Hex'}</label>
+          <label htmlFor="hex-input" className="block text-sm font-medium text-white mb-2">{toHex ? 'Text' : 'Hex'}</label>
           <textarea
             id="hex-input"
-            className="w-full h-32 p-2 bg-gray-900 border border-gray-700 rounded-md text-white focus:ring-blue-500 focus:border-blue-500"
+            className="w-full h-32 p-2 bg-black border border-white rounded-md text-white focus:ring-invader-pink focus:border-invader-pink"
             placeholder={toHex ? "Enter text to convert to hexadecimal" : "Enter hexadecimal to convert to text"}
             value={input}
             onChange={handleInputChange}
@@ -75,7 +75,7 @@ const HexConverter = ({ addToMessage }) => {
         <div className="flex justify-center">
             <button
                 onClick={swapConversion}
-                className="p-2 bg-gray-700 text-white rounded-full hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+                className="p-2 bg-black border border-white text-white rounded-full hover:bg-invader-green focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-invader-pink"
                 title="Swap conversion direction"
             >
                 <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -84,20 +84,20 @@ const HexConverter = ({ addToMessage }) => {
             </button>
         </div>
         <div>
-          <label htmlFor="hex-output" className="block text-sm font-medium text-gray-400 mb-2">{toHex ? 'Hex' : 'Text'}</label>
-          <div id="hex-output" className="w-full h-32 p-2 bg-gray-900 border border-gray-700 rounded-md text-white relative">
+          <label htmlFor="hex-output" className="block text-sm font-medium text-white mb-2">{toHex ? 'Hex' : 'Text'}</label>
+          <div id="hex-output" className="w-full h-32 p-2 bg-black border border-white rounded-md text-white relative">
             {output}
             {output && !output.startsWith('Error:') && (
               <div className="absolute top-2 right-2 flex flex-col gap-2">
                 <button
                   onClick={copyToClipboard}
-                  className="px-3 py-1 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                  className="px-3 py-1 bg-invader-pink text-black rounded-md hover:bg-invader-green focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-invader-pink"
                 >
                   {copied ? 'Copied!' : 'Copy'}
                 </button>
                 <button
                   onClick={() => addToMessage(output)}
-                  className="px-3 py-1 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
+                  className="px-3 py-1 bg-invader-green text-black rounded-md hover:bg-invader-pink focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-invader-green"
                 >
                   Add
                 </button>

src/components/LeetConverter.jsx

@@ -56,14 +56,14 @@ const LeetConverter = ({ addToMessage }) => {
     };
 
   return (
-    <div className="p-4 bg-gray-800 rounded-lg">
+    <div className="p-4 bg-black rounded-lg">
       <h2 className="text-2xl font-bold mb-4 text-white">Leet Converter</h2>
       <div className="grid grid-cols-1 md:grid-cols-[1fr_auto_1fr] gap-4 items-center">
         <div>
-          <label htmlFor="leet-input" className="block text-sm font-medium text-gray-400 mb-2">{ toLeet ? 'Text' : 'Leet Speak' }</label>
+          <label htmlFor="leet-input" className="block text-sm font-medium text-white mb-2">{ toLeet ? 'Text' : 'Leet Speak' }</label>
           <textarea
             id="leet-input"
-            className="w-full h-32 p-2 bg-gray-900 border border-gray-700 rounded-md text-white focus:ring-blue-500 focus:border-blue-500"
+            className="w-full h-32 p-2 bg-black border border-white rounded-md text-white focus:ring-invader-pink focus:border-invader-pink"
             placeholder={toLeet ? 'Enter text...' : 'Enter Leet speak...'}
             value={input}
             onChange={handleInputChange}
@@ -72,7 +72,7 @@ const LeetConverter = ({ addToMessage }) => {
         <div className="flex justify-center">
             <button
                 onClick={swapConversion}
-                className="p-2 bg-gray-700 text-white rounded-full hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+                className="p-2 bg-black border border-white text-white rounded-full hover:bg-invader-green focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-invader-pink"
                 title="Swap conversion direction"
             >
                 <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -81,20 +81,20 @@ const LeetConverter = ({ addToMessage }) => {
             </button>
         </div>
         <div>
-          <label htmlFor="leet-output" className="block text-sm font-medium text-gray-400 mb-2">{ toLeet ? 'Leet Speak' : 'Text' }</label>
-          <div id="leet-output" className="w-full h-32 p-2 bg-gray-900 border border-gray-700 rounded-md text-white relative">
+          <label htmlFor="leet-output" className="block text-sm font-medium text-white mb-2">{ toLeet ? 'Leet Speak' : 'Text' }</label>
+          <div id="leet-output" className="w-full h-32 p-2 bg-black border border-white rounded-md text-white relative">
             {output}
             {output && (
               <div className="absolute top-2 right-2 flex flex-col gap-2">
                 <button
                   onClick={copyToClipboard}
-                  className="px-3 py-1 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                  className="px-3 py-1 bg-invader-pink text-black rounded-md hover:bg-invader-green focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-invader-pink"
                 >
                   {copied ? 'Copied!' : 'Copy'}
                 </button>
                 <button
                   onClick={() => addToMessage(output)}
-                  className="px-3 py-1 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
+                  className="px-3 py-1 bg-invader-green text-black rounded-md hover:bg-invader-pink focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-invader-green"
                 >
                   Add
                 </button>