capn1derfl/zp-id at main

Ctrl+K

1 contributor

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ZeroPoint.ID Identity Demo</title> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <script> tailwind.config = { theme: { extend: { colors: { 'hedera-purple': '#4d3bd5', 'hedera-dark': '#120e2c', 'hedera-light': '#f0f4ff' }, fontFamily: { 'mono': ['SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'] } } } } </script> <style> .code-block { font-family: monospace; overflow-x: auto; max-height: 200px; } .step-icon { transition: all 0.3s ease; } .fade-in { animation: fadeIn 0.5s; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .masked { filter: blur(4px); cursor: pointer; } .masked:hover { filter: blur(0); } </style> </head> <body class="bg-hedera-dark text-white min-h-screen">  <div class="container mx-auto px-4 py-8">  <header class="text-center mb-12"> <div class="flex items-center justify-center mb-4"> <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-hedera-purple rounded-lg flex items-center justify-center mr-4"> <i class="fas fa-fingerprint text-3xl"></i> </div> <div> <h1 class="text-4xl font-bold bg-gradient-to-r from-blue-300 to-purple-400 bg-clip-text text-transparent"> ZeroPoint.ID </h1> <p class="text-gray-400 mt-1">Hedera Identity Proof-of-Concept</p> </div> </div> <p class="max-w-2xl mx-auto text-gray-300"> A demonstration of decentralized identity using Hedera Hashgraph. Create your digital identity, mint NFTs, and prove ownership through cryptographic challenges. </p> </header> <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">  <div class="lg:col-span-2 space-y-8">  <div class="bg-gray-800 rounded-xl p-6"> <h2 class="text-2xl font-bold mb-6 flex items-center"> <i class="fas fa-list-ol text-hedera-purple mr-3"></i> Identity Creation Steps </h2> <div class="relative pt-1"> <div class="flex mb-2 items-center justify-between"> <div> <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-hedera-purple bg-purple-900"> Step <span id="currentStep">1</span> of 6 </span> </div> <div class="text-right"> <span class="text-xs font-semibold inline-block text-gray-400"> Completion </span> </div> </div> <div class="overflow-hidden h-3 mb-4 text-xs flex rounded bg-gray-700"> <div id="progressBar" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-gradient-to-r from-blue-500 to-hedera-purple transition-all duration-500" style="width: 16%"></div> </div> </div> <div class="steps-container space-y-5">  <div id="step1" class="step-card bg-gray-800 border-l-4 border-hedera-purple rounded-lg p-5 shadow-lg"> <div class="flex items-start"> <div class="step-icon w-8 h-8 rounded-full bg-hedera-purple flex items-center justify-center mr-4 mt-1"> <span class="font-bold">1</span> </div> <div class="flex-1"> <h3 class="text-lg font-bold mb-2">Create User Account</h3> <p class="text-sm text-gray-400 mb-4"> Start by creating a user account. This stores your credentials locally. </p> <div class="space-y-4"> <div> <label class="block text-sm font-medium mb-1">Username</label> <input id="username" type="text" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-hedera-purple" placeholder="Enter your username"> </div> <div> <label class="block text-sm font-medium mb-1">Password</label> <input id="password" type="password" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-hedera-purple" placeholder="••••••••"> </div> <div> <label class="block text-sm font-medium mb-1">Email</label> <input id="email" type="email" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-hedera-purple" placeholder="your@email.com"> </div> <button id="createUserBtn" class="w-full py-2.5 bg-gradient-to-r from-blue-600 to-hedera-purple rounded-lg font-medium hover:from-blue-700 hover:to-purple-800 transition-all flex items-center justify-center"> <i class="fas fa-user-plus mr-2"></i> Create Account </button> <div id="step1Result" class="mt-3 text-sm p-3 bg-gray-900 rounded hidden"></div> </div> </div> </div> </div>  <div id="step2" class="step-card bg-gray-800 border-l-4 border-gray-600 rounded-lg p-5 shadow-lg opacity-50 pointer-events-none"> <div class="flex items-start"> <div class="step-icon w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center mr-4 mt-1"> <span class="font-bold">2</span> </div> <div class="flex-1"> <h3 class="text-lg font-bold mb-2">Authenticate User</h3> <p class="text-sm text-gray-400 mb-4"> Verify your identity with the credentials you just created. </p> <div> <label class="block text-sm font-medium mb-1">Username</label> <input id="authUsername" type="text" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-hedera-purple" disabled> </div> <div class="mt-3"> <label class="block text-sm font-medium mb-1">Password</label> <input id="authPassword" type="password" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-hedera-purple" placeholder="••••••••" disabled> </div> <button id="authUserBtn" class="w-full py-2.5 bg-gradient-to-r from-blue-600 to-hedera-purple rounded-lg font-medium mt-4 opacity-70 flex items-center justify-center" disabled> <i class="fas fa-unlock-alt mr-2"></i> Authenticate </button> <div id="step2Result" class="mt-3 text-sm p-3 bg-gray-900 rounded hidden"></div> </div> </div> </div>  <div id="step3" class="step-card bg-gray-800 border-l-4 border-gray-600 rounded-lg p-5 shadow-lg opacity-50 pointer-events-none"> <div class="flex items-start"> <div class="step-icon w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center mr-4 mt-1"> <span class="font-bold">3</span> </div> <div class="flex-1"> <h3 class="text-lg font-bold mb-2">Create Hedera Wallet</h3> <p class="text-sm text-gray-400 mb-4"> Generate your Hedera wallet with public/private keys and initial HBAR allocation. </p> <button id="createWalletBtn" class="w-full py-2.5 bg-gradient-to-r from-blue-600 to-hedera-purple rounded-lg font-medium opacity-70 flex items-center justify-center" disabled> <i class="fas fa-wallet mr-2"></i> Create Wallet </button> <div id="step3Result" class="mt-4 hidden"> <h4 class="font-medium mb-2">Wallet Details (Securely store this information):</h4> <div class="bg-gray-900 p-4 rounded-lg text-sm"> <div class="mb-2"> <span class="text-gray-400">Account ID:</span> <div id="accountId" class="font-mono masked">0.0.123456</div> </div> <div> <span class="text-gray-400">Private Key:</span> <div id="privateKey" class="font-mono masked">302e020100300506032b6570042204208c10a5fd7b2c25dcaa6ab4d7b... (hover to reveal)</div> </div> </div> </div> </div> </div> </div>  <div id="step4" class="step-card bg-gray-800 border-l-4 border-gray-600 rounded-lg p-5 shadow-lg opacity-50 pointer-events-none"> <div class="flex items-start"> <div class="step-icon w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center mr-4 mt-1"> <span class="font-bold">4</span> </div> <div class="flex-1"> <h3 class="text-lg font-bold mb-2">Create HCS Topic</h3> <p class="text-sm text-gray-400 mb-4"> Create a Hedera Consensus Service topic for identity verification messages. </p> <button id="createTopicBtn" class="w-full py-2.5 bg-gradient-to-r from-blue-600 to-hedera-purple rounded-lg font-medium opacity-70 flex items-center justify-center" disabled> <i class="fas fa-comment-alt mr-2"></i> Create Topic </button> <div id="step4Result" class="mt-3 text-sm p-3 bg-gray-900 rounded hidden"> <span class="text-gray-400">Topic ID:</span> <span id="topicId" class="font-mono">0.0.123456</span> </div> </div> </div> </div>  <div id="step5" class="step-card bg-gray-800 border-l-4 border-gray-600 rounded-lg p-5 shadow-lg opacity-50 pointer-events-none"> <div class="flex items-start"> <div class="step-icon w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center mr-4 mt-1"> <span class="font-bold">5</span> </div> <div class="flex-1"> <h3 class="text-lg font-bold mb-2">Mint MintMark™ NFT</h3> <p class="text-sm text-gray-400 mb-4"> Mint a unique NFT that represents your digital identity on Hedera. </p> <button id="mintNftBtn" class="w-full py-2.5 bg-gradient-to-r from-blue-600 to-hedera-purple rounded-lg font-medium opacity-70 flex items-center justify-center" disabled> <i class="fas fa-gem mr-2"></i> Mint Identity NFT </button> <div id="step5Result" class="mt-3 hidden"> <div class="bg-gray-900 p-4 rounded-lg"> <div class="flex items-center mb-4"> <div class="h-16 w-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg flex items-center justify-center mr-4"> <i class="fas fa-gem text-white"></i> </div> <div> <div class="font-semibold">MintMark™ Identity NFT</div> <div class="text-sm text-gray-400">Token ID: <span id="tokenId" class="font-mono">0.0.123456</span></div> </div> </div> <h4 class="font-medium mb-2">NFT Metadata:</h4> <div class="text-sm"> <pre id="nftMetadata" class="bg-gray-800 p-3 rounded code-block"></pre> </div> </div> </div> </div> </div> </div>  <div id="step6" class="step-card bg-gray-800 border-l-4 border-gray-600 rounded-lg p-5 shadow-lg opacity-50 pointer-events-none"> <div class="flex items-start"> <div class="step-icon w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center mr-4 mt-1"> <span class="font-bold">6</span> </div> <div class="flex-1"> <h3 class="text-lg font-bold mb-2">Setup Topic Listener</h3> <p class="text-sm text-gray-400 mb-4"> Listen to the HCS topic for identity verification challenges. </p> <button id="setupListenerBtn" class="w-full py-2.5 bg-gradient-to-r from-blue-600 to-hedera-purple rounded-lg font-medium opacity-70 flex items-center justify-center" disabled> <i class="fas fa-satellite-dish mr-2"></i> Start Listening </button> <div id="step6Result" class="mt-3 hidden"> <div class="bg-gray-900 p-4 rounded-lg"> <div class="flex items-center mb-3"> <i class="fas fa-circle text-green-500 animate-pulse mr-2"></i> <span>Listening to topic: <span id="listeningTopicId" class="font-mono">0.0.123456</span></span> </div> <h4 class="font-medium mb-2">Challenge Status:</h4> <div class="text-sm mb-3"> <div class="flex items-center text-yellow-300"> <i class="fas fa-exclamation-circle mr-2"></i> <span id="challengeStatus">Awaiting challenge...</span> </div> </div> <h4 class="font-medium mb-2">Challenge Messages:</h4> <div id="messageLog" class="h-40 overflow-y-auto bg-gray-800 p-3 rounded text-sm font-mono"></div> </div> </div> </div> </div> </div> </div> </div> </div> - Initial Deployment

dcce82e verified over 1 year ago