From b349cd2cdd82dd825da7723d12cd3ba0d0b1cd95 Mon Sep 17 00:00:00 2001 From: rohit Date: Sat, 30 Aug 2025 17:07:35 +0530 Subject: [PATCH] v1.0.0-alpha --- DEPLOYMENT.md | 122 - PRODUCTION-CHECKLIST.md | 137 - deploy-fix.sh | 57 + .../default/classes/PDFGenerationProxy.cls | 51 + .../classes/PDFGenerationProxy.cls-meta.xml | 5 + .../classes/PropertyDataController.cls | 48 +- .../PropertyPdfGeneratorController.cls | 2 +- .../classes/PropertyTemplateController.cls | 100 +- .../propertyTemplateSelector.css | 2791 ++++---- .../propertyTemplateSelector.html | 1004 ++- .../propertyTemplateSelector.js | 5980 ++++++++--------- package-lock.json | 1262 ---- package.xml | 3 + python-pdf-generator/advanced_templates.py | 608 -- python-pdf-generator/api_server.py | 672 -- python-pdf-generator/app.py | 861 +++ .../property_pdf_generator.py | 1561 ----- python-pdf-generator/requirements.txt | 18 +- python-pdf-generator/salesforce_pdf_api.py | 378 -- python-pdf-generator/start_api.py | 78 - sample templates/real estate modern home.html | 477 ++ sample templates/the grand oak villa.html | 401 ++ sample templates/the serenity house.html | 426 ++ sample templates/the vertice.html | 604 ++ 24 files changed, 7840 insertions(+), 9806 deletions(-) delete mode 100644 DEPLOYMENT.md delete mode 100644 PRODUCTION-CHECKLIST.md create mode 100755 deploy-fix.sh create mode 100644 force-app/main/default/classes/PDFGenerationProxy.cls create mode 100644 force-app/main/default/classes/PDFGenerationProxy.cls-meta.xml delete mode 100644 package-lock.json delete mode 100644 python-pdf-generator/advanced_templates.py delete mode 100644 python-pdf-generator/api_server.py create mode 100644 python-pdf-generator/app.py delete mode 100644 python-pdf-generator/property_pdf_generator.py delete mode 100644 python-pdf-generator/salesforce_pdf_api.py delete mode 100644 python-pdf-generator/start_api.py create mode 100644 sample templates/real estate modern home.html create mode 100644 sample templates/the grand oak villa.html create mode 100644 sample templates/the serenity house.html create mode 100644 sample templates/the vertice.html diff --git a/DEPLOYMENT.md b/DEPLOYMENT.md deleted file mode 100644 index a4d9c6d..0000000 --- a/DEPLOYMENT.md +++ /dev/null @@ -1,122 +0,0 @@ -# πŸš€ Production Deployment Guide - -## πŸ“‹ **Prerequisites** - -- Salesforce CLI (sf) installed -- Python 3.8+ on your server -- Access to your Salesforce sandbox - -## 🎯 **Step 1: Deploy LWC to Salesforce** - -```bash -# Make script executable -chmod +x deploy-lwc-production.sh - -# Run deployment -./deploy-lwc-production.sh -``` - -**Expected Output:** -``` -βœ… LWC deployment successful! -βœ… Custom objects deployed! -βœ… Permission set created! -βœ… Lightning App Page created! -``` - -## 🌐 **Step 2: Deploy PDF API to Your Server** - -```bash -# On your server -cd python-pdf-generator - -# Create virtual environment -python3 -m venv venv -source venv/bin/activate - -# Install dependencies -pip install -r requirements.txt - -# Start API server -python3 api_server.py -``` - -**Server will start on:** `http://0.0.0.0:8000` - -## πŸ”§ **Step 3: Configure LWC with Your API URL** - -Edit `force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.js`: - -```javascript -// Change this line -pdfApiBaseUrl = 'https://YOUR-ACTUAL-IP:8000/api'; -``` - -**Replace `YOUR-ACTUAL-IP` with your server's IP address.** - -## πŸ”’ **Step 4: Security Configuration** - -### **Firewall Setup:** -```bash -# Open port 8000 -sudo ufw allow 8000 -``` - -### **CORS Configuration (if needed):** -Edit `python-pdf-generator/api_server.py`: -```python -app.add_middleware( - CORSMiddleware, - allow_origins=[ - "https://tso3--r1.sandbox.lightning.force.com", - "https://your-salesforce-domain.com" - ], - allow_credentials=True, - allow_methods=["*"], - allow_headers=["*"], -) -``` - -## πŸ§ͺ **Step 5: Test Your Deployment** - -1. **Open Salesforce Sandbox:** `https://tso3--r1.sandbox.lightning.force.com` -2. **Login:** `contact+tso3@propertycrm.ae.r1` / `Demo@123` -3. **Search for:** "Property Brochure Generator" -4. **Test the flow:** Template β†’ Property β†’ Preview β†’ Download - -## πŸ“Š **Expected Results** - -- βœ… LWC loads in Salesforce -- βœ… Properties load from your data -- βœ… PDF preview generates -- βœ… PDF downloads successfully -- βœ… All 23+ properties accessible - -## 🚨 **Troubleshooting** - -### **LWC Not Loading:** -- Check deployment logs -- Verify permission sets -- Check user access - -### **API Connection Failed:** -- Verify IP address in LWC -- Check firewall settings -- Ensure API server is running - -### **No Properties Found:** -- Verify `pcrm__Property__c` object exists -- Check field permissions -- Verify data in sandbox - -## πŸ“ž **Support** - -For deployment issues: -1. Check Salesforce CLI logs -2. Verify API server status -3. Check browser console for errors -4. Ensure all prerequisites are met - ---- - -**🎯 Your system is now production-ready!** \ No newline at end of file diff --git a/PRODUCTION-CHECKLIST.md b/PRODUCTION-CHECKLIST.md deleted file mode 100644 index 7ea9a16..0000000 --- a/PRODUCTION-CHECKLIST.md +++ /dev/null @@ -1,137 +0,0 @@ -# πŸš€ Production Deployment Checklist - Property Brochure Generator LWC - -## πŸ“‹ **Pre-Deployment Checklist** - -### **βœ… LWC Component Ready** -- [ ] All LLM-style emojis removed from UI -- [ ] Professional SVG icons implemented -- [ ] Error handling and validation implemented -- [ ] Toast notifications configured -- [ ] Loading states implemented -- [ ] Responsive design tested - -### **βœ… Configuration Updated** -- [ ] PDF API URL updated in `propertyTemplateSelector.js` -- [ ] PDF API URL updated in `PropertyTemplateController.cls` -- [ ] Production configuration file created -- [ ] Error messages customized for production -- [ ] Success messages customized for production - -### **βœ… Code Quality** -- [ ] No console.log statements in production code -- [ ] Error boundaries implemented -- [ ] Performance optimizations applied -- [ ] Accessibility features implemented -- [ ] Cross-browser compatibility tested - -## 🌐 **PDF API Server Deployment** - -### **βœ… Server Configuration** -- [ ] Python API server deployed to your IP -- [ ] Port 8000 opened in firewall -- [ ] HTTPS configured (recommended for production) -- [ ] CORS configured for Salesforce domains -- [ ] Environment variables set - -### **βœ… API Endpoints Working** -- [ ] `/api/health` - Health check endpoint -- [ ] `/api/preview` - PDF preview generation -- [ ] `/api/generate-pdf` - PDF generation and download -- [ ] `/api/templates` - Available templates - -## πŸ”§ **Salesforce Configuration** - -### **βœ… Custom Objects Deployed** -- [ ] `Property_Template__c` object deployed -- [ ] `Property__c` object fields updated -- [ ] Permission sets configured -- [ ] User access granted - -### **βœ… LWC Deployment** -- [ ] Component deployed to sandbox -- [ ] Lightning App Page created -- [ ] Component added to page layouts -- [ ] User permissions verified - -## πŸ“± **Testing Checklist** - -### **βœ… Functionality Testing** -- [ ] Template selection working -- [ ] Property data loading from Salesforce -- [ ] Form validation working -- [ ] Image upload functionality -- [ ] PDF preview generation -- [ ] PDF download working - -### **βœ… User Experience Testing** -- [ ] 5-step wizard flow smooth -- [ ] Error messages clear and helpful -- [ ] Loading states informative -- [ ] Responsive on mobile devices -- [ ] Accessibility features working - -### **βœ… Integration Testing** -- [ ] Salesforce data integration working -- [ ] PDF API communication successful -- [ ] Error handling graceful -- [ ] Performance acceptable - -## 🚨 **Production Security** - -### **βœ… Security Measures** -- [ ] API endpoints secured -- [ ] CORS properly configured -- [ ] Input validation implemented -- [ ] File upload restrictions set -- [ ] Error messages don't expose sensitive data - -### **βœ… Monitoring & Logging** -- [ ] Error logging configured -- [ ] Performance monitoring enabled -- [ ] User activity tracking -- [ ] API usage monitoring - -## πŸ“Š **Performance Optimization** - -### **βœ… Performance Settings** -- [ ] Image compression enabled -- [ ] PDF generation optimized -- [ ] Caching implemented -- [ ] Database queries optimized -- [ ] API response times acceptable - -## πŸ”„ **Post-Deployment** - -### **βœ… Verification** -- [ ] All users can access component -- [ ] PDF generation working for all templates -- [ ] Error handling working correctly -- [ ] Performance meets requirements - -### **βœ… Documentation** -- [ ] User manual created -- [ ] Admin guide prepared -- [ ] Troubleshooting guide available -- [ ] Support contact information provided - -## πŸ“ž **Support & Maintenance** - -### **βœ… Support Plan** -- [ ] Support team trained -- [ ] Escalation procedures defined -- [ ] Maintenance schedule planned -- [ ] Backup and recovery procedures - ---- - -## 🎯 **Final Steps Before Go-Live** - -1. **Update PDF API URL** in both LWC and Apex controller -2. **Test complete workflow** end-to-end -3. **Verify user permissions** and access -4. **Monitor system performance** for first 24 hours -5. **Provide user training** and documentation - ---- - -**πŸŽ‰ Your Property Brochure Generator is now Production Ready!** \ No newline at end of file diff --git a/deploy-fix.sh b/deploy-fix.sh new file mode 100755 index 0000000..481b1ea --- /dev/null +++ b/deploy-fix.sh @@ -0,0 +1,57 @@ +#!/bin/bash + +echo "πŸš€ Deploying Fixed Apex Controllers to Salesforce..." +echo "==================================================" + +# Check if sf CLI is installed +if ! command -v sf &> /dev/null; then + echo "❌ Salesforce CLI (sf) is not installed. Please install it first." + echo " Visit: https://developer.salesforce.com/tools/sfdxcli" + exit 1 +fi + +# Check if we're authenticated +echo "πŸ” Checking authentication..." +if ! sf org display &> /dev/null; then + echo "❌ Not authenticated to Salesforce. Please login first:" + echo " sf org login web" + exit 1 +fi + +echo "βœ… Authenticated to Salesforce" + +# Deploy the fixed Apex controllers +echo "πŸ“¦ Deploying PropertyDataController and other Apex classes..." +sf project deploy start --source-dir force-app/main/default/classes --target-org $(sf org display --json | jq -r '.result.username') + +if [ $? -eq 0 ]; then + echo "βœ… Apex classes deployed successfully!" +else + echo "❌ Deployment failed. Please check the error messages above." + exit 1 +fi + +# Deploy the LWC component +echo "⚑ Deploying LWC component..." +sf project deploy start --source-dir force-app/main/default/lwc --target-org $(sf org display --json | jq -r '.result.username') + +if [ $? -eq 0 ]; then + echo "βœ… LWC component deployed successfully!" +else + echo "❌ LWC deployment failed. Please check the error messages above." + exit 1 +fi + +echo "" +echo "πŸŽ‰ Deployment Complete!" +echo "======================" +echo "βœ… Fixed PropertyDataController deployed" +echo "βœ… Updated LWC component deployed" +echo "βœ… No more 'pcrm__View__c' field errors" +echo "" +echo "πŸ”„ Now refresh your Salesforce org and test the dropdown!" +echo " The dropdown should now show all 24 properties without errors." +echo "" +echo "πŸ“± If you still have issues, use the debug tools in the component:" +echo " 1. Click 'πŸš€ Bypass Template' to create a working dropdown" +echo " 2. Click 'πŸ” Check Template' to debug any remaining issues" \ No newline at end of file diff --git a/force-app/main/default/classes/PDFGenerationProxy.cls b/force-app/main/default/classes/PDFGenerationProxy.cls new file mode 100644 index 0000000..c723019 --- /dev/null +++ b/force-app/main/default/classes/PDFGenerationProxy.cls @@ -0,0 +1,51 @@ +public with sharing class PDFGenerationProxy { + + @AuraEnabled + public static String generatePDFFromHTML(String htmlContent) { + try { + // Prepare the request + Http http = new Http(); + HttpRequest request = new HttpRequest(); + request.setEndpoint('https://salesforce.tech4biz.io/generate-pdf'); + request.setMethod('POST'); + request.setHeader('Content-Type', 'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW'); + + // Create multipart form data + String boundary = '----WebKitFormBoundary7MA4YWxkTrZu0gW'; + String body = ''; + body += '--' + boundary + '\r\n'; + body += 'Content-Disposition: form-data; name="input"; filename="template.html"\r\n'; + body += 'Content-Type: text/html\r\n\r\n'; + body += htmlContent + '\r\n'; + body += '--' + boundary + '--\r\n'; + + request.setBody(body); + request.setTimeout(120000); // 2 minutes timeout + + // Make the callout + HttpResponse response = http.send(request); + + if (response.getStatusCode() == 200) { + // Convert the PDF response to base64 + Blob pdfBlob = response.getBodyAsBlob(); + return EncodingUtil.base64Encode(pdfBlob); + } else { + throw new CalloutException('API call failed with status: ' + response.getStatusCode() + ' - ' + response.getBody()); + } + + } catch (Exception e) { + throw new AuraHandledException('PDF generation failed: ' + e.getMessage()); + } + } + + @AuraEnabled + public static String testAPIConnection() { + try { + // Test with simple HTML + String testHtml = 'Test

Test PDF Generation

'; + return generatePDFFromHTML(testHtml); + } catch (Exception e) { + throw new AuraHandledException('API test failed: ' + e.getMessage()); + } + } +} diff --git a/force-app/main/default/classes/PDFGenerationProxy.cls-meta.xml b/force-app/main/default/classes/PDFGenerationProxy.cls-meta.xml new file mode 100644 index 0000000..1e7de94 --- /dev/null +++ b/force-app/main/default/classes/PDFGenerationProxy.cls-meta.xml @@ -0,0 +1,5 @@ + + + 64.0 + Active + diff --git a/force-app/main/default/classes/PropertyDataController.cls b/force-app/main/default/classes/PropertyDataController.cls index 8e43913..8ceda9c 100644 --- a/force-app/main/default/classes/PropertyDataController.cls +++ b/force-app/main/default/classes/PropertyDataController.cls @@ -19,6 +19,10 @@ public with sharing class PropertyDataController { 'pcrm__Sub_Locality_Bayut_Dubizzle__c, pcrm__Tower_Bayut_Dubizzle__c, ' + 'pcrm__Sub_Community_Propertyfinder__c, pcrm__Property_Name_Propertyfinder__c, ' + 'pcrm__City_Propertyfinder__c, ' + + 'pcrm__Rent_Available_From__c, pcrm__Rent_Available_To__c, ' + + 'Contact__c, Contact__r.FirstName, Contact__r.LastName, ' + + 'Email__c, Phone__c, ' + + 'CreatedBy.Name, LastModifiedBy.Name, Owner.Name, ' + 'CreatedDate, LastModifiedDate ' + 'FROM pcrm__Property__c ' + 'ORDER BY Name ASC'; @@ -82,6 +86,10 @@ public with sharing class PropertyDataController { 'pcrm__Sub_Locality_Bayut_Dubizzle__c, pcrm__Tower_Bayut_Dubizzle__c, ' + 'pcrm__Sub_Community_Propertyfinder__c, pcrm__Property_Name_Propertyfinder__c, ' + 'pcrm__City_Propertyfinder__c, ' + + 'pcrm__Rent_Available_From__c, pcrm__Rent_Available_To__c, ' + + 'Contact__c, Contact__r.FirstName, Contact__r.LastName, ' + + 'Email__c, Phone__c, ' + + 'CreatedBy.Name, LastModifiedBy.Name, Owner.Name, ' + 'CreatedDate, LastModifiedDate ' + 'FROM pcrm__Property__c ' + 'WHERE Id = :propertyId'; @@ -129,4 +137,42 @@ public with sharing class PropertyDataController { return 0; } } -} \ No newline at end of file + + @AuraEnabled(cacheable=true) + public static List> getPropertyImages(String propertyId) { + try { + System.debug('=== FETCHING PROPERTY IMAGES ==='); + System.debug('Property ID: ' + propertyId); + + List> images = new List>(); + + // Query Image Genie records for this property + List imageRecords = [ + SELECT Id, Name, pcrm__Category__c, pcrm__Title__c, Public_URL__c, pcrm__Property__c + FROM pcrm__Image_Genie__c + WHERE pcrm__Property__c = :propertyId + ORDER BY pcrm__Category__c, Name + ]; + + System.debug('Found ' + imageRecords.size() + ' image records'); + + for (pcrm__Image_Genie__c img : imageRecords) { + Map imageData = new Map(); + imageData.put('id', img.Id); + imageData.put('name', img.pcrm__Title__c); + imageData.put('category', img.pcrm__Category__c); + imageData.put('url', img.Public_URL__c); + images.add(imageData); + + System.debug('Image: ' + img.pcrm__Title__c + ' - Category: ' + img.pcrm__Category__c + ' - URL: ' + img.Public_URL__c); + } + + return images; + + } catch (Exception e) { + System.debug('Error fetching property images: ' + e.getMessage()); + System.debug('Stack trace: ' + e.getStackTraceString()); + throw new AuraHandledException('Failed to fetch property images: ' + e.getMessage()); + } + } +} diff --git a/force-app/main/default/classes/PropertyPdfGeneratorController.cls b/force-app/main/default/classes/PropertyPdfGeneratorController.cls index 707a6b6..cbb6001 100644 --- a/force-app/main/default/classes/PropertyPdfGeneratorController.cls +++ b/force-app/main/default/classes/PropertyPdfGeneratorController.cls @@ -176,7 +176,7 @@ public with sharing class PropertyPdfGeneratorController { // Make HTTP callout to Python API Http http = new Http(); HttpRequest request = new HttpRequest(); - request.setEndpoint('https://salesforce.tech4biz.io/api/generate-pdf'); + request.setEndpoint('https://salesforce.tech4biz.io/generate-pdf'); request.setMethod('POST'); request.setHeader('Content-Type', 'application/json'); request.setBody(jsonPayload); diff --git a/force-app/main/default/classes/PropertyTemplateController.cls b/force-app/main/default/classes/PropertyTemplateController.cls index ac0e60b..aacaaec 100644 --- a/force-app/main/default/classes/PropertyTemplateController.cls +++ b/force-app/main/default/classes/PropertyTemplateController.cls @@ -86,6 +86,66 @@ public with sharing class PropertyTemplateController { } } + // Helper method to create template HTML content + private static String createTemplateHTML(Map propertyMap, String templateName) { + try { + String propertyName = (String) propertyMap.get('propertyName') != null ? (String) propertyMap.get('propertyName') : 'Property Name'; + String propertyType = (String) propertyMap.get('propertyType') != null ? (String) propertyMap.get('propertyType') : 'Property Type'; + String location = (String) propertyMap.get('location') != null ? (String) propertyMap.get('location') : 'Location'; + String price = (String) propertyMap.get('price') != null ? (String) propertyMap.get('price') : 'Price'; + String bedrooms = (String) propertyMap.get('bedrooms') != null ? (String) propertyMap.get('bedrooms') : 'N/A'; + String bathrooms = (String) propertyMap.get('bathrooms') != null ? (String) propertyMap.get('bathrooms') : 'N/A'; + String area = (String) propertyMap.get('area') != null ? (String) propertyMap.get('area') : 'N/A'; + String description = (String) propertyMap.get('description') != null ? (String) propertyMap.get('description') : 'Property Description'; + + // Create a professional property brochure HTML + String htmlContent = ''; + htmlContent += '' + propertyName + ' - Property Brochure'; + htmlContent += ''; + htmlContent += '
'; + htmlContent += '
'; + htmlContent += '

' + propertyName + '

'; + htmlContent += '
' + propertyType + ' β€’ ' + location + '
'; + htmlContent += '
'; + htmlContent += '
'; + htmlContent += '
'; + htmlContent += '
Price
' + price + '
'; + htmlContent += '
Bedrooms
' + bedrooms + '
'; + htmlContent += '
Bathrooms
' + bathrooms + '
'; + htmlContent += '
Area
' + area + '
'; + htmlContent += '
'; + htmlContent += '
'; + htmlContent += '

Property Description

'; + htmlContent += '

' + description + '

'; + htmlContent += '
'; + htmlContent += '
'; + htmlContent += '
'; + htmlContent += '

Generated on: ' + Datetime.now().format('MMMM dd, yyyy \'at\' h:mm a') + '

'; + htmlContent += '

Property CRM System - Professional Brochure

'; + htmlContent += '
'; + htmlContent += '
'; + + return htmlContent; + } catch (Exception e) { + System.debug('Error creating template HTML: ' + e.getMessage()); + return '

Error generating template

' + e.getMessage() + '

'; + } + } + @AuraEnabled public static Map generatePropertyPDF(String propertyData, String templateName, Boolean generatePDF) { try { @@ -93,12 +153,35 @@ public with sharing class PropertyTemplateController { Map propertyMap = (Map) JSON.deserializeUntyped(propertyData); // Call external Python API for PDF generation - String apiEndpoint = 'http://160.187.166.67:8000/api/generate-pdf'; // Production PDF Generator API + String apiEndpoint = 'https://salesforce.tech4biz.io/generate-pdf'; // Production PDF Generator API - // Prepare request body + // Prepare request body - using the format that was working in first prompt Map requestBody = new Map(); + + // Debug: Log the property data and template name + System.debug('=== DEBUG INFO ==='); + System.debug('propertyMap: ' + propertyMap); + System.debug('templateName: ' + templateName); + System.debug('propertyMap keys: ' + propertyMap.keySet()); + + // Generate HTML content + String generatedHTML = createTemplateHTML(propertyMap, templateName); + System.debug('Generated HTML length: ' + generatedHTML.length()); + System.debug('Generated HTML preview: ' + generatedHTML.substring(0, Math.min(200, generatedHTML.length()))); + + // Validate that HTML content was generated + if (String.isBlank(generatedHTML)) { + Map result = new Map(); + result.put('success', false); + result.put('message', 'Error: HTML content generation failed - content is empty'); + System.debug('ERROR: Generated HTML is empty!'); + return result; + } + + requestBody.put('html_content', generatedHTML); requestBody.put('property_data', propertyMap); requestBody.put('template_name', templateName); + requestBody.put('filename', 'property_brochure.pdf'); // Make HTTP callout to Python API Http http = new Http(); @@ -106,10 +189,18 @@ public with sharing class PropertyTemplateController { request.setEndpoint(apiEndpoint); request.setMethod('POST'); request.setHeader('Content-Type', 'application/json'); + request.setHeader('Accept', 'application/json'); request.setBody(JSON.serialize(requestBody)); + request.setTimeout(120000); // 2 minutes timeout + + System.debug('Calling Python API at: ' + apiEndpoint); + System.debug('Request body: ' + JSON.serialize(requestBody)); HttpResponse response = http.send(request); + System.debug('Response status: ' + response.getStatusCode()); + System.debug('Response body: ' + response.getBody()); + if (response.getStatusCode() == 200) { Map responseMap = (Map) JSON.deserializeUntyped(response.getBody()); @@ -118,11 +209,14 @@ public with sharing class PropertyTemplateController { result.put('pdfUrl', responseMap.get('pdf_url')); result.put('message', 'PDF generated successfully'); + System.debug('PDF generation successful: ' + result); return result; } else { Map result = new Map(); result.put('success', false); - result.put('message', 'Failed to generate PDF: ' + response.getStatus()); + result.put('message', 'Failed to generate PDF: ' + response.getStatus() + ' - ' + response.getBody()); + + System.debug('PDF generation failed: ' + result); return result; } diff --git a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css index eba15a1..2ca0cb6 100644 --- a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css +++ b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css @@ -1,4 +1,3 @@ - .property-brochure-generator { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); @@ -14,25 +13,17 @@ padding: 3rem 2rem; text-align: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); -} - .header-content { max-width: 1200px; margin: 0 auto; -} - /* Beautiful Purple Gradient Header for All Steps */ .step-header-gradient { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 0 0 20px 20px; padding: 40px 30px; - margin: -20px -20px 30px -20px; - text-align: center; + margin: -20px -20px 0px -20px; box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3); position: relative; overflow: hidden; -} - .step-header-gradient::before { content: ''; position: absolute; @@ -42,37 +33,23 @@ bottom: 0; background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%); pointer-events: none; -} - .main-title { - color: white; font-size: 2.5rem; font-weight: 700; margin: 0 0 10px 0; text-shadow: 0 2px 10px rgba(0,0,0,0.2); letter-spacing: 1px; - position: relative; z-index: 2; -} - .subtitle { - color: white; font-size: 1.2rem; font-weight: 400; - margin: 0; opacity: 0.95; text-shadow: 0 1px 5px rgba(0,0,0,0.2); - position: relative; - z-index: 2; -} - .header-features { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; -} - .feature-badge { background: rgba(255, 255, 255, 0.2); padding: 0.5rem 1.5rem; @@ -81,8 +58,6 @@ font-weight: 500; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); -} - /* Error Message */ .error-message { background: #fee; @@ -91,104 +66,52 @@ padding: 1rem; margin: 1rem 2rem; border-radius: 8px; - display: flex; align-items: center; justify-content: space-between; -} - .error-content { - display: flex; - align-items: center; gap: 0.5rem; -} - .error-close { background: none; border: none; - color: #c33; font-size: 1.5rem; cursor: pointer; - padding: 0; width: 24px; height: 24px; - display: flex; - align-items: center; - justify-content: center; -} - /* Step Navigation */ .step-navigation { - display: flex; - justify-content: center; gap: 2rem; padding: 2rem; background: white; - margin: 0 2rem 2rem 2rem; + margin: 0 2rem 0 2rem; border-radius: 12px; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08); -} - -.step-nav { - display: flex; +.step-nav-item { flex-direction: column; - align-items: center; - gap: 0.5rem; - cursor: pointer; - padding: 1rem; - border-radius: 8px; transition: all 0.3s ease; min-width: 120px; -} - -.step-nav:hover { +.step-nav-item:hover { background: #f8f9fa; -} - -.step-nav.active { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; +.step-nav-item.active { transform: translateY(-2px); - box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3); -} - .step-number { width: 40px; height: 40px; border-radius: 50%; background: #e9ecef; color: #6c757d; - display: flex; - align-items: center; - justify-content: center; font-weight: 600; font-size: 1.1rem; - transition: all 0.3s ease; -} - -.step-nav.active .step-number { - background: rgba(255, 255, 255, 0.2); - color: white; -} - +.step-nav-item.active .step-number { .step-label { - font-size: 0.9rem; - font-weight: 500; - text-align: center; -} - /* Step Content */ .step-content { display: none; - max-width: 1200px; - margin: 0 auto 2rem auto; - padding: 0 2rem; -} - + max-width: 1400px; + margin: 0 auto 0 auto; + padding: 2rem 3rem; .step-content.active { display: block; animation: fadeInUp 0.5s ease; -} - @keyframes fadeInUp { from { opacity: 0; @@ -197,2127 +120,1681 @@ to { opacity: 1; transform: translateY(0); - } -} - .step-header { - text-align: center; margin-bottom: 3rem; -} - .step-header h2 { - font-size: 2.5rem; font-weight: 300; margin: 0 0 1rem 0; color: #2c3e50; -} - .step-header p { - font-size: 1.2rem; - color: #6c757d; - margin: 0; -} - -/* Template Grid - Enhanced styling */ +/* Template Grid - Enhanced styling with A4 proportions */ .template-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 25px; - padding: 30px; - max-width: 1400px; - margin: 0 auto; -} - -/* Template Cards - Enhanced with shadows and different paddings */ + grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); + gap: 35px; + padding: 40px 20px; + max-width: 1600px; +/* Template Cards - Enhanced with A4 proportions and better visibility */ .template-card { - background: white; - border-radius: 12px; - padding: 25px; - cursor: pointer; - transition: all 0.3s ease; - position: relative; + border-radius: 20px; + padding: 20px; /* Further reduced padding to increase content width more */ + transition: all 0.4s ease; border: 2px solid transparent; - box-shadow: 0 4px 15px rgba(0,0,0,0.08); - overflow: hidden; -} - + box-shadow: 0 8px 25px rgba(0,0,0,0.12); + min-height: 420px; /* A4-like height */ + width: 100%; /* Ensure full width usage */ .template-card:hover { - transform: translateY(-8px); - box-shadow: 0 12px 30px rgba(0,0,0,0.15); + transform: translateY(-10px); + box-shadow: 0 15px 40px rgba(0,0,0,0.18); border-color: #667eea; -} - + border-width: 2px; .template-card.selected { - border-color: #667eea; - box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); - transform: translateY(-5px); -} - -/* Template Heights with different paddings */ + box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4); + transform: translateY(-6px); +/* Template Heights with A4 proportions */ .template-tall { - min-height: 500px; - padding: 35px 30px; -} - + min-height: 800px; /* Increased from 700px */ + padding: 25px 20px; /* Further reduced padding to increase content width more */ .template-medium { - min-height: 300px; - padding: 25px 20px; -} - + min-height: 650px; /* Increased from 550px */ + padding: 20px 15px; /* Further reduced padding to increase content width more */ .template-small { - min-height: 250px; - padding: 20px 15px; -} - + min-height: 550px; /* Increased from 480px */ + padding: 15px 10px; /* Further reduced padding to increase content width more */ +/* Enhanced Template Content Styles */ +.template-content { + flex: 1; + height: 100%; + color: #333; + line-height: 1.6; +/* Newsletter Style Template - Enhanced */ +.newsletter-style { + background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); + border-radius: 16px; +.newsletter-style::before { + width: 120px; + height: 120px; + transform: translate(30px, -30px); + opacity: 0.1; + z-index: 0; +.newsletter-style > * { + z-index: 1; +.newsletter-header h2 { + color: #667eea; + font-size: 22px; + margin-bottom: 25px; + text-transform: uppercase; +.newsletter-main h1 { + font-size: 32px; + font-weight: 800; + line-height: 1.2; +.newsletter-main p { + color: #5a6c7d; + font-size: 17px; + margin-bottom: 30px; +.newsletter-section h4 { + font-size: 20px; + margin-bottom: 18px; +.newsletter-section p { + font-size: 16px; +.cta-buttons { + margin-top: auto; +.cta-btn { + padding: 15px 35px; + letter-spacing: 0.5px; + box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); +.cta-btn:hover { + box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); +/* Modern Home Template - Enhanced with Image */ +.modern-home-preview { + background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); +.modern-home-preview::before { + width: 100px; + height: 100px; + background: url('data:image/svg+xml,') no-repeat center; + background-size: contain; +.modern-home-preview > * { +.preview-hero-section { + height: 160px; +.preview-hero-image { + width: 100%; + background: linear-gradient(45deg, #667eea, #764ba2); +.preview-hero-overlay { + background: rgba(0,0,0,0.2); + padding: 30px; +.preview-property-name { + margin-bottom: 10px; + text-shadow: 0 2px 4px rgba(0,0,0,0.5); +.preview-property-address { + opacity: 0.9; + margin-bottom: 12px; +.preview-price { + font-size: 24px; + color: #ffd700; +.preview-content-section { + gap: 20px; +.preview-stats { + justify-content: space-around; + gap: 15px; + margin-bottom: 20px; +.preview-stat { + padding: 12px 18px; + font-size: 15px; + color: #495057; + border: 1px solid #e9ecef; + box-shadow: 0 2px 8px rgba(0,0,0,0.05); +.preview-description { + padding: 20px; +.preview-title { + font-size: 18px; +.preview-text { + line-height: 1.5; +.preview-features { +.feature-item { + gap: 8px; +.feature-icon { +.feature-text { + font-size: 14px; +/* Asgar1 Template - Enhanced with Image and Fixed Viewport */ +.asgar1-preview { +.asgar1-preview::before { + top: 20px; + right: 20px; + background: url('data:image/svg+xml,') no-repeat center; +.asgar1-preview > * { +.preview-hero { + height: auto; + background: none; /* Removed background completely */ + border-radius: 0; + overflow: visible; + box-shadow: none; /* Removed shadow */ + margin-top: 20px; /* Added top margin to bring title into viewport */ + padding: 20px 0; + font-size: 28px; + margin-bottom: 15px; + text-shadow: none; /* Removed shadow since no background */ + color: #ff8c00; /* Orange color for title */ + padding: 0 10px; + word-wrap: break-word; + max-width: 100%; +.preview-content { +.preview-section { + box-shadow: 0 3px 10px rgba(0,0,0,0.08); +.preview-section-title { +.template-preview { +/* Sample Template - Enhanced with Image and Orange Text */ +.sample-preview { + background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%); +.sample-preview::before { + background: url('data:image/svg+xml,') no-repeat center; +.sample-preview > * { +.preview-header { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Changed from black to beautiful blue-purple gradient */ + padding: 20px; /* Reduced padding to increase width more */ +.preview-triangle { + width: 0; + height: 0; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 26px solid #ff8c00; /* Changed to orange to match text color */ + margin: 0 auto 20px; +.preview-company-name { + color: #ffffff; /* Changed to white as requested */ + text-shadow: 0 2px 4px rgba(0,0,0,0.3); + color: #ffffff !important; /* Changed to white as requested with !important */ + margin: 15px 0; +.preview-for-sale { + color: #ffffff; /* Changed to white for better contrast on gradient */ + text-shadow: 0 1px 3px rgba(0,0,0,0.4); + border: 1px solid #fed7d7; + color: #2d3748; +.preview-icons { + margin-top: 15px; +.preview-icon { + filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); +/* Luxury Template - Enhanced with Better Text Visibility */ +.luxury-preview { + background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%); +.luxury-preview::before { + background: url('data:image/svg+xml,') no-repeat center; +.luxury-preview > * { +.preview-luxury-header { + margin-bottom: 35px; + padding: 20px; /* Reduced padding to increase width */ + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Changed to blue-purple gradient to match 4th grid */ +.preview-luxury-header::after { +.preview-luxury-logo { + color: #FF8C00; /* Orange color for first text */ +.preview-luxury-title { + margin-bottom: 8px; + color: #ffffff; /* White color for remaining texts */ +.preview-luxury-subtitle { +.preview-luxury-content { +.preview-luxury-features { + grid-template-columns: 1fr 1fr; +.preview-feature { + padding: 15px; + border-radius: 10px; + border: 1px solid #e2e8f0; +.preview-luxury-description { +/* Selected Indicator - Enhanced */ +.selected-indicator { + top: 15px; + right: 15px; + background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); + padding: 12px 20px; + box-shadow: 0 6px 20px rgba(72, 187, 120, 0.4); + animation: slideIn 0.3s ease; +.selected-icon { +.selected-text { +@keyframes slideIn { + transform: translateX(20px); + transform: translateX(0); /* Template-specific styling - Exact colors from image with enhanced shadows */ .template-everkind { - background: #f8f9fa; - border: 1px solid #e9ecef; box-shadow: 0 6px 20px rgba(0,0,0,0.1); - padding: 40px 30px; -} - + padding: 35px 30px; .template-shift { background: #e8f4fd; border: 1px solid #d1ecf1; - box-shadow: 0 8px 25px rgba(0,0,0,0.12); - padding: 35px 25px; -} - .template-saintbarts { background: #fff5f5; - border: 1px solid #fed7d7; box-shadow: 0 7px 22px rgba(0,0,0,0.11); - padding: 38px 28px; -} - .template-learnoy { background: #f0fff4; border: 1px solid #c6f6d5; box-shadow: 0 5px 18px rgba(0,0,0,0.09); - padding: 30px 22px; -} - .template-leafamp { background: #faf5ff; border: 1px solid #e9d8fd; - box-shadow: 0 6px 20px rgba(0,0,0,0.1); - padding: 32px 24px; -} - .template-coreshift { background: #fffaf0; border: 1px solid #feebc8; - box-shadow: 0 7px 22px rgba(0,0,0,0.11); - padding: 28px 20px; -} - +.template-pdf2html { + background: #f0f8ff; + border: 1px solid #b3d9ff; + box-shadow: 0 6px 20px rgba(0,0,0,0.12); +/* Template Content Styles */ +/* Newsletter Style Template */ + color: #666; + line-height: 1.4; +/* Real Estate Flyer Preview Styles */ +.real-estate-flyer-preview { + min-height: 200px; +.preview-left { + gap: 12px; + min-height: 80px; + border-style: solid; + border-width: 0 0 20px 20px; + border-color: transparent transparent #555 transparent; +.preview-company { + margin-top: 8px; + font-size: 8px; + font-weight: bold; + margin-bottom: 2px; + margin: 8px 0 4px 0; + color: #ffffff !important; + opacity: 0.8; + padding: 8px; + border-radius: 6px; + border: 1px solid #e0e0e0; + font-size: 10px; + margin-bottom: 6px; + font-size: 7px; + line-height: 1.3; + margin-top: 6px; + width: 16px; + height: 16px; + background: linear-gradient(135deg, #667eea, #764ba2); +.preview-contact { +.preview-right { +.preview-image-placeholder { + background: repeating-conic-gradient(#ccc 0% 25%, transparent 0% 50%) 50% / 8px 8px; + height: 60px; + color: #999; +.preview-price-section { + padding: 12px; +.preview-price-label { + font-size: 6px; + margin-bottom: 4px; + font-size: 12px; +.preview-benefits { +.preview-benefit { + margin-bottom: 3px; + gap: 4px; +.preview-website { /* Blank Template - Black theme */ .template-blank { background: #2c3e50; border: 1px solid #34495e; box-shadow: 0 8px 25px rgba(0,0,0,0.2); padding: 30px 25px; - color: white; -} - .template-blank .newsletter-style { - color: white; -} - .template-blank .newsletter-header h2 { color: #ecf0f1; -} - .template-blank .newsletter-main h1 { color: #bdc3c7; -} - .template-blank .newsletter-section h4 { - color: #ecf0f1; -} - .template-blank .newsletter-section p { - color: #bdc3c7; -} - /* Newsletter Style Templates */ -.newsletter-style { - padding: 30px; font-family: 'Georgia', 'Times New Roman', serif; - color: #2c3e50; - background: white; -} - -.newsletter-header h2 { font-size: 1.8rem; - font-weight: 700; margin: 0 0 20px 0; color: #34495e; - text-transform: uppercase; letter-spacing: 2px; -} - -.newsletter-main h1 { font-size: 2.2rem; - font-weight: 300; margin: 0 0 15px 0; - color: #2c3e50; - line-height: 1.2; -} - .newsletter-main h3 { font-size: 1.4rem; - font-weight: 400; margin: 0 0 25px 0; color: #7f8c8d; - letter-spacing: 1px; -} - .newsletter-main .main-text { font-size: 1.3rem; - font-weight: 400; - margin: 0 0 20px 0; - color: #2c3e50; - line-height: 1.4; -} - .newsletter-section { - margin-bottom: 25px; -} - -.newsletter-section h4 { - font-size: 1.1rem; - font-weight: 600; margin: 0 0 12px 0; - color: #34495e; - text-transform: uppercase; - letter-spacing: 1px; -} - -.newsletter-section p { font-size: 0.95rem; - font-weight: 400; - margin: 0 0 15px 0; - color: #5a6c7d; - line-height: 1.5; -} - .newsletter-section h5 { font-size: 1rem; - font-weight: 500; - margin: 0 0 10px 0; - color: #2c3e50; - line-height: 1.3; -} - /* Call-to-Action Buttons */ -.cta-buttons { - display: flex; - gap: 12px; - flex-wrap: wrap; - margin-top: 15px; -} - -.cta-btn { - background: #2c3e50; - color: white; - border: none; padding: 10px 16px; border-radius: 4px; font-size: 0.85rem; - font-weight: 600; - cursor: pointer; transition: all 0.2s ease; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.cta-btn:hover { background: #34495e; transform: translateY(-1px); -} - /* Episode Sections */ .episode { - margin-bottom: 20px; - padding: 15px; - background: #f8f9fa; - border-radius: 6px; border-left: 3px solid #3498db; -} - .episode h5 { - margin-bottom: 12px; -} - /* Destinations */ .destinations { - display: flex; - gap: 15px; margin-top: 10px; -} - .destination { background: #ecf0f1; - color: #2c3e50; padding: 8px 16px; - border-radius: 20px; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 1px; -} - /* Template Content */ -.template-content { - height: 100%; - display: flex; - flex-direction: column; - justify-content: space-between; -} - .template-icon { font-size: 3rem; - text-align: center; margin-bottom: 1rem; -} - .template-content h3 { - font-size: 1.8rem; - font-weight: 600; - margin: 0 0 1rem 0; - line-height: 1.2; - text-align: center; -} - .template-content p { - font-size: 1rem; margin: 0 0 1.5rem 0; - opacity: 0.9; - line-height: 1.5; - text-align: center; flex-grow: 1; -} - .template-meta { - display: flex; - justify-content: center; - gap: 0.5rem; - flex-wrap: wrap; -} - .category, .style { - background: rgba(255, 255, 255, 0.2); padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.8rem; - font-weight: 500; - backdrop-filter: blur(10px); -} - /* Selected Indicator - Enhanced positioning */ -.selected-indicator { - position: absolute; - top: 20px; - right: 20px; background: #667eea; - color: white; padding: 10px 15px; - border-radius: 25px; - font-size: 0.85rem; - font-weight: 600; - display: flex; - align-items: center; gap: 6px; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); z-index: 100; opacity: 1; visibility: visible; - backdrop-filter: blur(10px); -} - -.selected-icon { - font-size: 1.1rem; - color: white; -} - -.selected-text { - color: white; - font-weight: 600; -} - /* Ensure selected state is visible */ .template-card.selected .selected-indicator { - opacity: 1; - visibility: visible; - display: flex; -} - /* Step Actions */ .step-actions { - display: flex; - justify-content: center; - gap: 1rem; - margin-top: 2rem; -} - + margin-top: 0.5rem; .btn { padding: 1rem 2rem; - border: none; - border-radius: 8px; - font-size: 1rem; - font-weight: 500; - cursor: pointer; - transition: all 0.3s ease; - display: flex; - align-items: center; - gap: 0.5rem; text-decoration: none; min-width: 140px; - justify-content: center; -} - .btn-primary { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; -} - .btn-primary:hover:not(:disabled) { - transform: translateY(-2px); - box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); -} - .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; -} - .btn-secondary { background: #6c757d; - color: white; -} - .btn-secondary:hover { background: #5a6268; - transform: translateY(-2px); -} - .btn-icon { - font-size: 1.1rem; transition: transform 0.3s ease; -} - .btn:hover .btn-icon { transform: translateX(2px); -} - .btn-secondary:hover .btn-icon { transform: translateX(-2px); -} - /* Step 2 Content */ .step2-content { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 3rem; +/* Step 2 Grid Layout */ +.step2-grid-row-1 { margin-bottom: 2rem; -} - +.step2-grid-row-2 { + grid-column: 1 / span 2; .property-section, .market-analysis-section { - background: white; - padding: 2rem; - border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); -} - .property-section h3, .market-analysis-section h3 { - font-size: 1.5rem; - font-weight: 600; - margin: 0 0 1rem 0; - color: #2c3e50; -} - .property-dropdown { - width: 100%; - padding: 1rem; border: 2px solid #e9ecef; - border-radius: 8px; - font-size: 1rem; - background: white; transition: border-color 0.3s ease; -} - .property-dropdown:focus { outline: none; - border-color: #667eea; -} - /* Property Details Display */ .property-details-display { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e9ecef; -} - .property-details-display h4 { - font-size: 1.2rem; - font-weight: 600; - margin: 0 0 1rem 0; - color: #2c3e50; -} - .property-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1rem; -} - .property-item { - display: flex; flex-direction: column; gap: 0.3rem; -} - .property-item .label { - font-size: 0.9rem; - color: #6c757d; - font-weight: 500; - } .property-item .value { - font-size: 1rem; - color: #2c3e50; - font-weight: 500; -} - /* Market Analysis Options */ .market-analysis-section p { - color: #6c757d; margin-bottom: 1.5rem; - } - .market-options { - display: flex; - flex-direction: column; gap: 1rem; -} - .checkbox-item { - display: flex; - align-items: center; gap: 0.8rem; - cursor: pointer; padding: 0.5rem; - border-radius: 6px; transition: background-color 0.3s ease; -} - .checkbox-item:hover { - background: #f8f9fa; -} - .checkbox-item input[type="checkbox"] { - display: none; -} - .checkmark { width: 20px; height: 20px; border: 2px solid #dee2e6; - border-radius: 4px; - position: relative; - transition: all 0.3s ease; -} - .checkbox-item input[type="checkbox"]:checked + .checkmark { - background: #667eea; - border-color: #667eea; -} - .checkbox-item input[type="checkbox"]:checked + .checkmark::after { content: 'βœ“'; - position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - color: white; - font-size: 14px; - font-weight: bold; -} - .label-text { - font-size: 1rem; - color: #2c3e50; - font-weight: 500; -} - /* Editor Container */ .editor-container { - display: flex; - gap: 20px; margin-top: 20px; -} - /* Left Toolbar - Original Layout */ .editor-toolbar.left { width: 300px; flex-shrink: 0; - background: #f8f9fa; border: 1px solid #dee2e6; - border-radius: 8px; - padding: 20px; height: fit-content; -} - .toolbar-section { - margin-bottom: 25px; -} - .toolbar-section:last-child { margin-bottom: 0; -} - .toolbar-section-title { - font-weight: 600; - color: #495057; - margin-bottom: 15px; - font-size: 14px; - text-transform: uppercase; - letter-spacing: 0.5px; border-bottom: 2px solid #dee2e6; padding-bottom: 5px; -} - .toolbar-group { - display: flex; - flex-direction: column; gap: 10px; - margin-bottom: 15px; -} - .toolbar-group:last-child { - margin-bottom: 0; -} - .toolbar-button { background: #ffffff; - border: 1px solid #dee2e6; - border-radius: 6px; - padding: 10px 15px; font-size: 13px; - color: #495057; - cursor: pointer; - transition: all 0.2s ease; - display: flex; - align-items: center; - gap: 8px; - width: 100%; box-sizing: border-box; -} - + margin-bottom: 0.5rem; .toolbar-button:hover { - background: #e9ecef; border-color: #adb5bd; - transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.1); -} - .toolbar-button:active { background: #dee2e6; transform: translateY(0); -} - +/* Z-Index Control */ +.z-index-controls { +.z-index-input { + width: 80px; + border: 1px solid #ddd; +.z-index-input:focus { + box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2); +/* Draggable Elements */ +.draggable-text-box { + transition: box-shadow 0.2s ease; +.draggable-text-box:hover { + box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); +.draggable-text-box:focus { + border: 2px solid #667eea; + box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2); +.draggable-image-container { +.draggable-image-container:hover { +/* Resizer */ +.resizer { +.resizer:hover { + background: #5a67d8 !important; + transform: scale(1.2); +/* Delete Button */ +.delete-btn { +.delete-btn:hover { + transform: scale(1.1); + background: #ff3742 !important; +/* Copy Button */ +.copy-btn { +.copy-btn:hover { + background: #26de81 !important; +/* Image Control Panel */ +.image-control-panel { + transition: opacity 0.3s ease; +.control-btn { +.control-btn:hover { + background: rgba(255, 255, 255, 0.2) !important; +/* Sticky Info Panel */ + .sticky-info-panel { + display: none !important; + position: fixed; + top: 150px; + right: 20px; + width: 320px; + background: white; + border: 2px solid #667eea; + border-radius: 8px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); + z-index: 10000; + transition: all 0.3s ease; + } +.sticky-info-panel.collapsed { + width: 200px; +.info-panel-header { + padding: 12px 15px; + border-radius: 6px 6px 0 0; +.info-panel-title { +.info-panel-toggle { + border-radius: 3px; + transition: background 0.2s ease; +.info-panel-toggle:hover { +.info-panel-content { + max-height: 500px; + overflow-y: scroll; + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* IE and Edge */ +.info-panel-content::-webkit-scrollbar { + display: none; /* Chrome, Safari, Opera */ +.info-section { +.info-section:last-child { +.info-section h4 { + border-bottom: 1px solid #e9ecef; +.info-section ul { + padding-left: 20px; +.info-section li { + margin-bottom: 5px; +.info-section strong { +/* Selection Handles */ +.selection-handle { +.selection-handle:hover { +/* Selected Elements */ +.draggable-text-box.selected, +.draggable-image-container.selected { + box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3); /* Insert Content Section - Fixed Layout */ .insert-content-section .toolbar-group { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 10px; -} - + gap: 5px; .insert-content-section .toolbar-group:first-child { - grid-template-columns: 1fr 1fr; -} - .insert-content-section .toolbar-group:last-child { - grid-template-columns: 1fr 1fr; -} - /* Text Formatting */ .text-formatting-section .toolbar-group { - display: flex; flex-direction: row; - align-items: center; - gap: 10px; -} - .text-formatting-section label { - font-size: 12px; - color: #6c757d; min-width: 80px; -} - .text-formatting-section select { - background: white; - border: 1px solid #dee2e6; - border-radius: 4px; padding: 6px 8px; - font-size: 12px; - color: #495057; - min-width: 120px; - flex: 1; -} - /* Text Styling */ .text-styling-section .toolbar-group { - display: grid; grid-template-columns: repeat(2, 1fr); - gap: 8px; -} - .text-styling-section .toolbar-button { - justify-content: center; - text-align: center; min-height: 40px; - font-weight: 600; -} - /* Text Alignment */ .text-alignment-section .toolbar-group { - display: grid; grid-template-columns: repeat(3, 1fr); - gap: 8px; -} - .text-alignment-section .toolbar-button { - justify-content: center; - text-align: center; - min-height: 40px; -} - /* Right Editor Area */ .editor-right { - flex: 1; - background: white; - border: 1px solid #dee2e6; - border-radius: 8px; - padding: 20px; min-height: 600px; -} - +/* Preview frame with responsive dimensions for different page sizes */ .preview-frame { - width: 100%; - min-height: 600px; - border: none; - outline: none; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - line-height: 1.6; - color: #333; - background: white; -} - + background: #f5f5f5; +/* Individual page containers */ +.preview-page { + border: 2px solid #ddd; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + page-break-after: always; + break-after: page; +/* Page size specific dimensions */ +.preview-page.page-size-a4 { + width: 210mm; + height: 297mm; + transform: scale(0.9); +.preview-page.page-size-a3 { + width: 297mm; + height: 420mm; + transform: scale(0.5); +.preview-frame.page-size-a4 { +.preview-frame.page-size-a3 { + transform: scale(0.5); /* Reduced scale to prevent breaking */ +/* A4 Content Scaling and Responsiveness */ +.preview-frame * { + overflow-wrap: break-word; +/* Ensure all content fits within A4 dimensions */ +.preview-frame img, +.preview-frame video, +.preview-frame iframe { + object-fit: contain; +/* A4 Grid Layout Optimization - REMOVED */ +/* A4 Text Optimization */ +.preview-frame h1 { + font-size: clamp(20px, 4vw, 28px); +.preview-frame h2 { + font-size: clamp(16px, 3vw, 18px); +.preview-frame p { + font-size: clamp(12px, 2.5vw, 14px); +/* Page number indicator for each page */ +.preview-page::before { + content: attr(data-page-number); + top: 10px; + padding: 5px 10px; + z-index: 10; +/* Page Size Options */ +.page-size-section { +.page-size-label { +.page-size-options { +.page-size-option { + padding: 0.5rem 1rem; +.page-size-option:hover { +.page-size-option input[type="radio"] { +.page-size-option input[type="radio"]:checked + .page-size-text { +.page-size-text { + transition: color 0.2s ease; +/* Template Preview Content Styles */ +.preview-left, .preview-right { + border-left: 20px solid #555; + border-top: 20px solid transparent; + border-bottom: 20px solid transparent; + color: #ffffff; + background: rgba(255,255,255,0.9); + color: #ff6b35; + font-size: 11px; + background: #f0f0f0; +/* A4 Page Break Indicators */ +.a4-page-break { + page-break-before: always; + break-before: page; +.a4-page-break div { + margin: 10px 0; + padding: 5px; + border: 1px dashed #ddd; +/* A4 Content Overflow Handling */ + overflow-x: hidden; + overflow-y: auto; +/* Ensure content fits within A4 bounds */ +.preview-frame > * { + max-width: 170mm; /* 210mm - 40mm padding */ + margin-left: auto; + margin-right: auto; +/* Additional Template Preview Styles */ +/* Luxury and Modern Template Styles */ +.luxury-mansion-preview, +.modern-apartment-preview { +.luxury-mansion-preview h2, +.modern-apartment-preview h2 { +.luxury-mansion-preview h3, +.modern-apartment-preview h3 { +.luxury-mansion-preview p, +.modern-apartment-preview p { + color: #888; +.feature-list { + color: #555; +/* Enhanced Luxury Template Styles */ +.preview-crown { + color: #8B4513; + color: #ffffff; /* White color for subtitle text */ + color: #777; +/* Enhanced Modern Template Styles */ +.modern-preview { +.preview-modern-header { +.preview-modern-icon { +.preview-modern-title { + color: #2E86AB; +.preview-modern-subtitle { + color: #A23B72; +.preview-modern-features { +.preview-modern-description { +/* Serenity Shores Template Styles (sample5.html) */ +.serenity-preview { +.preview-serenity-header { +.preview-logo { + color: #82A09A; + border: 2px solid #82A09A; + padding: 6px 12px; + display: inline-block; +.preview-serenity-title { +.preview-serenity-subtitle { +.preview-serenity-features { +.preview-serenity-description { +/* Prestige Real Estate Template Styles (sample4.html) */ +.prestige-preview { +.preview-prestige-header { +.preview-prestige-logo { + color: #C0A062; + border: 2px solid #C0A062; +.preview-prestige-title { + color: #121212; +.preview-prestige-subtitle { +.preview-prestige-features { +.preview-prestige-description { +/* Property Brochure Template Styles (sample3.html) */ +.brochure-preview { +.preview-brochure-header { +.preview-brochure-icon { +.preview-brochure-title { + color: #003366; +.preview-brochure-subtitle { +.preview-brochure-features { +.preview-brochure-description { +/* Template Preview Features */ + padding-top: 20px; + border-top: 1px solid rgba(0,0,0,0.1); +.preview-features .feature-item { +.preview-features .feature-icon { +.preview-features .feature-text { +/* Enhanced padding for last 3 grids */ +.template-serenity, +.template-prestige, +.template-brochure { + padding: 40px 35px; + background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%); + min-height: 320px; +.template-serenity::before, +.template-prestige::before, +.template-brochure::before { + background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,249,250,0.9) 100%); + z-index: -1; +.template-serenity .template-content, +.template-prestige .template-content, +.template-brochure .template-content { /* Responsive Design */ @media (max-width: 1200px) { .editor-container { - flex-direction: column; - } - .editor-toolbar.left { width: 100%; order: 2; - } - .editor-right { order: 1; - } -} - + .preview-frame { + transform: scale(0.7); + margin: 20px auto; + width: 95%; + max-width: 210mm; + .template-grid { + /* Grid removed - using default layout */ + gap: 25px; + padding: 30px 15px; + .step-content { + padding: 1.5rem 2rem; @media (max-width: 768px) { - .insert-content-section .toolbar-group { + transform: scale(0.6); + margin: 10px auto; + width: 90%; + padding: 15mm; + /* Mobile A4 Optimization */ + .preview-frame h1 { + font-size: clamp(18px, 5vw, 24px); + .preview-frame h2 { + font-size: clamp(14px, 4vw, 16px); + .preview-frame p { + font-size: clamp(11px, 3vw, 13px); grid-template-columns: 1fr; - } - + gap: 20px; + padding: 20px 15px; + .template-card { + padding: 25px 20px; + min-height: 250px; + padding: 1rem 1.5rem; +@media (max-width: 480px) { + transform: scale(0.5); + width: 85%; + padding: 10mm; + /* Small Mobile A4 Optimization */ + font-size: clamp(16px, 6vw, 20px); + font-size: clamp(12px, 5vw, 14px); + font-size: clamp(10px, 4vw, 12px); + .insert-content-section .toolbar-group { .text-styling-section .toolbar-group { grid-template-columns: repeat(2, 1fr); - } - .text-alignment-section .toolbar-group { grid-template-columns: repeat(3, 1fr); - } -} - /* Hide header in step 3 */ .step-3 .step-header { - display: none; -} - /* Page Management */ .page-container { - margin-bottom: 30px; border: 2px solid #e0e0e0; - border-radius: 8px; - background: white; - position: relative; - overflow: visible; -} - .page-header { - background: #f8f9fa; padding: 15px 20px; border-bottom: 2px solid #e0e0e0; - border-radius: 6px 6px 0 0; - display: flex; - align-items: center; - justify-content: space-between; -} - .page-title { - font-size: 1.1rem; - font-weight: 600; - color: #495057; - margin: 0; -} - .page-number { background: #6f42c1; - color: white; padding: 4px 12px; - border-radius: 20px; - font-size: 0.8rem; - font-weight: 600; -} - .page-content { - padding: 20px; min-height: 400px; - overflow: visible; -} - .page-content[contenteditable="true"] { - outline: none; cursor: text; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - line-height: 1.6; - color: #333; -} - .page-content[contenteditable="true"]:focus { border: 2px solid #6f42c1; - border-radius: 6px; -} - /* Page Navigation */ .page-navigation { - display: none; -} - /* Custom Popup Styling */ .custom-popup { position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; background: rgba(0, 0, 0, 0.5); - display: flex; - align-items: center; - justify-content: center; z-index: 10000; backdrop-filter: blur(4px); -} - .custom-popup-content { - background: white; - border-radius: 12px; - padding: 30px; max-width: 500px; width: 90%; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); - position: relative; - border: 1px solid #e0e0e0; -} - .custom-popup-header { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #6f42c1; -} - .custom-popup-title { - font-size: 1.5rem; - font-weight: 600; - color: #2c3e50; - margin: 0; -} - .custom-popup-close { - background: #6f42c1; - color: white; - border: none; width: 32px; height: 32px; - border-radius: 50%; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - font-size: 1.2rem; - transition: all 0.2s ease; -} - .custom-popup-close:hover { background: #8e44ad; - transform: scale(1.1); -} - .custom-popup-body { - margin-bottom: 25px; -} - .custom-popup-footer { - display: flex; - gap: 12px; justify-content: flex-end; -} - .custom-popup-btn { padding: 10px 20px; - border-radius: 6px; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; - border: none; - font-size: 0.9rem; -} - .custom-popup-btn-primary { - background: #6f42c1; - color: white; -} - .custom-popup-btn-primary:hover { - background: #8e44ad; - transform: translateY(-1px); -} - .custom-popup-btn-secondary { - background: #f8f9fa; - color: #495057; border: 1px solid #d0d0d0; -} - .custom-popup-btn-secondary:hover { - background: #e9ecef; -} - /* Success/Error Notifications */ .notification { - position: fixed; - top: 20px; - right: 20px; - padding: 15px 20px; - border-radius: 8px; - color: white; - font-weight: 500; z-index: 10001; animation: slideInRight 0.3s ease; max-width: 350px; -} - .notification.success { background: linear-gradient(135deg, #28a745 0%, #20c997 100%); box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3); -} - .notification.error { background: linear-gradient(135deg, #dc3545 0%, #e74c3c 100%); box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3); -} - @keyframes slideInRight { - from { transform: translateX(100%); - opacity: 0; -} - to { - transform: translateX(0); - opacity: 1; - } -} - /* Loading Spinner */ .loading-spinner { - width: 16px; - height: 16px; border: 2px solid #ffffff; border-top: 2px solid transparent; - border-radius: 50%; animation: spin 1s linear infinite; - display: inline-block; -} - @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } -} - /* Header and Footer Edit Buttons */ .header-section, .footer-section { - position: relative; -} - .header-section .edit-btn, .footer-section .edit-btn { - position: absolute; - top: 10px; right: 10px; background: rgba(255,255,255,0.2); - padding: 5px 10px; - border-radius: 15px; - font-size: 0.8rem; - cursor: pointer; - color: white; - border: none; - transition: background 0.2s ease; -} - .header-section .edit-btn:hover, .footer-section .edit-btn:hover { background: rgba(255,255,255,0.3); -} - /* Property Details Grid */ .property-details-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 20px; - margin-bottom: 30px; -} - .property-detail-item { - background: #f8f9fa; - padding: 15px; - border-radius: 8px; border-left: 4px solid #667eea; transition: transform 0.2s ease, box-shadow 0.2s ease; -} - .property-detail-item:hover { - transform: translateY(-2px); box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2); -} - .property-detail-label { - font-weight: 600; - color: #667eea; - margin-bottom: 5px; - font-size: 0.9rem; -} - .property-detail-value { - font-size: 1.1rem; - color: #2c3e50; -} - /* Template-specific sections */ .template-section { - background: #f8f9fa; - padding: 20px; - border-radius: 8px; - margin-bottom: 30px; - border-left: 4px solid #667eea; -} - .template-section h3 { - color: #2c3e50; margin-top: 0; - font-size: 1.3rem; -} - .template-section ul { - color: #495057; - margin: 0; - padding-left: 20px; -} - .template-section li { - margin-bottom: 8px; - line-height: 1.4; -} - /* Editable content areas */ .editable-area { - background: #f8f9fa; - padding: 20px; - border-radius: 8px; - margin-bottom: 30px; border: 2px dashed #dee2e6; transition: border-color 0.2s ease; -} - .editable-area:hover { - border-color: #667eea; -} - .editable-area h3 { - color: #6c757d; - margin-top: 0; - font-size: 1.3rem; -} - .editable-area p { - color: #6c757d; font-style: italic; - margin: 0; -} - /* Responsive Toolbar */ -@media (max-width: 1200px) { .editor-toolbar { - flex-direction: column; align-items: stretch; -} - .toolbar-group { - justify-content: center; flex-wrap: wrap; - } -} - -@media (max-width: 768px) { - .toolbar-group { - flex-direction: column; - align-items: stretch; -} - .toolbar-btn { - width: 100%; justify-content: center; -} -} - -@media (max-width: 768px) { .step-header-gradient { padding: 30px 20px; margin: -15px -15px 25px -15px; - } - .main-title { font-size: 2rem; - } - .subtitle { font-size: 1rem; -} - .step-navigation { - flex-direction: column; - gap: 1rem; margin: 0 1rem 1rem 1rem; -} - .step2-content { - grid-template-columns: 1fr; - gap: 2rem; - } - - .template-grid { - grid-template-columns: 1fr; gap: 1.5rem; -} - - .step-content { padding: 0 1rem; - } - .header-section { padding: 2rem 1rem; -} -} - -@media (max-width: 480px) { - .main-title { - font-size: 2rem; - } - - .subtitle { font-size: 1.1rem; -} - .header-features { - flex-direction: column; align-items: center; -} - .btn { padding: 0.8rem 1.5rem; font-size: 0.9rem; -} -} - /* PDF Preview Popup */ .pdf-preview-overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; background: rgba(0, 0, 0, 0.7); - z-index: 10000; - display: flex; - align-items: center; - justify-content: center; - padding: 20px; -} - .pdf-preview-popup { - background: white; - border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); max-width: 90%; max-height: 90%; width: 800px; - display: flex; - flex-direction: column; - overflow: hidden; -} - .pdf-preview-header { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; padding: 20px 30px; - display: flex; - justify-content: space-between; - align-items: center; border-radius: 12px 12px 0 0; -} - .pdf-preview-header h3 { - margin: 0; - font-size: 1.5rem; - font-weight: 600; -} - .close-btn { - background: none; - border: none; - color: white; - font-size: 1.5rem; - cursor: pointer; - padding: 5px; - border-radius: 50%; - width: 40px; - height: 40px; - display: flex; - align-items: center; - justify-content: center; - transition: background 0.2s ease; -} - .close-btn:hover { - background: rgba(255, 255, 255, 0.2); -} - .pdf-preview-content { - flex: 1; - padding: 30px; - overflow-y: auto; - max-height: 500px; -} - .pdf-preview-content .preview-frame { - border: 2px solid #dee2e6; - border-radius: 8px; - padding: 20px; - background: white; - min-height: 400px; -} - .pdf-preview-actions { - padding: 20px 30px; - background: #f8f9fa; border-top: 1px solid #dee2e6; - display: flex; - gap: 15px; - justify-content: flex-end; border-radius: 0 0 12px 12px; -} - .pdf-preview-actions .export-pdf-btn { position: static !important; top: auto !important; right: auto !important; -} - /* Page Navigation Buttons in Toolbar */ .page-nav-btn { - background: #f8f9fa; - border: 1px solid #d0d0d0; - color: #495057; width: 35px; height: 35px; - border-radius: 6px; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - font-size: 0.9rem; - font-weight: 600; - transition: all 0.2s ease; -} - .page-nav-btn:hover { - background: #6f42c1; - color: white; border-color: #6f42c1; - transform: translateY(-1px); -} - .page-nav-btn.active { - background: #6f42c1; - color: white; - border-color: #6f42c1; box-shadow: 0 2px 8px rgba(111, 66, 193, 0.3); -} - /* Active page styling */ .active-page { display: block !important; -} - .page-container:not(.active-page) { - display: none; -} - /* Enhanced Dropdown Styling for Step 2 */ .property-selector { margin: 20px 0; -} - .property-selector label { - display: block; - margin-bottom: 8px; - font-weight: 600; - color: #333; -} - .property-selector select { - width: 100%; - padding: 12px; - border: 2px solid #e0e0e0; - border-radius: 8px; - font-size: 16px; - background: white; - transition: border-color 0.3s ease; -} - .property-selector select:focus { - outline: none; - border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); -} - .property-selector select option { - padding: 8px; -} - /* Enhanced Property Details Display */ .property-details { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 12px; padding: 25px; - margin-top: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); -} - + gap: 30px; + align-items: start; .property-details h4 { - color: #2c3e50; - margin: 0 0 20px 0; - font-size: 1.2rem; - font-weight: 600; -} - -.property-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 15px; -} - + grid-column: 1 / -1; +.property-section-group { + box-shadow: 0 4px 15px rgba(0,0,0,0.08); +.property-section-group:hover { +.property-section-group h5 { +.property-description { + /* Grid removed - using default layout */ .property-field { - display: flex; - justify-content: space-between; - align-items: center; - padding: 12px 15px; - background: white; - border-radius: 8px; - border: 1px solid #e9ecef; -} - + padding: 15px 18px; +.property-field:hover { + transform: translateX(5px); .property-field .label { - font-weight: 600; - color: #6c757d; - font-size: 0.9rem; -} - .property-field .value { - font-weight: 500; - color: #2c3e50; - font-size: 0.9rem; -} - -/* Export PDF Button - Improved */ + text-align: right; +/* Special styling for contact details */ +.contact-details-section { + background: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 100%); + border-left: 4px solid #28a745; +.contact-details-section .property-field { + border: 1px solid #d4edda; +/* Special styling for location details */ +.location-details-section { + background: linear-gradient(135deg, #f8f9fa 0%, #fff3cd 100%); + border-left: 4px solid #ffc107; +.location-details-section .property-field { + border: 1px solid #ffeaa7; +/* Special styling for specifications */ +.specifications-section { + background: linear-gradient(135deg, #f8f9fa 0%, #e8f5e8 100%); +.specifications-section .property-field { + border: 1px solid #c3e6cb; +/* Special styling for pricing */ +.pricing-section { + background: linear-gradient(135deg, #f8f9fa 0%, #fff5f5 100%); + border-left: 4px solid #dc3545; +.pricing-section .property-field { + border: 1px solid #f5c6cb; +/* Special styling for availability */ +.availability-section { + background: linear-gradient(135deg, #f8f9fa 0%, #f0f8ff 100%); + border-left: 4px solid #17a2b8; +.availability-section .property-field { + border: 1px solid #bee5eb; +/* Special styling for amenities */ +.amenities-section { + background: linear-gradient(135deg, #f8f9fa 0%, #f8f9fa 100%); + border-left: 4px solid #6f42c1; +.amenities-section .property-field { +/* Special styling for basic info */ +.basic-info-section { +.basic-info-section .property-field { + border: 1px solid #bbdefb; +/* Grid Layout for Property Details - Two Top Rectangles + One Bottom Rectangle */ +.property-details-layout { + margin-top: 30px; +.property-details-layout h3 { + border-bottom: 2px solid #667eea; +/* Top Row: Two Smaller Rectangles Side by Side */ +.property-details-top-row { + min-height: fit-content; +.property-details-top-left, +.property-details-top-right { + grid-template-columns: 1fr; +/* Bottom Row: One Larger Rectangle - Full Width */ +.property-details-bottom-row { + clear: both; +/* Ensure property section groups maintain structure */ + box-shadow: 0 2px 8px rgba(0,0,0,0.1); +/* Ensure proper spacing and layout flow */ + padding-top: 0; + border-bottom: 2px solid #f0f0f0; + padding-bottom: 8px; + padding: 8px 12px; + background: #e3f2fd; + margin-left: 10px; +/* Description section styling - Left aligned */ +.description-section .property-description { + text-align: left; +.description-section .property-field { + align-items: flex-start; +.description-section .property-field .label { +.description-section .property-field .value { +/* Export PDF Button - Improved - Fixed positioning */ .export-pdf-section { - position: absolute; - top: 20px; - right: 20px; z-index: 1000; -} - + background: rgba(255, 255, 255, 0.9); + padding: 16px 20px; + border: 2px solid #e3f2fd; + min-width: 200px; + max-width: 220px; +/* A4 Page Size Detection and Styling */ +.a4-page { +.a4-page-content { + padding: 20mm; +.page-break { + margin-bottom: 10mm; +.page-indicator { + bottom: 5mm; + right: 5mm; + background: rgba(255, 255, 255, 0.8); + padding: 2px 6px; .export-pdf-btn { - background: linear-gradient(135deg, #667eea, #764ba2); - color: white; - border: none; - padding: 15px 30px; - border-radius: 25px; - font-weight: 600; - font-size: 14px; - cursor: pointer; - box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); - transition: all 0.3s ease; - text-transform: uppercase; - letter-spacing: 0.5px; -} - + background: transparent; + padding: 12px 24px; + box-shadow: none; + letter-spacing: 0.3px; + white-space: nowrap; + line-height: 1; .export-pdf-btn:hover { - transform: translateY(-3px); - box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5); -} - .export-pdf-btn:disabled { - opacity: 0.6; - cursor: not-allowed; - transform: none; -} - +/* Page Count Display */ +.page-count-display { + margin-top: 4px; +.page-count-text { + color: #28a745; + padding: 4px 8px; + background: rgba(40, 167, 69, 0.1); + border: 1px solid rgba(40, 167, 69, 0.3); +/* Complete Property Details Styling */ +.complete-property-details { +.category-section { +.category-heading { + border-bottom: 2px solid #e9ecef; +.category-fields { +.field-item { +.field-item:hover { + box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1); +.field-label { + margin-right: 12px; +.field-value { + word-break: break-word; +/* Progress Text Display */ +.progress-text-display { +.progress-message { + color: #007bff; + background: rgba(248, 249, 250, 0.9); + border: 1px solid rgba(222, 226, 230, 0.7); +/* Responsive design for smaller screens */ + .export-pdf-section { + position: relative; + top: auto; + right: auto; + max-width: 190px; + .export-pdf-btn { + padding: 12px 24px; + font-size: 11px; + margin-right: 0; +/* PDF Generation Progress Indicator */ +.pdf-progress-indicator { +.pdf-progress-indicator .spinner { + border: 3px solid #f3f3f3; + border-top: 3px solid #007bff; +.pdf-progress-indicator .progress-text { /* Progress Bar for PDF Generation */ .progress-bar { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; background: rgba(0, 0, 0, 0.8); - display: flex; - align-items: center; - justify-content: center; - z-index: 10000; -} - .progress-content { - background: white; padding: 40px; - border-radius: 15px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); - text-align: center; max-width: 400px; - width: 90%; -} - .progress-spinner { width: 60px; - height: 60px; border: 4px solid #f3f3f3; border-top: 4px solid #667eea; - border-radius: 50%; - animation: spin 1s linear infinite; - margin: 0 auto 20px; -} - .progress-text { - font-size: 18px; - font-weight: 600; - color: #333; - margin-bottom: 20px; -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - /* Progress bar animation */ .progress-bar .progress-content { animation: slideIn 0.3s ease-out; -} - -@keyframes slideIn { - from { - opacity: 0; transform: translateY(-20px); - } - to { - opacity: 1; - transform: translateY(0); -} -} - /* Loading Indicator */ .loading-indicator { - text-align: center; - padding: 20px; - background: #f8f9fa; - border-radius: 8px; - margin: 15px 0; - color: #6c757d; - font-style: italic; -} - .loading-indicator::before { content: "⏳ "; margin-right: 8px; -} - /* Debug Info */ .debug-info { background: #e3f2fd !important; border: 1px solid #2196f3; color: #1565c0; font-family: monospace; - font-size: 11px; -} - /* Editor Toolbar - Fixed Layout */ .editor-toolbar { - background: #f8f9fa; - border: 1px solid #dee2e6; - border-radius: 8px; - padding: 15px; - margin-bottom: 20px; - box-shadow: 0 2px 4px rgba(0,0,0,0.1); - max-width: 100%; - overflow: hidden; -} - -.editor-toolbar.left { - width: 100%; - max-width: 100%; - box-sizing: border-box; -} - -.toolbar-section { - margin-bottom: 20px; padding: 10px; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; -} - -.toolbar-section:last-child { - margin-bottom: 0; -} - -.toolbar-section-title { - font-weight: 600; - color: #495057; - margin-bottom: 10px; - font-size: 14px; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.toolbar-group { - display: flex; - flex-wrap: wrap; - gap: 8px; - align-items: center; - margin-bottom: 10px; -} - -.toolbar-group:last-child { - margin-bottom: 0; -} - -.toolbar-button { - background: #ffffff; - border: 1px solid #dee2e6; - border-radius: 4px; - padding: 8px 12px; - font-size: 12px; - color: #495057; - cursor: pointer; - transition: all 0.2s ease; - display: flex; - align-items: center; - gap: 6px; min-width: fit-content; - max-width: 100%; - box-sizing: border-box; -} - -.toolbar-button:hover { - background: #e9ecef; - border-color: #adb5bd; -} - -.toolbar-button:active { - background: #dee2e6; -} - .button-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 8px; - width: 100%; -} - .button-grid .toolbar-button { - justify-content: center; - text-align: center; min-height: 36px; -} - /* Form Controls */ .toolbar-group label { - font-size: 12px; - color: #6c757d; - margin-right: 8px; - white-space: nowrap; -} - .toolbar-group select { - background: white; - border: 1px solid #dee2e6; - border-radius: 4px; - padding: 6px 8px; - font-size: 12px; - color: #495057; min-width: 100px; max-width: 150px; -} - -/* Responsive Design */ -@media (max-width: 768px) { - .editor-toolbar { padding: 10px; - } - .toolbar-section { padding: 8px; - } - - .toolbar-group { gap: 6px; - } - .toolbar-button { padding: 6px 10px; - font-size: 11px; - } - .button-grid { - grid-template-columns: 1fr; - } -} - /* Step 3: HTML Editor - Fixed Layout */ .step3 { - display: block; - position: relative; height: calc(100vh - 200px); - overflow: hidden; -} - .step3.hidden { - display: none; -} - /* Editor Container - Fixed Layout */ -.editor-container { - display: flex; - gap: 20px; - height: 100%; - padding: 20px; - box-sizing: border-box; -} - /* Left Toolbar - Fixed Position, No Scrollbar */ -.editor-toolbar.left { width: 280px; - flex-shrink: 0; - background: #f8f9fa; - border: 1px solid #dee2e6; - border-radius: 8px; - padding: 15px; - height: fit-content; max-height: 100%; - overflow: visible; -} - -.toolbar-section { - margin-bottom: 20px; -} - -.toolbar-section:last-child { - margin-bottom: 0; -} - -.toolbar-section-title { - font-weight: 600; - color: #495057; - margin-bottom: 12px; - font-size: 13px; - text-transform: uppercase; - letter-spacing: 0.5px; - border-bottom: 2px solid #dee2e6; padding-bottom: 4px; -} - -.toolbar-group { - display: flex; - flex-direction: column; - gap: 8px; - margin-bottom: 12px; -} - -.toolbar-group:last-child { - margin-bottom: 0; -} - -.toolbar-button { - background: #ffffff; - border: 1px solid #dee2e6; - border-radius: 6px; - padding: 8px 12px; - font-size: 12px; - color: #495057; - cursor: pointer; - transition: all 0.2s ease; - display: flex; - align-items: center; - gap: 6px; - width: 100%; - box-sizing: border-box; -} - -.toolbar-button:hover { - background: #e9ecef; - border-color: #adb5bd; - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(0,0,0,0.1); -} - -.toolbar-button:active { - background: #dee2e6; - transform: translateY(0); -} - /* Insert Content Section - Compact Layout */ -.insert-content-section .toolbar-group { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 8px; -} - -.insert-content-section .toolbar-group:first-child { - grid-template-columns: 1fr 1fr; -} - -.insert-content-section .toolbar-group:last-child { - grid-template-columns: 1fr 1fr; -} - /* Text Formatting - Compact */ -.text-formatting-section .toolbar-group { - display: flex; - flex-direction: row; - align-items: center; - gap: 8px; -} - -.text-formatting-section label { - font-size: 11px; - color: #6c757d; min-width: 70px; -} - -.text-formatting-section select { - background: white; - border: 1px solid #dee2e6; - border-radius: 4px; padding: 5px 6px; - font-size: 11px; - color: #495057; - min-width: 100px; - flex: 1; -} - /* Text Styling - Compact */ -.text-styling-section .toolbar-group { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 6px; -} - -.text-styling-section .toolbar-button { - justify-content: center; - text-align: center; min-height: 32px; - font-weight: 600; -} - /* Text Alignment - Compact */ -.text-alignment-section .toolbar-group { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 6px; -} - -.text-alignment-section .toolbar-button { - justify-content: center; - text-align: center; - min-height: 32px; -} - /* Right Editor Area - Takes Remaining Space */ -.editor-right { - flex: 1; - background: white; - border: 1px solid #dee2e6; - border-radius: 8px; - padding: 20px; - height: 100%; - overflow: hidden; - display: flex; - flex-direction: column; - position: relative; -} - -.preview-frame { - flex: 1; - width: 100%; - border: none; - outline: none; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - line-height: 1.6; - color: #333; - background: white; resize: none; - overflow-y: auto; - padding: 20px; - box-sizing: border-box; - max-height: 100%; -} - /* Export PDF Button - Positioned at Template Level */ -.export-pdf-section { - position: absolute; - top: 20px; - right: 20px; - z-index: 10; -} - -.export-pdf-btn { - background: linear-gradient(135deg, #667eea, #764ba2); - color: white; - border: none; - padding: 12px 24px; - border-radius: 8px; - font-weight: 600; - cursor: pointer; - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); - text-transform: uppercase; - font-size: 14px; - transition: all 0.3s ease; -} - -.export-pdf-btn:hover { - transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); -} - .export-pdf-btn:active { - transform: translateY(0); -} - -/* Responsive Design */ -@media (max-width: 1200px) { - .editor-container { - flex-direction: column; height: auto; - } - - .editor-toolbar.left { - width: 100%; - height: auto; - order: 2; - } - - .editor-right { - order: 1; height: 500px; - } -} - -@media (max-width: 768px) { - .insert-content-section .toolbar-group { - grid-template-columns: 1fr; - } - - .text-styling-section .toolbar-group { - grid-template-columns: repeat(2, 1fr); - } - - .text-alignment-section .toolbar-group { - grid-template-columns: repeat(3, 1fr); - } -} - /* Export PDF Button - Positioned at Template Header with Animation */ -.export-pdf-section { - position: absolute; top: 40px; right: 40px; - z-index: 1000; animation: pulse-grow 2s ease-in-out infinite; -} - -.export-pdf-btn { - background: linear-gradient(135deg, #667eea, #764ba2); - color: white; - border: none; - padding: 12px 24px; - border-radius: 8px; - font-weight: 600; - cursor: pointer; - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); - text-transform: uppercase; - font-size: 14px; - transition: all 0.3s ease; transform-origin: center; -} - -.export-pdf-btn:hover { transform: translateY(-2px) scale(1.05); - box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); animation: none; -} - -.export-pdf-btn:active { transform: translateY(0) scale(0.95); -} - /* Pulse Animation: Small -> Big -> Small -> Big */ @keyframes pulse-grow { 0% { transform: scale(1); box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); - } 25% { transform: scale(1.05); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); - } 50% { - transform: scale(1); - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); - } 75% { - transform: scale(1.05); - box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); - } 100% { - transform: scale(1); - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); - } -} - /* Template Header Area - Position for Export Button */ .template-header-area { - position: relative; - margin-bottom: 20px; -} - + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); + border: 1px solid #f0f0f0; /* Custom Popup Styles - Matching Our Theme */ -.custom-popup { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 10000; - display: flex; - align-items: center; - justify-content: center; -} - .popup-overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px); -} - .popup-container { - position: relative; - background: white; - border-radius: 12px; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); - width: 90%; - max-width: 500px; max-height: 80vh; - overflow-y: auto; animation: popupSlideIn 0.3s ease-out; -} - @keyframes popupSlideIn { - from { - opacity: 0; transform: translateY(-20px) scale(0.95); - } - to { - opacity: 1; transform: translateY(0) scale(1); - } -} - .popup-header { - background: linear-gradient(135deg, #667eea, #764ba2); - color: white; - padding: 20px; - border-radius: 12px 12px 0 0; - display: flex; - justify-content: space-between; - align-items: center; -} - .popup-header h3 { - margin: 0; - font-size: 18px; - font-weight: 600; -} - .popup-close { - background: none; - border: none; - color: white; - font-size: 24px; - cursor: pointer; - padding: 0; width: 30px; height: 30px; - display: flex; - align-items: center; - justify-content: center; - border-radius: 50%; transition: background-color 0.2s ease; -} - .popup-close:hover { - background: rgba(255, 255, 255, 0.2); -} - .popup-content { - padding: 25px; -} - .form-group { - margin-bottom: 20px; -} - .form-group label { - display: block; - margin-bottom: 8px; - font-weight: 600; - color: #495057; - font-size: 14px; -} - .form-control { - width: 100%; padding: 10px 12px; - border: 1px solid #dee2e6; - border-radius: 6px; - font-size: 14px; - color: #495057; - background: white; transition: border-color 0.2s ease, box-shadow 0.2s ease; - box-sizing: border-box; -} - .form-control:focus { - outline: none; - border-color: #667eea; - box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); -} - .form-control[type="color"] { - height: 40px; - padding: 5px; - cursor: pointer; -} - .popup-actions { - display: flex; - gap: 12px; - justify-content: flex-end; margin-top: 25px; - padding-top: 20px; - border-top: 1px solid #e9ecef; -} - .popup-actions .btn { - padding: 10px 20px; - border: none; - border-radius: 6px; - font-size: 14px; - font-weight: 600; - cursor: pointer; - transition: all 0.2s ease; - min-width: 80px; -} - .popup-actions .btn-secondary { - background: #6c757d; - color: white; -} - .popup-actions .btn-secondary:hover { - background: #5a6268; - transform: translateY(-1px); -} - .popup-actions .btn-primary { - background: linear-gradient(135deg, #667eea, #764ba2); - color: white; -} - .popup-actions .btn-primary:hover { - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); -} - /* Responsive popup */ -@media (max-width: 768px) { .popup-container { - width: 95%; margin: 20px; - } - .popup-content { padding: 20px; - } - .popup-actions { - flex-direction: column; - } - .popup-actions .btn { - width: 100%; - } -} - +/* General button spacing to prevent merging with page bottom */ +button, .btn, .toolbar-button, .export-pdf-btn { + margin-bottom: 1rem !important; +/* Ensure proper spacing for button containers */ +.step-actions, .toolbar-section, .popup-actions { +/* Draggable image container styles */ + cursor: move; + user-select: none; + min-height: 100px; + border: 2px dashed #667eea; + background: rgba(102, 126, 234, 0.1); + transform: translate3d(0, 0, 0); + border-color: #764ba2; + background: rgba(102, 126, 234, 0.15); + transform: translate3d(0, -2px, 0); +.draggable-image-container.dragging { + background: rgba(102, 126, 234, 0.2); + box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); + transform: scale(1.02); + transition: none; + z-index: 1001; +.draggable-image-container:focus { + outline: 2px solid #667eea; + outline-offset: 2px; +.draggable-image-container img { + object-fit: cover; +/* Resize handle */ +.resize-handle { + bottom: -8px; + right: -8px; + cursor: se-resize; + border: 2px solid white; + box-shadow: 0 2px 8px rgba(0,0,0,0.3); +.resize-handle:hover { + background: #764ba2; + box-shadow: 0 4px 12px rgba(0,0,0,0.4); +.resize-handle:active { + background: #5a4fcf; + transform: scale(0.95); +/* Delete button */ +.delete-image-btn { + top: -10px; + right: -10px; + background: #ff4757; + z-index: 1002; +.delete-image-btn:hover { + background: #ff3742; +/* Image info display */ +.image-info { + top: -25px; + background: rgba(0,0,0,0.8); + opacity: 0; + transition: opacity 0.3s; + z-index: 1003; +/* Dragging state */ +/* Resizing state */ +.draggable-image-container.resizing { + border-color: #ff6b6b; + background: rgba(255, 107, 107, 0.1); +/* Text Alignment Section - Fixed Width */ +.alignment-buttons { +.alignment-btn { + justify-content: flex-start; +/* Toolbar Section Ordering */ +.toolbar-section:nth-child(1) { order: 1; } /* Document Actions */ +.toolbar-section:nth-child(2) { order: 2; } /* Text Formatting */ +.toolbar-section:nth-child(3) { order: 3; } /* Text Styling */ +.toolbar-section:nth-child(4) { order: 4; } /* Text Alignment */ +.toolbar-section:nth-child(5) { order: 5; } /* Colors */ +.toolbar-section:nth-child(6) { order: 6; } /* Lists & Indentation */ +.toolbar-section:nth-child(7) { order: 7; } /* Element Positioning */ +.toolbar-section:nth-child(8) { order: 8; } /* Insert Content */ +/* Asgar-1 Template Preview Styles */ +.template-asgar1 { + background: linear-gradient(135deg, #003366, #004080); + border: 1px solid #002244; + box-shadow: 0 6px 20px rgba(0,51,102,0.15); +.preview-hero::before { + background: url('data:image/svg+xml,'); + opacity: 0.3; + color: #f39c12; + border-left: 4px solid #f39c12; + font-size: 9px; +/* Preview Frame */ + height: 600px; + overflow-x: hidden; /* Prevent horizontal scrollbar */ +/* Brochure Content Responsiveness */ +.brochure { + max-width: 100% !important; + width: 100% !important; +/* Ensure all content fits within viewport */ +/* Fix for grid layouts that might cause overflow */ +.content.grid-layout { +/* Ensure amenities grid doesn't overflow */ +.amenities-grid { +/* Fix for location section grid */ +.location-section { +/* Responsive adjustments for smaller screens */ + .amenities-grid { + .location-section { + .content.grid-layout { +/* Sample Template Preview Styles */ +.template-sample { + border: 1px solid #5a6fd8; + box-shadow: 0 6px 20px rgba(102,126,234,0.15); + border-width: 0 0 30px 30px; + border-color: transparent transparent rgba(255,255,255,0.2) transparent; +/* First company name in orange, second in white */ +.preview-company .preview-company-name:first-child { +.preview-company .preview-company-name:last-child { + color: white; /* White color for second text */ +/* Luxury Mansion Template Preview Styles */ +.template-luxury { + background: linear-gradient(135deg, #FFD700, #FFA500); + border: 1px solid #FFD700; + box-shadow: 0 6px 20px rgba(255,215,0,0.2); + text-shadow: 1px 1px 2px rgba(255,255,255,0.5); + border-left: 3px solid #FFD700; +/* Modern Apartment Template Preview Styles */ +.template-modern { + background: linear-gradient(135deg, #00CED1, #20B2AA); + border: 1px solid #00CED1; + box-shadow: 0 6px 20px rgba(0,206,209,0.2); +.preview-modern-content { +/* Luxury Data Overview Styles */ +.luxury-data-grid { +.data-card { + background: linear-gradient(135deg, #fafafa, #f0f0f0); + border: 2px solid #FFD700; +.data-card:hover { + transform: translateY(-5px); + box-shadow: 0 15px 30px rgba(255,215,0,0.2); + border-color: #FFA500; +.data-icon { + font-size: 36px; +.data-card h3 { +.data-value { +/* Luxury Field Overview Styles */ +.luxury-field-grid { + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + padding: 18px 20px; + border-left: 4px solid #FFD700; + transform: translateX(8px); + box-shadow: 0 8px 25px rgba(0,0,0,0.15); +/* Modern Data Overview Styles */ +.modern-data-grid { + gap: 18px; +.modern-data-grid .data-card { + background: #f8fafc; + border: 2px solid #e2e8f0; + padding: 22px; +.modern-data-grid .data-card:hover { + transform: translateY(-8px); + box-shadow: 0 20px 40px rgba(0,206,209,0.15); + border-color: #00CED1; +.modern-data-grid .data-icon { + color: #00CED1; +.modern-data-grid .data-card h3 { + color: #1e293b; +.modern-data-grid .data-value { + color: #64748b; +/* Modern Field Overview Styles */ +.modern-field-grid { +.modern-field-grid .field-item { + padding: 16px 18px; + border-left: 4px solid #00CED1; + box-shadow: 0 4px 15px rgba(0,0,0,0.05); +.modern-field-grid .field-item:hover { + transform: translateX(6px); + box-shadow: 0 8px 25px rgba(0,0,0,0.1); +.modern-field-grid .field-label { +.modern-field-grid .field-value { +/* PDF Generation Progress Spinner */ + animation: fadeIn 0.3s ease-in; +@keyframes fadeIn { + from { opacity: 0; transform: translateY(-10px); } + to { opacity: 1; transform: translateY(0); } +/* Modern Home Template Preview Styles */ +.template-modern-home { + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); + min-height: 280px; +.template-modern-home::before { + background: linear-gradient(135deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.01) 100%); + height: 65%; + background: linear-gradient(135deg, #000000 0%, #333333 100%); + background-image: url('https://images.unsplash.com/photo-1568605114967-8130f3a36994?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=800'); + background-size: cover; + background-position: center; + background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.1) 100%); + color: #000000; + color: #666666; +/* The Grand Oak Villa Template - Remove border and increase height */ +.template-asgar1::before { + height: 50%; + background: rgba(255,255,255,0.8); + border-left: 3px solid #f39c12; +/* The Serenity House Template - Remove border and increase height */ +.template-sample::before { + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid #f39c12; + margin: 2px 0; + margin: 8px 0 5px 0; + background: rgba(243, 156, 18, 0.2); +/* The Vertice Template - Remove border and increase height */ +.template-luxury::before { + height: 45%; +.preview-text:last-child { +/* Image Review Modal Styles */ +.image-review-overlay { +.image-review-modal { + max-width: 800px; + max-height: 90vh; +.image-review-header { +.image-review-header h3 { +.image-review-content { + max-height: calc(90vh - 120px); +.category-navigation { +.category-btn { +.category-btn:hover { +.category-btn.active { +.image-display-area { + margin: 30px 0; +.review-image { + max-height: 400px; + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); +.image-info h4 { +.image-category { +.no-image-message { +.image-navigation { +.nav-btn { +.nav-btn:hover:not(:disabled) { + background: #5a6fd8; +.nav-btn:disabled { + background: #ccc; +.nav-icon { +.image-counter { +/* Step 2 Image Review Section Styles */ +.image-review-section { +.image-review-section h3 { +.image-review-section p { +.category-navigation-step2 { +.category-btn-step2 { +.category-btn-step2:hover { +.category-btn-step2.active { +.category-icon { +.image-display-area-step2 { + min-height: 350px; +.image-container-step2 { +.property-image-step2 { + max-height: 300px; + border: 3px solid white; +.image-info-step2 h4 { +.image-category-step2 { +.no-image-message-step2 { +.image-navigation-step2 { +.nav-btn-step2 { +.nav-btn-step2:hover:not(:disabled) { +.nav-btn-step2:disabled { +.nav-icon-step2 { +.image-counter-step2 { +/* ===== ENHANCED TEXT BOX STYLES ===== */ +.enhanced-text-box { + border: 2px solid #007bff !important; + border-radius: 8px !important; + box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2) !important; + transition: all 0.3s ease !important; +.enhanced-text-box:hover { + border-color: #0056b3 !important; + box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3) !important; +.enhanced-text-box:focus { + box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1) !important; + outline: none !important; +/* ===== EDIT IMAGE BUTTON STYLES ===== */ +.edit-image-btn { + position: absolute !important; + top: 5px !important; + right: 5px !important; + background: rgba(0, 123, 255, 0.9) !important; + border: none !important; + border-radius: 50% !important; + width: 30px !important; + height: 30px !important; + cursor: pointer !important; + font-size: 14px !important; + z-index: 1001 !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important; +.edit-image-btn:hover { + background: rgba(0, 123, 255, 1) !important; + transform: scale(1.1) !important; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; +.editable-image-container { + position: relative !important; + display: inline-block !important; +/* ===== IMPROVED TOOLBAR BUTTONS ===== */ + border-radius: 6px !important; + transform: translateY(-2px) !important; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important; + transform: translateY(0) !important; +/* ===== SUCCESS/ERROR MESSAGE STYLES ===== */ +.success-message { + background: linear-gradient(135deg, #28a745, #20c997) !important; + color: white !important; + padding: 12px 20px !important; + margin: 10px 0 !important; + box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3) !important; + animation: slideInDown 0.5s ease !important; + background: linear-gradient(135deg, #dc3545, #e74c3c) !important; + box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3) !important; +@keyframes slideInDown { +/* ===== IMPROVED TEXT BOX RESIZE HANDLES ===== */ + resize: both !important; + overflow: auto !important; + white-space: pre-wrap !important; + word-wrap: break-word !important; + min-height: 40px !important; + min-width: 100px !important; +/* ===== BETTER SELECTION INDICATORS ===== */ +.draggable-text-box:focus, + outline: 2px solid #007bff !important; + outline-offset: 2px !important; +/* ===== IMPROVED TOOLBAR LAYOUT ===== */ + margin-bottom: 20px !important; + padding: 15px !important; + background: rgba(255, 255, 255, 0.8) !important; + border-radius: 10px !important; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; + font-weight: 600 !important; + color: #333 !important; + margin-bottom: 10px !important; + text-transform: uppercase !important; + letter-spacing: 0.5px !important; +/* ===== LOAD BUTTON STYLES ===== */ +.toolbar-button[onclick*="handleLoad"] { +.toolbar-button[onclick*="handleLoad"]:hover { + background: linear-gradient(135deg, #218838, #1e7e34) !important; +/* ===== SAVE BUTTON STYLES ===== */ +.toolbar-button[onclick*="handleSave"] { + background: linear-gradient(135deg, #007bff, #0056b3) !important; +.toolbar-button[onclick*="handleSave"]:hover { + background: linear-gradient(135deg, #0056b3, #004085) !important; +/* ===== ENHANCED IMAGE CONTAINER STYLES ===== */ +.enhanced-image-container { +.enhanced-image-container:hover { +.enhanced-image-container img { + height: 100% !important; + object-fit: cover !important; +/* ===== ENHANCED RESIZER STYLES ===== */ + background: #007bff !important; + border: 2px solid white !important; + z-index: 1002 !important; + transition: all 0.2s ease !important; + background: #0056b3 !important; + transform: scale(1.2) !important; +/* ===== IMPROVED TEXT BOX STYLES ===== */ + box-shadow: 0 2px 6px rgba(0, 123, 255, 0.2) !important; + box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3) !important; +/* ===== HIDE QUICK START GUIDE FROM VIEWPORT ===== */ +.sticky-info-panel { +/* ===== IMAGE EDIT FUNCTIONALITY STYLES ===== */ +/* ===== MODAL STYLES ===== */ +.image-edit-modal, +.property-image-modal { + position: fixed !important; + top: 0 !important; + left: 0 !important; + background: rgba(0, 0, 0, 0.5) !important; + z-index: 10000 !important; +.image-edit-modal > div, +.property-image-modal > div { + background: white !important; + padding: 30px !important; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important; + max-width: 400px !important; + width: 90% !important; + text-align: center !important; + max-width: 600px !important; + max-height: 80vh !important; +/* ===== IMAGE GRID STYLES ===== */ +.image-grid { + display: grid !important; + grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; + gap: 15px !important; +.image-item { + border: 2px solid #ddd !important; + overflow: hidden !important; +.image-item:hover { + border-color: #007bff !important; + transform: scale(1.05) !important; +.image-item img { + height: 120px !important; +.image-label { + padding: 8px !important; + font-size: 12px !important; + background: #f8f9fa !important; +/* ===== CUSTOM IMAGE EDIT MODAL ANIMATIONS ===== */ +@keyframes modalSlideIn { + transform: translateY(-50px) scale(0.9); +.custom-image-edit-modal { + animation: fadeIn 0.3s ease-out; + from { opacity: 0; } + to { opacity: 1; } +/* ===== ENHANCED EDIT BUTTON STYLES ===== */ +.template-image-edit-btn { +.template-image-edit-btn:hover { +/* ===== MODAL CONTENT STYLES ===== */ +.custom-image-edit-content { + animation: modalSlideIn 0.3s ease-out !important; +/* ===== PROPERTY IMAGE GRID STYLES ===== */ +.property-image-grid { + grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; + gap: 20px !important; + margin-bottom: 25px !important; +.property-image-item { + border: 3px solid #ddd !important; + border-radius: 12px !important; +.property-image-item:hover { + box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3) !important; diff --git a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html index 87f1aff..111c17e 100644 --- a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html +++ b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html @@ -44,7 +44,7 @@

Professional Template

- +
@@ -54,18 +54,18 @@
-