From f5f595029377cd56410933100741cd7f870815cb Mon Sep 17 00:00:00 2001 From: tavo Date: Tue, 10 Sep 2024 23:45:24 -0600 Subject: [PATCH] front --- public/client.js | 20 ++ public/index.html | 102 +++++--- public/paypal.js | 10 +- public/static/css/editorjs-dark.css | 23 ++ public/static/css/style.css | 293 ++++++++++++++++++++++ public/static/js/config.editor.js | 365 +++++++++++++++------------- public/static/svg/banner.svg | 9 + public/static/svg/cart.svg | 5 + public/static/svg/delete.svg | 13 + public/static/svg/edit.svg | 9 + public/static/svg/x.svg | 12 + public/static/svg/xd.svg | 13 + 12 files changed, 661 insertions(+), 213 deletions(-) create mode 100644 public/static/css/editorjs-dark.css create mode 100644 public/static/css/style.css create mode 100644 public/static/svg/banner.svg create mode 100644 public/static/svg/cart.svg create mode 100644 public/static/svg/delete.svg create mode 100644 public/static/svg/edit.svg create mode 100644 public/static/svg/x.svg create mode 100644 public/static/svg/xd.svg diff --git a/public/client.js b/public/client.js index e69de29..abe9c46 100644 --- a/public/client.js +++ b/public/client.js @@ -0,0 +1,20 @@ +document.addEventListener("DOMContentLoaded", function() { + const dialog = document.getElementById("dialog"); + const overlay = document.getElementById("overlay"); + const menu = document.getElementById("floatingButtons"); + + function openDialog() { + dialog.style.display = "block"; + overlay.style.display = "block"; + menu.style.display = "none"; + } + + function closeDialog() { + dialog.style.display = "none"; + overlay.style.display = "none"; + menu.style.display = "block"; + } + + document.getElementById("openDialogButton").addEventListener("click", openDialog); + document.getElementById("cancelDialogButton").addEventListener("click", closeDialog); +}); diff --git a/public/index.html b/public/index.html index bd891a4..941bf0e 100644 --- a/public/index.html +++ b/public/index.html @@ -1,36 +1,68 @@ - - Creador CONEX.one - - -

PayPal SDK & API Integration

-
-
-

- - - - - - - - - - - - - - - - + + + Builder | CONEX.one + + + + + + + + + + + + +
+
+
+
+
+ +
+
+ + +
+
+

Contratar por $20 al año

+

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:

+ +

+
+ +
+ + + + + + + + + + + + + diff --git a/public/paypal.js b/public/paypal.js index ecba901..ebb9937 100644 --- a/public/paypal.js +++ b/public/paypal.js @@ -2,6 +2,8 @@ paypal.Buttons({ style: { shape: "pill", layout: "vertical", + color: "black", + label: "pay" }, async createOrder() { try { @@ -32,8 +34,8 @@ paypal.Buttons({ async onApprove(data, actions) { try { const requestData = { - directory: "gofitness", - editor_data: await editor.save() + directory: "gofitness", + editor_data: await editor.save() }; const response = await fetch(`/api/orders/${data.orderID}/capture`, { @@ -41,7 +43,7 @@ paypal.Buttons({ headers: { "Content-Type": "application/json", }, - body: JSON.stringify(requestData), + body: JSON.stringify(requestData), }); const orderData = await response.json(); @@ -68,7 +70,7 @@ paypal.Buttons({ orderData?.purchase_units?.[0]?.payments?.captures?.[0] || orderData?.purchase_units?.[0]?.payments?.authorizations?.[0]; resultMessage( - `Transaction ${transaction.status}: ${transaction.id}

See console for all available details`, + `Estado: ${transaction.status}
ID de transacción: ${transaction.id}
Luego de una revisión positiva, su sitio será publicado en menos de 24 horas.`, ); console.log( "Capture result", diff --git a/public/static/css/editorjs-dark.css b/public/static/css/editorjs-dark.css new file mode 100644 index 0000000..fc22259 --- /dev/null +++ b/public/static/css/editorjs-dark.css @@ -0,0 +1,23 @@ +@media (prefers-color-scheme: dark) { + .ce-popover__container { + filter: invert(1) hue-rotate(180deg); + } + *::selection, + .ce-block.ce-block--selected .ce-block__content { + background-color: var(--hover-background) !important; + } + .tc-wrap, + .tc-wrap * { + --color-border: var(--hover-border) !important; + --color-text-secondary: var(--hover-border) !important; + --color-background: var(--hover-background) !important; + --toggler-dots-color: var(--hover-border) !important; + --toggler-dots-color-hovered: var(--color) !important; + } + .ce-toolbar__plus, + .ce-toolbar__settings-btn { + color: var(--color) !important; + background-color: var(--hover-background) !important; + border-color: var(--hover-border) !important; + } +} diff --git a/public/static/css/style.css b/public/static/css/style.css new file mode 100644 index 0000000..ddbd669 --- /dev/null +++ b/public/static/css/style.css @@ -0,0 +1,293 @@ +:root { + --background-color: white; + --color: black; + --warning-color: #b24629; + --page-width: 768px; + --navbar-width: 50%; + --font-family: sans-serif; + --logo: url('logo.png'); + --unemph-color: #505050; + --hover-background: #dcdcdc; + --hover-border: #aaa; + --line-height: 1.7; + --smaller-font: 0.75em; + --hyper-color: #0f82af; + text-align: justify; + margin: auto; +} + +@media (prefers-color-scheme: dark) { + :root { + --background-color: #1d2021; + --color: white; + --hover-background: #282c2d; + --unemph-color: #909090; + --hover-border: #505050; + --hyper-color: #00b4db; + } + #closeIcon { + content: url('/static/svg/xd.svg'); + } +} + +@media (max-width: 900px) { + :root { + --page-width: 90%; + --navbar-width: 50vh; + } + .floating-button span { + display: none; + } +} + +html { + background-color: var(--background-color); + color: var(--color); + font-family: var(--font-family); + line-height: var(--line-height); +} + +html, body { + margin: 0 auto; + height: 100%; +} + +body { + display: flex; + flex-direction: column; +} + +a { + color: var(--hyper-color); +} + +.banner { + padding: 6vh; + box-shadow: 0 15vh 30vh black inset; + background-position: 50%; + background-size: cover; + margin-bottom: 1em; +} + +.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 { + text-align: center; + width: 100%; + background-color: #00000000; + border-color: #00000000; + color: white; + line-height: 1em; + margin: 0.5em auto 0em auto; +} + +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 { + 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; +} + +#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; +} + +#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; +} + +#overlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + z-index: 999; +} + +#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; +} + +#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; +} + +#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; + right: 0.5em; + gap: 0.4em; + z-index: 9999; +} + +.floating-button { + height: 2.5em; + cursor: pointer; + font-size: 1em; + z-index: 1001; + 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; + width: fit-content; + word-break: break-word; + border: 0; +} + +.floating-button img { + width: 1.2em; + height: 1.2em; + vertical-align: middle; +} + +.floating-button span { + margin-left: 0.6em; +} + +.floating-button:hover { + background-color: #0056b3; +} + +#updateSiteButton { + background: linear-gradient(135deg, #214353, #4c9abf); + box-shadow: #0099c5 0 10px 20px -15px; +} + +#deleteSiteButton { + background: linear-gradient(135deg, #5e2329, #bf4c58); + box-shadow: #e31300 0 10px 20px -15px; +} + +#openDialogButton { + background: linear-gradient(135deg, #21532a, #4fc764); + box-shadow: #27d100 0 10px 20px -15px; +} diff --git a/public/static/js/config.editor.js b/public/static/js/config.editor.js index b903552..43eaed2 100644 --- a/public/static/js/config.editor.js +++ b/public/static/js/config.editor.js @@ -1,182 +1,199 @@ -var editor = new EditorJS({ - readOnly: false, - holder: 'editorjs', +const editor = new EditorJS({ + // readOnly: false, + holder: 'editorjs', + + inlineToolbar: ['link', 'marker', 'bold', 'italic'], + inlineToolbar: true, + tools: { + /** + * Each Tool is a Plugin. Pass them via 'class' option with necessary settings {@link docs/tools.md} + */ + header: { + class: Header, + config: { + placeholder: 'Inserta un título', + levels: [1, 2, 3], + defaultLevel: 1, + shortcut: 'CMD+SHIFT+H' + } + }, + + image: { + class: ImageTool, + config: { + uploader: { + uploadByFile(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onload = (event) => { + const base64 = event.target.result; + resolve({ + success: 1, + file: { + url: base64, + }, + }); + }; + reader.onerror = reject; + reader.readAsDataURL(file); + }); + }, + uploadByUrl(url) { + return Promise.resolve({ + success: 1, + file: { + url: url, + }, + }); + }, + }, + }, + }, + + list: { + class: List, + inlineToolbar: true, + shortcut: 'CMD+SHIFT+L' + }, + + quote: { + class: Quote, + inlineToolbar: true, + config: { + quotePlaceholder: 'Insertar una cita', + captionPlaceholder: 'Autor de la cita', + }, + shortcut: 'CMD+SHIFT+O' + }, + + linkTool: LinkTool, + + embed: Embed, + + table: { + class: Table, + inlineToolbar: true, + shortcut: 'CMD+ALT+T' + }, - inlineToolbar: ['link', 'marker', 'bold', 'italic'], - inlineToolbar: true, - tools: { - /** - * Each Tool is a Plugin. Pass them via 'class' option with necessary settings {@link docs/tools.md} - */ - header: { - class: Header, - inlineToolbar: ['marker', 'link'], - config: { - placeholder: 'Header' - }, - shortcut: 'CMD+SHIFT+H' }, - image: SimpleImage, - - list: { - class: List, - inlineToolbar: true, - shortcut: 'CMD+SHIFT+L' + data: { + blocks: [ + { + type: "header", + data: { + text: "Acerca de [Empresa]", + level: 1 + } + }, + { + type : 'paragraph', + data : { + text : 'En [Nombre de Tu Empresa], nos dedicamos a ofrecer [tu servicio/producto] de la más alta calidad con un servicio al cliente excepcional. Nuestro equipo de expertos se asegura de que cada aspecto de tu experiencia sea manejado con profesionalismo y cuidado.' + } + }, + { + type : 'list', + data : { + items : [ + 'Resolvemos una necesidad clave de mercado', + 'Inversión en crecimiento con presupuesto sostenible.', + 'Enfoque en satisfacción del cliente', + ], + style: 'unordered' + } + }, + { + type: 'table', + data: { + content: [ + ['Servicios', 'Descripción', 'Costo'], + ['Impresión', 'Breve descripción', '1000'], + ['laminado', 'Breve descripción', '2000'], + ] + } + }, + ] }, + i18n: { + messages: { + ui: { + "blockTunes": { + "toggler": { + "Click to tune": "Modificar", + "or drag to move": "or drag to move" + }, + }, + "inlineToolbar": { + "converter": { + "Convert to": "Convertir a" + } + }, + "toolbar": { + "toolbox": { + "Add": "Insertar" + } + } + }, - quote: { - class: Quote, - inlineToolbar: true, - config: { - quotePlaceholder: 'Enter a quote', - captionPlaceholder: 'Quote\'s author', - }, - shortcut: 'CMD+SHIFT+O' + /** + * Section for translation Tool Names: both block and inline tools + */ + toolNames: { + "Text": "Texto", + "Heading": "Título", + "List": "Lista", + "Warning": "Advertencia", + "Quote": "Cita", + "Table": "Tabla", + "Link": "Link", + "Image": "Imagen", + "Bold": "Negrita", + "Italic": "Itálicas", + "InlineCode": "InlineCode", + }, + + /** + * TRANSLATIONS + * Each subsection is the i18n dictionary that will be passed to the corresponded plugin + * The name of a plugin should be equal the name you specify in the 'tool' section for that plugin + */ + tools: { + "warning": { // <-- 'Warning' tool will accept this dictionary section + "Title": "Título", + "Message": "Mensaje", + }, + + "link": { + "Add a link": "Agregar link" + }, + "stub": { + 'The block can not be displayed correctly.': 'No se puede visualizar este bloque' + } + }, + + blockTunes: { + /** + * Each subsection is the i18n dictionary that will be passed to the corresponded Block Tune plugin + * The name of a plugin should be equal the name you specify in the 'tunes' section for that plugin + * + * Also, there are few internal block tunes: "delete", "moveUp" and "moveDown" + */ + "delete": { + "Delete": "Quitar bloque" + }, + "moveUp": { + "Move up": "Mover arriba" + }, + "moveDown": { + "Move down": "Mover abajo" + } + }, + } }, - - linkTool: LinkTool, - - embed: Embed, - - table: { - class: Table, - inlineToolbar: true, - shortcut: 'CMD+ALT+T' - }, - - }, - - /** - * This Tool will be used as default - */ - // defaultBlock: 'paragraph', - - data: { - blocks: [ - { - type: "header", - data: { - text: "Acerca de [Empresa]", - level: 1 - } - }, - { - type : 'paragraph', - data : { - text : 'En [Nombre de Tu Empresa], nos dedicamos a ofrecer [tu servicio/producto] de la más alta calidad con un servicio al cliente excepcional. Nuestro equipo de expertos se asegura de que cada aspecto de tu experiencia sea manejado con profesionalismo y cuidado.' - } - }, - { - type : 'list', - data : { - items : [ - 'Resolvemos una necesidad clave de mercado', - 'Inversión en crecimiento con presupuesto sostenible.', - 'Enfoque en satisfacción del cliente', - ], - style: 'unordered' - } - }, - { - type: 'table', - data: { - content: [ - ['Servicios', 'Descripción', 'Costo'], - ['Impresión', 'Breve descripción', '1000'], - ['laminado', 'Breve descripción', '2000'], - ] - } - }, - ] - }, - i18n: { - messages: { - ui: { - "blockTunes": { - "toggler": { - "Click to tune": "Modificar", - "or drag to move": "or drag to move" - }, - }, - "inlineToolbar": { - "converter": { - "Convert to": "Convertir a" - } - }, - "toolbar": { - "toolbox": { - "Add": "Insertar" - } - } - }, - - /** - * Section for translation Tool Names: both block and inline tools - */ - toolNames: { - "Text": "Texto", - "Heading": "Título", - "List": "Lista", - "Warning": "Advertencia", - "Quote": "Quote", - "Table": "Tabla", - "Link": "Link", - "Bold": "Negrita", - "Italic": "Itálicas", - "InlineCode": "InlineCode", - }, - - /** - * Section for passing translations to the external tools classes - */ - tools: { - /** - * Each subsection is the i18n dictionary that will be passed to the corresponded plugin - * The name of a plugin should be equal the name you specify in the 'tool' section for that plugin - */ - "warning": { // <-- 'Warning' tool will accept this dictionary section - "Title": "Título", - "Message": "Mensaje", - }, - - /** - * Link is the internal Inline Tool - */ - "link": { - "Add a link": "Agregar link" - }, - /** - * The "stub" is an internal block tool, used to fit blocks that does not have the corresponded plugin - */ - "stub": { - 'The block can not be displayed correctly.': 'No se puede visualizar este bloque' - } - }, - - /** - * Section allows to translate Block Tunes - */ - blockTunes: { - /** - * Each subsection is the i18n dictionary that will be passed to the corresponded Block Tune plugin - * The name of a plugin should be equal the name you specify in the 'tunes' section for that plugin - * - * Also, there are few internal block tunes: "delete", "moveUp" and "moveDown" - */ - "delete": { - "Delete": "Quitar bloque" - }, - "moveUp": { - "Move up": "Mover arriba" - }, - "moveDown": { - "Move down": "Mover abajo" - } - }, + onChange: function(api, event) { + console.log('something changed', event); } - }, - onChange: function(api, event) { - console.log('something changed', event); - } }); + diff --git a/public/static/svg/banner.svg b/public/static/svg/banner.svg new file mode 100644 index 0000000..6d19553 --- /dev/null +++ b/public/static/svg/banner.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/static/svg/cart.svg b/public/static/svg/cart.svg new file mode 100644 index 0000000..d401046 --- /dev/null +++ b/public/static/svg/cart.svg @@ -0,0 +1,5 @@ + + diff --git a/public/static/svg/delete.svg b/public/static/svg/delete.svg new file mode 100644 index 0000000..1dcd05f --- /dev/null +++ b/public/static/svg/delete.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + diff --git a/public/static/svg/edit.svg b/public/static/svg/edit.svg new file mode 100644 index 0000000..39c58ad --- /dev/null +++ b/public/static/svg/edit.svg @@ -0,0 +1,9 @@ + + + + + + diff --git a/public/static/svg/x.svg b/public/static/svg/x.svg new file mode 100644 index 0000000..a96ee9c --- /dev/null +++ b/public/static/svg/x.svg @@ -0,0 +1,12 @@ + + + + + + diff --git a/public/static/svg/xd.svg b/public/static/svg/xd.svg new file mode 100644 index 0000000..d076f5d --- /dev/null +++ b/public/static/svg/xd.svg @@ -0,0 +1,13 @@ + + + + + + +