temp2-back

force-app/main/default/lwc/developmentPage/developmentPage.css

@@ -5,10 +5,12 @@
     width: 100vw;
     height: 100vh;
     background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
-    z-index: 9999;
+    z-index: 99999;
     overflow-y: auto;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     color: #ffffff;
+    display: flex;
+    flex-direction: column;
 }
 
 .dev-header {
@@ -46,30 +48,13 @@
     letter-spacing: 1px;
 }
 
-.close-dev-btn {
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    background: #ff4757;
-    color: white;
-    border: none;
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    font-size: 1.5rem;
-    cursor: pointer;
-    transition: all 0.3s ease;
-}
-
-.close-dev-btn:hover {
-    background: #ff3742;
-    transform: scale(1.1);
-}
 
 .dev-content {
     padding: 30px;
     max-width: 1200px;
     margin: 0 auto;
+    flex: 1;
+    overflow-y: auto;
 }
 
 .dev-section {

force-app/main/default/lwc/developmentPage/developmentPage.js

@@ -1,7 +1,7 @@
 import { LightningElement, track } from 'lwc';
 
 export default class DevelopmentPage extends LightningElement {
-    @track showDevPage = false;
+    @track showDevPage = true; // Always visible by default
     @track currentStep = 1;
     @track selectedTemplateId = '';
     @track selectedPropertyId = '';
@@ -9,9 +9,9 @@ export default class DevelopmentPage extends LightningElement {
     @track currentTimestamp = '';
     @track debugMode = false;
     
-    // V-key click counter
+    // K-key click counter for closing development mode
-    vKeyCount = 0;
+    kKeyCount = 0;
-    vKeyTimeout = null;
+    kKeyTimeout = null;
     
     connectedCallback() {
         this.updateTimestamp();
@@ -20,8 +20,8 @@ export default class DevelopmentPage extends LightningElement {
     
     disconnectedCallback() {
         this.removeKeyListener();
-        if (this.vKeyTimeout) {
+        if (this.kKeyTimeout) {
-            clearTimeout(this.vKeyTimeout);
+            clearTimeout(this.kKeyTimeout);
         }
     }
     
@@ -34,36 +34,28 @@ export default class DevelopmentPage extends LightningElement {
     }
     
     handleKeyPress(event) {
-        // Only listen for 'V' key (case insensitive)
+        // Only listen for 'K' key (case insensitive) - completely silent
-        if (event.key.toLowerCase() === 'v') {
+        if (event.key.toLowerCase() === 'k') {
-            this.vKeyCount++;
+            this.kKeyCount++;
             
             // Clear any existing timeout
-            if (this.vKeyTimeout) {
+            if (this.kKeyTimeout) {
-                clearTimeout(this.vKeyTimeout);
+                clearTimeout(this.kKeyTimeout);
             }
             
             // Reset counter after 3 seconds of inactivity
-            this.vKeyTimeout = setTimeout(() => {
+            this.kKeyTimeout = setTimeout(() => {
-                this.vKeyCount = 0;
+                this.kKeyCount = 0;
             }, 3000);
             
-            // Hide dev page after 4 V key presses
+            // Close dev page after 5 K key presses (silent)
-            if (this.vKeyCount >= 4) {
+            if (this.kKeyCount >= 5) {
                 this.showDevPage = false;
-                this.vKeyCount = 0; // Reset counter
+                this.kKeyCount = 0; // Reset counter
             }
         }
     }
     
-    closeDevPage() {
-        this.showDevPage = false;
-        this.vKeyCount = 0;
-        if (this.vKeyTimeout) {
-            clearTimeout(this.vKeyTimeout);
-        }
-    }
-    
     updateTimestamp() {
         this.currentTimestamp = new Date().toLocaleString();
     }

force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css

@@ -14015,4 +14015,198 @@ img[draggable="true"] {
     }
 }
 
+/* ===== MODAL ANIMATIONS ===== */
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-20px) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+.data-type-option:hover {
+    border-color: #007bff !important;
+    background: #f0f8ff !important;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0,123,255,0.15);
+}
+
+.close-btn:hover {
+    background: #f5f5f5 !important;
+    color: #333 !important;
+}
+
+.btn:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+}
+
+/* ===== PDF GENERATION STYLING ===== */
+@media print {
+    .brochure-page {
+        page-break-before: always;
+        margin: 0;
+        padding: 0;
+        width: 210mm;
+        height: 297mm;
+        overflow: hidden;
+        display: flex !important;
+        flex-direction: column !important;
+        background: white !important;
+        box-shadow: 0 0 10px rgba(0,0,0,0.1) !important;
+    }
+    
+    /* Ensure newly added pages maintain A4 dimensions */
+    .brochure-page.a4 {
+        width: 210mm !important;
+        height: 297mm !important;
+        margin: 0 !important;
+        padding: 0 !important;
+        overflow: hidden !important;
+        display: flex !important;
+        flex-direction: column !important;
+        background: white !important;
+        box-shadow: 0 0 10px rgba(0,0,0,0.1) !important;
+    }
+    
+    /* Ensure all brochure pages have consistent A4 dimensions */
+    .brochure {
+        width: 210mm !important;
+        height: 297mm !important;
+        margin: 0 !important;
+        padding: 0 !important;
+        overflow: hidden !important;
+        display: flex !important;
+        flex-direction: column !important;
+        background: white !important;
+        box-shadow: 0 0 10px rgba(0,0,0,0.1) !important;
+    }
+    
+    /* Page break handling */
+    .page-break {
+        page-break-before: always !important;
+        height: 0 !important;
+        margin: 0 !important;
+        padding: 0 !important;
+    }
+    
+    .brochure-page:first-child {
+        page-break-before: avoid;
+    }
+    
+    .page-header {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+        color: white !important;
+        padding: 20px !important;
+        margin-bottom: 20px !important;
+        border-radius: 10px !important;
+        text-align: center !important;
+    }
+    
+    .page-content {
+        padding: 20px !important;
+        background: white !important;
+        border-radius: 10px !important;
+        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
+        margin-bottom: 20px !important;
+    }
+    
+    .page-footer {
+        background: #003366 !important;
+        color: white !important;
+        padding: 20px !important;
+        display: flex !important;
+        justify-content: space-between !important;
+        align-items: center !important;
+        margin-top: 20px !important;
+        position: absolute !important;
+        bottom: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+    }
+    
+    /* Template-specific footer colors for PDF */
+    .brochure-page[data-template="modern-home-template"] .page-footer {
+        background: #003366 !important;
+    }
+    
+    .brochure-page[data-template="grand-oak-villa-template"] .page-footer {
+        background: #1a1a1a !important;
+    }
+    
+    .brochure-page[data-template="serenity-house-template"] .page-footer {
+        background: #1a1a1a !important;
+    }
+    
+    .brochure-page[data-template="luxury-mansion-template"] .page-footer {
+        background: #1a1a1a !important;
+    }
+    
+    .content-section h2 {
+        color: #495057 !important;
+        border-bottom: 2px solid #e9ecef !important;
+        padding-bottom: 10px !important;
+        margin-bottom: 20px !important;
+    }
+    
+    .content-section p {
+        color: #6c757d !important;
+        line-height: 1.6 !important;
+        margin-bottom: 15px !important;
+    }
+    
+    .features-grid {
+        display: grid !important;
+        grid-template-columns: repeat(2, 1fr) !important;
+        gap: 20px !important;
+    }
+    
+    .feature-item {
+        display: flex !important;
+        align-items: center !important;
+        padding: 10px 0 !important;
+    }
+    
+    .feature-item i {
+        color: #28a745 !important;
+        margin-right: 10px !important;
+    }
+    
+    .gallery-grid {
+        display: grid !important;
+        grid-template-columns: repeat(2, 1fr) !important;
+        gap: 15px !important;
+    }
+    
+    .gallery-item {
+        background: #f8f9fa !important;
+        border: 2px dashed #dee2e6 !important;
+        padding: 20px !important;
+        text-align: center !important;
+        color: #6c757d !important;
+        height: 100% !important;
+        min-height: 250px !important;
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        break-inside: avoid !important;
+        page-break-inside: avoid !important;
+    }
+    
+    .gallery-item img {
+        width: 100% !important;
+        height: 100% !important;
+        object-fit: cover !important;
+        display: block !important;
+    }
+}
+
 /* ===== END OF STYLES ===== */

force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html

@@ -1187,6 +1187,16 @@
                                             Image
                                         </button>
                                     </div>
+                                    <div class="toolbar-group">
+                                        <button class="toolbar-button" onclick={addNewPage}>
+                                            <lightning-icon icon-name="utility:add" size="x-small"></lightning-icon>
+                                            Add Page
+                                        </button>
+                                        <button class="toolbar-button" onclick={addNewPageWithDataType}>
+                                            <lightning-icon icon-name="utility:page" size="x-small"></lightning-icon>
+                                            Add Page (Type)
+                                        </button>
+                                    </div>
                                     <div class="toolbar-group">
                                         <button class="toolbar-button" onclick={toggleSelectorMode}>
                                             <lightning-icon icon-name="utility:target" size="x-small"></lightning-icon>
@@ -1245,26 +1255,13 @@
                                         onchange={handlePageSizeChange}>
                                     <span class="page-size-text">A4</span>
                                 </label>
-                                <!-- <label class="page-size-option">
+                                <label class="page-size-option">
                                     <input type="radio" name="pageSize" value="A3" onchange={handlePageSizeChange}>
                                     <span class="page-size-text">A3</span>
-                                </label> -->
+                                </label>
                             </div>
                         </div>
 
-                        <!-- Generate PDF Button -->
-                        <div class="generate-pdf-section">
-                            <button class="btn btn-primary generate-pdf-btn" onclick={generatePdfSimple} disabled={isGeneratingPdf}>
-                                <template if:false={isGeneratingPdf}>
-                                    <span class="btn-icon">📄</span>
-                                    Generate PDF
-                                </template>
-                                <template if:true={isGeneratingPdf}>
-                                    <span class="loading-spinner"></span>
-                                    Wait, our AI is generating the report...
-                                </template>
-                            </button>
-                        </div>
                     </div>
 
                     <!-- Viewport Toolbar - Removed for cleaner interface -->
@@ -1307,6 +1304,22 @@
             </div>
         </div>
 
+        <!-- Generate PDF Button - Only show on step 3 -->
+        <template if:true={showGeneratePdfButton}>
+            <div class="generate-pdf-section" style="position: fixed; bottom: 20px; right: 20px; z-index: 1000;">
+                <button class="btn btn-primary generate-pdf-btn" onclick={generatePdfSimple} disabled={isGeneratingPdf}>
+                    <template if:false={isGeneratingPdf}>
+                        <span class="btn-icon">📄</span>
+                        Generate PDF
+                    </template>
+                    <template if:true={isGeneratingPdf}>
+                        <span class="loading-spinner"></span>
+                        Wait, our AI is generating the report...
+                    </template>
+                </button>
+            </div>
+        </template>
+
 
 
         <!-- Image Review Modal -->
@@ -1598,4 +1611,47 @@
             </div>
         </div>
     </div>
+
+    <!-- Data Type Selection Modal -->
+    <div if:true={showDataTypeModal} class="data-type-modal-overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 9999; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.3s ease-out;">
+        <div class="data-type-modal" style="background: white; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.4); max-width: 700px; width: 90%; max-height: 85vh; overflow-y: auto; position: relative; animation: slideIn 0.3s ease-out; border: 1px solid #e0e0e0;">
+            <div class="data-type-modal-header" style="padding: 24px 24px 16px 24px; border-bottom: 1px solid #e0e0e0; display: flex; justify-content: space-between; align-items: center;">
+                <h3 style="margin: 0; font-size: 24px; font-weight: 600; color: #333;">Select Page Type</h3>
+                <button class="close-btn" onclick={closeDataTypeModal} style="background: none; border: none; font-size: 24px; color: #666; cursor: pointer; padding: 4px; border-radius: 4px; transition: all 0.2s;">✕</button>
+            </div>
+            <div class="data-type-modal-content" style="padding: 24px;">
+                <div class="data-type-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px;">
+                    <div class="data-type-option" onclick={handleDataTypeSelection} data-type="text" style="border: 2px solid #e0e0e0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.3s ease; background: #fafafa; hover:border-color: #007bff; hover:background: #f0f8ff;">
+                        <div class="data-type-icon" style="font-size: 32px; margin-bottom: 12px;">📝</div>
+                        <div class="data-type-title" style="font-size: 18px; font-weight: 600; color: #333; margin-bottom: 8px;">Text Page</div>
+                        <div class="data-type-description" style="font-size: 14px; color: #666; line-height: 1.4;">Add a text-focused page for detailed content</div>
+                    </div>
+                    <div class="data-type-option" onclick={handleDataTypeSelection} data-type="gallery" style="border: 2px solid #e0e0e0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.3s ease; background: #fafafa; hover:border-color: #007bff; hover:background: #f0f8ff;">
+                        <div class="data-type-icon" style="font-size: 32px; margin-bottom: 12px;">🖼️</div>
+                        <div class="data-type-title" style="font-size: 18px; font-weight: 600; color: #333; margin-bottom: 8px;">Gallery Page</div>
+                        <div class="data-type-description" style="font-size: 14px; color: #666; line-height: 1.4;">Add an image gallery page</div>
+                    </div>
+                    <div class="data-type-option" onclick={handleDataTypeSelection} data-type="features" style="border: 2px solid #e0e0e0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.3s ease; background: #fafafa; hover:border-color: #007bff; hover:background: #f0f8ff;">
+                        <div class="data-type-icon" style="font-size: 32px; margin-bottom: 12px;">✨</div>
+                        <div class="data-type-title" style="font-size: 18px; font-weight: 600; color: #333; margin-bottom: 8px;">Features Page</div>
+                        <div class="data-type-description" style="font-size: 14px; color: #666; line-height: 1.4;">Add a features and amenities page</div>
+                    </div>
+                    <div class="data-type-option" onclick={handleDataTypeSelection} data-type="contact" style="border: 2px solid #e0e0e0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.3s ease; background: #fafafa; hover:border-color: #007bff; hover:background: #f0f8ff;">
+                        <div class="data-type-icon" style="font-size: 32px; margin-bottom: 12px;">📞</div>
+                        <div class="data-type-title" style="font-size: 18px; font-weight: 600; color: #333; margin-bottom: 8px;">Contact Page</div>
+                        <div class="data-type-description" style="font-size: 14px; color: #666; line-height: 1.4;">Add a contact information page</div>
+                    </div>
+                    <div class="data-type-option" onclick={handleDataTypeSelection} data-type="blank" style="border: 2px solid #e0e0e0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.3s ease; background: #fafafa; hover:border-color: #007bff; hover:background: #f0f8ff;">
+                        <div class="data-type-icon" style="font-size: 32px; margin-bottom: 12px;">📄</div>
+                        <div class="data-type-title" style="font-size: 18px; font-weight: 600; color: #333; margin-bottom: 8px;">Blank Page</div>
+                        <div class="data-type-description" style="font-size: 14px; color: #666; line-height: 1.4;">Add a blank page for custom content</div>
+                    </div>
+                </div>
+            </div>
+            <div class="data-type-modal-actions" style="padding: 16px 24px 24px 24px; border-top: 1px solid #e0e0e0; display: flex; justify-content: flex-end; gap: 12px;">
+                <button class="btn btn-secondary" onclick={closeDataTypeModal} style="padding: 10px 20px; border: 1px solid #ccc; background: white; color: #333; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500;">Cancel</button>
+                <button class="btn btn-primary" onclick={addPageWithSelectedDataType} disabled={selectedDataTypeDisabled} style="padding: 10px 20px; border: none; background: #007bff; color: white; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500;">Add Page</button>
+            </div>
+        </div>
+    </div>
 </template>