Spaces:
Running
Running
Change icon style to a gray lock that is not unlocked yet - Follow Up Deployment
Browse files- index.html +53 -35
index.html
CHANGED
|
@@ -453,7 +453,57 @@
|
|
| 453 |
</div>
|
| 454 |
</div>
|
| 455 |
|
| 456 |
-
<!-- Tier Card 5 -
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 457 |
<div class="tier-card w-40 flex flex-col items-center py-4 px-2 relative hidden">
|
| 458 |
<div class="glow-border"></div>
|
| 459 |
<div class="tier-diamond w-16 h-16">
|
|
@@ -478,7 +528,7 @@
|
|
| 478 |
</div>
|
| 479 |
</div>
|
| 480 |
|
| 481 |
-
<!-- Tier Card
|
| 482 |
<div class="tier-card w-40 flex flex-col items-center py-4 px-2 relative hidden">
|
| 483 |
<div class="glow-border"></div>
|
| 484 |
<div class="tier-diamond w-16 h-16">
|
|
@@ -636,39 +686,7 @@
|
|
| 636 |
<h3 class="text-lg font-semibold mt-3 text-center">Monthly Bonus</h3>
|
| 637 |
<span class="text-xs text-neon-orange text-center">$100 + 50 FS</span>
|
| 638 |
</div>
|
| 639 |
-
|
| 640 |
-
<!-- Perk 5 -->
|
| 641 |
-
<div class="flex flex-col items-center">
|
| 642 |
-
<div class="perk-icon">
|
| 643 |
-
<i class="fas fa-coins text-3xl text-neon-yellow"></i>
|
| 644 |
-
</div>
|
| 645 |
-
<h3 class="text-lg font-semibold mt-3 text-center">Higher Limits</h3>
|
| 646 |
-
<span class="text-xs text-neon-orange text-center">Increased</span>
|
| 647 |
-
</div>
|
| 648 |
-
|
| 649 |
-
<!-- Perk 6 -->
|
| 650 |
-
<div class="flex flex-col items-center">
|
| 651 |
-
<div class="perk-icon hidden">
|
| 652 |
-
<i class="fas fa-plane text-3xl text-gray-400"></i>
|
| 653 |
-
<div class="lock-icon">
|
| 654 |
-
<i class="fas fa-lock"></i>
|
| 655 |
-
</div>
|
| 656 |
-
</div>
|
| 657 |
-
<h3 class="text-lg font-semibold mt-3 text-center text-gray-400">Vacation Trips</h3>
|
| 658 |
-
<span class="text-xs text-gray-400 text-center">Yearly</span>
|
| 659 |
-
</div>
|
| 660 |
-
|
| 661 |
-
<!-- Perk 7 -->
|
| 662 |
-
<div class="flex flex-col items-center">
|
| 663 |
-
<div class="perk-icon hidden">
|
| 664 |
-
<i class="fas fa-gem text-3xl text-gray-400"></i>
|
| 665 |
-
<div class="lock-icon">
|
| 666 |
-
<i class="fas fa-lock"></i>
|
| 667 |
-
</div>
|
| 668 |
-
</div>
|
| 669 |
-
<h3 class="text-lg font-semibold mt-3 text-center text-gray-400">Luxury Gifts</h3>
|
| 670 |
-
<span class="text-xs text-gray-400 text-center">Quarterly</span>
|
| 671 |
-
</div>
|
| 672 |
</div>
|
| 673 |
</section>
|
| 674 |
|
|
|
|
| 453 |
</div>
|
| 454 |
</div>
|
| 455 |
|
| 456 |
+
<!-- Tier Card 5 - Ruby -->
|
| 457 |
+
<div class="tier-card w-40 flex flex-col items-center py-4 px-2 relative hidden">
|
| 458 |
+
<div class="glow-border"></div>
|
| 459 |
+
<div class="bg-gradient-to-r from-red-600 to-pink-600 w-16 h-16 transform rotate-45 flex items-center justify-center">
|
| 460 |
+
<span class="text-white font-bold transform -rotate-45">Ruby</span>
|
| 461 |
+
</div>
|
| 462 |
+
<p class="mt-4 mb-2 text-gray-400">150K XP</p>
|
| 463 |
+
<div class="text-sm text-center text-gray-400">Locked</div>
|
| 464 |
+
<div class="lock-icon">
|
| 465 |
+
<i class="fas fa-lock"></i>
|
| 466 |
+
</div>
|
| 467 |
+
|
| 468 |
+
<div class="info">
|
| 469 |
+
<h4 class="font-bold text-neon-orange mb-2">Ruby Tier</h4>
|
| 470 |
+
<p class="text-sm opacity-90 mb-2">150,000 XP to unlock</p>
|
| 471 |
+
<ul class="text-xs space-y-1">
|
| 472 |
+
<li>• 22% Cashback</li>
|
| 473 |
+
<li>• Enhanced Bonuses</li>
|
| 474 |
+
<li>• VIP Concierge</li>
|
| 475 |
+
<li>• Exclusive Events</li>
|
| 476 |
+
<li>• Personal Shopper</li>
|
| 477 |
+
</ul>
|
| 478 |
+
</div>
|
| 479 |
+
</div>
|
| 480 |
+
|
| 481 |
+
<!-- Tier Card 6 - Emerald -->
|
| 482 |
+
<div class="tier-card w-40 flex flex-col items-center py-4 px-2 relative hidden">
|
| 483 |
+
<div class="glow-border"></div>
|
| 484 |
+
<div class="bg-gradient-to-r from-emerald-500 to-teal-500 w-16 h-16 transform rotate-45 flex items-center justify-center">
|
| 485 |
+
<span class="text-white font-bold transform -rotate-45">Emerald</span>
|
| 486 |
+
</div>
|
| 487 |
+
<p class="mt-4 mb-2 text-gray-400">200K XP</p>
|
| 488 |
+
<div class="text-sm text-center text-gray-400">Locked</div>
|
| 489 |
+
<div class="lock-icon">
|
| 490 |
+
<i class="fas fa-lock"></i>
|
| 491 |
+
</div>
|
| 492 |
+
|
| 493 |
+
<div class="info">
|
| 494 |
+
<h4 class="font-bold text-neon-orange mb-2">Emerald Tier</h4>
|
| 495 |
+
<p class="text-sm opacity-90 mb-2">200,000 XP to unlock</p>
|
| 496 |
+
<ul class="text-xs space-y-1">
|
| 497 |
+
<li>• 24% Cashback</li>
|
| 498 |
+
<li>• Elite Bonuses</li>
|
| 499 |
+
<li>• 24/7 Concierge</li>
|
| 500 |
+
<li>• VIP Events</li>
|
| 501 |
+
<li>• Luxury Getaways</li>
|
| 502 |
+
</ul>
|
| 503 |
+
</div>
|
| 504 |
+
</div>
|
| 505 |
+
|
| 506 |
+
<!-- Tier Card 7 - Platinum -->
|
| 507 |
<div class="tier-card w-40 flex flex-col items-center py-4 px-2 relative hidden">
|
| 508 |
<div class="glow-border"></div>
|
| 509 |
<div class="tier-diamond w-16 h-16">
|
|
|
|
| 528 |
</div>
|
| 529 |
</div>
|
| 530 |
|
| 531 |
+
<!-- Tier Card 8 - Onyx -->
|
| 532 |
<div class="tier-card w-40 flex flex-col items-center py-4 px-2 relative hidden">
|
| 533 |
<div class="glow-border"></div>
|
| 534 |
<div class="tier-diamond w-16 h-16">
|
|
|
|
| 686 |
<h3 class="text-lg font-semibold mt-3 text-center">Monthly Bonus</h3>
|
| 687 |
<span class="text-xs text-neon-orange text-center">$100 + 50 FS</span>
|
| 688 |
</div>
|
| 689 |
+
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 690 |
</div>
|
| 691 |
</section>
|
| 692 |
|