Fretux/anomaly-front-stats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update UI, improve navigation, and refine About Us content

Browse Source
This commit is contained in:
IM23a-spirgif
2025-05-17 18:01:01 +02:00
parent 5c3bf73563
commit 6202b5394d
5 changed files with 204 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/filterTable.js
-1
View File
@@ -3,7 +3,6 @@ function filterTable() {
const filter = input.value.toLowerCase();
const table = document.getElementById('gun-stats');
const tr = table.getElementsByTagName('tr');
for (let i = 1; i < tr.length; i++) {
const td = tr[i].getElementsByTagName('td')[1];
if (td) {
static/style.css
+8 -15
View File
@@ -24,7 +24,7 @@ input[type="text"] {
}
body {
background-image: url("/static/img/trlbg1.jpg");
background-image: url("/trlstats/static/img/trlbg1.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
@@ -39,14 +39,14 @@ header nav {
}
header nav a {
color: #4CAF50;
color: red;
text-decoration: none;
font-weight: bold;
padding: 10px 20px;
}
header nav a:hover {
color: gray;
color: red;
}
h1 {
@@ -85,14 +85,14 @@ th {
button {
padding: 5px 10px;
background-color: #4CAF50;
background-color: red;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
background-color: red;
}
input {
@@ -318,7 +318,7 @@ textarea {
/* Button hover effect */
.button1:hover {
background-color: #45a049;
background-color: red;
transform: scale(1.05);
}
@@ -330,7 +330,6 @@ textarea {
margin-top: 20px;
}
/* Adjustments for mobile responsiveness */
@media screen and (max-width: 600px) {
input[type="text"], input[type="number"], textarea {
width: 80%;
@@ -342,14 +341,13 @@ textarea {
}
#modifiers {
width: 100%; /* Adjust this percentage to control the width */
width: 100%;
}
#abilities {
width: 100%;
}
/* Adjust spacing between different ability modifiers */
#abilities label {
display: block;
margin-bottom: 10px;
@@ -357,13 +355,11 @@ textarea {
white-space: nowrap;
}
/* Optional: Adjust margin between checkbox and text */
#abilities input[type="checkbox"] {
margin-right: 5px;
}
}
/* Styling for horizontal table */
.weapon-stats-table {
width: 100%;
border-collapse: collapse;
@@ -373,7 +369,7 @@ textarea {
.weapon-stats-table th, .weapon-stats-table td {
border: 1px solid #ddd;
padding: 8px;
text-align: center; /* Centers the text */
text-align: center;
}
.weapon-stats-table th {
@@ -459,9 +455,6 @@ textarea {
font-size: 1.1rem;
font-weight: 500;
}
.nav-menu a:hover {
color: #4CAF50;
}
.nav-menu.active {
right: 0;
templates/about_us.html
+176 -65
View File
@@ -1,14 +1,111 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="/static/img/TRL_Logo_Custom.jpg">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<title>About Us</title>
<script>
</script>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>About Us - TRL Stats</title>
<link rel="icon" type="image/x-icon" href="/trlstats/static/img/TRL_Logo_Custom.jpg"/>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"/>
<style>
main {
background-color: rgba(255, 255, 255, 0.92);
margin: 8vh auto;
padding: 40px;
border-radius: 12px;
width: 90%;
max-width: 900px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
h1 {
text-align: center;
font-size: 3rem;
margin-bottom: 1.5rem;
color: #111;
}
h2 {
margin-top: 2rem;
color: #222;
font-size: 1.8rem;
border-left: 5px solid red;
padding-left: 12px;
}
h3 {
font-size: 1.3rem;
margin-top: 1.5rem;
color: #333;
}
.about_us_text {
font-size: 1.05rem;
line-height: 1.7;
margin-top: 1rem;
color: #444;
}
.highlight {
font-weight: bold;
color: #d32f2f;
}
a {
color: red;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.team-section {
display: flex;
flex-direction: column;
gap: 1rem;
}
.team-member {
background-color: #f7f7f7;
padding: 15px 20px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.thanks-section {
background-color: #fff;
padding: 20px;
border-left: 4px solid red;
border-radius: 6px;
margin-top: 1.5rem;
}
.faq p {
margin-top: 0.5rem;
}
/* Responsive */
@media screen and (max-width: 600px) {
main {
padding: 25px;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.5rem;
}
.about_us_text {
font-size: 0.95rem;
}
}
</style>
</head>
<body>
<header>
<nav>
<button class="hamburger" aria-label="Toggle menu">
@@ -21,75 +118,89 @@
<a href="{{ url_for('about_us') }}">ABOUT US</a>
<a href="{{ url_for('suggestion') }}">SUGGESTIONS & FEEDBACK</a>
<a href="https://www.roblox.com/games/5766084948/SCP-The-Red-Lake-EVENT">PLAY THE RED LAKE</a>
<a href="https://discord.gg/2jDevH8aTd">OUR DISCORD</a>
</div>
</nav>
</header>
<body class="background-image">
<main>
<h1>About Us</h1>
<h3><b>Hey there!</b> You seem to have stumbled upon the TRL Stat Page created by <b>Fretux</b> and
<b>Losernoob124!</b></h3><br>
<h3><b>Hey there!</b> You found the TRL Stats Page by <b>Fretux</b> and <b>Losernoob124</b> 🎯</h3>
<h2>Our Mission</h2>
<p class="about_us_text">This website exists because we want to provide the
TRL Community with an easy go-to way to calculate DPS and DPM values to help players make informed decisions
about their gameplay. Whether you're fine-tuning your new Deathwish Strategy or simply curious about firearm
performance, we’ve got you covered. If you have suggestions, feedback, or want to contribute new stats or
features, we’d love to hear from you, just contact us on Discord or on the <a
href="{{ url_for('suggestion') }}">Suggestion Page!</a>
<p class="about_us_text">
We created this platform to help the TRL community quickly and easily calculate gun DPS and DPM — no
spreadsheets, no hassle. Whether you're theorycrafting a Deathwish loadout or comparing your sidearms, our
tool’s built to support your grind.
</p>
<p class="about_us_text">
Got ideas or stat suggestions? Hit us up on Discord or submit feedback via our <a
href="{{ url_for('suggestion') }}">Suggestions Page</a>.
</p>
<h2>Our Story</h2>
<p class="about_us_text">
In the beginning, the only way to calculate DPS/DPM stats for certain operatives was, by using the Spreadsheet
by Lanz1021 and a calculator, which quickly turned out to be (shockers) really annoying. TRL Stats started out
as a side project, initially started by Losernoob124 to calculate gun stats more easily, but given up one after
a couple of weeks. Eventually Fretux started working on it again and what initially was just a fun hobby grew
into something much bigger, and through the help of Stack Overflow and many hours of programming, we
turned it into a full-fledged website.
It started with a spreadsheet... and frustration. Calculating DPS manually was tedious — and we knew we could do
better. What began as a side hobby by Losernoob124 was reignited by Fretux and evolved into a full web app
through plenty of bug fixing, community help, and caffeine.
</p>
<h2>The Team</h2>
<p class="about_us_text">
<b>Fretux</b> - Frontend Developer and Data Specialist. Responsible for the designing of the website and making
sure the gun stats are accurate and up to date.
</p>
<p class="about_us_text">
<b>Losernoob124</b> - Backend Developer. Responsible for all the scripts that make sure the website functions
correctly.
</p>
<h2>Frequently Asked Questions</h2>
<p class="about_us_text"><b>How do you calculate DPS and DPM?</b></p>
<p class="about_us_text">We put the data given by
<a href="https://docs.google.com/spreadsheets/d/1hGGLMOKB5Tj3FSo38HX7WbIvOmMbgfE5ZApTSOZgnS8/edit?gid=0#gid=0">Lanz1021's
Stat Sheet</a> into a <a href="https://www.w3schools.com/whatis/whatis_json.asp">.JSON (Javascript Object
Notation)</a> file, which we use to calculate the DPS
(damage per second) and DPM (damage per minute) of each weapon via a formula that is also mentioned on Lanz1021'
Spreadsheet.</p>
<p class="about_us_text"><b>How often are stats updated?</b></p>
<p class="about_us_text">We update the weapon stats every time a new update is released for TRL.</p>
<h2>Special Thanks</h2>
<p class="about_us_text">
<b>gameknight90999(holdenn/holdenisch)</b>: For supporting us with various informations, helping us add some unmentioned Balance Changes and overall supporting us all the way through development.<br>
<b>Kris HD(krishd1337)</b>: For the motivation and help with finding bugs.<br>
<b>Lanz1021</b>: For reviewing and giving feedback.<br>
<b>AND YOU!</b>: We are thankful for every visitor we get on this website, and we hope you're enjoying it!
</p>
<h3 class="about_us_text">Thank you for visiting <b>TRL Stats</b>.</h3>
<script>
const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('active');
navMenu.classList.toggle('active');
document.body.classList.toggle('menu-open');
});
navMenu.querySelectorAll('a').forEach(link =>
link.addEventListener('click', () => {
hamburger.classList.remove('active');
navMenu.classList.remove('active');
document.body.classList.remove('menu-open');
})
);
</script>
<h2>The Team</h2>
<div class="team-section">
<div class="team-member">
<b>Fretux</b> – Frontend Developer & Data Specialist. Designs the UI and ensures stat accuracy.
</div>
<div class="team-member">
<b>Losernoob124</b> – Backend Developer. Handles everything under the hood and makes sure the calculators
work.
</div>
</div>
<h2>Frequently Asked Questions</h2>
<div class="faq">
<p><b>How do you calculate DPS and DPM?</b></p>
<p class="about_us_text">
We use data from <a
href="https://docs.google.com/spreadsheets/d/1hGGLMOKB5Tj3FSo38HX7WbIvOmMbgfE5ZApTSOZgnS8/edit?gid=0#gid=0"
target="_blank">Lanz1021's Stat Sheet</a>, convert it into a JSON structure, and use it with formulas
similar to what’s on the sheet.
</p>
<p><b>How often are stats updated?</b></p>
<p class="about_us_text">
We update our database every time TRL releases a gameplay patch or changes weapon stats.
</p>
</div>
<h2>Special Thanks 🙏</h2>
<div class="thanks-section">
<p><b>gameknight90999 (holdenn)</b>: Helped with various stat and weapon data and ideas</p>
<p><b>Kris HD</b>: Motivation + bug hunting</p>
<p><b>Lanz1021</b>: Feedback & review</p>
<p><b>YOU</b>: For visiting — thank you!</p>
</div>
<h3 class="about_us_text" style="text-align: center; margin-top: 2rem;">
Thanks for using <b>TRL Stats</b> 💚
</h3>
</main>
<script>
const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('active');
navMenu.classList.toggle('active');
document.body.classList.toggle('menu-open');
});
navMenu.querySelectorAll('a').forEach(link =>
link.addEventListener('click', () => {
hamburger.classList.remove('active');
navMenu.classList.remove('active');
document.body.classList.remove('menu-open');
})
);
</script>
</body>
</html>
templates/calculator.html
+19 -28
View File
@@ -6,23 +6,6 @@
<link rel="icon" type="image/x-icon" href="/static/img/TRL_Logo_Custom.jpg">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<title>DPM/DPS Calculator</title>
<script>
// Collapsible functionality for perks, buffs, etc.
document.addEventListener('DOMContentLoaded', function () {
var coll = document.getElementsByClassName("collapsible-header");
for (var i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function () {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
});
</script>
</head>
<header>
<nav>
@@ -32,7 +15,7 @@
<span class="bar"></span>
</button>
<div class="nav-menu">
<a href="{{ url_for('calculator') }}">DPS/DPM CALCULATOR</a>
<a href="{{ url_for('index') }}">GUN STATS</a>
<a href="{{ url_for('about_us') }}">ABOUT US</a>
<a href="{{ url_for('suggestion') }}">SUGGESTIONS & FEEDBACK</a>
<a href="https://www.roblox.com/games/5766084948/SCP-The-Red-Lake-EVENT">PLAY THE RED LAKE</a>
@@ -47,7 +30,7 @@
<br>
<label for="weapon-select"></label>
<select id="weapon-select" name="weapons">
<option value="">Select a Weapon</option> <!-- This is the placeholder option -->
<option value="">Select a Weapon</option>
</select>
<br>
<div id="guntype-filters">
@@ -62,7 +45,6 @@
<label><input type="checkbox" id="pistol" value="PISTOL"> Pistol</label>
<label><input type="checkbox" id="special" value="SPECIAL"> Special</label>
<label><input type="checkbox" id="semi-auto" value="SEMI-AUTO"> Semi-Auto</label>
<!-- Add more gun types as needed -->
</div>
<label for="operative-search"></label>
@@ -70,20 +52,15 @@
<br>
<label for="operative-select"></label>
<select id="operative-select">
<option value="">Select an operative</option> <!-- This is the placeholder option -->
<option value="">Select an operative</option>
</select><br>
<!-- Weapon Stats Display -->
<div id="weapon-stats"></div>
<div id="calculated-stats"></div>
<h3>Operative Specific Modifiers</h3>
<div id="operative-modifiers"></div>
<!-- Modifiers Display -->
<div id="modifiers-container">
<div id="modifiers"></div> <!-- Items and Perks go here -->
<div id="abilities"></div> <!-- Abilities go here -->
<div id="modifiers"></div>
<div id="abilities"></div>
</div>
<script src="{{ url_for('static', filename='filterWeapons.js') }}"></script>
<script>
@@ -101,6 +78,20 @@
document.body.classList.remove('menu-open');
})
);
document.addEventListener('DOMContentLoaded', function () {
var coll = document.getElementsByClassName("collapsible-header");
for (var i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function () {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
});
</script>
</main>
</body>
templates/suggestion.html
+1 -1
View File
@@ -17,7 +17,7 @@
<div class="nav-menu">
<a href="{{ url_for('calculator') }}">DPS/DPM CALCULATOR</a>
<a href="{{ url_for('about_us') }}">ABOUT US</a>
<a href="{{ url_for('suggestion') }}">SUGGESTIONS & FEEDBACK</a>
<a href="{{ url_for('index') }}">GUN STATS</a>
<a href="https://www.roblox.com/games/5766084948/SCP-The-Red-Lake-EVENT">PLAY THE RED LAKE</a>
<a href="https://discord.gg/2jDevH8aTd">OUR DISCORD</a>
</div>