Merge pull request #6 from dhrumilp12/devlopment

ui2

Author: dhrumilp12

meme_mingle/src/app/auth/sign-in/sign-in.component.scss

@@ -88,6 +88,12 @@
   transform: scale(1.1); /* Slight scale for hover effect */
 }
 
+.OR{
+  color:#000000;
+}
+
+
+
 /* Media Queries */
 @media (max-width: 768px) {
   .signin-container {
@@ -406,7 +412,7 @@
 
 /* Update placeholder text color */
 ::placeholder {
-  color: #ffffff; /* White placeholders */
+  color: gray; /* Changed from white to black */
   opacity: 1; /* Ensure visibility */
 }
 

meme_mingle/src/app/layout/sidebar/sidebar.component.html

@@ -26,19 +26,19 @@
     <div class="menu-items">
       <!-- New Chat -->
       <button class="menu-btn" title="{{ translatedTexts['New Chat'] || 'New Chat' }}" routerLink="/main/live-conversion">
-        <i class="bi bi-plus-square-fill"></i>
-        <span data-translate>New Chat</span>
+        <i class="bi bi-magic"></i> <!-- Updated to magic wand icon -->
+        <span data-translate> Chat Wizard</span>
       </button>
       <!-- AI Avatar -->
       <button class="menu-btn" title="{{ translatedTexts['AI Avatar'] || 'AI Avatar' }}" routerLink="/main/avatar">
-        <i class="bi bi-person-circle"></i>
-        <span data-translate>AI Avatar</span>
+        <span role="img" aria-label="girl">👧</span>
+        <span data-translate>Buddy</span>
       </button>
 
-      <!-- Quiz-ai -->
+      <!-- Quiz AI -->
       <button class="menu-btn" title="{{ translatedTexts['Quiz AI'] || 'Quiz AI' }}" routerLink="/main/quiz-ai">
-        <i class="bi bi-list-check"></i>
-        <span data-translate>Quiz AI</span>
+        <span role="img" aria-label="question">❓</span> <!-- Updated to question mark emoji -->
+        <span data-translate>Quizify</span>
         <span class="score-badge"  title="Total Score" *ngIf="totalScore !== null">{{ totalScore }}</span>
       </button>
     </div>

meme_mingle/src/app/layout/sidebar/sidebar.component.scss

@@ -17,8 +17,8 @@
  .sidebar-wrapper {
    width: $sidebar-width;
    height: 98.4vh; /* Adjust height to include margins if needed */
-   background: linear-gradient(to right, #fff3db, #ffb84d);
-   box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+   background-image: linear-gradient(90deg, #FFBD59 0%, #ffffff 25%, #FFBD59 100%); // Adjusted gradient for brightness
+   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Enhanced shadow for depth */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
@@ -29,6 +29,7 @@
    top: 10px;
    left: 10px;
    z-index: 1000;
+   border: #1e1e1e 2px solid;
 
    /*
     * =============== DESKTOP COLLAPSED ===============
@@ -72,11 +73,17 @@
          height: 50px;
          justify-content: center;
          border: 2px solid #1e1e1e;
+         background-color: #ffc966; /* Adjusted for better visibility in collapsed state */
 
          /* Hide text labels */
          span {
            display: none;
          }
+
+         &:hover {
+           background-color: #ffb333; /* More vibrant hover color */
+           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Enhanced hover shadow */
+         }
        }
      }
    }
@@ -90,12 +97,18 @@
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
+
 
    .logo-wrapper {
      .sidebar-logo-img {
        width: 150px;
        height: auto;
-       border-radius: 10px;
+      //  border-radius: 10px;
+     }
+     img{
+      
+      // margin: 10px;
+      // background-color: #fff;
      }
    }
 
@@ -130,27 +143,27 @@
    gap: 1rem;
 
    .menu-btn {
-     display: flex;
-     align-items: center;
-     gap: 1rem;
-     padding: 0.8rem;
-     background-color: #fff;
-     border: none;
-     border-radius: 8px;
-     font-size: 1rem;
-     font-weight: 600;
-     color: #333;
-     box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
-     position: relative;
-     transition: background-color 0.3s, transform 0.3s;
-     border: 2px solid #1e1e1e;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.8rem;
+    background-color: #ffd9a5; /* Slightly deeper color for better contrast */
+    border: 2px solid #333; /* Darker border */
+    font-size: 1rem;
+    font-weight: 600;
+    color: #2c2c2c; /* Darker text color for readability */
+    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
+    position: relative;
+    transition: background-color 0.3s, transform 0.3s;
+    border-radius: 30px;
 
      i {
        font-size: 1.2rem;
      }
 
      &:hover {
-       background-color: #f7f7f7;
+       background-color: #ffbf73; /* More vibrant hover color */
+       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Enhanced hover shadow */
      }
 
      .score-badge {
@@ -187,18 +200,18 @@
      align-items: center;
      gap: 1rem;
      padding: 0.8rem;
-     background-color: #fff;
-     border: none;
-     border-radius: 8px;
+     background-color: #ffd9a5; /* Consistent background color */
+     border: 2px solid #333; /* Darker border */
      font-size: 1rem;
      font-weight: 600;
-     color: #333;
+     color: #2c2c2c; /* Darker text color */
      box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
      transition: background-color 0.3s, transform 0.3s;
-     border: 2px solid #1e1e1e;
+     
 
      &:hover {
-       background-color: #f7f7f7;
+       background-color: #ffbf73; /* Vibrant hover color */
+       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Enhanced hover shadow */
      }
    }
 
@@ -208,8 +221,7 @@
        height: 30px;
        border-radius: 50%;
        object-fit: cover;
-       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-       
+       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Enhanced shadow for avatar */
      }
    }
  }
@@ -251,12 +263,18 @@
            border-radius: 50%;
            width: 50px;
            height: 50px;
+           background-color: #ffc966; /* Adjusted for better visibility in collapsed state */
+           border: 2px solid #333; /* Darker border */
            span {
              display: none;
            }
+
+           &:hover {
+             background-color: #ffb333; /* More vibrant hover color */
+             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Enhanced hover shadow */
+           }
          }
        }
      }
    }
  }
- 

meme_mingle/src/app/main/avatar3d/avatar3d.component.scss

@@ -1,18 +1,22 @@
 .three-avatar-container {
-    position: relative;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0; // Ensure no padding
+  box-sizing: border-box; // Include padding and border in the element's total width and height
+  background-color: #f8b6b6; // Brighter background color
+  background-image: linear-gradient(45deg, #fb8383 0%, #ffffff 25%, #ff8c8c 100%); // Adjusted gradient for brightness
+  // top side of border 15px, right side of border 15px
+  border-radius: 15px 15px 0 0; // Rounded corners on top
+
+  canvas {
     width: 100%;
     height: 100%;
-    margin: 0;
-    background-color: #faaca8;
-    background-image: linear-gradient(19deg, #faaca8 0%, #ddd6f3 100%);
-  
-    canvas {
-      width: 100%;
-      height: 100%;
-      display: block;
-    }
+    display: block;
   }
-  
-  // body {
+}
+
+// body {
 
-  // }
+// }

meme_mingle/src/app/main/chat-ui/chat-ui.component.html

@@ -45,14 +45,14 @@ <h2>Welcome to AI Chat</h2>
       [currentMessage]="latestMentorMessage?.message ?? null"
       [audioUrl]="latestMentorMessage?.audioUrl ?? null"
       [avatarAudio]="latestMentorMessage?.avatarAudio ?? null"
-      [animation]="latestMentorMessage?.animation ?? 'Idle'"
+      [animation]="latestMentorMessage?.animation ?? null"
       [facialExpression]="latestMentorMessage?.facialExpression ?? 'default'"
       [lipSyncData]="latestMentorMessage?.lipSyncData ?? null"
       (avatarEvent)="handleAvatarEvent($event)"
     >
     </app-avatar3d>
   </div>
-  
+  <div class = "common-container ">
   <!-- New Input Area -->
   <div class="input-area">
     <!-- File Preview Section -->
@@ -156,3 +156,4 @@ <h2>Welcome to AI Chat</h2>
     </button> -->
   </div>
 </div>
+</div>