Basic quility of like improvements.

static/favicon.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea"/>
+      <stop offset="100%" style="stop-color:#764ba2"/>
+    </linearGradient>
+  </defs>
+  
+  <!-- Shield -->
+  <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)"/>
+  
+  <!-- Photo frame -->
+  <rect x="16" y="18" width="32" height="24" rx="2" fill="#1a1a2e" stroke="#fff" stroke-width="1.5"/>
+  
+  <!-- Mountain -->
+  <polygon points="16,42 26,30 34,36 48,22 48,42" fill="#667eea" opacity="0.5"/>
+  
+  <!-- Lock -->
+  <rect x="24" y="30" width="16" height="12" rx="2" fill="#fff"/>
+  <path d="M27 30 L27 25 C27 20 37 20 37 25 L37 30" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round"/>
+  <circle cx="32" cy="35" r="2.5" fill="url(#grad)"/>
+  <rect x="31" y="35" width="2" height="4" fill="url(#grad)"/>
+</svg>

static/logo.svg

@@ -0,0 +1,99 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+  <defs>
+    <!-- Gradient for the shield/frame -->
+    <linearGradient id="shieldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea"/>
+      <stop offset="100%" style="stop-color:#764ba2"/>
+    </linearGradient>
+    
+    <!-- Gradient for the photo -->
+    <linearGradient id="photoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#1a1a2e"/>
+      <stop offset="100%" style="stop-color:#16213e"/>
+    </linearGradient>
+    
+    <!-- Glow effect -->
+    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
+      <feMerge>
+        <feMergeNode in="coloredBlur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    
+    <!-- Drop shadow -->
+    <filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
+      <feDropShadow dx="2" dy="4" stdDeviation="4" flood-color="#000" flood-opacity="0.3"/>
+    </filter>
+  </defs>
+  
+  <!-- Background circle (optional, for icon use) -->
+  <circle cx="100" cy="100" r="95" fill="none" stroke="url(#shieldGrad)" stroke-width="2" opacity="0.3"/>
+  
+  <!-- Shield shape (security) that also looks like a photo frame -->
+  <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)" 
+        filter="url(#shadow)"
+        opacity="0.95"/>
+  
+  <!-- Inner photo frame area -->
+  <rect x="50" y="55" width="100" height="75" rx="4" ry="4" 
+        fill="url(#photoGrad)" 
+        stroke="#fff" 
+        stroke-width="2" 
+        opacity="0.9"/>
+  
+  <!-- Stylized mountain/landscape (photo content hint) -->
+  <polygon points="50,130 75,95 95,115 130,75 150,130" 
+           fill="#667eea" 
+           opacity="0.6"/>
+  
+  <!-- Sun in photo -->
+  <circle cx="125" cy="75" r="12" fill="#ffd700" opacity="0.8"/>
+  
+  <!-- Lock symbol overlay (centered on photo) -->
+  <g transform="translate(100, 105)" filter="url(#glow)">
+    <!-- Lock body -->
+    <rect x="-18" y="-5" width="36" height="28" rx="4" ry="4" 
+          fill="#fff" opacity="0.95"/>
+    <!-- Lock shackle -->
+    <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"/>
+    <!-- Keyhole -->
+    <circle cx="0" cy="8" r="5" fill="url(#shieldGrad)"/>
+    <rect x="-2.5" y="8" width="5" height="10" rx="1" fill="url(#shieldGrad)"/>
+  </g>
+  
+  <!-- Binary/pixel dots (steganography hint) - scattered around -->
+  <g opacity="0.4" fill="#fff">
+    <circle cx="40" cy="85" r="2"/>
+    <circle cx="45" cy="140" r="1.5"/>
+    <circle cx="160" cy="80" r="2"/>
+    <circle cx="155" cy="135" r="1.5"/>
+    <circle cx="38" cy="110" r="1"/>
+    <circle cx="162" cy="110" r="1"/>
+    <circle cx="65" cy="150" r="1.5"/>
+    <circle cx="135" cy="150" r="1.5"/>
+  </g>
+  
+  <!-- "Hidden" pixels effect on edges -->
+  <g opacity="0.3">
+    <rect x="52" y="57" width="3" height="3" fill="#667eea"/>
+    <rect x="58" y="57" width="3" height="3" fill="#764ba2"/>
+    <rect x="145" y="57" width="3" height="3" fill="#667eea"/>
+    <rect x="139" y="57" width="3" height="3" fill="#764ba2"/>
+    <rect x="52" y="124" width="3" height="3" fill="#764ba2"/>
+    <rect x="145" y="124" width="3" height="3" fill="#764ba2"/>
+  </g>
+</svg>