A4 stable
This commit is contained in:
Ubuntu
parent
82ef064e5e
commit
1e9dda64a6
@ -1188,13 +1188,9 @@
|
||||
</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)
|
||||
Add Page
|
||||
</button>
|
||||
</div>
|
||||
<div class="toolbar-group">
|
||||
@ -1246,20 +1242,36 @@
|
||||
← Back
|
||||
</button>
|
||||
</div>
|
||||
<!-- Page Size Options -->
|
||||
<div class="page-size-section">
|
||||
<label class="page-size-label">Page Size:</label>
|
||||
<div class="page-size-options">
|
||||
<label class="page-size-option">
|
||||
<input type="radio" name="pageSize" value="A4" checked
|
||||
onchange={handlePageSizeChange}>
|
||||
<span class="page-size-text">A4</span>
|
||||
</label>
|
||||
<label class="page-size-option">
|
||||
<input type="radio" name="pageSize" value="A3" onchange={handlePageSizeChange}>
|
||||
<span class="page-size-text">A3</span>
|
||||
</label>
|
||||
<!-- Page Size Options and Generate PDF Button -->
|
||||
<div class="page-size-section" style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<label class="page-size-label">Page Size:</label>
|
||||
<div class="page-size-options">
|
||||
<label class="page-size-option">
|
||||
<input type="radio" name="pageSize" value="A4" checked
|
||||
onchange={handlePageSizeChange}>
|
||||
<span class="page-size-text">A4</span>
|
||||
</label>
|
||||
<label class="page-size-option">
|
||||
<input type="radio" name="pageSize" value="A3" onchange={handlePageSizeChange}>
|
||||
<span class="page-size-text">A3</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Generate PDF Button -->
|
||||
<template if:true={showGeneratePdfButton}>
|
||||
<button class="btn btn-primary generate-pdf-btn" onclick={generatePdfSimple} disabled={isGeneratingPdf} style="margin-left: 20px;">
|
||||
<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>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -1280,15 +1292,6 @@
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<template if:false={previewPages}>
|
||||
<div class="preview-page" data-page-size={selectedPageSize} data-page-number="1">
|
||||
<div class="enhanced-editor-content" contenteditable="true" onkeyup={handleContentChangeWithDynamicSizing}
|
||||
onpaste={handleContentChangeWithDynamicSizing} ondragover={handleEditorDragOver} ondrop={handleEditorDrop}>
|
||||
<!-- Template content will be loaded here -->
|
||||
{htmlContent}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<template if:false={hasPropertyImages}>
|
||||
<div class="floating-placeholder" data-preview-only="true" style="position: absolute; bottom: 12px; left: 12px; display: flex; align-items: center; gap: 8px; z-index: 2000; pointer-events: none;">
|
||||
@ -1304,21 +1307,6 @@
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
@ -1605,9 +1593,6 @@
|
||||
</div>
|
||||
<div class="new-section-modal-actions">
|
||||
<button class="btn btn-secondary" onclick={closeNewSectionModal}>Cancel</button>
|
||||
<button class="btn btn-primary" onclick={insertNewSection} disabled={insertSectionDisabled}>
|
||||
Add Section
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -91,7 +91,7 @@ export default class PropertyTemplateSelector extends LightningElement {
|
||||
@track selectedPageSize = "A4"; // Default page size
|
||||
@track zoom = 1.0; // Step 3 viewport zoom
|
||||
@track isGeneratingPdf = false; // Loading state for PDF generation
|
||||
@track previewPages = []; // Array of pages for viewport display
|
||||
@track previewPages = null; // Array of pages for viewport display
|
||||
@track showPrice = true; // Toggle for showing price vs "Price on Request"
|
||||
cachedTemplateContent = null; // Cache template content to prevent regeneration
|
||||
|
||||
@ -1271,7 +1271,7 @@ export default class PropertyTemplateSelector extends LightningElement {
|
||||
if (this.htmlContent) {
|
||||
this.previewPages = this.splitContentIntoPages(this.htmlContent);
|
||||
} else {
|
||||
this.previewPages = [];
|
||||
this.previewPages = null;
|
||||
}
|
||||
this.updatePageCount();
|
||||
|
||||
@ -2270,64 +2270,6 @@ export default class PropertyTemplateSelector extends LightningElement {
|
||||
this.newSectionContent = event.target.value;
|
||||
}
|
||||
|
||||
insertNewSection() {
|
||||
if (!this.selectedSectionType || !this.newSectionTitle.trim()) {
|
||||
return;
|
||||
}
|
||||
|
||||
const editor = this.template.querySelector(".enhanced-editor-content");
|
||||
if (!editor) {
|
||||
console.error("Editor not found");
|
||||
return;
|
||||
}
|
||||
|
||||
// Debug: Check logoUrl availability
|
||||
console.log("LogoUrl in insertNewSection:", this.logoUrl);
|
||||
console.log("LogoUrl type:", typeof this.logoUrl);
|
||||
|
||||
// Store logoUrl in a local variable to avoid template string issues
|
||||
const logoUrl = this.logoUrl;
|
||||
console.log("Local logoUrl:", logoUrl);
|
||||
|
||||
// Generate the new section HTML based on type
|
||||
const sectionHTML = this.generateSectionHTML(this.selectedSectionType, this.newSectionTitle, this.newSectionContent);
|
||||
|
||||
// Create a new page container
|
||||
const newPageHTML = `
|
||||
<div class="brochure-page new-section-page" style="page-break-before: always;">
|
||||
<div class="page-container">
|
||||
${sectionHTML}
|
||||
</div>
|
||||
<footer class="page-footer">
|
||||
<div class="reference-id">
|
||||
<strong>Agent:</strong> ${this.agentData.name} | ${this.agentData.email} | ${this.agentData.phone} | ${this.agentData.phone}
|
||||
</div>
|
||||
<div class="company-logo">
|
||||
<img src="${logoUrl}" alt="Company Logo" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
|
||||
<div style="display:none; background:#007bff; color:white; padding:4px 8px; border-radius:4px; font-size:10px; font-weight:bold;">LOGO</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Insert the new section at the end of the editor
|
||||
editor.insertAdjacentHTML('beforeend', newPageHTML);
|
||||
|
||||
// Update the page count
|
||||
this.updatePageCount();
|
||||
|
||||
// Close the modal
|
||||
this.closeNewSectionModal();
|
||||
|
||||
// Show success message
|
||||
this.showSuccess(`New ${this.selectedSectionType} section added successfully!`);
|
||||
|
||||
console.log("New section inserted:", {
|
||||
type: this.selectedSectionType,
|
||||
title: this.newSectionTitle,
|
||||
content: this.newSectionContent
|
||||
});
|
||||
}
|
||||
|
||||
generateSectionHTML(type, title, content) {
|
||||
const data = this.propertyData || {};
|
||||
@ -4927,21 +4869,21 @@ export default class PropertyTemplateSelector extends LightningElement {
|
||||
// First image gets half height, others get standard height
|
||||
const imageHeight = idx === 0 ? '100px' : '150px';
|
||||
|
||||
return `<div class="gallery-item" style="position: relative; overflow: hidden; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); height: ${imageHeight};">
|
||||
<img src="${imageUrl}" alt="${title}" style="width:100%; height:100%; object-fit: cover; display:block; break-inside: avoid; page-break-inside: avoid;"/>
|
||||
return `<div class="gallery-item" style="position: relative; overflow: hidden; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.1);">
|
||||
<img src="${imageUrl}" alt="${title}" style="width:100%; height:120px; object-fit: cover; display:block; break-inside: avoid; page-break-inside: avoid;"/>
|
||||
|
||||
</div>`;
|
||||
})
|
||||
.join("");
|
||||
galleryPagesHTML += `
|
||||
<div class="brochure" style="display: flex; flex-direction: column; height: 297mm; overflow: hidden;">
|
||||
<div class="content" style="flex: 1; display: flex; flex-direction: column; padding: 0; max-height: calc(297mm - 60px);">
|
||||
<div style="text-align: center; margin-bottom: 10px; padding: 10px 0;">
|
||||
<h2 style="color: var(--color-primary); font-size: 22px; margin: 0;">Property Gallery</h2>
|
||||
</div>
|
||||
<div class="gallery-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; height: 100%; align-content: start; overflow: hidden; padding: 0 10px;">
|
||||
${chunkHTML}
|
||||
</div>
|
||||
<div class="content-body" style="background-color: white; color: #333333;">
|
||||
<header class="page-header" style="border-bottom: 1px solid #e0e0e0;">
|
||||
<h1 class="title" style="font-family: 'Lato', sans-serif; font-size: 2.2rem; color: #003366; font-weight: 700;">Property <span style="color: #f39c12;">Gallery</span></h1>
|
||||
</header>
|
||||
<main class="main-content">
|
||||
<div style="display:grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 0 10px;">${chunkHTML}</div>
|
||||
</main>
|
||||
</div>
|
||||
<footer class="page-footer" style="margin-top: auto; height: 60px; flex-shrink: 0;">
|
||||
<div class="reference-id">
|
||||
@ -4965,6 +4907,7 @@ export default class PropertyTemplateSelector extends LightningElement {
|
||||
<style>
|
||||
/* --- Google Font --- */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap');
|
||||
|
||||
/* --- Design System Variables --- */
|
||||
:root {
|
||||
@ -4975,6 +4918,15 @@ export default class PropertyTemplateSelector extends LightningElement {
|
||||
--color-text-dark: #333333;
|
||||
--color-text-muted: #666666;
|
||||
--color-background-light: #f8f9fa;
|
||||
|
||||
/* Grand Oak Villa Gallery Variables */
|
||||
--color-dark-charcoal: #121212;
|
||||
--color-text-primary: #D1D1D1;
|
||||
--color-accent-gold: #C0A062;
|
||||
--color-white: #FFFFFF;
|
||||
--color-border: #2a2a2a;
|
||||
--padding-page: 60px;
|
||||
--font-secondary: 'Playfair Display', serif;
|
||||
}
|
||||
|
||||
/* --- Print Media Queries for A4 --- */
|
||||
@ -5418,7 +5370,7 @@ export default class PropertyTemplateSelector extends LightningElement {
|
||||
}
|
||||
.gallery-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 120px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
break-inside: avoid;
|
||||
@ -5432,6 +5384,36 @@ export default class PropertyTemplateSelector extends LightningElement {
|
||||
align-content: start;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Modern Home Gallery Styles (Grand Oak Villa Layout) */
|
||||
.content-body {
|
||||
background-color: white;
|
||||
color: #333333;
|
||||
flex-grow: 1;
|
||||
padding: 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 30px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
.page-header .title {
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-size: 2.2rem;
|
||||
color: #003366;
|
||||
font-weight: 700;
|
||||
}
|
||||
.page-header .title span {
|
||||
color: #f39c12;
|
||||
}
|
||||
.main-content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -8050,6 +8032,7 @@ ${galleryPagesHTML}
|
||||
@track showDataTypeModal = false;
|
||||
@track selectedDataType = '';
|
||||
@track forceReRender = false;
|
||||
@track isAddingPage = false;
|
||||
|
||||
// Computed property for button disabled state
|
||||
get selectedDataTypeDisabled() {
|
||||
@ -8196,72 +8179,6 @@ ${galleryPagesHTML}
|
||||
}
|
||||
}
|
||||
|
||||
// Dynamic page addition feature
|
||||
addNewPage() {
|
||||
try {
|
||||
const editor = this.template.querySelector('.enhanced-editor-content');
|
||||
if (!editor) {
|
||||
this.showError("Editor not found");
|
||||
return;
|
||||
}
|
||||
|
||||
// Create a new page with basic structure
|
||||
const newPageHTML = `
|
||||
<div class="brochure-page a4" style="margin: 20px auto; padding: 0; width: 100%; max-width: 800px; min-height: 600px; overflow: hidden; display: flex; flex-direction: column; background: white; border: 1px solid #ddd; border-radius: 8px;">
|
||||
|
||||
<div class="content" style="flex: 1; padding: 40px; background: white; overflow: hidden; display: flex; flex-direction: column;">
|
||||
<div class="content-section" style="margin-bottom: 30px;">
|
||||
<h2 style="color: #495057; border-bottom: 2px solid #e9ecef; padding-bottom: 10px; margin-bottom: 20px;">Section Title</h2>
|
||||
<p style="color: #6c757d; line-height: 1.6; margin-bottom: 15px;">Add your content here. This is a new page that has been dynamically added to your brochure.</p>
|
||||
<p style="color: #6c757d; line-height: 1.6;">You can edit this content just like any other section in your template.</p>
|
||||
</div>
|
||||
|
||||
<div class="content-section" style="margin-bottom: 30px;">
|
||||
<h2 style="color: #495057; border-bottom: 2px solid #e9ecef; padding-bottom: 10px; margin-bottom: 20px;">Additional Information</h2>
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
|
||||
<div>
|
||||
<h3 style="color: #495057; font-size: 1.1em; margin-bottom: 10px;">Feature 1</h3>
|
||||
<p style="color: #6c757d; margin: 0;">Add your feature description here.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 style="color: #495057; font-size: 1.1em; margin-bottom: 10px;">Feature 2</h3>
|
||||
<p style="color: #6c757d; margin: 0;">Add your feature description here.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="page-footer">
|
||||
<div class="reference-id">
|
||||
<strong>Agent:</strong> ${this.agentData?.name || 'N/A'} | ${this.agentData?.email || 'N/A'} | ${this.agentData?.phone || 'N/A'}
|
||||
</div>
|
||||
<div class="company-logo">
|
||||
<img src="https://tso3listingimages.s3.amazonaws.com/00DFV000001HtSX/a0LFV000001NhJq2AK/companyLogo.jpeg?t=1757834589169" alt="PropertyCRM">
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Insert the new page at the end of the editor
|
||||
editor.insertAdjacentHTML('beforeend', newPageHTML);
|
||||
|
||||
// Update the page count
|
||||
this.updatePageCount();
|
||||
|
||||
// Show success message
|
||||
this.showSuccess("New page added successfully! You can now edit the content.");
|
||||
|
||||
// Scroll to the new page
|
||||
const newPage = editor.querySelector('.brochure-page:last-child');
|
||||
if (newPage) {
|
||||
newPage.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error adding new page:", error);
|
||||
this.showError("Failed to add new page. Please try again.");
|
||||
}
|
||||
}
|
||||
|
||||
// Add new page with data type selection
|
||||
addNewPageWithDataType() {
|
||||
@ -8338,6 +8255,13 @@ ${galleryPagesHTML}
|
||||
return;
|
||||
}
|
||||
|
||||
// Prevent duplicate page creation
|
||||
if (this.isAddingPage) {
|
||||
console.log("Page creation already in progress, skipping...");
|
||||
return;
|
||||
}
|
||||
this.isAddingPage = true;
|
||||
|
||||
let newPageHTML = '';
|
||||
|
||||
switch (this.selectedDataType) {
|
||||
@ -8370,11 +8294,15 @@ ${galleryPagesHTML}
|
||||
this.closeDataTypeModal();
|
||||
this.showSuccess("New page added successfully!");
|
||||
|
||||
// Scroll to the new page
|
||||
const newPage = editor.querySelector('.brochure-page:last-child');
|
||||
if (newPage) {
|
||||
newPage.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
// Reset the flag after a delay
|
||||
setTimeout(() => {
|
||||
this.isAddingPage = false;
|
||||
// Auto-scroll to the new page
|
||||
const newPage = editor.querySelector('.a4-page:last-child');
|
||||
if (newPage) {
|
||||
newPage.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
}, 100);
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error adding page with data type:", error);
|
||||
@ -8382,117 +8310,115 @@ ${galleryPagesHTML}
|
||||
}
|
||||
}
|
||||
|
||||
// Create different page types
|
||||
// Create different page types - all use same A4 structure
|
||||
createTextPage() {
|
||||
return `
|
||||
<div class="brochure-page a4" style="margin: 20px auto; padding: 0; width: 100%; max-width: 800px; min-height: 600px; overflow: hidden; display: flex; flex-direction: column; background: white; border: 1px solid #ddd; border-radius: 8px;">
|
||||
|
||||
<div class="content" style="flex: 1; padding: 40px; background: white; overflow: hidden; display: flex; flex-direction: column;">
|
||||
<div class="content-section" style="flex: 1; margin-bottom: 20px;">
|
||||
<h2 style="color: #495057; border-bottom: 2px solid #e9ecef; padding-bottom: 10px; margin-bottom: 15px;">Section Title</h2>
|
||||
<p style="color: #6c757d; line-height: 1.6; margin-bottom: 15px;">Add your text content here. This is a text-focused page for detailed descriptions, information, or any written content.</p>
|
||||
<p style="color: #6c757d; line-height: 1.6;">You can edit this content just like any other section in your template.</p>
|
||||
<div class="a4-page" style="width: 210mm; height: 297mm; margin: 0 auto 40px auto; padding: 0; background: white; border: 1px solid #ddd; border-radius: 8px; display: flex; flex-direction: column; page-break-inside: avoid; page-break-after: always; overflow: hidden; box-sizing: border-box;">
|
||||
<div class="page-content" style="flex: 1; padding: 20px; overflow: hidden; page-break-inside: avoid; display: flex; flex-direction: column; box-sizing: border-box; max-height: calc(297mm - 60px);">
|
||||
<div class="editable-content" contenteditable="true" style="flex: 1; min-height: 150px; border: 1px dashed #ccc; padding: 15px; border-radius: 4px; background: #fafafa; outline: none; page-break-inside: avoid; overflow: hidden;">
|
||||
<h2>Text Content</h2>
|
||||
<p>Add your text content here...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-shrink: 0; margin-top: auto; width: 100%;">
|
||||
${this.getTemplateSpecificFooter()}
|
||||
</div>
|
||||
<footer class="page-footer" style="flex-shrink: 0; height: 60px; background-color: #003366; color: white; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; page-break-inside: avoid; box-sizing: border-box; margin: 0;">
|
||||
<div class="reference-id">
|
||||
<strong>Agent:</strong> ${this.agentData?.name || 'N/A'} | ${this.agentData?.email || 'N/A'} | ${this.agentData?.phone || 'N/A'}
|
||||
</div>
|
||||
<div class="company-logo">
|
||||
<img src="https://tso3listingimages.s3.amazonaws.com/00DFV000001HtSX/a0LFV000001NhJq2AK/companyLogo.jpeg?t=1757834589169" alt="PropertyCRM" style="height: 20px; max-width: 40px; object-fit: contain;">
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
createGalleryPage() {
|
||||
return `
|
||||
<div class="brochure-page a4" style="margin: 20px auto; padding: 0; width: 100%; max-width: 800px; min-height: 600px; overflow: hidden; display: flex; flex-direction: column; background: white; border: 1px solid #ddd; border-radius: 8px;">
|
||||
|
||||
<div class="content" style="flex: 1; padding: 40px; background: white; overflow: hidden; display: flex; flex-direction: column;">
|
||||
<div class="gallery-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; flex: 1; height: 100%;">
|
||||
<div class="gallery-item" style="background: #f8f9fa; border: 2px dashed #dee2e6; padding: 15px; text-align: center; color: #6c757d; height: 100%; min-height: 180px; display: flex; align-items: center; justify-content: center; break-inside: avoid; page-break-inside: avoid;">
|
||||
<div class="a4-page" style="width: 210mm; height: 297mm; margin: 0 auto 40px auto; padding: 0; background: white; border: 1px solid #ddd; border-radius: 8px; display: flex; flex-direction: column; position: relative; page-break-inside: avoid; page-break-after: always;">
|
||||
<div class="page-content" style="flex: 1; padding: 40px; overflow: hidden; page-break-inside: avoid;">
|
||||
<div class="gallery-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; height: 100%; page-break-inside: avoid;">
|
||||
<div class="gallery-item" style="background: #f8f9fa; border: 2px dashed #dee2e6; padding: 15px; text-align: center; color: #6c757d; display: flex; align-items: center; justify-content: center; page-break-inside: avoid;">
|
||||
<div>
|
||||
<i class="fa-solid fa-image" style="font-size: 1.8em; margin-bottom: 10px;"></i>
|
||||
<p style="margin: 0; font-size: 0.9em; font-weight: 500;">Add your images here</p>
|
||||
<p style="margin: 0; font-size: 0.9em;">Add image here</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-item" style="background: #f8f9fa; border: 2px dashed #dee2e6; padding: 15px; text-align: center; color: #6c757d; height: 100%; min-height: 180px; display: flex; align-items: center; justify-content: center; break-inside: avoid; page-break-inside: avoid;">
|
||||
<div class="gallery-item" style="background: #f8f9fa; border: 2px dashed #dee2e6; padding: 15px; text-align: center; color: #6c757d; display: flex; align-items: center; justify-content: center; page-break-inside: avoid;">
|
||||
<div>
|
||||
<i class="fa-solid fa-image" style="font-size: 1.8em; margin-bottom: 10px;"></i>
|
||||
<p style="margin: 0; font-size: 0.9em; font-weight: 500;">Add your images here</p>
|
||||
<p style="margin: 0; font-size: 0.9em;">Add image here</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-item" style="background: #f8f9fa; border: 2px dashed #dee2e6; padding: 15px; text-align: center; color: #6c757d; height: 100%; min-height: 180px; display: flex; align-items: center; justify-content: center; break-inside: avoid; page-break-inside: avoid;">
|
||||
<div class="gallery-item" style="background: #f8f9fa; border: 2px dashed #dee2e6; padding: 15px; text-align: center; color: #6c757d; display: flex; align-items: center; justify-content: center; page-break-inside: avoid;">
|
||||
<div>
|
||||
<i class="fa-solid fa-image" style="font-size: 1.8em; margin-bottom: 10px;"></i>
|
||||
<p style="margin: 0; font-size: 0.9em; font-weight: 500;">Add your images here</p>
|
||||
<p style="margin: 0; font-size: 0.9em;">Add image here</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-item" style="background: #f8f9fa; border: 2px dashed #dee2e6; padding: 15px; text-align: center; color: #6c757d; height: 100%; min-height: 180px; display: flex; align-items: center; justify-content: center; break-inside: avoid; page-break-inside: avoid;">
|
||||
<div class="gallery-item" style="background: #f8f9fa; border: 2px dashed #dee2e6; padding: 15px; text-align: center; color: #6c757d; display: flex; align-items: center; justify-content: center; page-break-inside: avoid;">
|
||||
<div>
|
||||
<i class="fa-solid fa-image" style="font-size: 1.8em; margin-bottom: 10px;"></i>
|
||||
<p style="margin: 0; font-size: 0.9em; font-weight: 500;">Add your images here</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-item" style="background: #f8f9fa; border: 2px dashed #dee2e6; padding: 15px; text-align: center; color: #6c757d; height: 100%; min-height: 180px; display: flex; align-items: center; justify-content: center; break-inside: avoid; page-break-inside: avoid;">
|
||||
<div>
|
||||
<i class="fa-solid fa-image" style="font-size: 1.8em; margin-bottom: 10px;"></i>
|
||||
<p style="margin: 0; font-size: 0.9em; font-weight: 500;">Add your images here</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-item" style="background: #f8f9fa; border: 2px dashed #dee2e6; padding: 15px; text-align: center; color: #6c757d; height: 100%; min-height: 180px; display: flex; align-items: center; justify-content: center; break-inside: avoid; page-break-inside: avoid;">
|
||||
<div>
|
||||
<i class="fa-solid fa-image" style="font-size: 1.8em; margin-bottom: 10px;"></i>
|
||||
<p style="margin: 0; font-size: 0.9em; font-weight: 500;">Add your images here</p>
|
||||
<p style="margin: 0; font-size: 0.9em;">Add image here</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-shrink: 0; margin-top: auto; width: 100%;">
|
||||
${this.getTemplateSpecificFooter()}
|
||||
</div>
|
||||
<footer class="page-footer" style="position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background-color: #003366; color: white; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; page-break-inside: avoid;">
|
||||
<div class="reference-id">
|
||||
<strong>Agent:</strong> ${this.agentData?.name || 'N/A'} | ${this.agentData?.email || 'N/A'} | ${this.agentData?.phone || 'N/A'}
|
||||
</div>
|
||||
<div class="company-logo">
|
||||
<img src="https://tso3listingimages.s3.amazonaws.com/00DFV000001HtSX/a0LFV000001NhJq2AK/companyLogo.jpeg?t=1757834589169" alt="PropertyCRM" style="height: 25px; max-width: 48px; object-fit: contain;">
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
createFeaturesPage() {
|
||||
return `
|
||||
<div class="brochure-page a4" style="margin: 20px auto; padding: 0; width: 100%; max-width: 800px; min-height: 600px; overflow: hidden; display: flex; flex-direction: column; background: white; border: 1px solid #ddd; border-radius: 8px;">
|
||||
|
||||
<div class="content" style="flex: 1; padding: 40px; background: white; overflow: hidden; display: flex; flex-direction: column;">
|
||||
<div class="features-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; flex: 1;">
|
||||
<div class="feature-item" style="display: flex; align-items: center; padding: 8px 0;">
|
||||
<div class="a4-page" style="width: 210mm; height: 297mm; margin: 0 auto 40px auto; padding: 0; background: white; border: 1px solid #ddd; border-radius: 8px; display: flex; flex-direction: column; position: relative; page-break-inside: avoid; page-break-after: always;">
|
||||
<div class="page-content" style="flex: 1; padding: 40px; overflow: hidden; page-break-inside: avoid;">
|
||||
<div class="features-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; height: 100%; page-break-inside: avoid;">
|
||||
<div class="feature-item" style="display: flex; align-items: center; padding: 8px 0; page-break-inside: avoid;">
|
||||
<i class="fa-solid fa-check" style="color: #28a745; margin-right: 8px;"></i>
|
||||
<span>Feature 1</span>
|
||||
</div>
|
||||
<div class="feature-item" style="display: flex; align-items: center; padding: 8px 0;">
|
||||
<div class="feature-item" style="display: flex; align-items: center; padding: 8px 0; page-break-inside: avoid;">
|
||||
<i class="fa-solid fa-check" style="color: #28a745; margin-right: 8px;"></i>
|
||||
<span>Feature 2</span>
|
||||
</div>
|
||||
<div class="feature-item" style="display: flex; align-items: center; padding: 8px 0;">
|
||||
<div class="feature-item" style="display: flex; align-items: center; padding: 8px 0; page-break-inside: avoid;">
|
||||
<i class="fa-solid fa-check" style="color: #28a745; margin-right: 8px;"></i>
|
||||
<span>Feature 3</span>
|
||||
</div>
|
||||
<div class="feature-item" style="display: flex; align-items: center; padding: 8px 0;">
|
||||
<div class="feature-item" style="display: flex; align-items: center; padding: 8px 0; page-break-inside: avoid;">
|
||||
<i class="fa-solid fa-check" style="color: #28a745; margin-right: 8px;"></i>
|
||||
<span>Feature 4</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-shrink: 0; margin-top: auto; width: 100%;">
|
||||
${this.getTemplateSpecificFooter()}
|
||||
</div>
|
||||
<footer class="page-footer" style="position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background-color: #003366; color: white; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; page-break-inside: avoid;">
|
||||
<div class="reference-id">
|
||||
<strong>Agent:</strong> ${this.agentData?.name || 'N/A'} | ${this.agentData?.email || 'N/A'} | ${this.agentData?.phone || 'N/A'}
|
||||
</div>
|
||||
<div class="company-logo">
|
||||
<img src="https://tso3listingimages.s3.amazonaws.com/00DFV000001HtSX/a0LFV000001NhJq2AK/companyLogo.jpeg?t=1757834589169" alt="PropertyCRM" style="height: 25px; max-width: 48px; object-fit: contain;">
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
createContactPage() {
|
||||
return `
|
||||
<div class="brochure-page a4" style="margin: 20px auto; padding: 0; width: 100%; max-width: 800px; min-height: 600px; overflow: hidden; display: flex; flex-direction: column; background: white; border: 1px solid #ddd; border-radius: 8px;">
|
||||
|
||||
<div class="content" style="flex: 1; padding: 40px; background: white; overflow: hidden; display: flex; flex-direction: column;">
|
||||
<div class="contact-info-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; flex: 1;">
|
||||
<div class="contact-details">
|
||||
<div class="a4-page" style="width: 210mm; height: 297mm; margin: 0 auto 40px auto; padding: 0; background: white; border: 1px solid #ddd; border-radius: 8px; display: flex; flex-direction: column; position: relative; page-break-inside: avoid; page-break-after: always;">
|
||||
<div class="page-content" style="flex: 1; padding: 40px; overflow: hidden; page-break-inside: avoid;">
|
||||
<div class="contact-info-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; height: 100%; page-break-inside: avoid;">
|
||||
<div class="contact-details" style="page-break-inside: avoid;">
|
||||
<h3>Contact Details</h3>
|
||||
<div class="contact-item" style="margin: 12px 0;">
|
||||
<strong>Agent:</strong> ${this.agentData?.name || 'N/A'}
|
||||
@ -8504,7 +8430,7 @@ ${galleryPagesHTML}
|
||||
<strong>Phone:</strong> ${this.agentData?.phone || 'N/A'}
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-details">
|
||||
<div class="contact-details" style="page-break-inside: avoid;">
|
||||
<h3>Property Information</h3>
|
||||
<div class="contact-item" style="margin: 12px 0;">
|
||||
<strong>Property:</strong> ${this.propertyData?.propertyName || 'N/A'}
|
||||
@ -8519,23 +8445,35 @@ ${galleryPagesHTML}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-shrink: 0; margin-top: auto; width: 100%;">
|
||||
${this.getTemplateSpecificFooter()}
|
||||
</div>
|
||||
<footer class="page-footer" style="position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background-color: #003366; color: white; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; page-break-inside: avoid;">
|
||||
<div class="reference-id">
|
||||
<strong>Agent:</strong> ${this.agentData?.name || 'N/A'} | ${this.agentData?.email || 'N/A'} | ${this.agentData?.phone || 'N/A'}
|
||||
</div>
|
||||
<div class="company-logo">
|
||||
<img src="https://tso3listingimages.s3.amazonaws.com/00DFV000001HtSX/a0LFV000001NhJq2AK/companyLogo.jpeg?t=1757834589169" alt="PropertyCRM" style="height: 25px; max-width: 48px; object-fit: contain;">
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
createBlankPage() {
|
||||
return `
|
||||
<div class="brochure-page a4" style="margin: 20px auto; padding: 0; width: 100%; max-width: 800px; min-height: 600px; overflow: hidden; display: flex; flex-direction: column; background: white; border: 1px solid #ddd; border-radius: 8px;">
|
||||
<div class="page-content" style="flex: 1; padding: 40px; background: white; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center;">
|
||||
<p style="color: #6c757d; text-align: center; font-size: 1.2em;">Add your content here</p>
|
||||
<div class="a4-page" style="width: 210mm; height: 297mm; margin: 0 auto 40px auto; padding: 0; background: white; border: 1px solid #ddd; border-radius: 8px; display: flex; flex-direction: column; position: relative; page-break-inside: avoid; page-break-after: always;">
|
||||
<div class="page-content" style="flex: 1; padding: 40px; overflow: hidden; display: flex; align-items: center; justify-content: center; page-break-inside: avoid;">
|
||||
<div class="editable-content" contenteditable="true" style="width: 100%; height: 100%; min-height: 200px; border: 1px dashed #ccc; padding: 20px; border-radius: 4px; background: #fafafa; outline: none; display: flex; align-items: center; justify-content: center; page-break-inside: avoid;">
|
||||
<p style="color: #6c757d; text-align: center; font-size: 1.2em; margin: 0;">Click here to add content...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-shrink: 0; margin-top: auto; width: 100%;">
|
||||
${this.getTemplateSpecificFooter()}
|
||||
</div>
|
||||
<footer class="page-footer" style="position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background-color: #003366; color: white; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; page-break-inside: avoid;">
|
||||
<div class="reference-id">
|
||||
<strong>Agent:</strong> ${this.agentData?.name || 'N/A'} | ${this.agentData?.email || 'N/A'} | ${this.agentData?.phone || 'N/A'}
|
||||
</div>
|
||||
<div class="company-logo">
|
||||
<img src="https://tso3listingimages.s3.amazonaws.com/00DFV000001HtSX/a0LFV000001NhJq2AK/companyLogo.jpeg?t=1757834589169" alt="PropertyCRM" style="height: 25px; max-width: 48px; object-fit: contain;">
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@ -14091,6 +14029,17 @@ ${galleryPagesHTML}
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* A4 page editor styling */
|
||||
.a4-page {
|
||||
isolation: isolate;
|
||||
contain: layout;
|
||||
}
|
||||
|
||||
.a4-page .page-footer {
|
||||
isolation: isolate;
|
||||
contain: layout;
|
||||
}
|
||||
|
||||
@media print {
|
||||
body { margin: 0; padding: 0; }
|
||||
.template-content {
|
||||
@ -14098,6 +14047,57 @@ ${galleryPagesHTML}
|
||||
border-radius: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* A4 page print styling */
|
||||
.a4-page {
|
||||
width: 210mm !important;
|
||||
height: 297mm !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
box-shadow: none !important;
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
page-break-after: always;
|
||||
page-break-inside: avoid !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.a4-page:last-child {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
.a4-page .page-content {
|
||||
flex: 1 !important;
|
||||
padding: 20px !important;
|
||||
overflow: hidden !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
box-sizing: border-box !important;
|
||||
max-height: calc(297mm - 60px) !important;
|
||||
}
|
||||
|
||||
.a4-page .page-footer {
|
||||
flex-shrink: 0 !important;
|
||||
height: 60px !important;
|
||||
background-color: #003366 !important;
|
||||
color: white !important;
|
||||
padding: 10px 20px !important;
|
||||
display: flex !important;
|
||||
justify-content: space-between !important;
|
||||
align-items: center !important;
|
||||
font-size: 12px !important;
|
||||
page-break-inside: avoid !important;
|
||||
box-sizing: border-box !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.a4-page .page-footer img {
|
||||
height: 20px !important;
|
||||
max-width: 40px !important;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user