GarpBot/cs2-WeaponPaints
1
0
Fork 0
mirror of https://github.com/Nereziel/cs2-WeaponPaints.git synced 2026-03-10 00:22:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
Bram Suurd
2025-06-29 23:01:02 +02:00
parent 742e753e70
commit dbc8f2ebf8
2 changed files with 170 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files

279
website/index.php
View File

@@ -121,7 +121,8 @@ if (isset($_SESSION['steamid'])) {
} }
} }
?> ?>
<div class="nav-item" data-category="<?php echo strtolower($categoryName); ?>" onclick="toggleCategory('<?php echo strtolower($categoryName); ?>')"> <div class="nav-category">
<div class="nav-item category-header" data-category="<?php echo strtolower($categoryName); ?>" onclick="toggleCategory('<?php echo strtolower($categoryName); ?>')">
<span class="nav-icon"> <span class="nav-icon">
<?php echo $categoryName == 'Knives' ? '🗡️' : ($categoryName == 'Gloves' ? '🧤' : ($categoryName == 'Rifles' ? '🔫' : ($categoryName == 'Pistols' ? '🔫' : ($categoryName == 'SMGs' ? '🔫' : ($categoryName == 'Shotguns' ? '🔫' : ($categoryName == 'Snipers' ? '🎯' : ($categoryName == 'Machine Guns' ? '⚡' : '💣'))))))); ?> <?php echo $categoryName == 'Knives' ? '🗡️' : ($categoryName == 'Gloves' ? '🧤' : ($categoryName == 'Rifles' ? '🔫' : ($categoryName == 'Pistols' ? '🔫' : ($categoryName == 'SMGs' ? '🔫' : ($categoryName == 'Shotguns' ? '🔫' : ($categoryName == 'Snipers' ? '🎯' : ($categoryName == 'Machine Guns' ? '⚡' : '💣'))))))); ?>
</span> </span>
@@ -131,6 +132,29 @@ if (isset($_SESSION['steamid'])) {
</div> </div>
<span class="nav-arrow">▶</span> <span class="nav-arrow">▶</span>
</div> </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>
</div>
<?php endforeach; ?> <?php endforeach; ?>
</nav> </nav>
</aside> </aside>
@@ -193,35 +217,13 @@ if (isset($_SESSION['steamid'])) {
<div class="empty-loadout"> <div class="empty-loadout">
<div class="empty-message"> <div class="empty-message">
<h3>No weapons equipped</h3> <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>
</div> </div>
<?php endif; ?> <?php endif; ?>
</div> </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> </main>
</div> </div>
</div> </div>
@@ -290,188 +292,133 @@ if (isset($_SESSION['steamid'])) {
const knivesData = <?php echo json_encode($knifes); ?>; const knivesData = <?php echo json_encode($knifes); ?>;
const weaponCategories = <?php echo json_encode($weaponCategories); ?>; const weaponCategories = <?php echo json_encode($weaponCategories); ?>;
let currentFilter = 'all';
function toggleCategory(category) { 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 = '▶'; arrow.textContent = '▶';
hideCategoryWeapons(category); categoryHeader.classList.remove('active');
showAllWeapons();
currentFilter = 'all';
} else { } 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 = '▼'; 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 = '▶';
});
// Set active state title.textContent = 'Select Knife Skin';
const navItem = document.querySelector(`[data-category="${category}"]`);
navItem.classList.add('active');
navItem.querySelector('.nav-arrow').textContent = '▼';
}
function hideCategoryWeapons(category) { // Clear previous skins
document.querySelector(`[data-category="${category}"]`).classList.remove('active'); skinGrid.innerHTML = '';
}
function filterWeaponsByCategory(category) { // Populate knife skins (all knife types)
const loadoutItems = document.querySelectorAll('.loadout-item'); Object.entries(knivesData).forEach(([knifeId, knife]) => {
const browserItems = document.querySelectorAll('.browser-item'); if (knifeId != 0) { // Skip default knife
const skinItem = document.createElement('div');
skinItem.className = 'skin-item';
skinItem.onclick = () => equipKnife(knifeId);
// Filter loadout items skinItem.innerHTML = `
loadoutItems.forEach(item => { <img src="${knife.image_url}" alt="${knife.paint_name}" class="skin-image">
const weaponId = item.dataset.weaponId; <div class="skin-name">${knife.paint_name}</div>
const weaponType = item.dataset.weaponType; `;
let shouldShow = false;
if (category === 'knives' && weaponType === 'knife') { skinGrid.appendChild(skinItem);
shouldShow = true;
} else 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.opacity = '0.3';
item.style.transform = 'scale(0.95)';
} }
}); });
// Filter browser items overlay.classList.remove('hidden');
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) { function equipKnife(knifeId) {
item.style.display = 'block'; // Create form and submit
item.style.opacity = '1'; const form = document.createElement('form');
item.style.transform = 'scale(1)'; form.method = 'POST';
} else { form.style.display = 'none';
item.style.display = 'none';
}
});
// Update headers const formaInput = document.createElement('input');
const loadoutHeader = document.querySelector('.loadout-header h2'); formaInput.name = 'forma';
const browserHeader = document.querySelector('.browser-header h2'); formaInput.value = `knife-${knifeId}`;
loadoutHeader.textContent = `${category.charAt(0).toUpperCase() + category.slice(1)} Loadout`;
browserHeader.textContent = `${category.charAt(0).toUpperCase() + category.slice(1)} Browser`;
}
function showAllWeapons() { form.appendChild(formaInput);
const loadoutItems = document.querySelectorAll('.loadout-item'); document.body.appendChild(form);
const browserItems = document.querySelectorAll('.browser-item'); form.submit();
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) { function searchWeapons(query) {
if (!query.trim()) { 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; return;
} }
const loadoutItems = document.querySelectorAll('.loadout-item');
const browserItems = document.querySelectorAll('.browser-item');
const searchTerm = query.toLowerCase(); 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();
}
const matches = weaponName.includes(searchTerm) || skinName.includes(searchTerm);
if (matches) { if (matches) {
item.style.display = 'block'; hasMatchingWeapons = true;
item.style.opacity = '1'; weaponItem.style.display = 'flex';
item.style.transform = 'scale(1)';
} else { } else {
item.style.opacity = '0.3'; weaponItem.style.display = 'none';
item.style.transform = 'scale(0.95)';
} }
}); });
// Search browser items // Show/hide category based on matches
browserItems.forEach(item => { if (categoryMatches || hasMatchingWeapons) {
const weaponId = item.dataset.weaponId; category.style.display = 'block';
let weaponName = ''; if (hasMatchingWeapons) {
let skinName = ''; // Expand the category to show matching weapons
const weaponList = category.querySelector('.weapon-list');
if (weaponId && weaponsData[weaponId]) { const header = category.querySelector('.category-header');
weaponName = weaponsData[weaponId].weapon_name.replace('weapon_', '').toLowerCase(); weaponList.classList.add('expanded');
skinName = item.querySelector('.browser-name').textContent.toLowerCase(); header.classList.add('active');
header.querySelector('.nav-arrow').textContent = '▼';
} }
const matches = weaponName.includes(searchTerm) || skinName.includes(searchTerm);
if (matches) {
item.style.display = 'block';
item.style.opacity = '1';
item.style.transform = 'scale(1)';
} else { } else {
item.style.display = 'none'; category.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) { function showWeaponSkins(weaponId) {

127
website/style.css
View File

@@ -702,112 +702,59 @@ body {
color: var(--text-muted); 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; 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; 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; 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; 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); color: var(--text-primary);
font-weight: 500;
font-size: 0.85rem; font-size: 0.85rem;
line-height: 1.3; font-weight: 500;
} }