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