diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/vpspack/Visa_application/VisaOrderWorkflow/editstepper.component.html b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/vpspack/Visa_application/VisaOrderWorkflow/editstepper.component.html index ac8395b..bac4ebb 100644 --- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/vpspack/Visa_application/VisaOrderWorkflow/editstepper.component.html +++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/vpspack/Visa_application/VisaOrderWorkflow/editstepper.component.html @@ -25,6 +25,7 @@
+ Step 0 Application Update @@ -233,11 +234,6 @@
- - - - -
-
-
- - -
-
- - -
-
- - -
+
+ + + +
+
+ +
+ +
@@ -149,59 +167,98 @@
Processing...
- -
-
-
-
- - {{ page.name }} + + +
+ + +
+ +
+
+ + {{ page.name }} +
+ +
+ + +
+

No sections added yet

+
-
- - -
- -
{{ section.type }}
-
-
- - -
- -
- -
+ + +
+
{{ section.type }}
+
+
+ +
- -
-
- - +
-
- + + +
+ Add Section
-
- - - + +
+ + +
+
+
- -
\ No newline at end of file + + +
+ +
+ + +
+
+ + +
+ + + +
+
+ \ No newline at end of file diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/TreeNode/tree-node.component.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/TreeNode/tree-node.component.ts index 985aa2c..94ccc7f 100644 --- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/TreeNode/tree-node.component.ts +++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/TreeNode/tree-node.component.ts @@ -138,6 +138,21 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit { } ]; + + customSections = [ + { + type: 'Visa Application', + description: 'Visa application form and process', + content: 'Complete visa application with required documents and processing information.' + }, + { + type: 'Visa Application 2', + description: 'Alternative visa application layout', + content: 'Alternative visa application design with step-by-step guidance.' + } +]; + + constructor( private siteTreeService: SiteTreeservice, private route: ActivatedRoute, @@ -311,7 +326,7 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit { // Position the grid - centered horizontally, but align top of tree with top of viewport this.currentScale = scale; - this.gridTranslateX = -700; // Set left position to -900px + this.gridTranslateX = -1300; // Set left position to -900px // Position vertically to place root node near top with some padding const topPadding = 50; // Pixels from top of viewport @@ -694,19 +709,19 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit { // Save section changes saveSection(): void { - if (this.selectedSection && this.currentParentPage) { - // Find the section in the parent page - const index = this.currentParentPage.sections.findIndex(s => - s.type === this.selectedSection.type && s.content === this.selectedSection.content); - - if (index !== -1) { - // Update the section with edited values - this.currentParentPage.sections[index] = { ...this.selectedSection }; - this.hasUnsavedChanges = true; - } + if (this.selectedSection && this.currentParentPage) { + // Find the original section in the parent page by reference + const originalSection = this.currentParentPage.sections.find(s => s === this.selectedSection); + + if (originalSection) { + // Update the original section directly + originalSection.type = this.selectedSection.type; + originalSection.content = this.selectedSection.content; + this.hasUnsavedChanges = true; } - this.closeEditSectionOffcanvas(); } + this.closeEditSectionOffcanvas(); +} // Add section from a template addSectionFromTemplate(template: any): void { @@ -736,37 +751,79 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit { // Similar update for addCustomSection addCustomSection(): void { - if (this.currentParentPage && this.customSectionType) { - // If in edit mode, update the selected section - if (this.editMode === 'section' && this.selectedSection) { - this.selectedSection.type = this.customSectionType; - this.selectedSection.content = this.customSectionContent || ''; - } else { - // Otherwise, create a new section - const newSection: Section = { - type: this.customSectionType, - content: this.customSectionContent || '' - }; + 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); - } - } - - this.hasUnsavedChanges = true; - this.closeOffcanvas(); + // Add to current page + if (this.currentSectionIndex >= 0) { + this.currentParentPage.sections.splice(this.currentSectionIndex + 1, 0, newSection); + } else { + this.currentParentPage.sections.push(newSection); } + + // Add to custom sections list if it doesn't exist + const existingCustomSection = this.customSections.find(cs => cs.type === this.customSectionType); + if (!existingCustomSection) { + this.customSections.push({ + type: this.customSectionType, + description: 'Custom section', + content: this.customSectionContent || '' + }); + } + + // Add to available section types + if (!this.availableSectionTypes.includes(this.customSectionType)) { + this.availableSectionTypes.push(this.customSectionType); + } + + this.hasUnsavedChanges = true; + this.closeAddSectionOffcanvas(); } + +} + +addCustomSectionFromList(customSection: any): void { + if (this.currentParentPage) { + const newSection: Section = { + type: customSection.type, + content: customSection.content + }; + + // 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(customSection.type)) { + this.availableSectionTypes.push(customSection.type); + } + + this.hasUnsavedChanges = true; + this.closeAddSectionOffcanvas(); + } +} + // Edit section // Edit section - modify this function editSection(section: Section, event: Event): void { - event.stopPropagation(); - this.openEditSectionOffcanvas(section, this.selectedPage, event); - } + event.stopPropagation(); + // Store reference to the original section + this.selectedSection = section; // Don't clone, use direct reference + this.currentParentPage = this.selectedPage; + this.editMode = 'section'; + this.showEditSectionOffcanvas = true; + + // Listen for clicks outside offcanvas + setTimeout(() => { + document.addEventListener('click', this.handleOutsideClick); + }, 10); +} // Cancel edit cancelEdit(): void { @@ -802,40 +859,113 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit { // DRAG AND DROP METHODS // Handle page drag start - onPageDragStart(page: Page): void { - this.draggedPage = page; + onPageDragStart(page: Page, event: DragEvent): void { + this.draggedPage = page; + if (event.dataTransfer) { + event.dataTransfer.effectAllowed = 'move'; + event.dataTransfer.setData('text/html', page.name); } + + // Add visual feedback + setTimeout(() => { + const draggedElement = event.target as HTMLElement; + if (draggedElement) { + draggedElement.classList.add('dragging'); + } + }, 0); +} + +onPageDragOver(event: DragEvent): void { + event.preventDefault(); + event.stopPropagation(); + + if (event.dataTransfer) { + event.dataTransfer.dropEffect = 'move'; + } + + // Add visual feedback + const dropZone = event.currentTarget as HTMLElement; + if (dropZone) { + dropZone.classList.add('drag-over'); + } +} + +onPageDragLeave(event: DragEvent): void { + const dropZone = event.currentTarget as HTMLElement; + if (dropZone) { + dropZone.classList.remove('drag-over'); + } +} // Handle page drag end - onPageDragEnd(): void { - this.draggedPage = null; - this.dropTargetPage = null; + onPageDragEnd(event: DragEvent): void { + // Remove visual feedback + const draggedElement = event.target as HTMLElement; + if (draggedElement) { + draggedElement.classList.remove('dragging'); } + + // Remove all drop zone highlights + document.querySelectorAll('.drop-zone').forEach(el => { + el.classList.remove('drag-over'); + }); + + this.draggedPage = null; + this.dropTargetPage = null; +} // Handle page drop - onPageDrop(targetPage: Page): void { - if (!this.draggedPage || this.draggedPage === targetPage) return; - - // Remove from current parent - if (this.draggedPage.parent && this.draggedPage.parent.children) { - const sourceIndex = this.draggedPage.parent.children.indexOf(this.draggedPage); - if (sourceIndex > -1) { - this.draggedPage.parent.children.splice(sourceIndex, 1); - } - } - - // Add to new parent - if (!targetPage.children) { - targetPage.children = []; - } - - // Update parent reference - this.draggedPage.parent = targetPage; - targetPage.children.push(this.draggedPage); - - this.hasUnsavedChanges = true; +onPageDrop(targetPage: Page, event: DragEvent): void { + event.preventDefault(); + event.stopPropagation(); + + // Remove visual feedback + const dropZone = event.currentTarget as HTMLElement; + if (dropZone) { + dropZone.classList.remove('drag-over'); } + + if (!this.draggedPage || this.draggedPage === targetPage) { + return; + } + + // Prevent dropping a parent into its own child + if (this.isDescendant(targetPage, this.draggedPage)) { + console.warn('Cannot drop a parent into its own descendant'); + return; + } + + // Remove from current parent + if (this.draggedPage.parent && this.draggedPage.parent.children) { + const sourceIndex = this.draggedPage.parent.children.indexOf(this.draggedPage); + if (sourceIndex > -1) { + this.draggedPage.parent.children.splice(sourceIndex, 1); + } + } + + // Add to new parent + if (!targetPage.children) { + targetPage.children = []; + } + + // Update parent reference + this.draggedPage.parent = targetPage; + targetPage.children.push(this.draggedPage); + + this.hasUnsavedChanges = true; + console.log(`Moved "${this.draggedPage.name}" to "${targetPage.name}"`); +} +private isDescendant(possibleDescendant: Page, ancestor: Page): boolean { + if (!ancestor.children) return false; + + for (const child of ancestor.children) { + if (child === possibleDescendant) return true; + if (this.isDescendant(possibleDescendant, child)) return true; + } + + return false; +} // Handle section drag drop onSectionDrop(event: CdkDragDrop): void { if (event.previousContainer === event.container) { @@ -868,6 +998,28 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit { } } + showAddSectionForEmptyPage(page: Page, event: Event): void { + event.stopPropagation(); + this.openAddSectionOffcanvas(page, -1, event); +} + +// Add these helper methods to your component for proper connector positioning + +getHorizontalConnectorLeft(childrenCount: number): number { + // Calculate left position for horizontal connector + const nodeWidth = 250; // Approximate node width + const gap = 40; // Gap between nodes + const totalWidth = (childrenCount * nodeWidth) + ((childrenCount - 1) * gap); + return (totalWidth / 2) - (totalWidth / childrenCount / 2); +} + +getHorizontalConnectorWidth(childrenCount: number): number { + // Calculate width of horizontal connector + const nodeWidth = 250; // Approximate node width + const gap = 40; // Gap between nodes + return (childrenCount - 1) * (nodeWidth + gap); +} + // Save tree data saveTreeData(silent: boolean = false): void { const outputData = this.generateOutputJson(); diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/common-css.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/common-css.ts index 29741a9..5700326 100644 --- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/common-css.ts +++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/common-css.ts @@ -1,5 +1,7 @@ export const COMMON_CSS = ` + body { + font-family: sans-serif; margin: 0; padding: 0; @@ -1068,6 +1070,7 @@ body { background: #f8f8f8; font-family: sans-serif; margin: 0; + padding:20px; } .footer-1-section { @@ -1204,12 +1207,14 @@ body { .footer-2-wrapper { font-family: sans-serif; background: #f5f5f5; + padding: 20px; } .footer-2-section { background: #fff; padding: 40px 30px 20px; border-top: 1px solid #eee; + } .footer-2-top { @@ -1769,6 +1774,358 @@ body { background-color: #005fcc; } + +/* Master Reset & Base Styles */ +html, body { + margin: 0 !important; + padding: 0 !important; + width: 100% !important; + min-height: 100% !important; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; + font-size: 16px !important; + line-height: 1.6 !important; + color: #333 !important; + background-color: #fff !important; + box-sizing: border-box !important; + overflow-x: hidden !important; + text-align: left !important; /* Override center alignment */ +} + +*, *::before, *::after { + box-sizing: border-box !important; +} + +/* Common Container */ +.container { + max-width: 1200px !important; + width: 100% !important; + margin: 0 auto !important; + padding: 0 20px !important; +} + +/* Section Styling for Consistent Flow */ +section { + padding: 80px 0 !important; + position: relative !important; + width: 100% !important; + background-color: #fff !important; +} + +section:nth-child(even) { + background-color: #f9f9f9 !important; +} + +/* Typography Hierarchy */ +h1, h2, h3, h4, h5, h6 { + margin-top: 0 !important; + margin-bottom: 0.5em !important; + line-height: 1.3 !important; + font-weight: 700 !important; + color: #111 !important; +} + +h1 { + font-size: 2.5rem !important; +} + +h2 { + font-size: 2rem !important; +} + +h3 { + font-size: 1.75rem !important; +} + +h4 { + font-size: 1.5rem !important; +} + +h5 { + font-size: 1.25rem !important; +} + +h6 { + font-size: 1rem !important; +} + +p { + margin-top: 0 !important; + margin-bottom: 1rem !important; + color: #555 !important; +} + +/* Link Styling */ +a { + color: #0066cc !important; + text-decoration: none !important; + transition: all 0.3s ease !important; +} + +a:hover { + color: #004499 !important; + text-decoration: underline !important; +} + +/* Button System */ +.btn, button, +.hero-1-btn, .hero-2-btn, .grid-11-btn, .grid-12-btn, +.split-8-btn, .split-10-btn, .text-1-btn, .text-2-btn, +.cta-3-btn, .faq-4-footer-btn, .faq-5-contact-btn, +.faq-6-view-more-btn, .visa-order-btn, .nav-1-btn { + display: inline-block !important; + padding: 12px 24px !important; + font-size: 16px !important; + font-weight: 600 !important; + text-align: center !important; + border-radius: 6px !important; + cursor: pointer !important; + transition: all 0.3s ease !important; + border: 2px solid transparent !important; + letter-spacing: 0.5px !important; + text-decoration: none !important; +} + +.btn-primary, .hero-1-solid, .hero-2-solid, .text-1-solid, .text-2-solid, .cta-3-solid, .nav-1-solid { + background-color: #0066cc !important; + color: #fff !important; + border-color: #0066cc !important; +} + +.btn-primary:hover, .hero-1-solid:hover, .hero-2-solid:hover, .text-1-solid:hover, .text-2-solid:hover, .cta-3-solid:hover, .nav-1-solid:hover { + background-color: #004499 !important; + border-color: #004499 !important; +} + +.btn-outline, .hero-1-outline, .hero-2-outline, .text-1-outline, .text-2-outline, .cta-3-outline, .nav-1-outline { + background-color: transparent !important; + color: #0066cc !important; + border-color: #0066cc !important; +} + +.btn-outline:hover, .hero-1-outline:hover, .hero-2-outline:hover, .text-1-outline:hover, .text-2-outline:hover, .cta-3-outline:hover, .nav-1-outline:hover { + background-color: #0066cc !important; + color: #fff !important; +} + +/* Image Styling */ +img { + max-width: 100% !important; + height: auto !important; + display: block !important; +} + +/* Form Elements */ +input, textarea, select { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; + font-size: 16px !important; + padding: 12px !important; + border: 1px solid #ccc !important; + border-radius: 6px !important; + width: 100% !important; + transition: border-color 0.3s ease !important; +} + +input:focus, textarea:focus, select:focus { + outline: none !important; + border-color: #0066cc !important; + box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1) !important; +} + +/* Navigation Override */ +.nav-1-navbar { + background-color: #fff !important; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important; + position: sticky !important; + top: 0 !important; + z-index: 1000 !important; +} + +/* Blog Section Fixes */ +.tn1-blog-section, .blog-2-section { + background-color: inherit !important; + padding: 80px 20px !important; +} + +.tn1-blog-card, .blog-2-card { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; + transition: transform 0.3s ease, box-shadow 0.3s ease !important; + overflow: hidden !important; +} + +.tn1-blog-card:hover, .blog-2-card:hover { + transform: translateY(-5px) !important; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12) !important; +} + +/* FAQ Sections */ +.faq-4-section, .faq-5-section, .faq-6-block, .faq-7-container { + background-color: inherit !important; +} + +.faq-4-question, .faq-5-question, .faq-6-question, .faq-7-question { + background-color: #f1f1f1 !important; + transition: background-color 0.3s ease !important; +} + +.faq-4-question:hover, .faq-5-question:hover, .faq-6-question:hover, .faq-7-question:hover { + background-color: #e7e7e7 !important; +} + +/* Footer Override */ +.footer-1-section, .footer-2-section { + background-color: #f8f8f8 !important; + border-top: 1px solid #eee !important; +} + +/* Contact Section */ +.contact-1-section { + background-color: #fff !important; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important; +} + +.contact-1-submit-btn { + background-color: #0066cc !important; + color: #fff !important; +} + +.contact-1-submit-btn:hover { + background-color: #004499 !important; +} + +/* Hero Section Enhancements */ +.hero-1-two-column, .hero-2-centered-hero, .hero-9-section { + background-color: inherit !important; +} + +.hero-1-placeholder, .hero-2-placeholder, .hero-9-placeholder { + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important; + overflow: hidden !important; + position: relative !important; +} + +/* Split Sections */ +.split-8-section, .split-10-section { + background-color: inherit !important; +} + +.split-8-placeholder, .split-10-placeholder { + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important; +} + +/* Testimonial Styling */ +testimonial { + display: block !important; + max-width: 800px !important; + margin: 40px auto !important; + padding: 35px !important; + background-color: #fff !important; + border-radius: 10px !important; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important; + font-style: italic !important; + color: #444 !important; + position: relative !important; + line-height: 1.8 !important; + font-size: 1.1rem !important; + border-left: 5px solid #0066cc !important; +} + +testimonial::before { + content: '"' !important; + font-size: 5rem !important; + color: #0066cc !important; + position: absolute !important; + left: 15px !important; + top: -10px !important; + opacity: 0.2 !important; + font-family: Georgia, serif !important; +} + +section:nth-child(even) testimonial { + background-color: #fff !important; +} + +/* Custom styles container */ +styles { + display: none !important; +} + +/* Responsive Adjustments */ +@media (max-width: 992px) { + h1 { + font-size: 2rem !important; + } + + h2 { + font-size: 1.75rem !important; + } + + section { + padding: 60px 0 !important; + } +} + +@media (max-width: 768px) { + section { + padding: 50px 0 !important; + } + + .hero-1-two-column, .split-8-section, .split-10-section { + flex-direction: column !important; + } + + .btn, button { + width: 100% !important; + } + + .hero-1-button-group, .hero-2-button-group { + flex-direction: column !important; + width: 100% !important; + } +} + +@media (max-width: 576px) { + body { + font-size: 15px !important; + } + + h1 { + font-size: 1.75rem !important; + } + + h2 { + font-size: 1.5rem !important; + } + + section { + padding: 40px 0 !important; + } + + testimonial { + padding: 25px !important; + font-size: 1rem !important; + } +} + +/* Animations and Transitions */ +.fade-in { + animation: fadeIn 1s ease-in-out !important; +} + +@keyframes fadeIn { + from { + opacity: 0 !important; + transform: translateY(20px) !important; + } + to { + opacity: 1 !important; + transform: translateY(0) !important; + } +} + +/* Ensure smooth scrolling */ +html { + scroll-behavior: smooth !important; +} `; diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/common-css2.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/common-css2.ts index dbd3437..004e726 100644 --- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/common-css2.ts +++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/common-css2.ts @@ -1,4 +1,94 @@ export const COMMON_CSS2 = ` + /* Reset and base styles */ +html, body { + margin: 0 !important; + padding: 0 !important; + width: 100% !important; + min-height: 100% !important; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; + line-height: 1.6 !important; + color: #333 !important; + background-color: #f9f9f9 !important; + box-sizing: border-box !important; +} + +/* Content container to ensure consistent padding/margins */ + +/* Alternate section background for visual separation */ +section:nth-child(even) { + background-color: #fff !important; +} + +/* Typography enhancements */ +h1, h2, h3, h4, h5, h6 { + margin-top: 0 !important; + line-height: 1.2 !important; + font-weight: 600 !important; +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + section { + padding: 40px 0 !important; + } +} + +/* Smooth scrolling for a more unified experience */ +html { + scroll-behavior: smooth !important; +} + + + +/* Button consistency */ +.button, button, input[type="button"], input[type="submit"] { + display: inline-block !important; + padding: 10px 20px !important; + border-radius: 4px !important; + background-color: #0066cc !important; + color: white !important; + border: none !important; + cursor: pointer !important; + transition: background-color 0.3s ease !important; +} + +.button:hover, button:hover, input[type="button"]:hover, input[type="submit"]:hover { + background-color: #004499 !important; +} + + +/* Testimonial styling */ +testimonial { + display: block !important; + max-width: 800px !important; + margin: 40px auto !important; + padding: 30px !important; + background-color: #fff !important; + border-radius: 8px !important; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; + font-style: italic !important; + color: #555 !important; + position: relative !important; + line-height: 1.8 !important; + font-size: 1.1rem !important; +} + +testimonial::before { + content: '"' !important; + font-size: 4rem !important; + color: #0066cc !important; + position: absolute !important; + left: 10px !important; + top: -10px !important; + opacity: 0.2 !important; + font-family: Georgia, serif !important; +} + +/* For dark backgrounds */ +section:nth-child(even) testimonial { + background-color: #f9f9f9 !important; +} + .section-preview { /* ===== RESET & BASE ===== */ diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/download-css.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/download-css.ts index d2c4706..de4be1e 100644 --- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/download-css.ts +++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/download-css.ts @@ -1,5 +1,390 @@ export const Download_Css = ` body { + +/* Master Reset & Base Styles */ +html, body { + margin: 0 !important; + padding: 0 !important; + width: 100% !important; + min-height: 100% !important; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; + font-size: 16px !important; + line-height: 1.6 !important; + color: #333 !important; + background-color: #fff !important; + box-sizing: border-box !important; + overflow-x: hidden !important; + text-align: left !important; /* Override center alignment */ +} + +*, *::before, *::after { + box-sizing: border-box !important; +} + +/* Common Container */ +.container { + max-width: 1200px !important; + width: 100% !important; + margin: 0 auto !important; + padding: 0 20px !important; +} + +/* Section Styling for Consistent Flow */ +section { + padding: 80px 0 !important; + position: relative !important; + width: 100% !important; + background-color: #fff !important; +} + +section:nth-child(even) { + background-color: #f9f9f9 !important; +} + +/* Typography Hierarchy */ +h1, h2, h3, h4, h5, h6 { + margin-top: 0 !important; + margin-bottom: 0.5em !important; + line-height: 1.3 !important; + font-weight: 700 !important; + color: #111 !important; +} + +h1 { + font-size: 2.5rem !important; +} + +h2 { + font-size: 2rem !important; +} + +h3 { + font-size: 1.75rem !important; +} + +h4 { + font-size: 1.5rem !important; +} + +h5 { + font-size: 1.25rem !important; +} + +h6 { + font-size: 1rem !important; +} + +p { + margin-top: 0 !important; + margin-bottom: 1rem !important; + color: #555 !important; +} + +/* Link Styling */ +a { + color: #0066cc !important; + text-decoration: none !important; + transition: all 0.3s ease !important; +} + +a:hover { + color: #004499 !important; + text-decoration: underline !important; +} + +/* Button System */ +.btn, button, +.hero-1-btn, .hero-2-btn, .grid-11-btn, .grid-12-btn, +.split-8-btn, .split-10-btn, .text-1-btn, .text-2-btn, +.cta-3-btn, .faq-4-footer-btn, .faq-5-contact-btn, +.faq-6-view-more-btn, .visa-order-btn, .nav-1-btn { + display: inline-block !important; + padding: 12px 24px !important; + font-size: 16px !important; + font-weight: 600 !important; + text-align: center !important; + border-radius: 6px !important; + cursor: pointer !important; + transition: all 0.3s ease !important; + border: 2px solid transparent !important; + letter-spacing: 0.5px !important; + text-decoration: none !important; +} + +.btn-primary, .hero-1-solid, .hero-2-solid, .text-1-solid, .text-2-solid, .cta-3-solid, .nav-1-solid { + background-color: #0066cc !important; + color: #fff !important; + border-color: #0066cc !important; +} + +.btn-primary:hover, .hero-1-solid:hover, .hero-2-solid:hover, .text-1-solid:hover, .text-2-solid:hover, .cta-3-solid:hover, .nav-1-solid:hover { + background-color: #004499 !important; + border-color: #004499 !important; +} + +.btn-outline, .hero-1-outline, .hero-2-outline, .text-1-outline, .text-2-outline, .cta-3-outline, .nav-1-outline { + background-color: transparent !important; + color: #0066cc !important; + border-color: #0066cc !important; +} + +.btn-outline:hover, .hero-1-outline:hover, .hero-2-outline:hover, .text-1-outline:hover, .text-2-outline:hover, .cta-3-outline:hover, .nav-1-outline:hover { + background-color: #0066cc !important; + color: #fff !important; +} + +/* Image Styling */ +img { + max-width: 100% !important; + height: auto !important; + display: block !important; +} + +/* Form Elements */ +input, textarea, select { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; + font-size: 16px !important; + padding: 12px !important; + border: 1px solid #ccc !important; + border-radius: 6px !important; + width: 100% !important; + transition: border-color 0.3s ease !important; +} + +input:focus, textarea:focus, select:focus { + outline: none !important; + border-color: #0066cc !important; + box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1) !important; +} + +/* Navigation Override */ +.nav-1-navbar { + background-color: #fff !important; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important; + position: sticky !important; + top: 0 !important; + z-index: 1000 !important; +} + +/* Blog Section Fixes */ +.tn1-blog-section, .blog-2-section { + background-color: inherit !important; + padding: 80px 20px !important; +} + +.tn1-blog-card, .blog-2-card { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; + transition: transform 0.3s ease, box-shadow 0.3s ease !important; + overflow: hidden !important; +} + +.tn1-blog-card:hover, .blog-2-card:hover { + transform: translateY(-5px) !important; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12) !important; +} + +/* FAQ Sections */ +.faq-4-section, .faq-5-section, .faq-6-block, .faq-7-container { + background-color: inherit !important; +} + +.faq-4-question, .faq-5-question, .faq-6-question, .faq-7-question { + background-color: #f1f1f1 !important; + transition: background-color 0.3s ease !important; +} + +.faq-4-question:hover, .faq-5-question:hover, .faq-6-question:hover, .faq-7-question:hover { + background-color: #e7e7e7 !important; +} + +/* Footer Override */ +.footer-1-section, .footer-2-section { + background-color: #f8f8f8 !important; + border-top: 1px solid #eee !important; +} + +/* Contact Section */ +.contact-1-section { + background-color: #fff !important; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important; +} + +.contact-1-submit-btn { + background-color: #0066cc !important; + color: #fff !important; +} + +.contact-1-submit-btn:hover { + background-color: #004499 !important; +} + +/* Hero Section Enhancements */ +.hero-1-two-column, .hero-2-centered-hero, .hero-9-section { + background-color: inherit !important; +} + +.hero-1-placeholder, .hero-2-placeholder, .hero-9-placeholder { + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important; + overflow: hidden !important; + position: relative !important; +} + +/* Split Sections */ +.split-8-section, .split-10-section { + background-color: inherit !important; +} + +.split-8-placeholder, .split-10-placeholder { + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important; +} + +/* Testimonial Styling */ +testimonial { + display: block !important; + max-width: 800px !important; + margin: 40px auto !important; + padding: 35px !important; + background-color: #fff !important; + border-radius: 10px !important; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important; + font-style: italic !important; + color: #444 !important; + position: relative !important; + line-height: 1.8 !important; + font-size: 1.1rem !important; + border-left: 5px solid #0066cc !important; +} + +testimonial::before { + content: '"' !important; + font-size: 5rem !important; + color: #0066cc !important; + position: absolute !important; + left: 15px !important; + top: -10px !important; + opacity: 0.2 !important; + font-family: Georgia, serif !important; +} + +section:nth-child(even) testimonial { + background-color: #fff !important; +} + +/* Custom styles container */ +styles { + display: none !important; +} + +/* Responsive Adjustments */ +@media (max-width: 992px) { + h1 { + font-size: 2rem !important; + } + + h2 { + font-size: 1.75rem !important; + } + + section { + padding: 60px 0 !important; + } +} + +@media (max-width: 768px) { + section { + padding: 50px 0 !important; + } + + .hero-1-two-column, .split-8-section, .split-10-section { + flex-direction: column !important; + } + + .btn, button { + width: 100% !important; + } + + .hero-1-button-group, .hero-2-button-group { + flex-direction: column !important; + width: 100% !important; + } +} + +@media (max-width: 576px) { + body { + font-size: 15px !important; + } + + h1 { + font-size: 1.75rem !important; + } + + h2 { + font-size: 1.5rem !important; + } + + section { + padding: 40px 0 !important; + } + + testimonial { + padding: 25px !important; + font-size: 1rem !important; + } +} + +/* Animations and Transitions */ +.fade-in { + animation: fadeIn 1s ease-in-out !important; +} + +@keyframes fadeIn { + from { + opacity: 0 !important; + transform: translateY(20px) !important; + } + to { + opacity: 1 !important; + transform: translateY(0) !important; + } +} + +/* Ensure smooth scrolling */ +html { + scroll-behavior: smooth !important; +} + +/* Testimonial styling */ +testimonial { + display: block !important; + max-width: 800px !important; + margin: 40px auto !important; + padding: 30px !important; + background-color: #fff !important; + border-radius: 8px !important; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; + font-style: italic !important; + color: #555 !important; + position: relative !important; + line-height: 1.8 !important; + font-size: 1.1rem !important; +} + +testimonial::before { + content: '"' !important; + font-size: 4rem !important; + color: #0066cc !important; + position: absolute !important; + left: 10px !important; + top: -10px !important; + opacity: 0.2 !important; + font-family: Georgia, serif !important; +} + +/* For dark backgrounds */ +section:nth-child(even) testimonial { + background-color: #f9f9f9 !important; +} + font-family: sans-serif; margin: 0; padding: 0; diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/download-css2.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/download-css2.ts index a72e615..edd2afc 100644 --- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/download-css2.ts +++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/download-css2.ts @@ -13,6 +13,357 @@ body { color: #222; line-height: 1.6; } + /* Master Reset & Base Styles */ +html, body { + margin: 0 !important; + padding: 0 !important; + width: 100% !important; + min-height: 100% !important; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; + font-size: 16px !important; + line-height: 1.6 !important; + color: #333 !important; + background-color: #fff !important; + box-sizing: border-box !important; + overflow-x: hidden !important; + text-align: left !important; /* Override center alignment */ +} + +*, *::before, *::after { + box-sizing: border-box !important; +} + +/* Common Container */ +.container { + max-width: 1200px !important; + width: 100% !important; + margin: 0 auto !important; + padding: 0 20px !important; +} + +/* Section Styling for Consistent Flow */ +section { + padding: 80px 0 !important; + position: relative !important; + width: 100% !important; + background-color: #fff !important; +} + +section:nth-child(even) { + background-color: #f9f9f9 !important; +} + +/* Typography Hierarchy */ +h1, h2, h3, h4, h5, h6 { + margin-top: 0 !important; + margin-bottom: 0.5em !important; + line-height: 1.3 !important; + font-weight: 700 !important; + color: #111 !important; +} + +h1 { + font-size: 2.5rem !important; +} + +h2 { + font-size: 2rem !important; +} + +h3 { + font-size: 1.75rem !important; +} + +h4 { + font-size: 1.5rem !important; +} + +h5 { + font-size: 1.25rem !important; +} + +h6 { + font-size: 1rem !important; +} + +p { + margin-top: 0 !important; + margin-bottom: 1rem !important; + color: #555 !important; +} + +/* Link Styling */ +a { + color: #0066cc !important; + text-decoration: none !important; + transition: all 0.3s ease !important; +} + +a:hover { + color: #004499 !important; + text-decoration: underline !important; +} + +/* Button System */ +.btn, button, +.hero-1-btn, .hero-2-btn, .grid-11-btn, .grid-12-btn, +.split-8-btn, .split-10-btn, .text-1-btn, .text-2-btn, +.cta-3-btn, .faq-4-footer-btn, .faq-5-contact-btn, +.faq-6-view-more-btn, .visa-order-btn, .nav-1-btn { + display: inline-block !important; + padding: 12px 24px !important; + font-size: 16px !important; + font-weight: 600 !important; + text-align: center !important; + border-radius: 6px !important; + cursor: pointer !important; + transition: all 0.3s ease !important; + border: 2px solid transparent !important; + letter-spacing: 0.5px !important; + text-decoration: none !important; +} + +.btn-primary, .hero-1-solid, .hero-2-solid, .text-1-solid, .text-2-solid, .cta-3-solid, .nav-1-solid { + background-color: #0066cc !important; + color: #fff !important; + border-color: #0066cc !important; +} + +.btn-primary:hover, .hero-1-solid:hover, .hero-2-solid:hover, .text-1-solid:hover, .text-2-solid:hover, .cta-3-solid:hover, .nav-1-solid:hover { + background-color: #004499 !important; + border-color: #004499 !important; +} + +.btn-outline, .hero-1-outline, .hero-2-outline, .text-1-outline, .text-2-outline, .cta-3-outline, .nav-1-outline { + background-color: transparent !important; + color: #0066cc !important; + border-color: #0066cc !important; +} + +.btn-outline:hover, .hero-1-outline:hover, .hero-2-outline:hover, .text-1-outline:hover, .text-2-outline:hover, .cta-3-outline:hover, .nav-1-outline:hover { + background-color: #0066cc !important; + color: #fff !important; +} + +/* Image Styling */ +img { + max-width: 100% !important; + height: auto !important; + display: block !important; +} + +/* Form Elements */ +input, textarea, select { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; + font-size: 16px !important; + padding: 12px !important; + border: 1px solid #ccc !important; + border-radius: 6px !important; + width: 100% !important; + transition: border-color 0.3s ease !important; +} + +input:focus, textarea:focus, select:focus { + outline: none !important; + border-color: #0066cc !important; + box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1) !important; +} + +/* Navigation Override */ +.nav-1-navbar { + background-color: #fff !important; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important; + position: sticky !important; + top: 0 !important; + z-index: 1000 !important; +} + +/* Blog Section Fixes */ +.tn1-blog-section, .blog-2-section { + background-color: inherit !important; + padding: 80px 20px !important; +} + +.tn1-blog-card, .blog-2-card { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; + transition: transform 0.3s ease, box-shadow 0.3s ease !important; + overflow: hidden !important; +} + +.tn1-blog-card:hover, .blog-2-card:hover { + transform: translateY(-5px) !important; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12) !important; +} + +/* FAQ Sections */ +.faq-4-section, .faq-5-section, .faq-6-block, .faq-7-container { + background-color: inherit !important; +} + +.faq-4-question, .faq-5-question, .faq-6-question, .faq-7-question { + background-color: #f1f1f1 !important; + transition: background-color 0.3s ease !important; +} + +.faq-4-question:hover, .faq-5-question:hover, .faq-6-question:hover, .faq-7-question:hover { + background-color: #e7e7e7 !important; +} + +/* Footer Override */ +.footer-1-section, .footer-2-section { + background-color: #f8f8f8 !important; + border-top: 1px solid #eee !important; +} + +/* Contact Section */ +.contact-1-section { + background-color: #fff !important; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important; +} + +.contact-1-submit-btn { + background-color: #0066cc !important; + color: #fff !important; +} + +.contact-1-submit-btn:hover { + background-color: #004499 !important; +} + +/* Hero Section Enhancements */ +.hero-1-two-column, .hero-2-centered-hero, .hero-9-section { + background-color: inherit !important; +} + +.hero-1-placeholder, .hero-2-placeholder, .hero-9-placeholder { + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important; + overflow: hidden !important; + position: relative !important; +} + +/* Split Sections */ +.split-8-section, .split-10-section { + background-color: inherit !important; +} + +.split-8-placeholder, .split-10-placeholder { + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important; +} + +/* Testimonial Styling */ +testimonial { + display: block !important; + max-width: 800px !important; + margin: 40px auto !important; + padding: 35px !important; + background-color: #fff !important; + border-radius: 10px !important; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important; + font-style: italic !important; + color: #444 !important; + position: relative !important; + line-height: 1.8 !important; + font-size: 1.1rem !important; + border-left: 5px solid #0066cc !important; +} + +testimonial::before { + content: '"' !important; + font-size: 5rem !important; + color: #0066cc !important; + position: absolute !important; + left: 15px !important; + top: -10px !important; + opacity: 0.2 !important; + font-family: Georgia, serif !important; +} + +section:nth-child(even) testimonial { + background-color: #fff !important; +} + +/* Custom styles container */ +styles { + display: none !important; +} + +/* Responsive Adjustments */ +@media (max-width: 992px) { + h1 { + font-size: 2rem !important; + } + + h2 { + font-size: 1.75rem !important; + } + + section { + padding: 60px 0 !important; + } +} + +@media (max-width: 768px) { + section { + padding: 50px 0 !important; + } + + .hero-1-two-column, .split-8-section, .split-10-section { + flex-direction: column !important; + } + + .btn, button { + width: 100% !important; + } + + .hero-1-button-group, .hero-2-button-group { + flex-direction: column !important; + width: 100% !important; + } +} + +@media (max-width: 576px) { + body { + font-size: 15px !important; + } + + h1 { + font-size: 1.75rem !important; + } + + h2 { + font-size: 1.5rem !important; + } + + section { + padding: 40px 0 !important; + } + + testimonial { + padding: 25px !important; + font-size: 1rem !important; + } +} + +/* Animations and Transitions */ +.fade-in { + animation: fadeIn 1s ease-in-out !important; +} + +@keyframes fadeIn { + from { + opacity: 0 !important; + transform: translateY(20px) !important; + } + to { + opacity: 1 !important; + transform: translateY(0) !important; + } +} + +/* Ensure smooth scrolling */ +html { + scroll-behavior: smooth !important; +} /* 🧱 Extended for Mega Navbar Dropdown */ .mega-navbar { diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.html b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.html index 9baf659..8c31890 100644 --- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.html +++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.html @@ -113,250 +113,557 @@
--> + -
-
- - - - - - - + +
-
- +
+ + +
-
+ +
+ + +
+
+ +
+ + +

+ + + + Wireframe Controls +

+ +
+ + + +
+
+

+ + Generate Wireframe +

+ + + + + + + + + + - -
-
-
-

Edit Navbar Links - {{ selectedNavbarPage }}

-
-
-
- - + + - +
+
+ + +
+

+ + Style Controls +

+ +
+
+ + +
+ +
+ + +
- +
+
+ +
+
+ + + Text Color + + +
+ +
+ + + Background + + +
+
+ +
-
- - + + +
+ + +
+

+ + Additional Tools +

+ + + + + + + +
- -
- - - - - - - - - - - - -
+ +
+
+
- -
- -
- - - -
+ + +
- -
-
+ - -
+ +
+
+
Loading wireframe...
+ +
- -
+ +
-
+ + + +
- -
-

{{ pageName }}

-
- - - + +
+
+ + +
+
+ + {{ sectionKey }} + +
+
+ + +
- -
- - -
- - -
- -
- {{ sectionKey }} - - -
- - -
-
- - - -
-
-
- - -
- -
- - -
- -
-
- - -
-
+ + +
+
+ +

No Pages Yet

+

Create your first page to get started with wireframing.

+ +
+
-
+
+ + +
- - -
-
-
-

Add New Section to {{ newSectionPage }}

- -
- -
-
- - -
- -
- - -
- -
- - -
-
- -
- -
+ + + + + +
+
+ +
+

+ + Edit Navbar Links - {{ selectedNavbarPage }} +

+ +
+ +
+
+
+ +
+
+ +
+ +
+ + +
+ +
+ + +
+
+
+ + +
+
+ +
+

+ + Add New Section to {{ newSectionPage }} +

+ +
+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+
+ +
+ + +
+
+
+ + +
+
+ +
+

+ + Add New Page +

+ +
+ +
+
+ + +
+ +
+ + +
+
+ +
+ + +
+
+
+
\ No newline at end of file diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.scss b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.scss index c20e662..c3bffec 100644 --- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.scss +++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.scss @@ -1,668 +1,1038 @@ -/* Reset and base styles */ -.visual-editor-container { - * { - box-sizing: border-box; - margin: 0; - padding: 0; - } +// wireframe-editor.component.scss - body { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - color: #333; - line-height: 1.5; - overflow: hidden; +// Professional Black & White Theme Variables +$primary-black: #212529; +$secondary-black: #495057; +$light-gray: #f8f9fa; +$medium-gray: #e9ecef; +$border-gray: #dee2e6; +$text-gray: #6c757d; +$white: #ffffff; +$success-green: #28a745; +$danger-red: #dc3545; +$warning-orange: #fd7e14; +$info-blue: #17a2b8; + +// Animation Variables +$transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +$transition-fast: all 0.2s ease; +$shadow-light: 0 2px 8px rgba(0, 0, 0, 0.05); +$shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1); +$shadow-heavy: 0 8px 25px rgba(0, 0, 0, 0.15); + +.zoom-controls { + display: flex; + flex-direction: column; + gap: 8px; + padding: 8px; + background: rgba(255, 255, 255, 0.95); + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + width: '50px'; + + button { + width: 32px; + height: 32px; + padding: 0; + display: flex; + align-items: center; + justify-content: center; } } - /* Overall layout fixes */ - .visual-editor-container { - position: relative; - height: calc(100vh - 60px); - overflow: hidden; - background: #f0f2f5; - } - /* Action bar styling */ - .action-bar { - display: flex; - justify-content: space-between; - align-items: center; - background: #fff; - padding: 8px 16px; - box-shadow: 0 2px 4px rgba(0,0,0,0.1); - position: sticky; - top: 0; - z-index: 100; - height: 60px; - } +.infinite-grid { + background-image: + linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px), + linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px); + background-size: 20px 20px; + opacity: 0.8; + z-index: 1; +} - .section-preview { - .preview-mode { - min-height: 200px; - padding: 20px; - transform: scale(0.8); - transform-origin: top left; - width: 125%; +.connected-sections { + display: flex; + flex-direction: column; + gap: 0; + + .section-wrapper { + width: 100%; + margin: 0; + padding: 0; + + .section-content { + width: 100% ; + max-width: 100% ; - * { - pointer-events: none; + > * { + margin: 0 ; + padding: 0 ; + max-width: 100% ; + } + } + } +} + +.wireframe-editor { + position: relative ; + width: 100% ; + height: 100vh ; + overflow: hidden ; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif ; + background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) ; + + // Fixed Right Sidebar + .wireframe-controls-sidebar { + position: fixed ; + top: 50px; // Start from -30px as requested + transition: width 0.3s ease, transform 0.3s ease; + + &.collapsed { + width: 60px; + + .sidebar-header h2, + .control-section h3, + .action-btn span, + label, + .form-control { + opacity: 0; + pointer-events: none; + } + + .action-btn { + width: 40px; + height: 40px; + border-radius: 50%; + padding: 0; + margin: 5px auto; + + i { + margin: 0; + } + } + } + right: 0 ; + width: 380px ; + height: 100vh ; + background: linear-gradient(135deg, $white 0%, $light-gray 50%, $medium-gray 100%) ; + border-left: 2px solid $border-gray ; + z-index: 1500 ; + overflow-y: auto ; + box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15) ; + backdrop-filter: blur(20px) ; + + // Custom Scrollbar + &::-webkit-scrollbar { + width: 8px ; + } + + &::-webkit-scrollbar-track { + background: rgba(241, 241, 241, 0.5) ; + border-radius: 4px ; + } + + &::-webkit-scrollbar-thumb { + background: linear-gradient(135deg, #c1c1c1 0%, #a8a8a8 100%) ; + border-radius: 4px ; + transition: $transition-fast ; + + &:hover { + background: linear-gradient(135deg, #a8a8a8 0%, #9a9a9a 100%) ; } } - &[contenteditable="true"] { - .preview-mode { - transform: none; - width: 100%; - pointer-events: auto; - - * { - pointer-events: auto; + // Sidebar Header + .sidebar-header { + padding: 30px 25px ; + border-bottom: 2px solid $border-gray ; + background: linear-gradient(135deg, $white 0%, rgba(248, 249, 250, 0.8) 100%) ; + position: sticky ; + top: 0 ; + z-index: 10 ; + backdrop-filter: blur(10px) ; + + h2 { + margin: 0 ; + font-size: 20px ; + font-weight: 700 ; + color: $primary-black ; + background: linear-gradient(135deg, $primary-black 0%, $secondary-black 100%) ; + -webkit-background-clip: text ; + -webkit-text-fill-color: transparent ; + background-clip: text ; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) ; + } + } + + // Sidebar Content + .sidebar-content { + padding: 25px ; + + .control-section { + background: rgba(255, 255, 255, 0.9) ; + border-radius: 12px ; + padding: 20px ; + margin-bottom: 20px ; + border: 1px solid rgba(222, 226, 230, 0.8) ; + box-shadow: $shadow-light ; + backdrop-filter: blur(10px) ; + transition: $transition-smooth ; + position: relative ; + overflow: hidden ; + + &::before { + content: '' ; + position: absolute ; + top: 0 ; + left: 0 ; + right: 0 ; + height: 3px ; + background: linear-gradient(90deg, $primary-black 0%, $secondary-black 50%, $primary-black 100%) ; + opacity: 0 ; + transition: $transition-smooth ; + } + + &:hover { + transform: translateY(-2px) ; + box-shadow: $shadow-medium ; + border-color: rgba(33, 37, 41, 0.2) ; + + &::before { + opacity: 1 ; + } + } + + h3 { + margin: 0 0 15px 0 ; + font-size: 16px ; + font-weight: 600 ; + color: $secondary-black ; + position: relative ; + padding-bottom: 8px ; + + &::after { + content: '' ; + position: absolute ; + bottom: 0 ; + left: 0 ; + width: 30px ; + height: 2px ; + background: linear-gradient(90deg, $primary-black 0%, $secondary-black 100%) ; + border-radius: 1px ; + } + } + + // Action Buttons + .action-btn { + width: 100% ; + margin-bottom: 12px ; + padding: 12px 16px ; + border: none ; + border-radius: 8px ; + cursor: pointer ; + font-size: 13px ; + font-weight: 600 ; + transition: $transition-smooth ; + display: flex ; + align-items: center ; + justify-content: center ; + gap: 8px ; + text-decoration: none ; + position: relative ; + overflow: hidden ; + + &::before { + content: '' ; + position: absolute ; + top: 0 ; + left: -100% ; + width: 100% ; + height: 100% ; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) ; + transition: left 0.5s ; + } + + &:hover::before { + left: 100% ; + } + + &.primary { + background: linear-gradient(135deg, $primary-black 0%, $secondary-black 100%) ; + color: $white ; + box-shadow: $shadow-light ; + + &:hover:not(:disabled) { + transform: translateY(-2px) scale(1.02) ; + box-shadow: $shadow-heavy ; + background: linear-gradient(135deg, $secondary-black 0%, $primary-black 100%) ; + } + + &:active { + transform: translateY(-1px) scale(0.98) ; + } + } + + &.secondary { + background: linear-gradient(135deg, $white 0%, $light-gray 100%) ; + color: $primary-black ; + border: 2px solid $border-gray ; + + &:hover:not(:disabled) { + transform: translateY(-2px) scale(1.02) ; + box-shadow: $shadow-medium ; + border-color: $primary-black ; + background: linear-gradient(135deg, $light-gray 0%, $white 100%) ; + } + + &:active { + transform: translateY(-1px) scale(0.98) ; + } + } + + &.small { + padding: 10px 14px ; + font-size: 12px ; + margin-bottom: 8px ; + } + + i { + font-size: 14px ; + transition: $transition-fast ; + } + + &:hover i { + transform: scale(1.1) rotate(3deg) ; + } + } + + // Form Controls + .form-control { + width: 100% ; + padding: 10px 14px ; + border: 2px solid $border-gray ; + border-radius: 6px ; + font-size: 13px ; + transition: $transition-smooth ; + background: rgba(255, 255, 255, 0.8) ; + margin-bottom: 12px ; + + &:focus { + outline: none ; + border-color: $primary-black ; + box-shadow: 0 0 0 3px rgba(33, 37, 41, 0.1) ; + background: $white ; + transform: translateY(-1px) ; + } + + &:hover { + border-color: $secondary-black ; + transform: translateY(-1px) ; + } + } + + // Style Grid + .style-grid { + display: grid ; + grid-template-columns: 1fr 1fr ; + gap: 12px ; + margin-bottom: 12px ; + } + + // Color Controls + .color-controls { + display: flex ; + gap: 12px ; + margin-bottom: 15px ; + + .color-input-group { + flex: 1 ; + display: flex ; + flex-direction: column ; + align-items: center ; + gap: 6px ; + + .color-label { + font-size: 11px ; + font-weight: 600 ; + color: $text-gray ; + text-transform: uppercase ; + letter-spacing: 0.5px ; + } + + .color-picker { + width: 50px ; + height: 35px ; + border: 2px solid $border-gray ; + border-radius: 6px ; + cursor: pointer ; + transition: $transition-smooth ; + + &:hover { + transform: scale(1.05) ; + box-shadow: $shadow-medium ; + border-color: $primary-black ; + } + } + } } } } } - .left-controls, .right-controls { - display: flex; - align-items: center; - gap: 10px; - } - - .action-btn { - padding: 8px 12px; - border-radius: 4px; - border: none; - cursor: pointer; - font-weight: 500; - transition: all 0.2s; - background: #f5f5f5; - - &:hover { - background: #e0e0e0; - } - - &.regenerate-btn { - background: #e3f2fd; - color: #2196f3; - - &:hover { - background: #bbdefb; - } - } - - &.save-btn { - background: #e8f5e9; - color: #4caf50; - - &:hover { - background: #c8e6c9; - } - } - } - - .style-control { - padding: 6px 8px; - border-radius: 4px; - border: 1px solid #ddd; - min-width: 100px; - } - - .color-picker { - width: 30px; - height: 30px; - padding: 0; - border: 1px solid #ddd; - border-radius: 4px; - overflow: hidden; - cursor: pointer; - } - - /* Zoom controls */ - .zoom-controls { - position: absolute; - top: 10px; - right: 10px; - display: flex; - gap: 5px; - z-index: 50; - background: rgba(255, 255, 255, 0.9); - padding: 5px; - border-radius: 4px; - box-shadow: 0 2px 4px rgba(0,0,0,0.1); - } - + .zoom-controls-new { + position: fixed; + bottom: 30px; + left: 30px; + display: flex; + gap: 8px; + z-index: 1000; + .zoom-btn { - width: 30px; - height: 30px; - border-radius: 50%; + width: 45px; + height: 45px; border: none; - background: #f5f5f5; + border-radius: 50%; + background: rgba(255, 255, 255, 0.95); + color: $primary-black; cursor: pointer; display: flex; align-items: center; justify-content: center; - - &:hover { - background: #e0e0e0; - } - } - - /* Canvas and grid styling */ - .canvas-wrapper { - width: 100%; - height: 100%; - overflow: hidden; - position: relative; - } - - .canvas-boundary { - position: absolute; - width: 100%; - height: 100%; - cursor: move; - transform-origin: 0 0; - will-change: transform; - background-color: #f5f5f5; - } - - .grid-background { - position: absolute; - width: 5000px; - height: 5000px; - background-size: 20px 20px; - background-image: - linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px), - linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px); - transform: translate(-2500px, -2500px); - } - - /* Pages container */ - .pages-container { - display: flex; - gap: 40px; - padding: 40px; - align-items: flex-start; - position: relative; - z-index: 10; - width: 2000px; - height: auto; - overflow: hidden; - } - - /* Page card styling */ - .page-card { - background: white; - border-radius: 8px; - box-shadow: 0 4px 12px rgba(0,0,0,0.1); - display: flex; - flex-direction: column; - position: relative; - transition: box-shadow 0.3s; - width: 100%; - margin: 20px 0; - overflow: hidden; - - &:hover { - box-shadow: 0 6px 14px rgba(0,0,0,0.15); - } - - &.page-hovered { - border: 2px solid #2196f3; - } - } - - /* Page header */ - .page-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 12px 16px; - border-bottom: 1px solid #eee; - background: #f5f7fa; - border-radius: 8px 8px 0 0; - } - - /* Navbar Editor Styles */ - .navbar-controls { - margin-left: 20px; - - select { - padding: 8px 12px; - border-radius: 4px; - border: 1px solid #ccc; - } - } - - .link-editor { - display: flex; - gap: 10px; - margin-bottom: 10px; - - input, select { - flex: 1; - padding: 8px; - border: 1px solid #ddd; - border-radius: 4px; - } - - .remove-btn { - background: #ff4444; - color: white; - border: none; - border-radius: 50%; - width: 24px; - height: 24px; - cursor: pointer; - } - } - - .add-link-btn { - margin-top: 15px; - width: 100%; - } - - .page-title { + transition: $transition-smooth; font-size: 16px; - font-weight: 600; - margin: 0; - } - - .page-tools { - display: flex; - gap: 8px; - opacity: 0; - transition: opacity 0.2s; - - &.visible { - opacity: 1; - } - } - - .tool-btn { - background: none; - border: none; - cursor: pointer; - font-size: 14px; - width: 30px; - height: 30px; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; + box-shadow: $shadow-medium; + backdrop-filter: blur(10px); + border: 1px solid rgba(222, 226, 230, 0.8); &:hover { - background: rgba(0,0,0,0.05); + transform: translateY(-2px) scale(1.05); + box-shadow: $shadow-heavy; + background: $primary-black; + color: white; } } +} - /* In component's CSS */ -.pages-container { + // Main Canvas Area + .canvas-main-area { + position: relative ; + width: calc(100% - 380px); + margin-left: 0px !important; + transition: width 0.3s ease; + &.sidebar-collapsed { + width: calc(100% - 60px); + } + height: 100vh ; + overflow: hidden ; + background: #fafafa ; + + // Infinite Grid Background + .infinite-grid { + position: absolute ; + top: 0 ; + left: 0 ; + width: 200% ; + height: 200% ; + background-image: + radial-gradient(circle, #ddd 1px, transparent 1px), + radial-gradient(circle, #eee 1px, transparent 1px) ; + background-size: 25px 25px, 5px 5px ; + background-position: 0 0, 12.5px 12.5px ; + opacity: 0.6 ; + pointer-events: none ; + transform-origin: 0 0 ; + transition: transform 0.1s ease-out ; + } + + // Canvas Container + .canvas-container { + position: relative ; + width: 100% ; + height: 100% ; + overflow: auto ; + cursor: grab ; + + &:active { + cursor: grabbing ; + } + + &.panning { + cursor: grabbing ; + } + } + + + .page-actions-new { + position: fixed; + top: 20px; + left: 20px; + display: flex; + gap: 10px; + z-index: 1000; + + .action-btn { + padding: 10px 16px; + border-radius: 8px; + font-size: 13px; + font-weight: 600; + border: none; + cursor: pointer; + transition: $transition-smooth; + display: flex; + align-items: center; + gap: 6px; + box-shadow: $shadow-light; + + &.primary { + background: $primary-black; + color: white; + + &:hover { + background: $secondary-black; + transform: translateY(-1px); + } + } + + &.success { + background: $success-green; + color: white; + + &:hover { + background: darken($success-green, 10%); + transform: translateY(-1px); + } + } + + i { + font-size: 12px; + } + } +} + +// Responsive updates +@media (max-width: 768px) { + .canvas-main-area { + &.sidebar-collapsed { + width: 100%; + } + } + + .zoom-controls-new { + bottom: 20px; + left: 20px; + + .zoom-btn { + width: 40px; + height: 40px; + font-size: 14px; + } + } + + .page-actions-new { + top: 15px; + left: 15px; + + .action-btn { + padding: 8px 12px; + font-size: 12px; + } + } +} + +.page-actions { + position: fixed; + top: 60px; + right: 420px; + display: flex; + gap: 10px; + z-index: 2000; + + .action-btn { + padding: 10px 20px; + border-radius: 8px; + font-size: 14px; + transition: all 0.2s ease; + + &.primary { + background: #212529; + color: white; + + &:hover { + background: #495057; + } + } + + &.success { + background: #28a745; + color: white; + + &:hover { + background: #218838; + } + } + } +} + // Page Navigation Controls + .page-navigation { + position: fixed ; + bottom: 30px ; + left: 50% ; + transform: translateX(-50%) ; + display: flex ; + gap: 15px ; + background: rgba(255, 255, 255, 0.95) ; + padding: 15px 20px ; + border-radius: 50px ; + box-shadow: $shadow-heavy ; + backdrop-filter: blur(15px) ; + z-index: 1000 ; + border: 1px solid rgba(222, 226, 230, 0.8) ; + + .nav-btn { + background: linear-gradient(135deg, $primary-black 0%, $secondary-black 100%) ; + color: $white ; + border: none ; + padding: 12px 20px ; + border-radius: 25px ; + cursor: pointer ; + font-size: 14px ; + font-weight: 600 ; + transition: $transition-smooth ; + display: flex ; + align-items: center ; + gap: 8px ; + + &:hover:not(:disabled) { + transform: translateY(-2px) scale(1.05) ; + box-shadow: $shadow-medium ; + background: linear-gradient(135deg, $secondary-black 0%, $primary-black 100%) ; + } + + &:disabled { + opacity: 0.5 ; + cursor: not-allowed ; + background: $text-gray ; + } + + i { + font-size: 16px ; + } + } + + .page-indicator { + display: flex ; + align-items: center ; + background: $light-gray ; + padding: 12px 20px ; + border-radius: 25px ; + font-size: 14px ; + font-weight: 600 ; + color: $primary-black ; + border: 1px solid $border-gray ; + + .page-title { + margin: 0 10px ; + color: $secondary-black ; + } + } + } + + // Full Page Display + .page-display { + position: relative ; + width: 100% ; + min-height: 100vh ; + transform-origin: 0 0 ; + transition: transform 0.1s ease-out ; + background: $white ; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) ; + + // Connected Sections (no gaps) + .connected-sections { + width: 100% ; + + .section-wrapper { + width: 100% ; + position: relative ; + border: none ; + margin: 0 ; + padding: 0 ; + + // Section content fills completely + .section-content { + width: 100% ; + position: relative ; + background: transparent ; + + // Remove any default styling that creates gaps + > * { + margin: 0 ; + padding: 0 ; + } + } + + // Hover overlay for editing + .section-overlay { + position: absolute ; + top: 0 ; + left: 0 ; + right: 0 ; + bottom: 0 ; + background: rgba(0, 123, 255, 0.1) ; + border: 2px solid rgba(0, 123, 255, 0.3) ; + opacity: 0 ; + transition: $transition-fast ; + pointer-events: none ; + z-index: 10 ; + + .section-label { + position: absolute ; + top: 10px ; + left: 10px ; + background: rgba(0, 123, 255, 0.9) ; + color: $white ; + padding: 4px 8px ; + border-radius: 4px ; + font-size: 12px ; + font-weight: 600 ; + } + } + + &:hover .section-overlay { + opacity: 1 ; + } + + // Edit mode styling + &.editing { + .section-overlay { + background: rgba(255, 193, 7, 0.1) ; + border-color: rgba(255, 193, 7, 0.5) ; + opacity: 1 ; + + .section-label { + background: rgba(255, 193, 7, 0.9) ; + color: $primary-black ; + } + } + + .section-content { + outline: 2px solid #ffc107 ; + outline-offset: -2px ; + } + } + } + } + } + + // Loading State + .loading-overlay { + position: absolute ; + top: 0 ; + left: 0 ; + right: 0 ; + bottom: 0 ; + background: rgba(255, 255, 255, 0.95) ; + display: flex ; + flex-direction: column ; + align-items: center ; + justify-content: center ; + z-index: 100 ; + backdrop-filter: blur(5px) ; + + .spinner { + width: 60px ; + height: 60px ; + border: 4px solid $border-gray ; + border-top: 4px solid $primary-black ; + border-radius: 50% ; + animation: spin 1s linear infinite ; + margin-bottom: 20px ; + } + + .loading-text { + font-size: 16px ; + color: $text-gray ; + font-weight: 500 ; + } + } + } + .canvas-main-area { + position: relative; + z-index: 1; // Ensure content is above grid +} + +.infinite-grid { + z-index: 0; // Grid stays behind content + pointer-events: none; +} +.connected-sections { display: flex; flex-direction: column; - gap: 2rem; - padding: 1rem; + gap: 0 ; + + .section-wrapper { + width: 100%; + margin: 0 ; + padding: 0 ; + border-bottom: 1px solid #eee; + + &:last-child { + border-bottom: none; + } + + .section-content { + width: 100% ; + min-height: 100px; + position: relative; + } + } } -.page-card { - width: 100%; - margin-bottom: 2rem; - border: 1px solid #ddd; - border-radius: 8px; - background: white; -} -.loading-overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(255, 255, 255, 0.8); - display: flex; - justify-content: center; - align-items: center; - z-index: 1000; + + + // Zoom Controls + .zoom-controls { + // position: fixed ; + top: 20px ; + left: 20px ; + z-index: 1000 ; + display: flex ; + gap: 10px ; + background: rgba(255, 255, 255, 0.95) ; + padding: 12px ; + border-radius: 25px ; + box-shadow: $shadow-medium ; + backdrop-filter: blur(10px) ; + border: 1px solid rgba(222, 226, 230, 0.8) ; + width: fit-content ; + flex-direction: row ; + + .zoom-btn { + width: 40px ; + height: 40px ; + border: none ; + border-radius: 50% ; + background: linear-gradient(135deg, $primary-black 0%, $secondary-black 100%) ; + color: $white ; + cursor: pointer ; + display: flex ; + align-items: center ; + justify-content: center ; + transition: $transition-smooth ; + font-size: 14px ; + + &:hover { + transform: scale(1.1) ; + box-shadow: $shadow-medium ; + background: linear-gradient(135deg, $secondary-black 0%, $primary-black 100%) ; + } + + &:active { + transform: scale(0.95) ; + } + } + } } -.spinner { - width: 40px; - height: 40px; - border: 4px solid #f3f3f3; - border-top: 4px solid #3498db; - border-radius: 50%; - animation: spin 1s linear infinite; +// Modal Overlay for various dialogs +.modal-overlay { + position: fixed ; + top: 0 ; + left: 0 ; + width: 100% ; + height: 100% ; + background: rgba(0, 0, 0, 0.6) ; + z-index: 2000 ; + display: flex ; + align-items: center ; + justify-content: center ; + backdrop-filter: blur(5px) ; + animation: fadeIn 0.3s ease-out ; + + .modal-content { + background: $white ; + border-radius: 16px ; + max-width: 600px ; + width: 90% ; + max-height: 80vh ; + overflow-y: auto ; + box-shadow: $shadow-heavy ; + animation: modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) ; + + .modal-header { + padding: 25px 30px 20px ; + border-bottom: 2px solid $border-gray ; + display: flex ; + align-items: center ; + justify-content: space-between ; + background: linear-gradient(135deg, $light-gray 0%, $white 100%) ; + border-radius: 16px 16px 0 0 ; + + h3 { + margin: 0 ; + font-size: 18px ; + font-weight: 700 ; + color: $primary-black ; + } + + .close-btn { + background: none ; + border: none ; + color: $text-gray ; + cursor: pointer ; + padding: 8px ; + border-radius: 50% ; + transition: $transition-smooth ; + font-size: 16px ; + + &:hover { + background: $danger-red ; + color: $white ; + transform: rotate(90deg) scale(1.1) ; + } + } + } + + .modal-body { + padding: 25px ; + + .form-group { + margin-bottom: 20px ; + + label { + display: block ; + margin-bottom: 6px ; + font-weight: 600 ; + color: $secondary-black ; + font-size: 13px ; + } + + .form-control, textarea { + width: 100% ; + padding: 12px 16px ; + border: 2px solid $border-gray ; + border-radius: 8px ; + font-size: 14px ; + transition: $transition-smooth ; + font-family: inherit ; + + &:focus { + outline: none ; + border-color: $primary-black ; + box-shadow: 0 0 0 3px rgba(33, 37, 41, 0.1) ; + } + } + + textarea { + resize: vertical ; + min-height: 80px ; + } + } + } + + .modal-footer { + padding: 20px 25px ; + display: flex ; + gap: 12px ; + justify-content: flex-end ; + border-top: 1px solid $border-gray ; + background: linear-gradient(135deg, $white 0%, $light-gray 100%) ; + border-radius: 0 0 16px 16px ; + } + } +} + +// Animations +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +@keyframes modalSlideIn { + from { + transform: scale(0.8) translateY(-50px); + opacity: 0; + } + to { + transform: scale(1) translateY(0); + opacity: 1; + } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } -} - /* Sections container */ - .sections-container { - display: flex; - flex-direction: column; - gap: 16px; - padding: 16px; - min-height: 100px; - max-height: 600px; - overflow-y: auto; - scrollbar-width: thin; - // width: 1700px; +} - &::-webkit-scrollbar { - width: 6px; +// Responsive Design +@media (max-width: 1200px) { + .wireframe-editor { + .wireframe-controls-sidebar { + width: 320px ; + top: 50px; } - &::-webkit-scrollbar-track { - background: transparent; - } - - &::-webkit-scrollbar-thumb { - background-color: rgba(0,0,0,0.2); - border-radius: 3px; + .canvas-main-area { + width: calc(100% - 320px) ; } } +} - /* Section card */ - .section-card { - background: white; - border: 1px solid #eaeaea; - border-radius: 6px; - transition: all 0.2s; - position: relative; - box-shadow: 0 1px 3px rgba(0,0,0,0.08); +@media (max-width: 768px) { + .wireframe-editor { + .wireframe-controls-sidebar { + width: 100% ; + transform: translateX(100%) ; + transition: transform 0.3s ease ; - &:hover { - box-shadow: 0 2px 5px rgba(0,0,0,0.12); - border-color: #dadada; - } - } - - /* Section header */ - .section-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 8px 12px; - background: #f8f9fa; - border-bottom: 1px solid #eee; - border-radius: 6px 6px 0 0; - } - - .section-title { - font-size: 14px; - font-weight: 500; - color: #444; - } - - .section-actions { - display: flex; - gap: 6px; - opacity: 0; - transition: opacity 0.2s; - - &.visible { - opacity: 1; - } - } - - .section-btn { - background: none; - border: none; - cursor: pointer; - width: 26px; - height: 26px; - border-radius: 4px; - display: flex; - align-items: center; - justify-content: center; - - &:hover { - background: rgba(0,0,0,0.05); - } - } - - /* Section preview area */ - .section-preview { - padding: 12px; - min-height: 50px; - font-size: 14px; - word-break: break-word; - position: relative; - } - - /* Add section button */ - .add-section-btn { - position: absolute; - bottom: -10px; - left: 50%; - transform: translateX(-50%); - width: 24px; - height: 24px; - border-radius: 50%; - background: #2196f3; - color: white; - border: none; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - z-index: 5; - box-shadow: 0 2px 4px rgba(0,0,0,0.2); - - &:hover { - background: #1e88e5; - } - } - - /* Drag handle */ - .drag-handle { - position: absolute; - top: 50%; - left: -14px; - transform: translateY(-50%); - opacity: 0; - transition: opacity 0.2s; - width: 18px; - height: 36px; - background: #eee; - border-radius: 4px 0 0 4px; - display: flex; - align-items: center; - justify-content: center; - cursor: grab; - - .section-card:hover & { - opacity: 1; + &.mobile-open { + transform: translateX(0) ; + } } - &:active { - cursor: grabbing; + .canvas-main-area { + width: 100% ; + } + + .zoom-controls { + top: 10px ; + left: 10px ; + } + + .page-navigation { + bottom: 20px ; + padding: 12px 16px ; + + .nav-btn { + padding: 10px 16px ; + font-size: 13px ; + } } } +} - /* Empty sections state */ - .empty-sections { - display: flex; - justify-content: center; - align-items: center; - min-height: 100px; - border: 2px dashed #ddd; - border-radius: 6px; - } - - .add-first-section { - background: #f5f5f5; - border: 1px solid #ddd; - padding: 8px 16px; - border-radius: 4px; - cursor: pointer; - display: flex; - align-items: center; - gap: 6px; - - &:hover { - background: #eee; - } - } - - /* CDK drag styles */ - .cdk-drag-preview { - box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important; - opacity: 0.8; - border: 2px solid #2196f3; - } - - .cdk-drag-placeholder { - opacity: 0.3; - } - - .cdk-drag-animating { - transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); - } - - .sections-container.cdk-drop-list-dragging .section-card:not(.cdk-drag-placeholder) { - transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); - } - - /* Responsive adjustments */ - @media (max-width: 768px) { - .action-bar { - flex-direction: column; - height: auto; - padding: 10px; - gap: 10px; - } - - .left-controls, .right-controls { - width: 100%; - justify-content: space-between; - } - - .visual-editor-container { - height: calc(100vh - 110px); - } - } - - -/* Global modal styles (outside visual-editor scope) */ -.modal-overlay { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0,0,0,0.5); +.sidebar-collapse-toggle { + position: absolute; + top: -15px; + left: -15px; + width: 30px; + height: 30px; + background: $primary-black; + color: white; + border-radius: 50%; display: flex; align-items: center; justify-content: center; - z-index: 1000; -} - -.modal-content { - background: white; - border-radius: 8px; - width: 400px; - max-width: 90%; - box-shadow: 0 4px 20px rgba(0,0,0,0.2); -} - -.modal-header { - padding: 16px; - border-bottom: 1px solid #eee; -} - -.modal-title { - margin: 0; - font-size: 18px; - font-weight: 600; -} - -.modal-body { - padding: 16px; -} - -.form-group { - margin-bottom: 16px; -} - -.form-label { - display: block; - margin-bottom: 6px; - font-weight: 500; -} - -.form-control { - width: 100%; - padding: 8px 12px; - border: 1px solid #ddd; - border-radius: 4px; -} - -.modal-footer { - padding: 16px; - border-top: 1px solid #eee; - display: flex; - justify-content: flex-end; - gap: 12px; -} - -/* Section editing styles */ -.edit-overlay { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0,0,0,0.5); - display: flex; - align-items: center; - justify-content: center; - z-index: 1000; -} - -.edit-container { - background: white; - border-radius: 8px; - width: 80%; - max-width: 1000px; - height: 80%; - max-height: 800px; - display: flex; - flex-direction: column; - box-shadow: 0 4px 20px rgba(0,0,0,0.2); -} - -.edit-header { - padding: 16px; - border-bottom: 1px solid #eee; - display: flex; - justify-content: space-between; - align-items: center; -} - -.edit-title { - margin: 0; - font-size: 18px; - font-weight: 600; -} - -.edit-content { - flex: 1; - padding: 16px; - overflow: auto; -} - -.editable-html { - border: 1px solid #ddd; - border-radius: 4px; - padding: 16px; - min-height: 100%; - outline: none; -} - -.edit-footer { - padding: 16px; - border-top: 1px solid #eee; - display: flex; - justify-content: flex-end; - gap: 12px; + cursor: pointer; + z-index: 1600; + box-shadow: $shadow-medium; + transition: $transition-smooth; + + &:hover { + transform: scale(1.1); + background: $secondary-black; + } + + i { + font-size: 12px; + } } \ No newline at end of file diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.ts index 6b79aa3..029615c 100644 --- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.ts +++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.ts @@ -1,5 +1,5 @@ -import { Component, Input, OnInit, SecurityContext } from '@angular/core'; +import { Component, Input, OnInit, SecurityContext, ChangeDetectorRef } from '@angular/core'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { ActivatedRoute } from '@angular/router'; import { SiteTreeservice } from '../SiteBuilderGrid/SiteTree.service'; @@ -9,11 +9,44 @@ import * as sha256 from 'crypto-js/sha256'; import SHA256 from 'crypto-js/sha256'; import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; import { Download_Css } from './download-css'; +import { trigger, transition, style, animate, state } from '@angular/animations'; @Component({ selector: 'app-wireframe-renderer', templateUrl: './wireframe-renderer.component.html', - styleUrls: ['./wireframe-renderer.component.scss'] + styleUrls: ['./wireframe-renderer.component.scss'], + animations: [ + trigger('fadeIn', [ + transition(':enter', [ + style({ opacity: 0 }), + animate('200ms ease-out', style({ opacity: 1 })) + ]), + transition(':leave', [ + animate('200ms ease-in', style({ opacity: 0 })) + ]) + ]), + trigger('slideIn', [ + transition(':enter', [ + style({ transform: 'scale(0.9)', opacity: 0 }), + animate('300ms ease-out', style({ transform: 'scale(1)', opacity: 1 })) + ]), + transition(':leave', [ + animate('200ms ease-in', style({ transform: 'scale(0.9)', opacity: 0 })) + ]) + ]), + trigger('buttonHover', [ + state('void', style({ transform: 'translateY(0)' })), + state('hover', style({ transform: 'translateY(-2px)', boxShadow: '0 4px 8px rgba(0,0,0,0.2)' })) + ]), + trigger('focusBorder', [ + state('void', style({ borderColor: '#ccc' })), + state('focus', style({ borderColor: '#1976d2', boxShadow: '0 0 0 2px rgba(25,118,210,0.2)' })) + ]), + trigger('pulseOnHover', [ + state('void', style({ backgroundColor: 'transparent' })), + state('hover', style({ backgroundColor: 'rgba(0,0,0,0.05)' })) + ]) + ] }) export class WireframeRendererComponent implements OnInit { @@ -30,6 +63,13 @@ export class WireframeRendererComponent implements OnInit { sectionHtmls: Record> = {}; isLoading: boolean = true; sitename = ''; + + sidebarCollapsed: boolean = false; + +// Add toggle method + + +deployedUrl: string | null = null; // Added properties for grid and drag functionality hoveredPage: string | null = null; hoveredSection: string | null = null; @@ -39,7 +79,8 @@ export class WireframeRendererComponent implements OnInit { isPanning: boolean = false; lastX: number = 0; lastY: number = 0; - + isDragging = false; +startPanPosition = { x: 0, y: 0 }; // Edit mode properties editMode: boolean = false; editingSection: { page: string, section: string } | null = null; @@ -53,15 +94,68 @@ export class WireframeRendererComponent implements OnInit { newSectionDescription: string = ''; newSectionAfter: string | null = null; + + + sidebarOpen = false; + // Add this property to fix template errors + + // Page and section management + pageRenderOrder: string[] = []; + + // need help with all the errors + + // Style controls + liveStyles = { + fontSize: '', + fontWeight: '', + textAlign: '', + color: '#000000', + background: '#ffffff' + }; + + // Data arrays + fontSizes = ['12px', '14px', '16px', '18px', '20px', '24px', '28px']; + fontWeights = ['normal', 'bold', 'lighter']; + + sectionTypes = [ + { value: 'header', label: 'Header' }, + { value: 'hero', label: 'Hero' }, + { value: 'features', label: 'Features' }, + { value: 'gallery', label: 'Gallery' }, + { value: 'pricing', label: 'Pricing' }, + { value: 'testimonials', label: 'Testimonials' }, + { value: 'contact', label: 'Contact' }, + { value: 'footer', label: 'Footer' } + ]; + + // Mock data - replace with your actual data structures + navbarLinks: { [key: string]: any[] } = {}; + availablePages: { href: string, label: string }[] = []; + + zoomLevel = 1; + currentPageIndex = 0; + sectionOrderMap: { [key: string]: string[] } = {}; + + // Add these new properties + draggedSection: string | null = null; + lastDeletedSection: { page: string; section: string; content: SafeHtml } | null = null; + gridColumns = 12; + gridGap = 16; constructor( private siteTreeService: SiteTreeservice, private route: ActivatedRoute, private sanitizer: DomSanitizer, private toastr: ToastrService, + private cdr: ChangeDetectorRef ) { } - ngOnInit(): void { +// sectionOrderMap: Record = {}; + +// Initialize in ngOnInit() +ngOnInit(): void { + + this.sectionOrderMap = {}; this.id = this.route.snapshot.params['id']; console.log('id is: ', this.id); this.fetchTreeById(this.id); @@ -84,33 +178,17 @@ export class WireframeRendererComponent implements OnInit { } toggleSectionEditing(pageName: string, sectionKey: string, event: Event): void { - event.stopPropagation(); - const previewElement = event.target as HTMLElement; - const sectionPreview = previewElement.closest('.section-preview') as HTMLElement; - - if (sectionPreview) { - const isEditable = sectionPreview.getAttribute('contenteditable') === 'true'; - - // Toggle edit mode - sectionPreview.setAttribute('contenteditable', !isEditable + ''); - - if (!isEditable) { - // Add specific class for styling when editing - sectionPreview.classList.add('editing-active'); - - // Ensure CSS is available for editing - this.ensureCommonCssForAllSections(); - - sectionPreview.focus(); - } else { - // Remove editing class - sectionPreview.classList.remove('editing-active'); - - // Save changes - this.saveSectionChanges(pageName, sectionKey, sectionPreview.innerHTML); - } - } - } + event.stopPropagation(); + + if (this.isCurrentSectionEditing(sectionKey)) { + this.editingSection = null; + } else { + this.editingSection = { page: pageName, section: sectionKey }; + } + + // Force change detection + this.cdr.detectChanges(); +} verifyCssInSections(): void { // First ensure common CSS is in the head @@ -167,14 +245,16 @@ export class WireframeRendererComponent implements OnInit { } saveSectionChanges(pageName: string, sectionKey: string, html: string): void { // Remove temporary style tags -const cleanedHtml = html.replace(/]*>[\s\S]*?<\/style>/gi, ''); + const cleanedHtml = html.replace(/]*>[\s\S]*?<\/style>/gi, ''); -this.sectionHtmls[pageName][sectionKey] = - this.sanitizer.bypassSecurityTrustHtml(cleanedHtml); + // this.sectionHtmls[pageName][sectionKey] = + // this.sanitizer.bypassSecurityTrustHtml(cleanedHtml); -this.updateFullPageHtml(pageName); -this.toastr.success(`Updated section: ${sectionKey}`); -} + this.sectionHtmls[pageName][sectionKey] = cleanedHtml; + + this.updateFullPageHtml(pageName); + this.toastr.success(`Updated section: ${sectionKey}`); + } // Step 1: Get data from tree by ID fetchTreeById(id: number) { @@ -189,6 +269,8 @@ this.toastr.success(`Updated section: ${sectionKey}`); const maybeParsed = typeof res.model === 'string' ? JSON.parse(res.model) : res.model; this.jsonInput = JSON.stringify(maybeParsed, null, 2); this.sitename = res.name; + this.deployedUrl = res.deployedUrl; + console.log("Deployed Url "+res.deployedUrl); this.generatePromptsForAllSections(this.jsonInput); this.isLoading = false; } catch (err) { @@ -215,11 +297,15 @@ this.toastr.success(`Updated section: ${sectionKey}`); console.error('❌ Invalid JSON format', e); } } + + isCurrentSectionEditing(sectionKey: string): boolean { + const currentPage = this.getCurrentPageName(); + return this.editingSection?.page === currentPage && + this.editingSection?.section === sectionKey; +} // Step 3 - pageRenderOrder: string[] = []; // 🚀 New array to hold correct page order // 🔄 Maintain strict page and section render order - sectionOrderMap: Record = {}; // 🆕 Added to track section order missingHtmlPages: string[] = []; async processPages(treeJson: any,forceRegenerate = false) { @@ -227,7 +313,7 @@ this.toastr.success(`Updated section: ${sectionKey}`); for (const [pageName, sections] of Object.entries(treeJson)) { this.pageRenderOrder.push(pageName); // ✅ Track the order of pages - this.sectionOrderMap[pageName] = []; // ✅ Init section order array + this.sectionOrderMap[pageName] = this.sectionOrderMap[pageName] || []; console.log('process page is : ',pageName) @@ -448,6 +534,20 @@ HTML Only. No CSS. }); } } + nextPage(): void { + if (this.currentPageIndex < this.pageRenderOrder.length - 1) { + this.currentPageIndex++; + this.resetZoom(); + } +} + +previousPage(): void { + if (this.currentPageIndex > 0) { + this.currentPageIndex--; + this.resetZoom(); + } +} + // Process page sections async processPageSections(pageName: string, sectionMap: Record) { @@ -464,7 +564,9 @@ HTML Only. No CSS. sectionHtmls.push(html); // Store individual section HTML - this.sectionHtmls[pageName][sectionName] = this.sanitizer.bypassSecurityTrustHtml(html); + // this.sectionHtmls[pageName][sectionName] = this.sanitizer.bypassSecurityTrustHtml(html); + this.sectionHtmls[pageName][sectionName] = html + console.log("Processing Html in process page "+sectionHtmls) }); await Promise.all(htmlTasks); @@ -478,7 +580,7 @@ HTML Only. No CSS. ${pageName} + + + ${fullHtml} + + `; + + // const fullHtml = Object.values(this.pageSections[pageName]).join('\n'); + const blob = new Blob([finalHtml], { type: 'text/html' }); const url = window.URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; @@ -556,6 +746,7 @@ HTML Only. No CSS. link.click(); window.URL.revokeObjectURL(url); } +*/ // Upload HTML files buildWireframe(projId: number) { const pageHtmlMap: Record = {}; @@ -588,6 +779,8 @@ HTML Only. No CSS. }); } + + createHtmlFiles() { const pageHtmlMap: Record = {}; for (const [pageName, section] of Object.entries(this.pageSections)) { @@ -793,15 +986,15 @@ return new Promise((resolve) => { // Style properties activeEditTarget: string | null = null; - liveStyles = { - background: '', - color: '', - fontSize: '', - padding: '', - margin: '', - fontWeight: '', - textAlign: '', - }; + // liveStyles = { + // background: '', + // color: '', + // fontSize: '', + // padding: '', + // margin: '', + // fontWeight: '', + // textAlign: '', + // }; // Select editable element selectEditable(pageName: string) { @@ -1039,51 +1232,29 @@ return new Promise((resolve) => { // Handle section drop onSectionDrop(event: CdkDragDrop, pageName: string) { - // Get current section keys - const sectionKeys = this.getSectionKeys(pageName); - - // Move item in the array - moveItemInArray(sectionKeys, event.previousIndex, event.currentIndex); - - // Create new section map in correct order - const newSectionMap: Record = {}; - sectionKeys.forEach(key => { - newSectionMap[key] = this.allPagePrompts[pageName][key]; - }); - - // Update section map - this.allPagePrompts[pageName] = newSectionMap; - - // Update section HTMLs order - const newSectionHtmls: Record = {}; - sectionKeys.forEach(key => { - newSectionHtmls[key] = this.sectionHtmls[pageName][key]; - }); - - // Update section HTMLs - this.sectionHtmls[pageName] = newSectionHtmls; - - // Update the full page HTML - this.updateFullPageHtml(pageName); - - this.toastr.success(`Reordered sections in ${pageName}`); - } + const currentOrder = this.sectionOrderMap[pageName] || []; + moveItemInArray(currentOrder, event.previousIndex, event.currentIndex); + this.sectionOrderMap[pageName] = [...currentOrder]; + this.cdr.detectChanges(); + } + + // Zoom control methods - zoomIn() { - this.scale += 0.1; - this.scale = Math.min(this.scale, 2); // Max zoom 200% - } - - zoomOut() { - this.scale -= 0.1; - this.scale = Math.max(this.scale, 0.5); // Min zoom 50% - } + zoomIn() { + this.zoomLevel = Math.min(2, this.zoomLevel + 0.1); + } + + zoomOut() { + this.zoomLevel = Math.max(0.5, this.zoomLevel - 0.1); + } + + selectedNavbarPage: string = ''; - navbarLinks: Record = {}; - availablePages: { label: string, href: string }[] = []; + // navbarLinks: Record = {}; + // availablePages: { label: string, href: string }[] = []; // Select Navbar Section selectNavbar(pageName: string) { @@ -1132,6 +1303,81 @@ return new Promise((resolve) => { this.navbarLinks[pageName].splice(index, 1); } + toggleSidebar() { + this.sidebarCollapsed = !this.sidebarCollapsed; + this.updateGridLayout(); + } + + private updateGridLayout() { + setTimeout(() => { + const canvas = document.querySelector('.canvas-main-area') as HTMLElement; + if (canvas) { + canvas.style.transition = 'margin 0.3s ease'; + canvas.style.marginLeft = this.sidebarCollapsed ? '0' : '300px'; + } + }, 50); + } + + + + // Export project as JSON file + exportProject(): void { + const exportData = { + sitename: this.sitename, + jsonInput: this.jsonInput, + allPagePrompts: this.allPagePrompts, + sectionHtmls: this.sectionHtmls, + pageSections: this.pageSections, + sectionOrderMap: this.sectionOrderMap, + pageRenderOrder: this.pageRenderOrder, + }; + const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' }); + const url = window.URL.createObjectURL(blob); + const link = document.createElement('a'); + link.href = url; + link.download = `${this.sitename || 'project'}.json`; + link.click(); + window.URL.revokeObjectURL(url); + this.toastr.success('Project exported as JSON'); + } + + // Import project from JSON file + importProject(): void { + const input = document.createElement('input'); + input.type = 'file'; + input.accept = '.json,application/json'; + input.onchange = async (event: any) => { + const file = event.target.files[0]; + if (!file) return; + const reader = new FileReader(); + reader.onload = async (e: any) => { + try { + const data = JSON.parse(e.target.result); + this.sitename = data.sitename || ''; + this.jsonInput = data.jsonInput || ''; + this.allPagePrompts = data.allPagePrompts || {}; + this.sectionHtmls = data.sectionHtmls || {}; + this.pageSections = data.pageSections || {}; + this.sectionOrderMap = data.sectionOrderMap || {}; + this.pageRenderOrder = data.pageRenderOrder || []; + this.toastr.success('Project imported successfully'); + // Optionally, re-render or trigger change detection + await this.processAllPagesLiveUpdate(); + } catch (err) { + this.toastr.error('Failed to import project: Invalid JSON'); + } + }; + reader.readAsText(file); + }; + input.click(); + } + + // Toggle preview mode (simple implementation) + previewMode(): void { + this.sidebarOpen = false; + this.toastr.info('Preview mode toggled'); + } + // Apply Changes to navbar applyNavbarChanges(pageName: string): void { const links = this.navbarLinks[pageName] || []; @@ -1160,12 +1406,9 @@ return new Promise((resolve) => { this.pageSections[pageName].FullPage = this.sanitizer.bypassSecurityTrustHtml(updatedHtml); this.toastr.success('Navbar updated successfully'); } - - resetZoom() { - this.scale = 1; - this.panX = 0; - this.panY = 0; - } + resetZoom() { + this.zoomLevel = 1; + } // Get transform CSS for pan and zoom getTransform(): string { @@ -1174,51 +1417,27 @@ return new Promise((resolve) => { // Pan methods startPan(event: MouseEvent): void { - // Start panning with any mouse button or when space key is pressed - if (event.button === 0 || event.button === 1 || event.ctrlKey || event.metaKey) { - // Don't start panning if clicking on an editable element - const target = event.target as HTMLElement; - if (target.hasAttribute('contenteditable') && target.getAttribute('contenteditable') === 'true') { - return; - } - - this.isPanning = true; - this.lastX = event.clientX; - this.lastY = event.clientY; - - // Change cursor to indicate panning - const canvasBoundary = document.querySelector('.canvas-boundary') as HTMLElement; - if (canvasBoundary) { - canvasBoundary.style.cursor = 'grabbing'; - } - - event.preventDefault(); - } - } - - doPan(event: MouseEvent) { - if (!this.isPanning) return; - - const deltaX = (event.clientX - this.lastX) / this.scale; - const deltaY = (event.clientY - this.lastY) / this.scale; - - this.panX += deltaX; - this.panY += deltaY; - - this.lastX = event.clientX; - this.lastY = event.clientY; - } - - endPan(): void { -if (this.isPanning) { - this.isPanning = false; - - // Restore cursor - const canvasBoundary = document.querySelector('.canvas-boundary') as HTMLElement; - if (canvasBoundary) { - canvasBoundary.style.cursor = 'move'; - } + this.isDragging = true; + this.startPanPosition = { x: event.clientX, y: event.clientY }; + event.preventDefault(); } + + +doPan(event: MouseEvent): void { + if (!this.isDragging) return; + + const deltaX = event.clientX - this.startPanPosition.x; + const deltaY = event.clientY - this.startPanPosition.y; + + this.panX += deltaX; + this.panY += deltaY; + + this.startPanPosition = { x: event.clientX, y: event.clientY }; + this.cdr.detectChanges(); +} + +endPan(): void { + this.isDragging = false; } // Edit section @@ -1256,17 +1475,26 @@ if (this.isPanning) { onSectionEdit(event: any) { // This is handled in saveSectionEdit } +copyPageToClipboard(): void { + const currentPage = this.getCurrentPageName(); + const html = this.pageSections[currentPage]?.FullPage?.toString() || ''; + navigator.clipboard.writeText(html).then(() => { + this.toastr.success(`Copied ${currentPage} to clipboard`); + }); +} - handleDirectContentEdit(event: FocusEvent, pageName: string, sectionKey: string): void { - const element = event.target as HTMLElement; - if (element.hasAttribute('contenteditable') && element.getAttribute('contenteditable') === 'true') { - // Save the content when the element loses focus - this.saveSectionChanges(pageName, sectionKey, element.innerHTML); - - // Turn off contenteditable - element.setAttribute('contenteditable', 'false'); - } - } +downloadCurrentPage(): void { + const currentPage = this.getCurrentPageName(); + this.downloadHtml(currentPage); +} + +// Update existing download method + handleDirectContentEdit(event: Event, page: string, section: string) { + const target = event.target as HTMLElement; + const content = target.innerHTML; + this.sectionHtmls[page][section] = this.sanitizer.bypassSecurityTrustHtml(content); + this.updateFullPageHtml(page); + } // Close edit mode closeEditMode() { @@ -1337,6 +1565,13 @@ if (this.isPanning) { }; } + // Add this to initialize the current page + + +getPageTransform(): string { + return `scale(${this.scale})`; +} + refreshAllSectionCSS(): void { // Refresh CSS in all section previews for (const pageName of this.objectKeys(this.pageSections)) { @@ -1356,7 +1591,7 @@ if (this.isPanning) { // Ensure CSS is applied to the DOM this.ensureCommonCssForAllSections(); - this.toastr.success('Refreshed CSS for all sections'); + // this.toastr.success('Refreshed CSS for all sections'); } // Remove section @@ -1369,9 +1604,171 @@ if (this.isPanning) { // Update the full page HTML this.updateFullPageHtml(pageName); - this.toastr.success(`Removed section: ${sectionKey}`); + // this.toastr.success(`Removed section: ${sectionKey}`); } } + + // Modal state for new page + showNewPageModal: boolean = false; + + // Track current page index for navigation and actions + // currentPageIndex: number = 0; + + // Used for new page creation + newPageName: string = ''; + + // Add a new page (shows modal) + addNewPage(): void { + this.showNewPageModal = true; + this.newPageName = ''; + } + + // Close the new page modal + closeNewPageModal(): void { + this.showNewPageModal = !this.showNewPageModal; + this.newPageName = ''; + } + + // Confirm adding a new page + confirmAddNewPage(): void { + if (!this.newPageName.trim()) { + this.toastr.error('Please enter a page name'); + return; + } + if (this.pageRenderOrder.includes(this.newPageName)) { + this.toastr.error('Page name already exists'); + return; + } + this.pageRenderOrder.push(this.newPageName); + this.allPagePrompts[this.newPageName] = {}; + this.sectionHtmls[this.newPageName] = {}; + this.pageSections[this.newPageName] = { FullPage:''}; + this.sectionOrderMap[this.newPageName] = []; + this.closeNewPageModal(); + this.toastr.success(`Added new page: ${this.newPageName}`); + } + + // Duplicate the current page + duplicateCurrentPage(): void { + const currentPage = this.getCurrentPage(); + if (!currentPage) { + this.toastr.error('No page selected to duplicate'); + return; + } + let newPageName = currentPage + '_Copy'; + let count = 1; + while (this.pageRenderOrder.includes(newPageName)) { + newPageName = `${currentPage}_Copy${count++}`; + } + // Deep clone all structures + this.pageRenderOrder.push(newPageName); + this.allPagePrompts[newPageName] = JSON.parse(JSON.stringify(this.allPagePrompts[currentPage])); + this.sectionHtmls[newPageName] = JSON.parse(JSON.stringify(this.sectionHtmls[currentPage])); + this.pageSections[newPageName] = { FullPage: this.pageSections[currentPage].FullPage }; + this.sectionOrderMap[newPageName] = [...(this.sectionOrderMap[currentPage] || [])]; + this.toastr.success(`Duplicated page: ${currentPage}`); + } + + // Delete the current page + deleteCurrentPage(): void { + const currentPage = this.getCurrentPage(); + if (!currentPage) { + this.toastr.error('No page selected to delete'); + return; + } + if (this.pageRenderOrder.length === 1) { + this.toastr.error('At least one page must remain'); + return; + } + if (confirm(`Are you sure you want to delete the page "${currentPage}"?`)) { + // Remove from all structures + this.pageRenderOrder = this.pageRenderOrder.filter(p => p !== currentPage); + delete this.allPagePrompts[currentPage]; + delete this.sectionHtmls[currentPage]; + delete this.pageSections[currentPage]; + delete this.sectionOrderMap[currentPage]; + // Adjust currentPageIndex if needed + if (this.currentPageIndex >= this.pageRenderOrder.length) { + this.currentPageIndex = this.pageRenderOrder.length - 1; + } + this.toastr.success(`Deleted page: ${currentPage}`); + } + } + + getGridSize(): string { + // Example: returns a 20px grid, adjust as needed + return `translate(${this.panX}px, ${this.panY}px) scale(${this.scale})`; +} + + // Add a new section to the current page + addNewSectionToCurrentPage() { + const page = this.getCurrentPageName(); + if (!page) return; + + const newSection = `section-${Date.now()}`; + this.sectionOrderMap[page] = [...(this.sectionOrderMap[page] || []), newSection]; + this.sectionHtmls[page][newSection] = this.sanitizer.bypassSecurityTrustHtml('
New Section
'); + this.cdr.detectChanges(); + } + // Get the transform for the grid (alias for getTransform) + getGridTransform(): string { + return `translate(${this.panX}px, ${this.panY}px) scale(${this.scale})`; +} + +deleteSection(page: string, section: string) { + this.lastDeletedSection = { + page, + section, + content: this.sectionHtmls[page][section] + }; + + this.sectionOrderMap[page] = this.sectionOrderMap[page].filter(s => s !== section); + delete this.sectionHtmls[page][section]; + this.cdr.detectChanges(); + } + +// Add this method to fix template errors + + + +// Add this method to your component +getCurrentPageSections(): string[] { + const currentPage = this.getCurrentPageName(); + return currentPage ? + this.sectionOrderMap[currentPage] || Object.keys(this.sectionHtmls[currentPage] || {}) + : []; +} + +// Also add this helper method if missing +getCurrentPageName(): string { + return this.pageRenderOrder[this.currentPageIndex] || ''; +} + // Handle mouse wheel for zooming + onWheel(event: WheelEvent): void { + if (event.ctrlKey || event.metaKey) { + event.preventDefault(); + if (event.deltaY < 0) { + this.zoomIn(); + } else { + this.zoomOut(); + } + } + } + + // Get the current page name + getCurrentPage(): string | null { + if (this.pageRenderOrder.length === 0) return null; + this.currentPageIndex = Math.min(this.currentPageIndex, this.pageRenderOrder.length - 1); + return this.pageRenderOrder[this.currentPageIndex]; +} + +// Update the canvas transform methods + + + // Detect if the device is mobile (simple check) + get isMobile(): boolean { + return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); + } // Open new section modal addNewSection(pageName: string, afterSection: string = null) { @@ -1390,6 +1787,16 @@ if (this.isPanning) { this.newSectionType = ''; this.newSectionDescription = ''; } + + undoDelete() { + if (this.lastDeletedSection) { + const { page, section, content } = this.lastDeletedSection; + this.sectionOrderMap[page].push(section); + this.sectionHtmls[page][section] = content; + this.lastDeletedSection = null; + this.cdr.detectChanges(); + } + } // Confirm adding new section async confirmAddSection() { @@ -1471,9 +1878,15 @@ if (this.isPanning) { this.newSectionType = ''; this.newSectionDescription = ''; } + + } + + + + // // wireframe-renderer.component.ts // import { Component, Input, OnInit } from '@angular/core'; // import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.html b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.html index a07697e..2e31e84 100644 --- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.html +++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.html @@ -58,8 +58,7 @@ - -
+
@@ -77,11 +76,6 @@
- - -
- - - - - -
-
- + +
+ + +

Generate Site Structure

- +

Describe your website structure in plain language:

- + + +
+ + +
+ +
- - + + +
+
+ + +
+ +
+ + +
+ +
+
🧠
+
+ + +

+ Thinking... +

+ + +

Crafting your perfect site structure

+ + +
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+ + +
+ +
+
⚠️
+
+ + +

Something went wrong

+ +

+ We couldn't generate your site structure. Please check your input and try again. +

+ + +
+ +
\ No newline at end of file diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.scss b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.scss index 4f8c70b..19c1faa 100644 --- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.scss +++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.scss @@ -140,7 +140,411 @@ // } +.modal-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0,0,0,0.75); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; + backdrop-filter: blur(8px); + animation: fadeIn 0.3s ease-out; +} +/* Main Popup Content */ +.popup-content { + width: 600px; + max-height: none; + padding: 24px; + box-shadow: 0 8px 24px rgba(0,0,0,0.25); + border-radius: 8px; + background-color: snow; + animation: slideIn 0.4s ease-out; +} + +.close-btn { + background: transparent; + border: none; + color: #666; + font-size: 24px; + cursor: pointer; + padding: 4px; + height: 36px; + width: 36px; + border-radius: 50%; + transition: all 0.2s ease; + display: flex; + align-items: center; + justify-content: center; +} + +.close-btn:hover { + background: #f0f0f0; + color: #333; +} + +.input-textarea { + width: 100%; + margin-bottom: 20px; + font-family: inherit; + resize: vertical; + transition: border 0.3s ease; + box-shadow: 0 2px 4px rgba(0,0,0,0.05); + padding: 12px; + border: 1px solid #ddd; + border-radius: 6px; + font-size: 14px; + box-sizing: border-box; +} + +.input-textarea:focus { + border-color: #1976d2; + outline: none; + box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1); +} + +.page-select { + width: 100%; + padding: 8px 12px; + font-size: 15px; + border-radius: 4px; + border: 1px solid #ccc; + background-color: white; + color: #333; +} + +.cancel-btn { + padding: 8px 16px; + background: #f5f5f5; + color: #333; + border: 1px solid #ddd; + border-radius: 4px; + cursor: pointer; + transition: all 0.2s ease; +} + +.cancel-btn:hover { + background: #e0e0e0; + transform: translateY(-1px); +} + +.generate-btn { + padding: 8px 18px; + background: #1976d2; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + transition: all 0.2s ease; + box-shadow: 0 2px 4px rgba(0,0,0,0.2); +} + +.generate-btn:hover { + background: #1565c0; + transform: translateY(-1px); + box-shadow: 0 4px 8px rgba(0,0,0,0.3); +} + +/* Loading Container */ +.loading-container { + width: 400px; + padding: 40px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border-radius: 16px; + box-shadow: 0 20px 40px rgba(0,0,0,0.3); + text-align: center; + position: relative; + overflow: hidden; + animation: slideIn 0.4s ease-out; +} + +.bg-pattern { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity: 0.1; + background-image: repeating-linear-gradient( + 45deg, + transparent, + transparent 10px, + rgba(255,255,255,0.1) 10px, + rgba(255,255,255,0.1) 20px + ); +} + +.loader-content { + position: relative; + z-index: 2; +} + +.thinking-icon { + width: 80px; + height: 80px; + margin: 0 auto 24px; + background: rgba(255,255,255,0.15); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 8px 32px rgba(0,0,0,0.2); + animation: spinPulse 2s ease-in-out infinite; +} + +.brain-emoji { + font-size: 36px; + animation: brainThink 1.5s ease-in-out infinite; +} + +.thinking-text { + color: white; + font-size: 28px; + font-weight: 600; + margin-bottom: 16px; + text-shadow: 0 2px 4px rgba(0,0,0,0.3); +} + +.dots { + animation: typewriter 1.5s infinite; +} + +.thinking-subtitle { + color: rgba(255,255,255,0.9); + font-size: 16px; + margin-bottom: 32px; +} + +.progress-dots { + display: flex; + justify-content: center; + gap: 8px; + margin-bottom: 24px; +} + +.dot { + width: 12px; + height: 12px; + border-radius: 50%; + background: rgba(255,255,255,0.4); + animation: dotPulse 1.4s infinite ease-in-out; +} + +.dot-1 { animation-delay: 0s; } +.dot-2 { animation-delay: 0.2s; } +.dot-3 { animation-delay: 0.4s; } +.dot-4 { animation-delay: 0.6s; } +.dot-5 { animation-delay: 0.8s; } + +.particles { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + pointer-events: none; +} + +.particle { + position: absolute; + border-radius: 50%; + background: rgba(255,255,255,0.6); + animation: float 3s infinite ease-in-out; +} + +.particle-1 { + width: 4px; + height: 4px; + top: 20%; + left: 15%; + animation-duration: 3s; +} + +.particle-2 { + width: 6px; + height: 6px; + background: rgba(255,255,255,0.4); + top: 60%; + right: 20%; + animation-duration: 4s; + animation-direction: reverse; +} + +.particle-3 { + width: 3px; + height: 3px; + background: rgba(255,255,255,0.7); + bottom: 30%; + left: 25%; + animation-duration: 2.5s; +} + +.particle-4 { + width: 5px; + height: 5px; + background: rgba(255,255,255,0.5); + top: 40%; + right: 15%; + animation-duration: 3.5s; + animation-direction: reverse; +} + +/* Error Container */ +.error-container { + width: 450px; + padding: 32px; + background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%); + border-radius: 16px; + box-shadow: 0 20px 40px rgba(0,0,0,0.3); + text-align: center; + position: relative; + animation: slideIn 0.4s ease-out; +} + +.error-icon { + width: 80px; + height: 80px; + margin: 0 auto 24px; + background: rgba(255,255,255,0.15); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + animation: errorShake 0.5s ease-in-out; +} + +.error-title { + color: white; + font-size: 24px; + font-weight: 600; + margin-bottom: 12px; + text-shadow: 0 2px 4px rgba(0,0,0,0.3); +} + +.error-message { + color: rgba(255,255,255,0.9); + font-size: 16px; + margin-bottom: 32px; + line-height: 1.5; +} + +.retry-btn { + padding: 12px 20px; + background: rgba(255,255,255,0.2); + color: white; + border: 1px solid rgba(255,255,255,0.3); + border-radius: 8px; + cursor: pointer; + transition: all 0.2s ease; + backdrop-filter: blur(10px); +} + +.retry-btn:hover { + background: rgba(255,255,255,0.3); + transform: translateY(-1px); +} + +.error-close-btn { + padding: 12px 20px; + background: white; + color: #ee5a52; + border: none; + border-radius: 8px; + cursor: pointer; + transition: all 0.2s ease; + font-weight: 500; +} + +.error-close-btn:hover { + background: #f8f8f8; + transform: translateY(-1px); +} + +/* Keyframe Animations */ +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes slideIn { + from { + opacity: 0; + transform: translateY(30px) scale(0.95); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +@keyframes spinPulse { + 0%, 100% { + transform: rotate(0deg) scale(1); + box-shadow: 0 8px 32px rgba(0,0,0,0.2); + } + 50% { + transform: rotate(180deg) scale(1.1); + box-shadow: 0 12px 48px rgba(0,0,0,0.3); + } +} + +@keyframes brainThink { + 0%, 100% { transform: scale(1) rotate(0deg); } + 25% { transform: scale(1.1) rotate(-5deg); } + 75% { transform: scale(0.95) rotate(5deg); } +} + +@keyframes typewriter { + 0%, 20% { opacity: 1; } + 50% { opacity: 0; } + 80%, 100% { opacity: 1; } +} + +@keyframes dotPulse { + 0%, 20%, 80%, 100% { + transform: scale(1); + background: rgba(255,255,255,0.4); + } + 40% { + transform: scale(1.5); + background: rgba(255,255,255,0.9); + } +} + +@keyframes float { + 0%, 100% { + transform: translateY(0px) rotate(0deg); + opacity: 0.6; + } + 50% { + transform: translateY(-20px) rotate(180deg); + opacity: 1; + } +} + +@keyframes errorShake { + 0%, 100% { transform: translateX(0); } + 25% { transform: translateX(-10px); } + 75% { transform: translateX(10px); } +} + +/* Responsive Design */ +@media (max-width: 768px) { + .popup-content, .loading-container, .error-container { + width: 90%; + margin: 0 20px; + } +} + +/* Your existing styles */ .controls { margin-bottom: 20px; } @@ -171,51 +575,6 @@ background-color: #1565c0; } -.toolbar { - display: flex; - gap: 10px; - align-items: flex-start; - padding: 1rem; - background-color: #f7f7f7; -} - -textarea { - width: 300px; - height: 120px; - font-family: monospace; - padding: 10px; - border-radius: 8px; - border: 1px solid #ccc; -} - -button { - padding: 10px 20px; - background-color: #3f51b5; - color: white; - border: none; - border-radius: 6px; - cursor: pointer; - transition: background-color 0.3s ease; -} - -button:hover { - background-color: #303f9f; -} - -mat-tab-group { - margin: 1rem; -} - -.tab-content { - padding: 1rem; - background-color: #fafafa; - border: 1px solid #ddd; - border-radius: 10px; - min-height: 400px; -} - - - .active-tab { border-bottom: 2px solid #007bff; color: #007bff; @@ -228,30 +587,16 @@ mat-tab-group { border: none; border-bottom: 2px solid transparent; cursor: pointer; - color: black; /* 👈 Text color black */ + color: black; font-weight: bold; } .tab-button.active { border-bottom: 2px solid #000; background: #e0e0e0; - color: black; /* 👈 Ensure active tab also stays black */ + color: black; } - -.editor-container { - position: relative; /* 🔑 Important to contain absolute button */ - max-width: 1200px; - margin: 0 auto; - font-family: 'Segoe UI', sans-serif; - padding: 20px; - background-color: #ffffff; -} -.modal-overlay *{ - z-index: 1000; -} - - :host { --zoom-level: 1; --primary-color: #2196f3; @@ -262,5 +607,4 @@ mat-tab-group { --level: 0; --primary-color: #2196f3; --border-color: #e2e8f0; -} - +} \ No newline at end of file diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.ts index 3230659..3138254 100644 --- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.ts +++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.ts @@ -122,9 +122,11 @@ export class TreeVisualizerComponent { }`; treeData: any = null; rawInputText: string = `make a website , where we can login , sign up. -inside that there is a menu of icard where we can add a icard detail iacardname, description -after click this icard inside we upload excel of student data, icard template, after click convert it fetch all data of excel and replace the key value of icard template..`; + inside that there is a menu of icard where we can add a icard detail iacardname, description + after click this icard inside we upload excel of student data, icard template, after click convert it fetch all data of excel and replace the key value of icard template..`; id: number; + selectedPageRange: string = '5-10'; // 👈 Default value + constructor(private treeService: treeVisualizerService, private siteTreeService: SiteTreeservice, @@ -143,7 +145,41 @@ after click this icard inside we upload excel of student data, icard template, a } +// Add these properties to your component class +isLoading = false; +showError = false; +// Method to handle the enhanced generate flow +generateJsonWithLoading() { + this.isLoading = true; + this.showError = false; + + // Your existing generateJson logic here + // Replace with your actual API call + setTimeout(() => { + // Success case + this.isLoading = false; + this.showPopup = false; + this.activeTab = 'sitemap'; + + // For error case, use this instead: + // this.isLoading = false; + // this.showError = true; + }, 3000); +} + +// Enhanced close method +closePopup() { + this.showPopup = false; + this.isLoading = false; + this.showError = false; +} + +// Retry method for error state +retryGeneration() { + this.showError = false; + this.generateJsonWithLoading(); +} convertJson() { try { const parsed = JSON.parse(this.inputJson); @@ -223,7 +259,7 @@ after click this icard inside we upload excel of student data, icard template, a generateJson() { console.log('genearte json start ') - const suffix = ` You are a JSON structure generator for website page hierarchies. + const suffix = `You are a JSON structure generator for website page hierarchies. You are a JSON structure generator for website UI and sitemap hierarchy.