|
|
|
|
@@ -4,15 +4,10 @@ import { Inter } from "next/font/google";
|
|
|
|
|
import "./globals.css";
|
|
|
|
|
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
|
|
|
|
import Tag from "@/tag/Tag";
|
|
|
|
|
import { DM_Sans } from "next/font/google";
|
|
|
|
|
import { Manrope } from "next/font/google";
|
|
|
|
|
|
|
|
|
|
const halant = Halant({
|
|
|
|
|
variable: "--font-halant", subsets: ["latin"],
|
|
|
|
|
weight: ["300", "400", "500", "600", "700"],
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const inter = Inter({
|
|
|
|
|
variable: "--font-inter", subsets: ["latin"],
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
export const metadata: Metadata = {
|
|
|
|
|
title: "Luxury 5-Star Hotel - Luxe Hotel", description: "Experience world-class hospitality at Luxe Hotel. Award-winning accommodations, premium amenities, fine dining, and exceptional service in the heart of the city.", keywords: "luxury hotel, 5-star accommodation, fine dining, spa resort, premium rooms", metadataBase: new URL("https://luxehotel.com"),
|
|
|
|
|
@@ -33,6 +28,17 @@ export const metadata: Metadata = {
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const dmSans = DM_Sans({
|
|
|
|
|
variable: "--font-dm-sans",
|
|
|
|
|
subsets: ["latin"],
|
|
|
|
|
});
|
|
|
|
|
const inter = Inter({
|
|
|
|
|
variable: "--font-inter",
|
|
|
|
|
subsets: ["latin"],
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
export default function RootLayout({
|
|
|
|
|
children,
|
|
|
|
|
}: Readonly<{
|
|
|
|
|
@@ -41,9 +47,7 @@ export default function RootLayout({
|
|
|
|
|
return (
|
|
|
|
|
<html lang="en" suppressHydrationWarning>
|
|
|
|
|
<ServiceWrapper>
|
|
|
|
|
<body
|
|
|
|
|
className={`${halant.variable} ${inter.variable} antialiased`}
|
|
|
|
|
>
|
|
|
|
|
<body className={`${dmSans.variable} ${inter.variable} antialiased`}>
|
|
|
|
|
<Tag />
|
|
|
|
|
{children}
|
|
|
|
|
|
|
|
|
|
@@ -1655,9 +1659,7 @@ export default function RootLayout({
|
|
|
|
|
const getElementInfo = (element, assignId = false) => {
|
|
|
|
|
const rect = element.getBoundingClientRect();
|
|
|
|
|
const tagName = element.tagName.toLowerCase();
|
|
|
|
|
const selector = getUniqueSelector(element, assignId);
|
|
|
|
|
const sectionId = getSectionId(element);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let className = undefined;
|
|
|
|
|
try {
|
|
|
|
|
if (element.className) {
|
|
|
|
|
@@ -1685,8 +1687,7 @@ export default function RootLayout({
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
if (tagName === 'img') {
|
|
|
|
|
const originalSrc = extractOriginalUrl(element.src);
|
|
|
|
|
info.imageData = {
|
|
|
|
|
info.imageData = {
|
|
|
|
|
src: originalSrc,
|
|
|
|
|
alt: element.alt || undefined,
|
|
|
|
|
naturalWidth: element.naturalWidth,
|
|
|
|
|
@@ -1697,8 +1698,7 @@ export default function RootLayout({
|
|
|
|
|
|
|
|
|
|
if (tagName === 'video') {
|
|
|
|
|
const rawSrc = element.src || element.currentSrc || (element.querySelector('source') && element.querySelector('source').src) || '';
|
|
|
|
|
const resolvedSrc = extractOriginalUrl(rawSrc);
|
|
|
|
|
info.imageData = {
|
|
|
|
|
info.imageData = {
|
|
|
|
|
src: resolvedSrc,
|
|
|
|
|
alt: element.getAttribute('aria-label') || undefined,
|
|
|
|
|
isBackground: false,
|
|
|
|
|
@@ -1711,8 +1711,7 @@ export default function RootLayout({
|
|
|
|
|
if (backgroundImage && backgroundImage !== 'none') {
|
|
|
|
|
const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/);
|
|
|
|
|
if (urlMatch) {
|
|
|
|
|
const originalBgSrc = extractOriginalUrl(urlMatch[1]);
|
|
|
|
|
if (tagName !== 'img') {
|
|
|
|
|
if (tagName !== 'img') {
|
|
|
|
|
info.imageData = {
|
|
|
|
|
src: originalBgSrc,
|
|
|
|
|
isBackground: true
|
|
|
|
|
@@ -1724,8 +1723,7 @@ export default function RootLayout({
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const elementType = getElementType(element);
|
|
|
|
|
info.elementType = elementType;
|
|
|
|
|
info.elementType = elementType;
|
|
|
|
|
|
|
|
|
|
if (elementType === 'Button') {
|
|
|
|
|
const buttonText = element.textContent?.trim() || element.value || element.getAttribute('aria-label') || '';
|
|
|
|
|
@@ -1818,13 +1816,11 @@ export default function RootLayout({
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const isTextElement = (element) => {
|
|
|
|
|
const elementType = getElementType(element);
|
|
|
|
|
return elementType === 'Text';
|
|
|
|
|
return elementType === 'Text';
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const isButtonElement = (element) => {
|
|
|
|
|
const elementType = getElementType(element);
|
|
|
|
|
return elementType === 'Button';
|
|
|
|
|
return elementType === 'Button';
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const updateButtonText = (element, newText) => {
|
|
|
|
|
@@ -1899,8 +1895,7 @@ export default function RootLayout({
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleInput = () => {
|
|
|
|
|
const elementInfo = getElementInfo(element);
|
|
|
|
|
let currentText = element.textContent;
|
|
|
|
|
let currentText = element.textContent;
|
|
|
|
|
|
|
|
|
|
// Ensure there's always at least a space to keep the element editable
|
|
|
|
|
if (currentText === '' || currentText === null || currentText.length === 0) {
|
|
|
|
|
@@ -2013,8 +2008,7 @@ export default function RootLayout({
|
|
|
|
|
}, '*');
|
|
|
|
|
|
|
|
|
|
if (save && originalContent !== element.textContent) {
|
|
|
|
|
const elementInfo = getElementInfo(element);
|
|
|
|
|
let finalText = element.textContent;
|
|
|
|
|
let finalText = element.textContent;
|
|
|
|
|
|
|
|
|
|
// Trim the final text and convert space-only to empty string for saving
|
|
|
|
|
if (finalText === ' ' || finalText.trim() === '') {
|
|
|
|
|
@@ -2143,7 +2137,7 @@ export default function RootLayout({
|
|
|
|
|
lastMouseX = e.clientX;
|
|
|
|
|
lastMouseY = e.clientY;
|
|
|
|
|
|
|
|
|
|
const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;
|
|
|
|
|
|| e.target;
|
|
|
|
|
|
|
|
|
|
if (!isValidElement(target) || target === hoveredElement || target === selectedElement) {
|
|
|
|
|
return;
|
|
|
|
|
@@ -2175,8 +2169,7 @@ export default function RootLayout({
|
|
|
|
|
hoverOverlay = createHoverOverlay(target);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const elementType = getElementType(target);
|
|
|
|
|
showElementTypeLabel(target, elementType);
|
|
|
|
|
showElementTypeLabel(target, elementType);
|
|
|
|
|
|
|
|
|
|
window.parent.postMessage({
|
|
|
|
|
type: 'webild-element-hover',
|
|
|
|
|
@@ -2218,7 +2211,7 @@ export default function RootLayout({
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
|
|
|
|
|
const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;
|
|
|
|
|
|| e.target;
|
|
|
|
|
if (!isValidElement(target)) return;
|
|
|
|
|
|
|
|
|
|
if (selectedElement && selectedElement !== target) {
|
|
|
|
|
@@ -2263,8 +2256,7 @@ export default function RootLayout({
|
|
|
|
|
hoveredElement = null;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const elementInfo = getElementInfo(target, true);
|
|
|
|
|
selectedElement.dataset.webildSelector = elementInfo.selector;
|
|
|
|
|
selectedElement.dataset.webildSelector = elementInfo.selector;
|
|
|
|
|
showElementTypeLabel(target, elementInfo.elementType);
|
|
|
|
|
|
|
|
|
|
window.parent.postMessage({
|
|
|
|
|
@@ -2347,8 +2339,7 @@ export default function RootLayout({
|
|
|
|
|
isScrolling = false;
|
|
|
|
|
|
|
|
|
|
if (lastMouseX > 0 && lastMouseY > 0) {
|
|
|
|
|
const target = getMostSpecificElement(lastMouseX, lastMouseY);
|
|
|
|
|
if (target && isValidElement(target) && target !== selectedElement) {
|
|
|
|
|
if (target && isValidElement(target) && target !== selectedElement) {
|
|
|
|
|
hoveredElement = target;
|
|
|
|
|
|
|
|
|
|
const computedStyle = window.getComputedStyle(target);
|
|
|
|
|
@@ -2362,8 +2353,7 @@ export default function RootLayout({
|
|
|
|
|
hoveredElement.classList.add(hoverClass);
|
|
|
|
|
hoverOverlay = createHoverOverlay(target);
|
|
|
|
|
|
|
|
|
|
const elementType = getElementType(target);
|
|
|
|
|
showElementTypeLabel(target, elementType);
|
|
|
|
|
showElementTypeLabel(target, elementType);
|
|
|
|
|
|
|
|
|
|
window.parent.postMessage({
|
|
|
|
|
type: 'webild-element-hover',
|
|
|
|
|
@@ -2386,8 +2376,7 @@ export default function RootLayout({
|
|
|
|
|
|
|
|
|
|
const saveChangeToStorage = (change) => {
|
|
|
|
|
try {
|
|
|
|
|
const storageKey = getStorageKey();
|
|
|
|
|
const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]');
|
|
|
|
|
const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]');
|
|
|
|
|
|
|
|
|
|
const filteredChanges = existingChanges.filter(c => {
|
|
|
|
|
return !(c.oldValue === change.oldValue && c.sectionId === change.sectionId);
|
|
|
|
|
@@ -2407,8 +2396,7 @@ export default function RootLayout({
|
|
|
|
|
|
|
|
|
|
const clearLocalChanges = () => {
|
|
|
|
|
try {
|
|
|
|
|
const storageKey = getStorageKey();
|
|
|
|
|
localStorage.removeItem(storageKey);
|
|
|
|
|
localStorage.removeItem(storageKey);
|
|
|
|
|
window.parent.postMessage({
|
|
|
|
|
type: 'webild-local-changes-cleared',
|
|
|
|
|
data: {}
|
|
|
|
|
@@ -2457,8 +2445,7 @@ export default function RootLayout({
|
|
|
|
|
|
|
|
|
|
if (e.data.type === 'webild-cancel-changes') {
|
|
|
|
|
try {
|
|
|
|
|
const storageKey = getStorageKey();
|
|
|
|
|
const savedChanges = localStorage.getItem(storageKey);
|
|
|
|
|
const savedChanges = localStorage.getItem(storageKey);
|
|
|
|
|
if (savedChanges) {
|
|
|
|
|
const changes = JSON.parse(savedChanges);
|
|
|
|
|
changes.forEach(change => {
|
|
|
|
|
@@ -2480,8 +2467,7 @@ export default function RootLayout({
|
|
|
|
|
if (isBackground) {
|
|
|
|
|
element.style.backgroundImage = change.oldValue ? 'url(' + change.oldValue + ')' : '';
|
|
|
|
|
} else {
|
|
|
|
|
const oldMediaType = getMediaTypeFromUrl(change.oldValue);
|
|
|
|
|
if (revertTag === 'video' && oldMediaType === 'image') {
|
|
|
|
|
if (revertTag === 'video' && oldMediaType === 'image') {
|
|
|
|
|
swapMediaElement(element, 'img', change.oldValue);
|
|
|
|
|
} else if (revertTag === 'img' && oldMediaType === 'video') {
|
|
|
|
|
swapMediaElement(element, 'video', change.oldValue);
|
|
|
|
|
@@ -2529,8 +2515,7 @@ export default function RootLayout({
|
|
|
|
|
const el = textElements[i];
|
|
|
|
|
if (isTextElement(el) && el.textContent.trim() === (oldValue || '').trim()) {
|
|
|
|
|
element = el;
|
|
|
|
|
const newSelector = getUniqueSelector(element, true);
|
|
|
|
|
if (newSelector) {
|
|
|
|
|
if (newSelector) {
|
|
|
|
|
element.dataset.webildSelector = newSelector;
|
|
|
|
|
}
|
|
|
|
|
break;
|
|
|
|
|
@@ -2621,10 +2606,8 @@ export default function RootLayout({
|
|
|
|
|
replaced = true;
|
|
|
|
|
} else if (element.tagName.toLowerCase() === 'img') {
|
|
|
|
|
oldValue = element.src;
|
|
|
|
|
const newMediaType = getMediaTypeFromUrl(newSrc);
|
|
|
|
|
if (newMediaType === 'video' && allowMediaTypeSwap) {
|
|
|
|
|
const swapped = swapMediaElement(element, 'video', newSrc);
|
|
|
|
|
if (selectedElement === element) selectedElement = swapped;
|
|
|
|
|
if (newMediaType === 'video' && allowMediaTypeSwap) {
|
|
|
|
|
if (selectedElement === element) selectedElement = swapped;
|
|
|
|
|
element = swapped;
|
|
|
|
|
} else {
|
|
|
|
|
element.src = newSrc;
|
|
|
|
|
@@ -2632,11 +2615,9 @@ export default function RootLayout({
|
|
|
|
|
replaced = true;
|
|
|
|
|
} else if (element.tagName.toLowerCase() === 'video') {
|
|
|
|
|
oldValue = element.src || element.currentSrc || '';
|
|
|
|
|
const newMediaType = getMediaTypeFromUrl(newSrc);
|
|
|
|
|
const sources = element.querySelectorAll('source');
|
|
|
|
|
const sources = element.querySelectorAll('source');
|
|
|
|
|
if (newMediaType === 'image' && allowMediaTypeSwap) {
|
|
|
|
|
const swapped = swapMediaElement(element, 'img', newSrc);
|
|
|
|
|
if (selectedElement === element) selectedElement = swapped;
|
|
|
|
|
if (selectedElement === element) selectedElement = swapped;
|
|
|
|
|
element = swapped;
|
|
|
|
|
} else {
|
|
|
|
|
if (sources.length > 0) {
|
|
|
|
|
@@ -2658,8 +2639,7 @@ export default function RootLayout({
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (replaced) {
|
|
|
|
|
const elementInfo = getElementInfo(element);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let cleanOldValue = oldValue;
|
|
|
|
|
if (oldValue.includes('url(')) {
|
|
|
|
|
const urlMatch = oldValue.match(/url(['"]?([^'")]+)['"]?)/);
|
|
|
|
|
@@ -2730,13 +2710,7 @@ export default function RootLayout({
|
|
|
|
|
}
|
|
|
|
|
}, true);
|
|
|
|
|
|
|
|
|
|
const urlCheckInterval = setInterval(() => {
|
|
|
|
|
if (lastPathname !== window.location.pathname) {
|
|
|
|
|
lastPathname = window.location.pathname;
|
|
|
|
|
notifyPageChange();
|
|
|
|
|
}
|
|
|
|
|
}, 500);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
notifyPageChange();
|
|
|
|
|
|
|
|
|
|
window.webildCleanup = () => {
|
|
|
|
|
|