From 166b90dc5d1639c5b5f1ff8f1206f12ac9018b1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C2=96saaakh63?= <sara.khalefa708@compit.aun.edu.eg>
Date: Sat, 21 Jun 2025 20:26:45 +0300
Subject: [PATCH 1/2] fix media query

---
 .../src/Components/home/home.component.html   |  2 +
 .../Components/navbar/navbar.component.css    |  4 +-
 .../Components/navbar/navbar.component.html   | 12 +--
 .../src/Components/navbar/navbar.component.ts |  4 +
 Interface/src/app/app.component.css           |  2 +-
 Interface/src/styles.css                      | 73 +++++++++++++++++++
 6 files changed, 88 insertions(+), 9 deletions(-)

diff --git a/Interface/src/Components/home/home.component.html b/Interface/src/Components/home/home.component.html
index 6d55b278..e404e5d0 100644
--- a/Interface/src/Components/home/home.component.html
+++ b/Interface/src/Components/home/home.component.html
@@ -9,12 +9,14 @@ <h1 style="color: #20c0bd;">{{ 'WELCOME_TITLE' | translate }}</h1>
       </button>
     </ng-container>
     <ng-template #notLoggedIn>
+        <div class="welcome-box">
       <h1>FeedPulse</h1>
       <p>{{ 'WELCOME_SUBTITLE' | translate }}</p>
       <a routerLink="/signup" routerLinkActive="active" class="btn">{{ 'GET_STARTED' | translate }}</a>
       <button class="gif-button" (click)="onButtonClick()">
         <img src="assets/gif/video.webp" alt="Button GIF"> {{ 'WATCH_VIDEO' | translate }}
       </button>
+  </div>
     </ng-template>
   </div>
   <div class="right-side">
diff --git a/Interface/src/Components/navbar/navbar.component.css b/Interface/src/Components/navbar/navbar.component.css
index d5a13546..4dddab06 100644
--- a/Interface/src/Components/navbar/navbar.component.css
+++ b/Interface/src/Components/navbar/navbar.component.css
@@ -120,7 +120,7 @@ body {
 }
 
 /* Responsive Design */
-@media (max-width: 768px) {
+@media (max-width: 600px) {
   .navbar {
     flex-direction: column;
     align-items: flex-start;
@@ -185,7 +185,7 @@ body {
   position: relative;
   min-width: 120px;
   margin-bottom: 10px;
-  
+
   background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 10px center;
diff --git a/Interface/src/Components/navbar/navbar.component.html b/Interface/src/Components/navbar/navbar.component.html
index 94213fcf..1f885c91 100644
--- a/Interface/src/Components/navbar/navbar.component.html
+++ b/Interface/src/Components/navbar/navbar.component.html
@@ -18,15 +18,15 @@
           <option value="es">🌍 español</option>
         </select>
     </li>
-    <li><a routerLink="/home" routerLinkActive="active active-link" [routerLinkActiveOptions]="{ exact: true }">{{ 'HOME' | translate }}</a></li>
-    <li><a routerLink="/about" routerLinkActive="active active-link">{{ 'ABOUT_US' | translate }}</a></li>
+    <li><a routerLink="/home" routerLinkActive="active active-link" [routerLinkActiveOptions]="{ exact: true }"(click)="closeMenu()">{{ 'HOME' | translate }}</a></li>
+    <li><a routerLink="/about" routerLinkActive="active active-link"(click)="closeMenu()">{{ 'ABOUT_US' | translate }}</a></li>
     <ng-container *ngIf="isLoggedIn; else notLoggedIn">
-      <li><a routerLink="/dashboard" routerLinkActive="active active-link">{{ 'INSIGHTS' | translate }}</a></li>
-      <li><a href="#" (click)="onLogout($event)">{{ 'LOGOUT' | translate }}</a></li>
+      <li><a routerLink="/dashboard" routerLinkActive="active active-link"(click)="closeMenu()">{{ 'INSIGHTS' | translate }}</a></li>
+      <li><a href="#" (click)="onLogout($event)" >{{ 'LOGOUT' | translate }}</a></li>
     </ng-container>
     <ng-template #notLoggedIn>
-      <li><a routerLink="/login" routerLinkActive="active active-link">{{ 'LOGIN' | translate }}</a></li>
-      <li><a routerLink="/signup" routerLinkActive="active active-link">{{ 'SIGNUP' | translate }}</a></li>
+      <li><a routerLink="/login" routerLinkActive="active active-link"(click)="closeMenu()">{{ 'LOGIN' | translate }}</a></li>
+      <li><a routerLink="/signup" routerLinkActive="active active-link"(click)="closeMenu()">{{ 'SIGNUP' | translate }}</a></li>
     </ng-template>
   </ul>
 </nav>
diff --git a/Interface/src/Components/navbar/navbar.component.ts b/Interface/src/Components/navbar/navbar.component.ts
index ced436a5..25110474 100644
--- a/Interface/src/Components/navbar/navbar.component.ts
+++ b/Interface/src/Components/navbar/navbar.component.ts
@@ -65,6 +65,7 @@ export class NavbarComponent implements OnDestroy {
     this.isLoggedIn = this.authService.isLoggedIn();
     this.cdr.detectChanges();
     this.router.navigate(['/login']);
+    this.menuOpen = false;
   }
 
   getCurrentLanguage(): string {
@@ -78,4 +79,7 @@ export class NavbarComponent implements OnDestroy {
   toggleMenu() {
     this.menuOpen = !this.menuOpen;
   }
+  closeMenu() {
+  this.menuOpen = false;
+}
 }
diff --git a/Interface/src/app/app.component.css b/Interface/src/app/app.component.css
index 831abb22..befb4fbc 100644
--- a/Interface/src/app/app.component.css
+++ b/Interface/src/app/app.component.css
@@ -115,7 +115,7 @@ li a:hover::after {
 }
 
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 600px) {
 
   ul {
     flex-direction: column;
diff --git a/Interface/src/styles.css b/Interface/src/styles.css
index 653eb9be..3af5688c 100644
--- a/Interface/src/styles.css
+++ b/Interface/src/styles.css
@@ -11,6 +11,79 @@
   font-family: 'Helmet';
   src: url('/assets/fonts/Helmet-Regular.ttf') format('opentype');
 }
+
+@media screen and (max-width: 600px) {
+  body {
+    font-size: 14px;
+
+  }
+
+
+  .padded-text {
+  padding-left: 20px;
+}
+   .welcome-box h1 {
+    font-size: 18px !important;
+  }
+ span{
+  font-size: 14px;
+ }
+  .welcome-box p,
+  .welcome-box .btn,
+  .welcome-box .gif-button {
+    font-size: 18px !important;
+  }
+  .about-text p,h2{
+    font-size: 14px;
+  }
+ p {
+font-size: 14px;
+ }
+  .gif-button img {
+    width: 30px;
+    height: 30px;
+  }
+
+  h1 {
+    font-size: 20px;
+  }
+
+  h2 {
+    font-size: 18px;
+  }
+
+  h3 {
+    font-size: 16px;
+  }
+
+  ul {
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+  }
+
+  li a {
+    padding: 12px 16px;
+    font-size: 16px;
+  }
+
+
+  .search-container {
+    display: block;
+    width: 100%;
+    text-align: center;
+    margin-top: 10px;
+  }
+
+  .search-input {
+    width: 80%;
+    margin-bottom: 10px;
+  }
+
+  .search-btn {
+    width: 80%;
+  }
+}
 body{
     font-family:  "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }

From 1bcf3d9e41e8f6625d169137927aeabd1d46432e Mon Sep 17 00:00:00 2001
From: Pavly <pavlysamuelatef@gmail.com>
Date: Thu, 26 Jun 2025 17:37:28 +0300
Subject: [PATCH 2/2] Vercel