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

added more functionality to the shadowbox part of the profile page

Browse Source
This commit is contained in:
Ajdj100
2023-03-30 10:04:15 -04:00
parent 1b0753912a
commit 2732bedbe9
3 changed files with 44 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
Profile Page/profile.html
View File

@@ -5,6 +5,8 @@
<meta charset="UTF-8">
<title>Profile Page</title>
<link rel="stylesheet" href="styles2.css">
<script src="scripts.js"></script>
</head>
<body>
@@ -69,7 +71,13 @@
<!-- Shadowbox -->
<div class="content shown">
<div id="shadowboxContainer">
<img src="../Paradox_3-19-2023.jpg">
<img src="../eParadox_3-19-2023.jpg" onerror="
this.onerror=null; this.style.display='none';
document.getElementById('shadowboxFallback').style.display='flex';">
<div id="shadowboxFallback" style="display:flex" onclick="uploadShadowbox()">
<p>Click to upload shadowbox</p>
<input type="file" name="shadowboxInput" onchange="handleShadowboxUpload(this)" style="display: none;">
</div>
</div>
</div>
</div>

22
Profile Page/scripts.js Normal file
View File

@@ -0,0 +1,22 @@
function uploadShadowbox() {
const shadowboxInput = document.querySelector('input[name="shadowboxInput"]');
shadowboxInput.click();
}
//lol I have no idea what this does its an HTTP POST request thats all I know
function handleShadowboxUpload(input) {
const file = input.files[0];
const formData = new FormData();
formData.append('shadowboxFile', file);
const xhr = new XMLHttpRequest();
xhr.open('POST', '/uploadShadowbox');
xhr.onload = function () {
if (xhr.status === 200) {
console.log('File uploaded successfully');
} else {
console.error('Error uploading file');
}
};
xhr.send(formData);
}

13
Profile Page/styles2.css
View File

@@ -185,6 +185,7 @@ p {
justify-content: center;
align-items: center;
padding-top: 50px;
width: 100%;
}
#shadowboxContainer > img {
@@ -193,3 +194,15 @@ p {
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}
#shadowboxFallback {
display: flex;
flex-direction: column;
align-items: center;
background-color: #bbbbbb;
width: 100%;
height: 300px;
}
#shadowboxFallback > p {
margin: auto;
}