Merge pull request #80 from OpzekerIT/dev

Rebranding
2023-11-03 23:05:00 +01:00 · 2023-11-03 23:05:00 +01:00 · 2e42b32d44
commit 2e42b32d44
parent 00532d0c07 3c4e8f3513
15 changed files with 256 additions and 116 deletions
--- a/clan_stats.php
+++ b/clan_stats.php
@ -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>
--- a/images/banner.png
+++ b/images/banner.png
--- a/images/banner2.png
+++ b/images/banner2.png
--- a/images/bannersmaller.png
+++ b/images/bannersmaller.png
--- a/images/logo.png
+++ b/images/logo.png
--- a/includes/head.php
+++ b/includes/head.php
@ -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>
--- a/includes/navigation.php
+++ b/includes/navigation.php
@ -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>
--- a/includes/styles.css
+++ b/includes/styles.css
@ -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 */
+    }
+}
--- a/includes/topnav.css
+++ b/includes/topnav.css
@ -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;
+  }
--- a/index.php
+++ b/index.php
@ -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
--- a/last_stats.php
+++ b/last_stats.php
@ -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);
--- a/latestmatches.php
+++ b/latestmatches.php
@ -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>
@ -56,17 +51,17 @@ error_reporting(E_ALL);
                if (isset($player_data['playername']) && $player_data['playername'] === $selected_player) {
                    echo "<h2>Recent Matches for $selected_player</h2>";
                    echo "<table border='1' class='sortable'>";
-                    echo "<tr><th>Match Date</th><th>Game Mode</th><th>MatchType</th><th>Map</th><th>Kills</th><th>Damage Dealt</th><th>Time Survived</th><th>winPlace</th></tr>";
+                    echo "<tr><th>Match Date</th><th>Game Mode</th><th>Match Type</th><th>Map</th><th>Kills</th><th>Damage Dealt</th><th>Time Survived</th><th>win Place</th></tr>";
                    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>";
--- a/topstats.php
+++ b/topstats.php
@ -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>
--- a/topstatsavg.php
+++ b/topstatsavg.php
@ -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>
--- a/user_stats.php
+++ b/user_stats.php
@ -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>