diff --git a/website/index.php b/website/index.php index 5339448e..2187540e 100644 --- a/website/index.php +++ b/website/index.php @@ -48,22 +48,33 @@ + CS2 Simple Weapon Paints

To choose weapon paints loadout, you need to "; - loginbutton("rectangle"); - echo "

"; - } else { - echo "

Your current weapon skin loadout Logout

"; - echo "
"; +if (!isset($_SESSION['steamid'])) { + echo "
"; +} else { + include('steamauth/userInfo.php'); // Include this line to get user information + echo "

{$steamprofile['personaname']}

"; + + echo "
+ + + + + + + + +
"; + echo "
"; ?> -
+
$default) { ?> -
+
+
diff --git a/website/style.css b/website/style.css index af64ad2f..240a5333 100644 --- a/website/style.css +++ b/website/style.css @@ -1,9 +1,5 @@ -.bg-primary { - padding: 15px; -} - .card-title item-name{ - //text-align:center; + text-align:center; font-weight:bold; } @@ -12,5 +8,104 @@ display:block; text-align:center; width:50%; - //border-bottom: solid 1px #eee; + border-bottom:none; + transition: all 0.5s ease; +} + +.skin-image:hover { + scale: 1.22; +} + +.tabcontent { + display: none; + } + +.tablink { + background-color: #f2f2f2; + border: none; + cursor: pointer; + padding: 10px 20px; + text-decoration: none; +} + +.tablink.active { + background-color: #ccc; +} + +.tab { + display: flex; +} + +.tab button { + background-color: transparent; + border: none; + outline: none; + cursor: pointer; + padding: 20px !important; + transition: color 0.3s, border-bottom 0.3s; + color: white; +} + +.tab button.active { + color: #516395; + border-bottom: 2px solid #516395; +} + +.bg-primary { + background: url('https://pbs.twimg.com/media/FrwcWwpWAAAO-FH.jpg') center/1920px 286px no-repeat !important; + padding: 50px; + text-transform: uppercase; + border-bottom: 1px solid #516395; + height: 120px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.avatar-name { + display: flex; + justify-content: flex-start; + align-items: center; +} + +.avatar-name img { + width: 60px; + height: 60px; + border-radius: 50%; + filter: drop-shadow(0 0 0.400rem rgb(0, 0, 0)); } + +.username { + padding-left: 10px; + color: #E28716; + font-size: 20px; + text-shadow: 2px 2px 3px black; +} + +.login { + padding-left: 10px; + color: #ffffff; + font-size: 20px; + text-shadow: 2px 2px 3px white; +} + +.centered { + text-align: center; + } + +.tab button { + border: none; + outline: none; + padding: 10px 15px; + cursor: pointer; + transition: 0.3s; + } + +.tab button:hover { + background-color: #007bff; + color: #fff; + } + +.tab button.active { + border-bottom: 2px solid #007bff; + } diff --git a/website/tabs.js b/website/tabs.js new file mode 100644 index 00000000..a347824b --- /dev/null +++ b/website/tabs.js @@ -0,0 +1,75 @@ + // tabs + function showTab(tabName) { + var tabs = document.getElementsByClassName('card'); + for (var i = 0; i < tabs.length; i++) { + if (tabs[i].classList.contains(tabName)) { + tabs[i].style.display = 'block'; + } else { + tabs[i].style.display = 'none'; + } + } + } + + function showCategory(category) { + var skins = document.getElementsByClassName('skinlist'); + var tablinks = document.getElementsByClassName('tablinks'); + for (var i = 0; i < skins.length; i++) { + var defindex = skins[i].getAttribute('data-defindex'); + if (category === 'all') { + skins[i].style.display = 'block'; + } else { + var skinCategory = getCategoryByDefindex(defindex); + if (skinCategory === category) { + skins[i].style.display = 'block'; + } else { + skins[i].style.display = 'none'; + } + } + } + + if (category === 'knifes' || category === 'all') { + var defaultKnifeCard = document.querySelector('.knifelist'); + if (defaultKnifeCard) { + defaultKnifeCard.style.display = 'block'; + } + } else { + var defaultKnifeCard = document.querySelector('.knifelist'); + if (defaultKnifeCard) { + defaultKnifeCard.style.display = 'none'; + } + } + + for (var j = 0; j < tablinks.length; j++) { + tablinks[j].classList.remove('active'); + } + + var clickedTab = Array.from(tablinks).find(tab => { + var tabText = tab.textContent.toUpperCase(); + var categoryWords = category.toUpperCase().split(' '); + return categoryWords.every(word => tabText.includes(word)); + }); + + if (clickedTab) { + clickedTab.classList.add('active'); + } + } + + function getCategoryByDefindex(defindex) { + if (defindex >= 500 && defindex <= 525) { + return 'tablist1'; + } else if (defindex >= 1 && defindex <= 4 || defindex >= 30 && defindex <= 32 || defindex == 36 || defindex >= 61 && defindex <= 64) { + return 'tablist2'; + } else if (defindex >= 7 && defindex <= 8 || defindex == 10 || defindex == 13 || defindex == 16 || defindex == 60 || defindex == 39) { + return 'tablist3'; + } else if (defindex == 26 || defindex == 17 || defindex >= 33 && defindex <= 34 || defindex == 19 || defindex >= 23 && defindex <= 24) { + return 'tablist4'; + } else if (defindex == 14 || defindex == 28) { + return 'tablist5'; + } else if (defindex == 9 || defindex == 11 || defindex == 38 || defindex == 40) { + return 'tablist6'; + } else if (defindex == 27 || defindex == 35 || defindex == 29 || defindex == 25) { + return 'tablist7'; + } + + return 'other'; + }