Grim0o5
6 months ago
parent
4a38e5fa7b
commit
08880f013c
@ -1,6 +1,6 @@ |
||||
RewriteEngine On |
||||
|
||||
# Remove .php extension for all URLs (for lowercase letters only) |
||||
# Remove .php extension for all URLs (for lowercase letters and underscores) |
||||
RewriteCond %{REQUEST_FILENAME} !-d |
||||
RewriteCond %{REQUEST_FILENAME}.php -f |
||||
RewriteRule ^([a-z-]+)$ $1.php [L] |
||||
RewriteRule ^([a-z0-9-_]+)$ $1.php [L] |
||||
|
||||
@ -1,56 +0,0 @@ |
||||
body { |
||||
font-family: Arial, sans-serif; |
||||
background-color: #f4f4f4; |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
.container { |
||||
width: 80%; |
||||
margin: 0 auto; |
||||
padding: 20px; |
||||
background-color: #fff; |
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); |
||||
} |
||||
|
||||
.post-job input, .post-job textarea { |
||||
width: 100%; |
||||
padding: 10px; |
||||
margin: 10px 0; |
||||
border: 1px solid #ccc; |
||||
border-radius: 4px; |
||||
} |
||||
|
||||
.post-job button { |
||||
padding: 10px 20px; |
||||
background-color: #28a745; |
||||
color: #fff; |
||||
border: none; |
||||
border-radius: 4px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.post-job button:hover { |
||||
background-color: #218838; |
||||
} |
||||
|
||||
#jobsList { |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
.job { |
||||
background-color: #f9f9f9; |
||||
padding: 15px; |
||||
margin-bottom: 10px; |
||||
border: 1px solid #ddd; |
||||
border-radius: 4px; |
||||
} |
||||
|
||||
.job h3 { |
||||
margin: 0; |
||||
font-size: 18px; |
||||
} |
||||
|
||||
.job p { |
||||
margin: 5px 0; |
||||
} |
||||
@ -1,23 +0,0 @@ |
||||
.content { |
||||
padding: 40px 20px; |
||||
max-width: 800px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.content h1 { |
||||
text-align: center; |
||||
color: rgb(49, 61, 231); |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.content h2 { |
||||
text-align: center; |
||||
margin-bottom: 20px; |
||||
color: rgb(49, 61, 231); |
||||
} |
||||
|
||||
.content p { |
||||
line-height: 1.6; |
||||
margin: 15px 0; |
||||
text-align: center; |
||||
} |
||||
@ -1,35 +1,99 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<html lang="en" data-theme="light"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<title>About Us - Part-Time Job</title> |
||||
<link rel="stylesheet" href="aboutus.css"> |
||||
<title>About Us - TempHire</title> |
||||
|
||||
<!-- Add this script for custom colors --> |
||||
<script> |
||||
tailwind.config = { |
||||
theme: { |
||||
extend: { |
||||
colors: { |
||||
primary: '#313DE7', |
||||
secondary: '#FF6B6B', |
||||
accent: '#4CAF50', |
||||
neutral: '#3D4451', |
||||
'base-100': '#FFFFFF', |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/daisyui@3.9.0/dist/full.css" rel="stylesheet"> |
||||
<script src="https://cdn.tailwindcss.com"></script> |
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'> |
||||
|
||||
<!-- Add custom styles --> |
||||
<style> |
||||
.gradient-bg { |
||||
background: linear-gradient(135deg, #313DE7 0%, #FF6B6B 100%); |
||||
} |
||||
|
||||
.card-hover { |
||||
transition: all 0.3s ease; |
||||
} |
||||
|
||||
.card-hover:hover { |
||||
transform: translateY(-5px); |
||||
box-shadow: 0 10px 20px rgba(49, 61, 231, 0.1); |
||||
} |
||||
</style> |
||||
</head> |
||||
<body> |
||||
<body class="bg-white"> |
||||
<?php include 'navbar.php'?> |
||||
|
||||
<div class="content"> |
||||
<h1>Welcome to Temphire</h1> |
||||
<p> |
||||
At part-time job, we are dedicated to connecting job seekers with meaningful part-time opportunities that suit their skills, schedules, and aspirations. Our platform is designed to provide a seamless experience for both employers and job seekers, making it easier to find the right match. |
||||
</p> |
||||
<p> |
||||
Whether you are a student, a stay-at-home parent, or someone looking to supplement your income, our platform offers a diverse range of job listings from various industries and locations. From flexible hours to remote work options, we strive to cater to the unique needs of our users. |
||||
</p> |
||||
<h2>Our Mission</h2> |
||||
<p> |
||||
Our mission is to empower individuals by providing access to quality part-time job opportunities and to support businesses by helping them find talented and motivated part-time employees. We believe in creating a community where everyone can thrive through meaningful work. |
||||
</p> |
||||
<h2>Why Choose Us?</h2> |
||||
<p> |
||||
- A wide variety of part-time job listings across multiple sectors.<br> |
||||
- User-friendly platform for easy navigation and application.<br> |
||||
- Tools to filter and customize your job search to find the perfect fit.<br> |
||||
- Dedicated support to assist you every step of the way. |
||||
</p> |
||||
<!-- Hero Section --> |
||||
<div class="hero min-h-[50vh] bg-base-200 relative overflow-hidden"> |
||||
<div class="hero-content text-center"> |
||||
<div class="max-w-3xl"> |
||||
<h1 class="text-5xl font-bold text-primary mb-8">Welcome to TempHire</h1> |
||||
<p class="text-xl leading-relaxed text-neutral"> |
||||
Your gateway to flexible employment opportunities. We connect talented individuals with meaningful part-time work that fits their lifestyle. |
||||
</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- Main Content --> |
||||
<div class="container mx-auto px-4 py-12"> |
||||
<div class="grid gap-12 max-w-4xl mx-auto"> |
||||
<!-- About Cards --> |
||||
<div class="grid md:grid-cols-2 gap-6"> |
||||
<div class="card bg-white shadow-xl card-hover border border-primary/10"> |
||||
<div class="card-body"> |
||||
<i class='bx bx-search text-4xl text-primary'></i> |
||||
<h3 class="card-title text-primary">Find Your Perfect Match</h3> |
||||
<p class="text-neutral">Browse through carefully curated job listings that match your skills, schedule, and career goals.</p> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="card bg-white shadow-xl card-hover border border-primary/10"> |
||||
<div class="card-body"> |
||||
<i class='bx bx-time-five text-4xl text-primary'></i> |
||||
<h3 class="card-title text-primary">Flexible Hours</h3> |
||||
<p class="text-neutral">Whether you're a student, parent, or professional, find opportunities that fit your schedule.</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- Mission Section --> |
||||
<div class="card bg-primary text-white shadow-xl"> |
||||
<div class="card-body items-center text-center"> |
||||
<i class='bx bx-target-lock text-5xl mb-4'></i> |
||||
<h2 class="text-3xl font-bold mb-4">Our Mission</h2> |
||||
<p class="text-lg max-w-2xl"> |
||||
We're committed to empowering individuals by providing access to quality part-time opportunities while helping businesses find exceptional talent. Our platform creates a community where everyone can thrive through meaningful work. |
||||
</p> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
<?php include 'footer.php'?> |
||||
<?php include 'footer.php'?> |
||||
</body> |
||||
</html> |
||||
@ -1,50 +0,0 @@ |
||||
|
||||
.content { |
||||
padding: 40px 20px; |
||||
max-width: 800px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.content h3 { |
||||
|
||||
text-align: center; |
||||
} |
||||
|
||||
|
||||
|
||||
.content form { |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 15px; |
||||
} |
||||
|
||||
.content form label { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.content form input, |
||||
.content form textarea, |
||||
.content form button { |
||||
padding: 10px; |
||||
border: 1px solid #ccc; |
||||
border-radius: 5px; |
||||
font-size: 1rem; |
||||
} |
||||
|
||||
.content form textarea { |
||||
resize: vertical; |
||||
height: 100px; |
||||
} |
||||
|
||||
.content form button { |
||||
background-color: #00416A; |
||||
color: white; |
||||
border: none; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.content form button:hover { |
||||
background-color: #62b9d1; |
||||
} |
||||
|
||||
|
||||
@ -1,8 +0,0 @@ |
||||
form |
||||
{ |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
padding: 60px; |
||||
|
||||
} |
||||
@ -1,77 +1,91 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
|
||||
<html lang="en" data-theme="light"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<title>Document</title> |
||||
<!-- Bootstrap 5 CSS --> |
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> |
||||
<!-- font-awesome icons --> |
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> |
||||
<!-- custom css --> |
||||
<link rel="stylesheet" href="createAccount.css"> |
||||
<title>Create Account - Temphire</title> |
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"> |
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/daisyui/2.6.0/full.css" rel="stylesheet"> |
||||
</head> |
||||
|
||||
<body> |
||||
<body class="min-h-screen bg-base-200"> |
||||
<?php include 'navbar.php'; ?> |
||||
<form method="post" action="register.php"> |
||||
<div class="forms-container"> |
||||
<div class="row mb-4"> |
||||
<div class="col"> |
||||
<div class="form-outline"> |
||||
<input type="text" id="fname" name="fname" class="form-control" required /> |
||||
<label class="form-label" for="fname">First name</label> |
||||
</div> |
||||
</div> |
||||
<div class="col"> |
||||
<div class="form-outline"> |
||||
<input type="text" id="lname" name="lname" class="form-control" required /> |
||||
<label class="form-label" for="lname">Last name</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- Job type --> |
||||
<div class="form-outline mb-4"> |
||||
<select name="user_type" id="user_type" class="form-control" required> |
||||
<option value="Job seeker" >Job seeker</option> |
||||
<option value="Employer" ">Employer</option> |
||||
</select> |
||||
<label class="form-label" for="user_type">User Type</label> |
||||
</div> |
||||
<div class="hero min-h-screen bg-base-200"> |
||||
<div class="hero-content flex-col lg:flex-row-reverse"> |
||||
<div class="card flex-shrink-0 w-full max-w-lg shadow-2xl bg-base-100"> |
||||
<div class="card-body"> |
||||
<h2 class="card-title text-2xl font-bold text-center mb-6">Create Account</h2> |
||||
|
||||
<form method="post" action="register.php" class="space-y-4"> |
||||
<!-- Name Fields --> |
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
||||
<div class="form-control"> |
||||
<label class="label"> |
||||
<span class="label-text">First name</span> |
||||
</label> |
||||
<input type="text" id="fname" name="fname" class="input input-bordered w-full" required /> |
||||
</div> |
||||
<div class="form-control"> |
||||
<label class="label"> |
||||
<span class="label-text">Last name</span> |
||||
</label> |
||||
<input type="text" id="lname" name="lname" class="input input-bordered w-full" required /> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- Contact input --> |
||||
<div class="form-outline mb-4"> |
||||
<input type="number" name="contact" id="contact" class="form-control" /> |
||||
<label class="form-label" for="contact">Contact</label> |
||||
</div> |
||||
<!-- User Type --> |
||||
<div class="form-control"> |
||||
<label class="label"> |
||||
<span class="label-text">User Type</span> |
||||
</label> |
||||
<select name="user_type" id="user_type" class="select select-bordered w-full" required> |
||||
<option value="Job seeker">Job seeker</option> |
||||
<option value="Employer">Employer</option> |
||||
</select> |
||||
</div> |
||||
|
||||
<!-- Email input --> |
||||
<div class="form-outline mb-4"> |
||||
<input type="email" id="email" name="email" class="form-control" required /> |
||||
<label class="form-label" for="email">Email address</label> |
||||
</div> |
||||
<!-- Contact --> |
||||
<div class="form-control"> |
||||
<label class="label"> |
||||
<span class="label-text">Contact</span> |
||||
</label> |
||||
<input type="number" name="contact" id="contact" class="input input-bordered w-full" /> |
||||
</div> |
||||
|
||||
<!-- Username input --> |
||||
<div class="form-outline mb-4"> |
||||
<input type="text" name="username" id="username" class="form-control" /> |
||||
<label class="form-label" for="username">Username</label> |
||||
</div> |
||||
<!-- Email --> |
||||
<div class="form-control"> |
||||
<label class="label"> |
||||
<span class="label-text">Email address</span> |
||||
</label> |
||||
<input type="email" id="email" name="email" class="input input-bordered w-full" required /> |
||||
</div> |
||||
|
||||
<!-- Password input --> |
||||
<div class="form-outline mb-4"> |
||||
<input type="password" name="password" id="password" class="form-control" required /> |
||||
<label class="form-label" for="password">Password</label> |
||||
</div> |
||||
<!-- Username --> |
||||
<div class="form-control"> |
||||
<label class="label"> |
||||
<span class="label-text">Username</span> |
||||
</label> |
||||
<input type="text" name="username" id="username" class="input input-bordered w-full" /> |
||||
</div> |
||||
|
||||
<!-- Password --> |
||||
<div class="form-control"> |
||||
<label class="label"> |
||||
<span class="label-text">Password</span> |
||||
</label> |
||||
<input type="password" name="password" id="password" class="input input-bordered w-full" required /> |
||||
</div> |
||||
|
||||
<!-- Submit button --> |
||||
<button type="submit" class="btn btn-primary btn-block mb-4" name="signup">Sign up</button> |
||||
<!-- Submit Button --> |
||||
<!-- <div class="form-control mt-9"> --> |
||||
<button type="submit" name="signup" class="btn btn-primary btn-sm w-full">Sign up</button> |
||||
<!-- </div> --> |
||||
</form> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</form> |
||||
|
||||
<?php include 'footer.php'; ?> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -1,65 +0,0 @@ |
||||
* |
||||
body { |
||||
margin: 0; |
||||
font-family: sans-serif; |
||||
} |
||||
|
||||
.container { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
height: 100vh; |
||||
} |
||||
|
||||
.blue-box { |
||||
width: 100%; |
||||
height: 300px; |
||||
background-color: #8492e0; |
||||
border-bottom-left-radius: 20px; |
||||
border-bottom-right-radius: 20px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
color: white; |
||||
font-size: 2em; |
||||
} |
||||
|
||||
.main-div { |
||||
width: 80%; |
||||
max-width: 800px; |
||||
margin-top: 50px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
flex-wrap: wrap; |
||||
} |
||||
|
||||
.button-div { |
||||
width: 30%; |
||||
height: 100px; |
||||
border: 1px solid #ddd; |
||||
border-radius: 10px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
margin-bottom: 20px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.button-div:hover { |
||||
background-color: #f2f2f2; |
||||
} |
||||
|
||||
.icon { |
||||
margin-right: 10px; |
||||
font-size: 2em; |
||||
} |
||||
|
||||
.button-text { |
||||
font-size: 1.2em; |
||||
} |
||||
.button-div a{ |
||||
text-decoration: none; |
||||
color: black; |
||||
} |
||||
@ -1,47 +1,74 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<html lang="en" data-theme="light"> |
||||
<head> |
||||
<title>Employee Dashboard</title> |
||||
<link rel="stylesheet" href="employe.css"> |
||||
|
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<title>Employee Dashboard</title> |
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"> |
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/daisyui/2.6.0/full.css" rel="stylesheet"> |
||||
</head> |
||||
<body> |
||||
<?php include 'navbar.php'?> |
||||
<body class="min-h-screen bg-base-200"> |
||||
<?php include 'navbar.php'?> |
||||
|
||||
<div class="container"> |
||||
<div class="button-div"> |
||||
<span class="icon">📄</span> |
||||
<span class="button-text">Manage Job Applications</span> |
||||
</div> |
||||
<div class="button-div"> |
||||
<a href="managejob"> |
||||
<span class="icon">💼</span> |
||||
<span class="button-text">post Jobs</span> |
||||
</div> |
||||
</a> |
||||
<div class="container mx-auto px-4 py-8"> |
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
||||
<!-- Manage Applications --> |
||||
<a href="manage_applications" class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow duration-200"> |
||||
<div class="card-body items-center text-center"> |
||||
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-4"> |
||||
<span class="text-3xl">📄</span> |
||||
</div> |
||||
<h2 class="card-title text-xl">Manage Job Applications</h2> |
||||
<p class="text-base-content/70">Review and process applications</p> |
||||
</div> |
||||
</a> |
||||
|
||||
<div class="button-div"> |
||||
<a href="viewjobs"> |
||||
<span class="icon">💼</span> |
||||
<span class="button-text">View Jobs</span> |
||||
</div> |
||||
<!-- Post Jobs --> |
||||
<a href="managejob" class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow duration-200"> |
||||
<div class="card-body items-center text-center"> |
||||
<div class="w-16 h-16 bg-secondary/10 rounded-full flex items-center justify-center mb-4"> |
||||
<span class="text-3xl">💼</span> |
||||
</div> |
||||
<h2 class="card-title text-xl">Post Jobs</h2> |
||||
<p class="text-base-content/70">Create new job listings</p> |
||||
</div> |
||||
</a> |
||||
|
||||
<div class="button-div"> |
||||
<a href="employerprofile"> |
||||
<span class="icon">👤</span> |
||||
<span class="button-text">My Profile</span> |
||||
</a> |
||||
</div> |
||||
<div class="button-div"> |
||||
<a href="logout"> |
||||
<span class="icon">🚪</span> |
||||
<span class="button-text">Logout</span> |
||||
</a> |
||||
</div> |
||||
<!-- View Jobs --> |
||||
<a href="viewjobs" class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow duration-200"> |
||||
<div class="card-body items-center text-center"> |
||||
<div class="w-16 h-16 bg-accent/10 rounded-full flex items-center justify-center mb-4"> |
||||
<span class="text-3xl">💼</span> |
||||
</div> |
||||
<h2 class="card-title text-xl">View Jobs</h2> |
||||
<p class="text-base-content/70">Browse all posted jobs</p> |
||||
</div> |
||||
</a> |
||||
|
||||
</div> |
||||
<!-- My Profile --> |
||||
<a href="employerprofile" class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow duration-200"> |
||||
<div class="card-body items-center text-center"> |
||||
<div class="w-16 h-16 bg-success/10 rounded-full flex items-center justify-center mb-4"> |
||||
<span class="text-3xl">👤</span> |
||||
</div> |
||||
<h2 class="card-title text-xl">My Profile</h2> |
||||
<p class="text-base-content/70">View and edit your profile</p> |
||||
</div> |
||||
</a> |
||||
|
||||
<!-- Logout --> |
||||
<a href="logout" class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow duration-200"> |
||||
<div class="card-body items-center text-center"> |
||||
<div class="w-16 h-16 bg-error/10 rounded-full flex items-center justify-center mb-4"> |
||||
<span class="text-3xl">🚪</span> |
||||
</div> |
||||
<h2 class="card-title text-xl">Logout</h2> |
||||
<p class="text-base-content/70">Exit your account</p> |
||||
</div> |
||||
</a> |
||||
</div> |
||||
</div> |
||||
|
||||
<?php include 'footer.php'?> |
||||
</body> |
||||
</html> |
||||
</body> |
||||
</html> |
||||
@ -1,16 +0,0 @@ |
||||
<?php
|
||||
session_start(); |
||||
include ('connect.php'); |
||||
?> |
||||
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<title>Document</title> |
||||
</head> |
||||
<body> |
||||
<p> logged in bruv</p> |
||||
</body> |
||||
</html> |
||||
@ -1,144 +0,0 @@ |
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; |
||||
} |
||||
|
||||
.centered-image |
||||
{ |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
.search-container { |
||||
max-width: 800px; |
||||
margin: 2rem auto; |
||||
padding: 0 1rem; |
||||
} |
||||
|
||||
.search-bar { |
||||
width: 100%; |
||||
padding: 1rem; |
||||
border: 2px solid #ddd; |
||||
border-radius: 25px; |
||||
font-size: 1rem; |
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1); |
||||
} |
||||
|
||||
.section-title { |
||||
font-size: 1.5rem; |
||||
color: #00416A; |
||||
margin: 2rem 1rem; |
||||
text-align: center; |
||||
|
||||
} |
||||
.section-title1 { |
||||
font-size: 1.5rem; |
||||
color: #00416A; |
||||
margin: 2rem 1rem; |
||||
text-align: center; |
||||
} |
||||
.ad-box { |
||||
text-align: center; |
||||
margin: 20px auto; |
||||
padding: 10px; |
||||
} |
||||
.centered-image img { |
||||
max-width: 25%; |
||||
height: auto; |
||||
} |
||||
|
||||
.featured-jobs { |
||||
display: grid; |
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
||||
gap: 1.5rem; |
||||
padding: 40px 20px; |
||||
margin: 0 auto; |
||||
max-width: 800px; |
||||
} |
||||
|
||||
.job-card { |
||||
background-color: white; |
||||
border-radius: 8px; |
||||
padding: 40px 20px; |
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
||||
|
||||
|
||||
} |
||||
.job-title { |
||||
font-size: 1.2rem; |
||||
color: #00416A; |
||||
margin-bottom: 0.5rem; |
||||
} |
||||
.job-card1 { |
||||
background-color: white; |
||||
border-radius: 8px; |
||||
padding: 40px 20px; |
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
||||
} |
||||
.job-card2 { |
||||
background-color: white; |
||||
border-radius: 8px; |
||||
padding: 40px 20px; |
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
||||
} |
||||
.job-card3 { |
||||
background-color: white; |
||||
border-radius: 8px; |
||||
padding: 40px 20px; |
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
||||
} |
||||
|
||||
.job-location { |
||||
color: #666; |
||||
margin-bottom: 1rem; |
||||
} |
||||
|
||||
.job-description { |
||||
color: black; |
||||
font-size: 0.9rem; |
||||
line-height: 1.5; |
||||
} |
||||
|
||||
.categories { |
||||
display: flex; |
||||
gap: 2rem; |
||||
padding: 2rem; |
||||
flex-wrap: wrap; |
||||
padding: 40px 20px; |
||||
margin: 0 auto; |
||||
max-width: 800px; |
||||
align-items: right; |
||||
justify-content: center; |
||||
} |
||||
|
||||
.category { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
gap: 0.5rem; |
||||
text-decoration: none; |
||||
color: #00416A; |
||||
transition: transform 0.2s; |
||||
} |
||||
.category:hover { |
||||
transform:translateY(-5px); |
||||
} |
||||
|
||||
.category-icon { |
||||
width: 120px; |
||||
height: 80px; |
||||
border-radius: 8px; |
||||
overflow:hidden; |
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);; |
||||
} |
||||
|
||||
.category-icon img { |
||||
width: 100%; |
||||
height: 100%; |
||||
object-fit: cover; |
||||
transition: transform 0.3s; |
||||
} |
||||
.category-icon img:hover { |
||||
transform: scale(1.1); |
||||
} |
||||
@ -1,77 +1,247 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<html lang="en" data-theme="light"> |
||||
|
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<title>Temphire</title> |
||||
<link rel="stylesheet" href="index.css"> |
||||
<title>TempHire • Future of Work</title> |
||||
</head> |
||||
|
||||
<?php include 'navbar.php' ?> |
||||
<body class="min-h-screen bg-gradient-to-br from-base-300 via-base-100 to-base-300 text-base-content"> |
||||
|
||||
<div class="centered-image"> |
||||
<img src="pic/Job seek.jpg" alt="Image"/> |
||||
</div> |
||||
|
||||
<div class="search-container"> |
||||
<input type="text" class="search-bar" placeholder="Search for part-time jobs..."> |
||||
</div> |
||||
<?php include 'navbar.php'; ?> |
||||
<div class="hero min-h-[70vh] bg-base-200 relative overflow-hidden"> |
||||
<div class="absolute inset-0 bg-grid-slate-900/[0.04] bg-[size:40px_40px]"></div> |
||||
<div class="hero-content text-center"> |
||||
<div class="max-w-xl relative z-10"> |
||||
<h1 |
||||
class="text-5xl font-bold mb-8 bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary"> |
||||
The Future of Work |
||||
</h1> |
||||
<p class="py-6 text-lg">Discover opportunities that match your schedule and skills in real-time.</p> |
||||
|
||||
<h2 class="section-title">Featured Jobs</h2> |
||||
<div class="featured-jobs"> |
||||
<div class="job-card"> |
||||
<h3 class="job-title">Care Taker</h3> |
||||
<div class="job-location">Location: Balaju, Kathmandu</div> |
||||
<p class="job-description">Take care of dogs for two days. Experience with pets required.</p> |
||||
</div> |
||||
<div class="job-card1"> |
||||
<h3 class="job-title">Old Aged Helper</h3> |
||||
<div class="job-location">Location: Bouddha, Kathmandu</div> |
||||
<p class="job-description">Take care of elderly people for 3 days. Prior experience preferred.</p> |
||||
</div> |
||||
<div class="job-card2"> |
||||
<h3 class="job-title">Cleaner</h3> |
||||
<div class="job-location">Location: Sundarijal, Kathmandu</div> |
||||
<p class="job-description">Cleaner for 1 week in an apartment.</p> |
||||
|
||||
<div class="join w-full backdrop-blur-sm bg-base-100/50 rounded-lg p-1"> |
||||
<input class="input join-item flex-1 !outline-none border-primary/20" |
||||
placeholder="Search for jobs..." /> |
||||
<button class="btn join-item btn-primary"> |
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" |
||||
stroke="currentColor"> |
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" |
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> |
||||
</svg> |
||||
</button> |
||||
<button class="btn join-item" onclick="document.getElementById('filter_modal').showModal()"> |
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" |
||||
stroke="currentColor"> |
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" |
||||
d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" /> |
||||
</svg> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="job-card3"> |
||||
<h3 class="job-title">Factory Worker</h3> |
||||
<div class="job-location">Location: Biratnmagar, Kathmandu</div> |
||||
<p class="job-description">Factory worker for a month.</p> |
||||
</div> |
||||
|
||||
|
||||
<dialog id="filter_modal" class="modal modal-bottom sm:modal-middle"> |
||||
<form method="dialog" class="modal-box bg-base-200"> |
||||
<h3 class="font-bold text-lg mb-4">Filter Options</h3> |
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
||||
<div class="form-control w-full"> |
||||
<label class="label"> |
||||
<span class="label-text">Location</span> |
||||
</label> |
||||
<select class="select select-bordered"> |
||||
<option value="">Select Location</option> |
||||
<option value="kathmandu">Kathmandu</option> |
||||
<option value="lalitpur">Lalitpur</option> |
||||
<option value="bhaktapur">Bhaktapur</option> |
||||
<option value="pokhara">Pokhara</option> |
||||
<option value="biratnagar">Biratnagar</option> |
||||
<option value="butwal">Butwal</option> |
||||
</select> |
||||
</div> |
||||
|
||||
<div class="form-control w-full"> |
||||
<label class="label"> |
||||
<span class="label-text">Job Type</span> |
||||
</label> |
||||
<select class="select select-bordered"> |
||||
<option value="">Select Type</option> |
||||
<option value="childcare">childcare and petcare</option> |
||||
<option value="cleaning">cleaning and maintainence</option> |
||||
<option value="delivery">delivery and logistics</option> |
||||
<option value="seasonal">Seasonal</option> |
||||
</select> |
||||
</div> |
||||
|
||||
<div class="form-control w-full"> |
||||
<label class="label"> |
||||
<span class="label-text">Salary type</span> |
||||
</label> |
||||
<select class="select select-bordered"> |
||||
<option value="">Select Range</option> |
||||
<option value="Hourly">Hourly</option> |
||||
<option value="Daily">Daily</option> |
||||
|
||||
</select> |
||||
</div> |
||||
|
||||
<div class="form-control w-full"> |
||||
<label class="label"> |
||||
<span class="label-text">skills level</span> |
||||
</label> |
||||
<select class="select select-bordered"> |
||||
<option value="">Select Level</option> |
||||
<option value="entry">Entry Level</option> |
||||
<option value="intermediate">Intermediate</option> |
||||
<option value="experienced">Experienced</option> |
||||
</select> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modal-action"> |
||||
<button class="btn btn-ghost">Reset</button> |
||||
<button class="btn btn-primary">Apply Filters</button> |
||||
</div> |
||||
</form> |
||||
<form method="dialog" class="modal-backdrop"> |
||||
<button>close</button> |
||||
</form> |
||||
</dialog> |
||||
|
||||
|
||||
|
||||
|
||||
<div class="container mx-auto p-8"> |
||||
<h2 class="text-3xl font-bold mb-8 text-center">Recent Job Posts</h2> |
||||
<div class="grid grid-cols-1 gap-4"> |
||||
<div class="card bg-base-200 shadow-xl hover:shadow-primary/10 transition-all"> |
||||
<div class="card-body"> |
||||
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4"> |
||||
<div> |
||||
<h3 class="card-title">Senior Care Specialist</h3> |
||||
<div class="flex flex-wrap gap-2 mt-2"> |
||||
<span class="badge badge-outline">Full Time</span> |
||||
<span class="badge badge-outline">Kathmandu</span> |
||||
<span class="badge badge-primary">Rs. 3000/day</span> |
||||
</div> |
||||
<p class="mt-2">Looking for an experienced caregiver for elderly assistance. Medical |
||||
background preferred.</p> |
||||
</div> |
||||
<button class="btn btn-primary">Apply Now</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="card bg-base-200 shadow-xl hover:shadow-primary/10 transition-all"> |
||||
<div class="card-body"> |
||||
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4"> |
||||
<div> |
||||
<h3 class="card-title">House Cleaning Expert</h3> |
||||
<div class="flex flex-wrap gap-2 mt-2"> |
||||
<span class="badge badge-outline">Part Time</span> |
||||
<span class="badge badge-outline">Lalitpur</span> |
||||
<span class="badge badge-primary">Rs. 1500/day</span> |
||||
</div> |
||||
<p class="mt-2">Weekly house cleaning position available. Experience with modern cleaning |
||||
equipment required.</p> |
||||
</div> |
||||
<button class="btn btn-primary">Apply Now</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="text-center mt-4"> |
||||
<a href="alljobs"><button class="btn btn-outline btn-primary btn-sm">View More</button></a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<h2 class="section-title1">Job Categories</h2> |
||||
<div class="categories"> |
||||
<a href="#" class="category"> |
||||
<div class="category-icon"> |
||||
<img src="pic/Pet Care Taker.jpg" alt="Dog Care Taker"> |
||||
|
||||
<div class="container mx-auto p-8"> |
||||
<h2 class="text-3xl font-bold mb-8 text-center">How It Works</h2> |
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
||||
<div class="card bg-base-200 shadow-xl"> |
||||
<div class="card-body items-center text-center"> |
||||
<div class="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center mb-4"> |
||||
<span class="text-2xl font-bold text-primary">1</span> |
||||
</div> |
||||
<h3 class="card-title">Create Profile</h3> |
||||
<p>Sign up and create your professional profile with skills and experience</p> |
||||
</div> |
||||
</div> |
||||
<span>Dog Care Taker</span> |
||||
</a> |
||||
<a href="#" class="category"> |
||||
<div class="category-icon"> |
||||
<img src="pic/Care Taker.jpeg" alt="Elderly Care"> |
||||
|
||||
<div class="card bg-base-200 shadow-xl"> |
||||
<div class="card-body items-center text-center"> |
||||
<div class="w-16 h-16 rounded-full bg-secondary/20 flex items-center justify-center mb-4"> |
||||
<span class="text-2xl font-bold text-secondary">2</span> |
||||
</div> |
||||
<h3 class="card-title">Find Jobs</h3> |
||||
<p>Search and filter jobs that match your skills and schedule</p> |
||||
</div> |
||||
</div> |
||||
<span>Old Aged Care Taker</span> |
||||
</a> |
||||
<a href="#" class="category"> |
||||
<div class="category-icon"> |
||||
<img src="pic/Cleaner.jpg" alt="Cleaner"> |
||||
|
||||
<div class="card bg-base-200 shadow-xl"> |
||||
<div class="card-body items-center text-center"> |
||||
<div class="w-16 h-16 rounded-full bg-accent/20 flex items-center justify-center mb-4"> |
||||
<span class="text-2xl font-bold text-accent">3</span> |
||||
</div> |
||||
<h3 class="card-title">Start Working</h3> |
||||
<p>Apply, get hired, and start earning on your terms</p> |
||||
</div> |
||||
</div> |
||||
<span>Old Aged Care Taker</span> |
||||
</a> |
||||
<a href="#" class="category"> |
||||
<div class="category-icon"> |
||||
<img src="pic/Factoryworker.jpg" alt="Factory worker"> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
|
||||
<div class="container mx-auto p-8"> |
||||
<h2 class="text-3xl font-bold mb-8 text-center">Why to choose the temphire</h2> |
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
||||
<div class="card bg-base-200 shadow-xl"> |
||||
<div class="card-body"> |
||||
<div class="flex items-center gap-4 mb-4"> |
||||
<div class="avatar placeholder"> |
||||
<div class="bg-neutral-focus text-neutral-content rounded-full w-16"> |
||||
<span class="text-xl"></span> |
||||
</div> |
||||
</div> |
||||
<div> |
||||
<h3 class="font-bold">FOR JOB SEEKERS</h3> |
||||
|
||||
</div> |
||||
</div> |
||||
<p>Flexible job options</p> |
||||
<p>User-friendly platform</p> |
||||
<p>Diverse job Listings</p> |
||||
</div> |
||||
</div> |
||||
<span>Old Aged Care Taker</span> |
||||
</a> |
||||
|
||||
<div class="card bg-base-200 shadow-xl"> |
||||
<div class="card-body"> |
||||
<div class="flex items-center gap-4 mb-4"> |
||||
<div class="avatar placeholder"> |
||||
<div class="bg-neutral-focus text-neutral-content rounded-full w-16"> |
||||
<span class="text-xl"></span> |
||||
</div> |
||||
</div> |
||||
<div> |
||||
<h3 class="font-bold">FOR EMPLOYERS</h3> |
||||
</div> |
||||
</div> |
||||
<p>Access to a Wide Talent Pool</p> |
||||
<p>Efficient Hiring Process</p> |
||||
<p>Verified Job Seekers</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<?php include 'footer.php'; ?> |
||||
|
||||
|
||||
|
||||
|
||||
</body> |
||||
|
||||
</html> |
||||
@ -1,63 +0,0 @@ |
||||
body { |
||||
margin: 0; |
||||
font-family: sans-serif; |
||||
} |
||||
|
||||
.container { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
|
||||
.blue-box { |
||||
width: 100%; |
||||
height: 300px; |
||||
background-color: #8492e0; |
||||
border-bottom-left-radius: 20px; |
||||
border-bottom-right-radius: 20px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
color: white; |
||||
font-size: 2em; |
||||
} |
||||
|
||||
.main-div { |
||||
width: 80%; |
||||
max-width: 800px; |
||||
margin-top: 50px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
flex-wrap: wrap; |
||||
} |
||||
|
||||
.button-div { |
||||
width: 30%; |
||||
height: 100px; |
||||
border: 1px solid #ddd; |
||||
border-radius: 10px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
margin-bottom: 20px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.button-div:hover { |
||||
background-color: #f2f2f2; |
||||
} |
||||
|
||||
.icon { |
||||
margin-right: 10px; |
||||
font-size: 2em; |
||||
} |
||||
|
||||
.button-text { |
||||
font-size: 1.2em; |
||||
} |
||||
.button-div a{ |
||||
text-decoration: none; |
||||
color: black; |
||||
} |
||||
@ -1,39 +1,52 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<html lang="en" data-theme="light"> |
||||
<head> |
||||
<title>Job Seekers Dashboard</title> |
||||
<link rel="stylesheet" href="jobseekerdash.css"> |
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<title>Job Seekers Dashboard</title> |
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"> |
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/daisyui/2.6.0/full.css" rel="stylesheet"> |
||||
</head> |
||||
<body> |
||||
<?php include 'navbar.php' ?> |
||||
<div class="container"> |
||||
<div class="blue-box"> |
||||
Dashboard |
||||
<p>HOME > DASHBOARD</p> |
||||
</div> |
||||
<div class="main-div"> |
||||
<div class="button-div"> |
||||
<a href="job_applications.php"> |
||||
<span class="icon">📄</span> |
||||
<span class="button-text">My Job Applications</span> |
||||
</a> |
||||
</div> |
||||
<div class="button-div"> |
||||
<a href="jobseekerprofile"> |
||||
<span class="icon">👤</span> |
||||
<span class="button-text">My Profile</span> |
||||
</div> |
||||
</a> |
||||
<div class="button-div"> |
||||
<a href="logout"> |
||||
<span class="icon">🚪</span> |
||||
<span class="button-text">Logout</span> |
||||
<body class="min-h-screen bg-base-200 flex flex-col"> |
||||
<?php include 'navbar.php'?> |
||||
|
||||
<div class="container mx-auto px-4 py-8 flex-grow"> |
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
||||
<!-- My Job Applications --> |
||||
<a href="job_applications.php" class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow duration-200"> |
||||
<div class="card-body items-center text-center"> |
||||
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-4"> |
||||
<span class="text-3xl">📄</span> |
||||
</div> |
||||
<h2 class="card-title text-xl">My Job Applications</h2> |
||||
<p class="text-base-content/70">View your application status</p> |
||||
</div> |
||||
</a> |
||||
|
||||
<!-- My Profile --> |
||||
<a href="jobseekerprofile" class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow duration-200"> |
||||
<div class="card-body items-center text-center"> |
||||
<div class="w-16 h-16 bg-secondary/10 rounded-full flex items-center justify-center mb-4"> |
||||
<span class="text-3xl">👤</span> |
||||
</div> |
||||
<h2 class="card-title text-xl">My Profile</h2> |
||||
<p class="text-base-content/70">View and edit your profile</p> |
||||
</div> |
||||
</a> |
||||
|
||||
<!-- Logout --> |
||||
<a href="logout" class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow duration-200"> |
||||
<div class="card-body items-center text-center"> |
||||
<div class="w-16 h-16 bg-error/10 rounded-full flex items-center justify-center mb-4"> |
||||
<span class="text-3xl">🚪</span> |
||||
</div> |
||||
<h2 class="card-title text-xl">Logout</h2> |
||||
<p class="text-base-content/70">Exit your account</p> |
||||
</div> |
||||
</a> |
||||
</div> |
||||
</a> |
||||
</div> |
||||
</div> |
||||
<?php include 'footer.php' ?> |
||||
</body> |
||||
</html> |
||||
|
||||
|
||||
<?php include 'footer.php'?> |
||||
</body> |
||||
</html> |
||||
@ -1,113 +0,0 @@ |
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.profile-container { |
||||
max-width: 600px; |
||||
margin: 0 auto; |
||||
padding: 20px; |
||||
} |
||||
|
||||
.profile-container h2 { |
||||
text-align: center; |
||||
margin-bottom: 20px; |
||||
color: #333; |
||||
} |
||||
|
||||
.profile-upload-section { |
||||
display: flex; |
||||
justify-content: center; |
||||
margin: 20px 0; |
||||
} |
||||
|
||||
.profile-circle { |
||||
width: 120px; |
||||
height: 120px; |
||||
border-radius: 50%; |
||||
border: 2px solid #ccc; |
||||
position: relative; |
||||
overflow: hidden; |
||||
background: #f5f5f5; |
||||
} |
||||
|
||||
.profile-circle img { |
||||
width: 100%; |
||||
height: 100%; |
||||
object-fit: cover; |
||||
} |
||||
|
||||
.upload-label { |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
background: rgba(0, 0, 0, 0.6); |
||||
color: white; |
||||
text-align: center; |
||||
padding: 8px 0; |
||||
cursor: pointer; |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.upload-label input[type="file"] { |
||||
display: none; |
||||
} |
||||
|
||||
.form-group { |
||||
margin-bottom: 15px; |
||||
} |
||||
|
||||
.form-group label { |
||||
display: block; |
||||
margin-bottom: 5px; |
||||
font-weight: 500; |
||||
color: #555; |
||||
} |
||||
|
||||
.form-group input { |
||||
width: 100%; |
||||
padding: 8px 12px; |
||||
border: 1px solid #ddd; |
||||
border-radius: 4px; |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.form-group input:focus { |
||||
outline: none; |
||||
border-color: #007bff; |
||||
} |
||||
|
||||
.file-input { |
||||
border: 1px solid #ddd; |
||||
padding: 6px; |
||||
border-radius: 4px; |
||||
background: #fff; |
||||
} |
||||
|
||||
.submit-btn { |
||||
width: 100%; |
||||
padding: 10px; |
||||
background: #007bff; |
||||
color: white; |
||||
border: none; |
||||
border-radius: 4px; |
||||
cursor: pointer; |
||||
font-size: 16px; |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
.submit-btn:hover { |
||||
background: #0056b3; |
||||
} |
||||
|
||||
input::placeholder { |
||||
color: #999; |
||||
} |
||||
|
||||
/* Add required field indicator */ |
||||
label:after { |
||||
content: '*'; |
||||
color:red; |
||||
} |
||||
@ -1,12 +0,0 @@ |
||||
|
||||
.h-custom { |
||||
height: calc(100% - 73px); |
||||
} |
||||
@media (max-width: 450px) { |
||||
.h-custom { |
||||
height: 100%; |
||||
} |
||||
} |
||||
.vh-80{ |
||||
padding: 90px 0; |
||||
} |
||||
@ -1,62 +1,87 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
|
||||
<html lang="en" data-theme="light"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<title>Document</title> |
||||
<link rel="stylesheet" href="login.css"> |
||||
<!-- Bootstrap 5 CSS --> |
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> |
||||
<!-- font-awesome icons --> |
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> |
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<title>Login</title> |
||||
<!-- Tailwind CSS and DaisyUI --> |
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"> |
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/daisyui/2.6.0/full.css" rel="stylesheet"> |
||||
<!-- Font Awesome --> |
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> |
||||
</head> |
||||
|
||||
<body> |
||||
<?php include 'navbar.php'; ?> |
||||
<section class="vh-80"> |
||||
<div class="container-fluid h-custom"> |
||||
<div class="row d-flex justify-content-center align-items-center h-100"> |
||||
<div class="col-md-8 col-lg-6 col-xl-4 offset-xl-1"> |
||||
<form method="post" action="register.php"> |
||||
<!-- Email input --> |
||||
<div data-mdb-input-init class="form-outline mb-4"> |
||||
<label class="form-label" for="email">Email address:</label> |
||||
<input type="email" id="email" name="email" class="form-control form-control-lg" |
||||
placeholder="Enter a valid email address" required /> |
||||
</div> |
||||
<body class="min-h-screen bg-gradient-to-br from-base-200 to-base-300"> |
||||
<?php include 'navbar.php'; ?> |
||||
|
||||
<!-- Password input --> |
||||
<div data-mdb-input-init class="form-outline mb-3"> |
||||
<label class="form-label" for="password">Password:</label> |
||||
<input type="password" id="password" name="password" class="form-control form-control-lg" |
||||
placeholder="Enter password" required /> |
||||
</div> |
||||
<div class="hero min-h-screen"> |
||||
<div class="hero-content flex-col"> |
||||
<div class="card flex-shrink-0 w-full max-w-sm shadow-2xl bg-base-100"> |
||||
<div class="card-body"> |
||||
<!-- Title with icon --> |
||||
<div class="text-center mb-4"> |
||||
<i class="fas fa-user-circle text-4xl text-primary mb-2"></i> |
||||
<h2 class="text-2xl font-bold text-primary">Login</h2> |
||||
<div class="divider mt-2"></div> |
||||
</div> |
||||
|
||||
<div class="d-flex justify-content-between align-items-center"> |
||||
<!-- Checkbox --> |
||||
<div class="form-check mb-0"> |
||||
<input class="form-check-input me-2" type="checkbox" value="" id="remember" /> |
||||
<label class="form-check-label" for="remember"> |
||||
Remember me |
||||
</label> |
||||
</div> |
||||
<a href="#!" class="text-body">Forgot password?</a> |
||||
</div> |
||||
<form method="post" action="register.php"> |
||||
<div class="form-control"> |
||||
<label class="label"> |
||||
<span class="label-text font-medium">Email</span> |
||||
</label> |
||||
<div class="relative"> |
||||
|
||||
<div class="text-center text-lg-start mt-4 pt-2"> |
||||
<button type="submit" name="Login" class="btn btn-primary btn-lg" |
||||
style="padding-left: 2.5rem; padding-right: 2.5rem;">Login</button> |
||||
<p class="small fw-bold mt-2 pt-1 mb-0">Don't have an account? <a href="createAccount.php" |
||||
class="link-danger">Register</a></p> |
||||
</div> |
||||
</form> |
||||
<input type="email" id="email" name="email" |
||||
placeholder="email@example.com" |
||||
class="input input-bordered pl-14 w-full hover:border-primary focus:border-primary transition-colors" |
||||
required /> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="form-control mt-4"> |
||||
<label class="label"> |
||||
<span class="label-text font-medium">Password</span> |
||||
</label> |
||||
<div class="relative"> |
||||
|
||||
<input type="password" id="password" name="password" |
||||
placeholder="Enter your password" |
||||
class="input input-bordered pl-10 w-full hover:border-primary focus:border-primary transition-colors" |
||||
required /> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="flex justify-between items-center mt-4"> |
||||
<label class="label cursor-pointer"> |
||||
<input type="checkbox" class="checkbox checkbox-primary checkbox-sm mr-2" id="remember" /> |
||||
<span class="label-text">Remember me</span> |
||||
</label> |
||||
|
||||
</div> |
||||
|
||||
<div class="form-control mt-6"> |
||||
<button type="submit" name="Login" |
||||
class="btn btn-primary hover:btn-primary-focus transition-all duration-200"> |
||||
Login <i class="fas fa-arrow-right ml-2"></i> |
||||
</button> |
||||
</div> |
||||
|
||||
<div class="divider mt-6">OR</div> |
||||
|
||||
<div class="text-center"> |
||||
<p class="text-sm">Don't have an account? |
||||
<a href="createAccount.php" class="link link-primary font-medium hover:link-hover"> |
||||
Register now |
||||
</a> |
||||
</p> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
</section> |
||||
<?php include 'footer.php'; ?> |
||||
<?php include 'footer.php'; ?> |
||||
</body> |
||||
|
||||
</html> |
||||
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 58 KiB |
Loading…
Reference in new issue