System-End/Team_Website
1
0
Fork 0
mirror of https://github.com/System-End/Team_Website.git synced 2026-04-19 22:05:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Upload

Browse source 
Added the uploading system.
This commit is contained in:
iiooasd 2024-05-10 18:21:45 -07:00
parent 4e8916b6f1
commit 13d6db8c7a
2 changed files with 89 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
Pages/style.css
View file

@ -394,6 +394,35 @@ main {
-webkit-text-fill-color: transparent;
}
/*Upload Page*/
.container {
margin: 50px auto;
width: 80%;
text-align: center;
}
.upload-btn {
padding: 10px 20px;
background-color: #c5203d;
color: #000;
border: none;
cursor: pointer;
border-radius: 5px;
}
.up-btn {
padding: 10px 20px;
background-color: #c5203d;
color: #000;
cursor: pointer;
border-radius: 0px;
}
input[type="file"] {
display: none;
}
#uploaded-image {
max-width: 500px;
margin-top: 20px;
}
/*Mobile*/
@media screen and (max-width: 1200px) {
/* comes into effect for screens larger than or equal to 481 pixels */

60
Pages/upload.html Normal file
View file

@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="icon"
type="image/x-icon"
href="/Resources/Favicons/favicon.png"
/>
<link rel="stylesheet" href="/Pages/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
window.addEventListener("DOMContentLoaded", (event) => {
fetch("/Pages/navbar.html")
.then((response) => response.text())
.then((data) => {
document.getElementById("navbar").innerHTML = data;
});
fetch("/Pages/socials.html")
.then((response) => response.text())
.then((data) => {
document.getElementById("socials").innerHTML = data;
});
});
</script>
</head>
<body>
<div id="navbar"></div>
<div class="container">
<h2>Image Uploader</h2>
<p>Here you can upload pictures of the team. Thank you for your suppourt</p>
<form action="/uploaded.html" method="post" enctype="multipart/form-data">
<label for="file-upload" class="upload-btn">Choose Image</label>
<input type="file" id="file-upload" name="file" accept="image/*">
<br>
<br>
<button type="submit" class="up-btn">Upload</button>
</form>
<div id="image-preview">
<h3>Uploaded Image:</h3>
<img id="uploaded-image" src="#" alt="Uploaded Image">
</div>
</div>
<script>
document.getElementById('file-upload').addEventListener('change', function(event) {
const fileInput = event.target;
const file = fileInput.files[0];
const reader = new FileReader();
reader.onload = function(e) {
const imagePreview = document.getElementById('uploaded-image');
imagePreview.src = e.target.result;
}
reader.readAsDataURL(file);
});
</script>
<div id="socials"></div>
</body>
</html>