Initial Commit with files
This commit is contained in:
BIN
Landing page/armaSplash.jpg
Normal file
BIN
Landing page/armaSplash.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 379 KiB |
BIN
Landing page/logo.png
Normal file
BIN
Landing page/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
63
Landing page/stuff.html
Normal file
63
Landing page/stuff.html
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>17th Rangers Community</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header class="header">
|
||||||
|
<nav class="navbar">
|
||||||
|
<img class="mainLogo" src="logo.png">
|
||||||
|
<h1 class="title">Welcome to the 17th Rangers Community!</h1>
|
||||||
|
|
||||||
|
<ul class="nav-links">
|
||||||
|
<li><a href="#">Home</a></li>
|
||||||
|
<li><a href="#">About</a></li>
|
||||||
|
<li><a href="#">Events</a></li>
|
||||||
|
<li><a href="#">Blog</a></li>
|
||||||
|
<li><a href="#">Contact Us</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<section class="hero">
|
||||||
|
<h2 class="hero-title">Join the 17th Rangers community</h2>
|
||||||
|
<p class="hero-subtitle">We are a group of passionate gamers who love to play games together and build a
|
||||||
|
community. Join us and be part of something great!</p>
|
||||||
|
<button class="hero-btn">Join now</button>
|
||||||
|
</section>
|
||||||
|
<section class="about">
|
||||||
|
<h2>About us</h2>
|
||||||
|
<p>We are a community of gamers who share a passion for gaming and creating an inclusive environment. Our
|
||||||
|
mission is to build a community where everyone feels welcome and can enjoy playing games together.</p>
|
||||||
|
<ul>
|
||||||
|
<li>We organize weekly game nights</li>
|
||||||
|
<li>We host tournaments and events</li>
|
||||||
|
<li>We have an active forum where members can share their thoughts and ideas</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
<section class="events">
|
||||||
|
<h2>Upcoming events</h2>
|
||||||
|
<p>Stay up to date with our upcoming events and join us for some fun and games.</p>
|
||||||
|
<ul>
|
||||||
|
<li>March 26: Call of Duty tournament</li>
|
||||||
|
<li>April 2: Among Us game night</li>
|
||||||
|
<li>April 9: Valorant team scrimmage</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
<section class="blog">
|
||||||
|
<h2>Latest blog posts</h2>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">How to improve your gaming skills</a></li>
|
||||||
|
<li><a href="#">Top 10 games to play with friends</a></li>
|
||||||
|
<li><a href="#">Why community is important in gaming</a></li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
<footer class="footer">
|
||||||
|
<p>© 2023 17th Rangers</p>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
333
Landing page/styles.css
Normal file
333
Landing page/styles.css
Normal file
@@ -0,0 +1,333 @@
|
|||||||
|
/* Global Styles */
|
||||||
|
html {
|
||||||
|
font-size: 62.5%;
|
||||||
|
/* sets 1rem to 10px */
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 120rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header Styles */
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 2rem 0;
|
||||||
|
padding: 0% 1% 0% 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 3.2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: left;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainLogo {
|
||||||
|
width:50px;
|
||||||
|
height:50px;
|
||||||
|
display: flex;
|
||||||
|
padding: 0% 0% 0% 3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .navbar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
} */
|
||||||
|
.navbar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 0rem 0;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links li {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin: 0 1.5rem;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #333;
|
||||||
|
transition: color 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links a:hover {
|
||||||
|
color: #777;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Styles */
|
||||||
|
.hero {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 80vh;
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0% 5% 0% 5%
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
font-size: 5.6rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-subtitle {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-btn {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1.5rem 3.5rem;
|
||||||
|
background-color: #333;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 3rem;
|
||||||
|
transition: background-color 0.3s ease-in-out;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-btn:hover {
|
||||||
|
background-color: #777;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* About Styles */
|
||||||
|
.about {
|
||||||
|
padding: 10rem 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about h2 {
|
||||||
|
font-size: 4.8rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about p {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about ul {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about li {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin: 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Events Styles */
|
||||||
|
.events {
|
||||||
|
padding: 10rem 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events h2 {
|
||||||
|
font-size: 4.8rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events p {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events ul {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events li {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin: 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Blog Styles */
|
||||||
|
.blog {
|
||||||
|
padding: 10rem 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog h2 {
|
||||||
|
font-size: 4.8rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog p {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-article {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-article-img {
|
||||||
|
width: 50rem;
|
||||||
|
height: 35rem;
|
||||||
|
margin-right: 5rem;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-article-title {
|
||||||
|
font-size: 3.2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-article-text {
|
||||||
|
font-size: 2rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-article-btn {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1.5rem 3.5rem;
|
||||||
|
background-color: #333;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 3rem;
|
||||||
|
transition: background-color 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-article-btn:hover {
|
||||||
|
background-color: #777;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer Styles */
|
||||||
|
.footer {
|
||||||
|
background-color: #333;
|
||||||
|
color: #fff;
|
||||||
|
padding: 4rem 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer p {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-social li {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-social a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 3.2rem;
|
||||||
|
transition: color 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-social a:hover {
|
||||||
|
color: #777;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
|
||||||
|
/* Navbar Styles */
|
||||||
|
.navbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-btn {
|
||||||
|
display: block;
|
||||||
|
margin: 2rem 0;
|
||||||
|
font-size: 3.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Styles */
|
||||||
|
.hero-title {
|
||||||
|
font-size: 4.8rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-subtitle {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* About Styles */
|
||||||
|
.about ul {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Events Styles */
|
||||||
|
.events ul {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Blog Styles */
|
||||||
|
.blog-article {
|
||||||
|
flex-direction: column;
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-article-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 25rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-article-title {
|
||||||
|
font-size: 2.8rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-article-text {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-article-btn {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
padding: 1.2rem 2.5rem;
|
||||||
|
border-radius: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
18
Login Page/login.html
Normal file
18
Login Page/login.html
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>17th Rangers Administration Portal Login</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
<script src="scripts.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<form class="login-form">
|
||||||
|
<h1 class="heading">17th Rangers Administration Portal</h1>
|
||||||
|
<label for="username" class="label">Username:</label>
|
||||||
|
<input type="text" id="username" class="input" name="username"><br>
|
||||||
|
<label for="password" class="label">Password:</label>
|
||||||
|
<input type="password" id="password" class="input" name="password"><br><br>
|
||||||
|
<button type="button" class="button" onclick="login()">Login</button>
|
||||||
|
</form>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
6
Login Page/scripts.js
Normal file
6
Login Page/scripts.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
function login() {
|
||||||
|
const username = document.getElementById("username").value;
|
||||||
|
const password = document.getElementById("password").value;
|
||||||
|
|
||||||
|
//do the auth stuff
|
||||||
|
}
|
||||||
113
Login Page/styles.css
Normal file
113
Login Page/styles.css
Normal file
@@ -0,0 +1,113 @@
|
|||||||
|
/* body {
|
||||||
|
font-family: "Segoe UI", Arial, sans-serif;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form {
|
||||||
|
background-color: #333333;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading {
|
||||||
|
color: #ffffff;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
display: block;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
background-color: #3e8e41;
|
||||||
|
} */
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form {
|
||||||
|
background-color: #333333;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
|
||||||
|
color: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: fit-content;
|
||||||
|
margin: auto;
|
||||||
|
max-width: 400px;
|
||||||
|
padding: 30px;
|
||||||
|
padding-top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 18px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 30px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 5px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
background-color: #4CAF50;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: #ffffff;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 40px;
|
||||||
|
margin-top: 0px;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
background-color: #3e8e41;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading {
|
||||||
|
color: #ffffff;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
137
Profile Page/page.html
Normal file
137
Profile Page/page.html
Normal file
@@ -0,0 +1,137 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Profile Page - @ajdj100</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>@ajdj100 - Profile Page</h1>
|
||||||
|
<h2>Rank: 1stSgt</h2>
|
||||||
|
<h2>Unit Designation: Echo Company</h2>
|
||||||
|
|
||||||
|
<h3>Infantry Qualifications</h3>
|
||||||
|
<ul>
|
||||||
|
<li><input type="checkbox" checked> Basic Training</li>
|
||||||
|
<li><input type="checkbox" checked> 1 - Standard Field Operations</li>
|
||||||
|
<li><input type="checkbox"> 2 - Standard Combat Operations</li>
|
||||||
|
<li><input type="checkbox"> 3 - Urban Combat Operations (MOUT)</li>
|
||||||
|
<li><input type="checkbox" checked> 4 - Close Quarters Combat (CQC)</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>Medical</h3>
|
||||||
|
<ul>
|
||||||
|
<li><input type="checkbox"> Combat Life Saver (CLS)</li>
|
||||||
|
<li><input type="checkbox"> Advanced Triage and Masscas</li>
|
||||||
|
<li><input type="checkbox"> Medic (68W)</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>Sapper</h3>
|
||||||
|
<ul>
|
||||||
|
<li><input type="checkbox"> Demolitions</li>
|
||||||
|
<li><input type="checkbox"> Explosive Ordnance Disposal (EOD)</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>Rifle Qualifications</h3>
|
||||||
|
<ul>
|
||||||
|
<li><input type="checkbox" checked> Marksman</li>
|
||||||
|
<li><input type="checkbox" checked> Sharpshooter</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>Jump Wings</h3>
|
||||||
|
<ul>
|
||||||
|
<li><input type="checkbox"> Jump Wings</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>Radio Telephone Operator (RTO)</h3>
|
||||||
|
<ul>
|
||||||
|
<li><input type="checkbox" checked> Radio Telephone Operator (RTO)</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>Heavy Weapons</h3>
|
||||||
|
<ul>
|
||||||
|
<li><input type="checkbox"> Heavy Weapons</li>
|
||||||
|
<li><input type="checkbox"> Anti Armor</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>Air Assault</h3>
|
||||||
|
<ul>
|
||||||
|
<li><input type="checkbox" checked> Air Assault</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>Support Qualifications</h3>
|
||||||
|
<h4>Flight Requirements</h4>
|
||||||
|
<ul>
|
||||||
|
<li><input type="checkbox"> Crew</li>
|
||||||
|
<li><input type="checkbox" checked> Air Crew</li>
|
||||||
|
<li><input type="checkbox" checked> Co-Pilot</li>
|
||||||
|
<li><input type="checkbox"> Army Aviation (Rotary)</li>
|
||||||
|
<li><input type="checkbox" checked> Rotary Pilot - Logistics</li>
|
||||||
|
<li><input type="checkbox"> Rotary Pilot - Close Air Support (CAS)</li>
|
||||||
|
<li><input type="checkbox"> Army Aviator (Fixed Wing)</li>
|
||||||
|
<li><input type="checkbox" checked> Fixed Wing Pilot - Logistics</li>
|
||||||
|
<li><input type="checkbox" checked> Fixed Wing Pilot - Close Air Support (CAS)</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h4>Mechanized Requirements</h4>
|
||||||
|
<ul>
|
||||||
|
<li><input type="checkbox" checked> Echo Orientation</li>
|
||||||
|
<li><input type="checkbox" checked> Mechanized (IFV)</li>
|
||||||
|
<li><input type="checkbox"> Joint Terminal Attack Controller (JTAC)</li>
|
||||||
|
<li><input type="checkbox"> Indirect Fire Support (IDF)</li>
|
||||||
|
<li><input type="checkbox"> Jump Master</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>Additional Qualifications</h3>
|
||||||
|
<ul>
|
||||||
|
<li><input type="checkbox"> Reconnaissance & Surveillance Leader (RSLC)</li>
|
||||||
|
<li><input type="checkbox" checked> Master Free Fall</li>
|
||||||
|
<li><input type="checkbox"> Pathfinder</li>
|
||||||
|
<li><input type="checkbox"> Forward Observer (FO)</li>
|
||||||
|
<li><input type="checkbox"> Advanced UAV</li>
|
||||||
|
<li><input type="checkbox"> Sniper</li>
|
||||||
|
<li><input type="checkbox" checked> Combat Diver</li>
|
||||||
|
<li><input type="checkbox"> Master Free Fall Jump Master
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<h3>Time and Service</h3>
|
||||||
|
<ul>
|
||||||
|
<li><input type="checkbox"> Combat Infantryman</li>
|
||||||
|
<li><input type="checkbox" checked> Combat Action</li>
|
||||||
|
<li><input type="checkbox"> Combat
|
||||||
|
Medic
|
||||||
|
</li>
|
||||||
|
<li><input type="checkbox" checked> Combat Jump Wings: 1 2 3 4 5+</li>
|
||||||
|
<li><input type="checkbox"> Senior Jump Master: 1 2 3+</li>
|
||||||
|
<li><input type="checkbox"> Senior Army Aviator</li>
|
||||||
|
<li><input type="checkbox"> Master Army Aviator</li>
|
||||||
|
</ul>
|
||||||
|
<h3>Other</h3>
|
||||||
|
<ul>
|
||||||
|
<li><input type="checkbox" checked> Ranger</li>
|
||||||
|
<li><input type="checkbox"> NCO Course</li>
|
||||||
|
</ul>
|
||||||
|
<h3>Morale & Recognition Awards</h3>
|
||||||
|
<ul>
|
||||||
|
<li><input type="checkbox"> Unit Merit (x2) (x3) (x4) (x5) (x6)</li>
|
||||||
|
<li><input type="checkbox"> Unit Valor (x2)</li>
|
||||||
|
<li><input type="checkbox" checked> Combat Action</li>
|
||||||
|
<li><input type="checkbox"> Thankful Service, Professional Development</li>
|
||||||
|
<li><input type="checkbox"> Thankful Service</li>
|
||||||
|
<li><input type="checkbox"> Unit Citation</li>
|
||||||
|
<li><input type="checkbox"> Combat Recognition (x2)</li>
|
||||||
|
<li><input type="checkbox"> "A" For Effort</li>
|
||||||
|
<li><input type="checkbox" checked>Recruiter (12 Months)</li>
|
||||||
|
<li><input type="checkbox"> Individual Merit</li>
|
||||||
|
</ul>
|
||||||
|
<h3>Campaign Ribbons</h3>
|
||||||
|
<ul>
|
||||||
|
<li><input type="checkbox" checked> Operation Siren Song</li>
|
||||||
|
<li><input type="checkbox" checked> The End Game: A Tyrone Saga</li>
|
||||||
|
<li><input type="checkbox" checked> Operation Gargoyle</li>
|
||||||
|
</ul>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
133
Profile Page/page2.html
Normal file
133
Profile Page/page2.html
Normal file
@@ -0,0 +1,133 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Profile Page</title>
|
||||||
|
<link rel="stylesheet" href="styles2.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Profile Page</h1>
|
||||||
|
<p style="font-size: 50px; font-style: italic;">This whole page is going to change lol</p>
|
||||||
|
<!-- <div class="main-items">
|
||||||
|
<div class="main-item">
|
||||||
|
<h2>Item 1</h2>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||||
|
</div>
|
||||||
|
<div class="main-item">
|
||||||
|
<h2>Item 2</h2>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||||
|
</div>
|
||||||
|
<div class="main-item">
|
||||||
|
<h2>Item 3</h2>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Infantry Qualifiactions</h2>
|
||||||
|
<div class="grid-container">
|
||||||
|
<div class="grid">
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- <div class="grid">
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
</div>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
</div>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Section 2</h2>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Section 3</h2>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Section 4</h2>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Section 5</h2>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Section 6</h2>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Section 7</h2>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
12
Profile Page/profile.html
Normal file
12
Profile Page/profile.html
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Profile Page</title>
|
||||||
|
<link rel="stylesheet" href="styles2.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Profile Page</h1>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
169
Profile Page/styles.css
Normal file
169
Profile Page/styles.css
Normal file
@@ -0,0 +1,169 @@
|
|||||||
|
/* Global styles */
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Poppins', sans-serif;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4 {
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"] {
|
||||||
|
margin-right: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Profile page styles */
|
||||||
|
.container {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 48px;
|
||||||
|
color: #4CAF50;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 36px;
|
||||||
|
color: #4CAF50;
|
||||||
|
margin: 20px 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #4CAF50;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"] {
|
||||||
|
appearance: none;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border: 2px solid #4CAF50;
|
||||||
|
vertical-align: middle;
|
||||||
|
transition: border-color 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"]:checked {
|
||||||
|
background-color: #4CAF50;
|
||||||
|
border-color: #4CAF50;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #4CAF50;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.awards {
|
||||||
|
margin-top: 40px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
padding: 40px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.award-category {
|
||||||
|
font-size: 36px;
|
||||||
|
color: #4CAF50;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.award-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.award-item {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.award-name {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #4CAF50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.award-icon {
|
||||||
|
color: #4CAF50;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
h1 {
|
||||||
|
font-size: 36px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.awards {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.award-category {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.award-item {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
69
Profile Page/styles2.css
Normal file
69
Profile Page/styles2.css
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
/* General styling */
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
background-color: #F2F2F2;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: #1A1A1A;
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: #1A1A1A;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #1A1A1A;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main items */
|
||||||
|
.main-items {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-item {
|
||||||
|
width: 30%;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius:5px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-item h2 {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grid */
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(1, 6fr);
|
||||||
|
grid-gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item h2 {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
92
Users Page/page.html
Normal file
92
Users Page/page.html
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>User Database</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
<script src="scripts.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<nav class="navbar">
|
||||||
|
<ul class="nav-links">
|
||||||
|
<li><a href="#">Home</a></li>
|
||||||
|
<li><a href="#">Users</a></li>
|
||||||
|
<li><a href="#">Stuff</a></li>
|
||||||
|
<li><a href="#">Things</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="subNavContainer">
|
||||||
|
<h1 style="color: #333333; margin: 0.5rem;">User Database</h1>
|
||||||
|
<form class="search-form" id="search-form">
|
||||||
|
<label for="search">Search:</label>
|
||||||
|
<input type="text" id="search" name="search" placeholder="Enter search term...">
|
||||||
|
<input type="button" value="Search" onclick="searchUsers()">
|
||||||
|
</form>
|
||||||
|
<script>
|
||||||
|
const searchForm = document.getElementById('search-form');
|
||||||
|
searchForm.addEventListener('submit', function (event) {
|
||||||
|
event.preventDefault(); // prevent the form from submitting
|
||||||
|
|
||||||
|
searchUsers();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- <nav class="subnav">
|
||||||
|
<ul class="subnav-links">
|
||||||
|
<li><a href="#" class="active">All</a></li>
|
||||||
|
<li><a href="#">Alpha</a></li>
|
||||||
|
<li><a href="#">Echo</a></li>
|
||||||
|
<li><a href="#">NCO</a></li>
|
||||||
|
<li><a href="#">RRC</a></li>
|
||||||
|
<li><a href="#">HHC</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav> -->
|
||||||
|
|
||||||
|
<button onclick="showFilters()">Filter</button>
|
||||||
|
|
||||||
|
<div id="filter-box" style="display:none;">
|
||||||
|
<nav class="subnav">
|
||||||
|
<ul class="subnav-links">
|
||||||
|
<li><a href="#" class="active">All</a></li>
|
||||||
|
<li><a href="#">Alpha</a></li>
|
||||||
|
<li><a href="#">Echo</a></li>
|
||||||
|
<li><a href="#">NCO</a></li>
|
||||||
|
<li><a href="#">RRC</a></li>
|
||||||
|
<li><a href="#">HHC</a></li>
|
||||||
|
<li><a href="#">Recruit</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<script> function showFilters() {
|
||||||
|
var filterBox = document.getElementById("filter-box");
|
||||||
|
if (filterBox.style.display === "none") {
|
||||||
|
filterBox.style.display = "block";
|
||||||
|
} else {
|
||||||
|
filterBox.style.display = "none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table id="userTable">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Member</th>
|
||||||
|
<th>Unit</th>
|
||||||
|
<th>Rank</th>
|
||||||
|
<th>Join Date</th>
|
||||||
|
<th>LOA Until</th>
|
||||||
|
<th>Last Active</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="tableBody">
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<script>
|
||||||
|
const allUsers = getUsers();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
89
Users Page/scripts.js
Normal file
89
Users Page/scripts.js
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
function searchUsers() { //this needs some heavy updating
|
||||||
|
const searchTerm = document.getElementById("search").value;
|
||||||
|
const data = JSON.parse(sessionStorage.getItem("peopleData"));
|
||||||
|
|
||||||
|
//const results = data.filter(person => person.name === searchTerm)
|
||||||
|
|
||||||
|
const results = data.filter(person => filterByName(searchTerm, person));
|
||||||
|
console.log(results);
|
||||||
|
|
||||||
|
populateUsers(results);
|
||||||
|
}
|
||||||
|
|
||||||
|
function filterByName(searchTerm, item) {
|
||||||
|
if(item.name.toLowerCase().startsWith(searchTerm.toLowerCase())) {
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getUsers() {
|
||||||
|
const authToken = 'Bearer nevergonnagiveyouupnevergonnaletyoudownnevergonnarunaroundanddesertyounevergonnamakeyoucrynevergonnasaygoodbyenevergonnatellalieandhurtyou';
|
||||||
|
|
||||||
|
// Define the headers for the API call with the authentication token included
|
||||||
|
const headers = new Headers();
|
||||||
|
headers.append('Authorization', authToken);
|
||||||
|
|
||||||
|
|
||||||
|
// Make a REST API call with the headers
|
||||||
|
fetch('https://indigofox.dev:9230/api/members', { headers })
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
// Store the response in a variable
|
||||||
|
const responseData = data;
|
||||||
|
|
||||||
|
console.log(responseData);
|
||||||
|
|
||||||
|
// Do something with the response data
|
||||||
|
sessionStorage.setItem("peopleData", JSON.stringify(responseData));
|
||||||
|
populateUsers(responseData);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error:', error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function populateUsers(items) {
|
||||||
|
|
||||||
|
//const URLparams = URLSearchParams(window.location.search);
|
||||||
|
|
||||||
|
|
||||||
|
const table = document.getElementById("tableBody");
|
||||||
|
|
||||||
|
table.innerHTML = "";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
items.forEach(item => {
|
||||||
|
let row = table.insertRow();
|
||||||
|
|
||||||
|
let name = row.insertCell(0);
|
||||||
|
name.innerHTML = item.name;
|
||||||
|
let rank = row.insertCell(1);
|
||||||
|
rank.innerHTML = item.rank;
|
||||||
|
let unit = row.insertCell(2);
|
||||||
|
unit.innerHTML = unit.rank;
|
||||||
|
let joinDate = row.insertCell(3);
|
||||||
|
joinDate.innerHTML = item.joinDate
|
||||||
|
|
||||||
|
row.addEventListener("click", () => {
|
||||||
|
window.location.href = `../Profile Page/page2.html?id=${item.id}`;
|
||||||
|
});
|
||||||
|
row.addEventListener("mouseover", () => {
|
||||||
|
row.style.cursor = "pointer";
|
||||||
|
row.classList.add("hover");
|
||||||
|
})
|
||||||
|
row.addEventListener("mouseout", () => {
|
||||||
|
row.classList.remove("hover");
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// const items1 = [
|
||||||
|
// { name: "Ajdj100", unit: "Echo", rank: "1SG", joinDate: "3/7/2022" },
|
||||||
|
// { name: "EagleTrooper", unit: "Alpha", rank: "SSG", joinDate: "long long ago" },
|
||||||
|
// ];
|
||||||
|
|
||||||
|
|
||||||
|
// console.log(items);
|
||||||
182
Users Page/styles.css
Normal file
182
Users Page/styles.css
Normal file
@@ -0,0 +1,182 @@
|
|||||||
|
/* Reset styles */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Basic page styles */
|
||||||
|
body {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Heading styles */
|
||||||
|
.heading {
|
||||||
|
color: #333333;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
font-size: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Search form styles */
|
||||||
|
.search-form {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-form label {
|
||||||
|
font-size: 18px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-form input[type="text"] {
|
||||||
|
background-color: #d8d8d8;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 40px;
|
||||||
|
margin-right: 10px;
|
||||||
|
padding: 5px;
|
||||||
|
width: 300px;
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-form input[type="button"] {
|
||||||
|
background-color: #4CAF50;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: #ffffff;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 40px;
|
||||||
|
width: 100px;
|
||||||
|
transition: background-color 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-form input[type="button"]:hover {
|
||||||
|
background-color: #3e8e41;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Table styles */
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
border: 1px solid #dddddd;
|
||||||
|
text-align: left;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* NAVBAR */
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
background-color: #333333;
|
||||||
|
height: 80px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links li {
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links li a {
|
||||||
|
color: #ffffff;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
transition: color 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links li a:hover {
|
||||||
|
color: #4CAF50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subnav {
|
||||||
|
background-color: transparent;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subnav-links {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subnav-links li {
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subnav-links li a {
|
||||||
|
color: #363636;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
transition: color 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subnav-links li a.active {
|
||||||
|
color: #4CAF50;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Center the subNavContainer */
|
||||||
|
.subNavContainer {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover {
|
||||||
|
/* background-color: #b9b9b9; */
|
||||||
|
/* outline: 2px solid rgb(104, 104, 104); */
|
||||||
|
box-shadow: 0 0 10px rgb(77, 77, 77);
|
||||||
|
}
|
||||||
|
/* I'll get around to this DEFINING THE MAX WIDTH OF THE TABLE SO IT DOESNT GET TO WIDE */
|
||||||
|
/* #userTable {
|
||||||
|
max-width: 50%;
|
||||||
|
display: block;
|
||||||
|
margin: auto;
|
||||||
|
} */
|
||||||
|
|
||||||
|
#filter-box {
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
top: 185px;
|
||||||
|
left: auto;
|
||||||
|
right: 0;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user