Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Weapon Tab List #98

Draft
wants to merge 7 commits into
base: main
Choose a base branch
from
Draft

Weapon Tab List #98

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
34005ab
Weapon Tab
exababy Dec 13, 2023
ca5c01e
Create tabs.js
exababy Dec 13, 2023
916cebf
fix f
exababy Dec 13, 2023
d641962
Update style.css
exababy Dec 14, 2023
22b22f1
Knifes > Knives
exababy Dec 15, 2023
3bcaa3f
Update index.php
exababy Dec 15, 2023
c09d5a9
Update style.css
exababy Dec 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 34 additions & 23 deletions website/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,22 +48,33 @@
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="tabs.js"></script>
<title>CS2 Simple Weapon Paints</title>
</head>

<body>

<?php
if (!isset($_SESSION['steamid'])) {
echo "<div class='bg-primary'><h2>To choose weapon paints loadout, you need to ";
loginbutton("rectangle");
echo "</h2></div>";
} else {
echo "<div class='bg-primary'><h2>Your current weapon skin loadout <a class='btn btn-danger' href='{$_SERVER['PHP_SELF']}?logout'>Logout</a></h2> </div>";
echo "<div class='card-group mt-2'>";
if (!isset($_SESSION['steamid'])) {
echo "<div class='bg-primary p-3'><div class='avatar-name'><h2 class='login mb-0'>To choose weapon paints loadout, you need to </h2></div><button class='btn btn-secondary'>"; loginbutton("rectangle"); echo "</button></div>";
} else {
include('steamauth/userInfo.php'); // Include this line to get user information
echo "<div class='bg-primary p-3'><div class='avatar-name'><img src='{$steamprofile['avatarmedium']}'><h2 class='username mb-0'>{$steamprofile['personaname']}</h2></div><form action='' method='get'><button class='btn btn-secondary' name='logout' type='submit'>Logout</button></form></div>";

echo "<div class='centered'><div class=\"tab\">
<button class=\"tablinks\" onclick=\"showCategory('all')\">All</button>
<button class=\"tablinks\" onclick=\"showCategory('tablist1')\">Knives</button>
<button class=\"tablinks\" onclick=\"showCategory('tablist2')\">Pistols</button>
<button class=\"tablinks\" onclick=\"showCategory('tablist3')\">Rifles</button>
<button class=\"tablinks\" onclick=\"showCategory('tablist4')\">SMGs</button>
<button class=\"tablinks\" onclick=\"showCategory('tablist5')\">Machine Guns</button>
<button class=\"tablinks\" onclick=\"showCategory('tablist6')\">Snipers</button>
<button class=\"tablinks\" onclick=\"showCategory('tablist7')\">Shotguns</button>
</div></div>";
echo "<div class='card-group mt-2'>";
?>

<div class="col-sm-2">
<div class="col-sm-2 skinlist knifelist" data-category="knifes">
<div class="card text-center mb-3 border border-primary">
<div class="card-body">
<?php
Expand Down Expand Up @@ -102,7 +113,7 @@

<?php
foreach ($weapons as $defindex => $default) { ?>
<div class="col-sm-2">
<div class="col-sm-2 skinlist" data-defindex="<?php echo $defindex ?>">
<div class="card text-center mb-3">
<div class="card-body">
<?php
Expand Down Expand Up @@ -224,29 +235,29 @@ function showSkinSelectionAlert() {
</div>
<script>
// wear
function updateWearValue<?php echo $defindex ?>(selectedValue) {
var wearInputElement = document.getElementById("wear<?php echo $defindex ?>");
wearInputElement.value = selectedValue;
function updateWearValue < ? php echo $defindex ? > (selectedValue) {
var wearInputElement = document.getElementById("wear<?php echo $defindex ?>");
wearInputElement.value = selectedValue;
}

function validateWear(inputElement) {
inputElement.value = inputElement.value.replace(/[^0-9]/g, '');
inputElement.value = inputElement.value.replace(/[^0-9]/g, '');
}
// seed
function validateSeed(input) {
// Check entered value
var inputValue = input.value.replace(/[^0-9]/g, ''); // Just get the numbers
// Check entered value
var inputValue = input.value.replace(/[^0-9]/g, ''); // Just get the numbers

if (inputValue === "") {
input.value = 0; // Set to 0 if empty or no numbers
} else {
var numericValue = parseInt(inputValue);
numericValue = Math.min(1000, Math.max(1, numericValue)); // Interval control
if (inputValue === "") {
input.value = 0; // Set to 0 if empty or no numbers
} else {
var numericValue = parseInt(inputValue);
numericValue = Math.min(1000, Math.max(1, numericValue)); // Interval control

input.value = numericValue;
}
input.value = numericValue;
}
}
</script>
</script>
<?php } ?>
<?php } ?>
</div>
Expand Down
107 changes: 101 additions & 6 deletions website/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
.bg-primary {
padding: 15px;
}

.card-title item-name{
//text-align:center;
text-align:center;
font-weight:bold;
}

Expand All @@ -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;
}
75 changes: 75 additions & 0 deletions website/tabs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
}
Loading