tavo/conex-builder
1
0
Fork 0
mirror of https://github.com/tavo-wasd-gh/conex-builder.git synced 2025-06-07 04:03:29 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions

front

Browse source
This commit is contained in:
tavo 2024-09-10 23:45:24 -06:00
parent 775cdc2c0f
commit f5f5950293
12 changed files with 661 additions and 213 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
public/client.js
View file

@ -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);
});

74
public/index.html
View file

@ -1,36 +1,68 @@
<!DOCTYPE html>
<html lang="es">
<head>
<title>Creador CONEX.one</title>
<title>Builder | CONEX.one </title>
<link rel="canonical" href="https://builder.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">
<script src="/client.js"></script>
</head>
<h1>PayPal SDK & API Integration</h1>
<div class="banner" style="background-image: url(/static/svg/banner.svg);">
<div class="desc">
<input type="text" name="title" class="input-title" placeholder="[Nombre Ejemplo]">
<input type="text" name="slogan" class="input-slogan" placeholder="[Slogan llamativo o breve descripción]">
</div>
</div>
<body>
<div class="content">
<div id="editor-container">
<div id="editorjs"></div>
<div id="paypal-button-container"></div>
</div>
</div>
</body>
<div id="overlay"></div>
<div class="floating-buttons" id="floatingButtons">
<button class="floating-button" id="openDialogButton">
<img src="/static/svg/cart.svg">
<span>$20/año</span>
</button>
<button class="floating-button" id="updateSiteButton">
<img src="/static/svg/edit.svg">
<span>Editar mi página</span>
</button>
</div>
<div id="dialog">
<h2>Contratar por $20 al año</h2>
<p>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:</p>
<ul>
<li>Correo electrónico: soporte@tusitio.com</li>
<li>Teléfono: +1 234 567 890</li>
<li>Horario de atención: Lunes a Viernes, de 9:00 a.m. a 6:00 p.m.</li>
</ul>
<p id="result-message"></p>
<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>
</button>
</div>
<script src="https://sandbox.paypal.com/sdk/js?client-id=AcCW43LI1S6lLQgtLkF4V8UOPfmXcqXQ8xfEl41hRuMxSskR2jkWNwQN6Ab1WK7E2E52GNaoYBHqgIKd&components=buttons&enable-funding=card&disable-funding=paylater,venmo"></script>
<!-- EDITORJS -->
<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/simple-image@latest"></script><!-- Image -->
<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/embed@latest"></script><!-- Embed -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/table@latest"></script><!-- Table -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/link@latest"></script><!-- Link -->
<!-- Load Editor.js's Core -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
<!-- EDITORJS -->
<script src="/paypal.js"></script>
<!-- <script src="/static/js/config.editor.js"></script> -->
<script>
// Initialize Editor.js
const editor = new EditorJS({
holder: 'editorjs',
tools: {
header: {
class: Header,
inlineToolbar: true
},
}
});
</script>
<script src="/static/js/config.editor.js"></script>
</html>

4
public/paypal.js
View file

@ -2,6 +2,8 @@ paypal.Buttons({
style: {
shape: "pill",
layout: "vertical",
color: "black",
label: "pay"
},
async createOrder() {
try {
@ -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}<br><br>See console for all available details`,
`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.`,
);
console.log(
"Capture result",

23
public/static/css/editorjs-dark.css Normal file
View file

@ -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;
}
}

293
public/static/css/style.css Normal file
View file

@ -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;
}

71
public/static/js/config.editor.js
View file

@ -1,5 +1,5 @@
var editor = new EditorJS({
readOnly: false,
const editor = new EditorJS({
// readOnly: false,
holder: 'editorjs',
inlineToolbar: ['link', 'marker', 'bold', 'italic'],
@ -10,14 +10,45 @@ var editor = new EditorJS({
*/
header: {
class: Header,
inlineToolbar: ['marker', 'link'],
config: {
placeholder: 'Header'
},
placeholder: 'Inserta un título',
levels: [1, 2, 3],
defaultLevel: 1,
shortcut: 'CMD+SHIFT+H'
}
},
image: SimpleImage,
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,
@ -29,8 +60,8 @@ var editor = new EditorJS({
class: Quote,
inlineToolbar: true,
config: {
quotePlaceholder: 'Enter a quote',
captionPlaceholder: 'Quote\'s author',
quotePlaceholder: 'Insertar una cita',
captionPlaceholder: 'Autor de la cita',
},
shortcut: 'CMD+SHIFT+O'
},
@ -47,11 +78,6 @@ var editor = new EditorJS({
},
/**
* This Tool will be used as default
*/
// defaultBlock: 'paragraph',
data: {
blocks: [
{
@ -119,44 +145,34 @@ var editor = new EditorJS({
"Heading": "Título",
"List": "Lista",
"Warning": "Advertencia",
"Quote": "Quote",
"Quote": "Cita",
"Table": "Tabla",
"Link": "Link",
"Image": "Imagen",
"Bold": "Negrita",
"Italic": "Itálicas",
"InlineCode": "InlineCode",
},
/**
* Section for passing translations to the external tools classes
*/
tools: {
/**
* 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 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
@ -180,3 +196,4 @@ var editor = new EditorJS({
console.log('something changed', event);
}
});

9
public/static/svg/banner.svg Normal file
View file

@ -0,0 +1,9 @@
<svg width="1920" height="1080" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,255,255);stop-opacity:1" />
</linearGradient>
</defs>
<rect width="1920" height="1080" fill="url(#grad1)" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 391 B

5
public/static/svg/cart.svg Normal file
View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="#fff" d="M528.12 301.319l47.273-208C578.806 78.301 567.391 64 551.99 64H159.208l-9.166-44.81C147.758 8.021 137.93 0 126.529 0H24C10.745 0 0 10.745 0 24v16c0 13.255 10.745 24 24 24h69.883l70.248 343.435C147.325 417.1 136 435.222 136 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-15.674-6.447-29.835-16.824-40h209.647C430.447 426.165 424 440.326 424 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-22.172-12.888-41.332-31.579-50.405l5.517-24.276c3.413-15.018-8.002-29.319-23.403-29.319H218.117l-6.545-32h293.145c11.206 0 20.92-7.754 23.403-18.681z"/></svg>
<!--
Font Awesome Free 5.2.0 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
-->
Side by side

After

Width:  |  Height:  |  Size: 804 B

13
public/static/svg/delete.svg Normal file
View file

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg fill="#fff" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="800px" height="800px" viewBox="0 0 485 485" xml:space="preserve">
<g>
<g>
<rect x="67.224" width="350.535" height="71.81"/>
<path d="M417.776,92.829H67.237V485h350.537V92.829H417.776z M165.402,431.447h-28.362V146.383h28.362V431.447z M256.689,431.447
h-28.363V146.383h28.363V431.447z M347.97,431.447h-28.361V146.383h28.361V431.447z"/>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 727 B

9
public/static/svg/edit.svg Normal file
View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#fff" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path d="M70.2,337.4l104.4,104.4L441.5,175L337,70.5L70.2,337.4z M0.6,499.8c-2.3,9.3,2.3,13.9,11.6,11.6L151.4,465L47,360.6
L0.6,499.8z M487.9,24.1c-46.3-46.4-92.8-11.6-92.8-11.6c-7.6,5.8-34.8,34.8-34.8,34.8l104.4,104.4c0,0,28.9-27.2,34.8-34.8
C499.5,116.9,534.3,70.6,487.9,24.1z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 665 B

12
public/static/svg/x.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 460.775 460.775" xml:space="preserve">
<path d="M285.08,230.397L456.218,59.27c6.076-6.077,6.076-15.911,0-21.986L423.511,4.565c-2.913-2.911-6.866-4.55-10.992-4.55
c-4.127,0-8.08,1.639-10.993,4.55l-171.138,171.14L59.25,4.565c-2.913-2.911-6.866-4.55-10.993-4.55
c-4.126,0-8.08,1.639-10.992,4.55L4.558,37.284c-6.077,6.075-6.077,15.909,0,21.986l171.138,171.128L4.575,401.505
c-6.074,6.077-6.074,15.911,0,21.986l32.709,32.719c2.911,2.911,6.865,4.55,10.992,4.55c4.127,0,8.08-1.639,10.994-4.55
l171.117-171.12l171.118,171.12c2.913,2.911,6.866,4.55,10.993,4.55c4.128,0,8.081-1.639,10.992-4.55l32.709-32.719
c6.074-6.075,6.074-15.909,0-21.986L285.08,230.397z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

13
public/static/svg/xd.svg Normal file
View file

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg fill="#fff" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 460.775 460.775" xml:space="preserve">
<path d="M285.08,230.397L456.218,59.27c6.076-6.077,6.076-15.911,0-21.986L423.511,4.565c-2.913-2.911-6.866-4.55-10.992-4.55
c-4.127,0-8.08,1.639-10.993,4.55l-171.138,171.14L59.25,4.565c-2.913-2.911-6.866-4.55-10.993-4.55
c-4.126,0-8.08,1.639-10.992,4.55L4.558,37.284c-6.077,6.075-6.077,15.909,0,21.986l171.138,171.128L4.575,401.505
c-6.074,6.077-6.074,15.911,0,21.986l32.709,32.719c2.911,2.911,6.865,4.55,10.992,4.55c4.127,0,8.08-1.639,10.994-4.55
l171.117-171.12l171.118,171.12c2.913,2.911,6.866,4.55,10.993,4.55c4.128,0,8.081-1.639,10.992-4.55l32.709-32.719
c6.074-6.075,6.074-15.909,0-21.986L285.08,230.397z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB