From 0e7d4a835649c1c70b22335a7ce52fc50aa558e2 Mon Sep 17 00:00:00 2001 From: Bram Suurd <78373894+BramSuurdje@users.noreply.github.com> Date: Sun, 29 Jun 2025 22:47:04 +0200 Subject: [PATCH] Update index.php and style.css to improve weapon loadout display and browser functionality; added empty loadout message, enhanced filtering and searching capabilities, and revamped CSS for better UI consistency. --- website/index.php | 131 ++++++-- website/style.css | 813 +++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 910 insertions(+), 34 deletions(-) diff --git a/website/index.php b/website/index.php index cb33a477..2ca19a76 100644 --- a/website/index.php +++ b/website/index.php @@ -168,34 +168,59 @@ if (isset($_SESSION['steamid'])) { - - $weapon): ?> -
> -
- - <?php echo $skins[$defindex][$selectedSkins[$defindex]['weapon_paint_id']]['paint_name']; ?> + $selectedSkin): ?> + +
+
+ <?php echo $skins[$defindex][$selectedSkin['weapon_paint_id']]['paint_name']; ?>
- - <?php echo $weapon['paint_name']; ?> -
- -
- -
-
-
-
- +
+
+
+
-
+ + + + +
+
+

No weapons equipped

+

Browse weapons below to equip skins

+
+
+ +
+ + +
+
+

Weapon Browser

+

Click on any weapon to equip a skin

+
+
+ $weapon): ?> +
+
+ <?php echo $weapon['paint_name']; ?> +
+ Equip Skin +
+
+
+
+
+
+
+ +
@@ -306,7 +331,9 @@ if (isset($_SESSION['steamid'])) { function filterWeaponsByCategory(category) { const loadoutItems = document.querySelectorAll('.loadout-item'); + const browserItems = document.querySelectorAll('.browser-item'); + // Filter loadout items loadoutItems.forEach(item => { const weaponId = item.dataset.weaponId; const weaponType = item.dataset.weaponType; @@ -328,22 +355,52 @@ if (isset($_SESSION['steamid'])) { } }); - // Update header + // 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)'; }); - // Reset header + 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) { @@ -358,8 +415,10 @@ if (isset($_SESSION['steamid'])) { } const loadoutItems = document.querySelectorAll('.loadout-item'); + const browserItems = document.querySelectorAll('.browser-item'); const searchTerm = query.toLowerCase(); + // Search loadout items loadoutItems.forEach(item => { const weaponId = item.dataset.weaponId; const weaponType = item.dataset.weaponType; @@ -386,9 +445,33 @@ if (isset($_SESSION['steamid'])) { } }); - // Update header + // 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) { diff --git a/website/style.css b/website/style.css index 43f6cdd4..ad2162a4 100644 --- a/website/style.css +++ b/website/style.css @@ -1,16 +1,809 @@ -.bg-primary { - padding: 15px; +/* Reset and base styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; } -.card-title item-name { - //text-align:center; - font-weight: bold; +:root { + --bg-primary: #1a1a1a; + --bg-secondary: #2a2a2a; + --bg-tertiary: #3a3a3a; + --bg-card: #2d2d2d; + --bg-hover: #404040; + --border-color: #444; + --text-primary: #ffffff; + --text-secondary: #b3b3b3; + --text-muted: #888; + --accent-blue: #4a9eff; + --accent-blue-hover: #357abd; + --accent-orange: #ff6b35; + --accent-green: #4caf50; + --shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); + --border-radius: 8px; + --transition: all 0.2s ease; } -.skin-image { - margin: 0 auto; - display: block; +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background: linear-gradient(135deg, var(--bg-primary) 0%, #1e1e1e 100%); + color: var(--text-primary); + min-height: 100vh; + line-height: 1.6; +} + +/* Login Page */ +.login-container { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + padding: 20px; +} + +.login-card { + background: var(--bg-card); + padding: 40px; + border-radius: var(--border-radius); + box-shadow: var(--shadow-lg); text-align: center; - width: 50%; - //border-bottom: solid 1px #eee; + max-width: 400px; + width: 100%; + border: 1px solid var(--border-color); +} + +.login-card h1 { + margin-bottom: 10px; + color: var(--accent-blue); + font-size: 2.5rem; + font-weight: 700; +} + +.login-card p { + margin-bottom: 30px; + color: var(--text-secondary); + font-size: 1.1rem; +} + +/* App Layout */ +.app-container { + display: flex; + flex-direction: column; + min-height: 100vh; +} + +.app-header { + background: var(--bg-secondary); + padding: 1rem 2rem; + border-bottom: 1px solid var(--border-color); + display: flex; + justify-content: space-between; + align-items: center; + box-shadow: var(--shadow); +} + +.header-left h1 { + color: var(--accent-blue); + font-size: 1.8rem; + font-weight: 700; +} + +.header-right { + display: flex; + align-items: center; + gap: 1rem; +} + +.user-info { + color: var(--text-secondary); + font-size: 0.9rem; +} + +.logout-btn { + background: var(--accent-orange); + color: white; + text-decoration: none; + padding: 0.5rem 1rem; + border-radius: var(--border-radius); + transition: var(--transition); + font-weight: 500; +} + +.logout-btn:hover { + background: #e55a2b; + color: white; + text-decoration: none; +} + +.app-main { + display: flex; + flex: 1; + overflow: hidden; +} + +/* Sidebar */ +.sidebar { + width: 280px; + background: var(--bg-secondary); + border-right: 1px solid var(--border-color); + display: flex; + flex-direction: column; + position: relative; +} + +.sidebar-header { + padding: 1.5rem; + border-bottom: 1px solid var(--border-color); +} + +.sidebar-header h3 { + color: var(--text-primary); + font-size: 1.3rem; + font-weight: 600; + margin-bottom: 1rem; +} + +.search-container { + position: relative; +} + +.search-container input { + width: 100%; + background: var(--bg-tertiary); + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + padding: 0.75rem; + color: var(--text-primary); + font-size: 0.9rem; + transition: var(--transition); +} + +.search-container input:focus { + outline: none; + border-color: var(--accent-blue); + box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.2); +} + +.search-container input::placeholder { + color: var(--text-muted); +} + +.sidebar-nav { + flex: 1; + padding: 1rem 0; +} + +.nav-item { + display: flex; + align-items: center; + padding: 1rem 1.5rem; + cursor: pointer; + transition: var(--transition); + border-left: 3px solid transparent; +} + +.nav-item:hover { + background: var(--bg-hover); + border-left-color: var(--accent-blue); +} + +.nav-item.active { + background: var(--bg-hover); + border-left-color: var(--accent-blue); +} + +.nav-icon { + font-size: 1.2rem; + margin-right: 0.75rem; + width: 24px; + text-align: center; +} + +.nav-content { + flex: 1; + display: flex; + align-items: center; + justify-content: space-between; +} + +.nav-text { + font-weight: 500; + color: var(--text-primary); +} + +.nav-count { + background: var(--bg-tertiary); + color: var(--text-secondary); + font-size: 0.75rem; + padding: 0.2rem 0.5rem; + border-radius: 12px; + font-weight: 600; + min-width: 20px; + text-align: center; +} + +.nav-item.active .nav-count { + background: var(--accent-blue); + color: white; +} + +.nav-arrow { + color: var(--text-muted); + transition: var(--transition); + font-size: 0.8rem; + margin-left: 0.5rem; +} + +/* Main Content */ +.main-content { + flex: 1; + padding: 2rem; + overflow-y: auto; + background: var(--bg-primary); +} + +.loadout-header { + margin-bottom: 2rem; +} + +.loadout-header h2 { + color: var(--text-primary); + font-size: 2rem; + font-weight: 700; + margin-bottom: 0.5rem; +} + +.loadout-header p { + color: var(--text-secondary); + font-size: 1.1rem; +} + +/* Loadout Grid */ +.loadout-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 1.5rem; + max-width: 1200px; +} + +.loadout-item { + background: var(--bg-card); + border-radius: var(--border-radius); + border: 1px solid var(--border-color); + overflow: hidden; + transition: all 0.3s ease; + position: relative; +} + +.loadout-item:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-lg); + border-color: var(--accent-blue); +} + +.item-image-container { + position: relative; + aspect-ratio: 16/10; + background: linear-gradient(145deg, #2a2a2a, #1a1a1a); + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +.item-image { + width: 80%; + height: auto; + object-fit: contain; + transition: var(--transition); +} + +.item-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.8); + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: var(--transition); +} + +.loadout-item:hover .item-overlay { + opacity: 1; +} + +.customize-btn, +.equip-btn { + background: var(--accent-blue); + color: white; + border: none; + padding: 0.75rem 1.5rem; + border-radius: var(--border-radius); + cursor: pointer; + font-weight: 600; + transition: var(--transition); + text-transform: uppercase; + letter-spacing: 0.5px; + font-size: 0.9rem; +} + +.customize-btn:hover, +.equip-btn:hover { + background: var(--accent-blue-hover); + transform: translateY(-1px); +} + +.equip-btn { + background: var(--accent-green); +} + +.equip-btn:hover { + background: #45a049; +} + +.item-info { + padding: 1rem; +} + +.item-category { + color: var(--text-muted); + font-size: 0.8rem; + text-transform: uppercase; + letter-spacing: 1px; + margin-bottom: 0.25rem; + font-weight: 500; +} + +.item-name { + color: var(--text-primary); + font-weight: 600; + font-size: 0.95rem; + line-height: 1.3; +} + +/* Overlays and Modals */ +.overlay, +.modal { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.8); + backdrop-filter: blur(4px); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; + transition: var(--transition); +} + +.overlay.hidden, +.modal.hidden { + opacity: 0; + pointer-events: none; +} + +.overlay-content, +.modal-content { + background: var(--bg-card); + border-radius: var(--border-radius); + border: 1px solid var(--border-color); + box-shadow: var(--shadow-lg); + max-width: 90vw; + max-height: 90vh; + overflow: hidden; + display: flex; + flex-direction: column; +} + +.overlay-content { + width: 900px; + height: 600px; +} + +.modal-content { + width: 500px; +} + +.overlay-header, +.modal-header { + padding: 1.5rem; + border-bottom: 1px solid var(--border-color); + display: flex; + justify-content: space-between; + align-items: center; + background: var(--bg-secondary); +} + +.overlay-header h3, +.modal-header h3 { + color: var(--text-primary); + font-size: 1.4rem; + font-weight: 600; + margin: 0; +} + +.close-btn { + background: none; + border: none; + color: var(--text-muted); + font-size: 1.5rem; + cursor: pointer; + padding: 0.25rem; + line-height: 1; + transition: var(--transition); +} + +.close-btn:hover { + color: var(--text-primary); +} + +/* Skin Grid */ +.skin-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); + gap: 1rem; + padding: 1.5rem; + overflow-y: auto; + flex: 1; +} + +.skin-item { + background: var(--bg-secondary); + border-radius: var(--border-radius); + border: 1px solid var(--border-color); + overflow: hidden; + cursor: pointer; + transition: var(--transition); +} + +.skin-item:hover { + transform: translateY(-2px); + box-shadow: var(--shadow); + border-color: var(--accent-blue); +} + +.skin-item .skin-image { + width: 100%; + height: 120px; + object-fit: contain; + background: linear-gradient(145deg, #333, #222); + padding: 0.5rem; +} + +.skin-name { + padding: 0.75rem; + color: var(--text-primary); + font-weight: 500; + font-size: 0.9rem; + text-align: center; + border-top: 1px solid var(--border-color); +} + +/* Modal Body */ +.modal-body { + padding: 1.5rem; +} + +.customize-grid { + display: grid; + gap: 1.5rem; +} + +.customize-section { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.customize-section label { + color: var(--text-primary); + font-weight: 600; + font-size: 0.9rem; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.customize-section select, +.customize-section input { + background: var(--bg-secondary); + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + padding: 0.75rem; + color: var(--text-primary); + font-size: 1rem; + transition: var(--transition); +} + +.customize-section select:focus, +.customize-section input:focus { + outline: none; + border-color: var(--accent-blue); + box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.2); +} + +.modal-footer { + display: flex; + justify-content: flex-end; + gap: 1rem; + padding: 1.5rem; + border-top: 1px solid var(--border-color); + background: var(--bg-secondary); +} + +.btn { + padding: 0.75rem 1.5rem; + border: none; + border-radius: var(--border-radius); + cursor: pointer; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; + transition: var(--transition); + font-size: 0.9rem; +} + +.btn-primary { + background: var(--accent-blue); + color: white; +} + +.btn-primary:hover { + background: var(--accent-blue-hover); +} + +.btn-secondary { + background: var(--bg-tertiary); + color: var(--text-primary); + border: 1px solid var(--border-color); +} + +.btn-secondary:hover { + background: var(--bg-hover); +} + +/* Responsive Design */ +@media (max-width: 768px) { + .app-main { + flex-direction: column; + } + + .sidebar { + width: 100%; + height: auto; + } + + .main-content { + padding: 1rem; + } + + .loadout-grid { + grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); + gap: 1rem; + } + + .overlay-content { + width: 95vw; + height: 80vh; + } + + .modal-content { + width: 95vw; + } + + .app-header { + flex-direction: column; + gap: 1rem; + text-align: center; + } + + .header-right { + flex-direction: column; + gap: 0.5rem; + } +} + +@media (max-width: 480px) { + .loadout-grid { + grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); + } + + .skin-grid { + grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); + } + + .main-content { + padding: 0.5rem; + } + + .loadout-header h2 { + font-size: 1.5rem; + } +} + +/* Scrollbar Styling */ +::-webkit-scrollbar { + width: 8px; +} + +::-webkit-scrollbar-track { + background: var(--bg-secondary); +} + +::-webkit-scrollbar-thumb { + background: var(--bg-tertiary); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--bg-hover); +} + +/* Animation for loadout items */ +.loadout-item { + animation: fadeInUp 0.3s ease forwards; +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Special styling for equipped items */ +.loadout-item[data-equipped="true"] { + border-color: var(--accent-green); +} + +.loadout-item[data-equipped="true"] .item-category { + color: var(--accent-green); +} + +/* Empty Loadout Message */ +.empty-loadout { + grid-column: 1 / -1; + display: flex; + justify-content: center; + align-items: center; + min-height: 200px; + background: var(--bg-card); + border-radius: var(--border-radius); + border: 2px dashed var(--border-color); +} + +.empty-message { + text-align: center; + color: var(--text-secondary); +} + +.empty-message h3 { + font-size: 1.5rem; + margin-bottom: 0.5rem; + color: var(--text-primary); +} + +.empty-message p { + font-size: 1rem; + color: var(--text-muted); +} + +/* Weapon Browser Section */ +.weapon-browser { + 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 { + color: var(--text-secondary); + font-size: 1rem; +} + +.browser-grid { + display: grid; + 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; + cursor: pointer; + opacity: 0.8; +} + +.browser-item:hover { + transform: translateY(-2px); + box-shadow: var(--shadow); + border-color: var(--accent-blue); + opacity: 1; +} + +.browser-image-container { + position: relative; + aspect-ratio: 16/10; + background: linear-gradient(145deg, #2a2a2a, #1a1a1a); + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +.browser-image { + width: 70%; + height: auto; + object-fit: contain; + transition: var(--transition); +} + +.browser-overlay { + 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; } \ No newline at end of file