commit
bbccf3392c
|
After Width: | Height: | Size: 1.9 MiB |
|
After Width: | Height: | Size: 2.0 MiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 426 B |
@ -0,0 +1,274 @@ |
||||
*{ |
||||
margin:0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
font-family: 'Poppins', sans-serif; |
||||
} |
||||
|
||||
body{ |
||||
font-family: Arial,sans-serif; |
||||
background-color: beige; |
||||
color: #333; |
||||
line-height: 1.6; |
||||
} |
||||
|
||||
/* a{ |
||||
text-decoration: none; |
||||
color: #4CAF50; |
||||
} */ |
||||
|
||||
header{ |
||||
background-image: url('logo.png'); |
||||
color: white; |
||||
text-align: center; |
||||
padding: 60px 20px; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
.header p{ |
||||
font-size: 1.2em; |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
.container { |
||||
max-width: 700px; |
||||
margin: 30px auto; |
||||
padding: 20px; |
||||
background: #faf4f5; |
||||
border-radius: 10px; |
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.1); |
||||
} |
||||
|
||||
/* .container h2{ |
||||
font-size: 10em; |
||||
color: black; |
||||
border-bottom: 2px ; |
||||
padding-bottom: 5px; |
||||
margin-bottom: 20px; |
||||
} */ |
||||
|
||||
form{ |
||||
margin-bottom: 30px; |
||||
} |
||||
|
||||
label{ |
||||
font-weight: bold; |
||||
display: block; |
||||
margin-bottom: 8px; |
||||
color: #555; |
||||
|
||||
} |
||||
|
||||
input,select,button{ |
||||
width: 100%; |
||||
padding: 12px; |
||||
margin-bottom: 15px; |
||||
border: 1px solid #ddd; |
||||
border-radius: 5px; |
||||
font-size: 1em; |
||||
} |
||||
|
||||
input:focus, select:focus{ |
||||
outline: none; |
||||
border-color: #4CAF50; |
||||
box-shadow: 0 0 5px #4CAF50(0, 123,255,0.5); |
||||
} |
||||
|
||||
button{ |
||||
background-color: #4CAF50; |
||||
color: white; |
||||
border: none; |
||||
cursor: pointer; |
||||
font-size: 1.1em; |
||||
transition: background-color 0.3s ease; |
||||
} |
||||
|
||||
button:hover{ |
||||
background-color: #4CAF50; |
||||
} |
||||
|
||||
.matches{ |
||||
background: #f9f9f9; |
||||
padding: 20px; |
||||
border-radius: 10px; |
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1); |
||||
} |
||||
|
||||
.match-item{ |
||||
padding: 15px; |
||||
margin-bottom: 15px; |
||||
border: 1px solid #cce5ff; |
||||
background-color: #e6f0ff; |
||||
border-radius: 5px; |
||||
font-size: 1em; |
||||
color: #333; |
||||
|
||||
} |
||||
|
||||
.match-item:hover{ |
||||
background-color: #d9eaff; |
||||
} |
||||
|
||||
|
||||
.footer { |
||||
text-align: center; |
||||
padding: 15px 20px; |
||||
background: #4CAF50; |
||||
color: white; |
||||
margin-top: 30px; |
||||
font-size: 0.9em; |
||||
} |
||||
|
||||
.popup{ |
||||
position: fixed; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%,-50%); |
||||
background-color: #ffffff; |
||||
border: 1px solid #ccc; |
||||
padding: 20px; |
||||
border-radius: 5px; |
||||
display: none; |
||||
} |
||||
|
||||
p{ |
||||
margin-top: 5px; |
||||
margin-bottom: 5px; |
||||
|
||||
} |
||||
|
||||
/* navigation-bar */ |
||||
.hero{ |
||||
width: 100%; |
||||
min-height: 30vh; |
||||
background: beige; |
||||
color: lightgreen; |
||||
} |
||||
|
||||
nav{ |
||||
background: #cb997e; |
||||
width: 100%; |
||||
padding: 10px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
position: relative; |
||||
} |
||||
.logo{ |
||||
width: 100px; |
||||
height: 80px; |
||||
} |
||||
.user-pic{ |
||||
width: 80px; |
||||
border-radius: 50%; |
||||
cursor: pointer; |
||||
margin-left: 30px; |
||||
} |
||||
|
||||
nav ul{ |
||||
width: 100%; |
||||
text-align: right; |
||||
} |
||||
nav ul li{ |
||||
display: inline-block; |
||||
list-style: none; |
||||
margin: 10px 20px; |
||||
} |
||||
|
||||
nav ul li a{ |
||||
color:#ffffff; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
.sub-menu-wrap { |
||||
position: absolute; |
||||
top: 95px; |
||||
right: 0; |
||||
width: 320px; |
||||
overflow: hidden; |
||||
transition: display 0.5s ease; |
||||
} |
||||
|
||||
.hidden{ |
||||
display: none; |
||||
} |
||||
|
||||
.sub-menu-wrap.open-menu{ |
||||
max-height: 400px; |
||||
} |
||||
|
||||
.sub-menu-wrap{ |
||||
background: white; |
||||
margin: 10px; |
||||
padding: 20px; |
||||
} |
||||
|
||||
.user-info{ |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
} |
||||
.user-info h3{ |
||||
font-weight: 500; |
||||
} |
||||
.bigboy{ |
||||
max-width: fit-content; |
||||
max-height: 60px; |
||||
|
||||
} |
||||
.user-info-img{ |
||||
/* adjust image */ |
||||
width: 60px; |
||||
border-radius: 50%; |
||||
margin-right: 15px; |
||||
} |
||||
|
||||
.sub-menu hr{ |
||||
border: 0; |
||||
height: 1px; |
||||
width: 100%; |
||||
background: #ccc; |
||||
margin: 15px 0 10px; |
||||
} |
||||
|
||||
|
||||
.sub-menu-link{ |
||||
display: flex; |
||||
align-items: center; |
||||
text-decoration: none; |
||||
color: #525252; |
||||
margin: 12px 0; |
||||
} |
||||
|
||||
.sub-menu-link p{ |
||||
width: 100%; |
||||
|
||||
} |
||||
|
||||
.sub-menu-link img{ |
||||
width: 40px; |
||||
background: #e5e5e5; |
||||
border-radius: 50%; |
||||
padding: 8px; |
||||
margin-right: 15px; |
||||
} |
||||
|
||||
.sub-menu-link span{ |
||||
font-size: 22px; |
||||
transition: transform 0.5s; |
||||
} |
||||
|
||||
.sub-menu-link:hover span{ |
||||
transform: translate(5px); |
||||
} |
||||
|
||||
.sub-menu-link:hover p{ |
||||
font-weight: 600; |
||||
} |
||||
|
||||
h2{ |
||||
margin-right: 10px; |
||||
color: #4CAF50; |
||||
} |
||||
@ -0,0 +1,134 @@ |
||||
<?php |
||||
session_start(); |
||||
if(!isset($_SESSION['user'])){ |
||||
header("location:login.php"); |
||||
exit; |
||||
} |
||||
$db_server = "localhost"; |
||||
$db_user = "root"; |
||||
$db_pass = ""; |
||||
$db_name = "foodshare"; |
||||
|
||||
|
||||
$conn = mysqli_connect($db_server, $db_user, $db_pass, $db_name); |
||||
|
||||
|
||||
if (!$conn) { |
||||
die("Connection failed: " . mysqli_connect_error()); |
||||
} |
||||
|
||||
if ($_SERVER['REQUEST_METHOD'] === 'POST') { |
||||
|
||||
$donor_name = $_POST['donorName']; |
||||
$food_type = $_POST['foodType']; |
||||
$quantity = $_POST['quantity']; |
||||
$location = $_POST['location']; |
||||
$expiration_date = $_POST['expirationDate']; |
||||
|
||||
|
||||
$query = "INSERT INTO donations (donor_name, food_type, quantity, location, expiration_date) VALUES (?, ?, ?, ?, ?)"; |
||||
$stmt = mysqli_prepare($conn, $query); |
||||
|
||||
if ($stmt) { |
||||
mysqli_stmt_bind_param($stmt, "sssss", $donor_name, $food_type, $quantity, $location, $expiration_date); |
||||
if (mysqli_stmt_execute($stmt)) { |
||||
echo "Donation submitted successfully!"; |
||||
} else { |
||||
echo "Error executing query: " . mysqli_error($conn); |
||||
} |
||||
mysqli_stmt_close($stmt); |
||||
} else { |
||||
echo "Error preparing statement: " . mysqli_error($conn); |
||||
} |
||||
|
||||
mysqli_close($conn); |
||||
} |
||||
?> |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<title>Donate Food</title> |
||||
<link rel="stylesheet" href="donor.css"> |
||||
</head> |
||||
<body> |
||||
<div class="hero"> |
||||
<nav> |
||||
<img src="logo.png" alt="" class="logo"> |
||||
<h2 class="ffg">FoodShare</h2> |
||||
<!-- <ul> |
||||
<li><a href="#">Contribution</a></li> |
||||
<li><a href="#">Donate</a></li> |
||||
</ul> --> |
||||
<img src="anshuman.jpg" alt="" class="user-pic" onclick="toggleMenu()"> |
||||
|
||||
<div class="sub-menu-wrap hidden" id="subMenu"> |
||||
<div class="sub-menu"> |
||||
<div class="user-info"> |
||||
<img src="anshuman.jpg" alt="user" class="bigboy"> |
||||
<!-- extract name for donorhome --> |
||||
<h3>Anshuman Bist</h3> |
||||
</div> |
||||
<hr> |
||||
<a href="donorhome.php" class="sub-menu-link"> |
||||
<img src="chat-history-line.png" alt=""> |
||||
<p>Contribution History</p> |
||||
<span>></span> |
||||
</a> |
||||
<a href="donor.php" class="sub-menu-link"> |
||||
<img src="hand-heart-line.png" alt=""> |
||||
<p>Donate</p> |
||||
<span>></span> |
||||
</a> |
||||
<a href="home.html" class="sub-menu-link"> |
||||
<img src="logout-box-r-line.png" alt=""> |
||||
<p>Log Out</p> |
||||
<span>></span> |
||||
</a> |
||||
</div> |
||||
</div> |
||||
|
||||
</nav> |
||||
</div> |
||||
|
||||
|
||||
<div class="container"> |
||||
<div class="header"> |
||||
<h1><img src="logo.png" alt="logo" width="100" height="100" style="margin-right: 10px; border-radius: 100%;"></h1> |
||||
</div> |
||||
<h2>Food Donation Form</h2> |
||||
<p>Please provide correct information.</p> |
||||
<form action="donor.php" method="post"> |
||||
<label for="donorName">Donor Name</label> |
||||
<input type="text" id="donorName" name="donorName" placeholder="Enter your name" required> |
||||
|
||||
<label for="foodType">Food Type</label> |
||||
<input type="text" id="foodType" name="foodType" placeholder="e.g., Bread, Vegetables" required> |
||||
|
||||
<label for="quantity">Quantity</label> |
||||
<input type="text" id="quantity" name="quantity" placeholder="e.g., 10 kg" required> |
||||
|
||||
<label for="location">Location</label> |
||||
<input type="text" id="location" name="location" placeholder="e.g., Downtown" required> |
||||
|
||||
<label for="expirationDate">Expiration Date</label> |
||||
<input type="date" id="expirationDate" name="expirationDate" required> |
||||
|
||||
|
||||
<button type="submit">Submit Donation</button> |
||||
</form> |
||||
</div> |
||||
|
||||
<script> |
||||
let subMenu = document.getElementById("subMenu"); |
||||
|
||||
const toggleMenu = () =>{ |
||||
subMenu.classList.toggle("hidden") |
||||
} |
||||
</script> |
||||
|
||||
|
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,91 @@ |
||||
body{ |
||||
font-family: Arial,sans-serif; |
||||
background-size: cover; |
||||
background-repeat: no-repeat; |
||||
background-position: center; |
||||
background-color: beige; |
||||
margin: 0; |
||||
padding: 0; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
height: 100vh; |
||||
} |
||||
|
||||
.container{ |
||||
background-color: #faf4f5; |
||||
padding: 20px; |
||||
border-radius: 15%; |
||||
width: 100%; |
||||
height: 100%; |
||||
max-width: 500px; |
||||
max-height: 450px; |
||||
|
||||
} |
||||
|
||||
header h1{ |
||||
display: flex; |
||||
text-align: center; |
||||
color: #333; |
||||
} |
||||
|
||||
.profile-section{ |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
.profile-box{ |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 20px; |
||||
} |
||||
|
||||
.profile{ |
||||
width: 80px; |
||||
height: 80px; |
||||
border-radius: 50%; |
||||
overflow: hidden; |
||||
background-color: #ddd; |
||||
box-shadow: 0 0 10px rgba(0,0,0,0.1); |
||||
|
||||
|
||||
} |
||||
|
||||
.profile img{ |
||||
width: 100%; |
||||
height: 100%; |
||||
object-fit: cover; |
||||
} |
||||
|
||||
.profile-info .stat{ |
||||
margin-bottom: 10px; |
||||
} |
||||
|
||||
.profile-info label{ |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.profile-info span{ |
||||
font-size: 16px; |
||||
color: #555; |
||||
} |
||||
|
||||
.actions{ |
||||
margin-top: 20px; |
||||
text-align: center; |
||||
} |
||||
|
||||
|
||||
button{ |
||||
background-color: #28a745; |
||||
color: #fff; |
||||
border: none; |
||||
padding: 10px 20px; |
||||
margin: 5px 0; |
||||
border-radius: 5px; |
||||
cursor:pointer; |
||||
} |
||||
|
||||
button:hover{ |
||||
background-color: #218838; |
||||
} |
||||
|
||||
@ -0,0 +1,130 @@ |
||||
<?php |
||||
|
||||
session_start(); |
||||
|
||||
|
||||
if (!isset($_SESSION['user'])) { |
||||
header("Location: login.php"); |
||||
exit; |
||||
} |
||||
|
||||
|
||||
$donor_name = $_SESSION['user']['name']; |
||||
|
||||
|
||||
$db_server = "localhost"; |
||||
$db_user = "root"; |
||||
$db_pass = ""; |
||||
$db_name = "foodshare"; |
||||
|
||||
|
||||
$conn = mysqli_connect($db_server, $db_user, $db_pass, $db_name); |
||||
|
||||
|
||||
if (!$conn) { |
||||
die("Connection failed: " . mysqli_connect_error()); |
||||
} |
||||
$query = "SELECT * FROM donations WHERE donor_name = ?"; |
||||
$stmt = mysqli_prepare($conn, $query); |
||||
mysqli_stmt_bind_param($stmt, "s", $donor_name); |
||||
mysqli_stmt_execute($stmt); |
||||
$result = mysqli_stmt_get_result($stmt); |
||||
|
||||
$query = "SELECT * FROM donations WHERE donor_name = ?"; |
||||
$stmt = mysqli_prepare($conn, $query); |
||||
mysqli_stmt_bind_param($stmt, "s", $donor_name); |
||||
mysqli_stmt_execute($stmt); |
||||
$result = mysqli_stmt_get_result($stmt); |
||||
|
||||
|
||||
$donations = mysqli_fetch_all($result, MYSQLI_ASSOC); |
||||
|
||||
|
||||
mysqli_stmt_close($stmt); |
||||
mysqli_close($conn); |
||||
?> |
||||
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<title>Donor Home</title> |
||||
<link rel="stylesheet" href="donorhome.css"> |
||||
</head> |
||||
<body> |
||||
|
||||
<div class="container"> |
||||
<header> |
||||
<h1>Welcome, <span id="user-name"><?php echo htmlspecialchars($donor_name); ?></span>!</h1>
|
||||
</header> |
||||
|
||||
<div class="profile-section"> |
||||
<div class="profile-box"> |
||||
<div class="profile"> |
||||
<img id="profile-picture" src="anshuman.jpg" alt="Profile Picture"> |
||||
</div> |
||||
<div class="profile-info"> |
||||
<div class="stat"> |
||||
<label>Rating:</label> |
||||
<span id="rating">Null</span> |
||||
</div> |
||||
<div class="stat"> |
||||
<label>Contribution Points:Null</label> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="actions"> |
||||
<button id="donate-food">Donate Food</button> |
||||
<button id="toggle-history-btn" class="toggle-btn">Show Contribution History</button> |
||||
|
||||
</div> |
||||
|
||||
|
||||
<div class="history-section" id="history-section"> |
||||
<h2>Contribution History</h2> |
||||
<?php if (empty($donations)): ?> |
||||
<p>Donated 10 kg of Vegetables from Anamnagar on 2025-01-12 22:25:37. Expires on 2025-01-20.</p> |
||||
<?php else: ?> |
||||
<ul id="history-list" class="history-list"> |
||||
<?php foreach ($donations as $donation): ?> |
||||
<li> |
||||
Donated <?php echo htmlspecialchars($donation['quantity']); ?> of
|
||||
<?php echo htmlspecialchars($donation['food_type']); ?> from
|
||||
<?php echo htmlspecialchars($donation['location']); ?> on
|
||||
<?php echo htmlspecialchars($donation['donation_date']); ?>
|
||||
(Expires on <?php echo htmlspecialchars($donation['expiration_date']); ?>)
|
||||
</li> |
||||
<?php endforeach; ?> |
||||
</ul> |
||||
<?php endif; ?> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
<script> |
||||
|
||||
const toggleHistoryBtn = document.getElementById('toggle-history-btn'); |
||||
const historySection = document.getElementById('history-section'); |
||||
|
||||
toggleHistoryBtn.addEventListener('click', function() { |
||||
|
||||
if (historySection.style.display === 'none' || historySection.style.display === '') { |
||||
historySection.style.display = 'block'; |
||||
toggleHistoryBtn.textContent = 'Hide Contribution History'; |
||||
} else { |
||||
historySection.style.display = 'none'; |
||||
toggleHistoryBtn.textContent = 'Show Contribution History'; |
||||
} |
||||
}); |
||||
|
||||
|
||||
document.getElementById("donate-food").addEventListener("click", function() { |
||||
window.location.href = "donor.php"; |
||||
}); |
||||
</script> |
||||
</body> |
||||
</html> |
||||
|
After Width: | Height: | Size: 410 B |
|
After Width: | Height: | Size: 1.2 MiB |
@ -0,0 +1,193 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<title>Document</title> |
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"> |
||||
<link rel="stylesheet" href="style.css"> |
||||
</head> |
||||
<body> |
||||
<!--header/ navigationb bar--> |
||||
<header> |
||||
<nav class="navbar section-content"> |
||||
<a href="#" class="nav-logo"> |
||||
<!-- <img src="logo.png" alt="" class="little-logo"> --> |
||||
<h2 class="logo-text">FoodShare</h2> |
||||
</a> |
||||
<ul class="nav-menu"> |
||||
<button id="menu-close-button" class="fas fa-times"></button> |
||||
<li class="nav-item"> |
||||
<a href="#" class="nav-link">Home</a> |
||||
</li> |
||||
<li class="nav-item"> |
||||
<a href="#about" class="nav-link">About</a> |
||||
</li> |
||||
<li class="nav-item"> |
||||
<a href="#team" class="nav-link">Team</a> |
||||
</li> |
||||
<li class="nav-item"> |
||||
<a href="#gallery" class="nav-link">Gallery</a> |
||||
</li> |
||||
<li class="nav-item"> |
||||
<a href="#contact" class="nav-link">Contact</a> |
||||
</li> |
||||
<li class="nav-item"> |
||||
<!-- link login page --> |
||||
<a href="login.php" class="nav-link">LogIn</a> |
||||
</li> |
||||
<li class="nav-item"> |
||||
<!-- Sign Up page --> |
||||
<a href="signup.php" class="nav-link">SignUp</a> |
||||
</li> |
||||
</ul> |
||||
<button id="menu-open-button" class="fas fa-bars"></button> |
||||
|
||||
</nav> |
||||
</header> |
||||
|
||||
<main> |
||||
<!--home--> |
||||
<section class="home-section" > |
||||
<div class="section-content"> |
||||
<div class="home-details"> |
||||
<h2 class="title">Welcome To</h2> |
||||
<h2 class="my">FoodShare</h2> |
||||
|
||||
<p class="description" style="text-align: justify;">Welcome to FoodShare, where sharing is caring! At FoodShare, we believe in creating a community that connects people through the love of food. Whether you'r donating the surplus food or searching a helping hand, we're here to make it simple and impactful. Join us in making a impactful difference in the community. Together we can make a difference!</p> |
||||
<div class="buttons"> |
||||
<a href="signup.php" class="button order now">Join </a> |
||||
<a href="#contact" class="button contact us">Contact Us </a> |
||||
</div> |
||||
</div> |
||||
<div class="home-image-wrapper"> |
||||
<img src="home-background.jpg" alt="" class="home-image"> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
<!--about--> |
||||
<section class="about-section" id="about"> |
||||
<div class="section-content"> |
||||
<div class="about-image-wrapper"> |
||||
<img src="logo-about.png" alt="" class="about-img"> |
||||
</div> |
||||
<div class="about-details"> |
||||
<h2 class="section-title">About Us</h2> |
||||
<p class="text">Foodshare is an online platform that connects food donors with recipients in real time. We are non-profit organization with the aim of making significant impact in the community.</p> |
||||
<div class="social-link-list"> |
||||
<a href="#" class="social-link"><i class="fa-brands fa-facebook"></i></a> |
||||
<a href="#" class="social-link"><i class="fa-brands fa-instagram"></i></a> |
||||
<a href="#" class="social-link"><i class="fa-brands fa-twitter"></i></a> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</section> |
||||
<!--team--> |
||||
<section class="team-section" id="team"> |
||||
<h2 class="section-title">Team</h2> |
||||
<div class="section-content"> |
||||
<div class="slider-container"> |
||||
<div class="slider-wrapper"> |
||||
<ul class="teams-list"> |
||||
<li class="teams"> |
||||
<img src="anshuman.jpg" alt="User" class="user-image"> |
||||
<h3 class="name">Anshuman Bist</h3> |
||||
|
||||
</li> |
||||
<li class="teams"> |
||||
<img src="pradip.jpg" alt="User" class="user-image"> |
||||
<h3 class="name">Pradip Rawal</h3> |
||||
|
||||
</li> |
||||
<li class="teams"> |
||||
<img src="user-image.png" alt="User" class="user-image"> |
||||
<h3 class="name">Prashant Joshi</h3> |
||||
|
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
<!-- Gallery --> |
||||
<section class="gallery-section" id="gallery"> |
||||
<h2 class="section-title">Gallery</h2> |
||||
<div class="section-content"> |
||||
<ul class="gallery-list"> |
||||
<li class="gallery-items"> |
||||
<img src="Anath1.png" alt="Gallery" class="gallery-image"> |
||||
</li> |
||||
<li class="gallery-items"> |
||||
<img src="anath-gang.png" alt="Gallery" class="gallery-image"> |
||||
</li> |
||||
<li class="gallery-items"> |
||||
<img src="i1.jpg" alt="Gallery" class="gallery-image"> |
||||
</li> |
||||
<li class="gallery-items"> |
||||
<img src="i2.jpg" alt="Gallery" class="gallery-image"> |
||||
</li> |
||||
<li class="gallery-items"> |
||||
<img src="i3.jpg" alt="Gallery" class="gallery-image"> |
||||
</li> |
||||
<li class="gallery-items"> |
||||
<img src="i4.jpg" alt="Gallery" class="gallery-image"> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
|
||||
</section> |
||||
<!-- contact --> |
||||
<section class="contact-section" id="contact"> |
||||
<h2 class="section-title">Contact Us</h2> |
||||
<div class="section-content"> |
||||
<ul class="contact-info-list"> |
||||
<li class="contact-info"> |
||||
<i class="fa-solid fa-location-crosshairs"></i> |
||||
<p>Maiti Devi Marg, Kathmandu 44600</p> |
||||
</li> |
||||
<li class="contact-info"> |
||||
<i class="fa-solid fa-envelope"></i> |
||||
<p>info@coffeeshopwebsite.com</p> |
||||
</li> |
||||
<li class="contact-info"> |
||||
<i class="fa-solid fa-phone"></i> |
||||
<p>+977 9745808586</p> |
||||
</li> |
||||
<li class="contact-info"> |
||||
<i class="fa-solid fa-clock"></i> |
||||
<p>Monday - Friday; 9:00 AM - 5:00 PM </p> |
||||
</li> |
||||
</ul> |
||||
<form action="#" class="contact-form"> |
||||
<input type="text" placeholder="Your name" class="form-input" required> |
||||
<input type="email" placeholder="Your email" class="form-input" required> |
||||
<textarea placeholder="Your message" class="form-input" required> </textarea> |
||||
<button class="submit-button">Submit</button> |
||||
|
||||
</form> |
||||
</div> |
||||
</section> |
||||
<!-- foot --> |
||||
<footer class="footer-section"> |
||||
<div class="section-content"> |
||||
<p class="copyright-text">@ 2025 FoodShare</p> |
||||
<div class="social-link-list"> |
||||
<a href="#" class="social-link"><i class="fa-brands fa-facebook"></i></a> |
||||
<a href="#" class="social-link"><i class="fa-brands fa-instagram"></i></a> |
||||
<a href="#" class="social-link"><i class="fa-brands fa-twitter"></i></a> |
||||
|
||||
</div> |
||||
<p class="policy-text"> |
||||
<a href="#" class="policy-link">Privacy Policy</a> |
||||
<span class="separator">•</span> |
||||
<a href="#" class="policy-link">Health Policy</a> |
||||
</p> |
||||
</div> |
||||
</footer> |
||||
</main> |
||||
|
||||
<script src="script.js"></script> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,93 @@ |
||||
@import url('https://fonts.googleapis.com/css2?family=Miniver&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap'); |
||||
|
||||
|
||||
*{ |
||||
margin: 0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body{ |
||||
font-family: "Poppins",sans-serif; |
||||
background-color: beige; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
height: 100vh; |
||||
color: #333; |
||||
} |
||||
|
||||
.container{ |
||||
background-color: #faf4f5; |
||||
padding: 20px; |
||||
border-radius: 10px; |
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
||||
width: 100%; |
||||
height: 100%; |
||||
max-width: 450px; |
||||
max-height: 450px; |
||||
} |
||||
|
||||
h1{ |
||||
text-align: center; |
||||
font-size: 1.8em; |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
label{ |
||||
font-weight: bold; |
||||
display: block; |
||||
margin-bottom: 10px; |
||||
color: #555; |
||||
} |
||||
|
||||
.abc{ |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
input,select,button{ |
||||
width: 100%; |
||||
padding: 12px; |
||||
border: 1px solid #ddd; |
||||
border-radius: 5px; |
||||
font-size: 1em; |
||||
} |
||||
|
||||
input:focus, select:focus{ |
||||
outline: none; |
||||
border-color: #4caf50; |
||||
box-shadow: 0 0 5px #218838(0,123,255,0.5); |
||||
} |
||||
|
||||
button{ |
||||
text-transform: uppercase; |
||||
margin-top: 10px; |
||||
background-color: #55AD9B; |
||||
color: white; |
||||
border:none; |
||||
cursor: pointer; |
||||
font-size: 1.1em; |
||||
transition: background-color 0.3s ease; |
||||
margin-bottom: 10px; |
||||
|
||||
} |
||||
|
||||
button:hover{ |
||||
background-color: #218838; |
||||
} |
||||
|
||||
.logo{ |
||||
height: 70px; |
||||
width: 70px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content:space-between ; |
||||
} |
||||
.def{ |
||||
margin-right: 10px; |
||||
} |
||||
.iou{ |
||||
margin-top: 10px; |
||||
display: flex; |
||||
gap: 20px; |
||||
} |
||||
@ -0,0 +1,98 @@ |
||||
<?php |
||||
|
||||
$db_server = "localhost"; |
||||
$db_user = "root"; |
||||
$db_pass = ""; |
||||
$db_name = "foodshare"; |
||||
|
||||
|
||||
$conn = mysqli_connect($db_server, $db_user, $db_pass, $db_name); |
||||
|
||||
|
||||
if (!$conn) { |
||||
die("Connection failed: " . mysqli_connect_error()); |
||||
} |
||||
|
||||
|
||||
session_start(); |
||||
|
||||
$error_message = ""; |
||||
|
||||
|
||||
if ($_SERVER['REQUEST_METHOD'] === 'POST') { |
||||
$email = $_POST['email']; |
||||
$password = $_POST['password']; |
||||
|
||||
|
||||
$query = "SELECT *, 'donor' AS user_type FROM donor WHERE email = ? AND password = ? |
||||
UNION |
||||
SELECT *, 'receiver' AS user_type FROM receiver WHERE email = ? AND password = ?"; |
||||
$stmt = mysqli_prepare($conn, $query); |
||||
|
||||
if ($stmt) { |
||||
|
||||
mysqli_stmt_bind_param($stmt, "ssss", $email, $password, $email, $password); |
||||
mysqli_stmt_execute($stmt); |
||||
$result = mysqli_stmt_get_result($stmt); |
||||
|
||||
if ($result && mysqli_num_rows($result) > 0) { |
||||
$user = mysqli_fetch_assoc($result); |
||||
|
||||
|
||||
$_SESSION['user'] = [ |
||||
'name' => $user['name'], |
||||
'email' => $user['email'], |
||||
'user_type' => $user['user_type'], |
||||
]; |
||||
|
||||
if ($user['user_type'] === 'donor') { |
||||
header("Location: donorhome.php"); |
||||
} elseif ($user['user_type'] === 'receiver') { |
||||
header("Location: receiver.php"); |
||||
} |
||||
exit; |
||||
} else { |
||||
$error_message = "Invalid email or password."; |
||||
} |
||||
|
||||
mysqli_stmt_close($stmt); |
||||
} else { |
||||
$error_message = "Database error: " . mysqli_error($conn); |
||||
} |
||||
|
||||
mysqli_close($conn); |
||||
} |
||||
?> |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<title>Login </title> |
||||
<link rel="stylesheet" href="login.css"> |
||||
</head> |
||||
<body> |
||||
<div class="container"> |
||||
<img src="logo.png" alt="" class="logo"> |
||||
<h1>Login</h1> |
||||
|
||||
|
||||
<?php if (!empty($error_message)): ?> |
||||
<div class="error-message"> |
||||
<p><?php echo htmlspecialchars($error_message); ?></p>
|
||||
</div> |
||||
<?php endif; ?> |
||||
|
||||
<form action="login.php" method="post" id="login-form"> |
||||
<label for="email">Email:</label> |
||||
<input type="email" id="email" name="email" placeholder="Enter your email" required> |
||||
|
||||
<label class="iou" for="password">Password:</label> |
||||
<input type="password" id="password" name="password" placeholder="Enter your password" required> |
||||
|
||||
<button type="submit">Login</button> |
||||
<p>Don't have an account? <a class="def" href="signup.php">Sign Up</a></p> |
||||
</form> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
|
After Width: | Height: | Size: 899 KiB |
|
After Width: | Height: | Size: 238 B |
|
After Width: | Height: | Size: 47 KiB |
@ -0,0 +1,267 @@ |
||||
*{ |
||||
margin:0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
font-family: 'Poppins', sans-serif; |
||||
} |
||||
|
||||
body{ |
||||
font-family: Arial,sans-serif; |
||||
background-color: beige; |
||||
color: #333; |
||||
line-height: 1.6; |
||||
} |
||||
|
||||
/* a{ |
||||
text-decoration: none; |
||||
color: #4CAF50; |
||||
} */ |
||||
|
||||
header{ |
||||
background-image: url('logo.png'); |
||||
color: white; |
||||
text-align: center; |
||||
padding: 60px 20px; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
.header p{ |
||||
font-size: 1.2em; |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
.container { |
||||
max-width: 700px; |
||||
margin-top: 30px; |
||||
margin: 30px auto; |
||||
padding: 20px; |
||||
background: #faf4f5; |
||||
border-radius: 10px; |
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.1); |
||||
} |
||||
|
||||
/* .container h2{ |
||||
font-size: 10em; |
||||
color: black; |
||||
border-bottom: 2px ; |
||||
padding-bottom: 5px; |
||||
margin-bottom: 20px; |
||||
} */ |
||||
|
||||
form{ |
||||
margin-bottom: 30px; |
||||
} |
||||
|
||||
label{ |
||||
font-weight: bold; |
||||
display: block; |
||||
margin-bottom: 8px; |
||||
color: #555; |
||||
|
||||
} |
||||
|
||||
input,select,button{ |
||||
width: 100%; |
||||
padding: 12px; |
||||
margin-bottom: 15px; |
||||
border: 1px solid #ddd; |
||||
border-radius: 5px; |
||||
font-size: 1em; |
||||
} |
||||
|
||||
input:focus, select:focus{ |
||||
outline: none; |
||||
border-color: #4CAF50; |
||||
box-shadow: 0 0 5px #4CAF50(0, 123,255,0.5); |
||||
} |
||||
|
||||
button{ |
||||
background-color: #4CAF50; |
||||
color: white; |
||||
border: none; |
||||
cursor: pointer; |
||||
font-size: 1.1em; |
||||
transition: background-color 0.3s ease; |
||||
} |
||||
|
||||
button:hover{ |
||||
background-color: #4CAF50; |
||||
} |
||||
|
||||
.matches{ |
||||
background: #f9f9f9; |
||||
padding: 20px; |
||||
border-radius: 10px; |
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1); |
||||
} |
||||
|
||||
.match-item{ |
||||
padding: 15px; |
||||
margin-bottom: 15px; |
||||
border: 1px solid #cce5ff; |
||||
background-color: #e6f0ff; |
||||
border-radius: 5px; |
||||
font-size: 1em; |
||||
color: #333; |
||||
|
||||
} |
||||
|
||||
.match-item:hover{ |
||||
background-color: #d9eaff; |
||||
} |
||||
|
||||
|
||||
.footer { |
||||
text-align: center; |
||||
padding: 15px 20px; |
||||
background: #4CAF50; |
||||
color: white; |
||||
margin-top: 30px; |
||||
font-size: 0.9em; |
||||
} |
||||
|
||||
.popup{ |
||||
position: fixed; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%,-50%); |
||||
background-color: #ffffff; |
||||
border: 1px solid #ccc; |
||||
padding: 20px; |
||||
border-radius: 5px; |
||||
display: none; |
||||
} |
||||
|
||||
p{ |
||||
margin-top: 5px; |
||||
margin-bottom: 5px; |
||||
|
||||
} |
||||
|
||||
/* navigation-bar */ |
||||
.hero{ |
||||
width: 100%; |
||||
min-height: 30vh; |
||||
background: beige; |
||||
color: #525252; |
||||
} |
||||
|
||||
nav{ |
||||
background: #cb997e; |
||||
width: 100%; |
||||
padding: 10px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
position: relative; |
||||
} |
||||
.logo{ |
||||
width: 50px; |
||||
} |
||||
.user-pic{ |
||||
width: 60px; |
||||
border-radius: 50%; |
||||
cursor: pointer; |
||||
margin-left: 50px; |
||||
} |
||||
|
||||
nav ul{ |
||||
width: 100%; |
||||
text-align: right; |
||||
} |
||||
nav ul li{ |
||||
display: inline-block; |
||||
list-style: none; |
||||
margin: 10px 20px; |
||||
} |
||||
|
||||
nav ul li a{ |
||||
color:#ffffff; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
.sub-menu-wrap{ |
||||
position: absolute; |
||||
top: 100%; |
||||
right: 10%; |
||||
width: 320px; |
||||
max-height: 0px; |
||||
overflow: hidden; |
||||
transition: max-height 0.5s; |
||||
} |
||||
|
||||
.sub-menu-wrap.open-menu{ |
||||
max-height: 400px; |
||||
} |
||||
|
||||
.sub-menu-wrap{ |
||||
background: white; |
||||
margin: 10px; |
||||
padding: 20px; |
||||
} |
||||
|
||||
.user-info{ |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
} |
||||
.user-info h3{ |
||||
font-weight: 500; |
||||
} |
||||
.bigboy{ |
||||
max-width: fit-content; |
||||
max-height: 60px; |
||||
margin-left: 20px; |
||||
|
||||
} |
||||
.user-info-img{ |
||||
/* adjust image */ |
||||
width: 60px; |
||||
border-radius: 50%; |
||||
margin-right: 25px; |
||||
} |
||||
|
||||
.sub-menu hr{ |
||||
border: 0; |
||||
height: 1px; |
||||
width: 100%; |
||||
background: #ccc; |
||||
margin: 15px 0 10px; |
||||
} |
||||
|
||||
|
||||
.sub-menu-link{ |
||||
display: flex; |
||||
align-items: center; |
||||
text-decoration: none; |
||||
color: #525252; |
||||
margin: 12px 0; |
||||
} |
||||
|
||||
.sub-menu-link p{ |
||||
width: 100%; |
||||
|
||||
} |
||||
|
||||
.sub-menu-link img{ |
||||
width: 40px; |
||||
background: #e5e5e5; |
||||
border-radius: 50%; |
||||
padding: 8px; |
||||
margin-right: 15px; |
||||
} |
||||
|
||||
.sub-menu-link span{ |
||||
font-size: 22px; |
||||
transition: transform o.5s; |
||||
} |
||||
|
||||
.sub-menu-link:hover span{ |
||||
transform: translate(5px); |
||||
} |
||||
|
||||
.sub-menu-link:hover p{ |
||||
font-weight: 600; |
||||
} |
||||
@ -0,0 +1,68 @@ |
||||
<?php |
||||
$servername = "localhost"; |
||||
$username = "root"; |
||||
$password = ""; |
||||
$dbname = "foodshare"; |
||||
|
||||
$conn = new mysqli($servername, $username, $password, $dbname); |
||||
|
||||
if ($conn->connect_error) { |
||||
die("Connection failed: " . $conn->connect_error); |
||||
} |
||||
|
||||
$message = ""; |
||||
|
||||
if ($_SERVER["REQUEST_METHOD"] == "POST") { |
||||
$name = $conn->real_escape_string($_POST['recipientName']); |
||||
$location = $conn->real_escape_string($_POST['recipientLocation']); |
||||
$foodNeeds = $conn->real_escape_string($_POST['foodNeeds']); |
||||
|
||||
$sql = "INSERT INTO recipient (name, location, food_needs) VALUES ('$name', '$location', '$foodNeeds')"; |
||||
|
||||
if ($conn->query($sql) === TRUE) { |
||||
$message = "Your request has been matched. Food type: Vegetables , Pickup Location: Anaamnagar "; |
||||
} else { |
||||
$message = "Error: " . $sql . "<br>" . $conn->error; |
||||
} |
||||
} |
||||
|
||||
$conn->close(); |
||||
?> |
||||
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<title>Receiver</title> |
||||
<link rel="stylesheet" href="receiver.css"> |
||||
<script> |
||||
// Display the message as a popup if it's set |
||||
function showMessage(message) { |
||||
if (message) { |
||||
alert(message); |
||||
} |
||||
} |
||||
</script> |
||||
</head> |
||||
<body onload="showMessage('<?= htmlspecialchars($message) ?>')">
|
||||
|
||||
|
||||
<div class="container"> |
||||
<img src="logo.png" alt="" class="logo"> |
||||
<h2>Request Your Needs</h2> |
||||
<form method="POST" action=""> |
||||
<label for="recipientName">Recipient Name</label> |
||||
<input type="text" id="recipientName" name="recipientName" placeholder="Enter organization name" required> |
||||
|
||||
<label for="recipientLocation">Location</label> |
||||
<input type="text" id="recipientLocation" name="recipientLocation" placeholder="e.g., kathmandu" required> |
||||
|
||||
<label for="foodNeeds">Food Needs</label> |
||||
<input type="text" id="foodNeeds" name="foodNeeds" placeholder="e.g., Any thing, Vegetables" required> |
||||
|
||||
<button type="submit">Submit Needs</button> |
||||
</form> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,8 @@ |
||||
const menuOpenButton = document.querySelector("#menu-open-button"); |
||||
const menuCloseButton = document.querySelector("#menu-close-button"); |
||||
|
||||
menuOpenButton.addEventListener("click", () =>{ |
||||
document.body.classList.toggle("show-mobile-menu"); |
||||
}); |
||||
|
||||
menuCloseButton.addEventListener("click",() => menuOpenButton.click()); |
||||
@ -0,0 +1,96 @@ |
||||
@import url('https://fonts.googleapis.com/css2?family=Miniver&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap'); |
||||
|
||||
|
||||
*{ |
||||
margin: 0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body{ |
||||
font-family: "Poppins",sans-serif; |
||||
background-color: beige; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
height: 100vh; |
||||
color: #333; |
||||
} |
||||
|
||||
.container{ |
||||
background-color: #faf4f5; |
||||
padding: 20px; |
||||
border-radius: 10px; |
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
||||
width: 100%; |
||||
height: 100%; |
||||
max-width: 450px; |
||||
max-height: 650px; |
||||
} |
||||
|
||||
h1{ |
||||
text-align: center; |
||||
font-size: 1.8em; |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
label{ |
||||
font-weight: bold; |
||||
display: block; |
||||
margin-bottom: 10px; |
||||
color: #555; |
||||
} |
||||
|
||||
.abc{ |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
input,select,button{ |
||||
width: 100%; |
||||
padding: 12px; |
||||
border: 1px solid #ddd; |
||||
border-radius: 5px; |
||||
font-size: 1em; |
||||
} |
||||
|
||||
input:focus, select:focus{ |
||||
outline: none; |
||||
border-color: #4caf50; |
||||
box-shadow: 0 0 5px #218838(0,123,255,0.5); |
||||
} |
||||
|
||||
button{ |
||||
text-transform: uppercase; |
||||
margin-top: 10px; |
||||
background-color: #55AD9B; |
||||
color: white; |
||||
border:none; |
||||
cursor: pointer; |
||||
font-size: 1.1em; |
||||
transition: background-color 0.3s ease; |
||||
|
||||
|
||||
} |
||||
|
||||
button:hover{ |
||||
background-color: #218838; |
||||
} |
||||
|
||||
.logo{ |
||||
height: 70px; |
||||
width: 70px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content:space-between ; |
||||
} |
||||
.def{ |
||||
margin-right: 10px; |
||||
} |
||||
.iou{ |
||||
margin-top: 10px; |
||||
display: flex; |
||||
gap: 20px; |
||||
} |
||||
.full, .email, .pass{ |
||||
margin-top: 8px; |
||||
} |
||||
@ -0,0 +1,17 @@ |
||||
document.addEventListener("DOMContentLoaded",()=>{ |
||||
const signupForm=document.getElementById("sign-form"); |
||||
signupForm.addEventListener("submit",(event)=>{ |
||||
event.preventDefault(); |
||||
|
||||
const userType=document.getElementById("user-type").value; |
||||
const name=document.getElementById("name").value; |
||||
const email=document.getElementById("email").value; |
||||
const password=document.getElementById("password").value; |
||||
|
||||
if(!name|| !email|| !password){ |
||||
alert("please fill in the field."); |
||||
return; |
||||
} |
||||
signupForm.onsubmit(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,74 @@ |
||||
<?php |
||||
$db_server="localhost"; |
||||
$db_user="root"; |
||||
$db_pass=""; |
||||
$db_name="foodshare"; |
||||
|
||||
$conn=mysqli_connect($db_server,$db_user,$db_pass,$db_name); |
||||
if(!$conn){ |
||||
die("Connection failed:".mysqli_connect_error()); |
||||
} |
||||
if($_SERVER['REQUEST_METHOD']==='POST'){ |
||||
$user_type=$_POST['user_type']; |
||||
$name=$_POST['name']; |
||||
$email=$_POST['email']; |
||||
$password=$_POST['password']; |
||||
|
||||
if($user_type=='donor'){ |
||||
$table='donor'; |
||||
}elseif ($user_type=='receiver') { |
||||
$table='receiver'; |
||||
}else{ |
||||
die("invalid user type selected."); |
||||
} |
||||
$query="INSERT INTO $table(name,email,password) VALUES(?,?,?)"; |
||||
$stmt=mysqli_prepare($conn,$query); |
||||
if($stmt){ |
||||
mysqli_stmt_bind_param($stmt,"sss",$name,$email,$password); |
||||
if(mysqli_stmt_execute($stmt)){ |
||||
header("Location:login.php"); |
||||
exit; |
||||
} |
||||
} |
||||
} |
||||
|
||||
?> |
||||
|
||||
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<link rel="stylesheet" href="signup.css"> |
||||
<title>Signup page</title> |
||||
|
||||
|
||||
</head> |
||||
<body> |
||||
<div class="container"> |
||||
<img src="logo.png" alt="" class="logo"> |
||||
<h1> Sign Up </h1> |
||||
<form action="signup.php" method="post" id="signup-form"> |
||||
<label for ="user-type">Select Your Role:</label> |
||||
<select id="user-type" name="user_type" required> |
||||
<option value="donor">Donor</option> |
||||
<option value="receiver">Receiver</option> |
||||
</select> |
||||
<label class="full" for="name">Full Name</label> |
||||
<input type="text" id="name" name="name" placeholder="Enter your full name"required> |
||||
|
||||
<label class="email" for="email">Email</label> |
||||
<input type="email" id="email" name="email" placeholder="Enter your email"required> |
||||
|
||||
<label class="pass" for="password">Password</label> |
||||
<input type="password" id="password" name="password" placeholder="Sign password"required><br><br> |
||||
|
||||
<button type="submit">Sign Up</button><br> |
||||
<p class="iou"> Already have an account?<a href="login.php">Login</a></p> |
||||
|
||||
</form> |
||||
</div> |
||||
<script src="signup.js"></script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,482 @@ |
||||
@import url('https://fonts.googleapis.com/css2?family=Miniver&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap'); |
||||
*{ |
||||
font-family: "Poppins",sans-serif; |
||||
margin: 0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
} |
||||
:root { |
||||
/* Colors */ |
||||
--white-color: #fff; |
||||
--dark-color: #252525; |
||||
--primary-color: #3b141c; |
||||
--secondary-color: #f3961c; |
||||
--light-pink-color: #faf4f5; |
||||
--medium-gray-color: #ccc; |
||||
--beige-color: #f5f5dc; |
||||
--Ivory-color:#FFFFF0; |
||||
--light-green-color:#90EE90; |
||||
--one-color:#E5D0AC; |
||||
--two-color:#FEF9E1; |
||||
|
||||
|
||||
/* Font size */ |
||||
--font-size-s: 0.9rem; |
||||
--font-size-n: 1rem; |
||||
--font-size-m: 1.12rem; |
||||
--font-size-l: 1.5rem; |
||||
--font-size-xl: 2rem; |
||||
--font-size-xxl: 2.3rem; |
||||
|
||||
/* Font weight */ |
||||
--font-weight-normal: 400; |
||||
--font-weight-medium: 500; |
||||
--font-weight-semibold: 600; |
||||
--font-weight-bold: 700; |
||||
|
||||
/* Border radius */ |
||||
--border-radius-s: 8px; |
||||
--border-radius-m: 30px; |
||||
--border-radius-circle: 50%; |
||||
|
||||
/* Site max width */ |
||||
--site-max-width: 1300px; |
||||
} |
||||
/* style for the whole site*/ |
||||
ul{ |
||||
list-style: none; |
||||
} |
||||
|
||||
a{ |
||||
text-decoration: none; |
||||
} |
||||
button{ |
||||
cursor:pointer; |
||||
border: none; |
||||
background: none; |
||||
} |
||||
|
||||
img{ |
||||
width:100%; |
||||
} |
||||
.section-content{ |
||||
margin: 0 auto; |
||||
padding: 0 15px; |
||||
max-width: var(--site-max-width); |
||||
|
||||
} |
||||
|
||||
.section-title{ |
||||
text-align: center; |
||||
padding: 60px 0 100px; |
||||
text-transform: uppercase; |
||||
font-size: var(--font-size-xl); |
||||
} |
||||
|
||||
.section-title::after{ |
||||
content: ""; |
||||
width: 80px; |
||||
height: 5px; |
||||
display: block; |
||||
margin: 10px auto 0; |
||||
border-radius: var(--border-radius-s); |
||||
background: var(--secondary-color); |
||||
} |
||||
|
||||
/*Navigation bar*/ |
||||
header{ |
||||
position: fixed; |
||||
width: 100%; |
||||
z-index: 5; |
||||
background: #cb997e; |
||||
} |
||||
header .navbar{ |
||||
display: flex; |
||||
padding: 20px; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
|
||||
} |
||||
.navbar .nav-logo .logo-text{ |
||||
color: var(--white-color); |
||||
font-size: var(--font-size-xl); |
||||
font-weight: var(--font-weight-semibold); |
||||
} |
||||
|
||||
.navbar .nav-menu{ |
||||
display: flex; |
||||
gap: 10px; |
||||
} |
||||
|
||||
|
||||
|
||||
.navbar .nav-menu .nav-link{ |
||||
padding: 10px 18px; |
||||
color: var(--white-color); |
||||
font-size: var(--font-size-m); |
||||
border-radius: var(--border-radius-m); |
||||
transition: 0.3s ease; |
||||
} |
||||
|
||||
.navbar .nav-menu .nav-link:hover { |
||||
background: var(--secondary-color); |
||||
color: var(--primary-color); |
||||
} |
||||
|
||||
.navbar :where(#menu-close-button, #menu-open-button) { |
||||
display: none; |
||||
} |
||||
|
||||
/* .little-logo{ |
||||
height: 40px; |
||||
width: 40px; |
||||
} */ |
||||
|
||||
/*background ko color*/ |
||||
.home-section{ |
||||
background: #ddbea9; |
||||
} |
||||
.home-section .section-content{ |
||||
display: flex; |
||||
align-items: center; |
||||
min-height: 100vh; |
||||
justify-content: space-between; |
||||
} |
||||
.home-section .home-details .title{ |
||||
font-size: var(--font-size-xl); |
||||
|
||||
} |
||||
|
||||
|
||||
.home-section .home-details .subtitle{ |
||||
margin-top: 8px; |
||||
max-width: 70%; |
||||
font-size: var(--font-size-xl); |
||||
font-weight: var(--font-weight-semibold); |
||||
} |
||||
.home-section .home-details .description{ |
||||
font-size: var(--font-size-m); |
||||
max-width: 70%; |
||||
margin: 24px 0 40px; |
||||
} |
||||
.home-section .home-details .buttons{ |
||||
display: flex; |
||||
gap: 23px; |
||||
|
||||
|
||||
} |
||||
.home-section .home-details .button{ |
||||
padding: 10px 26px; |
||||
border: 2px solid transparent; |
||||
color: var(--primary-color); |
||||
border-radius: var(--border-radius-m); |
||||
background: var(--secondary-color); |
||||
font-weight: var(--font-weight-medium); |
||||
transition: 0.3s ease; |
||||
} |
||||
.home-section .home-details .button:hover,.home-section .home-details .contact{ |
||||
color: white; |
||||
border-color: white; |
||||
background: transparent; |
||||
} |
||||
.home-section .home-details .contact:hover{ |
||||
color: var(--primary-color); |
||||
border-color: var(--secondary-color); |
||||
background: var(--secondary-color); |
||||
} |
||||
|
||||
.home-section .home-image-wrapper{ |
||||
max-width: 500px; |
||||
margin-right: 30px; |
||||
} |
||||
/* need assistance */ |
||||
/* |
||||
img.little-logo{ |
||||
height: 60px; |
||||
width: 80px; |
||||
object-fit:contain ; |
||||
left: -2%; |
||||
} */ |
||||
|
||||
|
||||
|
||||
/*about-part*/ |
||||
.about-section{ |
||||
padding: 120px 0; |
||||
background: var(--light-pink-color); |
||||
|
||||
} |
||||
|
||||
.about-section .section-content{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
gap: 50px; |
||||
} |
||||
|
||||
.about-section .about-image-wrapper .about-image{ |
||||
width: 250px; |
||||
height: 250px; |
||||
object-fit: cover; |
||||
border-radius: var(--border-radius-circle); |
||||
} |
||||
|
||||
.about-section .about-details .section-title{ |
||||
padding: 0; |
||||
} |
||||
|
||||
.about-section .about-details{ |
||||
max-width: 50%; |
||||
} |
||||
|
||||
|
||||
.about-section .about-details .text{ |
||||
line-height: 30px; |
||||
margin: 50px 0 30px; |
||||
text-align: center; |
||||
font-size: var(--font-size-m); |
||||
} |
||||
|
||||
.about-section .about-details .social-link-list{ |
||||
display: flex; |
||||
gap: 25px; |
||||
justify-content: center; |
||||
} |
||||
|
||||
.about-section .social-link-list .social-link{ |
||||
color: var(--primary-color); |
||||
font-size: var(--font-size-l); |
||||
transition: 0.2s ease; |
||||
} |
||||
|
||||
.about-section .social-link-list .social-link:hover{ |
||||
color: var(--secondary-color); |
||||
} |
||||
|
||||
/*team-part*/ |
||||
.team-section{ |
||||
padding: 50px 0 100px; |
||||
background: var(--light-pink-color); |
||||
} |
||||
|
||||
.team-section .teams{ |
||||
display: flex; |
||||
flex-direction: column; |
||||
padding: 35px; |
||||
text-align: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
.team-section .teams .user-image{ |
||||
width: 180px; |
||||
height: 180px; |
||||
object-fit: cover; |
||||
border-radius: var(--border-radius-circle); |
||||
margin-bottom: 50px; |
||||
} |
||||
|
||||
.team-section .teams .name{ |
||||
margin-bottom: 16px; |
||||
font-size: var(--font-size-m); |
||||
} |
||||
|
||||
.team-section .teams .role{ |
||||
line-height: 25px; |
||||
|
||||
|
||||
} |
||||
|
||||
ul.teams-list { |
||||
display: flex |
||||
; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
|
||||
/* gallery */ |
||||
.gallery-section .gallery-list { |
||||
padding: 50px 0 100px; |
||||
} |
||||
|
||||
.gallery-section .gallery-list{ |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
gap: 32px; |
||||
} |
||||
|
||||
.gallery-section .gallery-list .gallery-items{ |
||||
overflow: hidden; |
||||
border-radius: var(--border-radius-s); |
||||
width: calc(100% / 3 - 32px); |
||||
} |
||||
|
||||
.gallery-section .gallery-items .gallery-image{ |
||||
width: 100%; |
||||
height: 100%; |
||||
cursor: zoom-in; |
||||
transition: 0.3s ease; |
||||
|
||||
} |
||||
|
||||
.gallery-section .gallery-items:hover .gallery-image{ |
||||
transform: scale(1.3); |
||||
} |
||||
|
||||
/* Contact us part */ |
||||
.contact-section{ |
||||
background: var(--light-pink-color); |
||||
padding: 50px 0 100px; |
||||
} |
||||
|
||||
.contact-section .section-content{ |
||||
display: flex; |
||||
gap: 48px; |
||||
align-items: flex-start; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.contact-section .contact-info-list .contact-info{ |
||||
display: flex; |
||||
gap: 20px; |
||||
margin: 20px 0; |
||||
align-items: center; |
||||
} |
||||
.contact-section .contact-info-list .contact-info i{ |
||||
font-size: var(--font-size-m); |
||||
} |
||||
.contact-section .contact-form .form-input{ |
||||
width: 100%; |
||||
height: 50px; |
||||
padding: 0 12px; |
||||
outline: none; |
||||
margin-bottom: 16px; |
||||
background: white; |
||||
border-radius: var(--border-radius-s); |
||||
border: 1px solid var(--medium-gray-color); |
||||
} |
||||
|
||||
.contact-section .contact-form .form-input:focus{ |
||||
border-color: #ddbea9; |
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
.contact-section .contact-form textarea .form-inpu{ |
||||
height: 100px; |
||||
padding: 12px; |
||||
resize: vertical; |
||||
} |
||||
|
||||
.contact-section .contact-form .submit-button{ |
||||
padding: 10px 26px; |
||||
color: white; |
||||
background: #cb997e; |
||||
border-radius: var(--border-radius-m); |
||||
font-weight: var(--font-weight-medium); |
||||
font-size: var(--font-size-m); |
||||
border: 1px solid #cb997e; |
||||
transition: o.3s ease; |
||||
} |
||||
|
||||
.contact-section .contact-form .submit-button:hover{ |
||||
color: #cb997e; |
||||
background: transparent; |
||||
} |
||||
|
||||
|
||||
/* foot part */ |
||||
.footer-section{ |
||||
padding: 20px 0; |
||||
background: var(--dark-color); |
||||
} |
||||
|
||||
.footer-section .section-content{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.footer-section :where(.copyright-text, .social-link, .policy-link){ |
||||
color: var(--white-color); |
||||
transition: 0.2s ease; |
||||
} |
||||
|
||||
.footer-section .social-link-list { |
||||
display: flex; |
||||
gap: 25px; |
||||
} |
||||
|
||||
.footer-section .social-link-list .social-link{ |
||||
font-size: var(--font-size-l); |
||||
} |
||||
|
||||
.footer-section .social-link-list .social-link:hover, .footer-section .policy-text .policy-link:hover{ |
||||
color: #ddbea9; |
||||
} |
||||
|
||||
.footer-section .policy-text .separator{ |
||||
margin: 0 5px; |
||||
color: white; |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 900px){ |
||||
.root { |
||||
--font-size-m: 1rem; |
||||
--font-size-l: 1.3rem; |
||||
--font-size-xl: 1.5rem; |
||||
--font-size-xxl: 1.8rem; |
||||
} |
||||
.navbar :where(#menu-close-button, #menu-open-button){ |
||||
display: block; |
||||
font-size: var(--font-size-l); |
||||
} |
||||
.navbar #menu-close-button{ |
||||
position: absolute; |
||||
right: 30px; |
||||
top: 30px; |
||||
} |
||||
.navbar #menu-open-button{ |
||||
color: var(--white-color); |
||||
} |
||||
.navbar .nav-menu{ |
||||
display: block; |
||||
position: fixed; |
||||
left: -300px; |
||||
top: 0; |
||||
width: 300px; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
padding-top: 100px; |
||||
background: var(--white-color); |
||||
transition: left 0.2s ease; |
||||
} |
||||
|
||||
body.show-mobile-menu .navbar .nav-menu{ |
||||
left: 0; |
||||
} |
||||
|
||||
.navbar .nav-menu .nav-link{ |
||||
color: var(--dark-color); |
||||
display: block; |
||||
margin-top: 17px; |
||||
font-size: var(--font-size-l); |
||||
} |
||||
.about-section .section-content{ |
||||
flex-direction: column-reverse; |
||||
gap: 70px; |
||||
} |
||||
|
||||
.about-section .about-image-wrapper .about-image{ |
||||
width: 100%; |
||||
height: 100%; |
||||
max-width: 250px; |
||||
aspect-ratio: 1; |
||||
} |
||||
} |
||||
|
||||
|
After Width: | Height: | Size: 550 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
Loading…
Reference in new issue