Hugging Face's logo

Spaces:
privateuserh
/
roboticsdevv1-0
Running

App Files Community
privateuserh commited on
Commit
64c8480
·
verified ·
1 Parent(s): c569e88

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +730 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Roboticsdevv1 0
3
- emoji: 🔥
4
- colorFrom: purple
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: roboticsdevv1-0
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,730 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Nexus Robotics - List Your Humanoid for Lease</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto:wght@300;400;500&display=swap');
12
+
13
+ body {
14
+ font-family: 'Roboto', sans-serif;
15
+ background-color: #0f172a;
16
+ color: #e2e8f0;
17
+ }
18
+
19
+ .futuristic-text {
20
+ font-family: 'Orbitron', sans-serif;
21
+ letter-spacing: 1px;
22
+ }
23
+
24
+ .gradient-bg {
25
+ background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
26
+ }
27
+
28
+ .card-glass {
29
+ background: rgba(15, 23, 42, 0.7);
30
+ backdrop-filter: blur(10px);
31
+ border: 1px solid rgba(255, 255, 255, 0.1);
32
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
33
+ }
34
+
35
+ .input-futuristic {
36
+ background: rgba(30, 58, 138, 0.3);
37
+ border: 1px solid #3b82f6;
38
+ color: white;
39
+ }
40
+
41
+ .input-futuristic:focus {
42
+ outline: none;
43
+ border-color: #60a5fa;
44
+ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
45
+ }
46
+
47
+ .glow-effect {
48
+ box-shadow: 0 0 15px rgba(59, 130, 246, 0.7);
49
+ }
50
+
51
+ .pulse-animation {
52
+ animation: pulse 2s infinite;
53
+ }
54
+
55
+ @keyframes pulse {
56
+ 0% {
57
+ box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
58
+ }
59
+ 70% {
60
+ box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
61
+ }
62
+ 100% {
63
+ box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
64
+ }
65
+ }
66
+
67
+ .robot-model {
68
+ transition: all 0.3s ease;
69
+ }
70
+
71
+ .robot-model:hover {
72
+ transform: translateY(-5px);
73
+ }
74
+
75
+ /* Payment modal */
76
+ .payment-modal {
77
+ display: none;
78
+ position: fixed;
79
+ top: 0;
80
+ left: 0;
81
+ width: 100%;
82
+ height: 100%;
83
+ background-color: rgba(15, 23, 42, 0.9);
84
+ z-index: 1000;
85
+ align-items: center;
86
+ justify-content: center;
87
+ }
88
+
89
+ .payment-content {
90
+ background: #0f172a;
91
+ border: 1px solid #3b82f6;
92
+ border-radius: 12px;
93
+ width: 90%;
94
+ max-width: 500px;
95
+ padding: 2rem;
96
+ position: relative;
97
+ }
98
+
99
+ .close-modal {
100
+ position: absolute;
101
+ top: 15px;
102
+ right: 15px;
103
+ color: #94a3b8;
104
+ font-size: 1.5rem;
105
+ cursor: pointer;
106
+ }
107
+
108
+ .payment-qr {
109
+ background: white;
110
+ padding: 1rem;
111
+ border-radius: 8px;
112
+ margin: 1rem auto;
113
+ width: 200px;
114
+ height: 200px;
115
+ display: flex;
116
+ align-items: center;
117
+ justify-content: center;
118
+ }
119
+
120
+ /* Progress steps */
121
+ .step {
122
+ display: flex;
123
+ align-items: center;
124
+ margin-bottom: 1rem;
125
+ }
126
+
127
+ .step-number {
128
+ width: 30px;
129
+ height: 30px;
130
+ border-radius: 50%;
131
+ background-color: #1e40af;
132
+ color: white;
133
+ display: flex;
134
+ align-items: center;
135
+ justify-content: center;
136
+ margin-right: 1rem;
137
+ font-weight: bold;
138
+ }
139
+
140
+ .step.active .step-number {
141
+ background-color: #3b82f6;
142
+ }
143
+
144
+ .step.completed .step-number {
145
+ background-color: #10b981;
146
+ }
147
+
148
+ .step-text {
149
+ color: #94a3b8;
150
+ }
151
+
152
+ .step.active .step-text {
153
+ color: white;
154
+ }
155
+
156
+ .step.completed .step-text {
157
+ color: #10b981;
158
+ }
159
+
160
+ /* BRC-20 display */
161
+ .brc20-display {
162
+ background: rgba(30, 58, 138, 0.5);
163
+ border: 1px solid #3b82f6;
164
+ border-radius: 8px;
165
+ padding: 1rem;
166
+ margin-top: 1rem;
167
+ }
168
+
169
+ .brc20-value {
170
+ font-size: 1.5rem;
171
+ font-weight: bold;
172
+ color: #3b82f6;
173
+ }
174
+
175
+ /* Buyout options */
176
+ .buyout-option {
177
+ border: 1px solid #3b82f6;
178
+ border-radius: 8px;
179
+ padding: 1rem;
180
+ margin-bottom: 1rem;
181
+ transition: all 0.3s ease;
182
+ }
183
+
184
+ .buyout-option:hover {
185
+ background: rgba(30, 58, 138, 0.3);
186
+ }
187
+
188
+ .buyout-option.active {
189
+ background: rgba(30, 58, 138, 0.5);
190
+ border-color: #10b981;
191
+ }
192
+
193
+ /* Toggle switch */
194
+ .switch {
195
+ position: relative;
196
+ display: inline-block;
197
+ width: 50px;
198
+ height: 24px;
199
+ }
200
+
201
+ .switch input {
202
+ opacity: 0;
203
+ width: 0;
204
+ height: 0;
205
+ }
206
+
207
+ .slider {
208
+ position: absolute;
209
+ cursor: pointer;
210
+ top: 0;
211
+ left: 0;
212
+ right: 0;
213
+ bottom: 0;
214
+ background-color: #1e40af;
215
+ transition: .4s;
216
+ border-radius: 24px;
217
+ }
218
+
219
+ .slider:before {
220
+ position: absolute;
221
+ content: "";
222
+ height: 16px;
223
+ width: 16px;
224
+ left: 4px;
225
+ bottom: 4px;
226
+ background-color: white;
227
+ transition: .4s;
228
+ border-radius: 50%;
229
+ }
230
+
231
+ input:checked + .slider {
232
+ background-color: #10b981;
233
+ }
234
+
235
+ input:checked + .slider:before {
236
+ transform: translateX(26px);
237
+ }
238
+ </style>
239
+ </head>
240
+ <body class="min-h-screen">
241
+ <!-- Header -->
242
+ <header class="gradient-bg py-6 px-4 sm:px-6 lg:px-8">
243
+ <div class="max-w-7xl mx-auto flex justify-between items-center">
244
+ <div class="flex items-center space-x-2">
245
+ <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center">
246
+ <i class="fas fa-robot text-white text-xl"></i>
247
+ </div>
248
+ <h1 class="futuristic-text text-2xl font-bold text-white">NEXUS<span class="text-blue-400">ROBOTICS</span></h1>
249
+ </div>
250
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md futuristic-text transition">
251
+ Connect Wallet
252
+ </button>
253
+ </div>
254
+ </header>
255
+
256
+ <!-- Main Content -->
257
+ <main class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
258
+ <!-- Listing Section -->
259
+ <section class="mb-20">
260
+ <div class="text-center mb-12">
261
+ <h2 class="futuristic-text text-4xl md:text-5xl font-bold mb-4">
262
+ List Your <span class="text-blue-400">Humanoid Robot</span> for Lease
263
+ </h2>
264
+ <p class="text-xl text-blue-200 max-w-3xl mx-auto">
265
+ Tokenize your robotics asset and earn passive income through our BCR20 lease marketplace.
266
+ </p>
267
+ </div>
268
+
269
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
270
+ <!-- Listing Form -->
271
+ <div class="card-glass rounded-xl p-8">
272
+ <h3 class="futuristic-text text-2xl font-bold mb-6 text-blue-300">Robot Details</h3>
273
+
274
+ <div class="space-y-6">
275
+ <div>
276
+ <label class="block text-sm font-medium text-blue-200 mb-2">Robot Model</label>
277
+ <select class="input-futuristic w-full px-4 py-3 rounded-lg">
278
+ <option>Select Model</option>
279
+ <option>Nexus X-2000 Industrial</option>
280
+ <option>Nexus S-1500 Service</option>
281
+ <option>Nexus H-900 Healthcare</option>
282
+ <option>Nexus C-500 Companion</option>
283
+ <option>Custom Model</option>
284
+ </select>
285
+ </div>
286
+
287
+ <div>
288
+ <label class="block text-sm font-medium text-blue-200 mb-2">Manufacturing Date</label>
289
+ <input type="date" class="input-futuristic w-full px-4 py-3 rounded-lg">
290
+ </div>
291
+
292
+ <div>
293
+ <label class="block text-sm font-medium text-blue-200 mb-2">Current Operational Hours</label>
294
+ <input type="number" class="input-futuristic w-full px-4 py-3 rounded-lg" placeholder="e.g. 1500">
295
+ </div>
296
+
297
+ <div>
298
+ <label class="block text-sm font-medium text-blue-200 mb-2">Robot Location</label>
299
+ <input type="text" class="input-futuristic w-full px-4 py-3 rounded-lg" placeholder="City, Country">
300
+ </div>
301
+
302
+ <div>
303
+ <label class="block text-sm font-medium text-blue-200 mb-2">Upload Robot Photos</label>
304
+ <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-blue-500 border-dashed rounded-md">
305
+ <div class="space-y-1 text-center">
306
+ <div class="flex text-sm text-blue-200">
307
+ <label class="relative cursor-pointer bg-blue-900 rounded-md font-medium text-blue-400 hover:text-blue-300 focus-within:outline-none">
308
+ <span>Upload files</span>
309
+ <input type="file" class="sr-only" multiple>
310
+ </label>
311
+ <p class="pl-1">or drag and drop</p>
312
+ </div>
313
+ <p class="text-xs text-blue-400">
314
+ PNG, JPG up to 10MB
315
+ </p>
316
+ </div>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ </div>
321
+
322
+ <!-- Lease Terms -->
323
+ <div class="card-glass rounded-xl p-8">
324
+ <h3 class="futuristic-text text-2xl font-bold mb-6 text-blue-300">Lease Terms</h3>
325
+
326
+ <div class="space-y-6">
327
+ <div>
328
+ <label class="block text-sm font-medium text-blue-200 mb-2">Monthly Lease Price (BCR20)</label>
329
+ <div class="relative">
330
+ <input type="number" id="leasePrice" class="input-futuristic w-full px-4 py-3 rounded-lg" placeholder="Enter your asking price" value="3500">
331
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
332
+ <span class="text-blue-300">BCR20</span>
333
+ </div>
334
+ </div>
335
+ </div>
336
+
337
+ <div>
338
+ <label class="block text-sm font-medium text-blue-200 mb-2">Minimum Lease Duration</label>
339
+ <select class="input-futuristic w-full px-4 py-3 rounded-lg">
340
+ <option value="3">3 Months</option>
341
+ <option value="6" selected>6 Months</option>
342
+ <option value="12">12 Months</option>
343
+ <option value="24">24 Months</option>
344
+ </select>
345
+ </div>
346
+
347
+ <div>
348
+ <label class="block text-sm font-medium text-blue-200 mb-2">Maintenance Responsibility</label>
349
+ <div class="flex space-x-4">
350
+ <label class="inline-flex items-center">
351
+ <input type="radio" name="maintenance" class="form-radio text-blue-500" checked>
352
+ <span class="ml-2">Owner Provides (+15%)</span>
353
+ </label>
354
+ <label class="inline-flex items-center">
355
+ <input type="radio" name="maintenance" class="form-radio text-blue-500">
356
+ <span class="ml-2">Lessee Responsible</span>
357
+ </label>
358
+ </div>
359
+ </div>
360
+
361
+ <div>
362
+ <label class="block text-sm font-medium text-blue-200 mb-2">Insurance Coverage</label>
363
+ <div class="flex space-x-4">
364
+ <label class="inline-flex items-center">
365
+ <input type="radio" name="insurance" class="form-radio text-blue-500" checked>
366
+ <span class="ml-2">Included (+8%)</span>
367
+ </label>
368
+ <label class="inline-flex items-center">
369
+ <input type="radio" name="insurance" class="form-radio text-blue-500">
370
+ <span class="ml-2">Lessee Provides</span>
371
+ </label>
372
+ </div>
373
+ </div>
374
+
375
+ <div>
376
+ <label class="block text-sm font-medium text-blue-200 mb-2">Specialization</label>
377
+ <div class="grid grid-cols-2 gap-2">
378
+ <label class="inline-flex items-center">
379
+ <input type="checkbox" class="form-checkbox text-blue-500">
380
+ <span class="ml-2">Manufacturing</span>
381
+ </label>
382
+ <label class="inline-flex items-center">
383
+ <input type="checkbox" class="form-checkbox text-blue-500">
384
+ <span class="ml-2">Healthcare</span>
385
+ </label>
386
+ <label class="inline-flex items-center">
387
+ <input type="checkbox" class="form-checkbox text-blue-500">
388
+ <span class="ml-2">Logistics</span>
389
+ </label>
390
+ <label class="inline-flex items-center">
391
+ <input type="checkbox" class="form-checkbox text-blue-500">
392
+ <span class="ml-2">Customer Service</span>
393
+ </label>
394
+ </div>
395
+ </div>
396
+
397
+ <!-- Lease Buyout Options -->
398
+ <div class="mt-6">
399
+ <h4 class="futuristic-text text-lg font-bold mb-4 text-blue-300">Lease Buyout Options</h4>
400
+
401
+ <div class="buyout-option active">
402
+ <div class="flex justify-between items-center mb-2">
403
+ <label class="font-medium">End-of-Term Buyout</label>
404
+ <label class="switch">
405
+ <input type="checkbox" checked>
406
+ <span class="slider"></span>
407
+ </label>
408
+ </div>
409
+ <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>
410
+
411
+ <div class="mt-3">
412
+ <label class="block text-xs text-blue-300 mb-1">Buyout Price Multiplier</label>
413
+ <select class="input-futuristic w-full px-3 py-2 rounded-lg text-sm">
414
+ <option value="1.1">110% of total payments</option>
415
+ <option value="1.2" selected>120% of total payments</option>
416
+ <option value="1.3">130% of total payments</option>
417
+ <option value="1.5">150% of total payments</option>
418
+ </select>
419
+ </div>
420
+ </div>
421
+
422
+ <div class="buyout-option">
423
+ <div class="flex justify-between items-center mb-2">
424
+ <label class="font-medium">7-Day Immediate Buyout</label>
425
+ <label class="switch">
426
+ <input type="checkbox">
427
+ <span class="slider"></span>
428
+ </label>
429
+ </div>
430
+ <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>
431
+
432
+ <div class="mt-3 hidden">
433
+ <label class="block text-xs text-blue-300 mb-1">Immediate Buyout Multiplier</label>
434
+ <select class="input-futuristic w-full px-3 py-2 rounded-lg text-sm">
435
+ <option value="1.4">140% of total value</option>
436
+ <option value="1.5" selected>150% of total value</option>
437
+ <option value="1.6">160% of total value</option>
438
+ <option value="2.0">200% of total value</option>
439
+ </select>
440
+ </div>
441
+ </div>
442
+ </div>
443
+
444
+ <!-- BRC-20 Display -->
445
+ <div class="brc20-display">
446
+ <div class="flex justify-between items-center">
447
+ <div>
448
+ <p class="text-sm text-blue-300">Fractal Bitcoin Equivalent</p>
449
+ <p class="brc20-value">0.025 BTC</p>
450
+ </div>
451
+ <div class="text-right">
452
+ <p class="text-sm text-blue-300">Current Rate</p>
453
+ <p class="text-white">1 BCR20 = 0.00000714 BTC</p>
454
+ </div>
455
+ </div>
456
+ <div class="mt-2 text-xs text-blue-400">
457
+ <p>Rate updates every 5 minutes. Final amount will be calculated at time of transaction.</p>
458
+ </div>
459
+ </div>
460
+
461
+ <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">
462
+ List Robot for Lease
463
+ </button>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </section>
468
+
469
+ <!-- How It Works Section -->
470
+ <section class="mb-20">
471
+ <div class="card-glass rounded-xl p-8">
472
+ <h3 class="futuristic-text text-2xl font-bold mb-8 text-blue-300">How Robot Leasing Works</h3>
473
+
474
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
475
+ <div class="bg-blue-900 bg-opacity-30 p-6 rounded-lg">
476
+ <div class="flex items-center mb-4">
477
+ <div class="step-number">1</div>
478
+ <h4 class="futuristic-text text-lg font-bold ml-3">List Your Robot</h4>
479
+ </div>
480
+ <p class="text-blue-200 text-sm">
481
+ Provide details about your humanoid robot including model, condition, and desired lease terms. Our system will verify your ownership.
482
+ </p>
483
+ </div>
484
+
485
+ <div class="bg-blue-900 bg-opacity-30 p-6 rounded-lg">
486
+ <div class="flex items-center mb-4">
487
+ <div class="step-number">2</div>
488
+ <h4 class="futuristic-text text-lg font-bold ml-3">Tokenize Asset</h4>
489
+ </div>
490
+ <p class="text-blue-200 text-sm">
491
+ Your robot is converted into BCR20 tokens representing fractional ownership. These tokens are escrowed during the lease period.
492
+ </p>
493
+ </div>
494
+
495
+ <div class="bg-blue-900 bg-opacity-30 p-6 rounded-lg">
496
+ <div class="flex items-center mb-4">
497
+ <div class="step-number">3</div>
498
+ <h4 class="futuristic-text text-lg font-bold ml-3">Receive Payments</h4>
499
+ </div>
500
+ <p class="text-blue-200 text-sm">
501
+ Earn monthly payments in BCR20 tokens or convert to Bitcoin via Fractal. Get your robot back when lease ends.
502
+ </p>
503
+ </div>
504
+ </div>
505
+ </div>
506
+ </section>
507
+
508
+ <!-- Pricing Examples -->
509
+ <section>
510
+ <h3 class="futuristic-text text-2xl font-bold mb-8 text-blue-300">Example Lease Pricing</h3>
511
+
512
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
513
+ <div class="robot-model card-glass rounded-xl p-6 hover:glow-effect transition cursor-pointer">
514
+ <div class="bg-blue-900 bg-opacity-30 rounded-lg p-4 mb-4 flex justify-center">
515
+ <i class="fas fa-industry text-4xl text-blue-400"></i>
516
+ </div>
517
+ <h4 class="futuristic-text text-xl font-bold mb-2">Industrial Model</h4>
518
+ <p class="text-blue-300 text-sm mb-4">X-2000 with 500 operational hours</p>
519
+ <div class="space-y-3">
520
+ <div class="flex justify-between">
521
+ <span class="text-blue-300">Monthly Rate:</span>
522
+ <span class="text-blue-400 font-bold">4,200 BCR20</span>
523
+ </div>
524
+ <div class="flex justify-between">
525
+ <span class="text-blue-300">6-Month ROI:</span>
526
+ <span class="text-green-400 font-bold">18.5%</span>
527
+ </div>
528
+ <div class="flex justify-between">
529
+ <span class="text-blue-300">Buyout Price:</span>
530
+ <span class="text-white font-bold">30,240 BCR20</span>
531
+ </div>
532
+ </div>
533
+ </div>
534
+
535
+ <div class="robot-model card-glass rounded-xl p-6 hover:glow-effect transition cursor-pointer">
536
+ <div class="bg-blue-900 bg-opacity-30 rounded-lg p-4 mb-4 flex justify-center">
537
+ <i class="fas fa-hands-helping text-4xl text-blue-400"></i>
538
+ </div>
539
+ <h4 class="futuristic-text text-xl font-bold mb-2">Service Model</h4>
540
+ <p class="text-blue-300 text-sm mb-4">S-1500 with 200 operational hours</p>
541
+ <div class="space-y-3">
542
+ <div class="flex justify-between">
543
+ <span class="text-blue-300">Monthly Rate:</span>
544
+ <span class="text-blue-400 font-bold">3,500 BCR20</span>
545
+ </div>
546
+ <div class="flex justify-between">
547
+ <span class="text-blue-300">6-Month ROI:</span>
548
+ <span class="text-green-400 font-bold">15.2%</span>
549
+ </div>
550
+ <div class="flex justify-between">
551
+ <span class="text-blue-300">Buyout Price:</span>
552
+ <span class="text-white font-bold">25,200 BCR20</span>
553
+ </div>
554
+ </div>
555
+ </div>
556
+
557
+ <div class="robot-model card-glass rounded-xl p-6 hover:glow-effect transition cursor-pointer">
558
+ <div class="bg-blue-900 bg-opacity-30 rounded-lg p-4 mb-4 flex justify-center">
559
+ <i class="fas fa-heartbeat text-4xl text-blue-400"></i>
560
+ </div>
561
+ <h4 class="futuristic-text text-xl font-bold mb-2">Healthcare Model</h4>
562
+ <p class="text-blue-300 text-sm mb-4">H-900 with 100 operational hours</p>
563
+ <div class="space-y-3">
564
+ <div class="flex justify-between">
565
+ <span class="text-blue-300">Monthly Rate:</span>
566
+ <span class="text-blue-400 font-bold">4,800 BCR20</span>
567
+ </div>
568
+ <div class="flex justify-between">
569
+ <span class="text-blue-300">6-Month ROI:</span>
570
+ <span class="text-green-400 font-bold">21.3%</span>
571
+ </div>
572
+ <div class="flex justify-between">
573
+ <span class="text-blue-300">Buyout Price:</span>
574
+ <span class="text-white font-bold">34,560 BCR20</span>
575
+ </div>
576
+ </div>
577
+ </div>
578
+ </div>
579
+ </section>
580
+ </main>
581
+
582
+ <!-- Simple Footer -->
583
+ <footer class="gradient-bg py-6 px-4 sm:px-6 lg:px-8 mt-20">
584
+ <div class="max-w-7xl mx-auto text-center">
585
+ <p class="text-blue-300 text-sm">
586
+ © 2023 Nexus Robotics. All rights reserved.
587
+ </p>
588
+ </div>
589
+ </footer>
590
+
591
+ <!-- Payment Modal -->
592
+ <div id="paymentModal" class="payment-modal">
593
+ <div class="payment-content">
594
+ <span class="close-modal">&times;</span>
595
+ <h3 class="futuristic-text text-2xl font-bold mb-6 text-blue-300 text-center">Fractal Bitcoin Payment</h3>
596
+
597
+ <div class="step">
598
+ <div class="step-number">1</div>
599
+ <div class="step-text">Listing Fee Paid</div>
600
+ </div>
601
+
602
+ <div class="step active">
603
+ <div class="step-number">2</div>
604
+ <div class="step-text">Receive Bitcoin Payment</div>
605
+ </div>
606
+
607
+ <div class="step">
608
+ <div class="step-number">3</div>
609
+ <div class="step-text">Robot Verification</div>
610
+ </div>
611
+
612
+ <div class="step">
613
+ <div class="step-number">4</div>
614
+ <div class="step-text">Lease Activation</div>
615
+ </div>
616
+
617
+ <div class="text-center my-6">
618
+ <p class="text-blue-200 mb-4">Send <span class="text-white font-bold">0.025 BTC</span> to:</p>
619
+ <p class="text-blue-400 text-sm mb-6 break-all">bc1qxy2kgdygjrsqtzq2n0yrf249nw3q2k6x2g0p2e</p>
620
+
621
+ <div class="payment-qr">
622
+ <!-- QR code placeholder -->
623
+ <i class="fas fa-qrcode text-6xl text-gray-800"></i>
624
+ </div>
625
+
626
+ <p class="text-blue-300 text-sm mt-4">Equivalent to: <span class="text-white">3,500 BCR20</span></p>
627
+ </div>
628
+
629
+ <div class="bg-blue-900 bg-opacity-30 p-4 rounded-lg mb-6">
630
+ <div class="flex justify-between text-sm mb-2">
631
+ <span class="text-blue-300">Amount Received:</span>
632
+ <span class="text-blue-300">0.000 BTC</span>
633
+ </div>
634
+ <div class="w-full bg-blue-800 rounded-full h-2.5">
635
+ <div class="bg-blue-400 h-2.5 rounded-full" style="width: 0%"></div>
636
+ </div>
637
+ </div>
638
+
639
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg futuristic-text transition">
640
+ I've Sent the Payment
641
+ </button>
642
+ </div>
643
+ </div>
644
+
645
+ <script>
646
+ // Payment modal functionality
647
+ const listRobotBtn = document.getElementById('listRobotBtn');
648
+ const paymentModal = document.getElementById('paymentModal');
649
+ const closeModal = document.querySelector('.close-modal');
650
+
651
+ listRobotBtn.addEventListener('click', function() {
652
+ paymentModal.style.display = 'flex';
653
+ });
654
+
655
+ closeModal.addEventListener('click', function() {
656
+ paymentModal.style.display = 'none';
657
+ });
658
+
659
+ window.addEventListener('click', function(event) {
660
+ if (event.target === paymentModal) {
661
+ paymentModal.style.display = 'none';
662
+ }
663
+ });
664
+
665
+ // Simulate payment progress
666
+ if (paymentModal) {
667
+ setTimeout(() => {
668
+ const progressBar = document.querySelector('.payment-content .bg-blue-400');
669
+ const amountReceived = document.querySelector('.payment-content .text-blue-300:last-child');
670
+
671
+ let progress = 0;
672
+ const interval = setInterval(() => {
673
+ progress += 5;
674
+ progressBar.style.width = `${progress}%`;
675
+ amountReceived.textContent = `${(0.025 * progress / 100).toFixed(3)} BTC`;
676
+
677
+ if (progress >= 100) {
678
+ clearInterval(interval);
679
+
680
+ // Update steps
681
+ document.querySelectorAll('.step')[1].classList.remove('active');
682
+ document.querySelectorAll('.step')[1].classList.add('completed');
683
+ document.querySelectorAll('.step')[2].classList.add('active');
684
+
685
+ // Change button text
686
+ const modalButton = document.querySelector('.payment-content button');
687
+ modalButton.textContent = 'Proceed to Verification';
688
+ modalButton.classList.remove('bg-blue-600');
689
+ modalButton.classList.add('bg-green-600');
690
+ }
691
+ }, 300);
692
+ }, 1000);
693
+ }
694
+
695
+ // Buyout option toggle functionality
696
+ const buyoutOptions = document.querySelectorAll('.buyout-option');
697
+
698
+ buyoutOptions.forEach(option => {
699
+ const toggle = option.querySelector('input[type="checkbox"]');
700
+ const settings = option.querySelector('div.hidden');
701
+
702
+ toggle.addEventListener('change', function() {
703
+ if (this.checked) {
704
+ option.classList.add('active');
705
+ if (settings) settings.classList.remove('hidden');
706
+ } else {
707
+ option.classList.remove('active');
708
+ if (settings) settings.classList.add('hidden');
709
+ }
710
+ });
711
+ });
712
+
713
+ // Update BRC-20 display based on lease price
714
+ const leasePriceInput = document.getElementById('leasePrice');
715
+ const brc20Value = document.querySelector('.brc20-value');
716
+
717
+ leasePriceInput.addEventListener('input', function() {
718
+ const price = parseFloat(this.value) || 0;
719
+ const btcValue = price * 0.00000714;
720
+ brc20Value.textContent = btcValue.toFixed(6) + ' BTC';
721
+
722
+ // Also update the modal value if it's open
723
+ if (paymentModal.style.display === 'flex') {
724
+ document.querySelector('.payment-content .text-white.font-bold').textContent = btcValue.toFixed(3) + ' BTC';
725
+ document.querySelector('.payment-content .text-white:last-child').textContent = price + ' BCR20';
726
+ }
727
+ });
728
+ </script>
729
+ <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>
730
+ </html>