Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ProofLens - Verifiable AI Infrastructure</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <style> | |
| :root { | |
| --primary: #00ff88; | |
| --secondary: #2563eb; | |
| --dark: #0a0a0a; | |
| --darker: #050505; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--dark); | |
| color: white; | |
| overflow-x: hidden; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .gradient-border { | |
| position: relative; | |
| border-radius: 0.5rem; | |
| } | |
| .gradient-border::before { | |
| content: ""; | |
| position: absolute; | |
| top: -1px; | |
| left: -1px; | |
| right: -1px; | |
| bottom: -1px; | |
| border-radius: 0.5rem; | |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); | |
| z-index: -1; | |
| } | |
| .tensor-animation { | |
| width: 100%; | |
| height: 300px; | |
| position: relative; | |
| } | |
| .proof-badge { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.4); } | |
| 70% { box-shadow: 0 0 0 10px rgba(0, 255, 136, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); } | |
| } | |
| .circuit-path { | |
| stroke-dasharray: 1000; | |
| stroke-dashoffset: 1000; | |
| animation: dash 5s linear forwards; | |
| } | |
| @keyframes dash { | |
| to { | |
| stroke-dashoffset: 0; | |
| } | |
| } | |
| .fade-in { | |
| opacity: 0; | |
| animation: fadeIn 1s forwards; | |
| } | |
| @keyframes fadeIn { | |
| to { opacity: 1; } | |
| } | |
| .delay-1 { animation-delay: 0.2s; } | |
| .delay-2 { animation-delay: 0.4s; } | |
| .delay-3 { animation-delay: 0.6s; } | |
| .delay-4 { animation-delay: 0.8s; } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-50 bg-black bg-opacity-80 backdrop-blur-md border-b border-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16 items-center"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <span class="text-2xl font-bold gradient-text">ProofLens</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-center space-x-8"> | |
| <a href="#problem" class="text-gray-300 hover:text-white transition">Problem</a> | |
| <a href="#solution" class="text-gray-300 hover:text-white transition">Solution</a> | |
| <a href="#how-it-works" class="text-gray-300 hover:text-white transition">How It Works</a> | |
| <a href="#features" class="text-gray-300 hover:text-white transition">Features</a> | |
| <a href="#use-cases" class="text-gray-300 hover:text-white transition">Use Cases</a> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <a href="#" class="px-4 py-2 text-sm font-medium text-white">Whitepaper</a> | |
| <a href="#" class="px-4 py-2 text-sm font-medium bg-gradient-to-r from-green-400 to-blue-500 rounded-md text-white hover:opacity-90 transition">Start Building</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="pt-32 pb-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> | |
| <div class="space-y-8"> | |
| <h1 class="text-5xl md:text-6xl font-bold leading-tight fade-in"> | |
| <span class="gradient-text">AI Outputs</span><br> | |
| You Can Prove | |
| </h1> | |
| <p class="text-xl text-gray-300 fade-in delay-1"> | |
| Run deterministic AI inference and generate cryptographic proof artifacts for every result. Verify model outputs, audit AI decisions, and establish trust in machine-generated content. | |
| </p> | |
| <div class="flex space-x-4 fade-in delay-2"> | |
| <a href="#" class="px-6 py-3 bg-gradient-to-r from-green-400 to-blue-500 rounded-md text-white font-medium hover:opacity-90 transition">Start Building</a> | |
| <a href="#" class="px-6 py-3 border border-gray-700 rounded-md text-white font-medium hover:bg-gray-800 transition">Read the Whitepaper</a> | |
| </div> | |
| <div class="flex items-center space-x-2 fade-in delay-3"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-2 h-2 rounded-full bg-green-400"></div> | |
| <span class="text-sm text-gray-300">Example Proof Hash:</span> | |
| </div> | |
| <div class="px-3 py-1 bg-gray-800 rounded-md text-sm font-mono">0x8d72f4a9...b913</div> | |
| <div class="proof-badge px-2 py-1 bg-green-900 bg-opacity-20 rounded-md text-xs text-green-400 border border-green-400">VERIFIED</div> | |
| </div> | |
| </div> | |
| <div class="tensor-animation fade-in delay-4"> | |
| <div class="relative h-full w-full bg-gradient-to-br from-gray-900 to-black rounded-xl border border-gray-800 overflow-hidden"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <svg width="300" height="300" viewBox="0 0 300 300" class="circuit-diagram"> | |
| <path class="circuit-path" stroke="url(#gradient)" stroke-width="2" fill="none" d="M50,150 Q150,50 250,150 Q150,250 50,150 Z"/> | |
| <path class="circuit-path" stroke="url(#gradient)" stroke-width="2" fill="none" d="M100,150 Q150,100 200,150 Q150,200 100,150 Z" stroke-dashoffset="1000" stroke-dasharray="1000"/> | |
| <circle cx="150" cy="150" r="30" fill="none" stroke="url(#gradient)" stroke-width="2" class="circuit-path"/> | |
| <defs> | |
| <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" stop-color="#00ff88"/> | |
| <stop offset="100%" stop-color="#2563eb"/> | |
| </linearGradient> | |
| </defs> | |
| </svg> | |
| </div> | |
| <div class="absolute bottom-4 left-4 right-4 bg-gray-900 bg-opacity-50 rounded-md p-3 border border-gray-800"> | |
| <div class="flex space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="mt-2 font-mono text-xs"> | |
| <div class="text-green-400">Prompt → Model → Inference Trace → Proof Artifact → Verified Result</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Problem Section --> | |
| <section id="problem" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold fade-in">AI Has a <span class="gradient-text">Trust Problem</span></h2> | |
| <p class="mt-4 text-xl text-gray-300 max-w-3xl mx-auto fade-in delay-1">Current AI systems lack the infrastructure needed for verifiable, auditable outputs in high-stakes environments.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="gradient-border p-0.5 rounded-lg fade-in"> | |
| <div class="bg-gray-900 rounded-lg p-6 h-full"> | |
| <div class="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-400" 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> | |
| <h3 class="text-xl font-bold mb-2">AI Outputs Cannot Be Verified</h3> | |
| <p class="text-gray-400">Most AI systems return text without evidence showing how the result was produced.</p> | |
| </div> | |
| </div> | |
| <div class="gradient-border p-0.5 rounded-lg fade-in delay-1"> | |
| <div class="bg-gray-900 rounded-lg p-6 h-full"> | |
| <div class="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Models Change Constantly</h3> | |
| <p class="text-gray-400">Developers cannot easily prove which model version generated an output.</p> | |
| </div> | |
| </div> | |
| <div class="gradient-border p-0.5 rounded-lg fade-in delay-2"> | |
| <div class="bg-gray-900 rounded-lg p-6 h-full"> | |
| <div class="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Compliance Is Becoming Mandatory</h3> | |
| <p class="text-gray-400">Governments, enterprises, and regulated industries increasingly require auditability and reproducibility.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Solution Section --> | |
| <section id="solution" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-gradient-to-b from-gray-900 to-black rounded-3xl"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6 fade-in"><span class="gradient-text">Deterministic Inference</span> for Verifiable AI</h2> | |
| <p class="text-xl text-gray-300 mb-8 fade-in delay-1">ProofLens provides the cryptographic infrastructure needed to verify AI outputs at scale.</p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start space-x-4 fade-in delay-2"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-8 h-8 rounded-full bg-gray-800 flex items-center justify-center"> | |
| <span class="text-green-400 font-bold">1</span> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold">Developer Input</h3> | |
| <p class="text-gray-400">Model, Weights, Prompt</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-4 fade-in delay-3"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-8 h-8 rounded-full bg-gray-800 flex items-center justify-center"> | |
| <span class="text-green-400 font-bold">2</span> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold">ProofLens Produces</h3> | |
| <p class="text-gray-400">Deterministic execution trace, Reproducible inference result, Cryptographic proof artifact, Verifiable output certificate</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="relative bg-gray-900 rounded-xl border border-gray-800 p-6"> | |
| <div class="flex space-x-2 mb-4"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="space-y-6"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="text-green-400 font-mono">$</div> | |
| <div class="font-mono text-sm"> | |
| <span class="text-purple-400">Prompt</span> <span class="text-gray-400">→</span><br> | |
| <span class="text-blue-400">Deterministic Runtime</span> <span class="text-gray-400">→</span><br> | |
| <span class="text-yellow-400">Proof Generator</span> <span class="text-gray-400">→</span><br> | |
| <span class="text-green-400">Verification Layer</span> <span class="text-gray-400">→</span><br> | |
| <span class="text-white font-bold">Trusted Result</span> | |
| </div> | |
| </div> | |
| <div class="bg-black rounded-md p-4 border border-gray-800"> | |
| <div class="flex items-center space-x-2 mb-2"> | |
| <div class="w-2 h-2 rounded-full bg-green-400"></div> | |
| <div class="text-xs text-gray-400">PROOF ARTIFACT</div> | |
| </div> | |
| <div class="font-mono text-xs text-gray-300"> | |
| <div>Model: llama3.onnx</div> | |
| <div>Weights: sha256:a1b2c3...</div> | |
| <div>Prompt: "Translate contract to French"</div> | |
| <div>OutputHash: sha256:d4e5f6...</div> | |
| <div class="mt-2 text-green-400">Proof: 0x8d72f4a9...b913</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute -top-4 -right-4 bg-gradient-to-r from-green-400 to-blue-500 text-black px-3 py-1 rounded-full text-xs font-bold"> | |
| ONNX COMPATIBLE | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works --> | |
| <section id="how-it-works" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold fade-in">Built for the Next Generation of <span class="gradient-text">AI Infrastructure</span></h2> | |
| <p class="mt-4 text-xl text-gray-300 max-w-3xl mx-auto fade-in delay-1">ProofLens integrates directly with your existing AI stack while adding verifiability.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6"> | |
| <div class="bg-gray-900 rounded-xl border border-gray-800 p-6 fade-in"> | |
| <div class="text-4xl font-bold gradient-text mb-4">1</div> | |
| <h3 class="text-xl font-bold mb-2">Execute</h3> | |
| <p class="text-gray-400">Run ONNX-compatible models inside a deterministic runtime.</p> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl border border-gray-800 p-6 fade-in delay-1"> | |
| <div class="text-4xl font-bold gradient-text mb-4">2</div> | |
| <h3 class="text-xl font-bold mb-2">Trace</h3> | |
| <p class="text-gray-400">Capture a complete inference execution trace.</p> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl border border-gray-800 p-6 fade-in delay-2"> | |
| <div class="text-4xl font-bold gradient-text mb-4">3</div> | |
| <h3 class="text-xl font-bold mb-2">Prove</h3> | |
| <p class="text-gray-400">Generate proof artifacts that cryptographically bind inputs, weights, and outputs.</p> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl border border-gray-800 p-6 fade-in delay-3"> | |
| <div class="text-4xl font-bold gradient-text mb-4">4</div> | |
| <h3 class="text-xl font-bold mb-2">Verify</h3> | |
| <p class="text-gray-400">Anyone can independently verify the result.</p> | |
| </div> | |
| </div> | |
| <div class="mt-16 bg-gray-900 rounded-xl border border-gray-800 overflow-hidden fade-in"> | |
| <div class="grid grid-cols-1 md:grid-cols-2"> | |
| <div class="p-8"> | |
| <h3 class="text-xl font-bold mb-4">Code Example</h3> | |
| <div class="bg-black rounded-lg p-4 font-mono text-sm overflow-x-auto"> | |
| <div class="text-purple-400">from</div> | |
| <div class="text-gray-400 ml-4">prooflens</div> | |
| <div class="text-purple-400">import</div> | |
| <div class="text-gray-400">verify_inference</div> | |
| <br> | |
| <div class="text-gray-400">result = verify_inference(</div> | |
| <div class="text-gray-400 ml-4">model=<span class="text-green-400">"llama3.onnx"</span>,</div> | |
| <div class="text-gray-400 ml-4">prompt=<span class="text-green-400">"Translate this contract into French"</span></div> | |
| <div class="text-gray-400">)</div> | |
| <br> | |
| <div class="text-purple-400">print</div> | |
| <div class="text-gray-400">(result.output)</div> | |
| <div class="text-purple-400">print</div> | |
| <div class="text-gray-400">(result.proof_hash)</div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 p-8 flex flex-col justify-center"> | |
| <div class="bg-black rounded-lg p-4 border border-gray-700"> | |
| <div class="flex items-center space-x-2 mb-2"> | |
| <div class="w-2 h-2 rounded-full bg-green-400"></div> | |
| <div class="text-xs text-gray-400">OUTPUT</div> | |
| </div> | |
| <div class="font-mono text-sm text-gray-300 mb-4"> | |
| [translated text] | |
| </div> | |
| <div class="flex items-center space-x-2 mb-2"> | |
| <div class="w-2 h-2 rounded-full bg-blue-400"></div> | |
| <div class="text-xs text-gray-400">PROOF</div> | |
| </div> | |
| <div class="font-mono text-sm text-blue-400 mb-2"> | |
| 0x8d72f4a9...b913 | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-2 h-2 rounded-full bg-green-400"></div> | |
| <div class="text-xs text-gray-400">STATUS</div> | |
| </div> | |
| <div class="font-mono text-sm text-green-400"> | |
| VERIFIED | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features --> | |
| <section id="features" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-gradient-to-b from-black to-gray-900 rounded-3xl"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold fade-in">Enterprise-Grade <span class="gradient-text">Verification</span></h2> | |
| <p class="mt-4 text-xl text-gray-300 max-w-3xl mx-auto fade-in delay-1">All the features needed for mission-critical AI deployments.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="bg-gray-900 rounded-xl border border-gray-800 p-6 fade-in"> | |
| <div class="w-10 h-10 rounded-lg bg-gray-800 flex items-center justify-center mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Deterministic Inference</h3> | |
| <p class="text-gray-400">Reproducible model execution with identical inputs always producing identical outputs.</p> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl border border-gray-800 p-6 fade-in delay-1"> | |
| <div class="w-10 h-10 rounded-lg bg-gray-800 flex items-center justify-center mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Proof Artifacts</h3> | |
| <p class="text-gray-400">Portable verification files that can be independently checked by any party.</p> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl border border-gray-800 p-6 fade-in delay-2"> | |
| <div class="w-10 h-10 rounded-lg bg-gray-800 flex items-center justify-center mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">ONNX Compatible</h3> | |
| <p class="text-gray-400">Works with existing model ecosystems without requiring retraining.</p> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl border border-gray-800 p-6 fade-in"> | |
| <div class="w-10 h-10 rounded-lg bg-gray-800 flex items-center justify-center mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Audit Ready</h3> | |
| <p class="text-gray-400">Designed for regulated environments with complete audit trails.</p> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl border border-gray-800 p-6 fade-in delay-1"> | |
| <div class="w-10 h-10 rounded-lg bg-gray-800 flex items-center justify-center mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Model Provenance</h3> | |
| <p class="text-gray-400">Track model lineage and version history with cryptographic binding.</p> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl border border-gray-800 p-6 fade-in delay-2"> | |
| <div class="w-10 h-10 rounded-lg bg-gray-800 flex items-center justify-center mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Enterprise Verification</h3> | |
| <p class="text-gray-400">Verify outputs across organizations with different trust requirements.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Vision --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <div class="bg-gradient-to-br from-gray-900 to-black rounded-3xl p-12 border border-gray-800"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-8 text-center fade-in">The Missing Layer of <span class="gradient-text">AI Infrastructure</span></h2> | |
| <div class="max-w-4xl mx-auto space-y-8"> | |
| <div class="flex items-start space-x-4 fade-in delay-1"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 rounded-full bg-gray-800 border border-gray-700 flex items-center justify-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> | |
| </svg> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-gray-300">The internet gained trust through TLS.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-4 fade-in delay-2"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 rounded-full bg-gray-800 border border-gray-700 flex items-center justify-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> | |
| </svg> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-gray-300">Software gained trust through reproducible builds.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-4 fade-in delay-3"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 rounded-full bg-gray-800 border border-gray-700 flex items-center justify-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> | |
| </svg> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-gray-300">Blockchains gained trust through cryptographic consensus.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-4 fade-in delay-4"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 rounded-full bg-gray-800 border border-gray-700 flex items-center justify-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> | |
| </svg> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-gray-300">AI will gain trust through verifiable inference.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center fade-in delay-5"> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto">ProofLens is building the infrastructure layer that makes AI outputs independently verifiable.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Roadmap --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold fade-in">Roadmap to <span class="gradient-text">Proof-Native AI</span></h2> | |
| <p class="mt-4 text-xl text-gray-300 max-w-3xl mx-auto fade-in delay-1">Our phased approach to building the trust layer for AI.</p> | |
| </div> | |
| <div class="relative"> | |
| <div class="hidden md:block absolute left-1/2 top-0 bottom-0 w-0.5 bg-gradient-to-b from-green-400 via-blue-500 to-purple-600"></div> | |
| <div class="space-y-12"> | |
| <div class="relative md:grid md:grid-cols-2 gap-8 items-center fade-in"> | |
| <div class="md:text-right mb-6 md:mb-0"> | |
| <div class="inline-block bg-gray-900 rounded-xl border border-gray-800 p-6 max-w-md"> | |
| <div class="text-sm text-green-400 font-bold mb-2">PHASE 1</div> | |
| <h3 class="text-xl font-bold mb-2">Deterministic Inference Runtime</h3> | |
| <p class="text-gray-400">Reproducible execution environment for AI models.</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"></div> | |
| </div> | |
| <div class="relative md:grid md:grid-cols-2 gap-8 items-center fade-in delay-1"> | |
| <div class="hidden md:block"></div> | |
| <div class="mb-6 md:mb-0"> | |
| <div class="inline-block bg-gray-900 rounded-xl border border-gray-800 p-6 max-w-md"> | |
| <div class="text-sm text-blue-400 font-bold mb-2">PHASE 2</div> | |
| <h3 class="text-xl font-bold mb-2">Proof Artifact Generation</h3> | |
| <p class="text-gray-400">Cryptographic proofs binding inputs to outputs.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative md:grid md:grid-cols-2 gap-8 items-center fade-in delay-2"> | |
| <div class="md:text-right mb-6 md:mb-0"> | |
| <div class="inline-block bg-gray-900 rounded-xl border border-gray-800 p-6 max-w-md"> | |
| <div class="text-sm text-purple-400 font-bold mb-2">PHASE 3</div> | |
| <h3 class="text-xl font-bold mb-2">zkML Integration</h3> | |
| <p class="text-gray-400">Zero-knowledge proofs for private verification.</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"></div> | |
| </div> | |
| <div class="relative md:grid md:grid-cols-2 gap-8 items-center fade-in delay-3"> | |
| <div class="hidden md:block"></div> | |
| <div class="mb-6 md:mb-0"> | |
| <div class="inline-block bg-gray-900 rounded-xl border border-gray-800 p-6 max-w-md"> | |
| <div class="text-sm text-yellow-400 font-bold mb-2">PHASE 4</div> | |
| <h3 class="text-xl font-bold mb-2">Proof-Native AI Accelerators</h3> | |
| <p class="text-gray-400">Hardware optimized for verifiable inference.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative md:grid md:grid-cols-2 gap-8 items-center fade-in delay-4"> | |
| <div class="md:text-right mb-6 md:mb-0"> | |
| <div class="inline-block bg-gray-900 rounded-xl border border-gray-800 p-6 max-w-md"> | |
| <div class="text-sm text-red-400 font-bold mb-2">PHASE 5</div> | |
| <h3 class="text-xl font-bold mb-2">Trustless Distributed AI Execution</h3> | |
| <p class="text-gray-400">Decentralized networks of verifiable AI.</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Use Cases --> | |
| <section id="use-cases" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-gradient-to-b from-gray-900 to-black rounded-3xl"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold fade-in">Built for <span class="gradient-text">High-Trust Applications</span></h2> | |
| <p class="mt-4 text-xl text-gray-300 max-w-3xl mx-auto fade-in delay-1">Industries where verifiable AI outputs are mission-critical.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden fade-in"> | |
| <div class="p-6"> | |
| <div class="w-12 h-12 rounded-lg bg-gray-800 flex items-center justify-center mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Defense</h3> | |
| <p class="text-gray-400">Verify autonomous system decisions and ensure compliance with rules of engagement.</p> | |
| </div> | |
| <div class="bg-gray-800 px-6 py-3 border-t border-gray-700"> | |
| <div class="text-xs text-gray-400">USE CASE</div> | |
| <div class="text-sm">Autonomous threat classification</div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden fade-in delay-1"> | |
| <div class="p-6"> | |
| <div class="w-12 h-12 rounded-lg bg-gray-800 flex items-center justify-center mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Healthcare</h3> | |
| <p class="text-gray-400">Prove diagnostic AI outputs meet regulatory requirements for patient safety.</p> | |
| </div> | |
| <div class="bg-gray-800 px-6 py-3 border-t border-gray-700"> | |
| <div class="text-xs text-gray-400">USE CASE</div> | |
| <div class="text-sm">FDA-approved AI diagnostics</div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden fade-in delay-2"> | |
| <div class="p-6"> | |
| <div class="w-12 h-12 rounded-lg bg-gray-800 flex items-center justify-center mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Finance</h3> | |
| <p class="text-gray-400">Audit AI-driven trading decisions and ensure compliance with financial regulations.</p> | |
| </div> | |
| <div class="bg-gray-800 px-6 py-3 border-t border-gray-700"> | |
| <div class="text-xs text-gray-400">USE CASE</div> | |
| <div class="text-sm">SEC-compliant AI trading</div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden fade-in"> | |
| <div class="p-6"> | |
| <div class="w-12 h-12 rounded-lg bg-gray-800 flex items-center justify-center mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Legal Technology</h3> | |
| <p class="text-gray-400">Provide evidence for AI-generated legal documents and contract analysis.</p> | |
| </div> | |
| <div class="bg-gray-800 px-6 py-3 border-t border-gray-700"> | |
| <div class="text-xs text-gray-400">USE CASE</div> | |
| <div class="text-sm">Court-admissible AI analysis</div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden fade-in delay-1"> | |
| <div class="p-6"> | |
| <div class="w-12 h-12 rounded-lg bg-gray-800 flex items-center justify-center mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Government</h3> | |
| <p class="text-gray-400">Ensure transparency and accountability in AI-powered public services.</p> | |
| </div> | |
| <div class="bg-gray-800 px-6 py-3 border-t border-gray-700"> | |
| <div class="text-xs text-gray-400">USE CASE</div> | |
| <div class="text-sm">Transparent policy AI</div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden fade-in delay-2"> | |
| <div class="p-6"> | |
| <div class="w-12 h-12 rounded-lg bg-gray-800 flex items-center justify-center mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Autonomous Systems</h3> | |
| <p class="text-gray-400">Provide verifiable decision logs for self-driving cars, drones, and robotics.</p> | |
| </div> | |
| <div class="bg-gray-800 px-6 py-3 border-t border-gray-700"> | |
| <div class="text-xs text-gray-400">USE CASE</div> | |
| <div class="text-sm">Certifiable autonomy</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Final CTA --> | |
| <section class="py-32 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <div class="text-center"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-6 fade-in">Trust <span class="gradient-text">Every AI Result</span></h2> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto mb-10 fade-in delay-1">Generate AI outputs with cryptographic proof and independent verification.</p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4 fade-in delay-2"> | |
| <a href="#" class="px-8 py-4 bg-gradient-to-r from-green-400 to-blue-500 rounded-md text-white font-bold hover:opacity-90 transition">Start Building</a> | |
| <a href="#" class="px-8 py-4 border border-gray-700 rounded-md text-white font-bold hover:bg-gray-800 transition">Download Whitepaper</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto border-t border-gray-800"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-2xl font-bold gradient-text mb-4">ProofLens</h3> | |
| <p class="text-gray-400">Deterministic Inference. Verifiable Intelligence.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-bold text-gray-300 uppercase mb-4">Product</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">API Reference</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Examples</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-bold text-gray-300 uppercase mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-bold text-gray-300 uppercase mb-4">Legal</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Terms</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Security</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Compliance</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400">© 2026 ProofLens Labs. All rights reserved.</p> | |
| <div class="flex space-x-6 mt-4 md:mt-0"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path> | |
| </svg> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> | |
| <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path> | |
| </svg> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd"></path> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple animation triggers | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const fadeIns = document.querySelectorAll('.fade-in'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = 1; | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| fadeIns.forEach(el => { | |
| observer.observe(el); | |
| }); | |
| // Animate the circuit diagram | |
| const paths = document.querySelectorAll('.circuit-path'); | |
| paths.forEach((path, index) => { | |
| path.style.animationDelay = `${index * 0.5}s`; | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=alphonse86/prooflens" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |