beenull/Imgur-Clone
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'main' of github.com:toddehalexander/Imgur-Clone

Browse source 
yup
This commit is contained in:
benninghoven 2024-04-29 05:28:05 -07:00
commit a58f851156
6 changed files with 147 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
frontend/css/login.css Normal file
View file

@ -0,0 +1,31 @@
/* 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;
}

12
frontend/gallery/gallery.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -7,6 +8,7 @@
<link rel="stylesheet" href="../css/styles.css">
<link rel="stylesheet" href="../css/gallery.css">
</head>
<body>
<!-- Navigation Bar -->
<nav>
@ -15,18 +17,23 @@
<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">
<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="" />
<img
src="https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExc3FzdTEyZWJ0aXlicmZvMzlnM28ycWpndHBlNmEydDd3MjdmdXFpeiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/EZICHGrSD5QEFCxMiC/giphy.gif"
alt="" />
<div class="overlay"><span>Image title</span></div>
</li>
<li>
@ -90,4 +97,5 @@
</div>
<script src="gallery.js"></script>
</body>
</html>

56
frontend/gallery/user_gallery.html Normal file
View file

@ -0,0 +1,56 @@
<!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>

5
frontend/index.html
View file

@ -1,11 +1,13 @@
<!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>
@ -14,6 +16,8 @@
<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>
@ -30,4 +34,5 @@
<script src="js/script.js"></script>
</body>
</html>

0
frontend/js/user_gallery.js Normal file
View file

41
frontend/login/login.html Normal file
View file

@ -0,0 +1,41 @@
<!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>