site builder

visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/Design_lbrary/Design_lbrary.component.html

@@ -4,7 +4,7 @@
 <div class="dg-wrapper">
   <div class="clr-row">
     <div class="clr-col-8">
-      <h3>DesignLbrary </h3>
+      <h3>Design Library </h3>
     </div>
     <div class="clr-col-4" style="text-align: right;">
       <button *ngIf="cardButton" id="add" class="btn btn-primary btn-icon" (click)="changeView()">

visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/TreeNode/tree-node.component.html

@@ -31,6 +31,9 @@
         </div>
       </div>
       <div class="controls">
+        <button class="control-btn" (click)="saveTreeData()" title="Save">
+          <i class="fas fa-save"></i>
+        </button>
         <button class="control-btn" (click)="zoomIn()" title="Zoom In">
           <i class="fas fa-plus"></i>
         </button>
@@ -40,9 +43,7 @@
         <button class="control-btn" (click)="resetZoom()" title="Reset Zoom">
           <i class="fas fa-expand"></i>
         </button>
-        <button class="control-btn" (click)="saveTreeData()" title="Save">
-          <i class="fas fa-save"></i>
-        </button>
+
       </div>
     </div>
   </div>
@@ -51,9 +52,7 @@
       <div class="editor-title">Edit Section: {{ selectedSection.type }}</div>
       <div class="form-group">
         <label class="form-label">Content</label>
-        <textarea 
-          class="form-textarea" 
-          [(ngModel)]="selectedSection.content"></textarea>
+        <textarea class="form-textarea" [(ngModel)]="selectedSection.content"></textarea>
       </div>
       <div class="form-actions">
         <button class="btn btn-secondary" (click)="cancelEdit()">Cancel</button>
@@ -67,7 +66,8 @@
       <button class="close-btn" (click)="closeOffcanvas()">&times;</button>
     </div>
     <div class="offcanvas-body">
-      <div class="section-template" *ngFor="let template of sectionTemplates" (click)="addSectionFromTemplate(template)">
+      <div class="section-template" *ngFor="let template of sectionTemplates"
+        (click)="addSectionFromTemplate(template)">
         <div class="section-template-title">{{ template.type }}</div>
         <div class="section-template-desc">{{ template.description }}</div>
       </div>
@@ -79,7 +79,8 @@
         </div>
         <div class="mb-3">
           <label class="form-label">Content</label>
-          <textarea class="form-control" [(ngModel)]="customSectionContent" rows="4" placeholder="Enter content"></textarea>
+          <textarea class="form-control" [(ngModel)]="customSectionContent" rows="4"
+            placeholder="Enter content"></textarea>
         </div>
         <button class="btn btn-primary" [disabled]="!customSectionType" (click)="addCustomSection()">
           Add Custom Section
@@ -103,7 +104,8 @@
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-secondary" (click)="closeAddChildModal()">Cancel</button>
-          <button type="button" class="btn btn-primary" [disabled]="!newPageName" (click)="addChildPage()">Add Page</button>
+          <button type="button" class="btn btn-primary" [disabled]="!newPageName" (click)="addChildPage()">Add
+            Page</button>
         </div>
       </div>
     </div>
@@ -113,47 +115,41 @@
     <div class="loading-text">Processing...</div>
   </div>
   <ng-template #pageTemplate let-page>
-    <div class="node-container" 
-         draggable="true"
-         (dragstart)="onPageDragStart(page)"
-         (dragend)="onPageDragEnd()"
-         (dragover)="$event.preventDefault()"
-         (drop)="onPageDrop(page); $event.preventDefault()">
+    <div class="node-container" draggable="true" (dragstart)="onPageDragStart(page)" (dragend)="onPageDragEnd()"
+      (dragover)="$event.preventDefault()" (drop)="onPageDrop(page); $event.preventDefault()">
       <div class="connection-line" *ngIf="page.parent && page.parent !== rootPage"></div>
-      <div class="node-card" 
-           [class.selected]="selectedPage === page" 
-           (click)="selectPage(page)">
+      <div class="node-card" [class.selected]="selectedPage === page" (click)="selectPage(page)">
         <div class="node-header">
           <i class="node-icon" [class]="getNodeIcon(page)"></i>
           <span class="node-title">{{ page.name }}</span>
         </div>
         <div class="sections-container" cdkDropList [cdkDropListData]="page.sections">
-         <!-- Update the section card template within the #pageTemplate -->
-         <!-- Section card with improved hover button placement -->
-<div class="section-card" *ngFor="let section of page.sections; let i = index" 
-cdkDrag
-(click)="selectSection(section); $event.stopPropagation()">
-<div class="section-title">{{ section.type }}</div>
-<div class="section-content" [innerHTML]="getSectionContentHtml(section.content)"></div>
-<div class="section-actions">
-<button class="section-action-btn" title="Edit Section" (click)="editSection(section, $event)">
- <i class="fas fa-pencil-alt"></i>
-</button>
-<button class="section-action-btn" title="Delete Section" (click)="deleteSection(section, page, $event)">
- <i class="fas fa-trash"></i>
-</button>
-</div>
-<!-- Repositioned add button that appears on hover -->
-<div class="add-section-hover-btn" (click)="openSectionOffcanvas(page, i, $event)" title="Add Section">
-<i class="fas fa-plus"></i>
-</div>
-</div>
+          <!-- Update the section card template within the #pageTemplate -->
+          <!-- Section card with improved hover button placement -->
+          <div class="section-card" *ngFor="let section of page.sections; let i = index" cdkDrag
+            (click)="selectSection(section); $event.stopPropagation()">
+            <div class="section-title">{{ section.type }}</div>
+            <div class="section-content" [innerHTML]="getSectionContentHtml(section.content)"></div>
+            <div class="section-actions">
+              <button class="section-action-btn" title="Edit Section" (click)="editSection(section, $event)">
+                <i class="fas fa-pencil-alt"></i>
+              </button>
+              <button class="section-action-btn" title="Delete Section" (click)="deleteSection(section, page, $event)">
+                <i class="fas fa-trash"></i>
+              </button>
+            </div>
+            <!-- Repositioned add button that appears on hover -->
+            <div class="add-section-hover-btn" (click)="openSectionOffcanvas(page, i, $event)" title="Add Section">
+              <i class="fas fa-plus"></i>
+            </div>
+          </div>
           <!-- <div class="add-section-btn" (click)="openSectionOffcanvas(page); $event.stopPropagation()">
             <i class="fas fa-plus"></i> Add Section
           </div> -->
         </div>
         <div class="node-actions">
-          <button class="node-action-btn" title="Add Child Page" (click)="showAddChildPageModal(page); $event.stopPropagation()">
+          <button class="node-action-btn" title="Add Child Page"
+            (click)="showAddChildPageModal(page); $event.stopPropagation()">
             <i class="fas fa-plus"></i>
           </button>
           <button class="node-action-btn" title="Delete Page" (click)="deletePage(page, $event)">

visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/TreeNode/tree-node.component.ts

@@ -4,6 +4,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 import { SiteTreeservice } from '../SiteBuilderGrid/SiteTree.service';
+import { ToastrService } from 'ngx-toastr';
 
 interface Section {
   type: string;
@@ -129,8 +130,11 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit {
 
   constructor(
     private siteTreeService: SiteTreeservice,
-    private route: ActivatedRoute
-  ) {}
+    private route: ActivatedRoute,
+    private toastr: ToastrService
+
+
+  ) { }
 
   ngOnInit(): void {
     this.siteId = this.route.snapshot.params['id'];
@@ -348,7 +352,7 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit {
         const raw = typeof res.model === 'string' ? JSON.parse(res.model) : res.model;
         const rootTitle = raw.title || 'Site Structure';
         const pagesObj = raw.data?.Children || raw.Children || raw.data || raw;
-        this.processSiteData( pagesObj,rootTitle);
+        this.processSiteData(pagesObj, rootTitle);
       },
       error: () => {
         this.loading = false;
@@ -398,8 +402,8 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit {
               content: Array.isArray(val)
                 ? val.join('\n')
                 : typeof val === 'object'
-                ? JSON.stringify(val, null, 2)
-                : String(val)
+                  ? JSON.stringify(val, null, 2)
+                  : String(val)
             });
             if (!this.availableSectionTypes.includes(prop)) {
               this.availableSectionTypes.push(prop);
@@ -644,29 +648,29 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit {
 
   // Add custom section
 
-// Similar update for addCustomSection
-addCustomSection(): void {
-  if (this.currentParentPage && this.customSectionType) {
-    const newSection: Section = {
-      type: this.customSectionType,
-      content: this.customSectionContent || ''
-    };
+  // Similar update for addCustomSection
+  addCustomSection(): void {
+    if (this.currentParentPage && this.customSectionType) {
+      const newSection: Section = {
+        type: this.customSectionType,
+        content: this.customSectionContent || ''
+      };
 
-    // Insert at specific position if provided, otherwise add to end
-    if (this.currentSectionIndex >= 0) {
-      this.currentParentPage.sections.splice(this.currentSectionIndex + 1, 0, newSection);
-    } else {
-      this.currentParentPage.sections.push(newSection);
+      // Insert at specific position if provided, otherwise add to end
+      if (this.currentSectionIndex >= 0) {
+        this.currentParentPage.sections.splice(this.currentSectionIndex + 1, 0, newSection);
+      } else {
+        this.currentParentPage.sections.push(newSection);
+      }
+
+      if (!this.availableSectionTypes.includes(this.customSectionType)) {
+        this.availableSectionTypes.push(this.customSectionType);
+      }
+
+      this.hasUnsavedChanges = true;
+      this.closeOffcanvas();
     }
-    
-    if (!this.availableSectionTypes.includes(this.customSectionType)) {
-      this.availableSectionTypes.push(this.customSectionType);
-    }
-    
-    this.hasUnsavedChanges = true;
-    this.closeOffcanvas();
   }
-}
 
   // Edit section
   editSection(section: Section, event: Event): void {
@@ -790,7 +794,9 @@ addCustomSection(): void {
           this.hasUnsavedChanges = false;
 
           if (!silent) {
-            alert('Site structure saved successfully');
+            // alert('Site structure saved successfully');
+            this.toastr.success("Site structure saved successfully");
+
           }
         },
         error: (err) => {
@@ -798,7 +804,9 @@ addCustomSection(): void {
           console.error('Error saving data:', err);
 
           if (!silent) {
-            alert('Failed to save site structure');
+            // alert('Failed to save site structure');
+            this.toastr.error("Failed to save site structure");
+
           }
         }
       });

visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/common-css.ts

@@ -303,50 +303,106 @@ button:hover {
 }
 
 /* ======= TESTIMONIAL SECTION ======= */
+/* 🔲 Main Section */
 .testimonial-section {
-  padding: 60px 20px;
+  padding: 80px 40px;
   text-align: center;
+  background-size: cover;
+  background-position: center;
+  position: relative;
+  color: #fff;
 }
 
+/* 🔳 Optional Background Overlay */
+.testimonial-section::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 0;
+}
+
+.testimonial-section > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* 🏷️ Heading */
 .testimonial-heading {
-  font-size: 28px;
+  font-size: 2rem;
   font-weight: bold;
   margin-bottom: 10px;
+  letter-spacing: 1px;
 }
 
 .testimonial-subtitle {
-  color: #666;
+  color: #ddd;
   margin-bottom: 40px;
+  font-size: 1rem;
 }
 
+/* 🧑‍💼 Grid Layout */
 .testimonial-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  gap: 20px;
+  gap: 30px;
+  justify-content: center;
 }
 
+/* 📦 Testimonial Card */
 .testimonial-card {
-  background: white;
-  padding: 20px;
+  background: #fff;
+  color: #222;
+  padding: 25px;
   border-radius: 12px;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
   max-width: 320px;
+  margin: 0 auto;
+  text-align: center;
+  transition: transform 0.3s ease;
 }
+
+.testimonial-card:hover {
+  transform: translateY(-5px);
+}
+
+/* 🖼️ Avatar Wrapper with fallback */
+.testimonial-avatar {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background-color: #ccc;
+  overflow: hidden;
+  margin: 0 auto 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.testimonial-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* 🗣️ Quote Text */
+.testimonial-card blockquote {
+  font-style: italic;
+  color: #444;
+  margin: 15px 0;
+  font-size: 0.95rem;
+  line-height: 1.6;
+}
+
+/* ⭐ Star Ratings */
 .stars {
   color: #f39c12;
   font-size: 1.2rem;
+  margin-bottom: 8px;
 }
-.author {
-  margin-top: 15px;
-  text-align: center;
-}
-.author .avatar {
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-}
-
-.testimonial-card .profile {
+  /* 🔲 Placeholder block */
+.profile {
   width: 40px;
   height: 40px;
   background: #ccc;
@@ -354,10 +410,74 @@ button:hover {
   margin: 0 auto 10px;
 }
 
-.testimonial-card blockquote {
-  font-style: italic;
-  color: #444;
-  margin: 10px 0;
+/* 🧑 Avatar image */
+.avatar {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  object-fit: cover;
+  display: block;
+  margin: 0 auto;
+}
+
+/* 🧾 Author Info */
+.author {
+  margin-top: 15px;
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: #333;
+}
+
+/* 🟡 CTA Button */
+.testimonial-cta {
+  display: inline-block;
+  margin-top: 40px;
+  background: #ffc107;
+  color: #000;
+  padding: 12px 24px;
+  border-radius: 6px;
+  font-weight: 600;
+  text-decoration: none;
+  transition: 0.3s ease;
+}
+
+.testimonial-cta:hover {
+  background: #e6ac00;
+}
+
+/* 📞 Contact Info */
+.testimonial-contact {
+  margin-top: 30px;
+  font-size: 14px;
+  color: #ccc;
+}
+
+.testimonial-contact p {
+  margin: 5px 0;
+}
+
+/* 📱 Responsive Adjustments */
+@media (max-width: 768px) {
+  .testimonial-heading {
+    font-size: 1.5rem;
+  }
+
+  .testimonial-subtitle {
+    font-size: 0.95rem;
+  }
+
+  .testimonial-card {
+    max-width: 100%;
+  }
+
+  .testimonial-grid {
+    gap: 20px;
+  }
+
+  .testimonial-cta {
+    width: 100%;
+    max-width: 300px;
+  }
 }
 
 
@@ -1250,25 +1370,105 @@ button {
 
 
 /* === FAQ === */
+/* 🔲 Base Layout */
 .faq-section {
   padding: 60px 20px;
+  max-width: 1200px;
+  margin: auto;
 }
+
+/*  Title and Subtitle */
 .faq-title {
   font-size: 2rem;
   margin-bottom: 20px;
+  text-align: center;
 }
+
 .faq-subtitle {
   font-size: 1rem;
   color: #666;
   margin-bottom: 30px;
+  text-align: center;
 }
+
+/* 🔍 Search Bar */
+.faq-search {
+  padding: 12px 20px;
+  width: 100%;
+  max-width: 400px;
+  font-size: 16px;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+  margin: 0 auto 40px;
+  display: block;
+}
+
+/* 📦 Illustration + List Wrapper */
+.faq-content {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 40px;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+/* 🖼️ Left Illustration */
+.faq-illustration {
+  flex: 1 1 40%;
+  max-width: 400px;
+}
+
+.faq-image {
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+}
+
+/* ❓ Q&A List */
+.faq-list {
+  flex: 1 1 55%;
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+}
+
+.faq-item {
+  border-bottom: 1px solid #eee;
+  padding-bottom: 15px;
+}
+
+/* 🗂️ Q & A */
 .faq-question {
   font-weight: bold;
   margin-top: 15px;
+  font-size: 1.1rem;
 }
+
 .faq-answer {
   margin-bottom: 20px;
   color: #444;
+  font-size: 0.95rem;
+}
+
+/* 📱 Responsive */
+@media (max-width: 768px) {
+  .faq-content {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .faq-illustration,
+  .faq-list {
+    max-width: 100%;
+  }
+
+  .faq-title {
+    font-size: 1.5rem;
+  }
+
+  .faq-question {
+    font-size: 1rem;
+  }
 }
 
 /* === Logo Showcase === */
@@ -2612,6 +2812,95 @@ button.light {
   }
 }
 
+.blog-template {
+  padding: 60px 30px;
+  max-width: 1200px;
+  margin: auto;
+  font-family: sans-serif;
+}
+
+.blog-header {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.blog-icon {
+  font-size: 2rem;
+  display: block;
+  margin-bottom: 10px;
+}
+
+.blog-title {
+  font-size: 2rem;
+  font-weight: bold;
+}
+
+.blog-nav ul {
+  display: flex;
+  gap: 20px;
+  justify-content: center;
+  padding: 0;
+  list-style: none;
+  margin-bottom: 40px;
+}
+
+.blog-nav li {
+  font-weight: 500;
+  cursor: pointer;
+  color: #007bff;
+}
+
+.blog-layout {
+  display: flex;
+  gap: 40px;
+  flex-wrap: wrap;
+}
+
+.blog-main {
+  flex: 1 1 65%;
+}
+
+.content-block {
+  margin-bottom: 30px;
+}
+
+.content-heading {
+  font-size: 1.2rem;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.content-text {
+  font-size: 1rem;
+  color: #444;
+  line-height: 1.6;
+}
+
+.blog-sidebar {
+  flex: 1 1 30%;
+  background: #f9f9f9;
+  padding: 20px;
+  border-radius: 8px;
+}
+
+.sidebar-widget {
+  margin-bottom: 20px;
+  font-weight: 500;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .blog-layout {
+    flex-direction: column;
+  }
+  .blog-nav ul {
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+  }
+}
+
+
 /* ✅ Clean and responsive logo section */
 .logo-cloud {
   padding: 60px 20px;
@@ -2685,6 +2974,377 @@ button.light {
   background: #555;
 }
 
+ /* feature section */
+/* 🔲 Feature Section Base */
+.feature-section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 40px;
+  gap: 40px;
+  flex-wrap: wrap;
+}
 
+/* 🖼️ Image Block */
+ .feature-image {
+  flex: 1 1 40%;
+  width: 100%;
+  max-width: 500px;
+  height: auto;
+  object-fit: contain;
+  display: block;
+  align-self: center;
+}
+
+/* 📄 Text Content */
+.feature-content {
+  flex: 1 1 50%;
+  max-width: 600px;
+}
+
+.feature-title {
+  font-size: 28px;
+  font-weight: 700;
+  margin-bottom: 20px;
+  line-height: 1.3;
+}
+
+.feature-description {
+  font-size: 16px;
+  color: #555;
+  margin-bottom: 20px;
+}
+
+/* 📋 Feature List */
+.feature-list {
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+.feature-list li {
+  position: relative;
+  padding-left: 30px;
+  margin-bottom: 10px;
+  font-size: 15px;
+  color: #444;
+}
+
+.feature-list li::before {
+  content: "✔";
+  position: absolute;
+  left: 0;
+  color: #008060;
+  font-weight: bold;
+}
+
+/* 🔁 Responsive Layout */
+@media (max-width: 768px) {
+  .feature-section {
+    flex-direction: column;
+    text-align: center;
+    gap: 30px;
+  }
+
+  .feature-content {
+    max-width: 100%;
+  }
+
+  .feature-title {
+    font-size: 22px;
+  }
+
+  .feature-description {
+    font-size: 15px;
+  }
+
+  .feature-image {
+    max-width: 100%;
+  }
+}
+/* 🔲 SECTION WRAPPER */
+.brand-guideline {
+  padding: 60px 30px;
+  max-width: 1000px;
+  margin: auto;
+  font-family: sans-serif;
+}
+
+/* 🧾 PROJECT INFO */
+.project-info {
+  margin-bottom: 40px;
+  text-align: center;
+}
+.brand-title {
+  font-size: 2rem;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+.brand-meta {
+  font-size: 0.95rem;
+  color: #555;
+}
+
+/* 🖼️ LOGO SECTION */
+.logo-section {
+  margin-bottom: 40px;
+}
+.section-heading {
+  font-size: 1.3rem;
+  font-weight: bold;
+  margin-bottom: 20px;
+  text-align: center;
+}
+.logo-label {
+  font-weight: 600;
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+.logo-img,
+.logo-mono-group,
+.logo-social-group {
+  display: flex;
+  gap: 20px;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+/* 🔳 INDIVIDUAL LOGOS */
+.default-img {
+  max-height: 60px;
+  object-fit: contain;
+  background-color: #f0f0f0;
+  padding: 6px;
+  border-radius: 6px;
+  display: block;
+}
+.logo-primary {
+  height: 60px;
+  width: auto;
+}
+
+.logo-icon {
+  height: 40px;
+  width: 40px;
+}
+
+.logo-mono {
+  height: 40px;
+  width: auto;
+}
+
+.logo-social-square,
+.logo-social-round {
+  height: 40px;
+  width: 40px;
+}
+
+
+/* 🎨 BRAND COLORS */
+.brand-colors {
+  margin-bottom: 40px;
+}
+.color-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: center;
+}
+.color-block {
+  width: 160px;
+  height: 100px;
+  border-radius: 8px;
+  padding: 10px;
+  color: #000;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  font-size: 0.85rem;
+  text-align: center;
+}
+.color-name {
+  font-weight: bold;
+  margin-bottom: 4px;
+}
+.color-usage {
+  font-style: italic;
+  font-size: 0.8rem;
+  color: #444;
+}
+
+/* 🎨 COLOR BACKGROUNDS */
+.color-block.primary-blue {
+  background-color: #1E9FFF;
+}
+.color-block.light-grey {
+  background-color: #C6CBD6;
+}
+.color-block.charcoal-black {
+  background-color: #2B2B2B;
+  color: #fff;
+}
+.color-block.white {
+  background-color: #FFFFFF;
+  border: 1px solid #ddd;
+}
+
+/* ✍️ TYPOGRAPHY */
+.typography-section {
+  margin-top: 40px;
+  text-align: center;
+}
+.font-block {
+  margin-bottom: 20px;
+}
+.font-role {
+  font-weight: 600;
+  font-size: 1rem;
+}
+.font-family {
+  font-family: monospace;
+  font-size: 0.95rem;
+  color: #333;
+}
+
+/* 📱 RESPONSIVE */
+@media (max-width: 768px) {
+  .logo-img,
+  .logo-mono-group,
+  .logo-social-group,
+  .color-group {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .color-block {
+    width: 100%;
+    max-width: 300px;
+  }
+
+  .logo-primary,
+  .logo-icon,
+  .logo-mono,
+  .logo-social-square,
+  .logo-social-round {
+    max-width: 100%;
+    height: auto;
+  }
+}
+
+.logo-grid-section {
+  padding: 60px 30px;
+  max-width: 1200px;
+  margin: auto;
+}
+
+.logo-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 30px;
+}
+
+.logo-card {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+  padding: 20px;
+  text-align: center;
+}
+
+.logo-img.placeholder {
+  width: 100%;
+  height: 140px;
+  background-color: #eee;
+  border-radius: 6px;
+  margin-bottom: 15px;
+  background-image: url('/assets/images/placeholder.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.logo-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+
+.logo-meta {
+  font-size: 0.9rem;
+  color: #666;
+}
+
+
+.logo-guideline {
+  padding: 60px 30px;
+  max-width: 1000px;
+  margin: auto;
+  font-family: sans-serif;
+}
+.guideline-header {
+  text-align: center;
+  margin-bottom: 40px;
+}
+.guideline-title {
+  font-size: 2rem;
+  font-weight: bold;
+}
+.guideline-meta {
+  color: #666;
+  font-size: 0.95rem;
+}
+.guideline-section {
+  margin-bottom: 50px;
+}
+.section-title {
+  font-size: 1.3rem;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+.section-description {
+  font-size: 1rem;
+  color: #444;
+  margin-bottom: 15px;
+}
+.cover-version {
+  font-weight: 600;
+  font-size: 1rem;
+  color: #888;
+}
+.cover-title {
+  font-size: 1.6rem;
+  font-weight: bold;
+  margin: 8px 0;
+}
+.cover-subtitle {
+  color: #666;
+  font-size: 0.95rem;
+}
+.font-preview {
+  background: #f9f9f9;
+  padding: 15px;
+  border-radius: 6px;
+  text-align: center;
+}
+.font-name {
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+.font-usage {
+  font-size: 0.95rem;
+  color: #555;
+}
+.placeholder {
+  background: #eee;
+  border-radius: 6px;
+  height: 180px;
+  background-image: url('/assets/images/placeholder.png');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  margin-top: 10px;
+}
 
 `;

visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.ts

@@ -324,7 +324,10 @@ HTML Only. No CSS.
     copyToClipboard(pageName: string) {
         const fullHtml = Object.values(this.pageSections[pageName]).join('\n');
         navigator.clipboard.writeText(fullHtml).then(() => {
-            alert(`📋 HTML copied for page: ${pageName}`);
+            // alert(`📋 HTML copied for page: ${pageName}`);
+            this.toastr.success(`📋 HTML copied for page: ${pageName}`);
+
+
         });
     }