wireframe
This commit is contained in:
parent
62dffed702
commit
6ec3d9d0d3
@ -76,11 +76,23 @@ export class SiteTreeservice {
|
|||||||
return this.apiRequest.post(`sureops/deploy?projId=` + projId, data);
|
return this.apiRequest.post(`sureops/deploy?projId=` + projId, data);
|
||||||
}
|
}
|
||||||
|
|
||||||
createHtmlfile(siteNmae: String, data: any): Observable<any> {
|
// createHtmlfile(siteNmae: String, data: any): Observable<any> {
|
||||||
|
|
||||||
const _http = this.baseURL + "/createFile?siteBuilderName=" + siteNmae;
|
// const _http = this.baseURL + "/createFile?siteBuilderName=" + siteNmae;
|
||||||
|
// return this.apiRequest.post(_http, data);
|
||||||
|
// }
|
||||||
|
createHtmlfile(siteId: number, siteName: string, data: any): Observable<any> {
|
||||||
|
const formattedSiteName = this.formatSiteName(siteName);
|
||||||
|
const _http = `${this.baseURL}/createFile?siteId=${siteId}&siteBuilderName=${formattedSiteName}`;
|
||||||
return this.apiRequest.post(_http, data);
|
return this.apiRequest.post(_http, data);
|
||||||
}
|
}
|
||||||
|
private formatSiteName(name: string): string {
|
||||||
|
return name
|
||||||
|
.replace(/([a-z])([A-Z])/g, '$1_$2') // Convert camelCase to snake_case
|
||||||
|
.replace(/\s+/g, '_') // Replace spaces with underscores
|
||||||
|
.toLowerCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
createFiles(data: any, projId: number): Observable<any> {
|
createFiles(data: any, projId: number): Observable<any> {
|
||||||
return this.apiRequest.post(`sureops/createFile?projId=` + projId, data);
|
return this.apiRequest.post(`sureops/createFile?projId=` + projId, data);
|
||||||
|
|||||||
Binary file not shown.
@ -1777,282 +1777,282 @@ body {
|
|||||||
|
|
||||||
/* Master Reset & Base Styles */
|
/* Master Reset & Base Styles */
|
||||||
html, body {
|
html, body {
|
||||||
margin: 0 !important;
|
margin: 0 ;
|
||||||
padding: 0 !important;
|
padding: 0 ;
|
||||||
width: 100% !important;
|
width: 100% ;
|
||||||
min-height: 100% !important;
|
min-height: 100% ;
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;
|
||||||
font-size: 16px !important;
|
font-size: 16px ;
|
||||||
line-height: 1.6 !important;
|
line-height: 1.6 ;
|
||||||
color: #333 !important;
|
color: #333 ;
|
||||||
background-color: #fff !important;
|
background-color: #fff ;
|
||||||
box-sizing: border-box !important;
|
box-sizing: border-box ;
|
||||||
overflow-x: hidden !important;
|
overflow-x: hidden ;
|
||||||
text-align: left !important; /* Override center alignment */
|
text-align: left ; /* Override center alignment */
|
||||||
}
|
}
|
||||||
|
|
||||||
*, *::before, *::after {
|
*, *::before, *::after {
|
||||||
box-sizing: border-box !important;
|
box-sizing: border-box ;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Common Container */
|
/* Common Container */
|
||||||
.container {
|
// .container {
|
||||||
max-width: 1200px !important;
|
// max-width: 1200px ;
|
||||||
width: 100% !important;
|
// width: 100% ;
|
||||||
margin: 0 auto !important;
|
// margin: 0 auto ;
|
||||||
padding: 0 20px !important;
|
// padding: 0 20px ;
|
||||||
}
|
// }
|
||||||
|
|
||||||
/* Section Styling for Consistent Flow */
|
// /* Section Styling for Consistent Flow */
|
||||||
section {
|
// section {
|
||||||
padding: 80px 0 !important;
|
// padding: 80px 0 ;
|
||||||
position: relative !important;
|
// position: relative ;
|
||||||
width: 100% !important;
|
// width: 100% ;
|
||||||
background-color: #fff !important;
|
// background-color: #fff ;
|
||||||
}
|
// }
|
||||||
|
|
||||||
section:nth-child(even) {
|
// section:nth-child(even) {
|
||||||
background-color: #f9f9f9 !important;
|
// background-color: #f9f9f9 ;
|
||||||
}
|
// }
|
||||||
|
|
||||||
/* Typography Hierarchy */
|
/* Typography Hierarchy */
|
||||||
h1, h2, h3, h4, h5, h6 {
|
// h1, h2, h3, h4, h5, h6 {
|
||||||
margin-top: 0 !important;
|
// margin-top: 0 ;
|
||||||
margin-bottom: 0.5em !important;
|
// margin-bottom: 0.5em ;
|
||||||
line-height: 1.3 !important;
|
// line-height: 1.3 ;
|
||||||
font-weight: 700 !important;
|
// font-weight: 700 ;
|
||||||
color: #111 !important;
|
// color: #111 ;
|
||||||
}
|
// }
|
||||||
|
|
||||||
h1 {
|
// h1 {
|
||||||
font-size: 2.5rem !important;
|
// font-size: 2.5rem ;
|
||||||
}
|
// }
|
||||||
|
|
||||||
h2 {
|
// h2 {
|
||||||
font-size: 2rem !important;
|
// font-size: 2rem ;
|
||||||
}
|
// }
|
||||||
|
|
||||||
h3 {
|
// h3 {
|
||||||
font-size: 1.75rem !important;
|
// font-size: 1.75rem ;
|
||||||
}
|
// }
|
||||||
|
|
||||||
h4 {
|
// h4 {
|
||||||
font-size: 1.5rem !important;
|
// font-size: 1.5rem ;
|
||||||
}
|
// }
|
||||||
|
|
||||||
h5 {
|
// h5 {
|
||||||
font-size: 1.25rem !important;
|
// font-size: 1.25rem ;
|
||||||
}
|
// }
|
||||||
|
|
||||||
h6 {
|
// h6 {
|
||||||
font-size: 1rem !important;
|
// font-size: 1rem ;
|
||||||
}
|
// }
|
||||||
|
|
||||||
p {
|
// p {
|
||||||
margin-top: 0 !important;
|
// margin-top: 0 ;
|
||||||
margin-bottom: 1rem !important;
|
// margin-bottom: 1rem ;
|
||||||
color: #555 !important;
|
// color: #555 ;
|
||||||
}
|
// }
|
||||||
|
|
||||||
/* Link Styling */
|
/* Link Styling */
|
||||||
a {
|
// a {
|
||||||
color: #0066cc !important;
|
// color: #0066cc ;
|
||||||
text-decoration: none !important;
|
// text-decoration: none ;
|
||||||
transition: all 0.3s ease !important;
|
// transition: all 0.3s ease ;
|
||||||
}
|
// }
|
||||||
|
|
||||||
a:hover {
|
// a:hover {
|
||||||
color: #004499 !important;
|
// color: #004499 ;
|
||||||
text-decoration: underline !important;
|
// text-decoration: underline ;
|
||||||
}
|
// }
|
||||||
|
|
||||||
/* Button System */
|
/* Button System */
|
||||||
.hero-1-btn, .hero-2-btn, .grid-11-btn, .grid-12-btn,
|
.hero-1-btn, .hero-2-btn, .grid-11-btn, .grid-12-btn,
|
||||||
.split-8-btn, .split-10-btn, .text-1-btn, .text-2-btn,
|
.split-8-btn, .split-10-btn, .text-1-btn, .text-2-btn,
|
||||||
.cta-3-btn, .faq-4-footer-btn, .faq-5-contact-btn,
|
.cta-3-btn, .faq-4-footer-btn, .faq-5-contact-btn,
|
||||||
.faq-6-view-more-btn, .visa-order-btn, .nav-1-btn {
|
.faq-6-view-more-btn, .visa-order-btn, .nav-1-btn {
|
||||||
display: inline-block !important;
|
display: inline-block ;
|
||||||
padding: 12px 24px !important;
|
padding: 12px 24px ;
|
||||||
font-size: 16px !important;
|
font-size: 16px ;
|
||||||
font-weight: 600 !important;
|
font-weight: 600 ;
|
||||||
text-align: center !important;
|
text-align: center ;
|
||||||
border-radius: 6px !important;
|
border-radius: 6px ;
|
||||||
cursor: pointer !important;
|
cursor: pointer ;
|
||||||
transition: all 0.3s ease !important;
|
transition: all 0.3s ease ;
|
||||||
border: 2px solid transparent !important;
|
border: 2px solid transparent ;
|
||||||
letter-spacing: 0.5px !important;
|
letter-spacing: 0.5px ;
|
||||||
text-decoration: none !important;
|
text-decoration: none ;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary, .hero-1-solid, .hero-2-solid, .text-1-solid, .text-2-solid, .cta-3-solid, .nav-1-solid {
|
.hero-1-solid, .hero-2-solid, .text-1-solid, .text-2-solid, .cta-3-solid, .nav-1-solid {
|
||||||
background-color: #0066cc !important;
|
background-color: #0066cc ;
|
||||||
color: #fff !important;
|
color: #fff ;
|
||||||
border-color: #0066cc !important;
|
border-color: #0066cc ;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary:hover, .hero-1-solid:hover, .hero-2-solid:hover, .text-1-solid:hover, .text-2-solid:hover, .cta-3-solid:hover, .nav-1-solid:hover {
|
.hero-1-solid:hover, .hero-2-solid:hover, .text-1-solid:hover, .text-2-solid:hover, .cta-3-solid:hover, .nav-1-solid:hover {
|
||||||
background-color: #004499 !important;
|
background-color: #004499 ;
|
||||||
border-color: #004499 !important;
|
border-color: #004499 ;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-outline, .hero-1-outline, .hero-2-outline, .text-1-outline, .text-2-outline, .cta-3-outline, .nav-1-outline {
|
.hero-1-outline, .hero-2-outline, .text-1-outline, .text-2-outline, .cta-3-outline, .nav-1-outline {
|
||||||
background-color: transparent !important;
|
background-color: transparent ;
|
||||||
color: #0066cc !important;
|
color: #0066cc ;
|
||||||
border-color: #0066cc !important;
|
border-color: #0066cc ;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-outline:hover, .hero-1-outline:hover, .hero-2-outline:hover, .text-1-outline:hover, .text-2-outline:hover, .cta-3-outline:hover, .nav-1-outline:hover {
|
.hero-1-outline:hover, .hero-2-outline:hover, .text-1-outline:hover, .text-2-outline:hover, .cta-3-outline:hover, .nav-1-outline:hover {
|
||||||
background-color: #0066cc !important;
|
background-color: #0066cc ;
|
||||||
color: #fff !important;
|
color: #fff ;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Form Elements */
|
/* Form Elements */
|
||||||
input, textarea, select {
|
input, textarea, select {
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;
|
||||||
font-size: 16px !important;
|
font-size: 16px ;
|
||||||
padding: 12px !important;
|
padding: 12px ;
|
||||||
border: 1px solid #ccc !important;
|
border: 1px solid #ccc ;
|
||||||
border-radius: 6px !important;
|
border-radius: 6px ;
|
||||||
width: 100% !important;
|
width: 100% ;
|
||||||
transition: border-color 0.3s ease !important;
|
transition: border-color 0.3s ease ;
|
||||||
}
|
}
|
||||||
|
|
||||||
input:focus, textarea:focus, select:focus {
|
input:focus, textarea:focus, select:focus {
|
||||||
outline: none !important;
|
outline: none ;
|
||||||
border-color: #0066cc !important;
|
border-color: #0066cc ;
|
||||||
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1) !important;
|
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1) ;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Navigation Override */
|
/* Navigation Override */
|
||||||
.nav-1-navbar {
|
.nav-1-navbar {
|
||||||
background-color: #fff !important;
|
background-color: #fff ;
|
||||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) ;
|
||||||
position: sticky !important;
|
position: sticky ;
|
||||||
top: 0 !important;
|
top: 0 ;
|
||||||
z-index: 1000 !important;
|
z-index: 1000 ;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Blog Section Fixes */
|
/* Blog Section Fixes */
|
||||||
.tn1-blog-section, .blog-2-section {
|
.tn1-blog-section, .blog-2-section {
|
||||||
background-color: inherit !important;
|
background-color: inherit ;
|
||||||
padding: 80px 20px !important;
|
padding: 80px 20px ;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tn1-blog-card, .blog-2-card {
|
.tn1-blog-card, .blog-2-card {
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) ;
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
|
transition: transform 0.3s ease, box-shadow 0.3s ease ;
|
||||||
overflow: hidden !important;
|
overflow: hidden ;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tn1-blog-card:hover, .blog-2-card:hover {
|
.tn1-blog-card:hover, .blog-2-card:hover {
|
||||||
transform: translateY(-5px) !important;
|
transform: translateY(-5px) ;
|
||||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12) !important;
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12) ;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* FAQ Sections */
|
/* FAQ Sections */
|
||||||
.faq-4-section, .faq-5-section, .faq-6-block, .faq-7-container {
|
.faq-4-section, .faq-5-section, .faq-6-block, .faq-7-container {
|
||||||
background-color: inherit !important;
|
background-color: inherit ;
|
||||||
}
|
}
|
||||||
|
|
||||||
.faq-4-question, .faq-5-question, .faq-6-question, .faq-7-question {
|
.faq-4-question, .faq-5-question, .faq-6-question, .faq-7-question {
|
||||||
background-color: #f1f1f1 !important;
|
background-color: #f1f1f1 ;
|
||||||
transition: background-color 0.3s ease !important;
|
transition: background-color 0.3s ease ;
|
||||||
}
|
}
|
||||||
|
|
||||||
.faq-4-question:hover, .faq-5-question:hover, .faq-6-question:hover, .faq-7-question:hover {
|
.faq-4-question:hover, .faq-5-question:hover, .faq-6-question:hover, .faq-7-question:hover {
|
||||||
background-color: #e7e7e7 !important;
|
background-color: #e7e7e7 ;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Footer Override */
|
/* Footer Override */
|
||||||
.footer-1-section, .footer-2-section {
|
.footer-1-section, .footer-2-section {
|
||||||
background-color: #f8f8f8 !important;
|
background-color: #f8f8f8 ;
|
||||||
border-top: 1px solid #eee !important;
|
border-top: 1px solid #eee ;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Contact Section */
|
/* Contact Section */
|
||||||
.contact-1-section {
|
.contact-1-section {
|
||||||
background-color: #fff !important;
|
background-color: #fff ;
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) ;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact-1-submit-btn {
|
.contact-1-submit-btn {
|
||||||
background-color: #0066cc !important;
|
background-color: #0066cc ;
|
||||||
color: #fff !important;
|
color: #fff ;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact-1-submit-btn:hover {
|
.contact-1-submit-btn:hover {
|
||||||
background-color: #004499 !important;
|
background-color: #004499 ;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hero Section Enhancements */
|
/* Hero Section Enhancements */
|
||||||
.hero-1-two-column, .hero-2-centered-hero, .hero-9-section {
|
.hero-1-two-column, .hero-2-centered-hero, .hero-9-section {
|
||||||
background-color: inherit !important;
|
background-color: inherit ;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-1-placeholder, .hero-2-placeholder, .hero-9-placeholder {
|
.hero-1-placeholder, .hero-2-placeholder, .hero-9-placeholder {
|
||||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) ;
|
||||||
overflow: hidden !important;
|
overflow: hidden ;
|
||||||
position: relative !important;
|
position: relative ;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Split Sections */
|
/* Split Sections */
|
||||||
.split-8-section, .split-10-section {
|
.split-8-section, .split-10-section {
|
||||||
background-color: inherit !important;
|
background-color: inherit ;
|
||||||
}
|
}
|
||||||
|
|
||||||
.split-8-placeholder, .split-10-placeholder {
|
.split-8-placeholder, .split-10-placeholder {
|
||||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) ;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Testimonial Styling */
|
/* Testimonial Styling */
|
||||||
testimonial {
|
testimonial {
|
||||||
display: block !important;
|
display: block ;
|
||||||
max-width: 800px !important;
|
max-width: 800px ;
|
||||||
margin: 40px auto !important;
|
margin: 40px auto ;
|
||||||
padding: 35px !important;
|
padding: 35px ;
|
||||||
background-color: #fff !important;
|
background-color: #fff ;
|
||||||
border-radius: 10px !important;
|
border-radius: 10px ;
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) ;
|
||||||
font-style: italic !important;
|
font-style: italic ;
|
||||||
color: #444 !important;
|
color: #444 ;
|
||||||
position: relative !important;
|
position: relative ;
|
||||||
line-height: 1.8 !important;
|
line-height: 1.8 ;
|
||||||
font-size: 1.1rem !important;
|
font-size: 1.1rem ;
|
||||||
border-left: 5px solid #0066cc !important;
|
border-left: 5px solid #0066cc ;
|
||||||
}
|
}
|
||||||
|
|
||||||
testimonial::before {
|
testimonial::before {
|
||||||
content: '"' !important;
|
content: '"' ;
|
||||||
font-size: 5rem !important;
|
font-size: 5rem ;
|
||||||
color: #0066cc !important;
|
color: #0066cc ;
|
||||||
position: absolute !important;
|
position: absolute ;
|
||||||
left: 15px !important;
|
left: 15px ;
|
||||||
top: -10px !important;
|
top: -10px ;
|
||||||
opacity: 0.2 !important;
|
opacity: 0.2 ;
|
||||||
font-family: Georgia, serif !important;
|
font-family: Georgia, serif ;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Animations and Transitions */
|
/* Animations and Transitions */
|
||||||
.fade-in {
|
.fade-in {
|
||||||
animation: fadeIn 1s ease-in-out !important;
|
animation: fadeIn 1s ease-in-out ;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes fadeIn {
|
@keyframes fadeIn {
|
||||||
from {
|
from {
|
||||||
opacity: 0 !important;
|
opacity: 0 ;
|
||||||
transform: translateY(20px) !important;
|
transform: translateY(20px) ;
|
||||||
}
|
}
|
||||||
to {
|
to {
|
||||||
opacity: 1 !important;
|
opacity: 1 ;
|
||||||
transform: translateY(0) !important;
|
transform: translateY(0) ;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Ensure smooth scrolling */
|
/* Ensure smooth scrolling */
|
||||||
html {
|
html {
|
||||||
scroll-behavior: smooth !important;
|
scroll-behavior: smooth ;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|||||||
@ -4251,7 +4251,7 @@ button.light {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Header Styles */
|
/* Header Styles */
|
||||||
.pricing-header, .header, .title, .hero-heading {
|
.pricing-header, .title, .hero-heading {
|
||||||
text-align: center !important;
|
text-align: center !important;
|
||||||
margin-bottom: 20px !important;
|
margin-bottom: 20px !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -448,33 +448,55 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Updated single page container with minimal header and full height -->
|
||||||
|
<!-- Replace your current "all-pages-grid-container" section with this -->
|
||||||
|
<div *ngIf="!isLoading" class="single-page-container" [style.transform]="getPageTransform()">
|
||||||
|
|
||||||
<!-- Full Page Display -->
|
<!-- Page Actions Bar (Outside the grid) -->
|
||||||
<div *ngIf="!isLoading "
|
<div class="page-actions-bar">
|
||||||
class="page-display"
|
<div class="page-info">
|
||||||
[style.transform]="getPageTransform()">
|
<h2 class="current-page-title">{{ getCurrentPageName() }}</h2>
|
||||||
|
<span class="page-counter">Page {{ currentPageIndex + 1 }} of {{ pageRenderOrder.length }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Update your section template -->
|
<div class="page-actions">
|
||||||
<div class="connected-sections"
|
<button class="action-btn-modern copy-btn" (click)="copyPageToClipboard(getCurrentPageName())" title="Copy Page HTML">
|
||||||
|
<i class="fas fa-copy"></i>
|
||||||
|
<span>Copy HTML</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="action-btn-modern download-btn" (click)="downloadHtml(getCurrentPageName())" title="Download Page">
|
||||||
|
<i class="fas fa-download"></i>
|
||||||
|
<span>Download</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Single Page Display -->
|
||||||
|
<div class="single-page-wrapper">
|
||||||
|
<div *ngIf="pageRenderOrder.length > 0"
|
||||||
|
class="current-page-card">
|
||||||
|
|
||||||
|
<!-- Page Content -->
|
||||||
|
<div class="page-content-area">
|
||||||
|
<!-- Sections for current page -->
|
||||||
|
<div class="connected-sections"
|
||||||
cdkDropList
|
cdkDropList
|
||||||
[cdkDropListData]="getCurrentPageSections()"
|
[cdkDropListData]="getPageSections(getCurrentPageName())"
|
||||||
[cdkDropListConnectedTo]="allConnectedLists"
|
[cdkDropListConnectedTo]="allConnectedLists"
|
||||||
(cdkDropListDropped)="onSectionDrop($event)">
|
(cdkDropListDropped)="onSectionDrop($event, getCurrentPageName())">
|
||||||
|
|
||||||
<div *ngFor="let sectionKey of getCurrentPageSections()"
|
<div *ngFor="let sectionKey of getPageSections(getCurrentPageName())"
|
||||||
cdkDrag
|
cdkDrag
|
||||||
[cdkDragData]="sectionKey"
|
[cdkDragData]="sectionKey"
|
||||||
class="section-wrapper"
|
class="section-container"
|
||||||
#dragItem>
|
[class.editing]="isCurrentSectionEditing(sectionKey)">
|
||||||
|
|
||||||
<!-- Drag Handle -->
|
<!-- Drag Handle -->
|
||||||
<div class="drag-handle" cdkDragHandle>
|
<div class="drag-handle" cdkDragHandle>
|
||||||
<i class="fas fa-grip-vertical"></i>
|
<i class="fas fa-grip-vertical"></i>
|
||||||
<div style="height: 16px !important;"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Section Content -->
|
<!-- Section Content -->
|
||||||
<div class="section-content"
|
<div class="section-content"
|
||||||
[innerHTML]="getSectionHtml(getCurrentPageName(), sectionKey)"
|
[innerHTML]="getSectionHtml(getCurrentPageName(), sectionKey)"
|
||||||
@ -488,42 +510,439 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Drag Handle -->
|
|
||||||
<!-- <div class="drag-handle" cdkDragHandle style="display: none;">
|
|
||||||
<i class="fa fa-grip-lines"></i>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<!-- Empty State for Sections -->
|
<!-- Empty State for Sections -->
|
||||||
<div *ngIf="getCurrentPageSections().length === 0" class="empty-sections"
|
<div *ngIf="getPageSections(getCurrentPageName()).length === 0" class="empty-sections">
|
||||||
style="padding: 100px; text-align: center; color: #6c757d;">
|
<div class="empty-state-modern">
|
||||||
<div class="empty-state">
|
<i class="fas fa-plus-circle"></i>
|
||||||
<i class="fas fa-puzzle-piece" style="font-size: 48px; margin-bottom: 20px; opacity: 0.5;"></i>
|
<h3>No sections yet</h3>
|
||||||
<h3>No Sections Yet</h3>
|
<p>Add sections from the sidebar to get started</p>
|
||||||
<p>Add your first section to start building this page.</p>
|
</div>
|
||||||
<button class="action-btn primary" (click)="addNewSectionToCurrentPage()">
|
</div>
|
||||||
<i class="fas fa-plus"></i>
|
|
||||||
Add First Section
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Empty State for Pages -->
|
<!-- Enhanced Page Navigation -->
|
||||||
<div *ngIf="!isLoading && pageRenderOrder.length === 0" class="empty-pages"
|
<div *ngIf="pageRenderOrder.length > 0" class="page-navigation-enhanced">
|
||||||
style="display: flex; align-items: center; justify-content: center; height: 100vh;">
|
<button class="nav-btn-modern"
|
||||||
<div class="empty-state" style="text-align: center; color: #6c757d;">
|
(click)="previousPage()"
|
||||||
<i class="fas fa-file-plus" style="font-size: 64px; margin-bottom: 30px; opacity: 0.5;"></i>
|
[disabled]="currentPageIndex <= 0"
|
||||||
<h2>No Pages Yet</h2>
|
title="Previous Page">
|
||||||
<p style="font-size: 16px; margin-bottom: 30px;">Create your first page to get started with wireframing.</p>
|
<i class="fas fa-chevron-left"></i>
|
||||||
<button class="action-btn primary" (click)="createFirstPage()">
|
<span class="nav-text">Previous</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="page-indicator-enhanced">
|
||||||
|
<div class="page-dots">
|
||||||
|
<span *ngFor="let page of pageRenderOrder; let i = index"
|
||||||
|
class="page-dot"
|
||||||
|
[class.active]="i === currentPageIndex"
|
||||||
|
(click)="setCurrentPage(i)"
|
||||||
|
[title]="page">
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="page-info-text">
|
||||||
|
<span class="current-page-name">{{ getCurrentPageName() }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="nav-btn-modern"
|
||||||
|
(click)="nextPage()"
|
||||||
|
[disabled]="currentPageIndex >= pageRenderOrder.length - 1"
|
||||||
|
title="Next Page">
|
||||||
|
<span class="nav-text">Next</span>
|
||||||
|
<i class="fas fa-chevron-right"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Empty State for No Pages -->
|
||||||
|
<div *ngIf="pageRenderOrder.length === 0" class="empty-pages-modern">
|
||||||
|
<div class="empty-state-modern">
|
||||||
|
<i class="fas fa-file-plus"></i>
|
||||||
|
<h2>No Pages Created Yet</h2>
|
||||||
|
<p>Create your first page to start building your wireframe</p>
|
||||||
|
<button class="action-btn-modern primary-btn" (click)="createFirstPage()">
|
||||||
<i class="fas fa-plus"></i>
|
<i class="fas fa-plus"></i>
|
||||||
Create First Page
|
<span>Create First Page</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* Single Page Container */
|
||||||
|
.single-page-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 20px;
|
||||||
|
gap: 20px;
|
||||||
|
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Page Actions Bar */
|
||||||
|
.page-actions-bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
background: white;
|
||||||
|
padding: 16px 24px;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current-page-title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #212529;
|
||||||
|
background: linear-gradient(135deg, #007bff, #0056b3);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-counter {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #6c757d;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-btn-modern {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 12px 18px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-btn {
|
||||||
|
background: linear-gradient(135deg, #17a2b8, #138496);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-btn:hover {
|
||||||
|
background: linear-gradient(135deg, #138496, #117a8b);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-btn {
|
||||||
|
background: linear-gradient(135deg, #28a745, #218838);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-btn:hover {
|
||||||
|
background: linear-gradient(135deg, #218838, #1e7e34);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Single Page Wrapper */
|
||||||
|
.single-page-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current-page-card {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1200px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-content-area {
|
||||||
|
padding: 24px;
|
||||||
|
min-height: 600px;
|
||||||
|
max-height: calc(100vh - 250px);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Section Containers */
|
||||||
|
.section-container {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
background: white;
|
||||||
|
border: 2px solid #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-container:hover {
|
||||||
|
border-color: #007bff;
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 123, 255, 0.15);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-handle {
|
||||||
|
position: absolute;
|
||||||
|
top: 12px;
|
||||||
|
right: 12px;
|
||||||
|
background: rgba(0, 123, 255, 0.1);
|
||||||
|
color: #007bff;
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: grab;
|
||||||
|
z-index: 10;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-handle:hover {
|
||||||
|
background: rgba(0, 123, 255, 0.2);
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-handle:active {
|
||||||
|
cursor: grabbing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-content {
|
||||||
|
padding: 20px;
|
||||||
|
min-height: 100px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: linear-gradient(135deg, rgba(0, 123, 255, 0.05), rgba(0, 123, 255, 0.1));
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
pointer-events: none;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-container:hover .section-overlay {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-label {
|
||||||
|
position: absolute;
|
||||||
|
top: 12px;
|
||||||
|
left: 12px;
|
||||||
|
background: linear-gradient(135deg, #007bff, #0056b3);
|
||||||
|
color: white;
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Enhanced Page Navigation */
|
||||||
|
.page-navigation-enhanced {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
background: white;
|
||||||
|
padding: 16px 24px;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-btn-modern {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 12px 18px;
|
||||||
|
background: linear-gradient(135deg, #6c757d, #545b62);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-btn-modern:hover:not(:disabled) {
|
||||||
|
background: linear-gradient(135deg, #545b62, #495057);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-btn-modern:disabled {
|
||||||
|
background: #e9ecef;
|
||||||
|
color: #adb5bd;
|
||||||
|
cursor: not-allowed;
|
||||||
|
transform: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-indicator-enhanced {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-dots {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-dot {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #dee2e6;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-dot:hover {
|
||||||
|
background: #adb5bd;
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-dot.active {
|
||||||
|
background: linear-gradient(135deg, #007bff, #0056b3);
|
||||||
|
transform: scale(1.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-info-text {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current-page-name {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #495057;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Empty States */
|
||||||
|
.empty-sections, .empty-pages-modern {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state-modern {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px;
|
||||||
|
color: #6c757d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state-modern i {
|
||||||
|
font-size: 64px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
opacity: 0.6;
|
||||||
|
color: #dee2e6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state-modern h2, .empty-state-modern h3 {
|
||||||
|
margin: 16px 0 8px 0;
|
||||||
|
color: #495057;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state-modern p {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-btn {
|
||||||
|
background: linear-gradient(135deg, #007bff, #0056b3) !important;
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-btn:hover {
|
||||||
|
background: linear-gradient(135deg, #0056b3, #004085) !important;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.single-page-container {
|
||||||
|
padding: 12px;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-actions-bar {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-actions {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-btn-modern span,
|
||||||
|
.nav-text {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-navigation-enhanced {
|
||||||
|
padding: 12px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current-page-title {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-content-area {
|
||||||
|
padding: 16px;
|
||||||
|
max-height: calc(100vh - 300px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.page-dots {
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-dot {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-container {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-content {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div class="page-actions">
|
<div class="page-actions">
|
||||||
<button class="action-btn primary" (click)="copyPageToClipboard()">
|
<button class="action-btn primary" (click)="copyPageToClipboard()">
|
||||||
<i class="fas fa-copy"></i>
|
<i class="fas fa-copy"></i>
|
||||||
|
|||||||
@ -544,12 +544,12 @@ $shadow-heavy: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: rgba(255, 255, 255, 0.95);
|
background: rgba(255, 255, 255, 0.9);
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
|
|
||||||
.loading-container {
|
.loading-container {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -560,11 +560,11 @@ $shadow-heavy: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|||||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||||
|
|
||||||
.loading-text {
|
.loading-text {
|
||||||
font-size: 1.2rem;
|
text-align: center;
|
||||||
|
margin-top: 10px;
|
||||||
color: #333;
|
color: #333;
|
||||||
margin: 1rem 0 0.5rem;
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading-subtext {
|
.loading-subtext {
|
||||||
color: #666;
|
color: #666;
|
||||||
@ -573,17 +573,18 @@ $shadow-heavy: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|||||||
}
|
}
|
||||||
|
|
||||||
.progress-bar {
|
.progress-bar {
|
||||||
width: 100%;
|
width: 300px;
|
||||||
height: 8px;
|
height: 20px;
|
||||||
background: #f0f0f0;
|
background: #f0f0f0;
|
||||||
border-radius: 4px;
|
border-radius: 10px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
|
|
||||||
.progress-fill {
|
.progress-fill {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: #2196F3;
|
background: #2196F3;
|
||||||
transition: width 0.3s ease;
|
transition: width 0.3s ease;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
mat-spinner {
|
mat-spinner {
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user