Revamp weapon category display in index.php by restructuring HTML for better organization and adding functionality for knife skin selection. Update CSS to enhance sidebar layout and improve weapon list interactions with smooth transitions.

website/index.php

@@ -121,15 +121,39 @@ if (isset($_SESSION['steamid'])) {
 									}
 								}
 							?>
-							<div class="nav-item" data-category="<?php echo strtolower($categoryName); ?>" onclick="toggleCategory('<?php echo strtolower($categoryName); ?>')">
+							<div class="nav-category">
-								<span class="nav-icon">
+								<div class="nav-item category-header" data-category="<?php echo strtolower($categoryName); ?>" onclick="toggleCategory('<?php echo strtolower($categoryName); ?>')">
-									<?php echo $categoryName == 'Knives' ? '🗡️' : ($categoryName == 'Gloves' ? '🧤' : ($categoryName == 'Rifles' ? '🔫' : ($categoryName == 'Pistols' ? '🔫' : ($categoryName == 'SMGs' ? '🔫' : ($categoryName == 'Shotguns' ? '🔫' : ($categoryName == 'Snipers' ? '🎯' : ($categoryName == 'Machine Guns' ? '⚡' : '💣'))))))); ?>
+									<span class="nav-icon">
-								</span>
+										<?php echo $categoryName == 'Knives' ? '🗡️' : ($categoryName == 'Gloves' ? '🧤' : ($categoryName == 'Rifles' ? '🔫' : ($categoryName == 'Pistols' ? '🔫' : ($categoryName == 'SMGs' ? '🔫' : ($categoryName == 'Shotguns' ? '🔫' : ($categoryName == 'Snipers' ? '🎯' : ($categoryName == 'Machine Guns' ? '⚡' : '💣'))))))); ?>
-								<div class="nav-content">
+									</span>
-									<span class="nav-text"><?php echo $categoryName; ?></span>
+									<div class="nav-content">
-									<span class="nav-count"><?php echo $weaponCount; ?></span>
+										<span class="nav-text"><?php echo $categoryName; ?></span>
+										<span class="nav-count"><?php echo $weaponCount; ?></span>
+									</div>
+									<span class="nav-arrow">▶</span>
+								</div>
+								
+								<div class="weapon-list" data-category="<?php echo strtolower($categoryName); ?>">
+									<?php if ($categoryName == 'Knives'): ?>
+										<?php foreach ($knifes as $knifeKey => $knife): ?>
+											<?php if ($knifeKey != 0): ?>
+												<div class="weapon-item" onclick="showKnifeSkins()">
+													<img src="<?php echo $knife['image_url']; ?>" alt="<?php echo $knife['paint_name']; ?>" class="weapon-icon">
+													<span class="weapon-name"><?php echo $knife['paint_name']; ?></span>
+												</div>
+											<?php endif; ?>
+										<?php endforeach; ?>
+									<?php else: ?>
+										<?php foreach ($categoryWeapons as $weaponDefindex): ?>
+											<?php if (isset($weapons[$weaponDefindex])): ?>
+												<div class="weapon-item" onclick="showWeaponSkins(<?php echo $weaponDefindex; ?>)">
+													<img src="<?php echo $weapons[$weaponDefindex]['image_url']; ?>" alt="<?php echo $weapons[$weaponDefindex]['paint_name']; ?>" class="weapon-icon">
+													<span class="weapon-name"><?php echo ucfirst(strtolower(str_replace('weapon_', '', $weapons[$weaponDefindex]['weapon_name']))); ?></span>
+												</div>
+											<?php endif; ?>
+										<?php endforeach; ?>
+									<?php endif; ?>
 								</div>
-								<span class="nav-arrow">▶</span>
 							</div>
 						<?php endforeach; ?>
 					</nav>
@@ -193,35 +217,13 @@ if (isset($_SESSION['steamid'])) {
 							<div class="empty-loadout">
 								<div class="empty-message">
 									<h3>No weapons equipped</h3>
-									<p>Browse weapons below to equip skins</p>
+									<p>Browse weapons in the sidebar to equip skins</p>
 								</div>
 							</div>
 						<?php endif; ?>
 					</div>
 
-					<!-- Weapon Browser Section -->
+
-					<div class="weapon-browser">
-						<div class="browser-header">
-							<h2>Weapon Browser</h2>
-							<p>Click on any weapon to equip a skin</p>
-						</div>
-						<div class="browser-grid" id="weaponBrowser">
-							<?php foreach ($weapons as $defindex => $weapon): ?>
-								<div class="browser-item" data-weapon-id="<?php echo $defindex; ?>" onclick="showWeaponSkins(<?php echo $defindex; ?>)">
-									<div class="browser-image-container">
-										<img src="<?php echo $weapon['image_url']; ?>" alt="<?php echo $weapon['paint_name']; ?>" class="browser-image">
-										<div class="browser-overlay">
-											<span class="equip-text">Equip Skin</span>
-										</div>
-									</div>
-									<div class="browser-info">
-										<div class="browser-category"><?php echo ucfirst(strtolower(str_replace('weapon_', '', $weapon['weapon_name']))); ?></div>
-										<div class="browser-name"><?php echo $weapon['paint_name']; ?></div>
-									</div>
-								</div>
-							<?php endforeach; ?>
-						</div>
-					</div>
 				</main>
 			</div>
 		</div>
@@ -290,188 +292,133 @@ if (isset($_SESSION['steamid'])) {
 			const knivesData = <?php echo json_encode($knifes); ?>;
 			const weaponCategories = <?php echo json_encode($weaponCategories); ?>;
 
-			let currentFilter = 'all';
+
 
 			function toggleCategory(category) {
-				const navItem = document.querySelector(`[data-category="${category}"]`);
+				const categoryHeader = document.querySelector(`.category-header[data-category="${category}"]`);
-				const arrow = navItem.querySelector('.nav-arrow');
+				const weaponList = document.querySelector(`.weapon-list[data-category="${category}"]`);
+				const arrow = categoryHeader.querySelector('.nav-arrow');
 				
-				// Check if already active
+				// Toggle the weapon list
-				if (navItem.classList.contains('active')) {
+				if (weaponList.classList.contains('expanded')) {
-					// Deactivate and show all
+					// Collapse
+					weaponList.classList.remove('expanded');
 					arrow.textContent = '▶';
-					hideCategoryWeapons(category);
+					categoryHeader.classList.remove('active');
-					showAllWeapons();
-					currentFilter = 'all';
 				} else {
-					// Activate and filter
+					// Collapse all other categories first
+					document.querySelectorAll('.weapon-list').forEach(list => {
+						list.classList.remove('expanded');
+					});
+					document.querySelectorAll('.category-header').forEach(header => {
+						header.classList.remove('active');
+						header.querySelector('.nav-arrow').textContent = '▶';
+					});
+					
+					// Expand this category
+					weaponList.classList.add('expanded');
 					arrow.textContent = '▼';
-					showCategoryWeapons(category);
+					categoryHeader.classList.add('active');
-					filterWeaponsByCategory(category);
-					currentFilter = category;
 				}
 			}
 
-			function showCategoryWeapons(category) {
+			function showKnifeSkins() {
-				// Clear all active states
+				const overlay = document.getElementById('skinSelectionOverlay');
-				document.querySelectorAll('.nav-item').forEach(item => {
+				const title = document.getElementById('overlayTitle');
-					item.classList.remove('active');
+				const skinGrid = document.getElementById('skinGrid');
-					item.querySelector('.nav-arrow').textContent = '▶';
+
-				});
+				title.textContent = 'Select Knife Skin';
 				
-				// Set active state
+				// Clear previous skins
-				const navItem = document.querySelector(`[data-category="${category}"]`);
+				skinGrid.innerHTML = '';
-				navItem.classList.add('active');
+
-				navItem.querySelector('.nav-arrow').textContent = '▼';
+				// Populate knife skins (all knife types)
+				Object.entries(knivesData).forEach(([knifeId, knife]) => {
+					if (knifeId != 0) { // Skip default knife
+						const skinItem = document.createElement('div');
+						skinItem.className = 'skin-item';
+						skinItem.onclick = () => equipKnife(knifeId);
+						
+						skinItem.innerHTML = `
+							<img src="${knife.image_url}" alt="${knife.paint_name}" class="skin-image">
+							<div class="skin-name">${knife.paint_name}</div>
+						`;
+						
+						skinGrid.appendChild(skinItem);
+					}
+				});
+
+				overlay.classList.remove('hidden');
 			}
 
-			function hideCategoryWeapons(category) {
+			function equipKnife(knifeId) {
-				document.querySelector(`[data-category="${category}"]`).classList.remove('active');
+				// Create form and submit
-			}
+				const form = document.createElement('form');
+				form.method = 'POST';
+				form.style.display = 'none';
 
-			function filterWeaponsByCategory(category) {
+				const formaInput = document.createElement('input');
-				const loadoutItems = document.querySelectorAll('.loadout-item');
+				formaInput.name = 'forma';
-				const browserItems = document.querySelectorAll('.browser-item');
+				formaInput.value = `knife-${knifeId}`;
-				
-				// Filter loadout items
-				loadoutItems.forEach(item => {
-					const weaponId = item.dataset.weaponId;
-					const weaponType = item.dataset.weaponType;
-					let shouldShow = false;
 
-					if (category === 'knives' && weaponType === 'knife') {
+				form.appendChild(formaInput);
-						shouldShow = true;
+				document.body.appendChild(form);
-					} else if (category !== 'knives' && weaponId && weaponCategories[category.charAt(0).toUpperCase() + category.slice(1)]) {
+				form.submit();
-						shouldShow = weaponCategories[category.charAt(0).toUpperCase() + category.slice(1)].includes(parseInt(weaponId));
-					}
-
-					if (shouldShow) {
-						item.style.display = 'block';
-						item.style.opacity = '1';
-						item.style.transform = 'scale(1)';
-					} else {
-						item.style.opacity = '0.3';
-						item.style.transform = 'scale(0.95)';
-					}
-				});
-
-				// Filter browser items
-				browserItems.forEach(item => {
-					const weaponId = item.dataset.weaponId;
-					let shouldShow = false;
-
-					if (category !== 'knives' && weaponId && weaponCategories[category.charAt(0).toUpperCase() + category.slice(1)]) {
-						shouldShow = weaponCategories[category.charAt(0).toUpperCase() + category.slice(1)].includes(parseInt(weaponId));
-					}
-
-					if (shouldShow) {
-						item.style.display = 'block';
-						item.style.opacity = '1';
-						item.style.transform = 'scale(1)';
-					} else {
-						item.style.display = 'none';
-					}
-				});
-
-				// Update headers
-				const loadoutHeader = document.querySelector('.loadout-header h2');
-				const browserHeader = document.querySelector('.browser-header h2');
-				loadoutHeader.textContent = `${category.charAt(0).toUpperCase() + category.slice(1)} Loadout`;
-				browserHeader.textContent = `${category.charAt(0).toUpperCase() + category.slice(1)} Browser`;
-			}
-
-			function showAllWeapons() {
-				const loadoutItems = document.querySelectorAll('.loadout-item');
-				const browserItems = document.querySelectorAll('.browser-item');
-				
-				loadoutItems.forEach(item => {
-					item.style.display = 'block';
-					item.style.opacity = '1';
-					item.style.transform = 'scale(1)';
-				});
-
-				browserItems.forEach(item => {
-					item.style.display = 'block';
-					item.style.opacity = '1';
-					item.style.transform = 'scale(1)';
-				});
-
-				// Reset headers
-				const loadoutHeader = document.querySelector('.loadout-header h2');
-				const browserHeader = document.querySelector('.browser-header h2');
-				loadoutHeader.textContent = 'Current Loadout';
-				browserHeader.textContent = 'Weapon Browser';
 			}
 
 			function searchWeapons(query) {
 				if (!query.trim()) {
-					// If search is empty, apply current filter or show all
+					// Reset search - show all categories and hide all weapon lists
-					if (currentFilter === 'all') {
+					document.querySelectorAll('.nav-category').forEach(category => {
-						showAllWeapons();
+						category.style.display = 'block';
-					} else {
+					});
-						filterWeaponsByCategory(currentFilter);
+					document.querySelectorAll('.weapon-list').forEach(list => {
-					}
+						list.classList.remove('expanded');
+					});
+					document.querySelectorAll('.category-header').forEach(header => {
+						header.classList.remove('active');
+						header.querySelector('.nav-arrow').textContent = '▶';
+					});
 					return;
 				}
 
-				const loadoutItems = document.querySelectorAll('.loadout-item');
-				const browserItems = document.querySelectorAll('.browser-item');
 				const searchTerm = query.toLowerCase();
 
-				// Search loadout items
+				// Search through categories and weapons
-				loadoutItems.forEach(item => {
+				document.querySelectorAll('.nav-category').forEach(category => {
-					const weaponId = item.dataset.weaponId;
+					const categoryName = category.querySelector('.nav-text').textContent.toLowerCase();
-					const weaponType = item.dataset.weaponType;
+					const weaponItems = category.querySelectorAll('.weapon-item');
-					let weaponName = '';
+					let categoryMatches = categoryName.includes(searchTerm);
-					let skinName = '';
+					let hasMatchingWeapons = false;
 
-					if (weaponType === 'knife') {
+					// Check if any weapons in this category match
-						weaponName = 'knife';
+					weaponItems.forEach(weaponItem => {
-						skinName = item.querySelector('.item-name').textContent.toLowerCase();
+						const weaponName = weaponItem.querySelector('.weapon-name').textContent.toLowerCase();
-					} else if (weaponId && weaponsData[weaponId]) {
+						const matches = weaponName.includes(searchTerm);
-						weaponName = weaponsData[weaponId].weapon_name.replace('weapon_', '').toLowerCase();
+						
-						skinName = item.querySelector('.item-name').textContent.toLowerCase();
+						if (matches) {
-					}
+							hasMatchingWeapons = true;
+							weaponItem.style.display = 'flex';
+						} else {
+							weaponItem.style.display = 'none';
+						}
+					});
 
-					const matches = weaponName.includes(searchTerm) || skinName.includes(searchTerm);
+					// Show/hide category based on matches
-
+					if (categoryMatches || hasMatchingWeapons) {
-					if (matches) {
+						category.style.display = 'block';
-						item.style.display = 'block';
+						if (hasMatchingWeapons) {
-						item.style.opacity = '1';
+							// Expand the category to show matching weapons
-						item.style.transform = 'scale(1)';
+							const weaponList = category.querySelector('.weapon-list');
+							const header = category.querySelector('.category-header');
+							weaponList.classList.add('expanded');
+							header.classList.add('active');
+							header.querySelector('.nav-arrow').textContent = '▼';
+						}
 					} else {
-						item.style.opacity = '0.3';
+						category.style.display = 'none';
-						item.style.transform = 'scale(0.95)';
 					}
 				});
-
-				// Search browser items
-				browserItems.forEach(item => {
-					const weaponId = item.dataset.weaponId;
-					let weaponName = '';
-					let skinName = '';
-
-					if (weaponId && weaponsData[weaponId]) {
-						weaponName = weaponsData[weaponId].weapon_name.replace('weapon_', '').toLowerCase();
-						skinName = item.querySelector('.browser-name').textContent.toLowerCase();
-					}
-
-					const matches = weaponName.includes(searchTerm) || skinName.includes(searchTerm);
-
-					if (matches) {
-						item.style.display = 'block';
-						item.style.opacity = '1';
-						item.style.transform = 'scale(1)';
-					} else {
-						item.style.display = 'none';
-					}
-				});
-
-				// Update headers
-				const loadoutHeader = document.querySelector('.loadout-header h2');
-				const browserHeader = document.querySelector('.browser-header h2');
-				loadoutHeader.textContent = `Search Results: "${query}"`;
-				browserHeader.textContent = `Search Results: "${query}"`;
 			}
 
 			function showWeaponSkins(weaponId) {

website/style.css

@@ -702,112 +702,59 @@ body {
 	color: var(--text-muted);
 }
 
-/* Weapon Browser Section */
+/* Sidebar Weapon Lists */
-.weapon-browser {
+.nav-category {
-	margin-top: 3rem;
-	padding-top: 2rem;
-	border-top: 1px solid var(--border-color);
-}
-
-.browser-header {
-	margin-bottom: 2rem;
-}
-
-.browser-header h2 {
-	color: var(--text-primary);
-	font-size: 1.8rem;
-	font-weight: 700;
 	margin-bottom: 0.5rem;
 }
 
-.browser-header p {
+.category-header {
-	color: var(--text-secondary);
+	margin-bottom: 0 !important;
-	font-size: 1rem;
 }
 
-.browser-grid {
+.weapon-list {
-	display: grid;
+	max-height: 0;
-	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-	gap: 1rem;
-	max-width: 1200px;
-}
-
-.browser-item {
-	background: var(--bg-card);
-	border-radius: var(--border-radius);
-	border: 1px solid var(--border-color);
 	overflow: hidden;
-	transition: all 0.3s ease;
+	transition: max-height 0.3s ease;
+	background: var(--bg-tertiary);
+	border-left: 3px solid var(--accent-blue);
+	margin-left: 1rem;
+}
+
+.weapon-list.expanded {
+	max-height: 500px;
+	padding: 0.5rem 0;
+}
+
+.weapon-item {
+	display: flex;
+	align-items: center;
+	padding: 0.75rem 1rem;
 	cursor: pointer;
-	opacity: 0.8;
+	transition: var(--transition);
+	border-bottom: 1px solid var(--border-color);
 }
 
-.browser-item:hover {
+.weapon-item:last-child {
-	transform: translateY(-2px);
+	border-bottom: none;
-	box-shadow: var(--shadow);
-	border-color: var(--accent-blue);
-	opacity: 1;
 }
 
-.browser-image-container {
+.weapon-item:hover {
-	position: relative;
+	background: var(--bg-hover);
-	aspect-ratio: 16/10;
+	padding-left: 1.25rem;
-	background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	overflow: hidden;
 }
 
-.browser-image {
+.weapon-icon {
-	width: 70%;
+	width: 32px;
-	height: auto;
+	height: 20px;
 	object-fit: contain;
-	transition: var(--transition);
+	margin-right: 0.75rem;
+	background: linear-gradient(145deg, #333, #222);
+	border-radius: 4px;
+	padding: 2px;
 }
 
-.browser-overlay {
+.weapon-name {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	background: rgba(0, 0, 0, 0.7);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	opacity: 0;
-	transition: var(--transition);
-}
-
-.browser-item:hover .browser-overlay {
-	opacity: 1;
-}
-
-.equip-text {
-	color: white;
-	font-weight: 600;
-	text-transform: uppercase;
-	letter-spacing: 0.5px;
-	font-size: 0.9rem;
-}
-
-.browser-info {
-	padding: 0.75rem;
-}
-
-.browser-category {
-	color: var(--text-muted);
-	font-size: 0.7rem;
-	text-transform: uppercase;
-	letter-spacing: 1px;
-	margin-bottom: 0.25rem;
-	font-weight: 500;
-}
-
-.browser-name {
 	color: var(--text-primary);
-	font-weight: 500;
 	font-size: 0.85rem;
-	line-height: 1.3;
+	font-weight: 500;
 }