Skip to content

Commit

Permalink
formas de pago
Browse files Browse the repository at this point in the history
  • Loading branch information
luisangelmaciel committed Feb 13, 2024
1 parent d28cc08 commit d076cef
Show file tree
Hide file tree
Showing 3 changed files with 236 additions and 51 deletions.
Binary file added loginPlanet/DINN.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
171 changes: 120 additions & 51 deletions loginPlanet/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -1382,17 +1382,13 @@ <h4 class="block text-2xl font-bold text-gray-800 dark:text-white">Bienvenido,
</button>

<button id="myBtnFull2" class="button modal-btn w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
data-modal-target="modal1">
data-modal-target="modal2">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-whatsapp" width="35" height="35" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9" /><path d="M9 10a.5 .5 0 0 0 1 0v-1a.5 .5 0 0 0 -1 0v1a5 5 0 0 0 5 5h1a.5 .5 0 0 0 0 -1h-1a.5 .5 0 0 0 0 1" /></svg>
<span> Contacto</span>
</button>


<button id="myBtnFull3" class="button modal-btn w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
data-modal-target="modal1">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-text" width="35" height="35" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><path d="M9 9l1 0" /><path d="M9 13l6 0" /><path d="M9 17l6 0" /></svg>
<span>Recolecta de información</span>
</button>



<div id="myModalFull1" class="modalFull dark:bg-slate-900 dark:bg-slate-900 bg-gray-100">
Expand All @@ -1406,58 +1402,131 @@ <h4 class="block text-2xl font-bold text-gray-800 dark:text-white">Bienvenido,
<span class="closeModalFull">&times;</span>
<iframe src="formcontactplaneta.html" name="iframe_b" height="100%" width="100%" title="Iframe" allowfullscreen frameborder="0" style="border:0;" class="dark:bg-slate-900 dark:bg-slate-900 bg-gray-100"></iframe>
</div>
<!-- Tercer modal -->
<div id="myModalFull3" class="modalFull dark:bg-slate-900 dark:bg-slate-900 bg-gray-100">
<span class="closeModalFull">&times;</span>
<iframe src="steps.html" name="iframe_c" height="100%" width="100%" title="Iframe" allowfullscreen frameborder="0" style="border:0;" class="dark:bg-slate-900 dark:bg-slate-900 bg-gray-100"></iframe>
</div>


<!-- Tercer modal -->
<button id="myBtnFull3" class="button modal-btn w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
data-modal-target="modal3">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-text" width="35" height="35" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><path d="M9 9l1 0" /><path d="M9 13l6 0" /><path d="M9 17l6 0" /></svg>
<span>Recolecta de información</span>
</button>
<div id="myModalFull3" class="modalFull dark:bg-slate-900 dark:bg-slate-900 bg-gray-100">
<span class="closeModalFull">&times;</span>
<iframe src="steps.html" name="iframe_c" height="100%" width="100%" title="Iframe" allowfullscreen frameborder="0" style="border:0;" class="dark:bg-slate-900 dark:bg-slate-900 bg-gray-100"></iframe>
</div>


<!-- Cuarto modal -->
<button id="myBtnFull4" class="button modal-btn w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
data-modal-target="modal4">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-whatsapp" width="35" height="35" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9" /><path d="M9 10a.5 .5 0 0 0 1 0v-1a.5 .5 0 0 0 -1 0v1a5 5 0 0 0 5 5h1a.5 .5 0 0 0 0 -1h-1a.5 .5 0 0 0 0 1" /></svg>
<span> Formas de pago</span>
</button>
<div id="myModalFull4" class="modalFull dark:bg-slate-900 dark:bg-slate-900 bg-gray-100">
<span class="closeModalFull">&times;</span>
<iframe src="pagos.html" name="iframe_d" height="100%" width="100%" title="Iframe" allowfullscreen frameborder="0" style="border:0;" class="dark:bg-slate-900 dark:bg-slate-900 bg-gray-100"></iframe>
</div>

<!-- Quinto modal
<button id="myBtnFull5" class="button modal-btn w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
data-modal-target="modal5">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-whatsapp" width="35" height="35" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9" /><path d="M9 10a.5 .5 0 0 0 1 0v-1a.5 .5 0 0 0 -1 0v1a5 5 0 0 0 5 5h1a.5 .5 0 0 0 0 -1h-1a.5 .5 0 0 0 0 1" /></svg>
<span> Contacto</span>
</button>
<div id="myModalFull5" class="modalFull dark:bg-slate-900 dark:bg-slate-900 bg-gray-100">
<span class="closeModalFull">&times;</span>
<iframe src="formulario-contacto.html" name="iframe_e" height="100%" width="100%" title="Iframe" allowfullscreen frameborder="0" style="border:0;" class="dark:bg-slate-900 dark:bg-slate-900 bg-gray-100"></iframe>
</div>-->



<!-- svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-source-code" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14.5 4h2.5a3 3 0 0 1 3 3v10a3 3 0 0 1 -3 3h-10a3 3 0 0 1 -3 -3v-5" /><path d="M6 5l-2 2l2 2" /><path d="M10 9l2 -2l-2 -2" /></svg-->

<script>
// Obtener los modales
var modal1 = document.getElementById("myModalFull1");
var modal2 = document.getElementById("myModalFull2");
var modal2 = document.getElementById("myModalFull3");
// Obtener los botones que abren los modales
var btn1 = document.getElementById("myBtnFull1");
var btn2 = document.getElementById("myBtnFull2");
var btn2 = document.getElementById("myBtnFull3");
// Obtener los elementos <span> que cierran los modales
var span1 = document.querySelector("#myModalFull1 .closeModalFull");
var span2 = document.querySelector("#myModalFull2 .closeModalFull");
var span2 = document.querySelector("#myModalFull3 .closeModalFull");
// Función para abrir el primer modal
btn1.onclick = function() {
modal1.style.display = "block";
};
// Función para cerrar el primer modal
span1.onclick = function() {
modal1.style.display = "none";
};
// Función para abrir el segundo modal
btn2.onclick = function() {
modal2.style.display = "block";
};
// Función para cerrar el segundo modal
span2.onclick = function() {
modal2.style.display = "none";
};
// Cuando se hace clic en cualquier parte fuera del modal, cerrarlo
window.onclick = function(event) {
if (event.target == modal1) {
modal1.style.display = "none";
}
if (event.target == modal2) {
modal2.style.display = "none";
}
};
</script>
<script>
// Obtener los modales
var modal1 = document.getElementById("myModalFull1");
var modal2 = document.getElementById("myModalFull2");
var modal3 = document.getElementById("myModalFull3");
var modal4 = document.getElementById("myModalFull4");
var modal5 = document.getElementById("myModalFull5");

// Obtener los botones que abren los modales
var btn1 = document.getElementById("myBtnFull1");
var btn2 = document.getElementById("myBtnFull2");
var btn3 = document.getElementById("myBtnFull3");
var btn4 = document.getElementById("myBtnFull4");
var btn5 = document.getElementById("myBtnFull5");

// Obtener los elementos <span> que cierran los modales
var span1 = document.querySelector("#myModalFull1 .closeModalFull");
var span2 = document.querySelector("#myModalFull2 .closeModalFull");
var span3 = document.querySelector("#myModalFull3 .closeModalFull");
var span4 = document.querySelector("#myModalFull4 .closeModalFull");
var span5 = document.querySelector("#myModalFull5 .closeModalFull");

// Función para abrir el primer modal
btn1.onclick = function() {
modal1.style.display = "block";
};
// Función para cerrar el primer modal
span1.onclick = function() {
modal1.style.display = "none";
};

// Función para abrir el segundo modal
btn2.onclick = function() {
modal2.style.display = "block";
};
// Función para cerrar el segundo modal
span2.onclick = function() {
modal2.style.display = "none";
};

// Función para abrir el tercer modal
btn3.onclick = function() {
modal3.style.display = "block";
};
// Función para cerrar el tercer modal
span3.onclick = function() {
modal3.style.display = "none";
};

// Función para abrir el cuarto modal
btn4.onclick = function() {
modal4.style.display = "block";
};
// Función para cerrar el cuarto modal
span4.onclick = function() {
modal4.style.display = "none";
};

// Función para abrir el quinto modal
btn5.onclick = function() {
modal5.style.display = "block";
};
// Función para cerrar el quinto modal
span5.onclick = function() {
modal5.style.display = "none";
};

// Cuando se hace clic en cualquier parte fuera del modal, cerrarlo
window.onclick = function(event) {
if (event.target == modal1) {
modal1.style.display = "none";
}
if (event.target == modal2) {
modal2.style.display = "none";
}
if (event.target == modal3) {
modal3.style.display = "none";
}
if (event.target == modal4) {
modal4.style.display = "none";
}
if (event.target == modal5) {
modal5.style.display = "none";
}
};
</script>

<!-- End Checkbox -->
<button onclick="logout()" class="button modal-btn w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-gray-200 text-black hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
Expand Down
116 changes: 116 additions & 0 deletions loginPlanet/pagos.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
<!doctype html>
<html lang="es-MX">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Pagos</title>
<link href="tabler.min.css?1684106062" rel="stylesheet"/>
<link href="demo.min.css?1684106062" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
@import url('https://rsms.me/inter/inter.css');
:root {
--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
}
body {
font-feature-settings: "cv03", "cv04", "cv11";
}

.is-hidden {
display: none !important;
}
</style>
<style>

img {
max-width: 100%;
height: auto;
}

.imagen-responsiva {
max-width: 100%;
height: auto;
}
</style>
</head>
<body >
<script src="demo-theme.min.js?1684106062"></script>
<div class="page">
<div class="page-wrapper">
<!-- Page header -->
<div class="page-header d-print-none">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<h2 class="page-title">
Opciones de pago
</h2>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body body-contact">
<div class="container-xl">
<div class="row row-cards">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h2><img src="DINN.png" width="640px" height="216px" class="imagen-responsiva" alt="Dinn Actinver"> </h2>
<h3 class="card-title">Banco Dinn Actinver</h3><br>
<p class="card-subtitle">Nombre del beneficiario.</p><br>
<div class="input-icon" data-bs-toggle="tooltip" data-bs-placement="top" title="Copiar al portapapeles" onclick="copyToClipboard('project-id')">
<input type="text" id="project-id" value="Luis Angel Maciel" class="form-control" placeholder="Project ID" readonly>
<span class="input-icon-addon">
<!-- Download SVG icon from http://tabler-icons.io/i/files -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 3v4a1 1 0 0 0 1 1h4" /><path d="M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2z" /><path d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" /></svg>
</span>
</div><br>
<p class="card-subtitle">Nombre del beneficiario.</p>
<div class="input-icon mt-3" data-bs-toggle="tooltip" data-bs-placement="top" title="Copiar al portapapeles" onclick="copyToClipboard('clabe')">
<input type="text" id="clabe" value="133180000083962444" class="form-control" placeholder="Cuenta CLABE" readonly>
<span class="input-icon-addon">
<!-- Download SVG icon from http://tabler-icons.io/i/files -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 3v4a1 1 0 0 0 1 1h4" /><path d="M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2z" /><path d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" /></svg>
</span>
</div><br>
<div class="card-footerx">
<div class="row align-items-center">
<div class="col"><!--Learn more about <a href="#">Project ID</a>--></div>
<div class="col-auto">
<button onclick="goBack()" class="btn btn-primary" hidden>Volver</button>
<script>
function goBack() {
window.history.back();
}
function copyToClipboard(id) {
var text = document.getElementById(id);
text.select();
document.execCommand('copy');
var tooltip = new bootstrap.Tooltip(document.querySelector('[data-bs-toggle="tooltip"]'), {
title: 'Copiado al portapapeles',
placement: 'top',
trigger: 'manual'
});
tooltip.show();
setTimeout(function() {
tooltip.dispose();
}, 2000);
}
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>

0 comments on commit d076cef

Please sign in to comment.