add stack page

src/app/app.routes.ts

@@ -23,6 +23,7 @@ import { GeminibotComponent } from './components/geminibot/geminibot.component';
 import { AlgorithmComparisonComponent } from './components/algocompare/algocompare.component';
 
 import { ProfileDashboardPageComponent } from './components/profile/profile.component';
+import { VisualStackQueueComponent } from './components/visual-stack-queue/visual-stack-queue.component';
 
 export const routes: Routes = [
   {
@@ -101,6 +102,10 @@ export const routes: Routes = [
     path: 'gemini',
     component: GeminibotComponent,
   },
+  {
+    path: 'visual-stack',
+    component: VisualStackQueueComponent,
+  },
   // {
   //   path: 'algo-compare',
   //   component: AlgorithmComparisonComponent,

src/app/components/visual-stack-queue/visual-stack-queue.component.css

@@ -0,0 +1,117 @@
+
+.stack-container, .queue-container {
+    margin: 20px;
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    background-color: #f8f8f8;
+    }
+
+    .stack-item, .queue-item {
+    padding: 10px;
+    margin: 5px;
+    background-color: #ffce54;
+    border-radius: 4px;
+    text-align: center;
+    font-weight: bold;
+    }
+
+    button {
+    margin: 10px;
+    padding: 10px;
+    background-color: #5cb85c;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    }
+
+    button:hover {
+    background-color: #4cae4c;
+    }
+    /* visual-stack-queue.component.css */
+.container {
+    text-align: center;
+    padding: 20px;
+    margin-top: 10rem;
+}
+
+.title h1 {
+    font-size: 2em;
+    margin-bottom: 20px;
+}
+
+.visual-container {
+    display: flex;
+    justify-content: space-around;
+    align-items: flex-start;
+    flex-wrap: wrap;
+}
+
+.stack-container, .queue-container {
+    width: 45%;
+    margin: 20px;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    background-color: #f9f9f9;
+}
+
+.stack h3, .queue h3 {
+    font-size: 1.5em;
+    margin-bottom: 15px;
+    color: #333;
+}
+
+.stack, .queue {
+    min-height: 200px;
+    border: 2px dashed #ccc;
+    padding: 10px;
+    margin-bottom: 20px;
+    border-radius: 8px;
+}
+
+.stack-item, .queue-item {
+    margin: 5px 0;
+    padding: 10px;
+    background-color: #e3f2fd;
+    border-radius: 5px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease;
+}
+
+.stack-item:hover, .queue-item:hover {
+    transform: scale(1.05);
+}
+
+.button-group {
+    display: flex;
+    justify-content: space-around;
+}
+
+.btn {
+    padding: 10px 20px;
+    font-size: 1em;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.btn-primary {
+    background-color: #007bff;
+    color: white;
+}
+
+.btn-primary:hover {
+    background-color: #0056b3;
+}
+
+.btn-danger {
+    background-color: #dc3545;
+    color: white;
+}
+
+.btn-danger:hover {
+    background-color: #a71d2a;
+}

src/app/components/visual-stack-queue/visual-stack-queue.component.html

@@ -0,0 +1,46 @@
+<!-- HTML: visual-stack-queue.component.html -->
+<app-navbar></app-navbar>
+
+<div class="container">
+    <div class="title">
+        <h1>Visual Stack and Queue</h1>
+    </div>
+
+    <div class="visual-container">
+        <!-- Stack Section -->
+        <div class="stack-container">
+            <h3><i class="fas fa-database"></i> Stack (DFS)</h3>
+            <div class="stack">
+                <div class="stack-item" *ngFor="let item of stack" [@stackAnimation]>
+                    {{ item }}
+                </div>
+            </div>
+            <div class="button-group">
+                <button class="btn btn-primary" (click)="addToStack('Node ' + (stack.length + 1))">
+                    <i class="fas fa-plus"></i> Add to Stack
+                </button>
+                <button class="btn btn-danger" (click)="removeFromStack()">
+                    <i class="fas fa-minus"></i> Remove from Stack
+                </button>
+            </div>
+        </div>
+
+        <!-- Queue Section -->
+        <div class="queue-container">
+            <h3><i class="fas fa-bars"></i> Queue (BFS)</h3>
+            <div class="queue">
+                <div class="queue-item" *ngFor="let item of queue" [@queueAnimation]>
+                    {{ item }}
+                </div>
+            </div>
+            <div class="button-group">
+                <button class="btn btn-primary" (click)="addToQueue('Node ' + (queue.length + 1))">
+                    <i class="fas fa-plus"></i> Add to Queue
+                </button>
+                <button class="btn btn-danger" (click)="removeFromQueue()">
+                    <i class="fas fa-minus"></i> Remove from Queue
+                </button>
+            </div>
+        </div>
+    </div>
+</div>

src/app/components/visual-stack-queue/visual-stack-queue.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VisualStackQueueComponent } from './visual-stack-queue.component';
+
+describe('VisualStackQueueComponent', () => {
+  let component: VisualStackQueueComponent;
+  let fixture: ComponentFixture<VisualStackQueueComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [VisualStackQueueComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(VisualStackQueueComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});