17th-Ranger-Battalion-ORG/17th_Site_Front_End
6
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

finally started building out the personnel files. Need to add the content sections still, and finish the header to include the rank image and tab image, as well as add the scripts to get from database.... whew yeah its nowhere near done

Browse Source
This commit is contained in:
Ajdj100
2023-03-29 14:06:44 -04:00
parent 83fd1d74ce
commit 09bda9fbfd
2 changed files with 186 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
Profile Page/profile.html
View File

@@ -1,12 +1,76 @@
<!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>
<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 id="profileWrapper">
<div id="fileHeader">
<div id="images">
</div>
<div id="details">
<h1>Name:</h1>
<h1>Rank:</h1>
<h1>Unit:</h1>
</div>
<div class="subnav">
<ul class="subnav-links">
<li><a href="#" class="active">Personnel File</a></li>
<li><a href="#">Activity History</a></li>
<li><a href="#">Shadowbox</a></li>
</ul>
<script>
// Get the subnav links
const subnavLinks = document.querySelectorAll('.subnav-links a');
// Add click event listener to each link
subnavLinks.forEach(link => {
link.addEventListener('click', function () {
// Remove "active" class from all links
subnavLinks.forEach(link => link.classList.remove('active'));
// Add "active" class to clicked link
this.classList.add('active');
// Get the index of the clicked link
const index = Array.from(subnavLinks).indexOf(this);
// Hide all content divs
const contentDivs = document.querySelectorAll('.content');
contentDivs.forEach(div => div.classList.remove('shown'));
// Show the corresponding content div
contentDivs[index].classList.add('shown');
});
});
</script>
</div>
</div>
<!-- Personnel File -->
<div class="content shown">
hello
</div>
<!-- Activity History -->
<div class="content">
hello2
</div>
<!-- Shadowbox -->
<div class="content">
hello3
</div>
</div>
</body>
</html>

114
Profile Page/styles2.css
View File

@@ -1,8 +1,13 @@
/* General styling */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #F2F2F2;
padding: 20px;
}
h1 {
@@ -26,6 +31,45 @@ p {
line-height: 1.5;
}
/* 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;
}
/* Main items */
.main-items {
display: flex;
@@ -67,3 +111,71 @@ p {
.item p {
margin-bottom: 0;
}
#profileWrapper {
width: 800px;
margin: auto;
padding: 50px;
box-shadow: -5px 0 5px rgba(0, 0, 0, 0.5), 5px 0 5px rgba(0, 0, 0, 0.5);
}
.subnav {
background-color: transparent;
height: fit-content;
display: flex;
justify-content: center;
align-items: center;
padding-top: 60px;
}
.subnav-Header {
color: #333333;
font-size: 20px;
font-weight: bold;
display: flex;
justify-content: center;
}
.subnav-links {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
.subnav-links li {
display: flex;
margin: 0 10px;
padding: 0 30px 0 30px;
}
.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;
}
.content {
display: none;
}
.shown {
display: flex !important;
}