{{item.active?'Online':'Offline'}}
+
+
\ No newline at end of file
diff --git a/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/features/chat-box/chat-box.component.scss b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/features/chat-box/chat-box.component.scss
new file mode 100644
index 00000000..fd506957
--- /dev/null
+++ b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/features/chat-box/chat-box.component.scss
@@ -0,0 +1,123 @@
+.chat-container{
+ display: flex;
+
+ .navbar{
+ padding: 0px;
+ }
+
+ & button{
+ outline: none;
+ border: none;
+ background-color: transparent;
+ }
+
+ .chat-box{
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ justify-content: space-between;
+ padding: 0rem 0rem 1.5rem 0rem;
+ overflow-y: auto;
+
+ .defaultView{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-grow: 1;
+ flex-direction: column;
+
+ > img{
+ width: 50%;
+ }
+ > h6{
+ color: #115DFC;
+ }
+ > p{
+ text-align: center;
+ width: 60%;
+ color: #aeadad;
+ }
+ }
+
+
+ .chat-scroll{
+ overflow-y: auto;
+ height: 70vh;
+ }
+
+ .chat-message{
+
+ margin-right: 4rem;
+ margin-left: auto;
+ margin-top: 1rem;
+
+ > ul{
+ list-style: none;
+ align-items: flex-end;
+ display: flex;
+ flex-direction: column;
+ > span{
+ font-size: 10px;
+ color: lightslategrey;
+ }
+ > li{
+ width: auto;
+ //background-color: #dfeaff;
+ border-radius: 11px 11px 11px 11px;
+ padding: .5rem 1rem .5rem 1rem;
+ }
+ }
+
+ }
+
+ .send-img {
+ width: 30px;
+ }
+
+ .send-input {
+ outline: none;
+ display: flex;
+ border: none;
+ background: none;
+ height: 100%;
+ width: 100%;
+ border-radius: 7px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ margin-left: 5px;
+ }
+
+ .send-input::placeholder {
+ color: #828E9E;
+ }
+
+ .input-place {
+ display: flex;
+ flex-direction: row;
+ margin: 0 auto;
+ align-items: center;
+ border-radius: 7px;
+ width: 85%;
+ gap: 5px;
+ justify-content: space-between;
+ padding: 0.5rem;
+ box-shadow: rgba(99, 99, 99, 0.2) 0px 1px 4px 0px;
+ }
+
+ .send {
+ width: 30px;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ margin-bottom: 0.2rem;
+ }
+
+ .send-icon {
+ width: 17px;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/features/chat-box/chat-box.component.spec.ts b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/features/chat-box/chat-box.component.spec.ts
new file mode 100644
index 00000000..5dd5f950
--- /dev/null
+++ b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/features/chat-box/chat-box.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChatBoxComponent } from './chat-box.component';
+
+describe('ChatBoxComponent', () => {
+ let component: ChatBoxComponent;
+ let fixture: ComponentFixture
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ Welcome to ChatSphere!
++ A real-time messaging app where conversations happen instantly. + Start chatting now and stay connected effortlessly! +
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/features/chat-box/chat-header/chat-header.component.scss b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/features/chat-box/chat-header/chat-header.component.scss
new file mode 100644
index 00000000..98a4cc9d
--- /dev/null
+++ b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/features/chat-box/chat-header/chat-header.component.scss
@@ -0,0 +1,33 @@
+.container{
+
+ width: 100%;
+ box-shadow: rgb(99 99 99 / 29%) 3px 0px 7px 0px;
+ color: white;
+ background-color: cornflowerblue;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ .user {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ padding-left: 1rem;
+ }
+
+ .heading{
+ font-size: x-large;
+ padding: 1rem;
+ font-weight: 600;
+ }
+
+ .image {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ margin-right: 10px;
+ border: 3px solid #50d850;
+ }
+
+}
diff --git a/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/features/chat-box/chat-header/chat-header.component.spec.ts b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/features/chat-box/chat-header/chat-header.component.spec.ts
new file mode 100644
index 00000000..95b2b19a
--- /dev/null
+++ b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/features/chat-box/chat-header/chat-header.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChatHeaderComponent } from './chat-header.component';
+
+describe('ChatHeaderComponent', () => {
+ let component: ChatHeaderComponent;
+ let fixture: ComponentFixtureChat Room
+
+
+
+ ![]()
+
+
+ +{{ activeUsers.length - 6 }} more
+
+
+
\ No newline at end of file
diff --git a/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/features/chat-box/chat-list/chat-list.component.scss b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/features/chat-box/chat-list/chat-list.component.scss
new file mode 100644
index 00000000..3c381af1
--- /dev/null
+++ b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/features/chat-box/chat-list/chat-list.component.scss
@@ -0,0 +1,74 @@
+.container{
+ height: 100vh;
+ width: 100%;
+ box-shadow: rgba(99, 99, 99, 0.09) 3px 0px 7px 0px;
+ padding: 1rem 2rem 0rem 1rem;
+ color: #0d4dd4;
+ overflow-y: auto;
+
+ > p{
+ font-size: x-large;
+ font-weight: 600;
+ padding: 0rem 1rem 0rem 1rem;
+ margin-bottom: 0;
+ }
+
+ > ul{
+ list-style: none;
+ padding: 12px;
+ list-style: none;
+
+ > li{
+ font-size: large;
+ font-weight: 500;
+ color: grey;
+
+ .user {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ .user__content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-grow: 1;
+ margin-top: 10px;
+
+ .name{
+ outline: none;
+ border: none;
+ background-color: transparent;
+ padding: 0;
+ margin: 0;
+ color: grey;
+ font-size: medium;
+ text-align: justify;
+ }
+ .name:hover,
+ .name:focus {
+ color: #0d4dd4;
+ }
+ }
+
+ .user__container {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .username {
+ font-size: small;
+ color: #64696e;
+ }
+
+ .image {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ margin-right: 10px;
+ }
+ }
+ }
+}
diff --git a/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/features/chat-box/chat-list/chat-list.component.spec.ts b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/features/chat-box/chat-list/chat-list.component.spec.ts
new file mode 100644
index 00000000..312401fb
--- /dev/null
+++ b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/features/chat-box/chat-list/chat-list.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChatListComponent } from './chat-list.component';
+
+describe('ChatListComponent', () => {
+ let component: ChatListComponent;
+ let fixture: ComponentFixtureMembers
+-
+
-
+ ++++++ ++
+
+
+
+
+
+
diff --git a/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/features/login/login.component.scss b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/features/login/login.component.scss
new file mode 100644
index 00000000..db19dd30
--- /dev/null
+++ b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/features/login/login.component.scss
@@ -0,0 +1,201 @@
+
+.container{
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ -webkit-transform: translate(-50%, -50%);
+ -moz-transform: translate(-50%, -50%);
+ -o-transform: translate(-50%, -50%);
+ -ms-transform: translate(-50%, -50%);
+ position: fixed;
+
+ margin: auto;
+ width: 60rem;
+
+ .row{
+ box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
+ border-radius: 10px;
+
+ .login{
+ height: 25rem;
+ padding: 2rem;
+
+ .form-group{
+ margin-bottom: 1rem;
+ }
+
+
+ .form_container {
+ width: fit-content;
+ height: fit-content;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 15px;
+ padding: 0px 0px 0px 80px;
+ background-color: #ffffff;
+ /* box-shadow: 0px 106px 42px rgba(0, 0, 0, 0.01), 0px 59px 36px rgba(0, 0, 0, 0.05), 0px 26px 26px rgba(0, 0, 0, 0.09), 0px 7px 15px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1); */
+ /* border-radius: 11px; */
+ font-family: "Inter", sans-serif;
+ /* margin-top: 0rem; */
+
+ }
+
+ .logo_container {
+ box-sizing: border-box;
+ width: 80px;
+ height: 80px;
+ background: linear-gradient(180deg, rgba(248, 248, 248, 0) 50%, #F8F8F888 100%);
+ border: 1px solid #F7F7F8;
+ filter: drop-shadow(0px 0.5px 0.5px #EFEFEF) drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
+ border-radius: 11px;
+ }
+
+ .title_container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ }
+
+ .title {
+ margin: 0;
+ font-size: 1.25rem;
+ font-weight: 700;
+ color: #212121;
+ }
+
+ .subtitle {
+ font-size: 0.725rem;
+ max-width: 80%;
+ text-align: center;
+ line-height: 1.1rem;
+ color: #8B8E98
+ }
+
+ .input_container {
+ width: 100%;
+ height: fit-content;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ }
+
+ .icon {
+ width: 20px;
+ position: absolute;
+ z-index: 99;
+ left: 12px;
+ bottom: 9px;
+ }
+
+ .input_label {
+ font-size: 0.75rem;
+ color: #8B8E98;
+ font-weight: 600;
+ }
+
+ .input_field {
+ width: auto;
+ height: 40px;
+ padding: 0 0 0 40px;
+ border-radius: 7px;
+ outline: none;
+ border: 1px solid #e5e5e5;
+ filter: drop-shadow(0px 1px 0px #efefef)
+ drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
+ transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
+ }
+
+ .input_field:focus {
+ border: 1px solid transparent;
+ box-shadow: 0px 0px 0px 2px #242424;
+ background-color: transparent;
+ }
+
+ .sign-in_btn {
+ width: 100%;
+ height: 40px;
+ border: 0;
+ background: #115DFC;
+ border-radius: 7px;
+ outline: none;
+ color: #ffffff;
+ cursor: pointer;
+ }
+
+ .sign-in_ggl {
+ width: 100%;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ background: #ffffff;
+ border-radius: 7px;
+ outline: none;
+ color: #242424;
+ border: 1px solid #e5e5e5;
+ filter: drop-shadow(0px 1px 0px #efefef)
+ drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
+ cursor: pointer;
+ }
+
+ .sign-in_apl {
+ width: 100%;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ background: #212121;
+ border-radius: 7px;
+ outline: none;
+ color: #ffffff;
+ border: 1px solid #e5e5e5;
+ filter: drop-shadow(0px 1px 0px #efefef)
+ drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
+ cursor: pointer;
+ }
+
+ .separator {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 30px;
+ color: #8B8E98;
+ }
+
+ .separator .line {
+ display: block;
+ width: 100%;
+ height: 1px;
+ border: 0;
+ background-color: #e8e8e8;
+ }
+
+ .note {
+ font-size: 0.75rem;
+ color: #8B8E98;
+ > a{
+ text-decoration: underline;
+ color: #115DFC;
+ }
+ }
+ }
+
+ .image{
+ padding: 0;
+ height: 25rem;
+ > img{
+ width:100%;
+ height: inherit;
+ border-radius: 0px 10px 10px 0px;
+ }
+ }
+ }
+}
diff --git a/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/features/login/login.component.spec.ts b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/features/login/login.component.spec.ts
new file mode 100644
index 00000000..4adbc3d6
--- /dev/null
+++ b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/features/login/login.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+ let component: LoginComponent;
+ let fixture: ComponentFixture
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
diff --git a/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/features/signup/signup.component.scss b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/features/signup/signup.component.scss
new file mode 100644
index 00000000..4afcfe2f
--- /dev/null
+++ b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/features/signup/signup.component.scss
@@ -0,0 +1,201 @@
+
+.container{
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ -webkit-transform: translate(-50%, -50%);
+ -moz-transform: translate(-50%, -50%);
+ -o-transform: translate(-50%, -50%);
+ -ms-transform: translate(-50%, -50%);
+ position: fixed;
+
+ margin: auto;
+ width: 60rem;
+
+ .row{
+ box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
+ border-radius: 10px;
+
+ .login{
+ height: 25rem;
+ padding: 2rem;
+
+ .form-group{
+ margin-bottom: 1rem;
+ }
+
+
+ .form_container {
+ width: fit-content;
+ height: fit-content;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 15px;
+ padding: 0px 0px 0px 80px;
+ background-color: #ffffff;
+ /* box-shadow: 0px 106px 42px rgba(0, 0, 0, 0.01), 0px 59px 36px rgba(0, 0, 0, 0.05), 0px 26px 26px rgba(0, 0, 0, 0.09), 0px 7px 15px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1); */
+ /* border-radius: 11px; */
+ font-family: "Inter", sans-serif;
+ /* margin-top: 0rem; */
+
+ }
+
+ .logo_container {
+ box-sizing: border-box;
+ width: 80px;
+ height: 80px;
+ background: linear-gradient(180deg, rgba(248, 248, 248, 0) 50%, #F8F8F888 100%);
+ border: 1px solid #F7F7F8;
+ filter: drop-shadow(0px 0.5px 0.5px #EFEFEF) drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
+ border-radius: 11px;
+ }
+
+ .title_container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ }
+
+ .title {
+ margin: 0;
+ font-size: 1.25rem;
+ font-weight: 700;
+ color: #212121;
+ }
+
+ .subtitle {
+ font-size: 0.725rem;
+ max-width: 80%;
+ text-align: center;
+ line-height: 1.1rem;
+ color: #8B8E98
+ }
+
+ .input_container {
+ width: 100%;
+ height: fit-content;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ }
+
+ .icon {
+ width: 20px;
+ position: absolute;
+ z-index: 99;
+ left: 12px;
+ bottom: 9px;
+ }
+
+ .input_label {
+ font-size: 0.75rem;
+ color: #8B8E98;
+ font-weight: 600;
+ }
+
+ .input_field {
+ width: auto;
+ height: 40px;
+ padding: 0 0 0 40px;
+ border-radius: 7px;
+ outline: none;
+ border: 1px solid #e5e5e5;
+ filter: drop-shadow(0px 1px 0px #efefef)
+ drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
+ transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
+ }
+
+ .input_field:focus {
+ border: 1px solid transparent;
+ box-shadow: 0px 0px 0px 2px #242424;
+ background-color: transparent;
+ }
+
+ .sign-in_btn {
+ width: 100%;
+ height: 40px;
+ border: 0;
+ background: #115DFC;
+ border-radius: 7px;
+ outline: none;
+ color: #ffffff;
+ cursor: pointer;
+ }
+
+ .sign-in_ggl {
+ width: 100%;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ background: #ffffff;
+ border-radius: 7px;
+ outline: none;
+ color: #242424;
+ border: 1px solid #e5e5e5;
+ filter: drop-shadow(0px 1px 0px #efefef)
+ drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
+ cursor: pointer;
+ }
+
+ .sign-in_apl {
+ width: 100%;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ background: #212121;
+ border-radius: 7px;
+ outline: none;
+ color: #ffffff;
+ border: 1px solid #e5e5e5;
+ filter: drop-shadow(0px 1px 0px #efefef)
+ drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
+ cursor: pointer;
+ }
+
+ .separator {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 30px;
+ color: #8B8E98;
+ }
+
+ .separator .line {
+ display: block;
+ width: 100%;
+ height: 1px;
+ border: 0;
+ background-color: #e8e8e8;
+ }
+
+ .note {
+ font-size: 0.75rem;
+ color: #8B8E98;
+ > a{
+ text-decoration: underline;
+ color: #115DFC;
+ }
+ }
+ }
+
+ .image{
+ padding: 0;
+ height: 25rem;
+ > img{
+ width:100%;
+ height: inherit;
+ border-radius: 10px 0px 0px 10px;
+ }
+ }
+ }
+}
diff --git a/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/features/signup/signup.component.spec.ts b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/features/signup/signup.component.spec.ts
new file mode 100644
index 00000000..ca51f716
--- /dev/null
+++ b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/features/signup/signup.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SignupComponent } from './signup.component';
+
+describe('SignupComponent', () => {
+ let component: SignupComponent;
+ let fixture: ComponentFixture
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/shared/modal/modal.component.scss b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/shared/modal/modal.component.scss
new file mode 100644
index 00000000..0d4f07c3
--- /dev/null
+++ b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/shared/modal/modal.component.scss
@@ -0,0 +1,92 @@
+.modal-container{
+ z-index: 10;
+ position: fixed; /* Use fixed to center relative to the viewport */
+ top: 0;
+ left: 0;
+ width: 100%; /* Ensure it spans the entire viewport */
+ height: 100%; /* Ensure it spans the entire viewport */
+ display: flex;
+ justify-content: center; /* Center horizontally */
+ align-items: center; /* Center vertically */
+
+ .card{
+ background-color: #ffffff;
+ width: 20rem;
+ height: 15rem;
+ border: none;
+ box-shadow: rgb(0 0 0 / 28%) 0px 1px 4px;
+ display: flex;
+ align-items: center;
+
+ .close{
+ width: 2rem;
+ height: 2rem;
+ align-self: flex-end;
+ outline: none;
+ border: none;
+ background-color: transparent;
+ }
+
+ .user {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ margin: auto;
+ }
+
+ .user__content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-grow: 1;
+ margin-top: 10px;
+ text-align: center;
+
+ .name{
+ outline: none;
+ border: none;
+ background-color: transparent;
+ padding: 0;
+ margin: 0;
+ color: grey;
+ font-size: large;
+ }
+ .name:hover,
+ .name:focus {
+ color: #0d4dd4;
+ }
+ }
+
+ .user__container {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .username {
+ font-size: .9em;
+ color: #64696e;
+ }
+
+ .image {
+ width: 70px;
+ height: 70px;
+ border-radius: 50%;
+ margin-right: 10px;
+ box-shadow: rgb(0 0 0 / 33%) 0px 1px 4px;
+ }
+
+ .logout{
+ width: 25%;
+ border: none;
+ background-color: cornflowerblue;
+ border-radius: 5px;
+ box-shadow: rgb(195 192 192 / 19%) 0px 2px 8px 0px;
+ color: white;
+ margin-bottom: 2rem;
+ font-size: medium;
+ }
+
+ }
+
+}
\ No newline at end of file
diff --git a/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/shared/modal/modal.component.spec.ts b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/shared/modal/modal.component.spec.ts
new file mode 100644
index 00000000..016bb865
--- /dev/null
+++ b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/shared/modal/modal.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalComponent } from './modal.component';
+
+describe('ModalComponent', () => {
+ let component: ModalComponent;
+ let fixture: ComponentFixture
+
+
+
+ 
+
+
+
+
+
+
+
+ + {{currentUser?.active ? 'Online' : 'Offline'}} +
+
+
+
+
+
+
+
diff --git a/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/shared/navbar/navbar.component.scss b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/shared/navbar/navbar.component.scss
new file mode 100644
index 00000000..da1bd957
--- /dev/null
+++ b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/shared/navbar/navbar.component.scss
@@ -0,0 +1,20 @@
+.container{
+ background-color: cornflowerblue;
+ height: 100vh;
+ box-shadow: rgb(0 0 0 / 20%) 0px 3px 8px;
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+ border-radius: 0px 30px 30px 0px;
+ padding: 4px 6px 4px 4px;
+
+ > button {
+ width: 45px;
+ height: 45px;
+ border-style: none;
+ outline: none;
+ cursor: pointer;
+ margin: 1rem 0rem 1rem 0rem;
+ background-color: transparent;
+ }
+}
\ No newline at end of file
diff --git a/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/shared/navbar/navbar.component.spec.ts b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/shared/navbar/navbar.component.spec.ts
new file mode 100644
index 00000000..e680ee62
--- /dev/null
+++ b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/shared/navbar/navbar.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavbarComponent } from './navbar.component';
+
+describe('NavbarComponent', () => {
+ let component: NavbarComponent;
+ let fixture: ComponentFixturenot-found works!
diff --git a/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/shared/not-found/not-found.component.scss b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/shared/not-found/not-found.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/shared/not-found/not-found.component.ts b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/shared/not-found/not-found.component.ts new file mode 100644 index 00000000..91a9593a --- /dev/null +++ b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/shared/not-found/not-found.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-not-found', + templateUrl: './not-found.component.html', + styleUrl: './not-found.component.scss' +}) +export class NotFoundComponent { + +} diff --git a/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/shared/shared.module.ts b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/shared/shared.module.ts new file mode 100644 index 00000000..9fa6808e --- /dev/null +++ b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/app/shared/shared.module.ts @@ -0,0 +1,22 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { RouterModule } from '@angular/router'; + +import { NavbarComponent } from '../shared/navbar/navbar.component'; +import { NotFoundComponent } from '../shared/not-found/not-found.component'; +import { ModalComponent } from './modal/modal.component'; + + +@NgModule({ + declarations: [ + NavbarComponent, + NotFoundComponent, + ModalComponent + ], + imports: [ + CommonModule, + RouterModule + ], + exports:[NavbarComponent, NotFoundComponent, ModalComponent] +}) +export class SharedModule { } diff --git a/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/environments/environment.ts b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/environments/environment.ts new file mode 100644 index 00000000..5fc5a1e9 --- /dev/null +++ b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/environments/environment.ts @@ -0,0 +1,5 @@ +export const environment = { + production: false, + apiUrl: 'http://localhost:8000/users' // Development API URL + }; + \ No newline at end of file diff --git a/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/index.html b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/index.html new file mode 100644 index 00000000..5dd26f4a --- /dev/null +++ b/src/app/(category)/angular/(projects)/real-time-chat-application/frontend/src/index.html @@ -0,0 +1,15 @@ + + + + +