mirror of
https://github.com/tavo-wasd-gh/conex-builder.git
synced 2025-06-07 04:03:29 -06:00
qol fiex
This commit is contained in:
parent
e8956d2eb3
commit
b9d1620646
6 changed files with 747 additions and 681 deletions
396
public/client.js
396
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");
|
||||
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";
|
||||
initializeEditor();
|
||||
}
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
checkoutErrorMessage.style.display = "none";
|
||||
dialog.style.display = "none";
|
||||
overlay.style.display = "none";
|
||||
menu.style.display = "flex";
|
||||
function initializeEventListeners() {
|
||||
// Prevent ENTER key in slogan element
|
||||
document.getElementById('slogan').addEventListener('keydown', function(event) {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById("openDialogButton").addEventListener("click", openDialog);
|
||||
document.getElementById("cancelDialogButton").addEventListener("click", closeDialog);
|
||||
document.getElementById("buyButton").addEventListener("click", () => openDialog(checkoutDialog));
|
||||
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("continueToEditMode").addEventListener('click', function() {
|
||||
editMode(document.getElementById("dashEditInput").value);
|
||||
});
|
||||
document.getElementById('editModeButton').addEventListener('click', openEditModeDialog);
|
||||
document.getElementById("continueToEditModeButton").addEventListener('click', () =>
|
||||
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 title = document.getElementById('title').value;
|
||||
const slogan = document.getElementById('slogan').value;
|
||||
|
||||
editor.save().then((editor_data) => {
|
||||
const titleValue = document.getElementById('title').value.trim();
|
||||
const dataToSave = {
|
||||
directory: sanitizeDirectoryTitle(title),
|
||||
banner: banner || '/static/svg/banner.svg',
|
||||
title: title,
|
||||
slogan: slogan,
|
||||
editor_data: editor_data
|
||||
banner: document.getElementById('banner').src || '/static/svg/banner.svg',
|
||||
title: document.getElementById('title').value,
|
||||
slogan: document.getElementById('slogan').value,
|
||||
directory: sanitizeDirectoryTitle(titleValue)
|
||||
};
|
||||
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;
|
||||
let hideTimeout;
|
||||
const directoryInput = document.getElementById('title');
|
||||
directoryInput.addEventListener('input', () => {
|
||||
function setupDirectoryInput(inputElement, debounceTime = 500) {
|
||||
inputElement.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();
|
||||
if (directoryTitle.length > 0) {
|
||||
const directory = sanitizeDirectoryTitle(directoryTitle);
|
||||
checkDirectoryReverse(directory);
|
||||
const inputValue = inputElement.value.trim();
|
||||
|
||||
if (inputValue.length > 0) {
|
||||
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) {
|
||||
return;
|
||||
if (!validateDirectoryLength(directory)) 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) {
|
||||
showPopup(`El título no puede exceder los 35 caracteres`, 'exists');
|
||||
return;
|
||||
}
|
||||
fetch(`/api/directory/${encodeURIComponent(directory)}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.exists) {
|
||||
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');
|
||||
return true;
|
||||
}
|
||||
|
||||
function fetchDirectoryStatus(directory, failureStatus, successStatus, failureMessage, successMessage) {
|
||||
checkDirectoryExists(directory).then(exists => {
|
||||
const message = exists ? `${failureMessage} conex.one/${directory}` : `${successMessage} conex.one/${directory}`;
|
||||
const status = exists ? failureStatus : successStatus;
|
||||
showPopup(message, status);
|
||||
});
|
||||
}
|
||||
|
||||
function checkDirectoryReverse(directory) {
|
||||
if (directory.length < 4) {
|
||||
return;
|
||||
}
|
||||
if (directory.length > 35) {
|
||||
showPopup(`El título no puede exceder los 35 caracteres`, 'exists');
|
||||
return;
|
||||
}
|
||||
fetch(`/api/directory/${encodeURIComponent(directory)}`)
|
||||
function checkDirectoryExists(directory) {
|
||||
return fetch(`/api/directory/${encodeURIComponent(directory)}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.exists) {
|
||||
showPopup(`Editar el sitio web conex.one/${directory}`, 'available');
|
||||
} else {
|
||||
showPopup(`El sitio conex.one/${directory} no está registrado`, 'exists');
|
||||
}
|
||||
})
|
||||
.then(data => data.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";
|
||||
document.getElementById("dashDialog").style.display = "none";
|
||||
|
||||
const dashboard = document.querySelector('.dashboard');
|
||||
|
||||
loadEditorState();
|
||||
const dashboard = document.getElementById('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";
|
||||
document.getElementById("updateSiteButton").style.display = "none";
|
||||
const dashboard = document.querySelector('.dashboard');
|
||||
localStorage.removeItem('conex_data');
|
||||
loadEditorState();
|
||||
|
||||
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";
|
||||
const dashboard = document.querySelector('.dashboard');
|
||||
|
||||
document.getElementById("buyButton").style.display = "none";
|
||||
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() {
|
||||
document.getElementById("dashOverlay").style.display = "block";
|
||||
document.getElementById("dashDialog").style.display = "block";
|
||||
document.getElementById("dashEditInput").style.display = "block";
|
||||
}
|
||||
|
||||
function loadEditorData(dirname) {
|
||||
return new Promise((resolve, reject) => {
|
||||
fetch(`/api/fetch/${dirname}`)
|
||||
.then(response => {
|
||||
async function fetchAndStoreData(directoryName) {
|
||||
try {
|
||||
const response = await fetch(`/api/fetch/${encodeURIComponent(directoryName)}`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
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 || []
|
||||
});
|
||||
throw new Error(`Failed to fetch data for directory: ${directoryName}`);
|
||||
}
|
||||
|
||||
console.log('Editor data loaded successfully');
|
||||
resolve(true); // Resolve with success
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Fetching and loading data failed:', error);
|
||||
resolve(false); // Resolve with failure, but not reject to avoid unhandled errors
|
||||
});
|
||||
});
|
||||
const data = await response.json();
|
||||
localStorage.setItem('conex_data', JSON.stringify(data));
|
||||
console.log('Data fetched and stored in localStorage:', data);
|
||||
|
||||
loadEditorState();
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('Error fetching and storing data:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
const savedData = localStorage.getItem('conex_data');
|
||||
const parsedData = savedData ? JSON.parse(savedData) : null;
|
||||
const directory = parsedData?.directory || "temp";
|
||||
function initializeEditor(conex_data) {
|
||||
directory = conex_data?.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();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,66 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<title>Builder | CONEX.one </title>
|
||||
<link rel="canonical" href="https://builder.conex.one">
|
||||
<title>Editor | CONEX.one </title>
|
||||
<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" id="floatingButtons">
|
||||
<button class="floating-button" id="openDialogButton">
|
||||
<div class="floating-buttons-container" id="floatingButtons">
|
||||
<button class="floating-button" id="buyButton">
|
||||
<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 id="checkout-success-message"></div>
|
||||
<div class="message success-message" 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">
|
||||
<picture>
|
||||
<source srcset="/static/svg/xd.svg" media="(prefers-color-scheme: dark)">
|
||||
<img src="/static/svg/x.svg" style="width: 0.7em; height: 0.7em;" alt="Close" id="closeIcon">
|
||||
</picture>
|
||||
</div>
|
||||
<div id="editDialog">
|
||||
<h2 data-translate="editDialogHeader"></h2>
|
||||
<p data-translate="editDialogParagraph"></p>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
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;
|
||||
#editorjs {
|
||||
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 {
|
||||
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 {
|
||||
.floating-buttons-container {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
bottom: 0.2em;
|
||||
right: 0.5em;
|
||||
gap: 0.4em;
|
||||
z-index: 2000;
|
||||
bottom: 1.5em;
|
||||
right: 1.5em;
|
||||
gap: 0.6em;
|
||||
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);
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
outline: 0 solid transparent;
|
||||
padding: 8px 18px;
|
||||
color: #ffffff;
|
||||
padding: 0 1em;
|
||||
width: fit-content;
|
||||
word-break: break-word;
|
||||
border: 0;
|
||||
|
|
@ -323,16 +169,12 @@ button {
|
|||
margin-left: 0.6em;
|
||||
}
|
||||
|
||||
.floating-button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
#updateSiteButton {
|
||||
#editButton {
|
||||
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 {
|
||||
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 {
|
||||
#overlay {
|
||||
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 {
|
||||
background: linear-gradient(45deg, #21532a, #4fc764);
|
||||
#buyModeButton h4,
|
||||
#editModeButton h4,
|
||||
#continueEditingModeButton h4 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.buyModeButton:hover {
|
||||
background: linear-gradient(45deg, #173a1f, #3a9a4d);
|
||||
#buyModeButton p,
|
||||
#editModeButton p,
|
||||
#continueEditingModeButton p {
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
display: none;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.editModeButton {
|
||||
background: linear-gradient(45deg, #3498db, #007bff);
|
||||
#buyModeButton {
|
||||
background-image: linear-gradient(45deg, #043b0c, #39994b);
|
||||
}
|
||||
|
||||
.editModeButton:hover {
|
||||
background: linear-gradient(45deg, #2980b9, #0056b3);
|
||||
#editModeButton {
|
||||
background-image: linear-gradient(45deg, #154162, #56a2e8);
|
||||
}
|
||||
|
||||
.dashboard {
|
||||
background: linear-gradient(315deg, #0c4848 3%, #071832 98%);
|
||||
animation: gradient 15s ease infinite;
|
||||
background-size: 400% 400%;
|
||||
#continueEditingModeButton {
|
||||
display: none;
|
||||
background-image: linear-gradient(45deg, #4a3b72, #4a3b72);
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue