Spaces:

HedronCreeper
/

chromacode

Sleeping

App Files Files Community

HedronCreeper commited on Mar 31

Commit

a14cf21

verified ·

1 Parent(s): ab6af8b

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +42 -59

static/index.html CHANGED Viewed

@@ -25,17 +25,12 @@
     -webkit-text-fill-color: transparent;
     letter-spacing: -1px;
   }
-  p.sub {
-    color: #555570;
-    font-size: 0.9rem;
-    margin-top: -1.5rem;
-    text-align: center;
-  }
   .row {
     display: flex;
     gap: 1.5rem;
     width: 100%;
-    max-width: 800px;
     flex-wrap: wrap;
   }
   .card {
@@ -49,13 +44,7 @@
     flex-direction: column;
     gap: 1rem;
   }
-  .card h2 {
-    font-size: 1rem;
-    font-weight: 600;
-    color: #a0a0c0;
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-  }
   textarea, input[type="file"] {
     width: 100%;
     background: #080810;
@@ -67,14 +56,10 @@
     outline: none;
     transition: border-color 0.2s;
     resize: vertical;
-    min-height: 100px;
   }
   textarea:focus { border-color: #7c3aed; }
-  input[type="file"] {
-    min-height: unset;
-    cursor: pointer;
-    padding: 0.6rem;
-  }
   button {
     width: 100%;
     padding: 0.75rem;
@@ -88,30 +73,16 @@
     transition: opacity 0.2s;
   }
   button:hover { opacity: 0.85; }
-  .status {
-    font-size: 0.8rem;
-    color: #555570;
-    text-align: center;
-    min-height: 1em;
-  }
-  .preview {
-    text-align: center;
-  }
-  .preview img {
     image-rendering: pixelated;
-    width: 128px;
-    height: 128px;
     border-radius: 8px;
     border: 1px solid #222238;
   }
-  .download {
-    display: inline-block;
-    margin-top: 0.5rem;
-    font-size: 0.8rem;
-    color: #a78bfa;
-    cursor: pointer;
-    text-decoration: underline;
-  }
   .decoded-text {
     background: #080810;
     border: 1px solid #222238;
@@ -121,18 +92,19 @@
     color: #e0e0f0;
     word-break: break-all;
     display: none;
   }
 </style>
 </head>
 <body>
   <h1>ChromaCode</h1>
-  <p class="sub">Encode text into colour. Decode it back.</p>
   <div class="row">
     <div class="card">
       <h2>Encode</h2>
-      <textarea id="encodeInput" placeholder="Type anything..."></textarea>
-      <button onclick="encodeText()">Generate ChromaCode</button>
       <div class="status" id="encodeStatus"></div>
       <div class="preview" id="encodePreview"></div>
     </div>
@@ -140,13 +112,15 @@
     <div class="card">
       <h2>Decode</h2>
       <input type="file" id="decodeFile" accept="image/png">
-      <button onclick="decodeImage()">Decode Image</button>
       <div class="status" id="decodeStatus"></div>
       <div class="decoded-text" id="decodedText"></div>
     </div>
   </div>
   <script>
     async function encodeText() {
       const text = document.getElementById("encodeInput").value.trim();
       if (!text) return;
@@ -154,6 +128,7 @@
       const preview = document.getElementById("encodePreview");
       status.textContent = "Encoding...";
       preview.innerHTML = "";
       const res = await fetch("/encode", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -162,31 +137,39 @@
       const data = await res.json();
       if (data.image) {
         const src = "data:image/png;base64," + data.image;
-        preview.innerHTML = `
-          <img src="${src}" alt="ChromaCode">
-          <br>
-          <a class="download" onclick="downloadImage('${src}')">Download PNG</a>
-        `;
-        status.textContent = "Done!";
       } else {
         status.textContent = "Error: " + (data.error || "Unknown");
       }
     }
-    function downloadImage(src) {
-      const a = document.createElement("a");
-      a.href = src;
-      a.download = "chromacode.png";
-      a.click();
-    }
     async function decodeImage() {
       const file = document.getElementById("decodeFile").files[0];
       if (!file) return;
       const status = document.getElementById("decodeStatus");
       const output = document.getElementById("decodedText");
-      status.textContent = "Decoding...";
       output.style.display = "none";
       const form = new FormData();
       form.append("file", file);
       const res = await fetch("/decode", { method: "POST", body: form });
@@ -194,7 +177,7 @@
       if (data.text) {
         output.textContent = data.text;
         output.style.display = "block";
-        status.textContent = "Decoded!";
       } else {
         status.textContent = "Error: " + (data.error || "Unknown");
       }

     -webkit-text-fill-color: transparent;
     letter-spacing: -1px;
   }
+  p.sub { color: #555570; font-size: 0.9rem; margin-top: -1.5rem; text-align: center; }
   .row {
     display: flex;
     gap: 1.5rem;
     width: 100%;
+    max-width: 820px;
     flex-wrap: wrap;
   }
   .card {
     flex-direction: column;
     gap: 1rem;
   }
+  .card h2 { font-size: 0.85rem; font-weight: 600; color: #a0a0c0; letter-spacing: 0.08em; text-transform: uppercase; }
   textarea, input[type="file"] {
     width: 100%;
     background: #080810;
     outline: none;
     transition: border-color 0.2s;
     resize: vertical;
+    min-height: 110px;
   }
   textarea:focus { border-color: #7c3aed; }
+  input[type="file"] { min-height: unset; cursor: pointer; padding: 0.6rem; }
   button {
     width: 100%;
     padding: 0.75rem;
     transition: opacity 0.2s;
   }
   button:hover { opacity: 0.85; }
+  .status { font-size: 0.8rem; color: #555570; text-align: center; min-height: 1em; }
+  .preview { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
+  .preview canvas {
     image-rendering: pixelated;
+    width: 150px;
+    height: 150px;
     border-radius: 8px;
     border: 1px solid #222238;
   }
+  .download { font-size: 0.8rem; color: #a78bfa; cursor: pointer; text-decoration: underline; }
   .decoded-text {
     background: #080810;
     border: 1px solid #222238;
     color: #e0e0f0;
     word-break: break-all;
     display: none;
+    white-space: pre-wrap;
   }
 </style>
 </head>
 <body>
   <h1>ChromaCode</h1>
+  <p class="sub">Steganography. Hidden in plain sight.</p>
   <div class="row">
     <div class="card">
       <h2>Encode</h2>
+      <textarea id="encodeInput" placeholder="Type a message or paragraph..."></textarea>
+      <button onclick="encodeText()">Hide in Image</button>
       <div class="status" id="encodeStatus"></div>
       <div class="preview" id="encodePreview"></div>
     </div>
     <div class="card">
       <h2>Decode</h2>
       <input type="file" id="decodeFile" accept="image/png">
+      <button onclick="decodeImage()">Extract Message</button>
       <div class="status" id="decodeStatus"></div>
       <div class="decoded-text" id="decodedText"></div>
     </div>
   </div>
   <script>
+    let lastImageSrc = null;
     async function encodeText() {
       const text = document.getElementById("encodeInput").value.trim();
       if (!text) return;
       const preview = document.getElementById("encodePreview");
       status.textContent = "Encoding...";
       preview.innerHTML = "";
       const res = await fetch("/encode", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
       const data = await res.json();
       if (data.image) {
         const src = "data:image/png;base64," + data.image;
+        lastImageSrc = src;
+        const canvas = document.createElement("canvas");
+        canvas.width = 25;
+        canvas.height = 25;
+        const ctx = canvas.getContext("2d");
+        const img = new window.Image();
+        img.onload = () => ctx.drawImage(img, 0, 0);
+        img.src = src;
+        preview.appendChild(canvas);
+        const dl = document.createElement("span");
+        dl.className = "download";
+        dl.textContent = "Download PNG";
+        dl.onclick = () => {
+          const a = document.createElement("a");
+          a.href = src;
+          a.download = "chromacode.png";
+          a.click();
+        };
+        preview.appendChild(dl);
+        status.textContent = "Encoded! Looks like a normal image.";
       } else {
         status.textContent = "Error: " + (data.error || "Unknown");
       }
     }
     async function decodeImage() {
       const file = document.getElementById("decodeFile").files[0];
       if (!file) return;
       const status = document.getElementById("decodeStatus");
       const output = document.getElementById("decodedText");
+      status.textContent = "Extracting...";
       output.style.display = "none";
       const form = new FormData();
       form.append("file", file);
       const res = await fetch("/decode", { method: "POST", body: form });
       if (data.text) {
         output.textContent = data.text;
         output.style.display = "block";
+        status.textContent = "Message extracted!";
       } else {
         status.textContent = "Error: " + (data.error || "Unknown");
       }