Make the connect wallet feature active and working, have a pop up window with a qr code to scan with a XRP wallet to then be able to trade/buy/sell nfts - Initial Deployment
Browse files- README.md +6 -4
- index.html +381 -18
- prompts.txt +4 -0
README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji:
|
| 4 |
colorFrom: pink
|
| 5 |
-
colorTo:
|
| 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: stttttt
|
| 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,382 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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>XRP NFT Marketplace</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="http://static.photos/blue/200x200/1">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
| 10 |
+
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
| 11 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 12 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 13 |
+
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
|
| 14 |
+
<style>
|
| 15 |
+
.nft-card:hover {
|
| 16 |
+
transform: translateY(-5px);
|
| 17 |
+
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
| 18 |
+
}
|
| 19 |
+
.vanta-bg {
|
| 20 |
+
position: absolute;
|
| 21 |
+
top: 0;
|
| 22 |
+
left: 0;
|
| 23 |
+
width: 100%;
|
| 24 |
+
height: 100%;
|
| 25 |
+
z-index: -1;
|
| 26 |
+
}
|
| 27 |
+
.hero-gradient {
|
| 28 |
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
| 29 |
+
}
|
| 30 |
+
.collection-card {
|
| 31 |
+
transition: all 0.3s ease;
|
| 32 |
+
}
|
| 33 |
+
.collection-card:hover {
|
| 34 |
+
transform: scale(1.02);
|
| 35 |
+
}
|
| 36 |
+
</style>
|
| 37 |
+
</head>
|
| 38 |
+
<body class="bg-gray-50">
|
| 39 |
+
<!-- Navigation -->
|
| 40 |
+
<nav class="bg-white shadow-lg fixed w-full z-50">
|
| 41 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 42 |
+
<div class="flex justify-between h-16">
|
| 43 |
+
<div class="flex items-center">
|
| 44 |
+
<a href="#" class="flex-shrink-0 flex items-center">
|
| 45 |
+
<i data-feather="box" class="h-8 w-8 text-purple-600"></i>
|
| 46 |
+
<span class="ml-2 text-xl font-bold text-gray-800">XRP NFTs</span>
|
| 47 |
+
</a>
|
| 48 |
+
<div class="hidden md:ml-6 md:flex md:space-x-8">
|
| 49 |
+
<a href="#" class="border-purple-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Collections</a>
|
| 50 |
+
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Marketplace</a>
|
| 51 |
+
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Create</a>
|
| 52 |
+
</div>
|
| 53 |
+
</div>
|
| 54 |
+
<div class="flex items-center">
|
| 55 |
+
<button id="connectWalletBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
|
| 56 |
+
Connect Wallet
|
| 57 |
+
</button>
|
| 58 |
+
</div>
|
| 59 |
+
</div>
|
| 60 |
+
</div>
|
| 61 |
+
</nav>
|
| 62 |
+
|
| 63 |
+
<!-- Hero Section -->
|
| 64 |
+
<div class="relative pt-16 overflow-hidden hero-gradient">
|
| 65 |
+
<div class="vanta-bg" id="vanta-bg"></div>
|
| 66 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
|
| 67 |
+
<div class="text-center" data-aos="fade-up">
|
| 68 |
+
<h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl md:text-6xl">
|
| 69 |
+
Discover XRP NFTs
|
| 70 |
+
</h1>
|
| 71 |
+
<p class="mt-3 max-w-md mx-auto text-base text-purple-100 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
|
| 72 |
+
Explore unique digital assets on the XRP Ledger. Connect your wallet to start collecting.
|
| 73 |
+
</p>
|
| 74 |
+
<div class="mt-10 flex justify-center">
|
| 75 |
+
<button id="heroConnectBtn" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-purple-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10 transition duration-300">
|
| 76 |
+
Connect Wallet
|
| 77 |
+
</button>
|
| 78 |
+
</div>
|
| 79 |
+
</div>
|
| 80 |
+
</div>
|
| 81 |
+
</div>
|
| 82 |
+
|
| 83 |
+
<!-- Collections Section -->
|
| 84 |
+
<div class="py-12 bg-white" data-aos="fade-up">
|
| 85 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 86 |
+
<div class="text-center">
|
| 87 |
+
<h2 class="text-3xl font-extrabold text-gray-900">Featured Collections</h2>
|
| 88 |
+
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
|
| 89 |
+
Explore the most popular NFT collections on the XRP Ledger
|
| 90 |
+
</p>
|
| 91 |
+
</div>
|
| 92 |
+
|
| 93 |
+
<div class="mt-10 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
| 94 |
+
<!-- Collection Cards -->
|
| 95 |
+
<div class="collection-card bg-gray-50 rounded-lg shadow-md p-6" data-aos="zoom-in">
|
| 96 |
+
<div class="flex items-center">
|
| 97 |
+
<img class="h-16 w-16 rounded-full object-cover" src="http://static.photos/abstract/200x200/10" alt="Collection">
|
| 98 |
+
<div class="ml-4">
|
| 99 |
+
<h3 class="text-lg font-medium text-gray-900">XRPunks</h3>
|
| 100 |
+
<p class="text-gray-500">10K items</p>
|
| 101 |
+
</div>
|
| 102 |
+
</div>
|
| 103 |
+
<div class="mt-4">
|
| 104 |
+
<p class="text-gray-600">The original pixel art collection on XRPL</p>
|
| 105 |
+
</div>
|
| 106 |
+
</div>
|
| 107 |
+
|
| 108 |
+
<div class="collection-card bg-gray-50 rounded-lg shadow-md p-6" data-aos="zoom-in" data-aos-delay="100">
|
| 109 |
+
<div class="flex items-center">
|
| 110 |
+
<img class="h-16 w-16 rounded-full object-cover" src="http://static.photos/art/200x200/20" alt="Collection">
|
| 111 |
+
<div class="ml-4">
|
| 112 |
+
<h3 class="text-lg font-medium text-gray-900">XRP Apes</h3>
|
| 113 |
+
<p class="text-gray-500">5K items</p>
|
| 114 |
+
</div>
|
| 115 |
+
</div>
|
| 116 |
+
<div class="mt-4">
|
| 117 |
+
<p class="text-gray-600">Exclusive ape community on XRP Ledger</p>
|
| 118 |
+
</div>
|
| 119 |
+
</div>
|
| 120 |
+
|
| 121 |
+
<div class="collection-card bg-gray-50 rounded-lg shadow-md p-6" data-aos="zoom-in" data-aos-delay="200">
|
| 122 |
+
<div class="flex items-center">
|
| 123 |
+
<img class="h-16 w-16 rounded-full object-cover" src="http://static.photos/gaming/200x200/30" alt="Collection">
|
| 124 |
+
<div class="ml-4">
|
| 125 |
+
<h3 class="text-lg font-medium text-gray-900">XRPL Dragons</h3>
|
| 126 |
+
<p class="text-gray-500">3K items</p>
|
| 127 |
+
</div>
|
| 128 |
+
</div>
|
| 129 |
+
<div class="mt-4">
|
| 130 |
+
<p class="text-gray-600">Mythical dragon collection with unique traits</p>
|
| 131 |
+
</div>
|
| 132 |
+
</div>
|
| 133 |
+
</div>
|
| 134 |
+
</div>
|
| 135 |
+
</div>
|
| 136 |
+
|
| 137 |
+
<!-- NFTs Section -->
|
| 138 |
+
<div class="py-12 bg-gray-50">
|
| 139 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 140 |
+
<div class="text-center">
|
| 141 |
+
<h2 class="text-3xl font-extrabold text-gray-900">Trending NFTs</h2>
|
| 142 |
+
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
|
| 143 |
+
Discover the most sought-after digital assets
|
| 144 |
+
</p>
|
| 145 |
+
</div>
|
| 146 |
+
|
| 147 |
+
<div class="mt-10 grid gap-6 md:grid-cols-2 lg:grid-cols-4">
|
| 148 |
+
<!-- NFT Cards -->
|
| 149 |
+
<div class="nft-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300" data-aos="fade-up">
|
| 150 |
+
<img class="w-full h-48 object-cover" src="http://static.photos/art/320x240/1" alt="NFT">
|
| 151 |
+
<div class="p-4">
|
| 152 |
+
<h3 class="text-lg font-medium text-gray-900">XRPunk #1234</h3>
|
| 153 |
+
<p class="text-gray-500">XRPunks Collection</p>
|
| 154 |
+
<div class="mt-3 flex items-center justify-between">
|
| 155 |
+
<span class="text-purple-600 font-bold">25 XRP</span>
|
| 156 |
+
<button class="text-purple-600 hover:text-purple-800">
|
| 157 |
+
<i data-feather="shopping-cart" class="w-5 h-5"></i>
|
| 158 |
+
</button>
|
| 159 |
+
</div>
|
| 160 |
+
</div>
|
| 161 |
+
</div>
|
| 162 |
+
|
| 163 |
+
<div class="nft-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300" data-aos="fade-up" data-aos-delay="100">
|
| 164 |
+
<img class="w-full h-48 object-cover" src="http://static.photos/art/320x240/2" alt="NFT">
|
| 165 |
+
<div class="p-4">
|
| 166 |
+
<h3 class="text-lg font-medium text-gray-900">Ape #567</h3>
|
| 167 |
+
<p class="text-gray-500">XRP Apes Collection</p>
|
| 168 |
+
<div class="mt-3 flex items-center justify-between">
|
| 169 |
+
<span class="text-purple-600 font-bold">42 XRP</span>
|
| 170 |
+
<button class="text-purple-600 hover:text-purple-800">
|
| 171 |
+
<i data-feather="shopping-cart" class="w-5 h-5"></i>
|
| 172 |
+
</button>
|
| 173 |
+
</div>
|
| 174 |
+
</div>
|
| 175 |
+
</div>
|
| 176 |
+
|
| 177 |
+
<div class="nft-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300" data-aos="fade-up" data-aos-delay="200">
|
| 178 |
+
<img class="w-full h-48 object-cover" src="http://static.photos/art/320x240/3" alt="NFT">
|
| 179 |
+
<div class="p-4">
|
| 180 |
+
<h3 class="text-lg font-medium text-gray-900">Dragon #789</h3>
|
| 181 |
+
<p class="text-gray-500">XRPL Dragons Collection</p>
|
| 182 |
+
<div class="mt-3 flex items-center justify-between">
|
| 183 |
+
<span class="text-purple-600 font-bold">75 XRP</span>
|
| 184 |
+
<button class="text-purple-600 hover:text-purple-800">
|
| 185 |
+
<i data-feather="shopping-cart" class="w-5 h-5"></i>
|
| 186 |
+
</button>
|
| 187 |
+
</div>
|
| 188 |
+
</div>
|
| 189 |
+
</div>
|
| 190 |
+
|
| 191 |
+
<div class="nft-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300" data-aos="fade-up" data-aos-delay="300">
|
| 192 |
+
<img class="w-full h-48 object-cover" src="http://static.photos/art/320x240/4" alt="NFT">
|
| 193 |
+
<div class="p-4">
|
| 194 |
+
<h3 class="text-lg font-medium text-gray-900">XRPunk #9999</h3>
|
| 195 |
+
<p class="text-gray-500">XRPunks Collection</p>
|
| 196 |
+
<div class="mt-3 flex items-center justify-between">
|
| 197 |
+
<span class="text-purple-600 font-bold">150 XRP</span>
|
| 198 |
+
<button class="text-purple-600 hover:text-purple-800">
|
| 199 |
+
<i data-feather="shopping-cart" class="w-5 h-5"></i>
|
| 200 |
+
</button>
|
| 201 |
+
</div>
|
| 202 |
+
</div>
|
| 203 |
+
</div>
|
| 204 |
+
</div>
|
| 205 |
+
</div>
|
| 206 |
+
</div>
|
| 207 |
+
|
| 208 |
+
<!-- Wallet Connection Modal -->
|
| 209 |
+
<div id="walletModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
|
| 210 |
+
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
|
| 211 |
+
<div class="mt-3 text-center">
|
| 212 |
+
<h3 class="text-lg font-medium text-gray-900">Connect Wallet</h3>
|
| 213 |
+
<div class="mt-4 space-y-4">
|
| 214 |
+
<button onclick="connectXaman()" class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
|
| 215 |
+
<i data-feather="smartphone" class="w-5 h-5 mr-2"></i>
|
| 216 |
+
Xaman Wallet
|
| 217 |
+
</button>
|
| 218 |
+
<button onclick="connectJoey()" class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
|
| 219 |
+
<i data-feather="chrome" class="w-5 h-5 mr-2"></i>
|
| 220 |
+
Joey Wallet
|
| 221 |
+
</button>
|
| 222 |
+
<button onclick="showQRCode()" class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
|
| 223 |
+
<i data-feather="camera" class="w-5 h-5 mr-2"></i>
|
| 224 |
+
Scan QR Code
|
| 225 |
+
</button>
|
| 226 |
+
</div>
|
| 227 |
+
<div class="items-center px-4 py-3">
|
| 228 |
+
<button id="closeModal" class="px-4 py-2 bg-gray-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-300">
|
| 229 |
+
Cancel
|
| 230 |
+
</button>
|
| 231 |
+
</div>
|
| 232 |
+
</div>
|
| 233 |
+
</div>
|
| 234 |
+
</div>
|
| 235 |
+
|
| 236 |
+
<!-- QR Code Modal -->
|
| 237 |
+
<div id="qrModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
|
| 238 |
+
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
|
| 239 |
+
<div class="mt-3 text-center">
|
| 240 |
+
<h3 class="text-lg font-medium text-gray-900">Scan QR Code</h3>
|
| 241 |
+
<div class="mt-4 p-4 bg-white rounded-lg">
|
| 242 |
+
<div id="qrCode" class="w-64 h-64 mx-auto bg-white p-4">
|
| 243 |
+
<img src="http://static.photos/abstract/256x256/100" alt="QR Code" class="w-full h-full">
|
| 244 |
+
</div>
|
| 245 |
+
<p class="mt-4 text-sm text-gray-600">Scan this QR code with your XRP wallet app to connect</p>
|
| 246 |
+
</div>
|
| 247 |
+
<div class="items-center px-4 py-3">
|
| 248 |
+
<button onclick="hideQRCode()" class="px-4 py-2 bg-gray-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-300">
|
| 249 |
+
Close
|
| 250 |
+
</button>
|
| 251 |
+
</div>
|
| 252 |
+
</div>
|
| 253 |
+
</div>
|
| 254 |
+
</div>
|
| 255 |
+
|
| 256 |
+
<!-- Footer -->
|
| 257 |
+
<footer class="bg-gray-800 text-white py-12">
|
| 258 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 259 |
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
| 260 |
+
<div>
|
| 261 |
+
<h3 class="text-lg font-semibold mb-4">XRP NFTs</h3>
|
| 262 |
+
<p class="text-gray-400">The premier marketplace for XRP Ledger NFTs</p>
|
| 263 |
+
</div>
|
| 264 |
+
<div>
|
| 265 |
+
<h3 class="text-lg font-semibold mb-4">Quick Links</h3>
|
| 266 |
+
<ul class="space-y-2">
|
| 267 |
+
<li><a href="#" class="text-gray-400 hover:text-white">Collections</a></li>
|
| 268 |
+
<li><a href="#" class="text-gray-400 hover:text-white">Marketplace</a></li>
|
| 269 |
+
<li><a href="#" class="text-gray-400 hover:text-white">Create NFT</a></li>
|
| 270 |
+
</ul>
|
| 271 |
+
</div>
|
| 272 |
+
<div>
|
| 273 |
+
<h3 class="text-lg font-semibold mb-4">Connect</h3>
|
| 274 |
+
<div class="flex space-x-4">
|
| 275 |
+
<a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter" class="w-5 h-5"></i></a>
|
| 276 |
+
<a href="#" class="text-gray-400 hover:text-white"><i data-feather="discord" class="w-5 h-5"></i></a>
|
| 277 |
+
<a href="#" class="text-gray-400 hover:text-white"><i data-feather="github" class="w-5 h-5"></i></a>
|
| 278 |
+
</div>
|
| 279 |
+
</div>
|
| 280 |
+
</div>
|
| 281 |
+
<div class="mt-8 pt-8 border-t border-gray-700 text-center text-gray-400">
|
| 282 |
+
<p>© 2024 XRP NFTs. All rights reserved.</p>
|
| 283 |
+
</div>
|
| 284 |
+
</div>
|
| 285 |
+
</footer>
|
| 286 |
+
|
| 287 |
+
<script>
|
| 288 |
+
// Initialize animations
|
| 289 |
+
AOS.init({
|
| 290 |
+
duration: 1000,
|
| 291 |
+
once: true
|
| 292 |
+
});
|
| 293 |
+
|
| 294 |
+
// Initialize Vanta.js background
|
| 295 |
+
VANTA.GLOBE({
|
| 296 |
+
el: "#vanta-bg",
|
| 297 |
+
mouseControls: true,
|
| 298 |
+
touchControls: true,
|
| 299 |
+
gyroControls: false,
|
| 300 |
+
minHeight: 200.00,
|
| 301 |
+
minWidth: 200.00,
|
| 302 |
+
scale: 1.00,
|
| 303 |
+
scaleMobile: 1.00,
|
| 304 |
+
color: 0x667eea,
|
| 305 |
+
backgroundColor: 0x0,
|
| 306 |
+
size: 0.8
|
| 307 |
+
});
|
| 308 |
+
|
| 309 |
+
// Wallet connection functionality
|
| 310 |
+
const walletModal = document.getElementById('walletModal');
|
| 311 |
+
const connectWalletBtn = document.getElementById('connectWalletBtn');
|
| 312 |
+
const heroConnectBtn = document.getElementById('heroConnectBtn');
|
| 313 |
+
const closeModal = document.getElementById('closeModal');
|
| 314 |
+
|
| 315 |
+
function showWalletModal() {
|
| 316 |
+
walletModal.classList.remove('hidden');
|
| 317 |
+
}
|
| 318 |
+
|
| 319 |
+
function hideWalletModal() {
|
| 320 |
+
walletModal.classList.add('hidden');
|
| 321 |
+
}
|
| 322 |
+
|
| 323 |
+
connectWalletBtn.addEventListener('click', showWalletModal);
|
| 324 |
+
heroConnectBtn.addEventListener('click', showWalletModal);
|
| 325 |
+
closeModal.addEventListener('click', hideWalletModal);
|
| 326 |
+
|
| 327 |
+
// Close modal when clicking outside
|
| 328 |
+
window.addEventListener('click', (e) => {
|
| 329 |
+
if (e.target === walletModal) {
|
| 330 |
+
hideWalletModal();
|
| 331 |
+
}
|
| 332 |
+
});
|
| 333 |
+
|
| 334 |
+
// Wallet connection functions
|
| 335 |
+
function connectXaman() {
|
| 336 |
+
// Xaman Wallet connection logic
|
| 337 |
+
if (typeof window.xrpl !== 'undefined') {
|
| 338 |
+
// Xaman is installed
|
| 339 |
+
try {
|
| 340 |
+
const account = await window.xrpl.connect();
|
| 341 |
+
alert('Connected to Xaman Wallet: ' + account);
|
| 342 |
+
hideWalletModal();
|
| 343 |
+
updateWalletButton(account);
|
| 344 |
+
} catch (error) {
|
| 345 |
+
console.error('Xaman connection error:', error);
|
| 346 |
+
alert('Failed to connect to Xaman Wallet');
|
| 347 |
+
}
|
| 348 |
+
} else {
|
| 349 |
+
alert('Xaman Wallet not detected. Please install it from the App Store.');
|
| 350 |
+
}
|
| 351 |
+
}
|
| 352 |
+
|
| 353 |
+
function connectJoey() {
|
| 354 |
+
// Joey Wallet connection logic
|
| 355 |
+
if (typeof window.joey !== 'undefined') {
|
| 356 |
+
// Joey is installed
|
| 357 |
+
try {
|
| 358 |
+
const account = await window.joey.connect();
|
| 359 |
+
alert('Connected to Joey Wallet: ' + account);
|
| 360 |
+
hideWalletModal();
|
| 361 |
+
updateWalletButton(account);
|
| 362 |
+
} catch (error) {
|
| 363 |
+
console.error('Joey connection error:', error);
|
| 364 |
+
alert('Failed to connect to Joey Wallet');
|
| 365 |
+
}
|
| 366 |
+
} else {
|
| 367 |
+
alert('Joey Wallet not detected. Please install the extension.');
|
| 368 |
+
}
|
| 369 |
+
}
|
| 370 |
+
|
| 371 |
+
function updateWalletButton(address) {
|
| 372 |
+
const shortenedAddress = address.substring(0, 6) + '...' + address.substring(address.length - 4);
|
| 373 |
+
connectWalletBtn.textContent = shortenedAddress;
|
| 374 |
+
connectWalletBtn.classList.remove('bg-purple-600', 'hover:bg-purple-700');
|
| 375 |
+
connectWalletBtn.classList.add('bg-green-600', 'hover:bg-green-700');
|
| 376 |
+
}
|
| 377 |
+
|
| 378 |
+
// Replace icons
|
| 379 |
+
feather.replace();
|
| 380 |
+
</script>
|
| 381 |
+
</body>
|
| 382 |
</html>
|
prompts.txt
ADDED
|
@@ -0,0 +1,4 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
Remake xrp.cafe with all of its pages. but rebrand it to "NEXUS" and make it more futuristic looking. take inspiration from Magic Eden but remember to keep it focused on the XRPL
|
| 2 |
+
make this so you can connect your Xaman wallet a XRP wallet
|
| 3 |
+
Pull info about the collections and nfts the same way xrp.cafe does. make the connect wallet button working and able to connect your Xaman wallet or Joey Wallet, both which are XRP Wallets.
|
| 4 |
+
Make the connect wallet feature active and working, have a pop up window with a qr code to scan with a XRP wallet to then be able to trade/buy/sell nfts
|