fixes UI

sumedhakoranga · Feb 13, 2024 · 3aaf844 · 3aaf844
1 parent 3fcacec
commit 3aaf844
Show file tree

Hide file tree

Showing 33 changed files with 404 additions and 426 deletions.
diff --git a/src/app/app.component.css b/src/app/app.component.css
@@ -0,0 +1,21 @@
+.navbar{
+  background-color: #5e8d83;
+}
+
+.navbar-center-logo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.nav-logo {
+  width: auto;
+  height: 50px;
+  max-width: 100%;
+}
+
+@media (max-width: 768px) {
+  .nav-logo {
+    height: 40px;
+  }
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,8 +1,39 @@
-<div class="container-fluid sticky-top bg-success">
-  <h1 class="text-center mb-0">Tutor.AI</h1>
-</div>
+<nav class="navbar navbar-expand-lg ">
+  <div class="container-fluid">
+    <div class="navbar-center-logo mx-auto">
+      <img src="/assets/img/TutorAI.png" alt="logo" class="nav-logo">
+    </div>
+    <a class=" m-2 navbar-brand" routerLink="/">Tutor.AI</a>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+        <li class="nav-item">
+          <a class="nav-link active" aria-current="page" role="button" routerLink="/access-account">Sign Up</a>
+        </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" routerLink="/" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
+            aria-expanded="false">
+            courses
+          </a>
+          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+            <li><a class="dropdown-item" routerLink="/">Action</a></li>
+            <li><a class="dropdown-item" routerLink="/">Another action</a></li>
+            <li>
+              <hr class="dropdown-divider">
+            </li>
+            <li><a class="dropdown-item" routerLink="/">Something else here</a></li>
+          </ul>
+        </li>
+        <li><a href="#" (click)="logout()" class="nav-link px-2 link-dark">logout</a></li>
+      </ul>
+    </div>
+  </div>
+</nav>
 <router-outlet></router-outlet>
-<app-navbar *ngIf ="showHeaderFooter"></app-navbar>
+<app-intro *ngIf="showHeaderFooter"></app-intro>
 <app-footer ></app-footer>
 
 
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { Router, NavigationEnd } from '@angular/router';
+import { getAuth, onAuthStateChanged, signOut } from "firebase/auth";
 
 @Component({
   selector: 'app-root',
@@ -13,9 +14,21 @@ export class AppComponent {
   constructor(private router: Router){
     this.router.events.subscribe((event:any)=>{
       if(event instanceof NavigationEnd){
-        this.showHeaderFooter = !(event.url === '/access-account' || event.url === '/login' || event.url === '/signup' || event.url === '/courses' || event.url === '/progress' || event.url === '/profile' || event.url === '/teachers' || event.url === '/mathematics' || event.url === '/science' || event.url === '/english' || event.url === '/socialscience' || event.url === '/comprehension');
+        this.showHeaderFooter = !(event.url === '/access-account' || event.url === '/learner/login' || event.url === '/learner/signup' || event.url === '/courses' || event.url === '/progress' || event.url === '/profile' || event.url === '/teachers' || event.url === '/mathematics' || event.url === '/science' || event.url === '/english' || event.url === '/socialscience' || event.url === '/comprehension');
       }
     });
   }
 
+  //logout
+
+  logout() {
+    const auth = getAuth();
+    signOut(auth).then(() => {
+      console.log('User signed out');
+      this.router.navigate(['/intro-page']);
+    }).catch((error) => {
+      console.error("logout error");
+    });
+  }
+
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -7,7 +7,6 @@ import { AboutComponent } from './intro-page/about/about.component';
 import { DifferenceComponent } from './intro-page/difference/difference.component';
 import { IntroComponent } from './intro-page/intro/intro.component';
 import { LearnersComponent } from './intro-page/learners/learners.component';
-import { NavbarComponent } from './intro-page/navbar/navbar.component';
 import { WorkComponent } from './intro-page/work/work.component';
 import { FooterComponent } from './footer/footer.component';
 import { LoginComponent } from './learner/login/login.component';
@@ -40,7 +39,6 @@ import { ComprehensionComponent } from './English/comprehension/comprehension.co
     DifferenceComponent,
     IntroComponent,
     LearnersComponent,
-    NavbarComponent,
     WorkComponent,
     FooterComponent,
     LoginComponent,

diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
@@ -1,6 +1,6 @@
 <footer class="text-center footer-expand-lg footer-dark bg-dark text-lg-start text-white"
   style="background-color: #1c2331">
-  <section class="d-flex p-4" style="background-color: #6351ce">
+  <section class="d-flex p-4" style="background-color: #4c7273">
     <div class="me-5">
       <span>Get connected with us on social networks:</span>
     </div>
@@ -12,18 +12,12 @@
       <a href="" class="text-white me-4">
         <i class="fa fa-twitter"></i>
       </a>
-      <a href="" class="text-white me-4">
-        <i class="fa fa-google"></i>
-      </a>
       <a href="" class="text-white me-4">
         <i class="fa fa-instagram"></i>
       </a>
       <a href="" class="text-white me-4">
         <i class="fa fa-linkedin"></i>
       </a>
-      <a href="" class="text-white me-4">
-        <i class="fa fa-github"></i>
-      </a>
     </div>
 
   </section>
@@ -34,30 +28,10 @@
 
       <div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
 
-        <h6 class="text-uppercase fw-bold">Company name</h6>
+        <h6 class="text-uppercase fw-bold">Tutor.AI</h6>
         <hr class="mb-4 mt-0 d-inline-block mx-auto" style="width: 60px; background-color: #7c4dff; height: 2px" />
         <p>
-          Here you can use rows and columns to organize your footer
-          content. Lorem ipsum dolor sit amet, consectetur adipisicing
-          elit.
-        </p>
-      </div>
-
-      <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
-
-        <h6 class="text-uppercase fw-bold">Products</h6>
-        <hr class="mb-4 mt-0 d-inline-block mx-auto" style="width: 60px; background-color: #7c4dff; height: 2px" />
-        <p>
-          <a href="#!" class="text-white">MDBootstrap</a>
-        </p>
-        <p>
-          <a href="#!" class="text-white">MDWordPress</a>
-        </p>
-        <p>
-          <a href="#!" class="text-white">BrandFlow</a>
-        </p>
-        <p>
-          <a href="#!" class="text-white">Bootstrap Angular</a>
+          Our goal is to provide a free, world-class education for anyone, anywhere.
         </p>
       </div>
 
@@ -66,27 +40,20 @@ <h6 class="text-uppercase fw-bold">Products</h6>
         <h6 class="text-uppercase fw-bold">Useful links</h6>
         <hr class="mb-4 mt-0 d-inline-block mx-auto" style="width: 60px; background-color: #7c4dff; height: 2px" />
         <p>
-          <a href="#!" class="text-white">Your Account</a>
-        </p>
-        <p>
-          <a href="#!" class="text-white">Become an Affiliate</a>
-        </p>
-        <p>
-          <a href="#!" class="text-white">Shipping Rates</a>
-        </p>
+          <a href="#" class="text-white">Your Account</a>
         <p>
-          <a href="#!" class="text-white">Help</a>
+          <a href="#" class="text-white">Help</a>
         </p>
       </div>
 
       <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
 
         <h6 class="text-uppercase fw-bold">Contact</h6>
         <hr class="mb-4 mt-0 d-inline-block mx-auto" style="width: 60px; background-color: #7c4dff; height: 2px" />
-        <p><i class="fas fa-home mr-3"></i> New York, NY 10012, India</p>
-        <p><i class="fas fa-envelope mr-3"></i> info</p>
-        <p><i class="fas fa-phone mr-3"></i> + 01 234 567 88</p>
-        <p><i class="fas fa-print mr-3"></i> + 01 234 567 89</p>
+        <p><i class=""></i>India</p>
+        <p><i class="mr-3"></i> info</p>
+        <p><i class="mr-3"></i> + 91 234 567 88</p>
+        <p><i class="mr-3"></i> + 91 234 567 89</p>
       </div>
 
     </div>

diff --git a/src/app/intro-page/about/about.component.css b/src/app/intro-page/about/about.component.css
@@ -1,8 +1,10 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
 .about-wrapper{
   padding:20px;
-  /* padding-left:5%; */
 }
 button{
   font-size: 25px;
-  font-family: Georgia, 'Times New Roman', Times, serif;
+  font-family: "Roboto" serif;
 }
diff --git a/src/app/intro-page/about/about.component.html b/src/app/intro-page/about/about.component.html
@@ -90,6 +90,6 @@ <h2 class="accordion-header" id="headingThree">
     </div>
   </div>
 </div>
-<app-work></app-work>
+<app-learners></app-learners>
 
 
diff --git a/src/app/intro-page/difference/difference.component.css b/src/app/intro-page/difference/difference.component.css
@@ -1,16 +1,16 @@
-/* img{
-  width: 440px;
-  height: 400px ;
-  display:block;
-  float: right;
-  padding-top:20%;
- } */
- h3{
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
+ h1{
   padding-top:5%;
-  /* padding-left:5%; */
+  color: #4c7273;
  }
  p{
-  font-size: larger;
-  font-family:Georgia, 'Times New Roman', Times, serif;
-  color:rgb(83, 83, 146);
- }
+  font-size: x-large;
+  font-family:"Roboto" serif;
+ }
+
+ img {
+    border: 2px dashed #4c7273;
+    border-radius: 10%;
+    width:550px;
+  }
diff --git a/src/app/intro-page/difference/difference.component.html b/src/app/intro-page/difference/difference.component.html
@@ -1,10 +1,10 @@
 <div class="container my-5">
   <div class="row text-center">
     <div class="col-sm-6 my-5 ">
-        <img class="border border-primary img-fluid my-4" src="/assets/img/study.jpg" alt="image" max-width="100%" height="auto">
+        <img class="img-fluid my-4" src="/assets/img/study.jpg" alt="image" >
     </div>
     <div class="col-sm-6 my-5">
-      <h3 class="text-center text-secondary">Together we can make a difference</h3>
+      <h1 class="text-center">Together we can make a difference</h1>
       <p>Every child deserves the chance to learn.</p>
       <div class="my-5">
         <button type="button" router="/" class="btn btn-success">Give them the chance</button>

diff --git a/src/app/intro-page/intro/intro.component.css b/src/app/intro-page/intro/intro.component.css
@@ -1,15 +1,20 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
 h3{
   font-size: 34px;
-  color:blue;
-  text-decoration: underline;
-  font-family:Georgia, 'Times New Roman', Times, serif;
+  color:#4c7273;
+  font-family:"Roboto", serif;
   font-weight: bold;
   padding-top:2%;
-  /* padding-left:5%; */
  }
+
  p{
   font-size:xx-large;
-  font-family: Georgia, 'Times New Roman', Times, serif;
+  font-family: "Roboto", serif;
   font-weight: 500;
-  /* padding-left:2%; */
+ }
+
+ img{
+  border-radius: 10%;
+  border:4px dotted #4c7273;
  }
diff --git a/src/app/intro-page/intro/intro.component.html b/src/app/intro-page/intro/intro.component.html
@@ -1,7 +1,7 @@
 <div class="container">
   <div class="row text-center">
     <div class="col-md-6 ">
-      <img class="border border-primary img-fluid my-4" src="/assets/img/image1.jpg" alt="image" max-width="100%"
+      <img class="img-fluid my-4" src="/assets/img/image1.jpg" alt="image" max-width="100%"
         height="auto">
     </div>
     <div class="col-md-6  my-5">

diff --git a/src/app/intro-page/learners/learners.component.css b/src/app/intro-page/learners/learners.component.css
@@ -1,20 +1,21 @@
-/* img{
-  width: 440px;
-  height: 400px ;
-  display:block;
-  float: right;
-  padding-top:20%;
- } */
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
+  h1{
+    color: #4c7273;
+  }
  h2{
-  font-size: xx-large;
-  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-  font-style: italic;
+  font-family: "Roboto", serif;
  }
  h3{
   padding-top:15%;
  }
  p{
-  font-size: xx-large;
-  font-family:Georgia, 'Times New Roman', Times, serif;
-  color:rgb(83, 83, 146);
+  font-size: x-large;
+  font-family: "Roboto", serif;
+  color:#4c7273;
+ }
+
+ img{
+  border: 2px dashed #4c7273;
+  border-radius: 10%;
  }
diff --git a/src/app/intro-page/learners/learners.component.html b/src/app/intro-page/learners/learners.component.html
@@ -1,7 +1,7 @@
 <div class="container my-4">
   <div class="row text-center">    
     <div class="col-md-6 my-5">
-      <h3 class="text-center text-secondary ">Learners and student</h3>
+      <h1 class="text-center">Learners and student</h1>
       <h2 class="my-4">You can learn anything.</h2>
       <p>Build a deep, solid understanding in math, science,and more.</p>
       <div class="button-wrapper my-2">

diff --git a/src/app/intro-page/navbar/navbar.component.css b/src/app/intro-page/navbar/navbar.component.css
diff --git a/src/app/intro-page/navbar/navbar.component.html b/src/app/intro-page/navbar/navbar.component.html
-Original file line number
+Diff line change
@@ Expand Up / @@ -90,6 +90,6 @@ <h2 class="accordion-header" id="headingThree"> @@
         </div>
       </div>
     </div>
-    <app-work></app-work>
+    <app-learners></app-learners>