Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Degen Hub | Portal</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| undefined: { | |
| 500: '#6366f1', | |
| 600: '#4f46e5', | |
| }, | |
| undefined: { | |
| 500: '#10b981', | |
| 600: '#059669', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@xrpl-wallet-connect/client@1.0.0/dist/index.umd.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #0f172a; | |
| color: #f8fafc; | |
| } | |
| .gradient-text { | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| color: transparent; | |
| background-image: linear-gradient(90deg, #6366f1, #10b981); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-gray-900 border-b border-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-8 w-auto" src="https://huggingface.co/spaces/ICExrp/degen-cube-portal/resolve/main/images/ICE%20LOGO.jpeg.png" alt="Degen Hub"> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="index.html" class="bg-gray-800 text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a> | |
| <a href="cubes.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Cubes</a> | |
| <a href="xumm.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Wallet</a> | |
| <a href="xumm2.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Wallet 2</a> | |
| <a href="xumm3.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Wallet 3</a> | |
| <a href="xumm4.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Wallet 4</a> | |
| <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Profile</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-4 flex items-center md:ml-6"> | |
| <button id="connectWalletBtnNav" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition"> | |
| Connect Wallet | |
| </button> | |
| <div class="ml-3 relative"> | |
| <div id="walletInfoNav" class="hidden flex items-center"> | |
| <span class="text-sm text-gray-300 mr-2" id="walletAddressNav"></span> | |
| <button id="disconnectWalletBtnNav" class="p-1 rounded-full text-gray-400 hover:text-white"> | |
| <i data-feather="log-out"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false"> | |
| <span class="sr-only">Open main menu</span> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="md:hidden hidden" id="mobile-menu"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#" class="bg-gray-800 text-white block px-3 py-2 rounded-md text-base font-medium">Dashboard</a> | |
| <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Cubes</a> | |
| <a href="xumm.html" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Wallet</a> | |
| <a href="xumm2.html" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Wallet 2</a> | |
| <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Profile</a> | |
| </div> | |
| <div class="pt-4 pb-3 border-t border-gray-700"> | |
| <div class="flex items-center px-5"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="http://static.photos/abstract/200x200/42" alt=""> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="text-base font-medium text-white">Degen User</div> | |
| <div class="text-sm font-medium text-gray-400">user@degenhub.com</div> | |
| </div> | |
| </div> | |
| <div class="mt-3 px-2 space-y-1"> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Sign out</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="relative overflow-hidden"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="relative z-10 pb-8 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32"> | |
| <main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 lg:mt-16 lg:px-8 xl:mt-20"> | |
| <div class="sm:text-center lg:text-left"> | |
| <h1 class="text-4xl tracking-tight font-extrabold sm:text-5xl md:text-6xl"> | |
| <span class="block">Welcome to</span> | |
| <span class="block gradient-text">Degen Hub</span> | |
| </h1> | |
| <p class="mt-3 text-base text-gray-300 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"> | |
| The ultimate portal for Degen Cubes. Trade, collect, and explore the world of degenerate NFTs. | |
| </p> | |
| <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start"> | |
| <div class="rounded-md shadow"> | |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-undefined-600 hover:bg-undefined-700 md:py-4 md:text-lg md:px-10"> | |
| Get Started | |
| </a> | |
| </div> | |
| <div class="mt-3 sm:mt-0 sm:ml-3"> | |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-undefined-700 bg-undefined-100 hover:bg-undefined-200 md:py-4 md:text-lg md:px-10"> | |
| Learn More | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2"> | |
| <img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="http://static.photos/abstract/1200x630/69" alt=""> | |
| </div> | |
| </div> | |
| <!-- Stats Section --> | |
| <div class="bg-gray-900 pt-12 sm:pt-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl"> | |
| Degen Cubes by the numbers | |
| </h2> | |
| <p class="mt-3 text-xl text-gray-300"> | |
| The most degenerate NFT collection on the blockchain. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-10 pb-12 bg-gray-900 sm:pb-16"> | |
| <div class="relative"> | |
| <div class="absolute inset-0 h-1/2 bg-gray-900"></div> | |
| <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-4xl mx-auto"> | |
| <dl class="rounded-lg bg-gray-800 shadow-lg sm:grid sm:grid-cols-3"> | |
| <div class="flex flex-col border-b border-gray-700 p-6 text-center sm:border-0 sm:border-r"> | |
| <dt class="order-2 mt-2 text-lg leading-6 font-medium text-gray-300"> | |
| Total Cubes | |
| </dt> | |
| <dd class="order-1 text-5xl font-extrabold text-undefined-500"> | |
| 10,000 | |
| </dd> | |
| </div> | |
| <div class="flex flex-col border-t border-b border-gray-700 p-6 text-center sm:border-0 sm:border-l sm:border-r"> | |
| <dt class="order-2 mt-2 text-lg leading-6 font-medium text-gray-300"> | |
| Floor Price | |
| </dt> | |
| <dd class="order-1 text-5xl font-extrabold text-undefined-500"> | |
| 0.69 ETH | |
| </dd> | |
| </div> | |
| <div class="flex flex-col border-t border-gray-700 p-6 text-center sm:border-0 sm:border-l"> | |
| <dt class="order-2 mt-2 text-lg leading-6 font-medium text-gray-300"> | |
| Volume | |
| </dt> | |
| <dd class="order-1 text-5xl font-extrabold text-undefined-500"> | |
| 420 ETH | |
| </dd> | |
| </div> | |
| </dl> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Featured Cubes --> | |
| <div class="py-12 bg-gray-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-undefined-600 font-semibold tracking-wide uppercase">Featured</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> | |
| Hot Degen Cubes | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-300 lg:mx-auto"> | |
| Check out the most sought-after cubes in the collection. | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Cube 1 --> | |
| <div class="pt-6"> | |
| <div class="flow-root bg-gray-800 rounded-lg px-6 pb-8 h-full"> | |
| <div class="-mt-6"> | |
| <div class="flex items-center justify-center h-48 w-48 rounded-md bg-gradient-to-r from-undefined-500 to-undefined-600 mx-auto"> | |
| <span class="text-5xl font-bold text-white">🎲</span> | |
| </div> | |
| <h3 class="mt-8 text-lg font-medium text-white tracking-tight">Golden Degen</h3> | |
| <p class="mt-5 text-base text-gray-300"> | |
| The rarest of them all. Only 1 exists. | |
| </p> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <span class="text-undefined-500 font-bold">1.2 ETH</span> | |
| <button class="px-4 py-2 bg-undefined-600 text-white rounded-md hover:bg-undefined-700 transition"> | |
| Buy Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Cube 2 --> | |
| <div class="pt-6"> | |
| <div class="flow-root bg-gray-800 rounded-lg px-6 pb-8 h-full"> | |
| <div class="-mt-6"> | |
| <div class="flex items-center justify-center h-48 w-48 rounded-md bg-gradient-to-r from-purple-500 to-pink-500 mx-auto"> | |
| <span class="text-5xl font-bold text-white">🎲</span> | |
| </div> | |
| <h3 class="mt-8 text-lg font-medium text-white tracking-tight">Cosmic Cube</h3> | |
| <p class="mt-5 text-base text-gray-300"> | |
| A portal to another dimension. | |
| </p> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <span class="text-undefined-500 font-bold">0.89 ETH</span> | |
| <button class="px-4 py-2 bg-undefined-600 text-white rounded-md hover:bg-undefined-700 transition"> | |
| Buy Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Cube 3 --> | |
| <div class="pt-6"> | |
| <div class="flow-root bg-gray-800 rounded-lg px-6 pb-8 h-full"> | |
| <div class="-mt-6"> | |
| <div class="flex items-center justify-center h-48 w-48 rounded-md bg-gradient-to-r from-blue-500 to-teal-500 mx-auto"> | |
| <span class="text-5xl font-bold text-white">🎲</span> | |
| </div> | |
| <h3 class="mt-8 text-lg font-medium text-white tracking-tight">Ocean Degen</h3> | |
| <p class="mt-5 text-base text-gray-300"> | |
| Dive into the deep blue. | |
| </p> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <span class="text-undefined-500 font-bold">0.42 ETH</span> | |
| <button class="px-4 py-2 bg-undefined-600 text-white rounded-md hover:bg-undefined-700 transition"> | |
| Buy Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="bg-gray-800"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"> | |
| <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl"> | |
| <span class="block">Ready to dive in?</span> | |
| <span class="block gradient-text">Start collecting Degen Cubes today.</span> | |
| </h2> | |
| <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0"> | |
| <div class="inline-flex rounded-md shadow"> | |
| <button id="connectWalletBtn" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-undefined-600 hover:bg-undefined-700"> | |
| Connect Wallet | |
| </button> | |
| </div> | |
| <div class="ml-3 inline-flex rounded-md shadow"> | |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-undefined-600 bg-white hover:bg-gray-50"> | |
| Learn more | |
| </a> | |
| </div> | |
| </div> | |
| <div id="walletInfo" class="mt-4 hidden"> | |
| <p class="text-white">Connected: <span id="walletAddress"></span></p> | |
| <button id="disconnectWalletBtn" class="mt-2 px-3 py-1 bg-red-600 text-white rounded-md text-sm">Disconnect</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://unpkg.com/xrpl@2.7.0/build/xrpl-latest-min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.1/build/qrcode.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/xumm-umd@1.0.0/dist/index.umd.js"></script> | |
| <script> | |
| // Xumm Wallet Connection | |
| let xumm = null; | |
| let connectedWallet = null; | |
| document.addEventListener('DOMContentLoaded', async function() { | |
| feather.replace(); | |
| // Initialize Xumm | |
| xumm = new Xumm('47fdfcb7-8362-47fe-9a89-a2efc55e86d5'); | |
| window.xumm = xumm; | |
| // Check if already connected | |
| const savedWallet = localStorage.getItem('connectedXummWallet'); | |
| if (savedWallet) { | |
| connectedWallet = JSON.parse(savedWallet); | |
| updateWalletUI(); | |
| } | |
| // Connect Wallet Buttons | |
| document.getElementById('connectWalletBtn').addEventListener('click', connectWallet); | |
| document.getElementById('connectWalletBtnNav').addEventListener('click', connectWallet); | |
| // Disconnect Wallet Buttons | |
| document.getElementById('disconnectWalletBtn').addEventListener('click', disconnectWallet); | |
| document.getElementById('disconnectWalletBtnNav').addEventListener('click', disconnectWallet); | |
| // Handle Xumm events | |
| xumm.on("ready", () => console.log("Xumm ready")); | |
| xumm.on("success", async () => { | |
| const account = await xumm.user.account; | |
| connectedWallet = { address: account }; | |
| localStorage.setItem('connectedXummWallet', JSON.stringify(connectedWallet)); | |
| updateWalletUI(); | |
| }); | |
| xumm.on("logout", () => { | |
| disconnectWallet(); | |
| }); | |
| }); | |
| async function connectWallet() { | |
| try { | |
| // Create modal for QR code | |
| const modal = document.createElement('div'); | |
| modal.className = 'fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50'; | |
| modal.innerHTML = ` | |
| <div class="bg-gray-800 rounded-lg p-6 max-w-md w-full hovered-element"> | |
| <div class="flex justify-between items-center mb-4 hovered-element"> | |
| <h3 class="text-lg font-medium text-white">Scan with Xaman</h3> | |
| <button id="closeModal" class="text-gray-400 hover:text-white" onclick="document.body.removeChild(this.closest('div[class*=\"fixed inset-0\"]'))"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x hovered-element"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> | |
| </button> | |
| </div> | |
| <div class="flex justify-center mb-4" id="qrCodeContainer"></div> | |
| <p class="text-gray-300 text-sm text-center hovered-element"> | |
| Scan this QR code with Xaman Wallet to connect | |
| </p> | |
| </div> | |
| `; | |
| document.body.appendChild(modal); | |
| feather.replace(); | |
| // Generate QR code for Xumm deep link | |
| const payload = await xumm.payload.create({ | |
| TransactionType: "SignIn" | |
| }); | |
| const qrCode = new QRCode(document.getElementById('qrCodeContainer'), { | |
| text: payload.refs.qr_png, | |
| width: 200, | |
| height: 200, | |
| colorDark: "#ffffff", | |
| colorLight: "transparent", | |
| correctLevel: QRCode.CorrectLevel.H | |
| }); | |
| // Close modal handlers | |
| const closeModal = () => { | |
| document.body.removeChild(modal); | |
| }; | |
| // Add hovered-element class to all clickable elements | |
| const closeButton = document.getElementById('closeModal'); | |
| closeButton.addEventListener('click', closeModal); | |
| // Close when clicking outside modal | |
| modal.addEventListener('click', (e) => { | |
| if (!e.target.closest('.hovered-element')) { | |
| closeModal(); | |
| } | |
| }); | |
| // Close with Escape key | |
| document.addEventListener('keydown', (e) => { | |
| if (e.key === 'Escape') { | |
| closeModal(); | |
| } | |
| }); | |
| } catch (error) { | |
| console.error('Wallet connection failed:', error); | |
| alert('Failed to connect wallet. Please try again.'); | |
| } | |
| } | |
| function disconnectWallet() { | |
| xumm.logout(); | |
| connectedWallet = null; | |
| localStorage.removeItem('connectedXummWallet'); | |
| updateWalletUI(); | |
| } | |
| function updateWalletUI() { | |
| const connectBtn = document.getElementById('connectWalletBtn'); | |
| const connectBtnNav = document.getElementById('connectWalletBtnNav'); | |
| const walletInfo = document.getElementById('walletInfo'); | |
| const walletInfoNav = document.getElementById('walletInfoNav'); | |
| const walletAddress = document.getElementById('walletAddress'); | |
| const walletAddressNav = document.getElementById('walletAddressNav'); | |
| if (connectedWallet) { | |
| connectBtn.style.display = 'none'; | |
| connectBtnNav.style.display = 'none'; | |
| walletInfo.classList.remove('hidden'); | |
| walletInfoNav.classList.remove('hidden'); | |
| const shortAddress = `${connectedWallet.address.substring(0, 6)}...${connectedWallet.address.substring(connectedWallet.address.length - 4)}`; | |
| walletAddress.textContent = shortAddress; | |
| walletAddressNav.textContent = shortAddress; | |
| } else { | |
| connectBtn.style.display = 'inline-flex'; | |
| connectBtnNav.style.display = 'inline-flex'; | |
| walletInfo.classList.add('hidden'); | |
| walletInfoNav.classList.add('hidden'); | |
| } | |
| } | |
| // Utility function to send payment | |
| async function sendXrpPayment(amount, destination) { | |
| if (!connectedWallet) { | |
| alert('Please connect your wallet first'); | |
| return; | |
| } | |
| try { | |
| const payload = await xumm.payload.createAndSubscribe({ | |
| txjson: { | |
| TransactionType: "Payment", | |
| Account: connectedWallet.address, | |
| Amount: xrpl.xrpToDrops(amount), | |
| Destination: destination | |
| } | |
| }); | |
| return payload.resolved; | |
| } catch (error) { | |
| console.error('Payment failed:', error); | |
| throw error; | |
| } | |
| } | |
| </script> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8"> | |
| <div class="xl:grid xl:grid-cols-3 xl:gap-8"> | |
| <div class="space-y-8 xl:col-span-1"> | |
| <img class="h-6 w-auto" src="https://huggingface.co/spaces/ICExrp/degen-cube-portal/resolve/main/images/ICE%20LOGO.jpeg.png" alt="Degen Hub"> | |
| <p class="text-gray-300 text-base"> | |
| The ultimate portal for Degen Cubes. Trade, collect, and explore. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="discord"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="github"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2"> | |
| <div class="md:grid md:grid-cols-2 md:gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase"> | |
| Resources | |
| </h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li> | |
| <a href="#" class="text-base text-gray-400 hover:text-white"> | |
| Documentation | |
| </body> | |
| </html> |