cleaning the house

public/proc/cal/cal.css

@@ -0,0 +1,104 @@
+section.title{
+background: #C22A39;
+min-height:50vh;
+position:relative;
+}
+section.title > p {
+ font-size: 4em;
+ position: absolute;
+ left: 0;
+ top: 33%;
+ width: 100%;
+ text-align: center;
+ color:white;
+}
+a.cal{
+ max-width:720px;
+ display:block;
+ margin:25px auto;
+}
+
+section.month{
+  max-width: 720px;
+  margin: 25px auto;
+  justify-content: space-between; 
+  -webkit-justify-content: space-between; 
+}
+
+div.spacer{ 
+  flex:4;
+  margin:auto;
+  background-color:black;
+  height:1px;
+}
+
+p.month{
+ flex:3;
+ font-weight: bold;
+ font-size: 1.5em;
+ margin:auto;
+ text-align: center;
+ text-transform: capitalize;
+}
+
+section.event{ 
+ justify-content: space-between; 
+ -webkit-justify-content: space-between; 
+}
+
+
+article.data{ padding:10px;}
+article.more{
+ position:absolute;
+ right: 3%;
+ top: 75%;
+ text-align: center;
+ color:white;
+ font-size:1.5em;
+
+}
+article.image{
+  position:relative;
+}
+img.small{
+  max-height:180px;
+}
+p.date{
+ font-size: 1.4em;
+ margin:auto;
+ }
+p.city{
+ font-weight: bold;
+ font-size: 1.7em;
+ margin:auto;
+ color:#C22A39;
+}
+p.place{
+ font-size: 0.7em;
+ font-style: italic;
+ font-weight:lighter;
+ margin:10px auto;
+ color:#C22A39;
+ display:inline;
+}
+p.dir{
+ font-size: 0.7em;
+ font-style: italic;
+ font-weight:lighter;
+ margin:10px auto;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ max-width:380px;
+
+}
+p.name{
+ font-size: 1em;
+ margin:10px auto;
+}
+a.cal,
+a.cal:visited,
+a.cal:link,
+a.cal:active,
+a.cal:hover{ color:black;
+text-decoration:none; }

public/proc/event/event.css

@@ -0,0 +1,127 @@
+section.item{
+  background-size:cover;
+  height:80vh;
+  background-attachment: fixed;
+  margin: auto;
+  background-image:url("img/grulla_10.jpg");
+  background-position:center;
+}
+section.place{
+  background: #C22A39;
+  padding:40px;
+}
+p.place{
+  font-size: 1.5em;
+  color: white;
+  text-align: center;
+}
+
+p.cname{
+  font-size: 1.7em;
+  color: white;
+  text-align: center;
+  margin: 7px;
+}
+a.bt3{
+display:block;
+padding:0.7em 1.7em;
+margin: 4em 20vw 2px;
+border-radius:0.2em;
+font-family:'Roboto',sans-serif;
+color:#FFFFFF;
+background-color:#333333;
+box-shadow:inset 0 -0.6em 1em -0.35em rgba(0,0,0,0.17),inset 0 0.6em 2em -0.3em rgba(255,255,255,0.15),inset 0 0 0em 0.05em rgba(255,255,255,0.12);
+text-align:center;
+}
+a.bt3:active{
+box-shadow:inset 0 0.6em 2em -0.3em rgba(0,0,0,0.15),inset 0 0 0em 0.05em rgba(255,255,255,0.12);
+}
+@media all and (max-width:30em){
+a.bt3{
+display:block;
+margin:0.4em auto;
+}}
+span.bt3{
+font-size:3em;
+ font-family:'Comic Sans MS';
+ border-right:1px solid rgba(255,255,255,0.5);
+ padding-right:0.3em;
+ margin-right:0.3em;
+ vertical-align:middle;
+}
+/*===========================*/
+section.description{
+  background-color:white;
+  justify-content: center;
+  -webkit-justify-content: center;
+}
+
+article.info{
+  flex:1 1 250px;
+  max-width:370px;
+  margin:auto;
+  min-width:250px;
+  padding-left:20px;
+}
+
+p.pbig{ 
+  font-weight:bold;
+  font-size:1.8em;
+}
+
+p.pmed{
+  font-size:1.1em;
+}
+
+article.specs{
+  flex:2 2 250px;
+  margin:auto;
+  max-width:420px;
+}
+
+p#subt{
+  margin: 10px;
+  color: black;
+  font-size: 1.2em;
+}
+
+article.specs >p{
+  margin-bottom: 30px;
+  color: black;
+  font-size: .875rem;
+  font-weight: 400;
+  line-height: 1.5;
+  min-width:250px;
+}
+
+p.promo{
+  margin: 10px;
+  color: #c22a39;
+  font-size: 1.2em;
+}
+
+section.map{
+  background-color:#333333;
+  overflow:hidden;
+  height:80vh;
+  min-height:400px;
+  position:relative;
+}
+
+section.map > iframe{
+  width:70%;
+  height:70%;
+  top:15%;
+  left:15%;
+  overflow: hidden;
+  position:absolute;
+}
+p.arrive{
+  position:absolute;
+  left:10%;
+  top:1%;
+  font-size:1.5em;
+  color:white;
+}
+article.contact{
+}

public/proc/spay/storep.css

@@ -0,0 +1,201 @@
+
+section.item{
+  background-color:rgba(255,255,255);
+  max-width: 1000px;
+  margin: auto;
+}
+
+article.iimage{
+  flex:5 1;
+  margin:auto;
+  display:inline;
+  padding:0px 5px;
+
+}
+img.small{
+  border-radius:20px;
+  display:block;
+  width:auto;
+  height:100%;
+  margin:auto;
+  padding:15px;
+}
+article.iinfo{
+  background-color:white;
+  flex:4 1;
+  margin:0px 10px;
+}
+p.txt{
+  font-size:1.2em;
+}
+
+section.ibottom{
+  background: #C22A39;
+  padding-bottom:1px;
+  padding-bottom:1px;
+
+}
+
+section.description{
+  background-color:white;
+  justify-content: center;
+  -webkit-justify-content: center;
+}
+
+p.promo{
+  color: #c22a39;
+  font-size: 1.4em;
+  text-align:right;
+  margin-right:10%;
+  font-weight:bold;
+}
+
+
+p.elow{
+  color: black;
+  font-size: 1.4em;
+  text-align:right;
+  margin-right:10%;
+}
+
+p.eldep{
+  color: #c22a39;
+  font-size: 1.4em;
+  text-align:right;
+  text-transform: uppercase;
+  margin-right:10%;
+  font-weight:bold;
+}
+
+div.ppl{
+  background-color: rgba(0,0,0,0.8);
+  border-radius: 25px;
+  padding:20px;
+  text-align: center;
+}
+p.nombre{
+  font-size: 2.2em;
+  color: white;
+  text-align: left;
+  margin: auto;
+  max-width:850px;
+  font-weight:bold;
+}
+
+p.tit{
+  font-size: 1.8em;
+  color: white;
+  text-align: center;
+  margin: 30px auto;
+  font-style: italic;
+}
+
+p.total{
+  font-weight: bold;
+  font-size: 1.2em;
+  text-align: end;
+}
+
+div#cover{
+  background: black;
+  z-index: 100;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  transition:opacity .4s linear;
+  top:0px;
+  opacity:0;
+}
+ /* * form css based on */
+ /* * https://www.sanwebe.com/2014/08/css-html-forms-designs*/
+ /* * thaks for make my life a bit easier*/
+ /* ***************************************************************/
+
+.form-style-1 {
+  margin:10px auto;
+  max-width: 400px;
+  padding: 20px 12px 10px 20px;
+  font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+}
+.form-style-1 li {
+  padding: 0;
+  display: block;
+  list-style: none;
+  margin: 10px 0 0 0;
+}
+.form-style-1 label{
+  margin:0 0 3px 0;
+  padding:0px;
+  display:block;
+  font-weight: bold;
+}
+.form-style-1 input[type=text], 
+.form-style-1 input[type=date],
+.form-style-1 input[type=datetime],
+.form-style-1 input[type=number],
+.form-style-1 input[type=search],
+.form-style-1 input[type=time],
+.form-style-1 input[type=url],
+.form-style-1 input[type=email],
+textarea, 
+select{
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  border:1px solid #BEBEBE;
+  padding: 7px;
+  margin:0px;
+  -webkit-transition: all 0.30s ease-in-out;
+  -moz-transition: all 0.30s ease-in-out;
+  -ms-transition: all 0.30s ease-in-out;
+  -o-transition: all 0.30s ease-in-out;
+  outline: none;	
+}
+.form-style-1 input[type=text]:focus, 
+.form-style-1 input[type=date]:focus,
+.form-style-1 input[type=datetime]:focus,
+.form-style-1 input[type=number]:focus,
+.form-style-1 input[type=search]:focus,
+.form-style-1 input[type=time]:focus,
+.form-style-1 input[type=url]:focus,
+.form-style-1 input[type=email]:focus,
+.form-style-1 textarea:focus, 
+.form-style-1 select:focus{
+  -moz-box-shadow: 0 0 8px #88D5E9;
+  -webkit-box-shadow: 0 0 8px #88D5E9;
+  box-shadow: 0 0 8px #88D5E9;
+  border: 1px solid #88D5E9;
+}
+.form-style-1 .field-divided{
+  width: 49%;
+}
+.form-style-1 .field-mini{
+  width: 5em;
+}
+.form-style-1 .field-long{
+  width: 100%;
+}
+.form-style-1 .field-select{
+  width: 100%;
+}
+.form-style-1 .field-textarea{
+  height: 100px;
+}
+
+.fbutton,
+.form-style-1 input[type=submit], .form-style-1 input[type=button]{
+  background: #4B99AD;
+  padding: 8px 15px 8px 15px;
+  border: none;
+  color: #fff;
+}
+.form-style-1 input[type=submit]:hover, .form-style-1 input[type=button]:hover{
+  background: #4691A4;
+  box-shadow:none;
+  -moz-box-shadow:none;
+  -webkit-box-shadow:none;
+}
+.form-style-1 .required{
+  color:red;
+}
+

public/proc/spay/stripe.js

@@ -0,0 +1,242 @@
+/* some format to numbers */
+var it=1;
+var students = new Array(10);
+
+/* price format (comas) */
+window.addEventListener('load', function() {
+  document.getElementById('cu').innerHTML=cu.toLocaleString();
+  document.getElementById('gt').innerHTML=cu.toLocaleString();
+});
+
+var mq = document.forms["cform"]["mq"];
+mq.addEventListener('change',function() {
+  var mult = cu*mq.value;
+  document.getElementById('gt').innerHTML=mult.toLocaleString();
+});
+/* ====================== */
+
+/* vars to hide contact form, show card info fields */ 
+var cinfob = document.getElementById('cinfob');
+var cinfo = document.getElementById('cinfo');
+var cform = document.getElementById('cform');
+var ccard = document.getElementById('ccard');
+/* ====================== */
+
+/* back button ========== */
+cinfob.addEventListener('click', function(ev){ 
+  it --;
+  atof();
+  if (it==1){cinfob.hidden=true;}
+  
+});
+/* ====================== */
+
+/* fwd button============ */
+cinfo.addEventListener('click', function(ev){ 
+  if ( 
+    (document.forms["cform"]["mname"].value =="") || 
+    (document.forms["cform"]["mmail"].value =="")
+  ){console.log("form incomplete");}
+  else if ( mq.value > it) {
+    students[it - 1]=ftoa();
+    it ++;
+    if(typeof students[it - 1]!== "undefined"){ atof(); }
+    cinfob.hidden=false;
+  }
+  else {
+    students[it - 1]=ftoa();
+    document.getElementById('cover').hidden = false;
+    document.getElementById("cover").style.opacity = "0.8";
+    fetch('/spay/userCheck', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ students:students, req:"precheck", mq:mq.value})
+
+    })
+      .then((response) => response.json())
+      .then((data) => { 
+        if(data.userst == "0"){
+          cform.hidden = true;
+          ccard.hidden = false;
+        }
+        else{ alert("hay un error en los datos de alumnos"); }
+      })
+      .catch((error) => {
+        console.error('Error:', error);
+      });
+
+    document.getElementById("cover").style.opacity = "0";
+    setTimeout(function(){ document.getElementById('cover').hidden = true;},500);
+  }
+});
+
+/* ====================== */
+
+/*  save form to array=== */
+function ftoa(){
+  var rad;
+  if (document.getElementById('r2').checked) { rad = document.getElementById('r2').value; }
+  else if(document.getElementById('r1').checked) { rad = document.getElementById('r1').value; }
+  else { rad = document.getElementById('r3').value; }
+
+  var x= [
+   document.forms["cform"]["mname"].value,
+   document.forms["cform"]["mmail"].value,
+   document.getElementById('obs').value,
+   rad
+  ]
+  var tmp=mq.value;
+   document.getElementById("cform").reset();
+   mq.value=tmp;
+
+  return x;
+}
+/* ====================== */
+
+/*  load form from array=== */
+function atof(){
+ document.forms["cform"]["mname"].value = students[it-1][0];
+ document.forms["cform"]["mmail"].value = students[it-1][1];
+ document.getElementById('obs').value = students[it-1][2];
+ if(document.getElementById('r2').value == students[it-1][3]){ document.getElementById('r2').checked=true;} 
+ if(document.getElementById('r1').value == students[it-1][3]){ document.getElementById('r1').checked=true;} 
+ if(document.getElementById('r3').value == students[it-1][3]){ document.getElementById('r3').checked=true;} 
+}
+/* ====================== */
+
+/* stripe magic begins here */
+/* ====================================================== */
+var stripe = Stripe('pk_test_wxFt0GhsUK2YsprkLXa2iFrQ00nfjAeucu');
+var elements = stripe.elements();
+var cardElement = elements.create('card', {
+  style: {
+    base: {
+      //iconColor: '#c4f0ff',
+      iconColor: '#64a0af',
+      color: '#000000',
+      fontWeight: 500,
+      fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
+      fontSize: '18px',
+      fontSmoothing: 'antialiased',
+      ':-webkit-autofill': {
+        color: '#fce883',
+      },
+      '::placeholder': {
+  //      color: '#87BBFD',
+        color: '#87BBFD',
+      },
+    },
+    invalid: {
+      iconColor: '#8f577e',
+      color: '#8F577E',
+    },
+  },
+});
+
+cardElement.mount('#card-element');
+
+var cardholderName = document.getElementById('cardholder-name');
+var cardButton = document.getElementById('card-button');
+
+///*y este el codigo de validación de la tarjeta*/
+cardButton.addEventListener('click', function(ev) {
+  document.getElementById('cover').hidden = false;
+  document.getElementById("cover").style.opacity = "0.8";
+  stripe.createPaymentMethod('card', cardElement, {
+    billing_details: {name: cardholderName.value}
+  })
+  .then(function(result) {
+    // Show error in payment form 
+    if (result.error) {
+      document.getElementById("cover").style.opacity = "0";
+      setTimeout(function(){ document.getElementById('cover').hidden = true;},500);
+      console.log("network error");
+    }
+    // Otherwise send paymentMethod.id to your server (see Step 2)
+    else { 
+      fetch('/spay/intentCreate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ payment_method_id: result.paymentMethod.id, req:"precheck", mq:mq.value, tid:tid})
+      })
+      .then(function(result) {
+        // Handle server response (see Step 3)
+        result.json().then(function(json) { handleInstallmentPlans(json); })
+      });
+    }
+  });
+});
+
+///*presenta los planes de pago */
+const selectPlanForm = document.getElementById('installment-plan-form');
+let availablePlans = [];
+
+const handleInstallmentPlans = async (response) => {
+  if (response.error) { // Show error from server on payment form
+    console.log("preauth response error");
+  } 
+  else {
+    // si avaliable plans es indefinido, se queda alli con el cover
+    // Store the payment intent ID.
+    document.getElementById('payment-intent-id').value = response.intent_id;
+    availablePlans = response.available_plans;
+    // Show available installment options
+    availablePlans.forEach((plan, idx) => {
+      const newInput = document.getElementById('immediate-plan').cloneNode();
+      newInput.setAttribute('value', idx);
+      newInput.setAttribute('id', '');
+      const label = document.createElement('label');
+      label.appendChild(newInput);
+      label.appendChild(
+        document.createTextNode(`${plan.count} meses`),
+      );
+      selectPlanForm.appendChild(label);
+    });
+    document.getElementById('ccard').hidden = true;
+    document.getElementById('cplan').hidden = false;
+  }
+  document.getElementById("cover").style.opacity = "0";
+  setTimeout(function(){ document.getElementById('cover').hidden = true;},500);
+};
+
+// termina la transacción
+const confirmButton = document.getElementById('confirm-button');
+confirmButton.addEventListener('click', async (ev) => {
+  document.getElementById('cover').hidden = false;
+  document.getElementById("cover").style.opacity = "0.8";
+  const selectedPlanIdx = selectPlanForm.installment_plan.value;
+  const selectedPlan = availablePlans[selectedPlanIdx];
+  const intentId = document.getElementById('payment-intent-id').value;
+  const response = await fetch('/spay/intentConfirm', {
+    method: 'POST',
+    headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify({
+      payment_intent_id: intentId,
+      selected_plan: selectedPlan,
+      req:"check",
+      students:students,
+      mq:mq.value,
+      tid:tid
+    }),
+  });
+  const responseJson = await response.json();
+  // Show success / error response.
+  document.getElementById("cover").style.opacity = "0";
+  setTimeout(function(){ document.getElementById('cover').hidden = true;},500);
+  document.getElementById('cmsg').hidden = false;
+  document.getElementById('cplan').hidden = true;
+  var message;
+  if (responseJson.status === "succeeded" && selectedPlan !== undefined) {
+    message = `¡Tu compra a ${
+      selectedPlan.count
+    } meses sin intereses se ha realizado con éxito! `;
+  } else if (responseJson.status === "succeeded") {
+    message = "¡Tu compra se ha realizado con éxito!";
+  } else {
+    message = `Tenemos un problema para verificar tus datos. 
+      Por favor intenta de nuevo o comunícate con nosotros`;
+  }
+
+  document.getElementById("status-message").innerText = message;
+});
+