Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nexus Robotics - List Your Humanoid for Lease</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto:wght@300;400;500&display=swap'); | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| background-color: #0f172a; | |
| color: #e2e8f0; | |
| } | |
| .futuristic-text { | |
| font-family: 'Orbitron', sans-serif; | |
| letter-spacing: 1px; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%); | |
| } | |
| .card-glass { | |
| background: rgba(15, 23, 42, 0.7); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); | |
| } | |
| .input-futuristic { | |
| background: rgba(30, 58, 138, 0.3); | |
| border: 1px solid #3b82f6; | |
| color: white; | |
| } | |
| .input-futuristic:focus { | |
| outline: none; | |
| border-color: #60a5fa; | |
| box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); | |
| } | |
| .glow-effect { | |
| box-shadow: 0 0 15px rgba(59, 130, 246, 0.7); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); | |
| } | |
| } | |
| .robot-model { | |
| transition: all 0.3s ease; | |
| } | |
| .robot-model:hover { | |
| transform: translateY(-5px); | |
| } | |
| /* Payment modal */ | |
| .payment-modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(15, 23, 42, 0.9); | |
| z-index: 1000; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .payment-content { | |
| background: #0f172a; | |
| border: 1px solid #3b82f6; | |
| border-radius: 12px; | |
| width: 90%; | |
| max-width: 500px; | |
| padding: 2rem; | |
| position: relative; | |
| } | |
| .close-modal { | |
| position: absolute; | |
| top: 15px; | |
| right: 15px; | |
| color: #94a3b8; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| } | |
| .payment-qr { | |
| background: white; | |
| padding: 1rem; | |
| border-radius: 8px; | |
| margin: 1rem auto; | |
| width: 200px; | |
| height: 200px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| /* Progress steps */ | |
| .step { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| } | |
| .step-number { | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 50%; | |
| background-color: #1e40af; | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-right: 1rem; | |
| font-weight: bold; | |
| } | |
| .step.active .step-number { | |
| background-color: #3b82f6; | |
| } | |
| .step.completed .step-number { | |
| background-color: #10b981; | |
| } | |
| .step-text { | |
| color: #94a3b8; | |
| } | |
| .step.active .step-text { | |
| color: white; | |
| } | |
| .step.completed .step-text { | |
| color: #10b981; | |
| } | |
| /* BRC-20 display */ | |
| .brc20-display { | |
| background: rgba(30, 58, 138, 0.5); | |
| border: 1px solid #3b82f6; | |
| border-radius: 8px; | |
| padding: 1rem; | |
| margin-top: 1rem; | |
| } | |
| .brc20-value { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| color: #3b82f6; | |
| } | |
| /* Buyout options */ | |
| .buyout-option { | |
| border: 1px solid #3b82f6; | |
| border-radius: 8px; | |
| padding: 1rem; | |
| margin-bottom: 1rem; | |
| transition: all 0.3s ease; | |
| } | |
| .buyout-option:hover { | |
| background: rgba(30, 58, 138, 0.3); | |
| } | |
| .buyout-option.active { | |
| background: rgba(30, 58, 138, 0.5); | |
| border-color: #10b981; | |
| } | |
| /* Toggle switch */ | |
| .switch { | |
| position: relative; | |
| display: inline-block; | |
| width: 50px; | |
| height: 24px; | |
| } | |
| .switch input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .slider { | |
| position: absolute; | |
| cursor: pointer; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: #1e40af; | |
| transition: .4s; | |
| border-radius: 24px; | |
| } | |
| .slider:before { | |
| position: absolute; | |
| content: ""; | |
| height: 16px; | |
| width: 16px; | |
| left: 4px; | |
| bottom: 4px; | |
| background-color: white; | |
| transition: .4s; | |
| border-radius: 50%; | |
| } | |
| input:checked + .slider { | |
| background-color: #10b981; | |
| } | |
| input:checked + .slider:before { | |
| transform: translateX(26px); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Header --> | |
| <header class="gradient-bg py-6 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center"> | |
| <i class="fas fa-robot text-white text-xl"></i> | |
| </div> | |
| <h1 class="futuristic-text text-2xl font-bold text-white">NEXUS<span class="text-blue-400">ROBOTICS</span></h1> | |
| </div> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md futuristic-text transition"> | |
| Connect Wallet | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <!-- Listing Section --> | |
| <section class="mb-20"> | |
| <div class="text-center mb-12"> | |
| <h2 class="futuristic-text text-4xl md:text-5xl font-bold mb-4"> | |
| List Your <span class="text-blue-400">Humanoid Robot</span> for Lease | |
| </h2> | |
| <p class="text-xl text-blue-200 max-w-3xl mx-auto"> | |
| Tokenize your robotics asset and earn passive income through our BCR20 lease marketplace. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <!-- Listing Form --> | |
| <div class="card-glass rounded-xl p-8"> | |
| <h3 class="futuristic-text text-2xl font-bold mb-6 text-blue-300">Robot Details</h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-blue-200 mb-2">Robot Model</label> | |
| <select class="input-futuristic w-full px-4 py-3 rounded-lg"> | |
| <option>Select Model</option> | |
| <option>Nexus X-2000 Industrial</option> | |
| <option>Nexus S-1500 Service</option> | |
| <option>Nexus H-900 Healthcare</option> | |
| <option>Nexus C-500 Companion</option> | |
| <option>Custom Model</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-blue-200 mb-2">Manufacturing Date</label> | |
| <input type="date" class="input-futuristic w-full px-4 py-3 rounded-lg"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-blue-200 mb-2">Current Operational Hours</label> | |
| <input type="number" class="input-futuristic w-full px-4 py-3 rounded-lg" placeholder="e.g. 1500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-blue-200 mb-2">Robot Location</label> | |
| <input type="text" class="input-futuristic w-full px-4 py-3 rounded-lg" placeholder="City, Country"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-blue-200 mb-2">Upload Robot Photos</label> | |
| <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-blue-500 border-dashed rounded-md"> | |
| <div class="space-y-1 text-center"> | |
| <div class="flex text-sm text-blue-200"> | |
| <label class="relative cursor-pointer bg-blue-900 rounded-md font-medium text-blue-400 hover:text-blue-300 focus-within:outline-none"> | |
| <span>Upload files</span> | |
| <input type="file" class="sr-only" multiple> | |
| </label> | |
| <p class="pl-1">or drag and drop</p> | |
| </div> | |
| <p class="text-xs text-blue-400"> | |
| PNG, JPG up to 10MB | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Lease Terms --> | |
| <div class="card-glass rounded-xl p-8"> | |
| <h3 class="futuristic-text text-2xl font-bold mb-6 text-blue-300">Lease Terms</h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-blue-200 mb-2">Monthly Lease Price (BCR20)</label> | |
| <div class="relative"> | |
| <input type="number" id="leasePrice" class="input-futuristic w-full px-4 py-3 rounded-lg" placeholder="Enter your asking price" value="3500"> | |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> | |
| <span class="text-blue-300">BCR20</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-blue-200 mb-2">Minimum Lease Duration</label> | |
| <select class="input-futuristic w-full px-4 py-3 rounded-lg"> | |
| <option value="3">3 Months</option> | |
| <option value="6" selected>6 Months</option> | |
| <option value="12">12 Months</option> | |
| <option value="24">24 Months</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-blue-200 mb-2">Maintenance Responsibility</label> | |
| <div class="flex space-x-4"> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="maintenance" class="form-radio text-blue-500" checked> | |
| <span class="ml-2">Owner Provides (+15%)</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="maintenance" class="form-radio text-blue-500"> | |
| <span class="ml-2">Lessee Responsible</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-blue-200 mb-2">Insurance Coverage</label> | |
| <div class="flex space-x-4"> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="insurance" class="form-radio text-blue-500" checked> | |
| <span class="ml-2">Included (+8%)</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="insurance" class="form-radio text-blue-500"> | |
| <span class="ml-2">Lessee Provides</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-blue-200 mb-2">Specialization</label> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="form-checkbox text-blue-500"> | |
| <span class="ml-2">Manufacturing</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="form-checkbox text-blue-500"> | |
| <span class="ml-2">Healthcare</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="form-checkbox text-blue-500"> | |
| <span class="ml-2">Logistics</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="form-checkbox text-blue-500"> | |
| <span class="ml-2">Customer Service</span> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Lease Buyout Options --> | |
| <div class="mt-6"> | |
| <h4 class="futuristic-text text-lg font-bold mb-4 text-blue-300">Lease Buyout Options</h4> | |
| <div class="buyout-option active"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <label class="font-medium">End-of-Term Buyout</label> | |
| <label class="switch"> | |
| <input type="checkbox" checked> | |
| <span class="slider"></span> | |
| </label> | |
| </div> | |
| <p class="text-sm text-blue-300">Allow lessee to purchase the robot at the end of lease term for <span class="text-white">120%</span> of total lease payments.</p> | |
| <div class="mt-3"> | |
| <label class="block text-xs text-blue-300 mb-1">Buyout Price Multiplier</label> | |
| <select class="input-futuristic w-full px-3 py-2 rounded-lg text-sm"> | |
| <option value="1.1">110% of total payments</option> | |
| <option value="1.2" selected>120% of total payments</option> | |
| <option value="1.3">130% of total payments</option> | |
| <option value="1.5">150% of total payments</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="buyout-option"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <label class="font-medium">7-Day Immediate Buyout</label> | |
| <label class="switch"> | |
| <input type="checkbox"> | |
| <span class="slider"></span> | |
| </label> | |
| </div> | |
| <p class="text-sm text-blue-300">Allow lessee to purchase the robot within 7 days of lease start for <span class="text-white">150%</span> of total lease value.</p> | |
| <div class="mt-3 hidden"> | |
| <label class="block text-xs text-blue-300 mb-1">Immediate Buyout Multiplier</label> | |
| <select class="input-futuristic w-full px-3 py-2 rounded-lg text-sm"> | |
| <option value="1.4">140% of total value</option> | |
| <option value="1.5" selected>150% of total value</option> | |
| <option value="1.6">160% of total value</option> | |
| <option value="2.0">200% of total value</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- BRC-20 Display --> | |
| <div class="brc20-display"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-sm text-blue-300">Fractal Bitcoin Equivalent</p> | |
| <p class="brc20-value">0.025 BTC</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm text-blue-300">Current Rate</p> | |
| <p class="text-white">1 BCR20 = 0.00000714 BTC</p> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-xs text-blue-400"> | |
| <p>Rate updates every 5 minutes. Final amount will be calculated at time of transaction.</p> | |
| </div> | |
| </div> | |
| <button id="listRobotBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg futuristic-text text-lg transition glow-effect"> | |
| List Robot for Lease | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works Section --> | |
| <section class="mb-20"> | |
| <div class="card-glass rounded-xl p-8"> | |
| <h3 class="futuristic-text text-2xl font-bold mb-8 text-blue-300">How Robot Leasing Works</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-blue-900 bg-opacity-30 p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="step-number">1</div> | |
| <h4 class="futuristic-text text-lg font-bold ml-3">List Your Robot</h4> | |
| </div> | |
| <p class="text-blue-200 text-sm"> | |
| Provide details about your humanoid robot including model, condition, and desired lease terms. Our system will verify your ownership. | |
| </p> | |
| </div> | |
| <div class="bg-blue-900 bg-opacity-30 p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="step-number">2</div> | |
| <h4 class="futuristic-text text-lg font-bold ml-3">Tokenize Asset</h4> | |
| </div> | |
| <p class="text-blue-200 text-sm"> | |
| Your robot is converted into BCR20 tokens representing fractional ownership. These tokens are escrowed during the lease period. | |
| </p> | |
| </div> | |
| <div class="bg-blue-900 bg-opacity-30 p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="step-number">3</div> | |
| <h4 class="futuristic-text text-lg font-bold ml-3">Receive Payments</h4> | |
| </div> | |
| <p class="text-blue-200 text-sm"> | |
| Earn monthly payments in BCR20 tokens or convert to Bitcoin via Fractal. Get your robot back when lease ends. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Examples --> | |
| <section> | |
| <h3 class="futuristic-text text-2xl font-bold mb-8 text-blue-300">Example Lease Pricing</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="robot-model card-glass rounded-xl p-6 hover:glow-effect transition cursor-pointer"> | |
| <div class="bg-blue-900 bg-opacity-30 rounded-lg p-4 mb-4 flex justify-center"> | |
| <i class="fas fa-industry text-4xl text-blue-400"></i> | |
| </div> | |
| <h4 class="futuristic-text text-xl font-bold mb-2">Industrial Model</h4> | |
| <p class="text-blue-300 text-sm mb-4">X-2000 with 500 operational hours</p> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between"> | |
| <span class="text-blue-300">Monthly Rate:</span> | |
| <span class="text-blue-400 font-bold">4,200 BCR20</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-blue-300">6-Month ROI:</span> | |
| <span class="text-green-400 font-bold">18.5%</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-blue-300">Buyout Price:</span> | |
| <span class="text-white font-bold">30,240 BCR20</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="robot-model card-glass rounded-xl p-6 hover:glow-effect transition cursor-pointer"> | |
| <div class="bg-blue-900 bg-opacity-30 rounded-lg p-4 mb-4 flex justify-center"> | |
| <i class="fas fa-hands-helping text-4xl text-blue-400"></i> | |
| </div> | |
| <h4 class="futuristic-text text-xl font-bold mb-2">Service Model</h4> | |
| <p class="text-blue-300 text-sm mb-4">S-1500 with 200 operational hours</p> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between"> | |
| <span class="text-blue-300">Monthly Rate:</span> | |
| <span class="text-blue-400 font-bold">3,500 BCR20</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-blue-300">6-Month ROI:</span> | |
| <span class="text-green-400 font-bold">15.2%</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-blue-300">Buyout Price:</span> | |
| <span class="text-white font-bold">25,200 BCR20</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="robot-model card-glass rounded-xl p-6 hover:glow-effect transition cursor-pointer"> | |
| <div class="bg-blue-900 bg-opacity-30 rounded-lg p-4 mb-4 flex justify-center"> | |
| <i class="fas fa-heartbeat text-4xl text-blue-400"></i> | |
| </div> | |
| <h4 class="futuristic-text text-xl font-bold mb-2">Healthcare Model</h4> | |
| <p class="text-blue-300 text-sm mb-4">H-900 with 100 operational hours</p> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between"> | |
| <span class="text-blue-300">Monthly Rate:</span> | |
| <span class="text-blue-400 font-bold">4,800 BCR20</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-blue-300">6-Month ROI:</span> | |
| <span class="text-green-400 font-bold">21.3%</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-blue-300">Buyout Price:</span> | |
| <span class="text-white font-bold">34,560 BCR20</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Simple Footer --> | |
| <footer class="gradient-bg py-6 px-4 sm:px-6 lg:px-8 mt-20"> | |
| <div class="max-w-7xl mx-auto text-center"> | |
| <p class="text-blue-300 text-sm"> | |
| © 2023 Nexus Robotics. All rights reserved. | |
| </p> | |
| </div> | |
| </footer> | |
| <!-- Payment Modal --> | |
| <div id="paymentModal" class="payment-modal"> | |
| <div class="payment-content"> | |
| <span class="close-modal">×</span> | |
| <h3 class="futuristic-text text-2xl font-bold mb-6 text-blue-300 text-center">Fractal Bitcoin Payment</h3> | |
| <div class="step"> | |
| <div class="step-number">1</div> | |
| <div class="step-text">Listing Fee Paid</div> | |
| </div> | |
| <div class="step active"> | |
| <div class="step-number">2</div> | |
| <div class="step-text">Receive Bitcoin Payment</div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">3</div> | |
| <div class="step-text">Robot Verification</div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">4</div> | |
| <div class="step-text">Lease Activation</div> | |
| </div> | |
| <div class="text-center my-6"> | |
| <p class="text-blue-200 mb-4">Send <span class="text-white font-bold">0.025 BTC</span> to:</p> | |
| <p class="text-blue-400 text-sm mb-6 break-all">bc1qxy2kgdygjrsqtzq2n0yrf249nw3q2k6x2g0p2e</p> | |
| <div class="payment-qr"> | |
| <!-- QR code placeholder --> | |
| <i class="fas fa-qrcode text-6xl text-gray-800"></i> | |
| </div> | |
| <p class="text-blue-300 text-sm mt-4">Equivalent to: <span class="text-white">3,500 BCR20</span></p> | |
| </div> | |
| <div class="bg-blue-900 bg-opacity-30 p-4 rounded-lg mb-6"> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span class="text-blue-300">Amount Received:</span> | |
| <span class="text-blue-300">0.000 BTC</span> | |
| </div> | |
| <div class="w-full bg-blue-800 rounded-full h-2.5"> | |
| <div class="bg-blue-400 h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg futuristic-text transition"> | |
| I've Sent the Payment | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Payment modal functionality | |
| const listRobotBtn = document.getElementById('listRobotBtn'); | |
| const paymentModal = document.getElementById('paymentModal'); | |
| const closeModal = document.querySelector('.close-modal'); | |
| listRobotBtn.addEventListener('click', function() { | |
| paymentModal.style.display = 'flex'; | |
| }); | |
| closeModal.addEventListener('click', function() { | |
| paymentModal.style.display = 'none'; | |
| }); | |
| window.addEventListener('click', function(event) { | |
| if (event.target === paymentModal) { | |
| paymentModal.style.display = 'none'; | |
| } | |
| }); | |
| // Simulate payment progress | |
| if (paymentModal) { | |
| setTimeout(() => { | |
| const progressBar = document.querySelector('.payment-content .bg-blue-400'); | |
| const amountReceived = document.querySelector('.payment-content .text-blue-300:last-child'); | |
| let progress = 0; | |
| const interval = setInterval(() => { | |
| progress += 5; | |
| progressBar.style.width = `${progress}%`; | |
| amountReceived.textContent = `${(0.025 * progress / 100).toFixed(3)} BTC`; | |
| if (progress >= 100) { | |
| clearInterval(interval); | |
| // Update steps | |
| document.querySelectorAll('.step')[1].classList.remove('active'); | |
| document.querySelectorAll('.step')[1].classList.add('completed'); | |
| document.querySelectorAll('.step')[2].classList.add('active'); | |
| // Change button text | |
| const modalButton = document.querySelector('.payment-content button'); | |
| modalButton.textContent = 'Proceed to Verification'; | |
| modalButton.classList.remove('bg-blue-600'); | |
| modalButton.classList.add('bg-green-600'); | |
| } | |
| }, 300); | |
| }, 1000); | |
| } | |
| // Buyout option toggle functionality | |
| const buyoutOptions = document.querySelectorAll('.buyout-option'); | |
| buyoutOptions.forEach(option => { | |
| const toggle = option.querySelector('input[type="checkbox"]'); | |
| const settings = option.querySelector('div.hidden'); | |
| toggle.addEventListener('change', function() { | |
| if (this.checked) { | |
| option.classList.add('active'); | |
| if (settings) settings.classList.remove('hidden'); | |
| } else { | |
| option.classList.remove('active'); | |
| if (settings) settings.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| // Update BRC-20 display based on lease price | |
| const leasePriceInput = document.getElementById('leasePrice'); | |
| const brc20Value = document.querySelector('.brc20-value'); | |
| leasePriceInput.addEventListener('input', function() { | |
| const price = parseFloat(this.value) || 0; | |
| const btcValue = price * 0.00000714; | |
| brc20Value.textContent = btcValue.toFixed(6) + ' BTC'; | |
| // Also update the modal value if it's open | |
| if (paymentModal.style.display === 'flex') { | |
| document.querySelector('.payment-content .text-white.font-bold').textContent = btcValue.toFixed(3) + ' BTC'; | |
| document.querySelector('.payment-content .text-white:last-child').textContent = price + ' BCR20'; | |
| } | |
| }); | |
| </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=privateuserh/roboticsdevv1-0" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |