|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Rust & CS2 Unboxing Platform</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> |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); |
|
|
} |
|
|
.case-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
.chat-message:nth-child(even) { |
|
|
background-color: rgba(255, 255, 255, 0.05); |
|
|
} |
|
|
.unboxing-animation { |
|
|
animation: spin 0.5s linear infinite; |
|
|
} |
|
|
@keyframes spin { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
.rainbow-text { |
|
|
background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
animation: rainbow 5s linear infinite; |
|
|
background-size: 200% 100%; |
|
|
} |
|
|
@keyframes rainbow { |
|
|
0% { background-position: 0% 50%; } |
|
|
100% { background-position: 100% 50%; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="gradient-bg text-gray-100 min-h-screen"> |
|
|
|
|
|
<nav class="bg-gray-900 border-b border-gray-800 sticky top-0 z-50"> |
|
|
<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"> |
|
|
<span class="text-xl font-bold rainbow-text">UNBOXPRO</span> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-10 flex items-baseline space-x-4"> |
|
|
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium bg-blue-900 text-white">Home</a> |
|
|
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:bg-gray-800 hover:text-white">Cases</a> |
|
|
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:bg-gray-800 hover:text-white">Games</a> |
|
|
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:bg-gray-800 hover:text-white">Leaderboard</a> |
|
|
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:bg-gray-800 hover:text-white">Affiliates</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-4 flex items-center md:ml-6"> |
|
|
<div class="mr-4 flex items-center"> |
|
|
<span class="text-yellow-400 font-bold">$12.45</span> |
|
|
<button class="ml-2 bg-blue-700 hover:bg-blue-800 px-3 py-1 rounded text-sm">Deposit</button> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<div class="flex items-center cursor-pointer"> |
|
|
<img class="h-8 w-8 rounded-full" src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/fe/fef49e7fa7e1997310d705b2a6158ff8dc1cdfeb_full.jpg" alt="User avatar"> |
|
|
<span class="ml-2 text-sm font-medium">Player123</span> |
|
|
<i class="fas fa-chevron-down ml-1 text-xs"></i> |
|
|
</div> |
|
|
|
|
|
<div class="hidden absolute right-0 mt-2 w-48 bg-gray-800 rounded-md shadow-lg py-1 z-50"> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700">Inventory</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700">Settings</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700">Support</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700">Logout</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:hidden flex items-center"> |
|
|
<div class="mr-4"> |
|
|
<span class="text-yellow-400 font-bold">$12.45</span> |
|
|
</div> |
|
|
<button class="mobile-menu-button p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none"> |
|
|
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mobile-menu hidden md:hidden"> |
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
|
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-blue-900">Home</a> |
|
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-800">Cases</a> |
|
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-800">Games</a> |
|
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-800">Leaderboard</a> |
|
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-800">Affiliates</a> |
|
|
</div> |
|
|
<div class="pt-4 pb-3 border-t border-gray-800"> |
|
|
<div class="flex items-center px-5"> |
|
|
<img class="h-10 w-10 rounded-full" src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/fe/fef49e7fa7e1997310d705b2a6158ff8dc1cdfeb_full.jpg" alt="User avatar"> |
|
|
<div class="ml-3"> |
|
|
<div class="text-base font-medium text-white">Player123</div> |
|
|
<div class="text-sm font-medium text-gray-400">$12.45</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-800">Inventory</a> |
|
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-800">Settings</a> |
|
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-800">Support</a> |
|
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-800">Logout</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> |
|
|
<div class="flex flex-col lg:flex-row gap-6"> |
|
|
|
|
|
<div class="w-full lg:w-3/4"> |
|
|
|
|
|
<section class="mb-8"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-2xl font-bold">Recently Added Cases</h2> |
|
|
<a href="#" class="text-blue-400 hover:text-blue-300 text-sm">View All</a> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> |
|
|
|
|
|
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-all duration-300 case-hover"> |
|
|
<div class="relative"> |
|
|
<img src="https://steamcdn-a.akamaihd.net/apps/730/icons/econ/cases/case_weapon_01.4e7b1c4d2d4c3c6c7e3a6d5d0b1b1a8.png" alt="Rust Weapon Case" class="w-full h-32 object-contain"> |
|
|
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-2"> |
|
|
<span class="text-white font-semibold text-sm">Rust Weapon Case</span> |
|
|
</div> |
|
|
<div class="absolute top-2 right-2 bg-blue-600 text-white text-xs px-2 py-1 rounded">NEW</div> |
|
|
</div> |
|
|
<div class="p-3"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-yellow-400 font-bold">$2.99</span> |
|
|
<button class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm">Open</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-all duration-300 case-hover"> |
|
|
<div class="relative"> |
|
|
<img src="https://steamcdn-a.akamaihd.net/apps/730/icons/econ/cases/case_weapon_02.4e7b1c4d2d4c3c6c7e3a6d5d0b1b1a8.png" alt="CS2 Elite Case" class="w-full h-32 object-contain"> |
|
|
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-2"> |
|
|
<span class="text-white font-semibold text-sm">CS2 Elite Case</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-3"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-yellow-400 font-bold">$1.49</span> |
|
|
<button class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm">Open</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-all duration-300 case-hover"> |
|
|
<div class="relative"> |
|
|
<img src="https://steamcdn-a.akamaihd.net/apps/730/icons/econ/cases/case_weapon_03.4e7b1c4d2d4c3c6c7e3a6d5d0b1b1a8.png" alt="Rust Premium Case" class="w-full h-32 object-contain"> |
|
|
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-2"> |
|
|
<span class="text-white font-semibold text-sm">Rust Premium Case</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-3"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-yellow-400 font-bold">$4.99</span> |
|
|
<button class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm">Open</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-all duration-300 case-hover"> |
|
|
<div class="relative"> |
|
|
<img src="https://steamcdn-a.akamaihd.net/apps/730/icons/econ/cases/case_weapon_04.4e7b1c4d2d4c3c6c7e3a6d5d0b1b1a8.png" alt="Daily Free Case" class="w-full h-32 object-contain"> |
|
|
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-2"> |
|
|
<span class="text-white font-semibold text-sm">Daily Free Case</span> |
|
|
</div> |
|
|
<div class="absolute top-2 right-2 bg-purple-600 text-white text-xs px-2 py-1 rounded">FREE</div> |
|
|
</div> |
|
|
<div class="p-3"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-green-400 font-bold">$0.00</span> |
|
|
<button class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm">Open</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-8"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-2xl font-bold">Game Modes</h2> |
|
|
<a href="#" class="text-blue-400 hover:text-blue-300 text-sm">View All</a> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> |
|
|
|
|
|
<div class="bg-gray-800 rounded-lg p-4 text-center hover:bg-gray-700 transition-all duration-300 cursor-pointer"> |
|
|
<div class="bg-blue-900 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-3"> |
|
|
<i class="fas fa-dice text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold">Roulette</h3> |
|
|
<p class="text-gray-400 text-sm mt-1">Bet on colors</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-lg p-4 text-center hover:bg-gray-700 transition-all duration-300 cursor-pointer"> |
|
|
<div class="bg-red-900 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-3"> |
|
|
<i class="fas fa-chart-line text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold">Crash</h3> |
|
|
<p class="text-gray-400 text-sm mt-1">Cash out in time</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-lg p-4 text-center hover:bg-gray-700 transition-all duration-300 cursor-pointer"> |
|
|
<div class="bg-yellow-900 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-3"> |
|
|
<i class="fas fa-trophy text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold">Jackpot</h3> |
|
|
<p class="text-gray-400 text-sm mt-1">Winner takes all</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-lg p-4 text-center hover:bg-gray-700 transition-all duration-300 cursor-pointer"> |
|
|
<div class="bg-green-900 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-3"> |
|
|
<i class="fas fa-coins text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold">Coinflip</h3> |
|
|
<p class="text-gray-400 text-sm mt-1">50/50 chance</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-8"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-2xl font-bold">Recent Wins</h2> |
|
|
<a href="#" class="text-blue-400 hover:text-blue-300 text-sm">View All</a> |
|
|
</div> |
|
|
<div class="bg-gray-800 rounded-lg overflow-hidden"> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-700"> |
|
|
<thead class="bg-gray-900"> |
|
|
<tr> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Player</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Game</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Item</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Value</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-gray-800 divide-y divide-gray-700"> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<img class="h-8 w-8 rounded-full" src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/fe/fef49e7fa7e1997310d705b2a6158ff8dc1cdfeb_full.jpg" alt=""> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-white">Player123</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-900 text-blue-100">Case</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<img class="h-8 w-8" src="https://steamcdn-a.akamaihd.net/apps/730/icons/econ/default_generated/weapon_knife_karambit_aa_fade_light_large.4e7b1c4d2d4c3c6c7e3a6d5d0b1b1a8.png" alt=""> |
|
|
<div class="ml-2 text-sm text-gray-300">Karambit | Fade</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-400 font-bold">$1,245.32</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<img class="h-8 w-8 rounded-full" src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/12/1234567890123456789012345678901234567890.jpg" alt=""> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-white">CS2Pro</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-900 text-red-100">Jackpot</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<img class="h-8 w-8" src="https://steamcdn-a.akamaihd.net/apps/730/icons/econ/default_generated/weapon_ak47_aa_vulcan_light_large.4e7b1c4d2d4c3c6c7e3a6d5d0b1b1a8.png" alt=""> |
|
|
<div class="ml-2 text-sm text-gray-300">AK-47 | Vulcan</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-400 font-bold">$342.15</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<img class="h-8 w-8 rounded-full" src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/ab/abcdefghijklmnopqrstuvwxyz0123456789.jpg" alt=""> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-white">RustKing</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-100">Coinflip</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<img class="h-8 w-8" src="https://steamcdn-a.akamaihd.net/apps/252490/icons/econ/rust/skins/ak47/ak47_bloodbath.4e7b1c4d2d4c3c6c7e3a6d5d0b1b1a8.png" alt=""> |
|
|
<div class="ml-2 text-sm text-gray-300">AK-47 Bloodbath</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-400 font-bold">$87.50</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="w-full lg:w-1/4"> |
|
|
|
|
|
<div class="bg-gray-800 rounded-lg shadow-lg mb-6 p-4"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img class="h-12 w-12 rounded-full" src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/fe/fef49e7fa7e1997310d705b2a6158ff8dc1cdfeb_full.jpg" alt="User avatar"> |
|
|
<div class="ml-3"> |
|
|
<h3 class="font-bold">Player123</h3> |
|
|
<p class="text-sm text-gray-400">Level 24</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-2 mb-4"> |
|
|
<div class="bg-gray-900 rounded p-2 text-center"> |
|
|
<p class="text-xs text-gray-400">Balance</p> |
|
|
<p class="text-yellow-400 font-bold">$12.45</p> |
|
|
</div> |
|
|
<div class="bg-gray-900 rounded p-2 text-center"> |
|
|
<p class="text-xs text-gray-400">Wagered</p> |
|
|
<p class="text-blue-400 font-bold">$1,245.67</p> |
|
|
</div> |
|
|
<div class="bg-gray-900 rounded p-2 text-center"> |
|
|
<p class="text-xs text-gray-400">Profit</p> |
|
|
<p class="text-green-400 font-bold">+$342.15</p> |
|
|
</div> |
|
|
<div class="bg-gray-900 rounded p-2 text-center"> |
|
|
<p class="text-xs text-gray-400">Cases Opened</p> |
|
|
<p class="text-purple-400 font-bold">247</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="flex-1 bg-blue-700 hover:bg-blue-800 text-white py-2 rounded text-sm">Deposit</button> |
|
|
<button class="flex-1 bg-green-700 hover:bg-green-800 text-white py-2 rounded text-sm">Withdraw</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-lg shadow-lg mb-6 p-4"> |
|
|
<h3 class="font-bold mb-2 flex items-center"> |
|
|
<i class="fas fa-gift text-yellow-400 mr-2"></i> Daily Bonus |
|
|
</h3> |
|
|
<div class="bg-gray-900 rounded p-3 mb-3"> |
|
|
<div class="flex justify-between items-center mb-1"> |
|
|
<span class="text-sm">Day 3 Bonus</span> |
|
|
<span class="text-xs bg-purple-700 text-white px-2 py-1 rounded">$0.50</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-purple-600 h-2 rounded-full" style="width: 60%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full bg-purple-700 hover:bg-purple-800 text-white py-2 rounded text-sm">Claim Bonus</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-lg shadow-lg mb-6 overflow-hidden"> |
|
|
<div class="bg-gray-900 px-4 py-3 border-b border-gray-700"> |
|
|
<h3 class="font-bold flex items-center"> |
|
|
<i class="fas fa-fire text-red-400 mr-2"></i> Live Case Battles |
|
|
</h3> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="mb-4"> |
|
|
<div class="flex justify-between items-center mb-1"> |
|
|
<span class="text-sm">Battle #1245</span> |
|
|
<span class="text-xs bg-blue-700 text-white px-2 py-1 rounded">$24.50</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center text-xs text-gray-400 mb-1"> |
|
|
<span>2/8 players</span> |
|
|
<span>00:45 left</span> |
|
|
</div> |
|
|
<button class="w-full bg-blue-700 hover:bg-blue-800 text-white py-1 rounded text-xs">Join Battle</button> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<div class="flex justify-between items-center mb-1"> |
|
|
<span class="text-sm">Battle #1246</span> |
|
|
<span class="text-xs bg-blue-700 text-white px-2 py-1 rounded">$12.75</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center text-xs text-gray-400 mb-1"> |
|
|
<span>5/8 players</span> |
|
|
<span>01:15 left</span> |
|
|
</div> |
|
|
<button class="w-full bg-blue-700 hover:bg-blue-800 text-white py-1 rounded text-xs">Join Battle</button> |
|
|
</div> |
|
|
<button class="w-full bg-gray-700 hover:bg-gray-600 text-white py-2 rounded text-sm">View All Battles</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden"> |
|
|
<div class="bg-gray-900 px-4 py-3 border-b border-gray-700"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h3 class="font-bold flex items-center"> |
|
|
<i class="fas fa-comments text-green-400 mr-2"></i> Community Chat |
|
|
</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-cog"></i> |
|
|
</button> |
|
|
<button class="text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex mt-2 overflow-x-auto"> |
|
|
<button class="text-xs bg-blue-900 text-white px-2 py-1 rounded mr-2">General</button> |
|
|
<button class="text-xs bg-gray-700 hover:bg-gray-600 text-white px-2 py-1 rounded mr-2">Trading</button> |
|
|
<button class="text-xs bg-gray-700 hover:bg-gray-600 text-white px-2 py-1 rounded mr-2">Support</button> |
|
|
<button class="text-xs bg-gray-700 hover:bg-gray-600 text-white px-2 py-1 rounded">English</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-64 overflow-y-auto p-3 chat-container"> |
|
|
|
|
|
</div> |
|
|
<div class="p-3 border-t border-gray-700"> |
|
|
<div class="flex"> |
|
|
<input type="text" placeholder="Type a message..." class="flex-1 bg-gray-700 text-white px-3 py-2 rounded-l focus:outline-none"> |
|
|
<button class="bg-green-700 hover:bg-green-800 text-white px-3 py-2 rounded-r"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex justify-between mt-2 text-xs text-gray-400"> |
|
|
<span>120 online</span> |
|
|
<span>Chat rules</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 border-t border-gray-800 mt-8"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">UNBOXPRO</h3> |
|
|
<p class="text-gray-400 text-sm">The best platform for unboxing CS2 and Rust items with various game modes and fair system.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Quick Links</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Home</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Cases</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Games</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Leaderboard</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Information</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white text-sm">FAQ</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Provably Fair</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Contact Us</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li class="text-gray-400 text-sm">[email protected]</li> |
|
|
<li class="text-gray-400 text-sm">Discord: unboxpro</li> |
|
|
<li class="text-gray-400 text-sm">Twitter: @unboxpro</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-400 text-sm">© 2023 UNBOXPRO. All rights reserved.</p> |
|
|
<div class="flex space-x-4 mt-4 md:mt-0"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-steam"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-discord"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 hidden" id="unboxingModal"> |
|
|
<div class="bg-gray-900 rounded-lg max-w-2xl w-full p-6 relative"> |
|
|
<button class="absolute top-4 right-4 text-gray-400 hover:text-white" id="closeModal"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
<h2 class="text-2xl font-bold mb-4">Unboxing Rust Weapon Case</h2> |
|
|
<div class="flex justify-center mb-6"> |
|
|
<div class="relative"> |
|
|
<img src="https://steamcdn-a.akamaihd.net/apps/730/icons/econ/cases/case_weapon_01.4e7b1c4d2d4c3c6c7e3a6d5d0b1b1a8.png" alt="Case" class="h-32 w-32 object-contain unboxing-animation" id="caseImage"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-800 rounded-lg p-4 mb-6 hidden" id="unboxedItem"> |
|
|
<div class="flex items-center justify-center"> |
|
|
<img src="" alt="Unboxed Item" class="h-16 w-16 mr-4" id="itemImage"> |
|
|
<div> |
|
|
<h3 class="font-bold" id="itemName">Item Name</h3> |
|
|
<p class="text-yellow-400 font-bold" id="itemValue">$0.00</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<button class="bg-blue-700 hover:bg-blue-800 text-white px-6 py-2 rounded" id="openOne">Open 1 ($2.99)</button> |
|
|
<button class="bg-purple-700 hover:bg-purple-800 text-white px-6 py-2 rounded" id="openTen">Open 10 ($27.99)</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const mobileMenuButton = document.querySelector('.mobile-menu-button'); |
|
|
const mobileMenu = document.querySelector('.mobile-menu'); |
|
|
|
|
|
mobileMenuButton.addEventListener('click', () => { |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const userDropdown = document.querySelector('.relative'); |
|
|
|
|
|
userDropdown.addEventListener('click', () => { |
|
|
const dropdownMenu = userDropdown.querySelector('.hidden'); |
|
|
dropdownMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const chatMessages = [ |
|
|
{ user: "CS2Pro", message: "Just won a Karambit Fade from a case! So hyped!", color: "text-blue-400" }, |
|
|
{ user: "RustKing", message: "Anyone want to trade for my AK Bloodbath?", color: "text-green-400" }, |
|
|
{ user: "UnboxMaster", message: "Opening 10 cases now, wish me luck!", color: "text-purple-400" }, |
|
|
{ user: "LuckyGambler", message: "Hit 10x on crash game, $500 profit!", color: "text-yellow-400" }, |
|
|
{ user: "NewPlayer", message: "How do I deposit skins?", color: "text-gray-400" }, |
|
|
{ user: "SupportBot", message: "Type !help for assistance", color: "text-red-400" } |
|
|
]; |
|
|
|
|
|
const chatContainer = document.querySelector('.chat-container'); |
|
|
|
|
|
chatMessages.forEach(msg => { |
|
|
const messageElement = document.createElement('div'); |
|
|
messageElement.className = 'chat-message mb-2 p-2 rounded'; |
|
|
messageElement.innerHTML = ` |
|
|
<span class="font-bold ${msg.color}">${msg.user}:</span> |
|
|
<span class="text-gray-300">${msg.message}</span> |
|
|
`; |
|
|
chatContainer.appendChild(messageElement); |
|
|
}); |
|
|
|
|
|
|
|
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
|
|
|
|
|
|
|
const unboxingModal = document.getElementById('unboxingModal'); |
|
|
const closeModal = document.getElementById('closeModal'); |
|
|
const openOne = document.getElementById('openOne'); |
|
|
const openTen = document.getElementById('openTen'); |
|
|
const caseImage = document.getElementById('caseImage'); |
|
|
const unboxedItem = document.getElementById('unboxedItem'); |
|
|
const itemImage = document.getElementById('itemImage'); |
|
|
const itemName = document.getElementById('itemName'); |
|
|
const itemValue = document.getElementById('itemValue'); |
|
|
|
|
|
|
|
|
document.querySelectorAll('button:contains("Open")').forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
unboxingModal.classList.remove('hidden'); |
|
|
document.body.style.overflow = 'hidden'; |
|
|
}); |
|
|
}); |
|
|
|
|
|
closeModal.addEventListener('click', () => { |
|
|
unboxingModal.classList.add('hidden'); |
|
|
document.body.style.overflow = 'auto'; |
|
|
unboxedItem.classList.add('hidden'); |
|
|
caseImage.classList.add('unboxing-animation'); |
|
|
}); |
|
|
|
|
|
openOne.addEventListener('click', () => { |
|
|
|
|
|
caseImage.classList.add('unboxing-animation'); |
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
caseImage.classList.remove('unboxing-animation'); |
|
|
|
|
|
|
|
|
const items = [ |
|
|
{ name: "M4A4 | Dragon King", value: "$12.45", image: "https://steamcdn-a.akamaihd.net/apps/730/icons/econ/default_generated/weapon_m4a1_am_dragon_king_light_large.4e7b1c4d2d4c3c6c7e3a6d5d0b1b1a8.png" }, |
|
|
{ name: "AK-47 | Bloodbath", value: "$87.50", image: "https://steamcdn-a.akamaihd.net/apps/252490/icons/econ/rust/skins/ak47/ak47_bloodbath.4e7b1c4d2d4c3c6c7e3a6d5d0b1b1a8.png" }, |
|
|
{ name: "AWP | Lightning Strike", value: "$245.32", image: "https://steamcdn-a.akamaihd.net/apps/730/icons/econ/default_generated/weapon_awp_am_lightning_awp_light_large.4e7b1c4d2d4c3c6c7e3a6d5d0b1b1a8.png" } |
|
|
]; |
|
|
|
|
|
const randomItem = items[Math.floor(Math.random() * items.length)]; |
|
|
|
|
|
itemImage.src = randomItem.image; |
|
|
itemName.textContent = randomItem.name; |
|
|
itemValue.textContent = randomItem.value; |
|
|
|
|
|
unboxedItem.classList.remove('hidden'); |
|
|
}, 2000); |
|
|
}); |
|
|
|
|
|
openTen.addEventListener('click', () => { |
|
|
alert("Opening 10 cases would be implemented here with proper API calls in a real application."); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelector('button:contains("Claim Bonus")').addEventListener('click', () => { |
|
|
alert("Daily bonus claimed! $0.50 has been added to your balance."); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('button:contains("Join Battle")').forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
alert("Joining case battle would be implemented here with proper API calls in a real application."); |
|
|
}); |
|
|
}); |
|
|
</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="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=Ghust68/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
