Babit Shrestha
6 months ago
parent
6b9504eedb
commit
3ae01ed458
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,18 @@ |
||||
# Generated by Django 5.1.4 on 2025-01-12 03:35 |
||||
|
||||
from django.db import migrations, models |
||||
|
||||
|
||||
class Migration(migrations.Migration): |
||||
|
||||
dependencies = [ |
||||
('main', '0005_user_login_profile_alter_servicerequest_service_and_more'), |
||||
] |
||||
|
||||
operations = [ |
||||
migrations.AddField( |
||||
model_name='servicerequest', |
||||
name='phone_number', |
||||
field=models.CharField(blank=True, max_length=15, null=True), |
||||
), |
||||
] |
||||
@ -0,0 +1,22 @@ |
||||
# Generated by Django 5.1.4 on 2025-01-12 03:41 |
||||
|
||||
from django.db import migrations, models |
||||
|
||||
|
||||
class Migration(migrations.Migration): |
||||
|
||||
dependencies = [ |
||||
('main', '0006_servicerequest_phone_number'), |
||||
] |
||||
|
||||
operations = [ |
||||
migrations.RemoveField( |
||||
model_name='servicerequest', |
||||
name='phone_number', |
||||
), |
||||
migrations.AddField( |
||||
model_name='user', |
||||
name='phone_number', |
||||
field=models.CharField(blank=True, max_length=15, null=True), |
||||
), |
||||
] |
||||
@ -0,0 +1,18 @@ |
||||
# Generated by Django 5.1.4 on 2025-01-12 10:38 |
||||
|
||||
from django.db import migrations, models |
||||
|
||||
|
||||
class Migration(migrations.Migration): |
||||
|
||||
dependencies = [ |
||||
('main', '0007_remove_servicerequest_phone_number_user_phone_number'), |
||||
] |
||||
|
||||
operations = [ |
||||
migrations.AlterField( |
||||
model_name='servicerequest', |
||||
name='is_approved', |
||||
field=models.BooleanField(blank=True, null=True), |
||||
), |
||||
] |
||||
@ -0,0 +1,18 @@ |
||||
# Generated by Django 5.1.4 on 2025-01-12 10:38 |
||||
|
||||
from django.db import migrations, models |
||||
|
||||
|
||||
class Migration(migrations.Migration): |
||||
|
||||
dependencies = [ |
||||
('main', '0008_alter_servicerequest_is_approved'), |
||||
] |
||||
|
||||
operations = [ |
||||
migrations.AlterField( |
||||
model_name='servicerequest', |
||||
name='is_approved', |
||||
field=models.BooleanField(blank=True, default=False, null=True), |
||||
), |
||||
] |
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,126 @@ |
||||
{% extends 'base.html' %} |
||||
{% load static %} |
||||
|
||||
{% block content %} |
||||
<style> |
||||
body { |
||||
background-color: #f8f9fa; |
||||
} |
||||
.profile-header { |
||||
background-color: #007bff; |
||||
color: white; |
||||
padding: 20px; |
||||
border-radius: 10px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
margin-bottom: 20px; |
||||
} |
||||
.profile-header .left { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.profile-header img { |
||||
border-radius: 50%; |
||||
width: 100px; |
||||
height: 100px; |
||||
margin-right: 20px; |
||||
} |
||||
.profile-details { |
||||
margin-bottom: 20px; |
||||
} |
||||
.card { |
||||
border: none; |
||||
border-radius: 10px; |
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); |
||||
} |
||||
.status-badge { |
||||
padding: 5px 10px; |
||||
border-radius: 5px; |
||||
color: white; |
||||
} |
||||
.status-active { |
||||
background-color: #28a745; |
||||
} |
||||
.status-complete { |
||||
background-color: #17a2b8; |
||||
} |
||||
</style> |
||||
|
||||
<div class="container mt-4"> |
||||
<!-- Profile Header --> |
||||
<div class="profile-header"> |
||||
<div class="left"> |
||||
{% if user.profile and user.profile.url %} |
||||
<img src="{{ user.profile.url }}" alt="Profile Picture"> |
||||
{% else %} |
||||
<img src="{% static 'img/dummypic.png' %}" alt="Profile Picture"> |
||||
{% endif %} |
||||
|
||||
<div> |
||||
<h2>{{ user.first_name|capfirst }} {{ user.last_name|capfirst }}</h2> |
||||
<p>Customer ID: {{ user.id }}</p> |
||||
</div> |
||||
</div> |
||||
<div> |
||||
<p>Member Since: {{ user.member_since|date:"b - Y" }}</p> |
||||
<p>Status: Active</p> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- Profile Details --> |
||||
<div class="profile-details"> |
||||
<div class="row"> |
||||
<div class="col-md-12"> |
||||
<div class="card p-6"> |
||||
<h5>Contact Information</h5> |
||||
<p>Email: {{ user.email }}</p> |
||||
<p>Phone: (+977) {{ user.phone_number }}</p> |
||||
<p>Address: {{ user.address }}</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
{% if request.user == user %} |
||||
<!-- Pending/Active Requests --> |
||||
<div class="recent-activities"> |
||||
<h4 class="mb-3">Pending/Active Requests</h4> |
||||
<div class="card p-3"> |
||||
<ul class="list-group list-group-flush"> |
||||
{% for req in pending_requests %} |
||||
<li class="list-group-item d-flex justify-content-between align-items-center"> |
||||
{{ req.service_offered }} request from {{ req.client.first_name|capfirst }} {{ req.client.last_name|capfirst }} |
||||
<a class="status-badge status-active">Accept</a> |
||||
</li> |
||||
{% empty %} |
||||
<li class="list-group-item d-flex justify-content-between align-items-center"> |
||||
Hurray! There are no Pending Requests till now. |
||||
</li> |
||||
{% endfor %} |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- Completed Services --> |
||||
<div class="recent-activities mt-4"> |
||||
<h4 class="my-3">Completed/Active Requests</h4> |
||||
<div class="card p-3"> |
||||
<ul class="list-group list-group-flush"> |
||||
{% for service in current %} |
||||
<li class="list-group-item d-flex justify-content-between align-items-center"> |
||||
{{ service.service_offered }} request from {{ service.client.first_name|capfirst }} {{ service.client.last_name|capfirst }} |
||||
<a class="status-badge status-complete">Complete</a> |
||||
</li> |
||||
{% empty %} |
||||
<li class="list-group-item d-flex justify-content-between align-items-center"> |
||||
There are no active tasks right now. |
||||
</li> |
||||
{% endfor %} |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
{% endif %} |
||||
</div> |
||||
{% endblock %} |
||||
|
||||
@ -0,0 +1,164 @@ |
||||
{% extends 'base.html' %} |
||||
|
||||
{% block content %} |
||||
<style> |
||||
/* General Styles */ |
||||
body { |
||||
margin: 0; |
||||
font-family: Arial, sans-serif; |
||||
} |
||||
|
||||
h1, h2 { |
||||
text-align: center; |
||||
color: #333; |
||||
} |
||||
|
||||
.section { |
||||
padding: 50px 20px; |
||||
background-color: #fdf6e3; /* Beige background */ |
||||
margin: 20px auto; |
||||
width: 80%; |
||||
border-radius: 8px; |
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
||||
opacity: 0; |
||||
transform: translateX(-100px); |
||||
transition: all 0.8s ease-in-out; |
||||
} |
||||
|
||||
.section.visible { |
||||
opacity: 1; |
||||
transform: translateX(0); |
||||
} |
||||
|
||||
.service { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
.service img { |
||||
width: 100px; |
||||
height: 100px; |
||||
border-radius: 8px; |
||||
margin-right: 20px; |
||||
} |
||||
|
||||
.service p { |
||||
font-size: 16px; |
||||
line-height: 1.6; |
||||
} |
||||
|
||||
.services-grid { |
||||
display: grid; |
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
||||
gap: 20px; |
||||
margin-top: 40px; |
||||
} |
||||
|
||||
.grid-item { |
||||
background-color: #ffffff; |
||||
padding: 20px; |
||||
border-radius: 8px; |
||||
text-align: center; |
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
||||
opacity: 0; |
||||
transform: translateY(100px); |
||||
transition: all 0.8s ease-in-out; |
||||
} |
||||
|
||||
.grid-item.visible { |
||||
opacity: 1; |
||||
transform: translateY(0); |
||||
} |
||||
|
||||
.grid-item img { |
||||
width: 80px; |
||||
height: 80px; |
||||
margin-bottom: 10px; |
||||
} |
||||
|
||||
.grid-item h3 { |
||||
margin: 10px 0; |
||||
font-size: 18px; |
||||
} |
||||
|
||||
.grid-item p { |
||||
font-size: 14px; |
||||
color: #555; |
||||
} |
||||
</style> |
||||
</head> |
||||
<body> |
||||
<h1>Services</h1> |
||||
|
||||
<section class="section" id="service-1"> |
||||
<h2>Our Services</h2> |
||||
<div class="service"> |
||||
<img src="https://via.placeholder.com/100" alt="Service Image"> |
||||
<p>I am a tech-savvy individual with a Bachelor's degree in Software Development, seeking employment as a mobile game developer. I am passionate about consistently advancing my knowledge and skills. I have attended multiple seminars and boot camps on coding and game development.</p> |
||||
</div> |
||||
</section> |
||||
|
||||
<section class="section" id="service-2"> |
||||
<h2>What We Offer</h2> |
||||
<div class="service"> |
||||
<img src="https://via.placeholder.com/100" alt="Service Image"> |
||||
<p>I am a tech-savvy individual with a Bachelor's degree in Software Development, seeking employment as a mobile game developer. I am passionate about consistently advancing my knowledge and skills. I have attended multiple seminars and boot camps on coding and game development.</p> |
||||
</div> |
||||
</section> |
||||
|
||||
<section class="section" id="services-grid"> |
||||
<h2>Our Web App Provides</h2> |
||||
<div class="services-grid"> |
||||
<div class="grid-item"> |
||||
<img src="https://via.placeholder.com/80" alt="Feature 1"> |
||||
<h3>Feature 1</h3> |
||||
<p>Detail about the first feature of the web app.</p> |
||||
</div> |
||||
<div class="grid-item"> |
||||
<img src="https://via.placeholder.com/80" alt="Feature 2"> |
||||
<h3>Feature 2</h3> |
||||
<p>Detail about the second feature of the web app.</p> |
||||
</div> |
||||
<div class="grid-item"> |
||||
<img src="https://via.placeholder.com/80" alt="Feature 3"> |
||||
<h3>Feature 3</h3> |
||||
<p>Detail about the third feature of the web app.</p> |
||||
</div> |
||||
<div class="grid-item"> |
||||
<img src="https://via.placeholder.com/80" alt="Feature 4"> |
||||
<h3>Feature 4</h3> |
||||
<p>Detail about the fourth feature of the web app.</p> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
|
||||
<script> |
||||
// Function to check if element is in viewport |
||||
function isInViewport(element) { |
||||
const rect = element.getBoundingClientRect(); |
||||
return ( |
||||
rect.top >= 0 && |
||||
rect.left >= 0 && |
||||
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && |
||||
rect.right <= (window.innerWidth || document.documentElement.clientWidth) |
||||
); |
||||
} |
||||
|
||||
// Function to add "visible" class to sections |
||||
function handleScroll() { |
||||
const sections = document.querySelectorAll('.section, .grid-item'); |
||||
sections.forEach(section => { |
||||
if (isInViewport(section)) { |
||||
section.classList.add('visible'); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
// Listen for scroll event |
||||
window.addEventListener('scroll', handleScroll); |
||||
|
||||
// Trigger scroll event on load to show elements already in view |
||||
window.addEventListener('load', handleScroll); |
||||
</script> |
||||
{% endblock %} |
||||
@ -0,0 +1,144 @@ |
||||
body { |
||||
background-color:#ffffff; |
||||
} |
||||
.navbar .navbar-brand { |
||||
margin-right: auto; |
||||
} |
||||
.navbar .nav { |
||||
margin: 0 auto; |
||||
text-align: center; |
||||
} |
||||
.navbar .login { |
||||
margin-left: auto; |
||||
} |
||||
.search-bar { |
||||
margin-top: 20px; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
.search-bar input { |
||||
width: 50%; |
||||
border-radius: 50px; |
||||
} |
||||
.profile-card { |
||||
border: 1px solid #ddd; |
||||
border-radius: 10px; |
||||
overflow: hidden; |
||||
transition: transform 0.3s ease, box-shadow 0.3s ease; |
||||
} |
||||
.profile-card:hover { |
||||
transform: translateY(-10px); |
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); |
||||
} |
||||
.profile-card img { |
||||
width: 100%; |
||||
height: 200px; |
||||
object-fit: cover; |
||||
object-position: 10%; |
||||
} |
||||
.profile-card .card-body { |
||||
padding: 15px; |
||||
} |
||||
.profile-card .card-title { |
||||
font-size: 1.25rem; |
||||
font-weight: bold; |
||||
margin-bottom: 10px; |
||||
} |
||||
.profile-card .card-text { |
||||
font-size: 0.9rem; |
||||
color: #555; |
||||
} |
||||
.profile-card .price { |
||||
font-size: 1.1rem; |
||||
font-weight: bold; |
||||
color: #007bff; |
||||
} |
||||
.profile-card .availability { |
||||
font-size: 0.9rem; |
||||
color: #28a745; |
||||
} |
||||
|
||||
.category-bar { |
||||
background-color: #f8f9fa; /* Light background */ |
||||
padding: 20px; |
||||
border-radius: 10px; |
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */ |
||||
} |
||||
|
||||
.category-bar h4 { |
||||
font-size: 1.25rem; |
||||
font-weight: bold; |
||||
margin-bottom: 15px; |
||||
color: #333; |
||||
} |
||||
|
||||
.category-bar ul { |
||||
padding-left: 0; |
||||
} |
||||
|
||||
.category-bar .category-link { |
||||
display: block; |
||||
padding: 10px 15px; |
||||
margin: 5px 0; |
||||
color: #555; |
||||
text-decoration: none; |
||||
border-radius: 5px; |
||||
transition: background-color 0.3s ease, color 0.3s ease; |
||||
} |
||||
|
||||
.category-bar .category-link:hover { |
||||
background-color: #007bff; /* Highlight on hover */ |
||||
color: #fff; |
||||
} |
||||
|
||||
/* odd */ |
||||
.form-container { |
||||
font-family: Arial, sans-serif; |
||||
margin: auto; |
||||
padding: 30px; |
||||
background: rgba(255, 255, 255, 0.9); |
||||
border-radius: 8px; |
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
||||
width: 600px; |
||||
} |
||||
.form-container h2 { |
||||
margin-bottom: 20px; |
||||
} |
||||
.form-group { |
||||
margin-bottom: 15px; |
||||
} |
||||
.form-group label { |
||||
display: block; |
||||
margin-bottom: 5px; |
||||
} |
||||
.form-group input, |
||||
.form-group textarea, |
||||
.form-group select { |
||||
width: 100%; |
||||
padding: 10px; |
||||
border: 1px solid #ccc; |
||||
border-radius: 5px; |
||||
} |
||||
.form-group input[type="file"] { |
||||
padding: 5px; |
||||
} |
||||
.form-group button { |
||||
width: 100%; |
||||
padding: 10px; |
||||
background-color: #007BFF; |
||||
color: #fff; |
||||
border: none; |
||||
border-radius: 5px; |
||||
cursor: pointer; |
||||
} |
||||
.form-group button:hover { |
||||
background-color: #0056b3; |
||||
} |
||||
.form-wrapper { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
min-height: 100vh; |
||||
background: url('img/backgroung-form.jpg') no-repeat center center/cover; |
||||
} |
||||
|
After Width: | Height: | Size: 266 KiB |
|
After Width: | Height: | Size: 109 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 492 KiB |
Loading…
Reference in new issue