Merge pull request #80 from OpzekerIT/dev

Rebranding
This commit is contained in:
Lanta 2023-11-03 23:05:00 +01:00 committed by GitHub
commit 2e42b32d44
15 changed files with 256 additions and 116 deletions

View file

@ -6,17 +6,13 @@ error_reporting(E_ALL);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DTCH - PUBG Clan - Clan Stats</title>
<link rel="stylesheet" href="./includes/styles.css">
</head>
<?php include './includes/head.php'; ?>
<body>
<?php include './includes/navigation.php'; ?>
<header>
<img src="./images/banner2.png" alt="banner" class="banner">
</header>
<main>
<section>
<h2>Clan Stats</h2>

BIN
images/banner.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 MiB

BIN
images/banner2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 711 KiB

BIN
images/bannersmaller.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
images/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 MiB

15
includes/head.php Normal file
View file

@ -0,0 +1,15 @@
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DTCH - PUBG Clan</title>
<link rel="stylesheet" href="./includes/styles.css">
<link rel="stylesheet" href="./includes/topnav.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Bungee+Spice&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@400;700&display=swap" rel="stylesheet">
<script src="./lib/sorttable.js"></script>
</head>

View file

@ -2,20 +2,31 @@
$host = $_SERVER['HTTP_HOST'];
if ($host == 'dev.dtch.online') {
echo "You are on the development! <BR>";
echo 'For prod <a href="https://dtch.online">DTCH PRODUCTION</a>';
echo "You are on the development! Site";
}
?>
<div class="topnav">
<a href="index.php" class="active">Home</a>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="clan_stats.php">Clan Stats</a></li>
<li><a href="user_stats.php">User Stats</a></li>
<li><a href="topstats.php">Top10</a></li>
<li><a href="topstatsavg.php">Match % T10</a></li>
<li><a href="latestmatches.php">Last Matches</a></li>
<li><a href="last_stats.php">Last 14 days %</a></li>
</ul>
</nav>
<div id="myLinks">
<a href="clan_stats.php">Clan Stats</a>
<a href="user_stats.php">User Stats</a>
<a href="topstats.php">Top10</a>
<a href="topstatsavg.php">Match % T10</a>
<a href="latestmatches.php">Last Matches</a>
<a href="last_stats.php">Last 14 days %</a>
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>

View file

@ -19,6 +19,7 @@ nav {
background: linear-gradient(to right, #FF416C, #FF4B2B); /* Gradient Background */
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1); /* Slight Shadow for Depth */
padding: 10px 0; /* Vertical Padding */
min-width: 800px;
}
nav ul {
@ -50,11 +51,21 @@ nav a:active {
transform: translateY(1px); /* Slight Pressed-In effect on Click */
}
header .banner {
max-width: 100%; /* Ensures the image is never larger than its container */
max-height: 200px; /* Maximum height for the image */
display: block; /* Prevents inline default spacing */
margin: 0 auto; /* Centers the image within the header */
width: auto; /* Adjusts the width to maintain the aspect ratio */
}
header, main, footer {
max-width: 800px;
margin: 20px auto;
padding: 20px;
border: 1px solid white;
max-width: 1200px;
min-width: 800px;
margin: 5px 5px;
padding: 10px;
border: 1px solid rgb(255, 255, 255);
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
@ -63,6 +74,8 @@ header h1, section h2 {
border-bottom: 1px solid white;
margin-bottom: 10px;
padding-bottom: 5px;
font-family: 'Bungee Spice'
}
footer {
@ -70,9 +83,45 @@ footer {
}
@media (max-width: 600px) {
nav li {
display: block;
margin-right: 0;
th:nth-child(4), td:nth-child(4),
th:nth-child(9), td:nth-child(9) {
display: none;
}
header .banner {
max-height: 100px; /* Resize the maximum height for mobile */
width: 100%; /* Take full width of the container */
}
/* You may also want to adjust other elements to fit mobile layout better */
header, main, footer {
min-width: 0; /* Allow the width to shrink below 800px */
padding: 5px; /* Reduce padding for mobile devices */
margin: 5px 5px; /* Less margin for tighter mobile layout */
max-width: 800px;
min-width: 200px;
}
nav {
min-width: 0; /* Allow the nav to be responsive below 800px */
}
nav ul {
text-align: left; /* Align nav items to the left on mobile for better spacing */
}
th, td {
padding: 0px; /* Reduce padding */
margin: 0px;
font-size: 10px; /* Reduce font size */
letter-spacing: -0.5px; /* Reduce space between letters */
}
/* Other styles can be added here as needed for mobile optimization */
table {
font-size: 12px; /* Decrease font size for the whole table */
margin-top: 5px;
border-spacing: 0;
border-collapse: collapse;
}
}
@ -84,7 +133,7 @@ table {
table, th, td {
border: 1px solid white;
border-radius: 5px;
border-radius: 1px;
}
th, td {
@ -115,29 +164,87 @@ tr:hover {
opacity: 0.8;
}
/* Fancy Button Styles */
/* Hacker theme styles */
body {
font-family: 'Dosis', monospace;
background: #0f0f0f; /* Dark background for hacker aesthetic */
color: #e69109; /* Bright green text, reminiscent of old terminals */
}
/* Ensure elements scale well on mobile */
@media (max-width: 768px) {
body {
font-size: 14px; /* Adjust font size for mobile readability */
}
/* Add additional mobile scaling styles as needed */
}
/* Override other elements as needed for the hacker theme */
nav {
background: #121212; /* Dark background for navigation */
/* border-bottom: 1px solid #33ff33; Bright green border for accent */
}
/* Ensure links stand out */
a {
color: #6699ff; /* Blue color for links */
text-decoration: underline; /* Underline links for better visibility */
}
/* Specific button styles for .btn class to match the hacker theme */
.btn {
display: inline-block;
font-size: 16px;
padding: 12px 20px;
border: none;
border-radius: 25px; /* Rounded Edges */
background: linear-gradient(to right, #FF416C, #FF4B2B); /* Gradient Background */
color: white;
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s; /* Smooth Transition for Hover Effect */
text-align: center;
text-decoration: none; /* In case you use it on anchor tags */
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); /* Slight Shadow */
margin: 10px 0; /* Some Margin for Space */
font-family: 'Courier New', monospace;
background: #222; /* Dark background for buttons */
color: #33ff33; /* Bright green text */
border: 1px solid #33ff33; /* Border to match text color */
padding: 10px 20px;
text-transform: uppercase;
transition: background-color 0.3s ease, color 0.3s ease;
}
.btn:hover {
transform: translateY(-3px); /* Slight Lift on Hover */
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); /* Increased Shadow on Hover */
background: #33ff33; /* Bright green background on hover */
color: #000; /* Dark text on hover */
cursor: pointer;
}
/* Responsive button sizing for mobile for .btn class*/
@media (max-width: 768px) {
.btn {
padding: 8px 16px;
font-size: 14px; /* Adjust font size for mobile readability */
}
}
.btn:active {
transform: translateY(1px); /* Slight Pressed-In effect on Click */
}
/* Container for tables to manage overflow */
.table-container {
overflow-x: auto;
margin: 0 auto; /* Center the table container if necessary */
}
/* Styles for the table */
table {
width: 100%;
max-width: 100%;
table-layout: auto; /* Let the table layout be automatic */
}
/* Ensure table cells do not cause overflow */
td, th {
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Responsive table adjustments */
@media (max-width: 768px) {
table {
font-size: 14px; /* Adjust font size for smaller screens */
}
td, th {
padding: 8px; /* Adjust cell padding for smaller screens */
}
}

42
includes/topnav.css Normal file
View file

@ -0,0 +1,42 @@
/* Style the navigation menu */
.topnav {
overflow: hidden;
background-color: #0f0f0f;
position: relative;
}
/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
display: none;
}
/* Style navigation menu links */
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
/* Style the hamburger menu */
.topnav a.icon {
color: #e69109;
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
/* Add a grey background color on mouse-over */
.topnav a:hover {
background-color: #494949;
color: #ffffff;
}
/* Style the active link (or home/logo) */
.active {
background-color: #0f0f0f;
color: #e69109;
}

View file

@ -24,25 +24,19 @@ $lastMatches = array_slice($allMatches, 0, 8);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DTCH - PUBG Clan</title>
<link rel="stylesheet" href="./includes/styles.css">
</head>
<?php include './includes/head.php'; ?>
<body>
<?php include './includes/navigation.php'; ?>
<header>
<h1>Welcome to DTCH - PUBG Clan </h1>
<img src="./images/banner2.png" alt="banner" class="banner">
</header>
<main>
<section>
<h2>Latest Matches</h2>
<table border="1">
<table>
<thead>
<tr>
<!-- <th>Match Date</th> -->
@ -52,7 +46,6 @@ $lastMatches = array_slice($allMatches, 0, 8);
<th>Map</th>
<th>Kills</th>
<th>Damage</th>
<th>Time Survived</th>
<th>Place</th>
</tr>
</thead>
@ -81,8 +74,7 @@ $lastMatches = array_slice($allMatches, 0, 8);
<td><?php echo $match['matchType']; ?></td>
<td><?php echo isset($mapNames[$match['mapName']]) ? $mapNames[$match['mapName']] : $match['mapName']; ?></td>
<td><?php echo $match['stats']['kills']; ?></td>
<td><?php echo $match['stats']['damageDealt']; ?></td>
<td><?php echo gmdate("H:i:s", $match['stats']['timeSurvived']); ?></td>
<td><?php echo number_format($match['stats']['damageDealt'], 0, '.', ''); ?></td>
<td><?php echo $match['stats']['winPlace']; ?></td>
</tr>
<?php

View file

@ -7,19 +7,14 @@ error_reporting(E_ALL);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DTCH - PUBG Clan - Match Stats</title>
<link rel="stylesheet" href="./includes/styles.css">
<script src="./lib/sorttable.js"></script>
</head>
<?php include './includes/head.php'; ?>
<body>
<?php include './includes/navigation.php'; ?>
<header>
<img src="./images/banner2.png" alt="banner" class="banner">
</header>
<main>
<section>
<h2>Player Stats past 14 days</h2>
@ -34,19 +29,19 @@ error_reporting(E_ALL);
}
echo "<br>";
echo "Stats for $key (minimal 10 matches)";
echo "Stats for $key (minimal 8 matches)";
echo "<table border='1' class='sortable'>";
echo "<tr>
<th>Playername</th>
<th>Win Ratio</th>
<th>K/D (Human)</th>
<th>K/D (All)</th>
<th>Player</th>
<th>Win %</th>
<th>K/D Human</th>
<th>K/D All</th>
<th>Kills</th>
<th>Human Kills</th>
<th>Matches</th>
<th>Mtchs</th>
<th>Wins</th>
<th>Deaths</th>
<th>WinRatio change</th>
<th>Win % change</th>
</tr>";
@ -54,13 +49,13 @@ error_reporting(E_ALL);
if (!isset($player_data['playername']) || is_null($player_data['playername'])) {
continue; // Skip this iteration and move to the next
}
if ($player_data['matches'] < 10){
if ($player_data['matches'] < 8){
continue;
}
$player_name = $player_data['playername'];
$deaths = number_format($player_data['deaths'], 2, ',', '');
$kills = number_format($player_data['kills'], 2, ',', '');
$humankills = number_format($player_data['humankills'], 2, ',', '');
$deaths = number_format($player_data['deaths'], 0, ',', '');
$kills = number_format($player_data['kills'], 0, ',', '');
$humankills = number_format($player_data['humankills'], 0, ',', '');
$matches = $player_data['matches'];
$KD_H =
!isset($player_data['KD_H']) || $player_data['KD_H'] === null
@ -80,7 +75,7 @@ error_reporting(E_ALL);
: (is_numeric($player_data['KD_ALL'])
? number_format((float) $player_data['KD_ALL'], 2, ',', '')
: "0")); // or any other default string for non-numerical values
$wins = number_format($player_data['wins'], 2, ',', '');
$wins = number_format($player_data['wins'], 0, ',', '');
$winratio = number_format($player_data['winratio'], 2, ',', '');
$originalChange = str_replace(',', '.', $player_data['change']); // replace comma with period
$change = floatval($originalChange);

View file

@ -6,18 +6,13 @@ error_reporting(E_ALL);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DTCH - PUBG Clan - Match Stats</title>
<link rel="stylesheet" href="./includes/styles.css">
<script src="./lib/sorttable.js"></script>
</head>
<?php include './includes/head.php'; ?>
<body>
<?php include './includes/navigation.php'; ?>
<header>
<img src="./images/banner2.png" alt="banner" class="banner">
</header>
<main>
<section>
<h2>Match Stats</h2>
@ -60,13 +55,13 @@ error_reporting(E_ALL);
foreach ($player_data['player_matches'] as $match) {
$date = new DateTime($match['createdAt']);
$date->modify('+2 hours');
$formattedDate = $date->format('Y-m-d H:i:s');
$formattedDate = $date->format('m-d H:i:s');
$matchType = $match['matchType'];
$gameMode = $match['gameMode'];
$mapName = isset($mapNames[$match['mapName']]) ? $mapNames[$match['mapName']] : $match['mapName'];
$kills = $match['stats']['kills'];
$damage = $match['stats']['damageDealt'];
$damage = number_format($match['stats']['damageDealt'], 0, '.', '');
$timeSurvived = $match['stats']['timeSurvived'];
$winPlace = $match['stats']['winPlace'];
echo "<tr><td>$formattedDate</td><td>$gameMode</td><td>$matchType</td><td>$mapName</td><td>$kills</td><td>$damage</td><td>$timeSurvived</td><td>$winPlace</td></tr>";

View file

@ -6,17 +6,13 @@ error_reporting(E_ALL);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DTCH - PUBG Clan - User Stats</title>
<link rel="stylesheet" href="./includes/styles.css">
</head>
<?php include './includes/head.php'; ?>
<body>
<?php include './includes/navigation.php'; ?>
<header>
<img src="./images/banner2.png" alt="banner" class="banner">
</header>
<main>
<section>
<h2>User Stats</h2>

View file

@ -6,18 +6,13 @@ error_reporting(E_ALL);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DTCH - PUBG Clan - Average User Stats</title>
<link rel="stylesheet" href="./includes/styles.css">
<script src="./lib/sorttable.js"></script>
</head>
<?php include './includes/head.php'; ?>
<body>
<?php include './includes/navigation.php'; ?>
<header>
<img src="./images/banner2.png" alt="banner" class="banner">
</header>
<main>
<section>
<h2>Average User Stats</h2>

View file

@ -6,17 +6,13 @@ error_reporting(E_ALL);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DTCH - PUBG Clan - User Stats</title>
<link rel="stylesheet" href="./includes/styles.css">
</head>
<?php include './includes/head.php'; ?>
<body>
<?php include './includes/navigation.php'; ?>
<header>
<img src="./images/banner2.png" alt="banner" class="banner">
</header>
<main>
<section>
<h2>User Stats</h2>