From baa071d763076668fe1f7ad7002abed73c4eb441 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luis=20=C3=81ngel=20Maciel?=
 <89158021+luisangelmaciel@users.noreply.github.com>
Date: Fri, 9 Feb 2024 16:25:41 -0600
Subject: [PATCH] Add files via upload

---
 ...03\261o-Web-para-calendarios-planeta.html" | 814 ++++++++++++++++++
 loginPlanet/formcontactplaneta.html           |  78 ++
 loginPlanet/index.html                        | 330 +++++++
 3 files changed, 1222 insertions(+)
 create mode 100644 "loginPlanet/Propuesta-de-Dise\303\261o-Web-para-calendarios-planeta.html"
 create mode 100644 loginPlanet/formcontactplaneta.html
 create mode 100644 loginPlanet/index.html
diff --git "a/loginPlanet/Propuesta-de-Dise\303\261o-Web-para-calendarios-planeta.html" "b/loginPlanet/Propuesta-de-Dise\303\261o-Web-para-calendarios-planeta.html"
new file mode 100644
index 00000000..ec6ef968
--- /dev/null
+++ "b/loginPlanet/Propuesta-de-Dise\303\261o-Web-para-calendarios-planeta.html"
@@ -0,0 +1,814 @@
+
+<!doctype html>
+<html lang="es-MX">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Propuesta de Diseño Web para Calendarios Planeta</title>
+	<meta name="description" content="Description">
+	<link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="TFS">
+	<link rel="alternate" href="/feed/feed.json" type="application/json" title="TFS">	
+	<link href="https://tabler-11ty-template.vercel.app//css/tabler.min.css" rel="stylesheet"/>
+	<link href="https://tabler-11ty-template.vercel.app//css/tabler-flags.min.css?1684106062" rel="stylesheet"/>
+	<link href="https://tabler-11ty-template.vercel.app//css/tabler-payments.min.css?1684106062" rel="stylesheet"/>
+	<link href="https://tabler-11ty-template.vercel.app//css/tabler-vendors.min.css?1684106062" rel="stylesheet"/>
+	<link href="https://tabler-11ty-template.vercel.app//css/demo.min.css?1684106062" rel="stylesheet"/>
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.css">
+	<script src="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/js/tabler.min.js"></script>	
+  <style>
+      	/*
+		Font families defined by this CSS:
+		- InterVariable  variable font for modern web browsers
+		- Inter          static fonts for older web browsers (small optical size)
+		- InterDisplay   static fonts for older web browsers (large optical size)
+
+		Usage example:
+		:root { font-family: Inter, sans-serif; }
+		@supports (font-variation-settings: normal) {
+			:root { font-family: InterVariable, sans-serif; }
+		}
+
+		*/
+		@font-face {
+		font-family: InterVariable;
+		font-style: normal;
+		font-weight: 100 900;
+		font-display: swap;
+		src: url('/font-files/inter/InterVariable.woff2') format('woff2');
+		}
+		@font-face {
+		font-family: InterVariable;
+		font-style: italic;
+		font-weight: 100 900;
+		font-display: swap;
+		src: url('/font-files/inter/InterVariable-Italic.woff2) format('woff2');
+		}
+		/* legacy name "Inter var" (Oct 2023) */
+		@font-face { font-family:'Inter var'; font-style:normal; font-weight:100 900; font-display:swap; src: url('/font-files/inter/InterVariable.woff2') format('woff2'); }
+		@font-face { font-family:'Inter var'; font-style:italic; font-weight:100 900; font-display:swap; src: url('/font-files/inter/InterVariable-Italic.woff2?v=4.0') format('woff2'); }
+		/* static fonts */
+		@font-face { font-family:Inter; font-style:normal; font-weight:100; font-display:swap; src:url("/font-files/inter/Inter-Thin.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:Inter; font-style:italic; font-weight:100; font-display:swap; src:url("/font-files/inter/Inter-ThinItalic.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:Inter; font-style:normal; font-weight:200; font-display:swap; src:url("/font-files/inter/Inter-ExtraLight.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:Inter; font-style:italic; font-weight:200; font-display:swap; src:url("/font-files/inter/Inter-ExtraLightItalic.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:Inter; font-style:normal; font-weight:300; font-display:swap; src:url("/font-files/inter/Inter-Light.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:Inter; font-style:italic; font-weight:300; font-display:swap; src:url("/font-files/inter/Inter-LightItalic.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:Inter; font-style:normal; font-weight:400; font-display:swap; src:url("/font-files/inter/Inter-Regular.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:Inter; font-style:italic; font-weight:400; font-display:swap; src:url("/font-files/inter/Inter-Italic.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:Inter; font-style:normal; font-weight:500; font-display:swap; src:url("/font-files/inter/Inter-Medium.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:Inter; font-style:italic; font-weight:500; font-display:swap; src:url("https://rsms.me/font-files/Inter-MediumItalic.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:Inter; font-style:normal; font-weight:600; font-display:swap; src:url("https://rsms.me/font-files/Inter-SemiBold.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:Inter; font-style:italic; font-weight:600; font-display:swap; src:url("https://rsms.me/font-files/Inter-SemiBoldItalic.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:Inter; font-style:normal; font-weight:700; font-display:swap; src:url("https://rsms.me/font-files/Inter-Bold.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:Inter; font-style:italic; font-weight:700; font-display:swap; src:url("https://rsms.me/font-files/Inter-BoldItalic.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:Inter; font-style:normal; font-weight:800; font-display:swap; src:url("https://rsms.me/font-files/Inter-ExtraBold.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:Inter; font-style:italic; font-weight:800; font-display:swap; src:url("https://rsms.me/font-files/Inter-ExtraBoldItalic.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:Inter; font-style:normal; font-weight:900; font-display:swap; src:url("https://rsms.me/font-files/Inter-Black.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:Inter; font-style:italic; font-weight:900; font-display:swap; src:url("https://rsms.me/font-files/Inter-BlackItalic.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:InterDisplay; font-style:normal; font-weight:100; font-display:swap; src:url("https://rsms.me/font-files/InterDisplay-Thin.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:InterDisplay; font-style:italic; font-weight:100; font-display:swap; src:url("https://rsms.me/font-files/InterDisplay-ThinItalic.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:InterDisplay; font-style:normal; font-weight:200; font-display:swap; src:url("https://rsms.me/font-files/InterDisplay-ExtraLight.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:InterDisplay; font-style:italic; font-weight:200; font-display:swap; src:url("https://rsms.me/font-files/InterDisplay-ExtraLightItalic.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:InterDisplay; font-style:normal; font-weight:300; font-display:swap; src:url("https://rsms.me/font-files/InterDisplay-Light.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:InterDisplay; font-style:italic; font-weight:300; font-display:swap; src:url("https://rsms.me/font-files/InterDisplay-LightItalic.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:InterDisplay; font-style:normal; font-weight:400; font-display:swap; src:url("https://rsms.me/font-files/InterDisplay-Regular.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:InterDisplay; font-style:italic; font-weight:400; font-display:swap; src:url("https://rsms.me/font-files/InterDisplay-Italic.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:InterDisplay; font-style:normal; font-weight:500; font-display:swap; src:url("https://rsms.me/font-files/InterDisplay-Medium.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:InterDisplay; font-style:italic; font-weight:500; font-display:swap; src:url("https://rsms.me/font-files/InterDisplay-MediumItalic.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:InterDisplay; font-style:normal; font-weight:600; font-display:swap; src:url("https://rsms.me/font-files/InterDisplay-SemiBold.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:InterDisplay; font-style:italic; font-weight:600; font-display:swap; src:url("https://rsms.me/font-files/InterDisplay-SemiBoldItalic.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:InterDisplay; font-style:normal; font-weight:700; font-display:swap; src:url("https://rsms.me/font-files/InterDisplay-Bold.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:InterDisplay; font-style:italic; font-weight:700; font-display:swap; src:url("https://rsms.me/font-files/InterDisplay-BoldItalic.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:InterDisplay; font-style:normal; font-weight:800; font-display:swap; src:url("https://rsms.me/font-files/InterDisplay-ExtraBold.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:InterDisplay; font-style:italic; font-weight:800; font-display:swap; src:url("https://rsms.me/font-files/InterDisplay-ExtraBoldItalic.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:InterDisplay; font-style:normal; font-weight:900; font-display:swap; src:url("/font-files/inter/InterDisplay-Black.woff2?v=4.0") format("woff2"); }
+		@font-face { font-family:InterDisplay; font-style:italic; font-weight:900; font-display:swap; src:url("/font-files/inter/InterDisplay-BlackItalic.woff2?v=4.0") format("woff2"); }
+		: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";}
+
+		/* Agrega este bloque al final de tu sección de estilos CSS */
+			::-webkit-scrollbar {
+			width: 03px; /* Ancho de la barra de desplazamiento */
+			}
+
+			::-webkit-scrollbar-track {
+			background-color: transparent; /* Color de fondo de la barra de desplazamiento */
+			}
+
+			::-webkit-scrollbar-thumb {
+			background-color: #888; /* Color del "pomo" de la barra de desplazamiento */
+			border-radius: 6px; /* Bordes redondeados */
+			border: 3px solid transparent; /* Borde transparente */
+			background-clip: content-box;
+			}
+
+			::-webkit-scrollbar-thumb:hover {
+			background-color: #555; /* Color del "pomo" al pasar el ratón por encima */
+			}
+
+			#imagen {display:inline-block; }#saludo {align-items: center;}      
+	</style>
+  <link rel="manifest" href="https://tabler-11ty-template.vercel.app//manifest.json">
+  <script>        
+        if (location.protocol == 'http:') location.protocol = 'https:';
+        if ('serviceWorker' in navigator) {
+          navigator.serviceWorker.register('./sw.js')
+            .then(reg => console.log('Service Worker registered', reg))
+            .catch(err => console.error('Service Worker **not** registered', err));
+        } else {
+          console.warn('Service Worker not supported in this browser');
+        }
+      </script>
+  </head>
+  <body>
+  <script src="https://tabler-11ty-template.vercel.app//js/demo-theme.min.js?1684106062"></script><a href="#skip" class="visually-hidden">Skip to main content</a> 
+
+  
+   
+
+    <main id="skip">
+        <div  class=" d-flex flex-column">
+<script src="https://tabler-11ty-template.vercel.app//dist/js/demo-theme.min.js?1684106062"></script>
+<div class="page page-center">
+  <div class="container container-narrow py-4">
+    <div class="text-center mb-4">
+      <a href="." class="navbar-brand navbar-brand-autodark"><img src="./static/logo.svg" height="36" alt=""></a>
+    </div>
+    <div class="card card-md">
+      <div class="card-body">
+        <h3 class="card-title">Propuesta de Diseño Web para</h3>
+        <div class="markdown">
+            <h2>Calendarios Planeta</h2>
+            <p>Estimado Antonio Perez,</p>
+            <p>En respuesta a su solicitud de cotización para el diseño y desarrollo de una página web para su negocio de impresión de calendarios personalizados, le hago envio de la siguiente propuesta.</p>
+            <p>Confíe en mí para ayudarle a diseñar y desarrollar páginas web. Con el poco tiempo que tengo en este campo, cuento las habilidades y conocimiento suficientes para ayudarlo a estar presente y efectiva en internet.  necesarios. Disfruto hacer lo que hago, permítame ser esa intermediario entre usted y sus clientes mediante el diseño y desarrollo de su sitio web.</p>
+            <p><strong>Calendarios Planeta</strong></p>
+            <p>Partiendo de la premisa que se dedicada a la impresión de calendarios, servicio de serigrafia y otras tecnicas en articulos promocionales como bolsas de mandado. se propone lo siguiente.</p>
+            <p><strong>Objetivo de la página web:</strong></p>
+            <ul>
+            <li>Promocionar los productos y servicios que ofrece a una audiencia más amplia.</li>
+            <li>Permitir a los clientes cotizar y contratar sus servicios.</li>
+            <li>Mejorar la experiencia del cliente y aumentar las ventas.</li>
+            </ul>
+            <p><strong>Características y funcionalidades de la página web:</strong></p>
+            <ul>
+            <li>Diseño atractivo y profesional que refleje la marca de Calendarios Planeta.</li>
+            <li>Interfaz de usuario intuitiva y fácil de usar.</li>
+            <li>Formulario vía whatsapp de pedido online seguro y fácil de usar.</li>
+            <li>Integración con pasarelas de pago seguras.</li>
+            <li>Blog con contenido informativo sobre calendarios y eventos.</li>
+            <li>Formulario de contacto vía whatsapp para que los clientes puedan realizar consultas.</li>
+            </ul>
+            <p><strong>Beneficios para Calendarios Planeta:</strong></p>
+            <ul>
+            <li>Mayor visibilidad online.</li>
+            <li>Aumento del tráfico web.</li>
+            <li>Más leads y ventas.</li>
+            <li>Mejora de la experiencia del cliente.</li>
+            </ul>
+            <p><strong>Inversión:</strong></p>
+            <p>El costo total del proyecto es de $3,250. Este precio incluye:</p>
+            <ul>
+            <li>Diseño y desarrollo de la página web.</li>
+            <li>Dominio y Alojamiento web por dos años</li>
+            <li>Optimización de imagenes.</li>
+            <li>Redacción y estructura del sitio web.</li>
+            <li>Estructura de posicionamiento organico con ayuda de la</li>
+            <li>Creación de contenido atractivo, informativo y práctico  en diferentes formatos de contenido: artículos (5), ebooks (2), video (1), infografía (1).</li>
+            <li>Formularios vía whatsapp personalizados previo llenado de formulario según origen. (2)</li>
+            </ul>
+            <p><strong>Forma de pago:</strong></p>
+            <ul>
+            <li>Se requiere un pago inicial del 30% del precio total para comenzar el proyecto.</li>
+            <li>El segundo pago por el 40% en primera entrega del proyecto para revisión de posibles cambios. (7 a 10 días)</li>
+            <li>El tercer pago por por el saldo restante del 30% se pagará al finalizar el proyecto. (3 a 5 días)</li>
+            </ul>
+            <p><strong>Cronograma:</strong></p>
+            <p>El proyecto se completará en 2 semanas.</p>
+            <p><strong>Próximos pasos:</strong></p>
+            <p>Si le interesa esta propuesta, por favor avíseme para que pueda enviarle un formulario. De esta manera, podrá proporcionarme más información sobre sus productos y servicios. Además, tendrá la oportunidad de enviar sus fotografías y especificar las referencias de estilo que desea utilizar en su sitio web</p>
+            <p>Sin más por el momento espero su pronta respuesta.</p>
+            <p><strong>Atentamente,</strong></p>
+            <h3>Luis Angel Maciel</h3>
+            <p><strong>Email:</strong> angel.luis@my.com<br>
+            <strong>Whatsapp:</strong> 5512615325  
+      </div>
+    </div>
+  </div>
+</div>
+</body>
+    </main>
+   
+   
+    
+   
+ 			<!-- Libs JS -->
+			<script src="/dist/libs/apexcharts/dist/apexcharts.min.js?1684106062" defer></script>
+			<script src="/dist/libs/jsvectormap/dist/js/jsvectormap.min.js?1684106062" defer></script>
+			<script src="/dist/libs/jsvectormap/dist/maps/world.js?1684106062" defer></script>
+			<script src="/dist/libs/jsvectormap/dist/maps/world-merc.js?1684106062" defer></script>
+			<script src="/dist/js/tabler.min.js?1684106062" defer></script>
+			<script src="/dist/js/demo.min.js?1684106062" defer></script>
+
+			<!-- Libs JS -->
+			<script src="/js/apexcharts.min.js?1684106062" defer></script>
+			<script src="/js/jsvectormap.min.js?1684106062" defer></script>
+			<script src="/js/world.js?1684106062" defer></script>
+			<script src="/js/world-merc.js?1684106062" defer></script>
+			<script src="/js/tabler.min.js?1684106062" defer></script>
+			<script src="/js/demo.min.js?1684106062" defer></script>
+			<script>
+				// @formatter:off
+				document.addEventListener("DOMContentLoaded", function () {
+				window.ApexCharts && (new ApexCharts(document.getElementById('chart-revenue-bg'), {
+					chart: {
+						type: "area",
+						fontFamily: 'inherit',
+						height: 40.0,
+						sparkline: {
+							enabled: true
+						},
+						animations: {
+							enabled: false
+						},
+					},
+					dataLabels: {
+						enabled: false,
+					},
+					fill: {
+						opacity: .16,
+						type: 'solid'
+					},
+					stroke: {
+						width: 2,
+						lineCap: "round",
+						curve: "smooth",
+					},
+					series: [{
+						name: "Profits",
+						data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67]
+					}],
+					tooltip: {
+						theme: 'dark'
+					},
+					grid: {
+						strokeDashArray: 4,
+					},
+					xaxis: {
+						labels: {
+							padding: 0,
+						},
+						tooltip: {
+							enabled: false
+						},
+						axisBorder: {
+							show: false,
+						},
+						type: 'datetime',
+					},
+					yaxis: {
+						labels: {
+							padding: 4
+						},
+					},
+					labels: [
+						'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19'
+					],
+					colors: [tabler.getColor("primary")],
+					legend: {
+						show: false,
+					},
+				})).render();
+				});
+				// @formatter:on
+			</script>
+			<script>
+				// @formatter:off
+				document.addEventListener("DOMContentLoaded", function () {
+				window.ApexCharts && (new ApexCharts(document.getElementById('chart-new-clients'), {
+					chart: {
+						type: "line",
+						fontFamily: 'inherit',
+						height: 40.0,
+						sparkline: {
+							enabled: true
+						},
+						animations: {
+							enabled: false
+						},
+					},
+					fill: {
+						opacity: 1,
+					},
+					stroke: {
+						width: [2, 1],
+						dashArray: [0, 3],
+						lineCap: "round",
+						curve: "smooth",
+					},
+					series: [{
+						name: "May",
+						data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 4, 46, 39, 62, 51, 35, 41, 67]
+					},{
+						name: "April",
+						data: [93, 54, 51, 24, 35, 35, 31, 67, 19, 43, 28, 36, 62, 61, 27, 39, 35, 41, 27, 35, 51, 46, 62, 37, 44, 53, 41, 65, 39, 37]
+					}],
+					tooltip: {
+						theme: 'dark'
+					},
+					grid: {
+						strokeDashArray: 4,
+					},
+					xaxis: {
+						labels: {
+							padding: 0,
+						},
+						tooltip: {
+							enabled: false
+						},
+						type: 'datetime',
+					},
+					yaxis: {
+						labels: {
+							padding: 4
+						},
+					},
+					labels: [
+						'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19'
+					],
+					colors: [tabler.getColor("primary"), tabler.getColor("gray-600")],
+					legend: {
+						show: false,
+					},
+				})).render();
+				});
+				// @formatter:on
+			</script>
+			<script>
+				// @formatter:off
+				document.addEventListener("DOMContentLoaded", function () {
+				window.ApexCharts && (new ApexCharts(document.getElementById('chart-active-users'), {
+					chart: {
+						type: "bar",
+						fontFamily: 'inherit',
+						height: 40.0,
+						sparkline: {
+							enabled: true
+						},
+						animations: {
+							enabled: false
+						},
+					},
+					plotOptions: {
+						bar: {
+							columnWidth: '50%',
+						}
+					},
+					dataLabels: {
+						enabled: false,
+					},
+					fill: {
+						opacity: 1,
+					},
+					series: [{
+						name: "Profits",
+						data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67]
+					}],
+					tooltip: {
+						theme: 'dark'
+					},
+					grid: {
+						strokeDashArray: 4,
+					},
+					xaxis: {
+						labels: {
+							padding: 0,
+						},
+						tooltip: {
+							enabled: false
+						},
+						axisBorder: {
+							show: false,
+						},
+						type: 'datetime',
+					},
+					yaxis: {
+						labels: {
+							padding: 4
+						},
+					},
+					labels: [
+						'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19'
+					],
+					colors: [tabler.getColor("primary")],
+					legend: {
+						show: false,
+					},
+				})).render();
+				});
+				// @formatter:on
+			</script>
+			<script>
+				// @formatter:off
+				document.addEventListener("DOMContentLoaded", function () {
+				window.ApexCharts && (new ApexCharts(document.getElementById('chart-mentions'), {
+					chart: {
+						type: "bar",
+						fontFamily: 'inherit',
+						height: 240,
+						parentHeightOffset: 0,
+						toolbar: {
+							show: false,
+						},
+						animations: {
+							enabled: false
+						},
+						stacked: true,
+					},
+					plotOptions: {
+						bar: {
+							columnWidth: '50%',
+						}
+					},
+					dataLabels: {
+						enabled: false,
+					},
+					fill: {
+						opacity: 1,
+					},
+					series: [{
+						name: "Web",
+						data: [1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 2, 12, 5, 8, 22, 6, 8, 6, 4, 1, 8, 24, 29, 51, 40, 47, 23, 26, 50, 26, 41, 22, 46, 47, 81, 46, 6]
+					},{
+						name: "Social",
+						data: [2, 5, 4, 3, 3, 1, 4, 7, 5, 1, 2, 5, 3, 2, 6, 7, 7, 1, 5, 5, 2, 12, 4, 6, 18, 3, 5, 2, 13, 15, 20, 47, 18, 15, 11, 10, 0]
+					},{
+						name: "Other",
+						data: [2, 9, 1, 7, 8, 3, 6, 5, 5, 4, 6, 4, 1, 9, 3, 6, 7, 5, 2, 8, 4, 9, 1, 2, 6, 7, 5, 1, 8, 3, 2, 3, 4, 9, 7, 1, 6]
+					}],
+					tooltip: {
+						theme: 'dark'
+					},
+					grid: {
+						padding: {
+							top: -20,
+							right: 0,
+							left: -4,
+							bottom: -4
+						},
+						strokeDashArray: 4,
+						xaxis: {
+							lines: {
+								show: true
+							}
+						},
+					},
+					xaxis: {
+						labels: {
+							padding: 0,
+						},
+						tooltip: {
+							enabled: false
+						},
+						axisBorder: {
+							show: false,
+						},
+						type: 'datetime',
+					},
+					yaxis: {
+						labels: {
+							padding: 4
+						},
+					},
+					labels: [
+						'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19', '2020-07-20', '2020-07-21', '2020-07-22', '2020-07-23', '2020-07-24', '2020-07-25', '2020-07-26'
+					],
+					colors: [tabler.getColor("primary"), tabler.getColor("primary", 0.8), tabler.getColor("green", 0.8)],
+					legend: {
+						show: false,
+					},
+				})).render();
+				});
+				// @formatter:on
+			</script>
+			<script>
+				// @formatter:on
+				document.addEventListener("DOMContentLoaded", function() {
+				const map = new jsVectorMap({
+					selector: '#map-world',
+					map: 'world',
+					backgroundColor: 'transparent',
+					regionStyle: {
+						initial: {
+							fill: tabler.getColor('body-bg'),
+							stroke: tabler.getColor('border-color'),
+							strokeWidth: 2,
+						}
+					},
+					zoomOnScroll: false,
+					zoomButtons: false,
+					// -------- Series --------
+					visualizeData: {
+						scale: [tabler.getColor('bg-surface'), tabler.getColor('primary')],
+						values: { "AF": 16, "AL": 11, "DZ": 158, "AO": 85, "AG": 1, "AR": 351, "AM": 8, "AU": 1219, "AT": 366, "AZ": 52, "BS": 7, "BH": 21, "BD": 105, "BB": 3, "BY": 52, "BE": 461, "BZ": 1, "BJ": 6, "BT": 1, "BO": 19, "BA": 16, "BW": 12, "BR": 2023, "BN": 11, "BG": 44, "BF": 8, "BI": 1, "KH": 11, "CM": 21, "CA": 1563, "CV": 1, "CF": 2, "TD": 7, "CL": 199, "CN": 5745, "CO": 283, "KM": 0, "CD": 12, "CG": 11, "CR": 35, "CI": 22, "HR": 59, "CY": 22, "CZ": 195, "DK": 304, "DJ": 1, "DM": 0, "DO": 50, "EC": 61, "EG": 216, "SV": 21, "GQ": 14, "ER": 2, "EE": 19, "ET": 30, "FJ": 3, "FI": 231, "FR": 2555, "GA": 12, "GM": 1, "GE": 11, "DE": 3305, "GH": 18, "GR": 305, "GD": 0, "GT": 40, "GN": 4, "GW": 0, "GY": 2, "HT": 6, "HN": 15, "HK": 226, "HU": 132, "IS": 12, "IN": 1430, "ID": 695, "IR": 337, "IQ": 84, "IE": 204, "IL": 201, "IT": 2036, "JM": 13, "JP": 5390, "JO": 27, "KZ": 129, "KE": 32, "KI": 0, "KR": 986, "KW": 117, "KG": 4, "LA": 6, "LV": 23, "LB": 39, "LS": 1, "LR": 0, "LY": 77, "LT": 35, "LU": 52, "MK": 9, "MG": 8, "MW": 5, "MY": 218, "MV": 1, "ML": 9, "MT": 7, "MR": 3, "MU": 9, "MX": 1004, "MD": 5, "MN": 5, "ME": 3, "MA": 91, "MZ": 10, "MM": 35, "NA": 11, "NP": 15, "NL": 770, "NZ": 138, "NI": 6, "NE": 5, "NG": 206, "NO": 413, "OM": 53, "PK": 174, "PA": 27, "PG": 8, "PY": 17, "PE": 153, "PH": 189, "PL": 438, "PT": 223, "QA": 126, "RO": 158, "RU": 1476, "RW": 5, "WS": 0, "ST": 0, "SA": 434, "SN": 12, "RS": 38, "SC": 0, "SL": 1, "SG": 217, "SK": 86, "SI": 46, "SB": 0, "ZA": 354, "ES": 1374, "LK": 48, "KN": 0, "LC": 1, "VC": 0, "SD": 65, "SR": 3, "SZ": 3, "SE": 444, "CH": 522, "SY": 59, "TW": 426, "TJ": 5, "TZ": 22, "TH": 312, "TL": 0, "TG": 3, "TO": 0, "TT": 21, "TN": 43, "TR": 729, "TM": 0, "UG": 17, "UA": 136, "AE": 239, "GB": 2258, "US": 4624, "UY": 40, "UZ": 37, "VU": 0, "VE": 285, "VN": 101, "YE": 30, "ZM": 15, "ZW": 5 },
+					},
+				});
+				window.addEventListener("resize", () => {
+					map.updateSize();
+				});
+				});
+				// @formatter:off
+			</script>
+			<script>
+				// @formatter:off
+				document.addEventListener("DOMContentLoaded", function () {
+				window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-activity'), {
+					chart: {
+						type: "radialBar",
+						fontFamily: 'inherit',
+						height: 40,
+						width: 40,
+						animations: {
+							enabled: false
+						},
+						sparkline: {
+							enabled: true
+						},
+					},
+					tooltip: {
+						enabled: false,
+					},
+					plotOptions: {
+						radialBar: {
+							hollow: {
+								margin: 0,
+								size: '75%'
+							},
+							track: {
+								margin: 0
+							},
+							dataLabels: {
+								show: false
+							}
+						}
+					},
+					colors: [tabler.getColor("blue")],
+					series: [35],
+				})).render();
+				});
+				// @formatter:on
+			</script>
+			<script>
+				// @formatter:off
+				document.addEventListener("DOMContentLoaded", function () {
+				window.ApexCharts && (new ApexCharts(document.getElementById('chart-development-activity'), {
+					chart: {
+						type: "area",
+						fontFamily: 'inherit',
+						height: 192,
+						sparkline: {
+							enabled: true
+						},
+						animations: {
+							enabled: false
+						},
+					},
+					dataLabels: {
+						enabled: false,
+					},
+					fill: {
+						opacity: .16,
+						type: 'solid'
+					},
+					stroke: {
+						width: 2,
+						lineCap: "round",
+						curve: "smooth",
+					},
+					series: [{
+						name: "Purchases",
+						data: [3, 5, 4, 6, 7, 5, 6, 8, 24, 7, 12, 5, 6, 3, 8, 4, 14, 30, 17, 19, 15, 14, 25, 32, 40, 55, 60, 48, 52, 70]
+					}],
+					tooltip: {
+						theme: 'dark'
+					},
+					grid: {
+						strokeDashArray: 4,
+					},
+					xaxis: {
+						labels: {
+							padding: 0,
+						},
+						tooltip: {
+							enabled: false
+						},
+						axisBorder: {
+							show: false,
+						},
+						type: 'datetime',
+					},
+					yaxis: {
+						labels: {
+							padding: 4
+						},
+					},
+					labels: [
+						'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19'
+					],
+					colors: [tabler.getColor("primary")],
+					legend: {
+						show: false,
+					},
+					point: {
+						show: false
+					},
+				})).render();
+				});
+				// @formatter:on
+			</script>
+			<script>
+				// @formatter:off
+				document.addEventListener("DOMContentLoaded", function () {
+				window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-1'), {
+					chart: {
+						type: "line",
+						fontFamily: 'inherit',
+						height: 24,
+						animations: {
+							enabled: false
+						},
+						sparkline: {
+							enabled: true
+						},
+					},
+					tooltip: {
+						enabled: false,
+					},
+					stroke: {
+						width: 2,
+						lineCap: "round",
+					},
+					series: [{
+						color: tabler.getColor("primary"),
+						data: [17, 24, 20, 10, 5, 1, 4, 18, 13]
+					}],
+				})).render();
+				});
+				// @formatter:on
+			</script>
+			<script>
+				// @formatter:off
+				document.addEventListener("DOMContentLoaded", function () {
+				window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-2'), {
+					chart: {
+						type: "line",
+						fontFamily: 'inherit',
+						height: 24,
+						animations: {
+							enabled: false
+						},
+						sparkline: {
+							enabled: true
+						},
+					},
+					tooltip: {
+						enabled: false,
+					},
+					stroke: {
+						width: 2,
+						lineCap: "round",
+					},
+					series: [{
+						color: tabler.getColor("primary"),
+						data: [13, 11, 19, 22, 12, 7, 14, 3, 21]
+					}],
+				})).render();
+				});
+				// @formatter:on
+			</script>
+			<script>
+				// @formatter:off
+				document.addEventListener("DOMContentLoaded", function () {
+				window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-3'), {
+					chart: {
+						type: "line",
+						fontFamily: 'inherit',
+						height: 24,
+						animations: {
+							enabled: false
+						},
+						sparkline: {
+							enabled: true
+						},
+					},
+					tooltip: {
+						enabled: false,
+					},
+					stroke: {
+						width: 2,
+						lineCap: "round",
+					},
+					series: [{
+						color: tabler.getColor("primary"),
+						data: [10, 13, 10, 4, 17, 3, 23, 22, 19]
+					}],
+				})).render();
+				});
+				// @formatter:on
+			</script>
+			<script>
+				// @formatter:off
+				document.addEventListener("DOMContentLoaded", function () {
+				window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-4'), {
+					chart: {
+						type: "line",
+						fontFamily: 'inherit',
+						height: 24,
+						animations: {
+							enabled: false
+						},
+						sparkline: {
+							enabled: true
+						},
+					},
+					tooltip: {
+						enabled: false,
+					},
+					stroke: {
+						width: 2,
+						lineCap: "round",
+					},
+					series: [{
+						color: tabler.getColor("primary"),
+						data: [6, 15, 13, 13, 5, 7, 17, 20, 19]
+					}],
+				})).render();
+				});
+				// @formatter:on
+			</script>
+			<script>
+				// @formatter:off
+				document.addEventListener("DOMContentLoaded", function () {
+				window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-5'), {
+					chart: {
+						type: "line",
+						fontFamily: 'inherit',
+						height: 24,
+						animations: {
+							enabled: false
+						},
+						sparkline: {
+							enabled: true
+						},
+					},
+					tooltip: {
+						enabled: false,
+					},
+					stroke: {
+						width: 2,
+						lineCap: "round",
+					},
+					series: [{
+						color: tabler.getColor("primary"),
+						data: [2, 11, 15, 14, 21, 20, 8, 23, 18, 14]
+					}],
+				})).render();
+				});
+				// @formatter:on
+			</script>
+			<script>
+				// @formatter:off
+				document.addEventListener("DOMContentLoaded", function () {
+				window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-6'), {
+					chart: {
+						type: "line",
+						fontFamily: 'inherit',
+						height: 24,
+						animations: {
+							enabled: false
+						},
+						sparkline: {
+							enabled: true
+						},
+					},
+					tooltip: {
+						enabled: false,
+					},
+					stroke: {
+						width: 2,
+						lineCap: "round",
+					},
+					series: [{
+						color: tabler.getColor("primary"),
+						data: [22, 12, 7, 14, 3, 21, 8, 23, 18, 14]
+					}],
+				})).render();
+				});
+				// @formatter:on
+			</script>
+</body>
+</html>
+
+<!-- This website is like a Crystal, isn't it? Performance optimized by WBR Power Crystal. Learn more: https://www.xbr.pw  -->
diff --git a/loginPlanet/formcontactplaneta.html b/loginPlanet/formcontactplaneta.html
new file mode 100644
index 00000000..fa037cbe
--- /dev/null
+++ b/loginPlanet/formcontactplaneta.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Formulario de contacto</title>
+     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://preline.co/assets/css/main.min.css?v=1.0.0">
+</head>
+<body>
+   <main class="w-full max-w-md mx-auto p-6">
+    <div class="mt-7 bg-white border border-gray-200 rounded-xl shadow-sm dark:bg-gray-800 dark:border-gray-700">
+      <div class="p-4 sm:p-7">
+        <div class="text-center">
+          <h4 class="block text-2xl font-bold text-gray-800 dark:text-white">Formulario de contacto</h4>   
+          
+        </div>
+
+        <div class="mt-5" >
+       
+          <!-- Form -->
+          
+       
+        
+            <div class="grid gap-y-4">
+              
+
+    <form action="https://api.whatsapp.com/send?phone=5539793727&text=" method="post">
+      <label class="block text-sm mb-2 dark:text-white">Le muestro un ejemplo de cómo el usuario y usted verían el mensaje de contacto por formulario desde la página web, con respuesta a WhatsApp</label>  
+      <br>
+      <label for="nombre" class="block text-sm mb-2 dark:text-white">Nombre:</label>
+        <input type="text" id="nombre" name="nombre" required class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600">
+        <br>
+        <label for="empresa" class="block text-sm mb-2 dark:text-white">Empresa:</label>
+        <input type="text" id="empresa" name="empresa" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600">
+        <br>
+        <label for="email" class="block text-sm mb-2 dark:text-white">Email:</label>
+        <input type="email" id="email" name="email" required class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600">
+        <br>
+        <label for="comentarios" class="block text-sm mb-2 dark:text-white">Comentarios:</label>
+        <textarea id="comentarios" name="comentarios" rows="4" cols="50" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600"></textarea>
+        <br>
+        <label for="tipo_calendario" class="block text-sm mb-2 dark:text-white">Tipo de calendario:</label>
+        <select id="tipo_calendario" name="tipo_calendario" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600">
+            <option value="calendario_bolsillo">Calendario de bolsillo</option>
+            <option value="calendario_pared">Calendario de pared</option>
+            <option value="calendario_personalizado">Calendario personalizado</option>
+        </select>           
+        <br>
+        <button  type="submit" class="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">Enviar</button>
+    </form><script>const form = document.querySelector('form');
+
+form.addEventListener('submit', (event) => {
+    event.preventDefault();
+
+    const nombre = document.querySelector('#nombre').value;
+    const empresa = document.querySelector('#empresa').value;
+    const email = document.querySelector('#email').value;
+    const comentarios = document.querySelector('#comentarios').value;
+    const tipoCalendario = document.querySelector('#tipo_calendario').value;
+
+    const mensaje = `Hola, mi nombre es **${nombre}**.\nde la empresa: *${empresa}*.\nMi Email: *${email}*.\nDeseo: ${comentarios}\nMuestro interes en el tipo de calendario: *${tipoCalendario}*\n\nAgradezco su apoyo`;
+
+    window.open(`https://api.whatsapp.com/send?phone=5539793727&text=${encodeURIComponent(mensaje)}`);
+});
+
+
+// nueva
+
+const emailDestinoInput = document.querySelector('#email_destino');
+
+const mensaje = `Nombre: ${nombre}\nEmpresa: ${empresa}\nEmail: ${email}\nComentarios: ${comentarios}\nTipo de calendario: ${tipoCalendario}\nEmail destino: ${emailDestinoInput.value}`;
+
+window.open(`https://api.whatsapp.com/send?phone=5539793727&text=${encodeURIComponent(mensaje)}`);
+</script>
+    
+</body>
+</html>
diff --git a/loginPlanet/index.html b/loginPlanet/index.html
new file mode 100644
index 00000000..a48d658d
--- /dev/null
+++ b/loginPlanet/index.html
@@ -0,0 +1,330 @@
+<!DOCTYPE html>
+<html lang="es-MX">
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://preline.co/assets/css/main.min.css?v=1.0.0">
+  <style>
+	* {
+		margin: 0;
+		padding: 0;
+		box-sizing: border-box;
+	}
+
+	.modalFull {
+		position: fixed;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		z-index: 999;
+		display: none;
+		-webkit-overflow-scrolling: touch;
+		outline: 0;
+		overflow: hidden;
+		background-color: initial;
+	}
+
+	.closeModalFull {
+		font-size: 50px;
+		font-weight: 900;
+		line-height: 1;
+		color: #aaaaaa;
+		text-shadow: 0 1px 0 #fff;
+		filter: alpha(opacity=20);
+		opacity: 0.5;
+		position: fixed;
+		top: 30px;
+		right: 40px;
+	}
+
+	.closeModalFull:focus,
+	.closeModalFull:hover {
+		color: #000;
+		text-decoration: none;
+		cursor: pointer;
+		filter: alpha(opacity=50);
+		opacity: 0.5;
+	}
+
+	.closeModalFull {
+		-webkit-appearance: none;
+		padding: 0;
+		cursor: pointer;
+		background: 0 0;
+		border: 0;
+	}
+
+	.closeModalFull:hover,
+	.closeModalFull:focus {
+		color: #000;
+		text-decoration: none;
+		cursor: pointer;
+	}
+</style>
+</head>
+
+<body class="dark:bg-slate-900 dark:bg-slate-900 bg-gray-100 flex h-full items-center py-16">
+<script src="https://preline.co/assets/js/hs.theme-appearance.js"></script>
+
+  <!-- ========== MAIN CONTENT ========== -->
+  <main  id="loginForm"  role="main" class="w-full max-w-md mx-auto p-6">
+    <div class="mt-7 bg-white border border-gray-200 rounded-xl shadow-sm dark:bg-gray-800 dark:border-gray-700" id="content">
+      <div class="p-4 sm:p-7">
+       
+        <div class="mt-5" >
+       
+               <!-- Form -->
+                 
+      
+
+<div>
+          <form id="login">
+            <div class="grid gap-y-4">
+              <!-- Form Group -->
+              
+              <div>
+                <label for="username" class="block text-sm mb-2 dark:text-white">Usuario</label>
+                <div class="relative">
+                  <input  type="text" id="username" name="username" required  class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600" required aria-describedby="email-error">
+                  <div class="hidden absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
+                    <svg class="h-5 w-5 text-red-500" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
+                      <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" />
+                    </svg>
+                  </div>
+                </div>
+                <p class="hidden text-xs text-red-600 mt-2" id="email-error">Por favor incluya una dirección de correo electrónico válida para que podamos comunicarnos con usted</p>
+              </div>
+              <!-- End Form Group -->
+
+      
+       
+              <!-- Form Group -->
+              <div>
+                <div class="flex justify-between items-center">
+                  <label for="password" class="block text-sm mb-2 dark:text-white">Password</label>
+                  <a class="text-sm text-blue-600 decoration-2 hover:underline font-medium dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#" hidden>Forgot password?</a>
+                </div>
+                <div class="relative">
+                  <input type="password" id="password" name="password" required class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600" required aria-describedby="password-error">
+                  <div class="hidden absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
+                    <svg class="h-5 w-5 text-red-500" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
+                      <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" />
+                    </svg>
+                  </div>
+                </div>
+                <p class="hidden text-xs text-red-600 mt-2" id="password-error">Se requieren más de 8 caracteres</p>
+              </div>
+        
+             
+
+              
+              <!-- Checkbox -->
+              <div class="flex items-center">
+                <div class="flex">
+                   <input type="checkbox" id="rememberMe" name="rememberMe">
+<label for="rememberMe" class="text-sm dark:text-white" class="shrink-0 mt-0.5 border-gray-200 rounded text-blue-600 pointer-events-none focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800">  &nbsp; Recuerdame
+    <input type="text" id="rememberMeInput" name="rememberMeInput" placeholder="" hidden>
+</label><br><br>
+                  
+                
+                </div>
+               
+              </div>
+              <!-- End Checkbox -->
+<input type="submit" value="Iniciar sesión"  class="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"> 
+           
+            </div>
+          </form>
+          <!-- End Form -->
+ </div>
+        </div>
+      </div>
+    </div> 
+               
+  </main>
+  <!-- ========== END MAIN CONTENT ========== -->
+  <main id="logoutForm" style="display: none;"  class="w-full max-w-md mx-auto p-6">
+    <div class="mt-7 bg-white border border-gray-200 rounded-xl shadow-sm dark:bg-gray-800 dark:border-gray-700">
+      <div class="p-4 sm:p-7">
+        <div class="text-center">
+          <h4 class="block text-2xl font-bold text-gray-800 dark:text-white">Bienvenido,  <span id="loggedInUser"></span></h4>    
+          
+        </div>
+
+        <div class="mt-5" >
+       
+          <!-- Form -->
+          
+       
+        
+            <div class="grid gap-y-4">
+              <!-- Form Group -->
+              
+
+
+     
+<style>
+  .modal {
+    display: none;
+    position: fixed;
+    z-index: 9999;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.5);
+  }
+
+  .modal-content {
+    background-color: #fefefe;
+    margin: 0% 0;
+    padding: 0px;
+    border: 0px solid #888;
+    width: 100%;
+    height: 100vh;
+    /*max-width: 600px;*/
+    border-radius: 0px;
+  }
+
+  .close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+  .close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+  }
+</style>
+
+
+<!-- Button to open modal -->
+<button class="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">
+	Ver cotización</button>
+
+<!-- Modal 1 -->
+<div id="modal1" class="modal">
+  <div class="modal-content">
+    <span class="close">&times;</span>
+    <iframe src="Propuesta-de-Diseño-Web-para-calendarios-planeta.html" name="iframe_a" height="500" width="100%" title="Iframe" allowfullscreen="" frameborder="0" style="border:0;"></iframe>
+  </div>
+</div>
+
+<!-- Button to open modal -->
+<button class="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="modal2">Contacto</button>
+
+<!-- Modal 2 -->
+<div id="modal2" class="modal">
+  <div class="modal-content">
+    <span class="close">&times;</span>
+    <iframe src="formcontactplaneta.html" name="iframe_a" height="500" width="100%" title="Iframe" allowfullscreen="" frameborder="0" style="border:0;"></iframe>
+  </div>
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const modalButtons = document.querySelectorAll('.modal-btn');
+    const closeButtons = document.querySelectorAll('.close');
+    const overlay = document.querySelector('.modal');
+
+    modalButtons.forEach(button => {
+      button.addEventListener('click', function() {
+        const modal = document.getElementById(this.dataset.modalTarget);
+        modal.style.display = 'block';
+      });
+    });
+
+    closeButtons.forEach(button => {
+      button.addEventListener('click', function() {
+        const modal = this.parentElement.parentElement;
+        modal.style.display = 'none';
+      });
+    });
+
+    window.addEventListener('click', function(event) {
+      if (event.target === overlay) {
+        overlay.style.display = 'none';
+      }
+    });
+  });
+</script>
+
+
+              <!-- End Checkbox -->
+
+               <button onclick="logout()" class="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">Cerrar sesión</button>
+            </div>
+          </form>
+          <!-- End Form -->
+ </div>
+        </div>
+      </div>
+    </div> 
+    
+    
+
+   
+   
+
+    
+  </main>
+
+<script>
+    // Datos de inicio de sesión
+    const username = "calendariosPlaneta2024";
+    const password = "Plaz4lgari%n";
+
+    // Evento de envío del formulario de inicio de sesión
+    document.getElementById("login").addEventListener("submit", function(event) {
+        event.preventDefault(); // Evitar el envío del formulario
+        const enteredUsername = document.getElementById("username").value;
+        const enteredPassword = document.getElementById("password").value;
+        const rememberMe = document.getElementById("rememberMe").checked;
+
+        // Comprobar si las credenciales son válidas
+        if (enteredUsername === username && enteredPassword === password) {
+            if (rememberMe) {
+                localStorage.setItem("loggedIn", "true"); // Recordar la sesión en el almacenamiento local
+            } else {
+                sessionStorage.setItem("loggedIn", "true"); // No recordar la sesión al cerrar el navegador
+            }
+            document.getElementById("loginForm").style.display = "none";
+            document.getElementById("logoutForm").style.display = "block";
+            document.getElementById("loggedInUser").innerText = enteredUsername;
+        } else {
+            alert("Usuario o password incorrecto!");
+        }
+    });
+
+    // Función para cerrar sesión
+    function logout() {
+        localStorage.removeItem("loggedIn");
+        sessionStorage.removeItem("loggedIn");
+        document.getElementById("loginForm").style.display = "block";
+        document.getElementById("logoutForm").style.display = "none";
+        document.getElementById("username").value = "";
+        document.getElementById("password").value = "";
+    }
+
+    // Comprobar si el usuario ya ha iniciado sesión anteriormente
+    window.onload = function() {
+        const loggedIn = localStorage.getItem("loggedIn") || sessionStorage.getItem("loggedIn");
+        if (loggedIn) {
+            document.getElementById("loginForm").style.display = "none";
+            document.getElementById("logoutForm").style.display = "block";
+            document.getElementById("loggedInUser").innerText = username;
+        }
+    };
+</script>
+  
+  <script src="https://preline.co/assets/js/hs.theme-appearance.js"></script>
+</body>
+  
+
+</html>
\ No newline at end of file
