Hugging Face's logo

Spaces:
Ghust68
/
test
Running

App Files Community
test / index.html
Ghust68's picture
Ghust68
Add 3 files
26ddc4f verified
raw
history blame contribute delete
42.1 kB
 <!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>
/* Custom CSS for elements that need more specific styling */
.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">
<!-- Navigation Bar -->
<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">
<!-- Logo and main nav -->
<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>
<!-- Right side: balance and user -->
<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>
<!-- Dropdown menu -->
<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>
<!-- Mobile menu button -->
<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>
<!-- Mobile menu -->
<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>
<!-- Main Content -->
<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">
<!-- Left column (main content) -->
<div class="w-full lg:w-3/4">
<!-- Featured Cases Section -->
<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">
<!-- Case 1 -->
<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>
<!-- Case 2 -->
<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>
<!-- Case 3 -->
<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>
<!-- Case 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_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>
<!-- Game Modes 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">
<!-- Game Mode 1 -->
<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>
<!-- Game Mode 2 -->
<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>
<!-- Game Mode 3 -->
<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>
<!-- Game Mode 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-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>
<!-- Recent Wins 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>
<!-- Right column (sidebar) -->
<div class="w-full lg:w-1/4">
<!-- User Stats Card -->
<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>
<!-- Daily Bonus Card -->
<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>
<!-- Live Case Battles -->
<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>
<!-- Chat Section -->
<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">
<!-- Chat messages will be added here by JavaScript -->
</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 -->
<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">support@unboxpro.com</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>
<!-- Unboxing Modal (hidden by default) -->
<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>
// Mobile menu toggle
const mobileMenuButton = document.querySelector('.mobile-menu-button');
const mobileMenu = document.querySelector('.mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// User dropdown toggle
const userDropdown = document.querySelector('.relative');
userDropdown.addEventListener('click', () => {
const dropdownMenu = userDropdown.querySelector('.hidden');
dropdownMenu.classList.toggle('hidden');
});
// Chat messages (simulated)
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);
});
// Scroll chat to bottom
chatContainer.scrollTop = chatContainer.scrollHeight;
// Unboxing modal functionality
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');
// Sample case open buttons (would normally be attached to each case)
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', () => {
// Simulate unboxing animation
caseImage.classList.add('unboxing-animation');
setTimeout(() => {
// After animation, show result
caseImage.classList.remove('unboxing-animation');
// Random item for demo
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.");
});
// Claim daily bonus
document.querySelector('button:contains("Claim Bonus")').addEventListener('click', () => {
alert("Daily bonus claimed! $0.50 has been added to your balance.");
});
// Join case battle
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>