rohit/PDF_Generation_and_Automation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

V1.0.0-rc

Browse Source
This commit is contained in:
Ubuntu 2025-09-04 00:04:39 +05:30
parent 6dd4d9be70
commit 0f7a887d50
7 changed files with 3297 additions and 910 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2043
force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css
View File

File diff suppressed because it is too large Load Diff

394
force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html
View File

@ -22,29 +22,10 @@
</div>
</template>
<!-- Step Navigation -->
<div class="step-navigation">
<div class={step1NavClass} data-step="1" onclick={goToStep}>
<div class="step-number">1</div>
<div class="step-label">Choose Template</div>
</div>
<div class={step2NavClass} data-step="2" onclick={goToStep}>
<div class="step-number">2</div>
<div class="step-label">Property & Analysis</div>
</div>
<div class={step3NavClass} data-step="3" onclick={goToStep}>
<div class="step-number">3</div>
<div class="step-label">Design & Export</div>
</div>
</div>
<!-- Step 1: Template Selection -->
<div class={step1Class} data-step="1">
<!-- Beautiful Header -->
<div class="step-header-gradient">
<h1 class="main-title" data-text="Property Brochure">Property Brochure</h1>
<p class="subtitle">Professional Template</p>
</div>
<!-- Template Grid - Professional Black & White Design -->
<div class="template-grid" id="all-templates">
@ -82,44 +63,63 @@
<div class="template-card template-modern-home template-medium" data-template-id="modern-home-template"
onclick={handleTemplateSelect}>
<div class="template-content modern-home-preview">
<!-- Hero Section Preview -->
<div class="preview-hero-section">
<div class="preview-hero-image"></div>
<div class="preview-hero-overlay">
<div class="preview-property-name">MODERN HOME</div>
<div class="preview-property-address">Premium Location</div>
<div class="preview-price">$1,300,000</div>
<!-- Hero Section -->
<div class="hero">
<div class="hero-overlay">
<h1 class="property-name" style="color: white !important;">Modern Villa</h1>
<p class="property-address" style="color: white !important;">123 Luxury Lane, Prestige City, PC 45678</p>
<div class="hero-details">
<div class="price" style="color: white !important;">$2,500,000</div>
<div class="stats">
<span class="stat-item" style="color: white !important;"><i class="fa-solid fa-bed"></i> 4 Beds</span>
<span class="stat-item" style="color: white !important;"><i class="fa-solid fa-bath"></i> 3 Baths</span>
<span class="stat-item" style="color: white !important;"><i class="fa-solid fa-ruler-combined"></i> 3,200 sq. ft.</span>
</div>
</div>
</div>
</div>
<!-- Content Preview -->
<div class="preview-content-section">
<div class="preview-stats">
<span class="preview-stat">🏠 4 Beds</span>
<span class="preview-stat">🛁 3 Baths</span>
<span class="preview-stat">📏 2,500 sq ft</span>
<!-- Content Section -->
<div class="content">
<div class="description">
<h2>About this Property</h2>
<p>This stunning modern villa offers contemporary living with premium finishes and an open-concept design perfect for entertaining.</p>
</div>
<div class="preview-description">
<div class="preview-title">About this Property</div>
<div class="preview-text">Modern design with clean layout, contemporary styling &
premium amenities for sophisticated living. Features open concept design with
high-end finishes.</div>
<div class="specs-grid">
<div class="spec-item"><strong>Status:</strong> <span>For Sale</span></div>
<div class="spec-item"><strong>Type:</strong> <span>Single-Family</span></div>
<div class="spec-item"><strong>Year Built:</strong> <span>2023</span></div>
<div class="spec-item"><strong>Parking:</strong> <span>2-Car Garage</span></div>
</div>
<div class="preview-features">
<div class="feature-item">
<span class="feature-icon">🏡</span>
<span class="feature-text">Modern</span>
<div class="amenities-grid">
<div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>Gourmet Kitchen</span></div>
<div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>Master Suite</span></div>
<div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>Open Floor Plan</span></div>
<div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>Private Garden</span></div>
</div>
<div class="agent-footer">
<div class="agent-info">
<h3>Sarah Johnson</h3>
<p>Your Real Estate Professional</p>
</div>
<div class="feature-item">
<span class="feature-icon">✨</span>
<span class="feature-text">Premium</span>
</div>
<div class="feature-item">
<span class="feature-icon">🌿</span>
<span class="feature-text">Eco-Friendly</span>
<div class="agent-contact-details">
<p>(555) 123-4567</p>
<p>sarah@realestate.com</p>
</div>
</div>
</div>
<footer class="page-footer">
<div class="reference-id">
<strong>Reference ID:</strong> MH-2024-001
</div>
<div class="owner-info">
<strong>Owner Info:</strong> John Smith, (555) 987-6543
</div>
</footer>
</div>
<template if:true={isModernHomeTemplateSelected}>
@ -134,53 +134,78 @@
<div class="template-card template-asgar1 template-tall" data-template-id="asgar-1-template"
onclick={handleTemplateSelect}>
<div class="template-content asgar1-preview">
<div class="preview-hero">
<div class="preview-hero-overlay">
<div class="preview-property-name">THE GRAND OAK VILLA</div>
</div>
<!-- Cover Page -->
<div class="brochure-page cover-page">
<div class="cover-overlay"></div>
<header class="cover-header">
<div class="logo">Elysian</div>
<div class="property-status">FOR SALE</div>
</header>
<main class="cover-content">
<h1 class="cover-title" style="color: #C0A062 !important;">The Grand Oak Villa</h1>
<p class="cover-address"><i class="fa-solid fa-location-dot"></i> 123 Luxury Lane, Prestige City, PC 45678</p>
</main>
<footer class="cover-footer">
<div class="feature-item">
<div class="value">5</div>
<div class="label">Bedrooms</div>
</div>
<div class="feature-item">
<div class="value">6</div>
<div class="label">Bathrooms</div>
</div>
<div class="feature-item">
<div class="value">6,200</div>
<div class="label">Sq. Ft.</div>
</div>
<div class="feature-item">
<div class="value">$4.5M</div>
<div class="label">Price</div>
</div>
</footer>
</div>
<div class="preview-content">
<div class="preview-section">
<div class="preview-section-title">Page 1: Hero Section</div>
<div class="preview-text">Luxury villa with stunning visuals, premium presentation, and
elegant design elements showcasing the finest architectural details</div>
</div>
<div class="preview-section">
<div class="preview-section-title">Page 2: Specifications</div>
<div class="preview-text">Detailed specs & amenities grid with comprehensive property
details, floor plans, and premium features for discerning buyers</div>
</div>
<div class="preview-section">
<div class="preview-section-title">Page 3: Location & Info</div>
<div class="preview-text">Nearby places, transportation options, prestigious schools,
shopping districts, and additional details for complete lifestyle overview</div>
</div>
<div class="preview-section">
<div class="preview-section-title">Premium Features</div>
<div class="preview-text">Smart home technology, advanced security systems, luxury
amenities, premium finishes, and exclusive lifestyle features</div>
</div>
<div class="preview-section">
<div class="preview-section-title">Investment Value</div>
<div class="preview-text">Premium location with high appreciation potential, rental
income opportunities, and exclusive market positioning</div>
</div>
</div>
<div class="template-preview">
<div class="preview-features">
<div class="feature-item">
<span class="feature-icon">🏰</span>
<span class="feature-text">Luxury Villa</span>
</div>
<div class="feature-item">
<span class="feature-icon">📄</span>
<span class="feature-text">3 Pages</span>
</div>
<div class="feature-item">
<span class="feature-icon">💎</span>
<span class="feature-text">Premium</span>
</div>
<!-- Content Page -->
<div class="brochure-page">
<div class="content-body">
<header class="page-header">
<h1 class="title">Property <span>Overview</span></h1>
<span class="property-name" style="color: #C0A062 !important;">The Grand Oak Villa</span>
</header>
<main class="main-content details-grid">
<div>
<h2 class="section-title" style="color: white !important;">Description</h2>
<div class="description">
<p style="color: white !important;">Nestled in the heart of Prestige City, The Grand Oak Villa is a masterpiece of modern architecture and timeless elegance.</p>
</div>
</div>
<div class="specs-and-amenities">
<div>
<h2 class="section-title" style="color: white !important;">Specifications</h2>
<div class="spec-list">
<div class="item"><span class="key" style="color: white !important;">Status:</span> <span class="value" style="color: white !important;">For Sale</span></div>
<div class="item"><span class="key" style="color: white !important;">Type:</span> <span class="value" style="color: white !important;">Villa</span></div>
<div class="item"><span class="key" style="color: white !important;">Year Built:</span> <span class="value" style="color: white !important;">2023</span></div>
<div class="item"><span class="key" style="color: white !important;">Parking:</span> <span class="value" style="color: white !important;">3-Car</span></div>
</div>
</div>
<div>
<h2 class="section-title" style="color: white !important;">Amenities</h2>
<ul class="amenities-list">
<li style="color: white !important;"><i class="fa-solid fa-check"></i> Infinity Pool</li>
<li style="color: white !important;"><i class="fa-solid fa-check"></i> Home Theater</li>
<li style="color: white !important;"><i class="fa-solid fa-check"></i> Wine Cellar</li>
<li style="color: white !important;"><i class="fa-solid fa-check"></i> Smart Home</li>
</ul>
</div>
</div>
</main>
</div>
<footer class="page-footer">
<div style="color: white !important;"><strong style="color: white !important;">Agent:</strong> Olivia Sterling | (555) 987-6543</div>
<div style="color: white !important;"><strong style="color: white !important;">Owner:</strong> John & Jane Doe</div>
</footer>
</div>
</div>
@ -196,40 +221,41 @@
<div class="template-card template-sample template-medium" data-template-id="serenity-house-template"
onclick={handleTemplateSelect}>
<div class="template-content sample-preview">
<div class="preview-header">
<div class="preview-triangle"></div>
<div class="preview-company">
<div class="preview-company-name" style="color: #000000;">THE SERENITY</div>
<div class="preview-company-name" style="color: #000000;">HOUSE</div>
</div>
<div class="preview-title">PEACEFUL RETREAT</div>
<div class="preview-for-sale">LUXURY HOUSE</div>
</div>
<div class="preview-content">
<div class="preview-section">
<div class="preview-section-title">Serene Living</div>
<div class="preview-text">Peaceful retreat with modern amenities, tranquil surroundings,
and harmonious design elements creating perfect balance</div>
<div class="preview-icons">
<span class="preview-icon">🌿</span>
<span class="preview-icon">🏡</span>
<span class="preview-icon">✨</span>
<!-- Page 1: Cover -->
<div class="brochure-page">
<div class="p1-container">
<div class="p1-image-side"></div>
<div class="p1-content-side">
<header class="p1-header">
<div class="collection">Elysian Estates Collection</div>
<h1 class="p1-main-title">The Serenity House</h1>
<p class="p1-address">123 Luxury Lane, Prestige City, PC 45678</p>
<p class="p1-ref-id">Reference ID: ES-8821</p>
</header>
<footer class="p1-footer">
<div class="area">6,200 Sq. Ft. • 5 Bedrooms • 6 Bathrooms</div>
An architectural marvel of curated living space.
<br>
<strong>Offered at $4,500,000</strong>
</footer>
</div>
</div>
<div class="preview-section">
<div class="preview-section-title">Modern Comfort</div>
<div class="preview-text">Beautiful surroundings & tranquility with contemporary design,
premium materials, thoughtful layouts, and smart home integration</div>
</div>
<div class="preview-section">
<div class="preview-section-title">Location Benefits</div>
<div class="preview-text">Prime location with easy access to amenities, nature trails,
shopping centers, excellent schools, and healthcare facilities</div>
</div>
<div class="preview-section">
<div class="preview-section-title">Lifestyle Features</div>
<div class="preview-text">Private gardens, outdoor entertainment areas, wellness spaces,
and community amenities for complete lifestyle satisfaction</div>
</div>
<!-- Page 2: Content -->
<div class="brochure-page">
<div class="page-layout">
<span class="page-number">02</span>
<h1 class="page-title-main">A Sanctuary of Modern Design</h1>
<p class="page-title-sub">Where light, space, and nature converge to create an unparalleled living experience.</p>
<div class="p2-grid">
<div class="p2-text">
<p>Designed by the world-renowned architect, Helena Vance, The Serenity House is more than a home; it is a living sculpture. Every line, material, and detail has been thoughtfully considered to evoke a sense of peace and connection with the surrounding landscape.</p>
<p class="pull-quote">A timeless residence built not just for living, but for thriving.</p>
<p>The interior palette is a harmonious blend of natural oak, Italian travertine, and warm bronze accents, creating an atmosphere of understated luxury.</p>
</div>
<div class="p2-image"></div>
</div>
</div>
</div>
</div>
@ -246,54 +272,57 @@
<div class="template-card template-luxury template-tall" data-template-id="luxury-mansion-template"
onclick={handleTemplateSelect}>
<div class="template-content luxury-preview">
<div class="preview-luxury-header">
<div class="preview-luxury-logo" style="color: #e9edf2;">THE VERTICE</div>
<div class="preview-luxury-title" style="color: white;">Modern Urban Residence</div>
<div class="preview-luxury-subtitle" style="color: white;">Contemporary Living</div>
</div>
<div class="preview-luxury-content">
<div class="preview-luxury-features">
<div class="preview-feature">🏢 Urban Design</div>
<div class="preview-feature">🤖 Smart Tech</div>
<div class="preview-feature">🌆 City Center</div>
<div class="preview-feature">🚇 Metro Access</div>
<div class="brochure-page cover-page">
<div class="cover-overlay"></div>
<div class="cover-content">
<div class="subtitle">An Urban Oasis</div>
<h1 class="main-title" style="color: white !important;">THE VERTICE</h1>
<div class="address">18 Skyline Avenue, Metropolis Centre, MC 90210</div>
</div>
<div class="preview-luxury-description">
<div class="preview-text">Modern urban residence with smart technology integration and
contemporary architecture for sophisticated city living</div>
<div class="preview-text">Convenient lifestyle in the heart of the city with premium
amenities, concierge services, and exclusive access</div>
</div>
<div class="preview-section">
<div class="preview-section-title">Urban Benefits</div>
<div class="preview-text">Walking distance to shopping, dining, entertainment venues,
public transport, business districts, and cultural attractions</div>
</div>
<div class="preview-section">
<div class="preview-section-title">Exquisite Interiors</div>
<div class="preview-text">Beautifully designed living spaces with premium finishes,
smart home systems, luxury amenities, and panoramic city views</div>
</div>
<div class="preview-section">
<div class="preview-section-title">Investment Potential</div>
<div class="preview-text">High-demand urban location with strong rental yields, capital
appreciation, and premium market positioning</div>
<div class="cover-footer">
<span>Residences Starting from $1,200,000</span>
<span>Ref ID: VP-2025-001</span>
</div>
</div>
<div class="template-preview">
<div class="preview-features">
<div class="feature-item">
<span class="feature-icon">🏢</span>
<span class="feature-text">Urban</span>
</div>
<div class="feature-item">
<span class="feature-icon">📄</span>
<span class="feature-text">3 Pages</span>
</div>
<div class="feature-item">
<span class="feature-icon">🚀</span>
<span class="feature-text">Modern</span>
</div>
<div class="brochure-page">
<div class="page-container">
<header class="page-header">
<h1 class="page-title">Elevated <span>Living</span></h1>
<span class="page-subtitle">Discover Your Sanctuary in the Sky</span>
</header>
<main class="vision-grid">
<div class="vision-text">
<h3>Where Design Meets Desire.</h3>
<p>The Vertice is not just a building; it's a bold statement on modern urban living. Conceived for the discerning individual, it offers a unique blend of architectural prowess, bespoke interiors, and an unparalleled lifestyle experience right in the heart of the city.</p>
<p>Every residence is a testament to quality, featuring panoramic city views from floor-to-ceiling windows, intelligent home systems, and finishes selected from the finest materials around the globe. This is more than a home; it's a new perspective.</p>
</div>
<div class="vision-image"></div>
</main>
<footer class="page-footer-bar">
<span class="property-name" style="color: white !important;">THE VERTICE</span>
<span>Page 02 / 06</span>
</footer>
</div>
</div>
<div class="brochure-page">
<div class="page-container">
<header class="page-header">
<h1 class="page-title">Exquisite <span>Interiors</span></h1>
<span class="page-subtitle">A Canvas for Your Life</span>
</header>
<main class="gallery-grid">
<div class="gallery-item g-item-1"><span>Open-Concept Living Space</span></div>
<div class="gallery-item g-item-2"><span>Master Bedroom Suite</span></div>
<div class="gallery-item g-item-3"><span>Gourmet Chef's Kitchen</span></div>
<div class="gallery-item g-item-4"><span>Spa-Inspired Bathroom</span></div>
<div class="gallery-item g-item-5"><span>Private Balcony Views</span></div>
</main>
<footer class="page-footer-bar">
<span class="property-name" style="color: white !important;">THE VERTICE</span>
<span>Page 03 / 06</span>
</footer>
</div>
</div>
</div>
@ -318,11 +347,6 @@
<!-- Step 2: Property Selection & Market Analysis -->
<div class={step2Class} data-step="2">
<!-- Beautiful Header -->
<div class="step-header-gradient">
<h1 class="main-title" data-text="Property Brochure">Property Brochure</h1>
<p class="subtitle">Professional Template</p>
</div>
<div class="step2-content">
<!-- Row 1: Two Equal Columns -->
@ -721,10 +745,6 @@
<template if:true={currentImage}>
<div class="image-container-step2">
<img src={currentImage.url} alt={currentImage.title} class="property-image-step2" />
<div class="image-info-step2">
<h4>{currentImage.title}</h4>
<p class="image-category-step2">{currentImage.category}</p>
</div>
</div>
</template>
<template if:false={currentImage}>
@ -764,11 +784,6 @@
<!-- Step 3: HTML Editor -->
<div class={step3Class} data-step="3">
<!-- Beautiful Header -->
<div class="step-header-gradient">
<h1 class="main-title" data-text="Property Brochure">Property Brochure</h1>
<p class="subtitle">Professional Template</p>
</div>
<!-- Editor Container with Sidebar Layout -->
<div class="editor-container">
@ -930,10 +945,7 @@
<label>Text Color:</label>
<input type="color" onchange={handleTextColorChange} value="#000000">
</div>
<div class="toolbar-group">
<label>Background:</label>
<input type="color" onchange={handleBackgroundColorChange} value="#ffffff">
</div>
</div>
<!-- Lists & Indentation Section -->
@ -943,12 +955,12 @@
<button class="toolbar-button" onclick={handleBulletList}>
<lightning-icon icon-name="utility:bullet_list"
size="x-small"></lightning-icon>
Bullet
Bullet(*)
</button>
<button class="toolbar-button" onclick={handleNumberList}>
<lightning-icon icon-name="utility:numbered_list"
size="x-small"></lightning-icon>
Number
Number(1)
</button>
<button class="toolbar-button" onclick={handleIndent}>
<lightning-icon icon-name="utility:indent" size="x-small"></lightning-icon>

581
force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.js
View File

File diff suppressed because one or more lines are too long

244
previews/preview-grand-oak.html Normal file
View File

@ -0,0 +1,244 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Grand Oak Villa - Template Preview</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
:root {
--color-dark-charcoal: #121212;
--color-light-gray: #F5F5F5;
--color-text-primary: #D1D1D1;
--color-text-secondary: #888888;
--color-accent-gold: #C0A062;
--color-white: #FFFFFF;
--color-border: #2a2a2a;
--font-primary: 'Montserrat', sans-serif;
--font-secondary: 'Playfair Display', serif;
}
body {
font-family: var(--font-primary);
background-color: #e0e0e0;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
margin: 0;
}
.brochure-page {
width: 400px;
height: 600px;
background-color: var(--color-white);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
overflow: hidden;
}
.cover-page {
position: relative;
background-image: url('https://images.unsplash.com/photo-1580587771525-78b9dba3b914?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=1200');
background-size: cover;
background-position: center;
color: var(--color-white);
justify-content: space-between;
flex: 1;
}
.cover-overlay {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(180deg, rgba(18, 18, 18, 0.8) 0%, rgba(18, 18, 18, 0.3) 100%);
}
.cover-header {
position: relative; padding: 30px; display: flex;
justify-content: space-between; align-items: center;
}
.logo {
font-family: var(--font-secondary); font-size: 1.2rem; font-weight: 700;
letter-spacing: 1px; border: 2px solid var(--color-white); padding: 6px 12px;
}
.property-status {
background-color: var(--color-accent-gold); color: var(--color-dark-charcoal);
padding: 8px 16px; font-weight: 600; font-size: 0.8rem; text-transform: uppercase;
}
.cover-content { position: relative; padding: 30px; max-width: 70%; }
.cover-title {
font-family: var(--font-secondary); font-size: 3rem; font-weight: 700;
line-height: 1.1; margin: 0 0 10px 0; color: var(--color-white);
}
.cover-address {
font-size: 1rem; font-weight: 400; display: flex;
align-items: center; gap: 8px; color: var(--color-text-primary);
}
.cover-address i { color: var(--color-accent-gold); }
.cover-footer {
position: relative; background-color: rgba(18, 18, 18, 0.9);
padding: 20px 30px; display: grid; grid-template-columns: repeat(4, 1fr);
gap: 15px; text-align: center;
}
.feature-item { border-right: 1px solid var(--color-border); }
.feature-item:last-child { border-right: none; }
.content-body {
background-color: var(--color-dark-charcoal); color: var(--color-text-primary);
flex-grow: 1; padding: 30px; display: flex; flex-direction: column;
}
.page-header {
display: flex; justify-content: space-between; align-items: baseline;
padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid var(--color-border);
}
.page-header .title {
font-family: var(--font-secondary); font-size: 1.6rem; color: var(--color-white);
}
.page-header .title span { color: var(--color-accent-gold); }
.page-header .property-name {
font-size: 0.8rem; font-weight: 600; color: var(--color-text-secondary);
}
.section-title {
font-weight: 600; font-size: 0.9rem; color: var(--color-white);
margin: 0 0 15px 0; text-transform: uppercase; letter-spacing: 1px;
position: relative; padding-bottom: 6px;
}
.section-title::after {
content: ''; position: absolute; bottom: 0; left: 0;
width: 30px; height: 2px; background-color: var(--color-accent-gold);
}
.main-content { flex-grow: 1; }
.page-footer {
background-color: #0A0A0A;
padding: 15px 30px;
font-size: 0.8rem; color: var(--color-text-secondary);
border-top: 1px solid var(--color-border);
display: flex;
justify-content: space-between;
align-items: center;
}
.page-footer strong { color: var(--color-accent-gold); font-weight: 600; }
.details-grid {
display: flex;
flex-direction: column;
gap: 20px;
}
.description p {
font-size: 0.8rem;
line-height: 1.6;
margin: 0 0 15px 0;
color: var(--color-text-primary);
}
.specs-and-amenities {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.spec-list .item {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
padding: 8px 0;
border-bottom: 1px solid var(--color-border);
}
.spec-list .item:first-child { padding-top: 0; }
.spec-list .item .key { font-weight: 600; color: var(--color-text-secondary); }
.spec-list .item .value { font-weight: 400; color: var(--color-white); }
.amenities-list { list-style: none; padding: 0; margin: 0; columns: 1; gap: 8px; }
.amenities-list li { font-size: 0.8rem; margin-bottom: 8px; display: flex; align-items: center; }
.amenities-list i { color: var(--color-accent-gold); margin-right: 8px; font-size: 0.8rem; }
.back-button {
position: fixed;
top: 20px;
left: 20px;
background: rgba(255,255,255,0.9);
color: #333;
padding: 10px 20px;
border-radius: 25px;
text-decoration: none;
font-weight: 500;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.back-button:hover {
background: white;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
</style>
</head>
<body>
<a href="template-preview.html" class="back-button">
<i class="fa-solid fa-arrow-left"></i> Back to Templates
</a>
<div class="brochure-page cover-page">
<div class="cover-overlay"></div>
<header class="cover-header"><div class="logo">Elysian</div><div class="property-status">FOR SALE</div></header>
<main class="cover-content">
<h1 class="cover-title" style="color: white;">Modern Villa</h1>
<p class="cover-address" style="color: white;"><i class="fa-solid fa-location-dot"></i> 123 Luxury Lane, Prestige City, PC 45678</p>
</main>
<footer class="cover-footer">
<div class="feature-item"><div style="font-size: 1.2rem; font-weight: 600; color: white; margin-bottom: 4px;">4</div><div style="font-size: 0.7rem; color: #888888; text-transform: uppercase; letter-spacing: 0.5px;">Beds</div></div>
<div class="feature-item"><div style="font-size: 1.2rem; font-weight: 600; color: white; margin-bottom: 4px;">3</div><div style="font-size: 0.7rem; color: #888888; text-transform: uppercase; letter-spacing: 0.5px;">Baths</div></div>
<div class="feature-item"><div style="font-size: 1.2rem; font-weight: 600; color: white; margin-bottom: 4px;">6,200</div><div style="font-size: 0.7rem; color: #888888; text-transform: uppercase; letter-spacing: 0.5px;">Sq. Ft.</div></div>
<div class="feature-item"><div style="font-size: 1.2rem; font-weight: 600; color: white; margin-bottom: 4px;">$2,500,000</div><div style="font-size: 0.7rem; color: #888888; text-transform: uppercase; letter-spacing: 0.5px;">Price</div></div>
</footer>
</div>
<div class="brochure-page">
<div class="content-body">
<header class="page-header"><h1 class="title">Property <span>Overview</span></h1><span class="property-name" style="color: #C0A062;">The Grand Oak Villa</span></header>
<main class="main-content details-grid">
<div>
<h2 class="section-title">Description</h2>
<div class="description">
<p>Nestled in the heart of Prestige City, The Grand Oak Villa is a masterpiece of modern architecture and timeless elegance. This expansive 6,200 sq. ft. residence offers unparalleled luxury and privacy.</p>
</div>
</div>
<div class="specs-and-amenities">
<div>
<h2 class="section-title">Specifications</h2>
<div class="spec-list">
<div class="item"><span class="key">Status:</span> <span class="value">For Sale</span></div>
<div class="item"><span class="key">Type:</span> <span class="value">Villa</span></div>
<div class="item"><span class="key">Year Built:</span> <span class="value">2023</span></div>
<div class="item"><span class="key">Parking:</span> <span class="value">3-Car</span></div>
<div class="item"><span class="key">Floor:</span> <span class="value">2 Levels</span></div>
<div class="item"><span class="key">Furnishing:</span> <span class="value">Partially</span></div>
</div>
</div>
<div>
<h2 class="section-title">Amenities</h2>
<ul class="amenities-list">
<li><i class="fa-solid fa-check"></i> Infinity Pool</li>
<li><i class="fa-solid fa-check"></i> Home Theater</li>
<li><i class="fa-solid fa-check"></i> Wine Cellar</li>
<li><i class="fa-solid fa-check"></i> Smart Home</li>
<li><i class="fa-solid fa-check"></i> Spa & Sauna</li>
<li><i class="fa-solid fa-check"></i> Landscaped Gardens</li>
</ul>
</div>
</div>
</main>
</div>
<footer class="page-footer">
<div><strong>Agent:</strong> Olivia Sterling | (555) 987-6543</div>
<div><strong>Owner:</strong> John & Jane Doe</div>
</footer>
</div>
</body>
</html>

316
previews/preview-modern-home.html Normal file
View File

@ -0,0 +1,316 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real Estate Modern Home - Template Preview</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');
:root {
--color-primary: #003366;
--color-accent: #f39c12;
--color-background: #ffffff;
--color-text-light: #ffffff;
--color-text-dark: #333333;
--color-text-muted: #666666;
--color-background-light: #f8f9fa;
}
body {
font-family: 'Lato', sans-serif;
background-color: #e9e9e9;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
margin: 0;
-webkit-font-smoothing: antialiased;
}
.brochure {
width: 400px;
height: 600px;
background-color: var(--color-background);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
overflow: hidden;
}
.hero {
height: 40%;
background-image: url('https://images.unsplash.com/photo-1568605114967-8130f3a36994?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=1200');
background-size: cover;
background-position: center;
position: relative;
color: var(--color-text-light);
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.hero-overlay {
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 100%);
padding: 30px;
}
.property-name {
font-size: 32px;
font-weight: 900;
margin: 0;
line-height: 1.1;
}
.property-address {
font-size: 14px;
font-weight: 300;
margin: 6px 0 18px 0;
border-left: 3px solid var(--color-accent);
padding-left: 10px;
}
.hero-details {
display: flex;
gap: 20px;
align-items: center;
flex-wrap: wrap;
}
.price {
font-size: 24px;
font-weight: 700;
color: var(--color-accent);
}
.stats {
display: flex;
gap: 15px;
font-size: 12px;
font-weight: 700;
}
.stat-item {
display: flex;
align-items: center;
gap: 6px;
}
.content {
padding: 30px;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.description h2 {
font-size: 20px;
font-weight: 700;
color: var(--color-primary);
margin-top: 0;
margin-bottom: 10px;
}
.description p {
font-size: 13px;
line-height: 1.6;
color: var(--color-text-muted);
margin: 0 0 20px 0;
}
.specs-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 20px 0;
}
.spec-item {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid #eee;
font-size: 12px;
}
.spec-item strong {
font-weight: 700;
color: var(--color-text-dark);
}
.spec-item span {
color: var(--color-text-muted);
}
.amenities-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin: 20px 0;
}
.amenity-item {
background-color: var(--color-background);
padding: 8px 12px;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid #e8e8e8;
border-radius: 4px;
font-size: 11px;
}
.amenity-item .icon {
width: 16px;
height: 16px;
background-color: var(--color-accent);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 8px;
flex-shrink: 0;
}
.agent-footer {
border-top: 3px solid var(--color-accent);
padding-top: 15px;
margin-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.agent-info h3 {
margin: 0 0 3px 0;
font-size: 16px;
font-weight: 700;
color: var(--color-text-dark);
}
.agent-info p {
margin: 0;
font-size: 12px;
color: var(--color-text-muted);
}
.agent-contact-details {
text-align: right;
}
.agent-contact-details p {
font-size: 12px;
font-weight: 700;
color: var(--color-primary);
margin: 2px 0;
}
.page-footer {
margin-top: auto;
background-color: var(--color-primary);
color: var(--color-text-light);
padding: 15px 30px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
}
.page-footer strong {
color: var(--color-accent);
}
.back-button {
position: fixed;
top: 20px;
left: 20px;
background: rgba(255,255,255,0.9);
color: #333;
padding: 10px 20px;
border-radius: 25px;
text-decoration: none;
font-weight: 500;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.back-button:hover {
background: white;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
</style>
</head>
<body>
<a href="template-preview.html" class="back-button">
<i class="fa-solid fa-arrow-left"></i> Back to Templates
</a>
<div class="brochure">
<div class="hero">
<div class="hero-overlay">
<h1 class="property-name">Modern Villa</h1>
<p class="property-address">123 Luxury Lane, Prestige City, PC 45678</p>
<div class="hero-details">
<div class="price">$2,500,000</div>
<div class="stats">
<span class="stat-item"><i class="fa-solid fa-bed"></i> 4 Beds</span>
<span class="stat-item"><i class="fa-solid fa-bath"></i> 3 Baths</span>
<span class="stat-item"><i class="fa-solid fa-ruler-combined"></i> 3,200 sq. ft.</span>
</div>
</div>
</div>
</div>
<div class="content">
<div class="description">
<h2>About this Property</h2>
<p>This stunning modern villa offers contemporary living with premium finishes and an open-concept design perfect for entertaining. Features include a gourmet kitchen, spacious living areas, and beautiful outdoor spaces.</p>
</div>
<div class="specs-grid">
<div class="spec-item"><strong>Status:</strong> <span>For Sale</span></div>
<div class="spec-item"><strong>Type:</strong> <span>Single-Family</span></div>
<div class="spec-item"><strong>Year Built:</strong> <span>2023</span></div>
<div class="spec-item"><strong>Parking:</strong> <span>2-Car Garage</span></div>
<div class="spec-item"><strong>Floor:</strong> <span>2 Levels</span></div>
<div class="spec-item"><strong>Furnishing:</strong> <span>Unfurnished</span></div>
</div>
<div class="amenities-grid">
<div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>Gourmet Kitchen</span></div>
<div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>Master Suite</span></div>
<div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>Open Floor Plan</span></div>
<div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>Private Garden</span></div>
<div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>Smart Home</span></div>
<div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>Energy Efficient</span></div>
</div>
<div class="agent-footer">
<div class="agent-info">
<h3>Sarah Johnson</h3>
<p>Your Real Estate Professional</p>
</div>
<div class="agent-contact-details">
<p>(555) 123-4567</p>
<p>sarah@realestate.com</p>
</div>
</div>
</div>
<footer class="page-footer">
<div class="reference-id">
<strong>Reference ID:</strong> MH-2024-001
</div>
<div class="owner-info">
<strong>Owner Info:</strong> John Smith, (555) 987-6543
</div>
</footer>
</div>
</body>
</html>

289
previews/preview-serenity-house.html Normal file
View File

@ -0,0 +1,289 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Serenity House - Template Preview</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Cormorant+Garamond:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
:root {
--color-bg: #FFFFFF;
--color-off-white: #F8F7F5;
--color-text-primary: #333333;
--color-text-secondary: #777777;
--color-accent-beige: #D4C7B8;
--color-border: #EAEAEA;
--font-serif: 'Cormorant Garamond', serif;
--font-sans: 'Lato', sans-serif;
}
body {
font-family: var(--font-sans);
background-color: #d8d8d8;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
margin: 0;
}
.brochure-page {
width: 400px;
height: 500px;
background-color: var(--color-bg);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
.p1-container {
display: flex;
height: 100%;
}
.p1-image-side {
flex: 1.2;
background-image: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=1200');
background-size: cover;
background-position: center;
}
.p1-content-side {
flex: 1;
padding: 50px 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.p1-header .collection {
font-size: 0.8rem;
letter-spacing: 2px;
color: var(--color-text-secondary);
text-transform: uppercase;
}
.p1-main-title {
font-family: var(--font-serif);
font-size: 3.5rem;
font-weight: 600;
line-height: 1.1;
color: var(--color-text-primary);
margin: 15px 0;
}
.p1-address {
font-size: 0.9rem;
color: var(--color-text-secondary);
border-left: 3px solid var(--color-accent-beige);
padding-left: 15px;
}
.p1-ref-id {
font-size: 0.8rem;
color: var(--color-text-secondary);
margin-top: 10px;
padding-left: 18px;
}
.p1-footer {
font-size: 0.8rem;
color: var(--color-text-secondary);
}
.p1-footer strong {
color: var(--color-text-primary);
}
.p1-footer .area {
font-size: 1rem;
color: var(--color-text-primary);
font-weight: 700;
margin-bottom: 8px;
}
.page-layout {
padding: 50px;
display: flex;
flex-direction: column;
height: 100%;
box-sizing: border-box;
}
.page-number {
position: absolute;
top: 50px; right: 50px;
font-family: var(--font-serif);
font-size: 1rem;
color: var(--color-text-secondary);
}
.page-title-main {
font-family: var(--font-serif);
font-size: 2.5rem;
font-weight: 600;
color: var(--color-text-primary);
margin: 0 0 10px 0;
line-height: 1;
}
.page-title-sub {
font-size: 0.9rem;
color: var(--color-text-secondary);
margin-bottom: 30px;
}
.content-divider {
border: 0;
height: 1px;
background-color: var(--color-border);
margin: 20px 0;
}
.section-title {
font-family: var(--font-serif);
font-size: 1.3rem;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 15px;
margin-top: 0;
}
.p2-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
flex-grow: 1;
}
.p2-image {
background-image: url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=800');
background-size: cover;
background-position: center;
}
.p2-text p {
font-size: 0.9rem;
line-height: 1.7;
color: var(--color-text-secondary);
}
.p2-text p:first-of-type::first-letter {
font-family: var(--font-serif);
font-size: 3rem;
float: left;
line-height: 1;
margin-right: 10px;
color: var(--color-accent-beige);
}
.pull-quote {
border-left: 3px solid var(--color-accent-beige);
padding-left: 20px;
margin: 20px 0;
font-family: var(--font-serif);
font-size: 1.2rem;
font-style: italic;
color: var(--color-text-primary);
}
.p3-main-content { flex-grow: 1; }
.spec-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
padding: 20px;
background-color: var(--color-off-white);
}
.spec-item { text-align: center; }
.spec-item .value {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-text-primary);
}
.spec-item .label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-secondary);
}
.details-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px 30px;
}
.details-item {
display: flex;
justify-content: space-between;
border-bottom: 1px solid var(--color-border);
padding-bottom: 8px;
font-size: 0.8rem;
}
.details-item .label { color: var(--color-text-secondary); }
.details-item .value { color: var(--color-text-primary); font-weight: 700; }
.amenities-list { list-style: none; padding: 0; column-count: 2; column-gap: 30px;}
.amenities-list li {
margin-bottom: 8px;
color: var(--color-text-secondary);
display: flex;
align-items: center;
font-size: 0.8rem;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
.amenities-list li i { color: var(--color-accent-beige); margin-right: 8px; }
.back-button {
position: fixed;
top: 20px;
left: 20px;
background: rgba(255,255,255,0.9);
color: #333;
padding: 10px 20px;
border-radius: 25px;
text-decoration: none;
font-weight: 500;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.back-button:hover {
background: white;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
</style>
</head>
<body>
<a href="template-preview.html" class="back-button">
<i class="fa-solid fa-arrow-left"></i> Back to Templates
</a>
<div class="brochure-page">
<div class="p1-container">
<div class="p1-image-side"></div>
<div class="p1-content-side">
<header class="p1-header">
<div class="collection">Elysian Estates Collection</div>
<h1 class="p1-main-title">The Serenity House</h1>
<p class="p1-address">123 Luxury Lane, Prestige City, PC 45678</p>
<p class="p1-ref-id">Reference ID: ES-8821</p>
</header>
<footer class="p1-footer">
<div class="area">6,200 Sq. Ft. • 5 Bedrooms • 6 Bathrooms</div>
An architectural marvel of curated living space.
<br>
<strong>Offered at $4,500,000</strong>
</footer>
</div>
</div>
</div>
<div class="brochure-page">
<div class="page-layout">
<span class="page-number">02</span>
<h1 class="page-title-main">A Sanctuary of Modern Design</h1>
<p class="page-title-sub">Where light, space, and nature converge to create an unparalleled living experience.</p>
<div class="p2-grid">
<div class="p2-text">
<p>Designed by the world-renowned architect, Helena Vance, The Serenity House is more than a home; it is a living sculpture. Every line, material, and detail has been thoughtfully considered to evoke a sense of peace and connection with the surrounding landscape. Soaring ceilings and floor-to-ceiling glass walls dissolve the boundaries between inside and out, flooding the space with natural light.</p>
<p class="pull-quote">A timeless residence built not just for living, but for thriving.</p>
<p>The interior palette is a harmonious blend of natural oak, Italian travertine, and warm bronze accents, creating an atmosphere of understated luxury. This property represents a unique opportunity to own a piece of architectural history.</p>
</div>
<div class="p2-image"></div>
</div>
</div>
</div>
</body>
</html>

340
previews/preview-vertice.html Normal file
View File

@ -0,0 +1,340 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Vertice - Template Preview</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
:root {
--color-dark: #111111;
--color-light: #FFFFFF;
--color-accent-green: #0A6847;
--color-grey-bg: #F0F0F0;
--color-text-dark: #222222;
--color-text-light: #EFEFEF;
--color-text-muted: #888888;
--color-border: #DDDDDD;
--font-main: 'Inter', sans-serif;
}
body {
font-family: var(--font-main);
background-color: #d8d8d8;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
margin: 0;
}
.brochure-page {
width: 400px;
height: 500px;
background-color: var(--color-light);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
.cover-page {
background-image: url('https://plus.unsplash.com/premium_photo-1677474827617-6a7269f97574?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
background-size: cover;
background-position: center;
color: var(--color-light);
justify-content: center;
align-items: center;
text-align: center;
position: relative;
flex: 1;
}
.cover-overlay {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3));
}
.cover-content {
position: relative; z-index: 2; padding: 40px;
}
.cover-content .subtitle {
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.8);
}
.cover-content .main-title {
font-size: 4rem;
font-weight: 800;
line-height: 1.1;
margin: 8px 0 15px 0;
text-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.cover-content .address {
font-size: 1rem;
font-weight: 400;
border-top: 1px solid var(--color-accent-green);
display: inline-block;
padding-top: 15px;
}
.cover-footer {
position: absolute;
bottom: 30px;
left: 30px; right: 30px;
z-index: 2;
display: flex;
justify-content: space-between;
font-size: 0.8rem;
font-weight: 500;
}
.page-container {
padding: 50px;
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.page-header {
display: flex;
justify-content: space-between;
align-items: baseline;
border-bottom: 1px solid var(--color-border);
margin-bottom: 15px;
}
.page-title {
font-size: 2rem;
font-weight: 800;
color: var(--color-dark);
}
.page-title span {
color: var(--color-accent-green);
}
.page-subtitle {
font-size: 0.9rem;
font-weight: 500;
color: var(--color-text-muted);
}
.page-footer-bar {
margin-top: auto;
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 15px;
border-top: 1px solid var(--color-border);
font-size: 0.8rem;
font-weight: 500;
color: var(--color-text-muted);
}
.page-footer-bar .property-name {
color: var(--color-dark);
}
.section-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--color-dark);
margin-bottom: 20px;
margin-top: 0;
}
.detail-item {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
padding: 8px 0;
border-bottom: 1px solid var(--color-border);
}
.detail-item .label { color: var(--color-text-muted); }
.detail-item .value { color: var(--color-text-dark); font-weight: 600; text-align: right; }
.vision-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
flex-grow: 1;
margin-bottom: 15px;
}
.vision-image {
background-image: url('https://images.unsplash.com/photo-1626704359446-0de90350b4e7?q=80&w=736&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
background-size: cover;
background-position: center;
}
.vision-text h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-dark);
margin-bottom: 15px;
}
.vision-text p {
font-size: 0.9rem;
line-height: 1.7;
color: var(--color-text-muted);
margin-bottom: 15px;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 150px 150px 150px;
gap: 15px;
flex-grow: 1;
padding-top: 5px;
}
.gallery-item {
background-size: cover;
background-position: center;
position: relative;
display: flex;
align-items: flex-end;
color: var(--color-light);
padding: 12px;
}
.gallery-item::after {
content: ''; position: absolute; top:0; left: 0; width: 100%; height: 100%;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}
.gallery-item span { font-weight: 600; z-index: 2; font-size: 0.8rem; }
.g-item-1 { grid-column: 1 / 3; grid-row: 1 / 2; background-image: url('https://images.unsplash.com/photo-1616046229478-9901c5536a45?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=800'); }
.g-item-2 { grid-column: 3 / 4; grid-row: 1 / 3; background-image: url('https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=800'); }
.g-item-3 { grid-column: 1 / 2; grid-row: 2 / 4; background-image: url('https://images.unsplash.com/photo-1600121848594-d8644e57abab?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=800'); }
.g-item-4 { grid-column: 2 / 3; grid-row: 2 / 3; background-image: url('https://images.unsplash.com/photo-1595526114035-0d45ed16433d?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=800'); }
.g-item-5 { grid-column: 2 / 4; grid-row: 3 / 4; background-image: url('https://images.unsplash.com/photo-1512918728675-ed5a71a580a9?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=800'); }
.amenities-intro {
font-size: 0.9rem;
line-height: 1.7;
color: var(--color-text-muted);
margin: 8px 0 15px 0;
}
.page4-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 40px;
flex-grow: 1;
margin-bottom: 20px;
}
.page4-image {
background-image: url('https://plus.unsplash.com/premium_photo-1675745330187-a6f001a21abe?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
background-size: cover;
background-position: center;
min-height: 100%;
border: 4px solid var(--color-accent-green);
}
.page4-content {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.amenities-list-p4 {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
column-count: 1;
column-gap: 20px;
}
.amenities-list-p4 li {
display: flex;
align-items: flex-start;
margin-bottom: 12px;
font-weight: 500;
font-size: 0.8rem;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
.amenities-list-p4 i {
font-size: 0.8rem;
color: var(--color-accent-green);
margin-right: 10px;
width: 15px;
margin-top: 2px;
}
.back-button {
position: fixed;
top: 20px;
left: 20px;
background: rgba(255,255,255,0.9);
color: #333;
padding: 10px 20px;
border-radius: 25px;
text-decoration: none;
font-weight: 500;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.back-button:hover {
background: white;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
</style>
</head>
<body>
<a href="template-preview.html" class="back-button">
<i class="fa-solid fa-arrow-left"></i> Back to Templates
</a>
<div class="brochure-page cover-page">
<div class="cover-overlay"></div>
<div class="cover-content">
<div class="subtitle">An Urban Oasis</div>
<h1 class="main-title">THE VERTICE</h1>
<div class="address">18 Skyline Avenue, Metropolis Centre, MC 90210</div>
</div>
<div class="cover-footer">
<span>Residences Starting from $1,200,000</span>
<span>Ref ID: VP-2025-001</span>
</div>
</div>
<div class="brochure-page">
<div class="page-container">
<header class="page-header">
<h1 class="page-title">Elevated <span>Living</span></h1>
<span class="page-subtitle">Discover Your Sanctuary in the Sky</span>
</header>
<main class="vision-grid">
<div class="vision-text">
<h3>Where Design Meets Desire.</h3>
<p>The Vertice is not just a building; it's a bold statement on modern urban living. Conceived for the discerning individual, it offers a unique blend of architectural prowess, bespoke interiors, and an unparalleled lifestyle experience right in the heart of the city.</p>
<p>Every residence is a testament to quality, featuring panoramic city views from floor-to-ceiling windows, intelligent home systems, and finishes selected from the finest materials around the globe. This is more than a home; it's a new perspective.</p>
</div>
<div class="vision-image"></div>
</main>
<footer class="page-footer-bar">
<span class="property-name">THE VERTICE</span>
<span>Page 02 / 06</span>
</footer>
</div>
</div>
<div class="brochure-page">
<div class="page-container">
<header class="page-header">
<h1 class="page-title">Exquisite <span>Interiors</span></h1>
<span class="page-subtitle">A Canvas for Your Life</span>
</header>
<main class="gallery-grid">
<div class="gallery-item g-item-1"><span>Open-Concept Living Space</span></div>
<div class="gallery-item g-item-2"><span>Master Bedroom Suite</span></div>
<div class="gallery-item g-item-3"><span>Gourmet Chef's Kitchen</span></div>
<div class="gallery-item g-item-4"><span>Spa-Inspired Bathroom</span></div>
<div class="gallery-item g-item-5"><span>Private Balcony Views</span></div>
</main>
<footer class="page-footer-bar">
<span class="property-name">THE VERTICE</span>
<span>Page 03 / 06</span>
</footer>
</div>
</div>
</body>
</html>