Final Project

sahara/main/templates/main/aboutus.html

@@ -0,0 +1,105 @@
+
+{% extends 'base.html' %}
+{% load static %}
+{% block content %}
+    <style>
+        /* General Styles */
+        body {
+            margin: 0;
+            font-family: 'Helvetica Neue', sans-serif;
+            background-color: #f4f7fb;
+            color: #333;
+        }
+
+        h1, h2 {
+            font-weight: 700;
+            color: #2c3e50;
+            margin-bottom: 30px;
+        }
+
+        h1 {
+            font-size: 36px;
+        }
+
+        h2 {
+            font-size: 28px;
+        }
+
+        /* About Us Section */
+        .about-us-section {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 50px 20px;
+            background-color: #ffffff;
+            margin: 30px auto;
+            max-width: 1200px;
+            border-radius: 15px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        .about-us-section:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
+        }
+
+        .about-us-text {
+            flex: 1;
+            font-size: 18px;
+            line-height: 1.6;
+            color: #555;
+            text-align: left;
+        }
+
+        .about-us-text h2 {
+            font-size: 28px;
+        }
+
+        .about-us-text p {
+            font-size: 16px;
+            color: #777;
+        }
+
+        .about-us-logo {
+            flex: 1;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .about-us-logo img {
+            width: 250px; /* Adjust the size as needed */
+            height: auto;
+            border-radius: 10px;
+        }
+
+        /* Responsive Styles */
+        @media (max-width: 768px) {
+            .about-us-section {
+                flex-direction: column;
+                align-items: center;
+            }
+
+            .about-us-logo {
+                margin-top: 20px;
+            }
+        }
+    </style>
+
+    <!-- About Us Section -->
+    <section class="about-us-section" id="about-us">
+        <div class="about-us-text">
+            <h2>About Us</h2>
+            <p>Our Elderly Support App is dedicated to providing high-quality care and assistance to elderly individuals. We understand the importance of independence and security, which is why our app offers features that enhance communication, health monitoring, and emergency support.</p>
+            <p>We believe that elderly individuals deserve the best tools to manage their lifestyle, stay connected with loved ones, and receive prompt care when needed. Our mission is to make the lives of seniors safer, healthier, and more fulfilling through technology.</p>
+        </div>
+        <div class="about-us-logo">
+            <img src="{% static 'img/logofinal.png' %}" alt="Elderly Care Logo">
+        </div>
+    </section>
+
+    <script>
+        // Add any necessary JavaScript here if needed
+    </script>
+{% endblock %}

sahara/main/templates/main/profile.html

@@ -90,7 +90,7 @@
                 <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 }}
+                        {{ req.service_offered }} request from {{ req.client.first_name|capfirst }} {{ req.client.last_name|capfirst }} for Rs {{req.agreed_price}} , Time:- {{req.service_hour}} hrs
                         <a class="btn btn-success status-badge status-active" href={% url 'approve' req.id %}>Accept</a>
                     </li>
                     {% empty %}
@@ -109,7 +109,7 @@
                 <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 }}
+                        {{ service.service_offered }} request from {{ service.client.first_name|capfirst }} {{ service.client.last_name|capfirst }} for Rs{{service.agreed_price}} , Time:- {{service.service_hour}} hrs
                         <a class="status-badge status-complete" href="{% url 'complete' service.id %}">Complete</a>
                     </li>
                     {% empty %}

sahara/main/templates/main/services1.html

@@ -5,62 +5,96 @@
         /* General Styles */
         body {
             margin: 0;
-            font-family: Arial, sans-serif;
+            font-family: 'Helvetica Neue', sans-serif;
+            background-color:rgba(207, 207, 207, 0.44);
+            color: #333;
         }
 
         h1, h2 {
-            text-align: center;
+            font-weight: 700;
-            color: #333;
+            color: #2c3e50;
+            margin-bottom: 30px;
+        }
+
+        h1 {
+            font-size: 36px;
+        }
+
+        h2 {
+            font-size: 28px;
         }
 
-        .section {
+        /* Edge-like Container Styles */
+        .edge-container {
             padding: 50px 20px;
-            background-color: #fdf6e3; /* Beige background */
+            background-color: #ffffff;
-            margin: 20px auto;
+            border: 1px solid #ccc;
+            border-radius: 15px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            margin: 30px auto;
             width: 80%;
-            border-radius: 8px;
+            max-width: 1200px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
-            opacity: 0;
-            transform: translateX(-100px);
-            transition: all 0.8s ease-in-out;
         }
 
-        .section.visible {
+        .edge-container:hover {
-            opacity: 1;
+            transform: translateY(-5px);
-            transform: translateX(0);
+            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
         }
 
-        .service {
+        /* Service Section */
+        .service-content {
             display: flex;
+            justify-content: space-between;
             align-items: center;
-            margin-top: 20px;
+            gap: 20px;
         }
 
-        .service img {
+        /* Left-aligned Text */
-            width: 100px;
+        .service-text {
-            height: 100px;
+            flex: 1;
-            border-radius: 8px;
+            font-size: 24px;
-            margin-right: 20px;
+            line-height: 1.6;
+            color: #555;
+            text-align: left;
         }
 
-        .service p {
+        .service-text h2 {
-            font-size: 16px;
+            font-size: 50px;
-            line-height: 1.6;
+        }
+
+        /* Vertical Line Between Text and Images */
+        .service-images {
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+            border-left: 3px solid #ccc;
+            padding-left: 20px;
+            margin-left: 20px;
+        }
+
+        .service-content img {
+            width: 100%;
+            max-width: 350px;
+            height:200px;
+            border-radius: 12px;
+            object-fit: cover;
         }
 
-        .services-grid {
+        /* Features Section */
+        .features-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: 20px;
+            gap: 30px;
             margin-top: 40px;
         }
 
         .grid-item {
-            background-color: #ffffff;
+            background-color: #fff;
-            padding: 20px;
+            padding: 30px;
-            border-radius: 8px;
+            border-radius: 15px;
             text-align: center;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
             opacity: 0;
             transform: translateY(100px);
             transition: all 0.8s ease-in-out;
@@ -72,67 +106,94 @@
         }
 
         .grid-item img {
-            width: 80px;
+            width: 200px;
-            height: 80px;
+            height: 200px;
-            margin-bottom: 10px;
+            margin-bottom: 20px;
+            border-radius: 10px;
         }
 
         .grid-item h3 {
             margin: 10px 0;
-            font-size: 18px;
+            font-size: 22px;
+            color: #34495e;
         }
 
         .grid-item p {
-            font-size: 14px;
+            font-size: 16px;
-            color: #555;
+            color: #7f8c8d;
+        }
+
+
+
+        /* Responsive Improvements */
+        @media (max-width: 768px) {
+            .service-content {
+                flex-direction: column;
+                align-items: center;
+            }
+
+            .service-text {
+                text-align: center;
+            }
+
+            .service-images {
+                border-left: none;
+                padding-left: 0;
+                margin-left: 0;
+                display: flex;
+                justify-content: center;
+                gap: 20px;
+            }
+
+            .grid-item {
+                padding: 20px;
+            }
         }
     </style>
-</head>
-<body>
-    <h1>Services</h1>
 
-    <section class="section" id="service-1">
+    <!-- Service Section -->
+    <section class="edge-container" id="service-1">
+        <div class="service-content">
+            <div class="service-text">
                 <h2>Our Services</h2>
-        <div class="service">
+                <p>We offer tech support, easy-to-use mobile apps, and dedicated services to help elderly individuals live independently with confidence.</p>
-            <img src="https://via.placeholder.com/100" alt="Service Image">
+                <p>Our team ensures continuous support for various medical, emergency, and lifestyle needs tailored to the elderly community.</p>
-            <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>
+            <div class="service-images">
+                <img src="https://images.pexels.com/photos/3768131/pexels-photo-3768131.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Service Image 1">
+                <img src="https://images.pexels.com/photos/33786/hands-walking-stick-elderly-old-person.jpg?auto=compress&cs=tinysrgb&w=600" alt="Service Image 2">
             </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">
+    <!-- Features Section -->
-        <h2>Our Web App Provides</h2>
+    <section class="edge-container" id="services-grid">
-        <div class="services-grid">
+        <h2>Features of Our Web App</h2>
+        <div class="features-grid">
             <div class="grid-item">
-                <img src="https://via.placeholder.com/80" alt="Feature 1">
+                <img src="https://images.pexels.com/photos/3768140/pexels-photo-3768140.jpeg" alt="Feature 1">
-                <h3>Feature 1</h3>
+                <h3>Easy Communication</h3>
-                <p>Detail about the first feature of the web app.</p>
+                <p>Connect with family, friends, and healthcare providers instantly through easy-to-use messaging and calling features.</p>
             </div>
             <div class="grid-item">
-                <img src="https://via.placeholder.com/80" alt="Feature 2">
+                <img src="https://images.pexels.com/photos/7551646/pexels-photo-7551646.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Feature 2">
-                <h3>Feature 2</h3>
+                <h3>Health Monitoring</h3>
-                <p>Detail about the second feature of the web app.</p>
+                <p>Track your health and medical information with our built-in tools, including medication reminders and emergency alerts.</p>
             </div>
             <div class="grid-item">
-                <img src="https://via.placeholder.com/80" alt="Feature 3">
+                <img src="https://images.pexels.com/photos/6646919/pexels-photo-6646919.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Feature 3">
-                <h3>Feature 3</h3>
+                <h3>Emergency Support</h3>
-                <p>Detail about the third feature of the web app.</p>
+                <p>Quickly access emergency services and loved ones with one-touch buttons in case of an urgent situation.</p>
             </div>
             <div class="grid-item">
-                <img src="https://via.placeholder.com/80" alt="Feature 4">
+                <img src="https://images.pexels.com/photos/7551646/pexels-photo-7551646.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Feature 4">
-                <h3>Feature 4</h3>
+                <h3>Friendly Interface</h3>
-                <p>Detail about the fourth feature of the web app.</p>
+                <p>Our app is designed with large, easy-to-read buttons, icons, and clear text for a user-friendly experience.</p>
             </div>
         </div>
     </section>
 
+
     <script>
         // Function to check if element is in viewport
         function isInViewport(element) {

sahara/main/urls.py

@@ -9,6 +9,7 @@ urlpatterns = [
     path('logout/', views.user_logout, name='logout'),
      path('hire/', views.hire_view, name='hire'),
      path('services/',views.services,name='services'),
+     path('aboutus/',views.aboutus,name='aboutus'),
      path('profiles/<pk>',views.profie_View, name="profiles"),
      path('approve/<pk>',views.approve, name="approve"),
      path('complete/<pk>',views.complete, name="complete"),

sahara/main/views.py

@@ -116,6 +116,9 @@ def user_logout(request):
 def services(request):
     return render(request,'main/services1.html')
 
+def aboutus(request):
+    return render(request,'main/aboutus.html')
+
 @login_required(login_url='login')
 @csrf_protect
 def hire_view(request):

sahara/templates/base.html

@@ -22,7 +22,7 @@
               <a class="nav-link active" aria-current="page" href="{% url 'home' %}">Home</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#">About us</a>
+              <a class="nav-link" href="{% url 'aboutus' %}">About us</a>
             </li>
             <li class="nav-item">
               <a class="nav-link" href="{% url 'services' %}">Services</a>