Countdown timer/clock on password page administrable

[mariocotomd]

Investigating thoroughly and manage to make the code of the countdown counter manageable, when I reach the end I put a code to hide it, I’m still working on the beginning part, but it works to give you an end date

Name Sections: countdown-bar.liquid

{% if section.settings.enable_countdown %}

    

          {% for block in section.blocks  %}
        
            

            # {{ block.settings.titulo_pricipal }}
     {% if block.settings.timer_date != blank %}
              
                

                  

                    00
                    Días
                  

                  
                    00
                    Horas
                  

                  
                    :
                    00
                    Minutos
                  

                  
                    :
                    00
                    Segundos
                  

                

              

              
              
              

    {% endif %}

        

            

                

                    ## {{ block.settings.nombre_promo }}
                

                
                    {{ block.settings.nombre_promo_enlace }}
                

            

        
  
              

               
          {% endfor %} 

    

  
{% endif %}

{% schema %}
  {
    "name": "Contador Publicitario",
 	"max_blocks": 1,
    "settings": [ {
          "type": "checkbox",
          "id": "enable_countdown",
          "default": false,
          "label": "Activar Contador publicitario"
      }
	],
    "blocks" : [
          {
            "type": "images",
            "name": "Bloque",
            "settings": [
			 {
                  "type": "text",
                  "id": "titulo_pricipal",
                  "label": "Titulo principal"
              },
              {
                  "type": "text",
                  "id": "timer_date",
                  "label": "Fecha de finalizacion y hora",
                  "info": "Formato: Sept 30, 2021 00:00"
              },
              {
                  "type": "text",
                  "id": "nombre_promo",
                  "label": "Sub Titulo"
              },
			  {
                  "type": "text",
                  "id": "nombre_promo_enlace",
                  "label": "Texto de Boton"
              },
              {
                  "type": "url",
                  "id": "promo_link",
                  "label": "Link URL"
             }
         ]
       }
     ],
    "presets": [{
        "name": "Contador Publicitario",
        "category": "Image",
        "settings": {
        },
        "blocks": [
          {
            "type": "images"
          }
        ]
      }]
  }
{% endschema %}

/* Contador Ofertero */

.timer {
    /*background: #f6fafd;
    padding: 10px;
    margin: 10px 0;*/
  }
  .timer--expired {
    display: none;
  }
  .timer__title {
    @extend .paragraph;
    text-align: center;
  }
  .timer-display {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-top: 5px;
    width: 326px;
    margin: 0 auto;
  }
  .timer-block {
    position: relative;
    width: 61px;
    /*width: 25%;
    padding: 0 0;*/
    &:not(:last-child):after {
      content: ':';
      position: absolute;
      right: 0;
      top: 3px;
    }
  }
  .timer-block__num,
  .timer-block__unit {
    display: block;
    text-align: center;
  }

.contador-publicitario {
	background: #FFCB05;
    border: 5px solid #004B8C;
    text-align: center;
}

.contador-publicitario h1 {
    font-weight: 600;
    font-size: 33px;
    margin: 16px 0 6px;
  	color: #004B8C;
}

.timer-block__num {
	background: #fff;
    color: #004b8c;
    display: inline-block;
    border-radius: 12px;
    padding: 5px;
    font-size: 30px;
    width: 56px;
    box-shadow: 1px 1px 7px #828282;
    font-weight: 700;
    font-family: 'Century Bold',arial;
}

.timer-block .separador {
    color: #004b8c;
    font-size: 45px;
    position: absolute;
    left: -18px;
    z-index: 10;
    top: -8px;
}

.timer-block__unit {
	text-transform: uppercase;
    margin-top: 7px;
    font-size: 13px;
    color: #004b8c;
    font-family: 'Century Bold',arial;
}

.wrapper-contador-publicitario .enlaces-textos {
	margin: 9px auto 8px;
    float: none;
    overflow: hidden;
}

.wrapper-contador-publicitario .enlaces-textos h2 {
	font-family: 'Century Bold',arial;
    text-transform: none;
    font-size: 20px;
}

.wrapper-contador-publicitario .enlaces-textos a {
	background: #314dcb;
    color: #fff;
    vertical-align: initial;
    padding: 15px 27px;
    display: inline-block;
    border-radius: 50px;
    font-weight: 600;
    font-family: 'Century Bold',arial;
}

.timer-seconds .timer-block__unit {
	margin-left: -8px;
}

.ocultar-contador .contador-publicitario {
	display: none;
}