New better logo.

frontends/web/static/favicon.svg

@@ -1,15 +1,111 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+<svg width="32" height="32" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
   <defs>
-    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
+    <linearGradient id="sunsetGradientFavicon" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0%" style="stop-color:#667eea"/>
+      <stop offset="0%" stop-color="#FFD873"/>
-      <stop offset="100%" style="stop-color:#764ba2"/>
+      <stop offset="40%" stop-color="#FF7E88"/>
+      <stop offset="75%" stop-color="#D45BFF"/>
+      <stop offset="100%" stop-color="#3B2A88"/>
     </linearGradient>
+
+    <linearGradient id="cipherGradientFavicon" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="#D2C8FF" stop-opacity="1"/>
+      <stop offset="100%" stop-color="#A796FF" stop-opacity="1"/>
+    </linearGradient>
+
+    <linearGradient id="lockBodyGradientFavicon" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#FFF4C7"/>
+      <stop offset="40%" stop-color="#F7D978"/>
+      <stop offset="100%" stop-color="#D49A27"/>
+    </linearGradient>
+
+    <filter id="lockShadowFavicon" x="-15%" y="-15%" width="130%" height="130%">
+      <feDropShadow dx="0" dy="1" stdDeviation="0.8"
+                    flood-color="#000000" flood-opacity="0.45"/>
+    </filter>
   </defs>
-  <path d="M32 4 L56 14 L56 32 C56 48 44 58 32 62 C20 58 8 48 8 32 L8 14 Z" fill="url(#grad)"/>
+
-  <rect x="16" y="18" width="32" height="24" rx="2" fill="#1a1a2e" stroke="#fff" stroke-width="1.5"/>
+  <!-- Inset and scaled: margin + size tweak -->
-  <polygon points="16,42 26,30 34,36 48,22 48,42" fill="#667eea" opacity="0.5"/>
+  <g transform="translate(5 5) scale(0.9)">
-  <rect x="24" y="30" width="16" height="12" rx="2" fill="#fff"/>
+    <g transform="rotate(-6 38 44)">
-  <path d="M27 30 L27 25 C27 20 37 20 37 25 L37 30" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round"/>
+      <!-- Frame -->
-  <circle cx="32" cy="35" r="2.5" fill="url(#grad)"/>
+      <rect x="0" y="0" width="76" height="88"
-  <rect x="31" y="35" width="2" height="4" fill="url(#grad)"/>
+            rx="1" ry="1"
+            fill="#FCFCFF"
+            stroke="#E0E0F4"
+            stroke-width="1"/>
+
+      <!-- Photo area (left edge at x=6) -->
+      <rect x="6" y="6" width="64" height="48"
+            rx="0.5" ry="0.5"
+            fill="url(#sunsetGradientFavicon)"
+            stroke="#3C3C46"
+            stroke-width="1"
+            stroke-opacity="0.7"/>
+
+      <!-- FAR BACKGROUND BUILDINGS -->
+      <g fill="#59407E" opacity="0.55">
+        <rect x="20" y="35" width="4" height="7"/>
+        <rect x="32" y="32" width="5" height="10"/>
+        <rect x="34" y="30.5" width="0.7" height="2.3"/>
+        <rect x="46" y="34" width="4" height="8"/>
+        <rect x="51" y="36" width="3" height="6"/>
+      </g>
+
+      <!-- Hills / skyline -->
+      <path d="M6 44 Q22 36 36 39 T70 42 L70 54 L6 54 Z"
+            fill="#351C6A" opacity="1"/>
+
+      <!-- Sun -->
+      <circle cx="54" cy="18" r="7" fill="#FFEBA9" opacity="0.96"/>
+
+      <!-- Bottom caption area -->
+      <rect x="1" y="54" width="74" height="32"
+            fill="#F5F3FF" opacity="0.9"/>
+
+      <!-- DARKER "WRITING": two lines aligned to photo left (x = 6) -->
+      <g transform="translate(6 62)">
+        <rect x="0"  y="0"  width="30" height="3.4" rx="1.7"
+              fill="url(#cipherGradientFavicon)"/>
+        <rect x="0"  y="6"  width="20" height="3.2" rx="1.6"
+              fill="url(#cipherGradientFavicon)" opacity="0.85"/>
+      </g>
+
+      <!-- Large gold lock hanging over corner -->
+      <g transform="translate(41.32 51.15) scale(1.86)" filter="url(#lockShadowFavicon)">
+        <rect x="0" y="6" width="24" height="18"
+              rx="3" ry="3"
+              fill="url(#lockBodyGradientFavicon)"
+              stroke="#8A6115"
+              stroke-width="0.9"/>
+
+        <rect x="2.2" y="8.2" width="19.6" height="8"
+              rx="2" ry="2"
+              fill="#FFFFFF"
+              opacity="0.16"/>
+
+        <circle cx="3.4" cy="9.4" r="0.7" fill="#C28A24" opacity="0.9"/>
+        <circle cx="20.6" cy="9.4" r="0.7" fill="#C28A24" opacity="0.9"/>
+
+        <rect x="7.2" y="8.4" width="3.6" height="13"
+              fill="#FFFFFF" opacity="0.10"/>
+
+        <rect x="2.2" y="17.2" width="19.6" height="1.5"
+              rx="0.75" fill="#A46D16" opacity="0.45"/>
+
+        <path d="M6 7.5
+                 v-3.7
+                 a5 5 0 0 1 12 0
+                 v3.7"
+              fill="none"
+              stroke="#C28A24"
+              stroke-width="2.4"
+              stroke-linecap="round"/>
+
+        <circle cx="12" cy="15" r="2.3" fill="#4A3210"/>
+        <rect x="11.2" y="15.7" width="1.6" height="3.4"
+              rx="0.8" fill="#2F1F08"/>
+      </g>
+    </g>
+  </g>
 </svg>
+

frontends/web/static/logo.svg

@@ -1,23 +1,164 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+<svg width="512" height="512" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
   <defs>
-    <linearGradient id="shieldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+    <linearGradient id="sunsetGradientPolaroidTight" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0%" style="stop-color:#667eea"/>
+      <stop offset="0%" stop-color="#FFD873"/>
-      <stop offset="100%" style="stop-color:#764ba2"/>
+      <stop offset="40%" stop-color="#FF7E88"/>
+      <stop offset="75%" stop-color="#D45BFF"/>
+      <stop offset="100%" stop-color="#3B2A88"/>
     </linearGradient>
-    <linearGradient id="photoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+
-      <stop offset="0%" style="stop-color:#1a1a2e"/>
+    <linearGradient id="cipherGradientPolaroidTight" x1="0" y1="0" x2="1" y2="0">
-      <stop offset="100%" style="stop-color:#16213e"/>
+      <stop offset="0%" stop-color="#D2C8FF" stop-opacity="1"/>
+      <stop offset="100%" stop-color="#A796FF" stop-opacity="1"/>
     </linearGradient>
+
+    <filter id="cardShadowPolaroidTight" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="3" stdDeviation="3.5"
+                    flood-color="#000000" flood-opacity="0.35"/>
+    </filter>
+
+    <linearGradient id="lockBodyGradientPolaroidTight" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#FFF4C7"/>
+      <stop offset="40%" stop-color="#F7D978"/>
+      <stop offset="100%" stop-color="#D49A27"/>
+    </linearGradient>
+
+    <filter id="lockShadowPolaroidTight" x="-15%" y="-15%" width="130%" height="130%">
+      <feDropShadow dx="0" dy="1" stdDeviation="0.9"
+                    flood-color="#000000" flood-opacity="0.4"/>
+    </filter>
+
+    <filter id="contrailBlur" x="-10%" y="-10%" width="120%" height="120%">
+      <feGaussianBlur stdDeviation="0.4" />
+    </filter>
   </defs>
-  <circle cx="100" cy="100" r="95" fill="none" stroke="url(#shieldGrad)" stroke-width="2" opacity="0.3"/>
+
-  <path d="M100 20 L170 45 L170 100 C170 145 140 175 100 185 C60 175 30 145 30 100 L30 45 Z" fill="url(#shieldGrad)" opacity="0.95"/>
+  <!-- Inset and scaled: margin + size tweak -->
-  <rect x="50" y="55" width="100" height="75" rx="4" ry="4" fill="url(#photoGrad)" stroke="#fff" stroke-width="2" opacity="0.9"/>
+  <g transform="translate(5 5) scale(0.9)" filter="url(#cardShadowPolaroidTight)">
-  <polygon points="50,130 75,95 95,115 130,75 150,130" fill="#667eea" opacity="0.6"/>
+    <g transform="rotate(-6 38 44)">
-  <circle cx="125" cy="75" r="12" fill="#ffd700" opacity="0.8"/>
+      <!-- Polaroid frame -->
-  <g transform="translate(100, 105)">
+      <rect x="0" y="0" width="76" height="88"
-    <rect x="-18" y="-5" width="36" height="28" rx="4" ry="4" fill="#fff" opacity="0.95"/>
+            rx="1" ry="1"
-    <path d="M-10 -5 L-10 -18 C-10 -30 10 -30 10 -18 L10 -5" fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" opacity="0.95"/>
+            fill="#FCFCFF"
-    <circle cx="0" cy="8" r="5" fill="url(#shieldGrad)"/>
+            stroke="#E0E0F4"
-    <rect x="-2.5" y="8" width="5" height="10" rx="1" fill="url(#shieldGrad)"/>
+            stroke-width="1"/>
+
+      <!-- Photo area (left edge at x=6) -->
+      <rect x="6" y="6" width="64" height="48"
+            rx="0.5" ry="0.5"
+            fill="url(#sunsetGradientPolaroidTight)"
+            stroke="#3C3C46"
+            stroke-width="1"
+            stroke-opacity="0.7"/>
+
+      <!-- FAR BACKGROUND BUILDINGS -->
+      <g fill="#59407E" opacity="0.55">
+        <rect x="18" y="35" width="4" height="7"/>
+        <rect x="30" y="32" width="5" height="10"/>
+        <rect x="32.2" y="30.2" width="0.6" height="2.2"/>
+        <rect x="44" y="34" width="4" height="8"/>
+        <rect x="49" y="36" width="3" height="6"/>
+      </g>
+
+      <!-- Hills / skyline -->
+      <path d="M6 44 Q22 36 36 39 T70 42 L70 54 L6 54 Z"
+            fill="#351C6A" opacity="1"/>
+
+      <!-- Sun -->
+      <circle cx="54" cy="18" r="6.5" fill="#FFEBA9" opacity="0.96"/>
+
+      <!-- Contrails -->
+      <g filter="url(#contrailBlur)">
+        <path d="M9 11 L41 7"
+              stroke="#FFFDFE"
+              stroke-width="0.7"
+              stroke-linecap="round"
+              opacity="0.45"/>
+        <path d="M18 8 L20 20"
+              transform="rotate(-26 19 14)"
+              stroke="#FFFDFE"
+              stroke-width="0.5"
+              stroke-linecap="round"
+              opacity="0.3"/>
+      </g>
+
+      <!-- Main flock of birds -->
+      <g stroke="#2F2348"
+         stroke-width="0.7"
+         fill="none"
+         stroke-linecap="round"
+         opacity="0.9">
+        <path d="M26 20 q 2 -1.3 4 0" />
+        <path d="M31 18 q 1.8 -1.1 3.6 0" />
+        <path d="M36 16 q 1.5 -0.9 3 0" />
+      </g>
+
+      <!-- Distant birds -->
+      <g stroke="#2F2348"
+         stroke-width="0.5"
+         fill="none"
+         stroke-linecap="round"
+         opacity="0.7">
+        <path d="M50.2 32.4 q 1.4 -0.8 2.8 0" />
+        <path d="M53.6 31.5 q 1.2 -0.7 2.4 0" />
+      </g>
+
+      <!-- Bottom caption area -->
+      <rect x="1" y="54" width="74" height="32"
+            fill="#F5F3FF" opacity="0.9"/>
+
+      <!-- DARKER "WRITING": three lines aligned to photo left (x = 6) -->
+      <g transform="translate(6 62)">
+        <rect x="0"  y="0"   width="36" height="3.4" rx="1.7"
+              fill="url(#cipherGradientPolaroidTight)"/>
+        <rect x="0"  y="5.5" width="28" height="3.2" rx="1.6"
+              fill="url(#cipherGradientPolaroidTight)" opacity="0.9"/>
+        <rect x="0"  y="11"  width="20" height="3.0" rx="1.5"
+              fill="url(#cipherGradientPolaroidTight)" opacity="0.8"/>
+      </g>
+
+      <!-- Big gold lock hanging over corner -->
+      <g transform="translate(41.32 47.37) scale(1.86)" filter="url(#lockShadowPolaroidTight)">
+        <rect x="0" y="8" width="24" height="18"
+              rx="3" ry="3"
+              fill="url(#lockBodyGradientPolaroidTight)"
+              stroke="#8A6115"
+              stroke-width="0.8"/>
+
+        <rect x="2.2" y="10" width="19.6" height="9"
+              rx="2" ry="2"
+              fill="#FFFFFF"
+              opacity="0.14"/>
+
+        <circle cx="3.4" cy="11" r="0.7" fill="#C28A24" opacity="0.9"/>
+        <circle cx="20.6" cy="11" r="0.7" fill="#C28A24" opacity="0.9"/>
+
+        <circle cx="3.4" cy="19.5" r="0.6" fill="#A66D1D" opacity="0.85"/>
+        <circle cx="20.6" cy="19.5" r="0.6" fill="#A66D1D" opacity="0.85"/>
+
+        <rect x="7.2" y="10.2" width="3.6" height="14"
+              fill="#FFFFFF" opacity="0.10"/>
+
+        <rect x="2.2" y="18.8" width="19.6" height="1.6"
+              rx="0.8" fill="#A46D16" opacity="0.45"/>
+
+        <path d="M6 9.5
+                 v-4
+                 a5 5 0 0 1 12 0
+                 v4"
+              fill="none"
+              stroke="#C28A24"
+              stroke-width="2.4"
+              stroke-linecap="round"/>
+
+        <rect x="2.2" y="8.4" width="19.6" height="2.4"
+              rx="1.2" fill="#FFFFFF" opacity="0.22"/>
+
+        <circle cx="12" cy="16" r="2.2" fill="#4A3210"/>
+        <rect x="11.3" y="16.8" width="1.4" height="3.1"
+              rx="0.7" fill="#2F1F08"/>
+      </g>
+    </g>
   </g>
 </svg>
+

frontends/web/templates/encode_result.html

@@ -54,7 +54,7 @@
                     Download or share now. The file will be securely deleted after expiry.
                 </div>
                 
-                <a href="{{ url_for('encode') }}" class="btn btn-outline-light">
+                <a href="{{ url_for('encode_page') }}" class="btn btn-outline-light">
                     <i class="bi bi-plus-circle me-2"></i>Encode Another Message
                 </a>
             </div>

test_data/stego.pem

@@ -0,0 +1,52 @@
+-----BEGIN PRIVATE KEY-----
+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
+qLuMBXlezXwx2ayC9XWuX5Ld7uOSGA==
+-----END PRIVATE KEY-----