updated directories, renamed backend to src, removed frontend
This commit is contained in:
Toddeh Alexander - MacAir
parent
ffc706abed
commit
19b2199917
16 changed files with 0 additions and 550 deletions
|
|
@ -1 +0,0 @@
|
|||
3
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 40px 5%;
|
||||
}
|
||||
|
||||
.heading-text {
|
||||
margin-bottom: 2rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.heading-text span {
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.image-gallery {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.image-gallery > li {
|
||||
flex: 1 1 auto; /* or flex: auto; */
|
||||
height: 300px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image-gallery::after {
|
||||
content: "";
|
||||
flex-grow: 999;
|
||||
}
|
||||
|
||||
.image-gallery li img {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(57, 57, 57, 0.502);
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: scale(0);
|
||||
transition: all 0.2s 0.1s ease-in-out;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.image-gallery li:hover .overlay {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
/* Bordered form */
|
||||
form {
|
||||
border: 3px solid #f1f1f1;
|
||||
}
|
||||
|
||||
input[type=text], input[type=password] {
|
||||
width: 100%;
|
||||
padding: 12px 20px;
|
||||
margin: 8px 0;
|
||||
display: inline-block;
|
||||
border: 1px solid #ccc;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #04AA6D;
|
||||
color: white;
|
||||
padding: 14px 20px;
|
||||
margin: 8px 0;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 16px;
|
||||
}
|
||||
|
|
@ -1,97 +0,0 @@
|
|||
/* Navigation Bar Styles */
|
||||
nav {
|
||||
background-color: #333;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav-menu li {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.nav-menu a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 10px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.nav-menu a:hover,
|
||||
.nav-menu a.active {
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
/* Home Page Styles */
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #f1f1f1;
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
#drag-drop-container {
|
||||
border: 2px dashed #ccc;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
width: 400px;
|
||||
background-color: white;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
#drag-drop-container:hover {
|
||||
border-color: #4CAF50;
|
||||
background-color: #f1f1f1;
|
||||
transform: scale(1.1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#drag-drop-container.drag-over {
|
||||
border-color: #4CAF50;
|
||||
background-color: #f1f1f1;
|
||||
transform: scale(1.1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#upload-button {
|
||||
background-color: #ccc;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#upload-button:enabled {
|
||||
background-color: #4CAF50;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Image Gallery</title>
|
||||
<link rel="stylesheet" href="../css/styles.css">
|
||||
<link rel="stylesheet" href="../css/gallery.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Navigation Bar -->
|
||||
<nav>
|
||||
<div class="nav-container">
|
||||
<a href="../index.html" class="nav-logo">Image Upload</a>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="../index.html">Home</a></li>
|
||||
<li><a href="gallery.html" class="active">Gallery</a></li>
|
||||
<li><a href="user_gallery.html">Uploads</a></li>
|
||||
<li><a href="../login/login.html">Sign In</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Gallery Page -->
|
||||
<div class="container">
|
||||
<h2 class="heading-text"><span>Image</span> Gallery</h2>
|
||||
<ul class="image-gallery">
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/VWcPlbHglYc" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img
|
||||
src="https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExc3FzdTEyZWJ0aXlicmZvMzlnM28ycWpndHBlNmEydDd3MjdmdXFpeiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/EZICHGrSD5QEFCxMiC/giphy.gif"
|
||||
alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/e6FMMambeO4" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/klCiPmzUw0Y" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/IdNOTjPeHrE" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/O0N9MF--hK4" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/FV3GConVSss" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/0ESjL-Nw22Y" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/KTVn62x6fFw" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/VSeVhmW4_JQ" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/07aFaTf24Kg" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/DqyYTM7pR2o" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://via.placeholder.com/300x300" alt="Placeholder Image">
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://via.placeholder.com/300x600" alt="Placeholder Image">
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://via.placeholder.com/200x600" alt="Placeholder Image">
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://via.placeholder.com/600x200" alt="Placeholder Image">
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<script src="gallery.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
// gallery.js
|
||||
|
||||
// Fetch the list of uploaded images from the server
|
||||
fetch('get_uploaded_images.php')
|
||||
.then(response => response.json())
|
||||
.then(images => {
|
||||
const imageGrid = document.getElementById('image-grid');
|
||||
|
||||
// Generate HTML elements for each image
|
||||
images.forEach(image => {
|
||||
const imageElement = document.createElement('img');
|
||||
imageElement.src = `uploads/${image}`;
|
||||
imageElement.alt = image;
|
||||
imageGrid.appendChild(imageElement);
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching uploaded images:', error);
|
||||
});
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>User Image Gallery</title>
|
||||
<link rel="stylesheet" href="../css/styles.css">
|
||||
<link rel="stylesheet" href="../css/gallery.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Navigation Bar -->
|
||||
<nav>
|
||||
<div class="nav-container">
|
||||
<a href="../index.html" class="nav-logo">Image Upload</a>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="../index.html">Home</a></li>
|
||||
<li><a href="gallery.html">Gallery</a></li>
|
||||
<li><a href="user_gallery.html" class="active">Uploads</a></li>
|
||||
<li><a href="../login/login.html">Sign In</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<div>Please <a href="../login/login.html">sign in</a> to view your images.</div>
|
||||
<!-- Display gallery page if signed in -->
|
||||
<!-- <div class="container">
|
||||
<h2 class="heading-text"><span>User</span> Gallery</h2>
|
||||
<ul class="image-gallery">
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/VWcPlbHglYc" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExc3FzdTEyZWJ0aXlicmZvMzlnM28ycWpndHBlNmEydDd3MjdmdXFpeiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/EZICHGrSD5QEFCxMiC/giphy.gif"
|
||||
alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/e6FMMambeO4" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/klCiPmzUw0Y" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/IdNOTjPeHrE" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div> -->
|
||||
<script src="user_gallery.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Drag and Drop Image Upload</title>
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Navigation Bar -->
|
||||
<nav>
|
||||
<div class="nav-container">
|
||||
<a href="index.html" class="nav-logo">Image Upload</a>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="index.html" class="active">Home</a></li>
|
||||
<li><a href="gallery/gallery.html">Gallery</a></li>
|
||||
<li><a href="gallery/user_gallery.html">Uploads</a></li>
|
||||
<li><a href="login/login.html">Sign In</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Home Page (Upload) -->
|
||||
<div id="drag-drop-container">
|
||||
<h2>Drag and Drop Images</h2>
|
||||
<p>PNG | JPEG | GIF files only <br><br>or click to select a file</p>
|
||||
<div id="file-info"></div>
|
||||
<input type="file" id="file-input" name="file" accept="image/png, image/jpeg, image/gif" hidden>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<button id="upload-button" type="button" disabled> Upload</button>
|
||||
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
const dragDropContainer = document.getElementById('drag-drop-container');
|
||||
const fileInput = document.getElementById('file-input');
|
||||
const uploadButton = document.getElementById('upload-button');
|
||||
let selectedFile = null;
|
||||
|
||||
// Initially disable the upload button and set its background color to grey
|
||||
disableUploadButton();
|
||||
|
||||
dragDropContainer.addEventListener('dragover', (event) => {
|
||||
event.preventDefault();
|
||||
dragDropContainer.classList.add('drag-over');
|
||||
});
|
||||
|
||||
dragDropContainer.addEventListener('dragleave', () => {
|
||||
dragDropContainer.classList.remove('drag-over');
|
||||
});
|
||||
|
||||
dragDropContainer.addEventListener('drop', (event) => {
|
||||
event.preventDefault();
|
||||
dragDropContainer.classList.remove('drag-over');
|
||||
|
||||
// Get the first file from the dropped files
|
||||
const file = event.dataTransfer.files[0];
|
||||
|
||||
// Check if the file is a PNG, JPEG, or GIF
|
||||
if (file && (file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/gif')) {
|
||||
selectedFile = file;
|
||||
updateFileInfo(file.name);
|
||||
enableUploadButton();
|
||||
} else {
|
||||
alert('Please drop a PNG, JPEG, or GIF file.');
|
||||
}
|
||||
});
|
||||
|
||||
dragDropContainer.addEventListener('click', () => {
|
||||
fileInput.click();
|
||||
});
|
||||
|
||||
fileInput.addEventListener('change', () => {
|
||||
const file = fileInput.files[0];
|
||||
if (file && (file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/gif')) {
|
||||
selectedFile = file;
|
||||
updateFileInfo(file.name);
|
||||
enableUploadButton();
|
||||
} else {
|
||||
updateFileInfo('');
|
||||
disableUploadButton();
|
||||
}
|
||||
});
|
||||
|
||||
uploadButton.addEventListener('click', () => {
|
||||
if (selectedFile) {
|
||||
const formData = new FormData();
|
||||
formData.append('file', selectedFile);
|
||||
|
||||
fetch('upload.php', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
alert('File uploaded successfully!');
|
||||
// Optionally handle the response, e.g., display uploaded file details
|
||||
console.log('Uploaded filename:', data.fileName);
|
||||
} else {
|
||||
alert('File upload failed. Please try again.');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error uploading file:', error);
|
||||
alert('File upload failed. Please try again.');
|
||||
});
|
||||
} else {
|
||||
alert('Please select a file to upload.');
|
||||
}
|
||||
});
|
||||
|
||||
function updateFileInfo(fileName) {
|
||||
const fileInfo = document.getElementById('file-info');
|
||||
fileInfo.textContent = fileName ? `Selected file: ${fileName}` : '';
|
||||
}
|
||||
|
||||
function enableUploadButton() {
|
||||
uploadButton.disabled = false;
|
||||
uploadButton.style.backgroundColor = '#4CAF50'; // Green
|
||||
uploadButton.style.cursor = 'pointer';
|
||||
}
|
||||
|
||||
function disableUploadButton() {
|
||||
uploadButton.disabled = true;
|
||||
uploadButton.style.backgroundColor = '#ccc'; // Gray
|
||||
uploadButton.style.cursor = 'default';
|
||||
}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Login Page</title>
|
||||
<link rel="stylesheet" href="../css/styles.css">
|
||||
<link rel="stylesheet" href="../css/login.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Navigation Bar -->
|
||||
<nav>
|
||||
<div class="nav-container">
|
||||
<a href="../index.html" class="nav-logo">Image Upload</a>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="../index.html">Home</a></li>
|
||||
<li><a href="../gallery/gallery.html">Gallery</a></li>
|
||||
<li><a href="../gallery/user_gallery.html">Uploads</a></li>
|
||||
<li><a href="login.html" class="active">Sign In</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Login Form -->
|
||||
<form action="" method="post">
|
||||
<div class="container">
|
||||
<label for="username"><b>Username</b></label>
|
||||
<input type="text" placeholder="Enter Username" name="username" required>
|
||||
|
||||
<label for="password"><b>Password</b></label>
|
||||
<input type="password" placeholder="Enter Password" name="password" required>
|
||||
|
||||
<button type="submit">Login</button>
|
||||
<label><input type="checkbox" checked="checked" name="remember"> Remember me</label>
|
||||
</div>
|
||||
</form>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in a new issue