Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Blox Fruits Trader - Trade & Check Fruit Values</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #0f172a; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%); | |
| } | |
| .fruit-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .fruit-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2); | |
| } | |
| .fruit-mythical { | |
| border: 2px solid #f59e0b; | |
| background: rgba(245, 158, 11, 0.1); | |
| } | |
| .fruit-legendary { | |
| border: 2px solid #8b5cf6; | |
| background: rgba(139, 92, 246, 0.1); | |
| } | |
| .fruit-rare { | |
| border: 2px solid #3b82f6; | |
| background: rgba(59, 130, 246, 0.1); | |
| } | |
| .fruit-common { | |
| border: 2px solid #64748b; | |
| background: rgba(100, 116, 139, 0.1); | |
| } | |
| .blox-btn { | |
| background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); | |
| transition: all 0.3s ease; | |
| } | |
| .blox-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4); | |
| } | |
| .price-tag { | |
| position: absolute; | |
| top: -10px; | |
| right: -10px; | |
| background: #3b82f6; | |
| color: white; | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); | |
| } | |
| .notification-badge { | |
| position: absolute; | |
| top: -5px; | |
| right: -5px; | |
| background: #ef4444; | |
| color: white; | |
| border-radius: 50%; | |
| width: 20px; | |
| height: 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 10px; | |
| font-weight: bold; | |
| } | |
| .trade-card { | |
| transition: all 0.3s ease; | |
| background: rgba(30, 58, 138, 0.2); | |
| } | |
| .trade-card:hover { | |
| background: rgba(30, 58, 138, 0.4); | |
| } | |
| .search-input:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #1e293b; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #3b82f6; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #2563eb; | |
| } | |
| </style> | |
| </head> | |
| <body class="text-gray-200"> | |
| <!-- Navigation --> | |
| <nav class="gradient-bg py-4 px-6 shadow-lg sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-apple-alt text-3xl text-yellow-400"></i> | |
| <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500"> | |
| Blox Fruits Trader | |
| </h1> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-6"> | |
| <a href="#home" class="hover:text-blue-300 transition">Home</a> | |
| <a href="#trade" class="hover:text-blue-300 transition">Trade</a> | |
| <a href="#values" class="hover:text-blue-300 transition">Fruit Values</a> | |
| <a href="#about" class="hover:text-blue-300 transition">About</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <i class="fas fa-bell text-xl cursor-pointer hover:text-blue-300"></i> | |
| <span class="notification-badge">3</span> | |
| </div> | |
| <button class="blox-btn px-4 py-2 rounded-full font-medium flex items-center space-x-2"> | |
| <i class="fas fa-user"></i> | |
| <span>Login</span> | |
| </button> | |
| <button class="md:hidden text-xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="gradient-bg py-20 px-6"> | |
| <div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4 leading-tight"> | |
| Trade <span class="text-blue-400">Blox Fruits</span> with Players Worldwide | |
| </h1> | |
| <p class="text-lg mb-8 text-gray-300"> | |
| The ultimate platform for trading fruits in Roblox Blox Fruits. Check real-time values, make offers, and find the best deals! | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="blox-btn px-6 py-3 rounded-full font-medium flex items-center justify-center space-x-2"> | |
| <i class="fas fa-fire"></i> | |
| <span>Start Trading</span> | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 px-6 py-3 rounded-full font-medium flex items-center justify-center space-x-2 transition"> | |
| <i class="fas fa-chart-line"></i> | |
| <span>View Values</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/500x300/1e293b/64748b?text=Blox+Fruits+Trading" alt="Blox Fruits Trading" class="rounded-xl shadow-2xl border-2 border-blue-500"> | |
| <div class="absolute -bottom-5 -right-5 bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg"> | |
| <span class="font-bold">Live Trades: 1,234</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Trading Section --> | |
| <section id="trade" class="py-16 px-6 bg-slate-900"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-3xl font-bold mb-2 text-center">Make or Find Offers</h2> | |
| <p class="text-gray-400 mb-10 text-center max-w-2xl mx-auto"> | |
| Browse existing trade offers or create your own to get the fruits you want! | |
| </p> | |
| <div class="bg-slate-800 rounded-xl p-6 mb-10"> | |
| <h3 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-plus-circle mr-2 text-blue-400"></i> Create New Trade Offer | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Your Fruits</label> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search fruits..." class="search-input w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-2 pl-10 focus:border-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <div class="mt-4 h-64 overflow-y-auto p-2 bg-slate-700 rounded-lg"> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <!-- Sample fruits you own --> | |
| <div class="fruit-card fruit-legendary p-2 rounded-lg cursor-pointer text-center relative"> | |
| <div class="price-tag">L</div> | |
| <i class="fas fa-apple-alt text-2xl text-purple-500"></i> | |
| <p class="text-xs mt-1 truncate">Dough</p> | |
| </div> | |
| <div class="fruit-card fruit-mythical p-2 rounded-lg cursor-pointer text-center relative"> | |
| <div class="price-tag">M</div> | |
| <i class="fas fa-apple-alt text-2xl text-yellow-500"></i> | |
| <p class="text-xs mt-1 truncate">Leopard</p> | |
| </div> | |
| <div class="fruit-card fruit-rare p-2 rounded-lg cursor-pointer text-center relative"> | |
| <div class="price-tag">R</div> | |
| <i class="fas fa-apple-alt text-2xl text-blue-400"></i> | |
| <p class="text-xs mt-1 truncate">Portal</p> | |
| </div> | |
| <div class="fruit-card fruit-common p-2 rounded-lg cursor-pointer text-center relative"> | |
| <div class="price-tag">C</div> | |
| <i class="fas fa-apple-alt text-2xl text-gray-400"></i> | |
| <p class="text-xs mt-1 truncate">Spin</p> | |
| </div> | |
| <div class="fruit-card fruit-legendary p-2 rounded-lg cursor-pointer text-center relative"> | |
| <div class="price-tag">L</div> | |
| <i class="fas fa-apple-alt text-2xl text-purple-500"></i> | |
| <p class="text-xs mt-1 truncate">Dragon</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex flex-col items-center justify-center"> | |
| <i class="fas fa-exchange-alt text-4xl text-blue-400 my-4 transform rotate-90 md:rotate-0"></i> | |
| <button class="blox-btn px-6 py-3 rounded-full font-medium"> | |
| Add Beli/Bounty | |
| </button> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Desired Fruits</label> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search fruits..." class="search-input w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-2 pl-10 focus:border-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <div class="mt-4 h-64 overflow-y-auto p-2 bg-slate-700 rounded-lg"> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <!-- Sample fruits you want --> | |
| <div class="fruit-card fruit-mythical p-2 rounded-lg cursor-pointer text-center relative"> | |
| <div class="price-tag">M</div> | |
| <i class="fas fa-apple-alt text-2xl text-yellow-500"></i> | |
| <p class="text-xs mt-1 truncate">Kitsune</p> | |
| </div> | |
| <div class="fruit-card fruit-legendary p-2 rounded-lg cursor-pointer text-center relative"> | |
| <div class="price-tag">L</div> | |
| <i class="fas fa-apple-alt text-2xl text-purple-500"></i> | |
| <p class="text-xs mt-1 truncate">Venom</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-end"> | |
| <button class="blox-btn px-8 py-3 rounded-lg font-medium flex items-center space-x-2"> | |
| <i class="fas fa-paper-plane"></i> | |
| <span>Post Trade Offer</span> | |
| </button> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-list-ul mr-2 text-blue-400"></i> Recent Trade Offers | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Sample trade offers --> | |
| <div class="trade-card rounded-xl p-4 border border-slate-700"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div class="flex items-center"> | |
| <img src="https://via.placeholder.com/40/3b82f6/ffffff?text=U" class="rounded-full mr-2" alt="User"> | |
| <div> | |
| <p class="font-medium">BloxTrader123</p> | |
| <p class="text-xs text-gray-400">2 hours ago</p> | |
| </div> | |
| </div> | |
| <span class="bg-blue-900 text-blue-300 text-xs px-2 py-1 rounded">Active</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="text-center"> | |
| <p class="text-sm text-gray-400 mb-1">Offering</p> | |
| <div class="flex justify-center space-x-1"> | |
| <div class="fruit-card fruit-legendary p-1 rounded-md text-center"> | |
| <i class="fas fa-apple-alt text-lg text-purple-500"></i> | |
| </div> | |
| <div class="fruit-card fruit-rare p-1 rounded-md text-center"> | |
| <i class="fas fa-apple-alt text-lg text-blue-400"></i> | |
| </div> | |
| </div> | |
| <p class="text-xs mt-1">Dough + Portal</p> | |
| </div> | |
| <i class="fas fa-exchange-alt text-gray-500 mx-2"></i> | |
| <div class="text-center"> | |
| <p class="text-sm text-gray-400 mb-1">Wanting</p> | |
| <div class="flex justify-center space-x-1"> | |
| <div class="fruit-card fruit-mythical p-1 rounded-md text-center"> | |
| <i class="fas fa-apple-alt text-lg text-yellow-500"></i> | |
| </div> | |
| </div> | |
| <p class="text-xs mt-1">Leopard</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <button class="text-blue-400 hover:text-blue-300 text-sm flex items-center"> | |
| <i class="fas fa-comment-dots mr-1"></i> 5 Offers | |
| </button> | |
| <button class="blox-btn px-4 py-1 rounded-full text-sm"> | |
| Make Offer | |
| </button> | |
| </div> | |
| </div> | |
| <div class="trade-card rounded-xl p-4 border border-slate-700"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div class="flex items-center"> | |
| <img src="https://via.placeholder.com/40/ef4444/ffffff?text=P" class="rounded-full mr-2" alt="User"> | |
| <div> | |
| <p class="font-medium">PirateKing</p> | |
| <p class="text-xs text-gray-400">5 hours ago</p> | |
| </div> | |
| </div> | |
| <span class="bg-green-900 text-green-300 text-xs px-2 py-1 rounded">+2.5M Beli</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="text-center"> | |
| <p class="text-sm text-gray-400 mb-1">Offering</p> | |
| <div class="flex justify-center space-x-1"> | |
| <div class="fruit-card fruit-legendary p-1 rounded-md text-center"> | |
| <i class="fas fa-apple-alt text-lg text-purple-500"></i> | |
| </div> | |
| <div class="fruit-card fruit-common p-1 rounded-md text-center"> | |
| <i class="fas fa-apple-alt text-lg text-gray-400"></i> | |
| </div> | |
| <div class="text-yellow-400 p-1 rounded-md text-center"> | |
| <i class="fas fa-coins text-lg"></i> | |
| </div> | |
| </div> | |
| <p class="text-xs mt-1">Dragon + Spin + 2.5M</p> | |
| </div> | |
| <i class="fas fa-exchange-alt text-gray-500 mx-2"></i> | |
| <div class="text-center"> | |
| <p class="text-sm text-gray-400 mb-1">Wanting</p> | |
| <div class="flex justify-center space-x-1"> | |
| <div class="fruit-card fruit-mythical p-1 rounded-md text-center"> | |
| <i class="fas fa-apple-alt text-lg text-yellow-500"></i> | |
| </div> | |
| </div> | |
| <p class="text-xs mt-1">Kitsune</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <button class="text-blue-400 hover:text-blue-300 text-sm flex items-center"> | |
| <i class="fas fa-comment-dots mr-1"></i> 12 Offers | |
| </button> | |
| <button class="blox-btn px-4 py-1 rounded-full text-sm"> | |
| Make Offer | |
| </button> | |
| </div> | |
| </div> | |
| <div class="trade-card rounded-xl p-4 border border-slate-700"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div class="flex items-center"> | |
| <img src="https://via.placeholder.com/40/10b981/ffffff?text=M" class="rounded-full mr-2" alt="User"> | |
| <div> | |
| <p class="font-medium">MarineHQ</p> | |
| <p class="text-xs text-gray-400">1 day ago</p> | |
| </div> | |
| </div> | |
| <span class="bg-purple-900 text-purple-300 text-xs px-2 py-1 rounded">+5M Bounty</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="text-center"> | |
| <p class="text-sm text-gray-400 mb-1">Offering</p> | |
| <div class="flex justify-center space-x-1"> | |
| <div class="fruit-card fruit-rare p-1 rounded-md text-center"> | |
| <i class="fas fa-apple-alt text-lg text-blue-400"></i> | |
| </div> | |
| <div class="text-red-500 p-1 rounded-md text-center"> | |
| <i class="fas fa-skull text-lg"></i> | |
| </div> | |
| </div> | |
| <p class="text-xs mt-1">Portal + 5M Bounty</p> | |
| </div> | |
| <i class="fas fa-exchange-alt text-gray-500 mx-2"></i> | |
| <div class="text-center"> | |
| <p class="text-sm text-gray-400 mb-1">Wanting</p> | |
| <div class="flex justify-center space-x-1"> | |
| <div class="fruit-card fruit-legendary p-1 rounded-md text-center"> | |
| <i class="fas fa-apple-alt text-lg text-purple-500"></i> | |
| </div> | |
| </div> | |
| <p class="text-xs mt-1">Venom</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <button class="text-blue-400 hover:text-blue-300 text-sm flex items-center"> | |
| <i class="fas fa-comment-dots mr-1"></i> 8 Offers | |
| </button> | |
| <button class="blox-btn px-4 py-1 rounded-full text-sm"> | |
| Make Offer | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <button class="bg-slate-800 hover:bg-slate-700 px-6 py-2 rounded-full font-medium border border-slate-700 transition"> | |
| View All Offers <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Fruit Values Section --> | |
| <section id="values" class="py-16 px-6 bg-slate-800"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-3xl font-bold mb-2 text-center">Blox Fruits Value List</h2> | |
| <p class="text-gray-400 mb-10 text-center max-w-2xl mx-auto"> | |
| Updated daily based on community trades and market trends | |
| </p> | |
| <div class="mb-6 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="relative w-full md:w-64 mb-4 md:mb-0"> | |
| <input type="text" placeholder="Search fruits..." class="search-input w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-2 pl-10 focus:border-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="bg-blue-600 px-4 py-2 rounded-lg font-medium text-sm">All</button> | |
| <button class="bg-slate-700 hover:bg-slate-600 px-4 py-2 rounded-lg font-medium text-sm">Mythical</button> | |
| <button class="bg-slate-700 hover:bg-slate-600 px-4 py-2 rounded-lg font-medium text-sm">Legendary</button> | |
| <button class="bg-slate-700 hover:bg-slate-600 px-4 py-2 rounded-lg font-medium text-sm">Rare</button> | |
| <button class="bg-slate-700 hover:bg-slate-600 px-4 py-2 rounded-lg font-medium text-sm">Common</button> | |
| </div> | |
| </div> | |
| <div class="bg-slate-900 rounded-xl overflow-hidden"> | |
| <div class="grid grid-cols-12 bg-slate-800 p-4 font-medium text-sm"> | |
| <div class="col-span-4 md:col-span-2">Fruit</div> | |
| <div class="col-span-2 md:col-span-1 text-center">Rarity</div> | |
| <div class="col-span-3 text-center">Value</div> | |
| <div class="col-span-3 text-center">Demand</div> | |
| <div class="hidden md:block col-span-4">Trend</div> | |
| </div> | |
| <div class="divide-y divide-slate-800 max-h-[500px] overflow-y-auto"> | |
| <!-- Sample fruit values --> | |
| <div class="grid grid-cols-12 p-4 items-center hover:bg-slate-800/50 transition"> | |
| <div class="col-span-4 md:col-span-2 flex items-center"> | |
| <i class="fas fa-apple-alt text-2xl text-yellow-500 mr-3"></i> | |
| <span>Kitsune</span> | |
| </div> | |
| <div class="col-span-2 md:col-span-1"> | |
| <span class="bg-yellow-900 text-yellow-300 px-2 py-1 rounded-full text-xs">Mythical</span> | |
| </div> | |
| <div class="col-span-3 text-center font-medium text-yellow-400">35-40M</div> | |
| <div class="col-span-3 text-center"> | |
| <div class="flex justify-center items-center"> | |
| <i class="fas fa-fire text-red-500 mr-1"></i> | |
| <span>High</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block col-span-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-arrow-up text-green-500 mr-2"></i> | |
| <div class="w-full bg-slate-700 rounded-full h-2.5"> | |
| <div class="bg-green-500 h-2.5 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-12 p-4 items-center hover:bg-slate-800/50 transition"> | |
| <div class="col-span-4 md:col-span-2 flex items-center"> | |
| <i class="fas fa-apple-alt text-2xl text-yellow-500 mr-3"></i> | |
| <span>Leopard</span> | |
| </div> | |
| <div class="col-span-2 md:col-span-1"> | |
| <span class="bg-yellow-900 text-yellow-300 px-2 py-1 rounded-full text-xs">Mythical</span> | |
| </div> | |
| <div class="col-span-3 text-center font-medium text-yellow-400">28-32M</div> | |
| <div class="col-span-3 text-center"> | |
| <div class="flex justify-center items-center"> | |
| <i class="fas fa-fire text-red-500 mr-1"></i> | |
| <span>High</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block col-span-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-arrow-up text-green-500 mr-2"></i> | |
| <div class="w-full bg-slate-700 rounded-full h-2.5"> | |
| <div class="bg-green-500 h-2.5 rounded-full" style="width: 70%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-12 p-4 items-center hover:bg-slate-800/50 transition"> | |
| <div class="col-span-4 md:col-span-2 flex items-center"> | |
| <i class="fas fa-apple-alt text-2xl text-purple-500 mr-3"></i> | |
| <span>Dough</span> | |
| </div> | |
| <div class="col-span-2 md:col-span-1"> | |
| <span class="bg-purple-900 text-purple-300 px-2 py-1 rounded-full text-xs">Legendary</span> | |
| </div> | |
| <div class="col-span-3 text-center font-medium text-purple-400">20-24M</div> | |
| <div class="col-span-3 text-center"> | |
| <div class="flex justify-center items-center"> | |
| <i class="fas fa-fire text-red-500 mr-1"></i> | |
| <span>High</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block col-span-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-arrow-up text-green-500 mr-2"></i> | |
| <div class="w-full bg-slate-700 rounded-full h-2.5"> | |
| <div class="bg-green-500 h-2.5 rounded-full" style="width: 60%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-12 p-4 items-center hover:bg-slate-800/50 transition"> | |
| <div class="col-span-4 md:col-span-2 flex items-center"> | |
| <i class="fas fa-apple-alt text-2xl text-purple-500 mr-3"></i> | |
| <span>Venom</span> | |
| </div> | |
| <div class="col-span-2 md:col-span-1"> | |
| <span class="bg-purple-900 text-purple-300 px-2 py-1 rounded-full text-xs">Legendary</span> | |
| </div> | |
| <div class="col-span-3 text-center font-medium text-purple-400">18-22M</div> | |
| <div class="col-span-3 text-center"> | |
| <div class="flex justify-center items-center"> | |
| <i class="fas fa-fire text-red-500 mr-1"></i> | |
| <span>High</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block col-span-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-arrow-up text-green-500 mr-2"></i> | |
| <div class="w-full bg-slate-700 rounded-full h-2.5"> | |
| <div class="bg-green-500 h-2.5 rounded-full" style="width: 55%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-12 p-4 items-center hover:bg-slate-800/50 transition"> | |
| <div class="col-span-4 md:col-span-2 flex items-center"> | |
| <i class="fas fa-apple-alt text-2xl text-purple-500 mr-3"></i> | |
| <span>Dragon</span> | |
| </div> | |
| <div class="col-span-2 md:col-span-1"> | |
| <span class="bg-purple-900 text-purple-300 px-2 py-1 rounded-full text-xs">Legendary</span> | |
| </div> | |
| <div class="col-span-3 text-center font-medium text-purple-400">15-18M</div> | |
| <div class="col-span-3 text-center"> | |
| <div class="flex justify-center items-center"> | |
| <i class="fas fa-fire text-red-500 mr-1"></i> | |
| <span>High</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block col-span-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-arrow-down text-red-500 mr-2"></i> | |
| <div class="w-full bg-slate-700 rounded-full h-2.5"> | |
| <div class="bg-red-500 h-2.5 rounded-full" style="width: 30%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-12 p-4 items-center hover:bg-slate-800/50 transition"> | |
| <div class="col-span-4 md:col-span-2 flex items-center"> | |
| <i class="fas fa-apple-alt text-2xl text-blue-400 mr-3"></i> | |
| <span>Portal</span> | |
| </div> | |
| <div class="col-span-2 md:col-span-1"> | |
| <span class="bg-blue-900 text-blue-300 px-2 py-1 rounded-full text-xs">Rare</span> | |
| </div> | |
| <div class="col-span-3 text-center font-medium text-blue-400">8-10M</div> | |
| <div class="col-span-3 text-center"> | |
| <div class="flex justify-center items-center"> | |
| <i class="fas fa-bolt text-yellow-500 mr-1"></i> | |
| <span>Medium</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block col-span-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-equals text-gray-400 mr-2"></i> | |
| <div class="w-full bg-slate-700 rounded-full h-2.5"> | |
| <div class="bg-gray-400 h-2.5 rounded-full" style="width: 50%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-12 p-4 items-center hover:bg-slate-800/50 transition"> | |
| <div class="col-span-4 md:col-span-2 flex items-center"> | |
| <i class="fas fa-apple-alt text-2xl text-gray-400 mr-3"></i> | |
| <span>Spin</span> | |
| </div> | |
| <div class="col-span-2 md:col-span-1"> | |
| <span class="bg-gray-900 text-gray-300 px-2 py-1 rounded-full text-xs">Common</span> | |
| </div> | |
| <div class="col-span-3 text-center font-medium text-gray-400">1-1.5M</div> | |
| <div class="col-span-3 text-center"> | |
| <div class="flex justify-center items-center"> | |
| <i class="fas fa-leaf text-green-500 mr-1"></i> | |
| <span>Low</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block col-span-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-arrow-down text-red-500 mr-2"></i> | |
| <div class="w-full bg-slate-700 rounded-full h-2.5"> | |
| <div class="bg-red-500 h-2.5 rounded-full" style="width: 20%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <button class="blox-btn px-6 py-2 rounded-full font-medium"> | |
| <i class="fas fa-sync-alt mr-2"></i> Update Values | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-16 px-6 bg-slate-900"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-3xl font-bold mb-10 text-center">About Blox Fruits Trader</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-slate-800 rounded-xl p-6 text-center"> | |
| <div class="bg-blue-900/30 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-exchange-alt text-2xl text-blue-400"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Fair Trading</h3> | |
| <p class="text-gray-400"> | |
| Our platform ensures fair trades with real-time value tracking and community verification to prevent scams. | |
| </p> | |
| </div> | |
| <div class="bg-slate-800 rounded-xl p-6 text-center"> | |
| <div class="bg-purple-900/30 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-chart-line text-2xl text-purple-400"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Live Market Data</h3> | |
| <p class="text-gray-400"> | |
| Fruit values are updated daily based on thousands of trades across different servers and platforms. | |
| </p> | |
| </div> | |
| <div class="bg-slate-800 rounded-xl p-6 text-center"> | |
| <div class="bg-yellow-900/30 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-shield-alt text-2xl text-yellow-400"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Safe Community</h3> | |
| <p class="text-gray-400"> | |
| Verified traders, reputation system, and reporting tools keep the community safe from bad actors. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-16 bg-gradient-to-r from-blue-900/30 to-purple-900/30 rounded-xl p-8"> | |
| <h3 class="text-2xl font-bold mb-4">How It Works</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1 flex-shrink-0">1</div> | |
| <div> | |
| <h4 class="font-medium mb-1">Create Account</h4> | |
| <p class="text-sm text-gray-400">Sign up with your Roblox username</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1 flex-shrink-0">2</div> | |
| <div> | |
| <h4 class="font-medium mb-1">List Your Fruits</h4> | |
| <p class="text-sm text-gray-400">Add the fruits you want to trade</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1 flex-shrink-0">3</div> | |
| <div> | |
| <h4 class="font-medium mb-1">Make Offers</h4> | |
| <p class="text-sm text-gray-400">Browse trades or create your own</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1 flex-shrink-0">4</div> | |
| <div> | |
| <h4 class="font-medium mb-1">Complete Trade</h4> | |
| <p class="text-sm text-gray-400">Meet in-game and exchange fruits</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="gradient-bg py-10 px-6 border-t border-slate-800"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i class="fas fa-apple-alt text-2xl text-yellow-400"></i> | |
| <h3 class="text-xl font-bold">Blox Fruits Trader</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4"> | |
| The premier platform for trading Blox Fruits in Roblox. Get the best deals and stay updated with fruit values. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition"> | |
| <i class="fab fa-discord text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition"> | |
| <i class="fab fa-youtube text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="text-gray-400 hover:text-blue-400 transition">Home</a></li> | |
| <li><a href="#trade" class="text-gray-400 hover:text-blue-400 transition">Trade Offers</a></li> | |
| <li><a href="#values" class="text-gray-400 hover:text-blue-400 transition">Fruit Values</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Trading Guide</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">FAQ</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Blox Fruits Wiki</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Update Logs</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Tier Lists</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Fruit Locations</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Discord Bot</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Newsletter</h4> | |
| <p class="text-gray-400 mb-4"> | |
| Subscribe to get updates on fruit values and new features. | |
| </p> | |
| <div class="flex"> | |
| <input type="email" placeholder="Your email" class="bg-slate-800 text-white px-4 py-2 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500 w-full"> | |
| <button class="blox-btn px-4 py-2 rounded-r-lg font-medium"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-slate-800 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 text-sm mb-4 md:mb-0"> | |
| © 2023 Blox Fruits Trader. Not affiliated with Roblox or Blox Fruits. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-blue-400 text-sm transition">Terms</a> | |
| <a href="#" class="text-gray-500 hover:text-blue-400 text-sm transition">Privacy</a> | |
| <a href="#" class="text-gray-500 hover:text-blue-400 text-sm transition">Contact</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple script for demonstration purposes | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Fruit card click handler | |
| const fruitCards = document.querySelectorAll('.fruit-card'); | |
| fruitCards.forEach(card => { | |
| card.addEventListener('click', function() { | |
| // Toggle selection | |
| this.classList.toggle('ring-2'); | |
| this.classList.toggle('ring-blue-500'); | |
| }); | |
| }); | |
| // Mobile menu toggle would go here | |
| // Currently just a placeholder for the mobile menu button | |
| const mobileMenuBtn = document.querySelector('.md\\:hidden.text-xl'); | |
| mobileMenuBtn.addEventListener('click', function() { | |
| alert('Mobile menu would open here in a full implementation'); | |
| }); | |
| // Notification bell click handler | |
| const notificationBell = document.querySelector('.fa-bell'); | |
| notificationBell.addEventListener('click', function() { | |
| alert('Notification dropdown would appear here'); | |
| }); | |
| // Make offer buttons | |
| const makeOfferBtns = document.querySelectorAll('button:contains("Make Offer")'); | |
| makeOfferBtns.forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| alert('Offer modal would open here'); | |
| }); | |
| }); | |
| // Update values button | |
| const updateValuesBtn = document.querySelector('button:contains("Update Values")'); | |
| if (updateValuesBtn) { | |
| updateValuesBtn.addEventListener('click', function() { | |
| alert('Refreshing fruit values from the database...'); | |
| }); | |
| } | |
| }); | |
| </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="src/assets/logo.gif" alt="Genesis Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://aazzrrooddeell-genesis.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >Genesis</a> - 🧬 <a href="https://aazzrrooddeell-genesis.hf.space?remix=aazzrrooddeell/blox" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |