qol fiex

public/client.js

@@ -1,58 +1,160 @@
-document.addEventListener("DOMContentLoaded", function() {
+const PayPalSDK = "https://sandbox.paypal.com/sdk/js?client-id=AcCW43LI1S6lLQgtLkF4V8UOPfmXcqXQ8xfEl41hRuMxSskR2jkWNwQN6Ab1WK7E2E52GNaoYBHqgIKd&components=buttons&enable-funding=card&disable-funding=paylater,venmo"
+
+const EditorJSComponents = [
+    "https://cdn.jsdelivr.net/npm/@editorjs/header@latest",
+    "https://cdn.jsdelivr.net/npm/@editorjs/image@latest",
+    "https://cdn.jsdelivr.net/npm/@editorjs/list@latest",
+    "https://cdn.jsdelivr.net/npm/@editorjs/quote@latest",
+    "https://cdn.jsdelivr.net/npm/@editorjs/code@latest",
+    "https://cdn.jsdelivr.net/npm/@editorjs/table@latest",
+    "https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest",
+];
+
+let typingTimeout;
+let hideTimeout;
+let editor;
+
+document.addEventListener("DOMContentLoaded", function () {
+    const dialog = document.getElementById("dialog");
+    const overlay = document.getElementById("overlay");
+    const floatingButtons = document.getElementById("floatingButtons");
+    const checkoutDialog = document.getElementById("checkoutDialog");
+    const editDialog = document.getElementById("editDialog");
+    const buyDialog = document.getElementById("buyDialog");
+
+    checkoutDialog.style.display = "none";
+    editDialog.style.display = "none";
     loadLanguage('es');
+
+    Promise.all(EditorJSComponents.map(src => loadScript(src))).then(() => {
+        return loadScript("/editor.js");
+    }).then(() => {
+        loadEditorState();
+    }).catch(err => console.error("Error loading editor:", err));
+
+    loadScript(PayPalSDK).then(() => {
+        return loadScript("/paypal.js");
+    }).catch(err => console.error(err));
+
+    initializeEventListeners();
+});
+
+function loadScript(src, async = true) {
+    return new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.src = src;
+        script.async = async;
+        script.onload = () => resolve();
+        script.onerror = () => reject(new Error(`Failed to load script: ${src}`));
+        document.head.appendChild(script);
+    });
+}
+
+function loadEditorState() {
     const savedData = localStorage.getItem('conex_data');
+    const holderElement = document.getElementById('editorjs');
+    holderElement.innerHTML = '';
+
     if (savedData) {
         const parsedData = JSON.parse(savedData);
         console.log('Loaded parsedData:', parsedData);
         document.getElementById('title').value = parsedData.title || '';
         document.getElementById('slogan').value = parsedData.slogan || '';
         document.getElementById('banner').src = parsedData.banner || '/static/svg/banner.svg';
+        const disclaimers = document.querySelectorAll(".localstorage-exists");
+        disclaimers.forEach((element) => {
+            element.style.display = "block";
+        });
+
+        initializeEditor(parsedData);
+
+        document.getElementById('continueEditingModeButton').style.display = "block";
+        fetch(`./lang/es.json`)
+            .then(response => response.json())
+            .then(translations => {
+                const translatedText = translations['continueEditingModeButton'];
+                const continueEditingModeButton = document.getElementById('continueEditingModeButton');
+                if (parsedData.title && translatedText) {
+                    continueEditingModeButton.innerText = `${translatedText}: ${parsedData.title}`;
+                } else {
+                    continueEditingModeButton.innerText = translatedText;
                 }
+            })
+            .catch(error => console.error('Error loading translation file:', error));
+    } else {
+        document.getElementById('title').value = '';
+        document.getElementById('slogan').value = '';
+        document.getElementById('banner').src = '/static/svg/banner.svg';
+        document.getElementById("continueEditingModeButton").style.display = "none";
+        const disclaimers = document.querySelectorAll(".localstorage-exists");
+        disclaimers.forEach((element) => {
+            element.style.display = "none";
+        });
 
-    const dialog = document.getElementById("dialog");
+        initializeEditor();
-    const overlay = document.getElementById("overlay");
-    const menu = document.getElementById("floatingButtons");
-    const checkoutErrorMessage = document.getElementById("checkout-error-message");
-
-    function openDialog() {
-        checkoutErrorMessage.style.display = "none";
-        dialog.style.display = "block";
-        overlay.style.display = "block";
-        menu.style.display = "none";
     }
+}
 
-    function closeDialog() {
+function initializeEventListeners() {
-        checkoutErrorMessage.style.display = "none";
+    // Prevent ENTER key in slogan element
-        dialog.style.display = "none";
+    document.getElementById('slogan').addEventListener('keydown', function(event) {
-        overlay.style.display = "none";
+        if (event.key === 'Enter') {
-        menu.style.display = "flex";
+            event.preventDefault();
         }
+    });
 
-    document.getElementById("openDialogButton").addEventListener("click", openDialog);
+    document.getElementById("buyButton").addEventListener("click", () => openDialog(checkoutDialog));
-    document.getElementById("cancelDialogButton").addEventListener("click", closeDialog);
+    document.getElementById("closeDialogButton").addEventListener("click", () => closeDialog());
+
+    // // Editor save
     document.getElementById('title').addEventListener('change', saveEditorData);
     document.getElementById('slogan').addEventListener('change', saveEditorData);
+
+    // // Mode switching
+    // document.getElementById('buyModeButton').addEventListener('click', openBuyModeDialog);
     document.getElementById('buyModeButton').addEventListener('click', buyMode);
-    document.getElementById('editModeButton').addEventListener('click', editModeWrapper);
+    document.getElementById('editModeButton').addEventListener('click', openEditModeDialog);
-    document.getElementById("continueToEditMode").addEventListener('click', function() {
+    document.getElementById("continueToEditModeButton").addEventListener('click', () =>
-        editMode(document.getElementById("dashEditInput").value);
+        editMode(document.getElementById("editModeDirectoryInput").value)
-    });
+    );
+    document.getElementById('continueEditingModeButton').addEventListener('click', continueMode);
+
     document.getElementById('dashButton').addEventListener('click', dashboardMode);
-});
+    document.getElementById('uploadBannerBtn').addEventListener('change', handleImageUpload);
+
+    const titleElement = document.getElementById('title');
+    if (titleElement) {
+        setupDirectoryInput(titleElement);
+    }
+}
+
+function openDialog(content) {
+    dialog.style.display = "block";
+    content.style.display = "block";
+    overlay.style.display = "block";
+    floatingButtons.style.display = "none";
+}
+
+function closeDialog() {
+    checkoutDialog.style.display = "none";
+    editDialog.style.display = "none";
+    // buyDialog.style.display = "none";
+    dialog.style.display = "none";
+    overlay.style.display = "none";
+    floatingButtons.style.display = "flex";
+    document.getElementById('checkout-error-message').style.display = "none";
+}
 
 function saveEditorData() {
-    const banner = document.getElementById('banner').src;
+    const titleValue = document.getElementById('title').value.trim();
-    const title = document.getElementById('title').value;
-    const slogan = document.getElementById('slogan').value;
-
-    editor.save().then((editor_data) => {
     const dataToSave = {
-            directory: sanitizeDirectoryTitle(title),
+        banner: document.getElementById('banner').src || '/static/svg/banner.svg',
-            banner: banner || '/static/svg/banner.svg',
+        title: document.getElementById('title').value,
-            title: title,
+        slogan: document.getElementById('slogan').value,
-            slogan: slogan,
+        directory: sanitizeDirectoryTitle(titleValue)
-            editor_data: editor_data
     };
+    editor.save().then((editor_data) => {
+        dataToSave.editor_data = editor_data;
         localStorage.setItem('conex_data', JSON.stringify(dataToSave));
         console.log('Editor data saved to localStorage');
     }).catch((error) => {
@@ -60,35 +162,22 @@ function saveEditorData() {
     });
 }
 
-let typingTimeout;
+function setupDirectoryInput(inputElement, debounceTime = 500) {
-let hideTimeout;
+    inputElement.addEventListener('input', () => {
-const directoryInput = document.getElementById('title');
-directoryInput.addEventListener('input', () => {
         clearTimeout(typingTimeout);
-    typingTimeout = setTimeout(() => {
-        const directoryTitle = directoryInput.value.trim();
-        if (directoryTitle.length > 0) {
-            const directory = sanitizeDirectoryTitle(directoryTitle);
-            checkDirectory(directory);
-        } else {
-            hidePopup();
-        }
-    }, 500); // Debounce
-});
 
-const directoryBuyInput = document.getElementById('dashEditInput');
-directoryBuyInput.addEventListener('input', () => {
-    clearTimeout(typingTimeout);
         typingTimeout = setTimeout(() => {
-        const directoryTitle = directoryBuyInput.value.trim();
+            const inputValue = inputElement.value.trim();
-        if (directoryTitle.length > 0) {
+
-            const directory = sanitizeDirectoryTitle(directoryTitle);
+            if (inputValue.length > 0) {
-            checkDirectoryReverse(directory);
+                const sanitizedValue = sanitizeDirectoryTitle(inputValue);  // Sanitize the input value
+                checkDirectory(sanitizedValue);
             } else {
                 hidePopup();
             }
-    }, 500); // Debounce
+        }, debounceTime);
-});
+    });
+}
 
 function sanitizeDirectoryTitle(title) {
     return title
@@ -100,48 +189,33 @@ function sanitizeDirectoryTitle(title) {
 }
 
 function checkDirectory(directory) {
-    if (directory.length < 4) {
+    if (!validateDirectoryLength(directory)) return;
-        return;
+    fetchDirectoryStatus(directory, 'exists', 'available', 'El sitio web ya existe', 'Se publicará en');
+}
+
+function validateDirectoryLength(directory) {
+    if (directory.length < 4 || directory.length > 35) {
+        showPopup('El título debe tener entre 4 y 35 caracteres', 'exists');
+        return false;
     }
-    if (directory.length > 35) {
+    return true;
-        showPopup(`El título no puede exceder los 35 caracteres`, 'exists');
+}
-        return;
+
-    }
+function fetchDirectoryStatus(directory, failureStatus, successStatus, failureMessage, successMessage) {
-    fetch(`/api/directory/${encodeURIComponent(directory)}`)
+    checkDirectoryExists(directory).then(exists => {
-        .then(response => response.json())
+        const message = exists ? `${failureMessage} conex.one/${directory}` : `${successMessage} conex.one/${directory}`;
-        .then(data => {
+        const status = exists ? failureStatus : successStatus;
-            if (data.exists) {
+        showPopup(message, status);
-                showPopup(`El sitio web conex.one/${directory} ya existe`, 'exists');
-            } else {
-                showPopup(`Se publicará en conex.one/${directory}`, 'available');
-            }
-        })
-        .catch(error => {
-            console.error('Error checking directory:', error);
-            showPopup('Error checking directory.', 'exists');
     });
 }
 
-function checkDirectoryReverse(directory) {
+function checkDirectoryExists(directory) {
-    if (directory.length < 4) {
+    return fetch(`/api/directory/${encodeURIComponent(directory)}`)
-        return;
-    }
-    if (directory.length > 35) {
-        showPopup(`El título no puede exceder los 35 caracteres`, 'exists');
-        return;
-    }
-    fetch(`/api/directory/${encodeURIComponent(directory)}`)
         .then(response => response.json())
-        .then(data => {
+        .then(data => data.exists)
-            if (data.exists) {
-                showPopup(`Editar el sitio web conex.one/${directory}`, 'available');
-            } else {
-                showPopup(`El sitio conex.one/${directory} no está registrado`, 'exists');
-            }
-        })
         .catch(error => {
             console.error('Error checking directory:', error);
-            showPopup('Error checking directory.', 'exists');
+            return false;
         });
 }
 
@@ -176,13 +250,20 @@ function showPopup(message, status) {
 }
 
 function hidePopup(popup, status) {
+    if (!popup) {
+        return;
+    }
     popup.classList.remove('show');
     setTimeout(() => {
         popup.classList.remove(status);
     }, 100);
 }
 
-document.getElementById('imageUpload').addEventListener('change', function (event) {
+function handleImageUpload() {
+    const uploadButton = document.getElementById('uploadBannerBtn');
+    const imageIcon = document.querySelector('.tool-button img');
+    const loader = document.querySelector('.loader');
+
     const savedData = localStorage.getItem('conex_data');
     const parsedData = savedData ? JSON.parse(savedData) : null;
     const directory = parsedData?.directory || "temp";
@@ -193,6 +274,10 @@ document.getElementById('imageUpload').addEventListener('change', function (even
         formData.append('file', file);
         formData.append('directory', directory);
 
+        uploadButton.disabled = true;
+        loader.style.display = 'inline-block';
+        imageIcon.style.display = 'none';
+
         fetch('/api/upload', {
             method: 'POST',
             body: formData,
@@ -205,9 +290,13 @@ document.getElementById('imageUpload').addEventListener('change', function (even
             }
         }).catch(error => {
             console.error('Error uploading the image:', error);
+        }).finally(() => {
+            uploadButton.disabled = false;
+            loader.style.display = 'none';
+            imageIcon.style.display = 'inline-block';
         });
     }
-});
+}
 
 function loadLanguage(lang) {
     fetch(`./lang/${lang}.json`)
@@ -230,12 +319,10 @@ function loadLanguage(lang) {
 }
 
 function dashboardMode() {
-    document.getElementById("dashOverlay").style.display = "none";
+    loadEditorState();
-    document.getElementById("dashDialog").style.display = "none";
+    const dashboard = document.getElementById('dashboard');
-
-    const dashboard = document.querySelector('.dashboard');
-
     dashboard.style.display = 'flex';
+    dashboard.style.opacity = '0';
     setTimeout(() => {
         dashboard.style.transition = 'opacity 0.5s ease';
         dashboard.style.opacity = '1';
@@ -243,9 +330,15 @@ function dashboardMode() {
 }
 
 function buyMode() {
-    document.getElementById("openDialogButton").style.display = "block";
+    localStorage.removeItem('conex_data');
-    document.getElementById("updateSiteButton").style.display = "none";
+    loadEditorState();
-    const dashboard = document.querySelector('.dashboard');
+
+    document.getElementById('checkout-success-message').style.display = "none";
+    document.querySelector("#paypal-button-container").style.display = "block";
+    document.getElementById("buyButton").style.display = "block";
+    document.getElementById("editButton").style.display = "none";
+
+    const dashboard = document.getElementById('dashboard');
     dashboard.style.transition = 'opacity 0.5s ease';
     dashboard.style.opacity = '0';
 
@@ -254,15 +347,61 @@ function buyMode() {
     }, 500);
 }
 
+function continueMode() {
+    const savedData = localStorage.getItem('conex_data');
+    if (savedData) {
+        const parsedData = JSON.parse(savedData);
+        if (parsedData.directory) {
+            checkDirectoryExists(parsedData.directory).then(exists => {
+                if (exists) {
+                    editMode(parsedData.directory);
+                } else {
+                    continueBuyMode();
+                }
+            });
+        } else {
+            continueBuyMode();
+        }
+    } else {
+        buyMode();
+    }
+}
+
+function continueBuyMode() {
+    document.getElementById("buyButton").style.display = "block";
+    document.getElementById("editButton").style.display = "none";
+    const dashboard = document.getElementById('dashboard');
+    dashboard.style.transition = 'opacity 0.5s ease';
+    dashboard.style.opacity = '0';
+
+    setTimeout(() => {
+        dashboard.style.display = 'none';
+    }, 500);
+}
+
+function openBuyModeDialog() {
+    overlay.style.display = "block";
+    dialog.style.display = "block";
+    buyDialog.style.display = "block";
+}
+
+function openEditModeDialog() {
+    overlay.style.display = "block";
+    dialog.style.display = "block";
+    editDialog.style.display = "block";
+}
+
 async function editMode(dir) {
-    const success = await loadEditorData(dir);
+    closeDialog();
+    const success = await fetchAndStoreData(dir);
     if (!success) {
         console.error("Data could not be loaded, aborting UI changes");
         return;
     }
-    document.getElementById("openDialogButton").style.display = "none";
+
-    document.getElementById("updateSiteButton").style.display = "block";
+    document.getElementById("buyButton").style.display = "none";
-    const dashboard = document.querySelector('.dashboard');
+    document.getElementById("editButton").style.display = "block";
+    const dashboard = document.getElementById('dashboard');
     dashboard.style.transition = 'opacity 0.5s ease';
     dashboard.style.opacity = '0';
 
@@ -271,40 +410,21 @@ async function editMode(dir) {
     }, 500);
 }
 
-function editModeWrapper() {
+async function fetchAndStoreData(directoryName) {
-    document.getElementById("dashOverlay").style.display = "block";
+    try {
-    document.getElementById("dashDialog").style.display = "block";
+        const response = await fetch(`/api/fetch/${encodeURIComponent(directoryName)}`);
-    document.getElementById("dashEditInput").style.display = "block";
-}
-
-function loadEditorData(dirname) {
-    return new Promise((resolve, reject) => {
-        fetch(`/api/fetch/${dirname}`)
-            .then(response => {
         if (!response.ok) {
-                    throw new Error('Network response was not ok');
+            throw new Error(`Failed to fetch data for directory: ${directoryName}`);
-                }
-                return response.json();
-            })
-            .then(data => {
-                // Populate the data into the form elements
-                document.getElementById('banner').src = data.banner || '/static/svg/banner.svg';
-                document.getElementById('title').value = data.title || '';
-                document.getElementById('slogan').value = data.slogan || '';
-
-                // Load editor data if available
-                if (data.editor_data && typeof editor !== 'undefined') {
-                    editor.render({
-                        blocks: data.editor_data.blocks || []
-                    });
         }
 
-                console.log('Editor data loaded successfully');
+        const data = await response.json();
-                resolve(true); // Resolve with success
+        localStorage.setItem('conex_data', JSON.stringify(data));
-            })
+        console.log('Data fetched and stored in localStorage:', data);
-            .catch(error => {
+
-                console.error('Fetching and loading data failed:', error);
+        loadEditorState();
-                resolve(false); // Resolve with failure, but not reject to avoid unhandled errors
+        return true;
-            });
+    } catch (error) {
-    });
+        console.error('Error fetching and storing data:', error);
+        return false;
+    }
 }

public/editor.js

@@ -1,8 +1,7 @@
-const savedData = localStorage.getItem('conex_data');
+function initializeEditor(conex_data) {
-const parsedData = savedData ? JSON.parse(savedData) : null;
+    directory = conex_data?.directory || "temp";
-const directory = parsedData?.directory || "temp";
 
-const editor = new EditorJS({
+    editor = new EditorJS({
         // readOnly: false,
         holder: 'editorjs',
 
@@ -59,7 +58,7 @@ const editor = new EditorJS({
             },
         },
 
-    data: parsedData ? parsedData.editor_data : {
+        data: conex_data?.editor_data || {
             blocks: [
                 {
                     type: "header",
@@ -176,4 +175,5 @@ const editor = new EditorJS({
         onChange: function(api, event) {
             saveEditorData();
         }
-});
+    });
+}

public/index.html

@@ -1,66 +1,63 @@
 <!DOCTYPE html>
 <html lang="es">
   <head>
-    <title>Builder | CONEX.one </title>
+    <title>Editor | CONEX.one </title>
-    <link rel="canonical" href="https://builder.conex.one">
+    <link rel="canonical" href="https://editor.conex.one">
     <link rel="icon" type="image/svg+xml" href="/static/svg/favicon.svg">
     <meta name="description" content="Constructor de sitios web de CONEX.one">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="robots" content="index, follow">
     <meta charset="utf-8">
     <link rel="stylesheet" href="/static/css/style.css">
     <link rel="stylesheet" href="/static/css/editorjs-dark.css">
   </head>
-  <div class="dashboard">
-    <div class="wave"></div>
-    <div class="wave"></div>
-    <div class="wave"></div>
-    <div class="mode-button-container">
-      <h1 class="dashboard-text" data-translate="welcome"></h1>
-      <p class="dashboard-text" data-translate="about"></p>
-      <span data-translate="buyModeButton" id="buyModeButton" class="mode-button buyModeButton"></span>
-      <span data-translate="editModeButton" id="editModeButton" class="mode-button editModeButton"></span>
-    </div>
-    <div id="dashOverlay"></div>
-    <div id="dashDialog">
-      <h2 data-translate="editDialogHeader"></h2>
-      <p data-translate="editDialogParagraph"></p>
-      <input type="text" id="dashBuyInput" name="title" maxlength="35" class="input-title" data-translate="sampleTitle" placeholder="" >
-      <input type="text" id="dashEditInput" name="title" maxlength="35" class="input-title" data-translate="sampleTitle" placeholder="" >
-      <button id="continueToEditMode">
-        <span data-translate="continueToEditMode"></span>
-      </button>
-    </div>
-  </div>
-  <div class="banner">
-    <input type="file" id="imageUpload" accept="image/*">
-    <label for="imageUpload" class="upload-button">
-      <img src="/static/svg/image.svg" alt="Edit Icon" class="icon">
-    </label>
-    <img id="banner" name="banner" src="/static/svg/banner.svg" class="banner-image"/>
-    <div class="desc">
-      <input type="text" id="title" name="title" maxlength="35" class="input-title" data-translate="sampleTitle" placeholder="" >
-      <textarea type="text" id="slogan" name="slogan" maxlength="100" class="input-slogan" data-translate="sampleSlogan" placeholder=""></textarea>
-    </div>
   <div id="status-popup" class="status-popup">
     <span class="close-popup" onclick="hidePopup()">×</span>
     <span id="status-message"></span>
   </div>
+  <div id="overlay"></div>
+  <div id="dashboard">
+    <div class="wave"></div>
+    <div class="wave"></div>
+    <div class="wave"></div>
+    <div class="dashboard-content">
+      <h1 data-translate="welcome"></h1>
+      <p data-translate="about"></p>
+      <span id="buyModeButton">
+        <h4 data-translate="buyModeButton"></h4>
+        <p class="localstorage-exists" data-translate="buyModeButtonDisclaimer"></p>
+      </span>
+      <span id="continueEditingModeButton">
+        <h4 data-translate="continueEditingModeButton"></h4>
+      </span>
+      <span id="editModeButton">
+        <h4 data-translate="editModeButton"></h4>
+        <p class="localstorage-exists" data-translate="editModeButtonDisclaimer"></p>
+      </span>
+    </div>
+  </div>
+  <div class="banner">
+    <div class="banner-toolbar">
+      <input type="file" id="uploadBannerBtn" class="tool-button-input" accept="image/*">
+      <label for="uploadBannerBtn" class="tool-button">
+        <img src="/static/svg/image.svg" alt="Edit Icon" class="icon">
+        <span class="loader"></span>
+      </label>
+    </div>
+    <img id="banner" src="/static/svg/banner.svg" class="banner-image"/>
+    <div class="desc">
+      <input type="text" id="title" maxlength="35" class="input-title" data-translate="sampleTitle" placeholder="" >
+      <textarea type="text" id="slogan" maxlength="100" class="input-slogan" data-translate="sampleSlogan" placeholder=""></textarea>
+    </div>
   </div>
   <body>
-    <div class="content">
-      <div id="editor-container">
     <div id="editorjs"></div>
-      </div>
-    </div>
   </body>
-  <div id="overlay"></div>
+  <div class="floating-buttons-container" id="floatingButtons">
-  <div class="floating-buttons" id="floatingButtons">
+    <button class="floating-button" id="buyButton">
-    <button class="floating-button" id="openDialogButton">
       <img src="/static/svg/check.svg">
       <span data-translate="buyButton"></span>
     </button>
-    <button class="floating-button" id="updateSiteButton">
+    <button class="floating-button" id="editButton">
       <img src="/static/svg/check.svg">
       <span data-translate="editButton"></span>
     </button>
@@ -70,32 +67,33 @@
     </button>
   </div>
   <div id="dialog">
+    <button id="closeDialogButton" type="button">
+      <picture>
+        <source srcset="/static/svg/xd.svg" media="(prefers-color-scheme: dark)">
+        <img src="/static/svg/x.svg" style="width: 1em; height: 1em;" id="closeIcon">
+      </picture>
+    </button>
+    <div id="checkoutDialog">
+      <div class="message success-message" style="display:block" data-translate="checkoutSaveNotif"></div>
       <h2 data-translate="checkoutHeader"></h2>
       <p data-translate="checkoutParagraph"></p>
       <ul>
         <li data-translate="supportEmail"></li>
-      <!-- <li data-translate="supportPhone"></li> -->
+        <li data-translate="supportPhone"></li>
         <li data-translate="supportSchedule"></li>
       </ul>
-    <div id="checkout-error-message"></div>
+      <div class="message success-message" id="checkout-success-message"></div>
-    <div id="checkout-success-message"></div>
+      <div class="message error-message" id="checkout-error-message"></div>
       <div id="paypal-button-container"></div>
-    <button id="cancelDialogButton" type="button">
+    </div>
-      <picture>
+    <div id="editDialog">
-        <source srcset="/static/svg/xd.svg" media="(prefers-color-scheme: dark)">
+      <h2 data-translate="editDialogHeader"></h2>
-        <img src="/static/svg/x.svg" style="width: 0.7em; height: 0.7em;" alt="Close" id="closeIcon">
+      <p data-translate="editDialogParagraph"></p>
-      </picture>
+      <input class="input-dialog" type="text" id="editModeDirectoryInput" name="title" maxlength="35" placeholder="https://conex.one/mi-sitio"><br>
+      <button id="continueToEditModeButton" class="right">
+        <span data-translate="continueToEditModeButton"></span>
       </button>
     </div>
+  </div>
   <script src="/client.js"></script>
-  <script src="https://sandbox.paypal.com/sdk/js?client-id=AcCW43LI1S6lLQgtLkF4V8UOPfmXcqXQ8xfEl41hRuMxSskR2jkWNwQN6Ab1WK7E2E52GNaoYBHqgIKd&components=buttons&enable-funding=card&disable-funding=paylater,venmo"></script>
-  <script src="/paypal.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script><!-- Header -->
-  <script src="https://cdn.jsdelivr.net/npm/@editorjs/image@latest"></script><!-- Image -->
-  <script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script><!-- List -->
-  <script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@latest"></script><!-- Quote -->
-  <script src="https://cdn.jsdelivr.net/npm/@editorjs/code@latest"></script><!-- Code -->
-  <script src="https://cdn.jsdelivr.net/npm/@editorjs/table@latest"></script><!-- Table -->
-  <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
-  <script src="/editor.js"></script>
 </html>

public/lang/es.json

@@ -2,13 +2,17 @@
   "welcome": "Editor | CONEX.one",
   "about": "En editor.conex.one puede crear un sitio web de manera rápida y sencilla, por $20 al año. Para continuar editando un sitio, presione el botón \"Editar sitio existente\". Si desea crear un sitio desde cero, presione el botón \"Diseñar un nuevo sitio\"",
   "buyModeButton": "Diseñar un nuevo sitio",
+  "buyModeButtonDisclaimer": "Limpiará el progreso actual para diseñar un sitio desde cero",
   "editModeButton": "Editar sitio existente",
+  "editModeButtonDisclaimer": "Limpiará el progreso actual para cargar un sitio existente",
+  "continueEditingModeButton": "Continuar editando",
   "editDialogHeader": "Editar un sitio existente",
   "editDialogParagraph": "El sitio ya debe estar registrado en conex.one para poder cargarlo localmente.",
-  "continueToEditMode": "Editar este sitio",
+  "continueToEditModeButton": "Editar este sitio",
   "buyButton": "Guardar",
   "editButton": "Aplicar cambios",
   "dashButton": "Panel principal",
+  "checkoutSaveNotif": "¡El progreso se guardó con éxito!",
   "checkoutHeader": "Contratar por $20 al año",
   "checkoutParagraph": "Gracias por elegir nuestro servicio para la compra de sitios web. Luego de ser aprobado, su sitio será publicado en menos de 24 horas a partir de la confirmación de tu compra. Utilizaremos los medios de contacto que proporcione para comunicarnos en caso de cualquier inconveniente con la publicación. Si experimenta algún problema, no dude en ponerte en contacto con nosotros a través de los canales:",
   "supportEmail": "Correo electrónico: soporte@conex.one",

public/paypal.js

@@ -90,8 +90,11 @@ paypal.Buttons({
                         <p>
                         Estado: <strong>${transaction.status}</strong><br>
                         ID de transacción: ${transaction.id}<br>
-                        Luego de una revisión positiva, su sitio será publicado en menos de 24 horas.
+                        Luego de una revisión positiva, su sitio será publicado en menos de 24 horas en el enlace:
+                        </p>
                         <p>
+			<a href="https://conex.one/${savedData.directory}/">conex.one/${savedData.directory}</a>
+                        </p>
                 `,);
                 document.querySelector("#paypal-button-container").style.display = "none";
                 console.log(

public/static/css/style.css

@@ -12,6 +12,7 @@
   --line-height: 1.7;
   --smaller-font: 0.75em;
   --hyper-color: #0f82af;
+  --border-radius-regular: 10px;
   text-align: justify;
   margin: auto;
 }
@@ -80,234 +81,79 @@ a {
   z-index: -1000;
 }
 
+.tool-button-input {
+  display: none;
+}
+
+.tool-button {
+  position: absolute;
+  top: 0.8em;
+  left: 0.8em;
+  display: inline-flex;
+  width: 2.2em;
+  height: 2.2em;
+  border-radius: var(--border-radius-regular);
+  border: 1px solid var(--hover-border);
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s ease;
+  overflow: hidden;
+}
+
+.tool-button:hover {
+  background-color: #ffffff40;
+}
+
+.tool-button .icon {
+  width: 1.2em;
+  height: 1.2em;
+}
+
+.input-title,
+.input-slogan,
+.input-title:focus,
+.input-slogan:focus {
+  font-family: var(--font-family);
+  width: 100%;
+  background-color: #00000000;
+  border-color: #00000000;
+  color: white;
+  text-align: center;
+  outline: none;
+  line-height: 1em;
+  resize: none;
+}
+
 .input-title {
   font-size: 2em;
   font-weight: bold;
-  text-align: center;
-  width: 100%;
-  background-color: #00000000;
-  border-color: #00000000;
-  color: white;
-  margin-bottom: -0.2em;
 }
 
-.input-slogan {
+#editorjs {
-  font-family: var(--font-family);
-  text-align: center;
-  width: 100%;
-  background-color: #00000000;
-  border-color: #00000000;
-  color: white;
-  line-height: 1em;
-  margin: 0.5em auto 0em auto;
-  outline: none;
-}
-
-.input-title:focus,
-.input-slogan:focus {
-  outline: none;
-}
-
-div.profilepicture img {
-  display: flex;
-  margin: 0 auto;
-  margin-top: 2em;
-  width: 50%;
-  max-width: 250px;
-  border-radius: 50%;
-}
-
-.content {
-  flex: 1 0 auto;
-  margin: 0 auto;
-  max-width: 800px;
   width: 90%;
-  margin-bottom: 2em;
-}
-
-.content li {
-  line-height: 1.4em;
-  text-align: left;
-}
-
-.content p {
-  line-height: 1.4em;
-  text-align: justify;
-}
-
-.content img {
   margin: 0 auto;
-  width: 100%;
-  margin: 1em 0;
 }
 
-footer {
+.floating-buttons-container {
-  background-color: var(--hover-background);
-  color: var(--unemph-color);
-  text-align: center;
-  width: 100%;
-  margin: 1em auto 0 auto;
-  padding-top: 1em;
-  padding-bottom: 1em;
-}
-
-#dashDialog,
-#dialog {
-  width: 85%;
-  max-width: 30em;
-  display: none;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  padding: 1.5em;
-  background: var(--background-color);
-  border: 1px solid var(--hover-border);
-  box-shadow: 0 0 3em rgba(0, 0, 0, 0.4);
-  z-index: 1000;
-  border-radius: 10px;
-  text-align: left;
-  overflow: auto;
-  max-height: 70vh;
-}
-
-#dashDialog h2, #dashDialog p,
-#dialog h2, #dialog p {
-  margin: 0;
-  padding: 0 0 0.5em 0;
-  text-align: justify;
-}
-
-#dashDialog button,
-#dialog button {
-  margin: 0.5em 0.5em 0 0;
-  padding: 1em;
-}
-
-#dashOverlay,
-#overlay {
-  display: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 999;
-}
-
-#dashOverlay {
-  z-index: 1000;
-}
-
-#dashDialog input,
-#dialog input {
-  text-align: left;
-  font-size: 1em;
-  display: block;
-  width: 90%;
-  color: var(--color);
-  background: var(--hover-background);
-  border: 1px solid var(--hover-border);
-  border-radius: 10px;
-  padding: 1em;
-  margin: 1em auto;
-}
-
-#dashDialog input {
-  display: none;
-}
-
-#form-container {
-  padding-bottom: 1em;
-}
-
-#warning-message {
-  display: none;
-}
-
-#warning-message p {
-  text-decoration: underline;
-  color: var(--warning-color);
-}
-
-button {
-  padding: 0.5em;
-  margin: 1em auto;
-  color: var(--unemph-color);
-  background: var(--background-color);
-  border: 1px solid var(--hover-border);
-  border-radius: 10px;
-}
-
-#dialog button:hover {
-  background: var(--hover-background);
-  color: var(--color);
-}
-
-#paypal-button-container > div {
-  margin: 1.5em 0 0 0;
-}
-
-#checkout-success-message,
-#checkout-error-message {
-  display: none;
-  padding: 0.8em;
-  border-radius: 10px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  margin: 2em 0;
-}
-
-#checkout-success-message {
-  background-color: #d4edda;
-  color: #155724;
-}
-
-#checkout-error-message {
-  background-color: #f8d7da;
-  color: #721c24;
-}
-
-#cancelDialogButton {
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  background-color: var(--background-color);
-  border: 1px solid var(--hover-border);
-  color: var(--unemph-color);
-  position: absolute;
-  transition: 0.3s;
-  border-radius: 50%;
-  width: 1em;
-  height: 1em;
-  top: 0.5em;
-  right: 0.5em;
-  font-size: 1.1em;
-}
-
-.floating-buttons {
   display: flex;
   position: fixed;
   flex-direction: row;
   align-items: center;
-  bottom: 0.2em;
+  bottom: 1.5em;
-  right: 0.5em;
+  right: 1.5em;
-  gap: 0.4em;
+  gap: 0.6em;
-  z-index: 2000;
+  z-index: 30;
 }
 
 .floating-button {
   height: 2.5em;
   cursor: pointer;
   font-size: 1em;
-  z-index: 2000;
   border-radius: 999px;
   box-sizing: border-box;
-  color: rgba(255, 255, 255, 0.85);
+  color: #ffffff;
-  font-size: 1em;
+  padding: 0 1em;
-  font-weight: bold;
-  outline: 0 solid transparent;
-  padding: 8px 18px;
   width: fit-content;
   word-break: break-word;
   border: 0;
@@ -323,16 +169,12 @@ button {
   margin-left: 0.6em;
 }
 
-.floating-button:hover {
+#editButton {
-  background-color: #0056b3;
-}
-
-#updateSiteButton {
   background: linear-gradient(135deg, #214353, #4c9abf);
   box-shadow: #0099c5 0 10px 20px -15px;
 }
 
-#openDialogButton {
+#buyButton {
   background: linear-gradient(135deg, #21532a, #4fc764);
   box-shadow: #27d100 0 10px 20px -15px;
 }
@@ -342,94 +184,33 @@ button {
   box-shadow: #8f53b9 0 10px 20px -15px;
 }
 
-.status-popup {
+#overlay {
-  position: fixed;
-  top: 19%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  padding: 12px;
-  border-radius: 8px;
-  background-color: #f0f0f0;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  font-size: 16px;
-  text-align: left;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 0.1s ease, visibility 0.1s ease;
-  z-index: 10000;
-}
-
-.status-popup.show {
-  opacity: 1;
-  visibility: visible;
-}
-
-.status-popup.exists {
-  background-color: #f8d7da;
-  color: #721c24;
-}
-
-.status-popup.available {
-  background-color: #d4edda;
-  color: #155724;
-}
-
-.close-popup {
-  position: absolute;
-  top: -4px;
-  right: 5px;
-  cursor: pointer;
-  font-weight: bold;
-}
-
-#imageUpload {
   display: none;
-}
-
-.upload-button {
-  position: absolute;
-  top: 0.8em;
-  left: 0.8em;
-  display: inline-flex;
-  width: 2em;
-  height: 2em;
-  border-radius: 10px;
-  border: 1px solid var(--hover-border);
-  cursor: pointer;
-  align-items: center;
-  justify-content: center;
-  transition: background-color 0.2s ease;
-  overflow: hidden;
-}
-
-.upload-button:hover {
-  background-color: #ffffff40;
-}
-
-.upload-button .icon {
-  width: 1em;
-  height: 1em;
-}
-
-.dashboard {
-  background-color: var(--background-color);
-  height: 100%;
-  width: 100%;
   position: fixed;
   top: 0;
   left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 50;
+}
+
+#dashboard {
   display: flex;
+  background: linear-gradient(315deg, #0c4848 3%, #071832 98%);
+  animation: gradient 15s ease infinite;
+  background-size: 400% 400%;
+  height: 100%;
+  width: 100%;
+  position: fixed;
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  z-index: 3000;
+  z-index: 40;
 }
 
-.dashboard-text {
+.dashboard-content {
   color: white;
-}
-
-.mode-button-container {
   width: var(--page-width);
   display: flex;
   flex-direction: column;
@@ -438,38 +219,50 @@ button {
   height: 100vh;
 }
 
-.mode-button {
+.dashboard-content {
+  position: fixed;
+  top: -10%;
+}
+
+#buyModeButton,
+#editModeButton,
+#continueEditingModeButton {
   width: 90%;
   padding: 1em;
   margin: 1em 0;
-  border-radius: 15px;
+  border-radius: var(--border-radius-regular);
   text-align: center;
-  text-decoration: none;
   font-weight: bold;
   color: white;
   cursor: pointer;
 }
 
-.buyModeButton {
+#buyModeButton h4,
-  background: linear-gradient(45deg, #21532a, #4fc764);
+#editModeButton h4,
+#continueEditingModeButton h4 {
+  margin: 0;
 }
 
-.buyModeButton:hover {
+#buyModeButton p,
-  background: linear-gradient(45deg, #173a1f, #3a9a4d);
+#editModeButton p,
+#continueEditingModeButton p {
+  margin: 0;
+  font-weight: normal;
+  display: none;
+  font-size: 0.8em;
 }
 
-.editModeButton {
+#buyModeButton {
-  background: linear-gradient(45deg, #3498db, #007bff);
+  background-image: linear-gradient(45deg, #043b0c, #39994b);
 }
 
-.editModeButton:hover {
+#editModeButton {
-  background: linear-gradient(45deg, #2980b9, #0056b3);
+  background-image: linear-gradient(45deg, #154162, #56a2e8);
 }
 
-.dashboard {
+#continueEditingModeButton {
-  background: linear-gradient(315deg, #0c4848 3%, #071832 98%);
+  display: none;
-  animation: gradient 15s ease infinite;
+  background-image: linear-gradient(45deg, #4a3b72, #4a3b72);
-  background-size: 400% 400%;
 }
 
 @keyframes gradient {
@@ -531,3 +324,151 @@ button {
     transform: translateX(1);
   }
 }
+
+#dialog {
+  width: 85%;
+  max-width: 30em;
+  display: none;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 1.5em;
+  background: var(--background-color);
+  border: 1px solid var(--hover-border);
+  box-shadow: 0 0 3em rgba(0, 0, 0, 0.4);
+  z-index: 50;
+  border-radius: 10px;
+  text-align: left;
+  overflow: auto;
+  max-height: 70vh;
+}
+
+#dialog h2, #dialog p {
+  margin: 0;
+  padding: 0 0 0.5em 0;
+  text-align: justify;
+}
+
+#dialog button {
+  margin: 0.5em 0.5em 0 0;
+  padding: 1em;
+}
+
+#dialog button {
+  padding: 0.5em;
+  color: var(--unemph-color);
+  background: var(--background-color);
+  border: 1px solid var(--hover-border);
+  border-radius: 10px;
+  position: absolute;
+  right: 1em;
+  bottom: 1em;
+}
+
+#dialog button:hover {
+  background: var(--hover-background);
+  color: var(--color);
+}
+
+#dialog #closeDialogButton {
+  border: 0 solid black;
+  color: var(--unemph-color);
+  position: absolute;
+  width: 2em;
+  height: 2em;
+  top: 0em;
+  right: 0.2em;
+  font-size: 0.9em;
+}
+
+.input-dialog {
+  color: var(--color);
+  border-width: 0;
+  font-size: 1em;
+  background: var(--hover-background);
+  padding: 0.8em;
+  border-radius: var(--border-radius-regular);
+  margin: 1em auto 1em auto;
+  width: 95%;
+  display: block;
+}
+
+.status-popup {
+  position: fixed;
+  top: 19%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 12px;
+  border-radius: 8px;
+  background-color: #f0f0f0;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  font-size: 16px;
+  text-align: left;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.1s ease, visibility 0.1s ease;
+  z-index: 10000;
+}
+
+.status-popup.show {
+  opacity: 1;
+  visibility: visible;
+}
+
+.status-popup.exists {
+  background-color: #f8d7da;
+  color: #721c24;
+}
+
+.status-popup.available {
+  background-color: #d4edda;
+  color: #155724;
+}
+
+.close-popup {
+  position: absolute;
+  top: -4px;
+  right: 5px;
+  cursor: pointer;
+  font-weight: bold;
+}
+
+.message {
+  display: none;
+  padding: 0.8em;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  margin: 2em 0;
+}
+
+.success-message {
+  background-color: #d4edda;
+  color: #155724;
+}
+
+.error-message {
+  background-color: #f8d7da;
+  color: #721c24;
+}
+
+.loader {
+  width: 1.5em;
+  height: 1.5em;
+  border: 0.2em solid #FFF;
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+  display: none;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}