Enhance 404 page with search functionality, visual elements, and better navigation

Author: jedisct1

www/pages/404.md

@@ -5,27 +5,71 @@ permalink: /404.html
 ---
 
 <div class="flex flex-col items-center justify-center py-12">
+    <div class="flex items-center justify-center w-24 h-24 bg-red-100 rounded-full mb-6">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+        </svg>
+    </div>
+    
     <div class="text-6xl font-bold text-primary mb-4">404</div>
     <h1 class="text-2xl font-bold mb-6">Page Not Found</h1>
 
     <p class="text-lg text-center max-w-md mb-8">
         The page you're looking for doesn't exist or has been moved.
     </p>
 
-    <div class="flex flex-col sm:flex-row gap-4">
+    <div class="flex flex-col sm:flex-row gap-4 mb-8">
         <a href="/" class="btn btn-primary">Go to Homepage</a>
         <a href="/spec/" class="btn btn-secondary">Read the Specification</a>
     </div>
 
-    <div class="mt-12 p-6 border rounded-lg bg-gray-50 max-w-lg">
+    <div class="w-full max-w-md mb-8">
+        <h2 class="text-xl font-bold mb-4 text-center">Try searching for what you need</h2>
+        <div class="relative">
+            <input type="text" id="search-404" placeholder="Search IPCrypt documentation..." class="w-full p-3 border rounded-lg pr-10">
+            <button id="search-button-404" class="absolute right-3 top-3 text-gray-500">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+            </button>
+        </div>
+    </div>
+    
+    <div class="mt-4 p-6 border rounded-lg bg-gray-50 max-w-lg">
         <h2 class="text-xl font-bold mb-4">Looking for something specific?</h2>
         <ul class="space-y-2">
             <li><a href="/about/" class="text-primary hover:underline">About IPCrypt</a> - Learn about IPCrypt's purpose and benefits</li>
             <li><a href="/spec/" class="text-primary hover:underline">Specification</a> - Read the technical specification</li>
             <li><a href="/implementations/" class="text-primary hover:underline">Implementations</a> - Explore available implementations</li>
             <li><a href="/resources/" class="text-primary hover:underline">Developer Resources</a> - Find guides and examples</li>
+            <li><a href="/playground/" class="text-primary hover:underline">Playground</a> - Try IPCrypt in your browser</li>
             <li><a href="/examples/" class="text-primary hover:underline">Examples</a> - See IPCrypt in action</li>
             <li><a href="/community/" class="text-primary hover:underline">Community</a> - Learn how to contribute</li>
         </ul>
     </div>
-</div>
+    
+    <div class="mt-8 text-center text-gray-600">
+        <p>Found a broken link? <a href="https://github.com/ipcrypt-std/ipcrypt-std.github.io/issues/new" class="text-primary hover:underline" target="_blank" rel="noopener">Report it on GitHub</a></p>
+    </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const searchInput = document.getElementById('search-404');
+    const searchButton = document.getElementById('search-button-404');
+    
+    function performSearch() {
+        const query = searchInput.value.trim();
+        if (query) {
+            window.location.href = `https://github.com/ipcrypt-std/ipcrypt-std.github.io/search?q=${encodeURIComponent(query)}`;
+        }
+    }
+    
+    searchButton.addEventListener('click', performSearch);
+    searchInput.addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') {
+            performSearch();
+        }
+    });
+});
+</script>