Seção de contagem regressiva para qualquer tema do Shopify

 < div
 class = "seção de contagem regressiva"
 estilo = " 
--image-filter: {{ section.settings.image_filter }} ; --countdown-aspect-ratio: {{ section.settings.image.aspect_ratio }} ;
 {% unless section.settings.image %} cor de fundo: {{ section.settings.background }} {% endunless %}
 "
 >
 { % se seção. configurações . imagem % }
 { {
 seção. configurações . imagem 
| URL_da_imagem : largura : 1500
 | imagem_tag :
 carregando : 'preguiçoso' ,
 largura : seção. configurações . imagem . largura ,
 altura : altura_da_imagem ,
 class : 'imagem de contagem regressiva' ,
 tamanhos : tamanhos , 
larguras : '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840' ,
 alt : seção. configurações . imagem . alternativo
 } }
 { % fim se % }
 < div
 class = "contagem regressiva--contêiner" 
style = "posição: {% if section.settings.image %} absoluto {% else %} relativo {% endif %} "
 >
 { % para bloco na seção. blocos % }
 { % bloco de casos . tipo % } 
{ %- quando 'título' -% }
 < { { bloco. configurações . tamanho_título } }
 class = "contagem regressiva--título"
 style = "cor: {{ block.settings.heading_color }} "
 > 
{ { - bloquear. configurações . título | escapar - } }
 </ { { bloco. configurações . tamanho_título } } >
 { %- quando 'texto' -% } 
< { { bloco. configurações . text_size } } class = "contagem regressiva--text" style = "color: {{ block.settings.richtext_color }} " >
 { { - bloquear. configurações . texto - } } 
</ { { bloco. configurações . tamanho_texto } } >
 { %- quando 'botão' -% }
 < um
 class = "contagem regressiva - botão botão botão - botão sólido - com ícone"
 href = " {{ block.settings.button_link | escape }} " 
title = " {{ block.settings.button_label | escape }} "
 style = "cor: {{ block.settings.button_text_color }} ; cor de fundo: {{ block.settings.button_bg_color }} "
 >
 < span > { { bloco. configurações . rótulo_botão | escape } } </ span > 
</a> _
 { % quando 'contagem regressiva' % }
 { % líquido
 se bloquear. configurações . am_pm == 'AM'
 atribuir tempo = bloco. configurações . tempo
 outro 
atribuir _time = bloco. configurações . tempo | dividir : ':' 
atribuir hora = _hora [ 0 ] | mais : 12 | acrescentar : ':' | anexar : _time [ 1 ] | acrescentar : ':' | anexar : _time [ 2 ]
 fim se 
% }
 < contagem regressiva - seção
 dados - data = " {{ block.settings.date_year }} - {{ block.settings.date_month }} - {{ block.settings.date_day }} {{ time }} "
 style = "--countdown-color: {{ block.settings.text_color }} ; --countdown-bg-color: {{ block.settings.background_color }} ; --countdown-text: {{ block.settings.countdown_text }} ;"
 > 
< div classe = "contagem regressiva" >
 < div class = "seção de tempo" id = "dias" >
 < div class = "grupo de tempo" > 
< div class = "segmento de tempo" >
 < div class = "cartão de contagem regressiva" >
 < div class = "cartão de contagem regressiva__top" > 0 </ div > 
< div class = "cartão de contagem regressiva__bottom" > 0 </ div >
 < div class = "sobreposição de contagem regressiva" > 
< div class = "countdown-overlay__top" 0 </ div >
 < div class = "countdown-overlay__bottom" > 0 </ div >
 </div> _ _ 
</div> _ _
 </div> _ _
 < div class = "segmento de tempo" >
 < div class = "cartão de contagem regressiva" > 
< div class = "cartão de contagem regressiva__top" > 0 </ div >
 < div class = "cartão de contagem regressiva__bottom" > 0 </ div > 
< div class = "sobreposição de contagem regressiva" >
 < div class = "countdown-overlay__top" > 0 </ div > 
< div class = "countdown-overlay__bottom" > 0 </ div >
 </div> _ _
 </div> _ _
 </div> _ _
 </div> _ _ 
< p > Dias </ p >
 </div> _ _
 < div class = "seção de tempo" id = "horas" >
 < div class = "grupo de tempo" > 
< div class = "segmento de tempo" >
 < div class = "cartão de contagem regressiva" >
 < div class = "cartão de contagem regressiva__top" > 0 </ div > 
< div class = "cartão de contagem regressiva__bottom" > 0 </ div >
 < div class = "sobreposição de contagem regressiva" > 
< div class = "countdown-overlay__top" > 0 </ div >
 < div class = "countdown-overlay__bottom" > 0 </ div > 
</div> _ _
 </div> _ _
 </div> _ _
 < div class = "segmento de tempo" >
 < div class = "cartão de contagem regressiva" > 
< div class = "cartão de contagem regressiva__top" > 0 </ div >
 < div class = "cartão de contagem regressiva__bottom" > 0 </ div > 
< div class = "sobreposição de contagem regressiva" >
 < div class = "countdown-overlay__top" > 0 </ div > 
< div class = "countdown-overlay__bottom" > 0 </ div >
 </div> _ _
 </div> _ _
 </div> _ _
 </div> _ _ 
< p > Horas </ p >
 </div> _ _
 < div class = "seção de tempo" id = "minutos" >
 < div class = "grupo de tempo" > 
< div class = "segmento de tempo" >
 < div class = "cartão de contagem regressiva" >
 < div class = "cartão de contagem regressiva__top" > 0 </ div > 
< div class = "cartão de contagem regressiva__bottom" > 0 </ div >
 < div class = "sobreposição de contagem regressiva" > 
< div class = "countdown-overlay__top" > 0 </ div >
 < div class = "countdown-overlay__bottom" > 0 </ div > 
</div> _ _
 </div> _ _
 </div> _ _
 < div class = "segmento de tempo" >
 < div class = "cartão de contagem regressiva" > 
< div class = "cartão de contagem regressiva__top" > 0 </ div >
 < div class = "cartão de contagem regressiva__bottom" > 0 </ div > 
< div class = "sobreposição de contagem regressiva" >
 < div class = "countdown-overlay__top" > 0 </ div > 
< div class = "countdown-overlay__bottom" > 0 </ div >
 </div> _ _
 </div> _ _
 </div> _ _
 </div> _ _ 
< p > Minutos </ p >
 </div> _ _
 < div class = "seção de tempo" id = "segundos" >
 < div class = "grupo de tempo" > 
< div class = "segmento de tempo" >
 < div class = "cartão de contagem regressiva" >
 < div class = "cartão de contagem regressiva__top" > 0 </ div > 
< div class = "cartão de contagem regressiva__bottom" > 0 </ div >
 < div class = "sobreposição de contagem regressiva" > 
< div class = "countdown-overlay__top" > 0 </ div >
 < div class = "countdown-overlay__bottom" > 0 </ div > 
</div> _ _
 </div> _ _
 </div> _ _
 < div class = "segmento de tempo" >
 < div class = "cartão de contagem regressiva" > 
< div class = "cartão de contagem regressiva__top" > 0 </ div >
 < div class = "cartão de contagem regressiva__bottom" > 0 </ div > 
< div class = "sobreposição de contagem regressiva" >
 < div class = "countdown-overlay__top" > 0 </ div > 
< div class = "countdown-overlay__bottom" > 0 </ div >
 </div> _ _
 </div> _ _
 </div> _ _
 </div> _ _ 
< p > Segundos </ p >
 </div> _ _
 </div> _ _
 </ contagem regressiva - seção >
 { % final % }
 { % fim para % } 
</div> _ _
 </div> _ _
 <estilo> _
 . contagem regressiva - seção {
 exibição : flexível ;
 flex - direction : coluna ;
 alinhar - itens : centro ;
 posição : relativa ;
 estouro : oculto ; 
justificar - conteúdo : centro ;
 }
 seção de contagem regressiva. contagem regressiva {
 largura : 100 %;
 exibição : flexível ;
 lacuna : braçadeira ( 12px , 2vw , 30px ) ;
 família de fontes : sem serifa ;
 } 
. seção de contagem regressiva . contagem regressiva - imagem {
 filtro : var ( -filtro de imagem ) ;
 largura : 100 %;
 altura : automático ; 
proporção de aspecto : var ( -proporção de contagem regressiva ) ;
 z - índice : -1 ;
 }
 . seção de contagem regressiva . contagem regressiva -- contêiner {
 topo : 0 ; 
esquerda : 0 ;
 largura : 100 %;
 altura : 100 %;
 exibição : flexível ;
 flex - direction : coluna ;
 alinhar - itens : centro ;
 justificar - conteúdo : centro ;
 } 
. contagem regressiva - contêiner. contagem regressiva - título ,
 . contagem regressiva - contêiner. contagem regressiva - texto ,
 . contagem regressiva - contêiner. contagem regressiva - botão ,
 . contagem regressiva -- contagem regressiva do contêiner - seção {
 margem : 1rem 0 ; 
}
 . contagem regressiva -- texto p {
 margem : 0 ;
 }
 . tempo - seção p {
 margem : 1rem 0 0 ;
 cor : var ( -texto - contagem regressiva ) ;
 } 
. tempo - seção {
 alinhamento de texto : centro ;
 tamanho da fonte : clamp ( 15px , 3vw , 30px ) ;
 }
 . horário - grupo {
 exibição : flexível ; 
lacuna : braçadeira ( 5px , 1,5vw , 10px ) ;
 }
 . tempo - segmento {
 exibição : bloco ;
 tamanho da fonte : clamp ( 25px , 5vw , 100px ) ;
 peso da fonte : 900 ; 
largura : 100 %;
 }
 . contagem regressiva - cartão {
 posição : relativa ;
 altura : 100 %;
 }
 . contagem regressiva - card__top ,
 . contagem regressiva - card__bottom {
 estouro : oculto ; 
alinhamento de texto : centro ;
 largura : 100 %;
 altura : 50 %;
 posição : relativa ;
 preenchimento : 0 braçadeira ( 5px , 1,5vw , 15px ) ;
 }
 . contagem regressiva - card__top { 
altura da linha : 1,55 ;
 cor : #eee;
 cor de fundo : var ( -countdown - bg - color ) ;
 }
 . contagem regressiva - card__bottom {
 altura da linha : 0 ; 
cor : var ( -cor - contagem regressiva ) ;
 cor de fundo : var ( -countdown - bg - color ) ;
 }
 . contagem regressiva - sobreposição {
 posição : absoluta ;
 topo : 0 ; 
perspectiva : 400px ;
 altura : 100 %;
 largura : 100 %;
 }
 . contagem regressiva - overlay__top ,
 . contagem regressiva - overlay__bottom {
 posição : absoluta ;
 estouro : oculto ;
 alinhamento de texto : centro ; 
largura : 100 %;
 altura : 50 %;
 }
 . contagem regressiva - overlay__top {
 topo : 0 ;
 altura da linha : 1,55 ;
 cor : var ( -cor - contagem regressiva ) ; 
cor de fundo : var ( -countdown - bg - color ) ;
 transformação - origem : inferior ;
 }
 . contagem regressiva - overlay__bottom {
 inferior : 0 ;
 altura da linha : 0 ; 
cor : var ( -cor - contagem regressiva ) ;
 cor de fundo : var ( -countdown - bg - color ) ;
 borda superior : 2px preto sólido ;
 transformação - origem : topo ; 
filtro : contraste ( 0,6 ) ;
 }
 . contagem regressiva - sobreposição. virar . contagem regressiva - overlay__top {
 animação : flip - top 0,8s linear ;
 }
 . contagem regressiva - sobreposição. virar . contagem regressiva - overlay__bottom { 
animação : flip - bottom 0,8s linear ;
 }
 @keyframes flip - top {
 0 % {
 transformar : rotacionarX ( 0deg ) ;
 }
 50 %,
 100 % { 
transformação : rotacionarX ( -90deg ) ;
 }
 }
 @keyframes flip - inferior {
 0 %,
 50 % {
 transformar : rotacionarX ( 90deg ) ;
 }
 100 % { 
transformar : rotacionarX ( 0deg ) ;
 }
 }
 Tela @media somente e ( largura máxima : 750px ) {
 }
 </ estilo >
 { % esquema % }
 {
 "name" : "Seção de contagem regressiva" , 
"configurações" : [
 {
 "type" : "image_picker" ,
 "id" : "imagem" ,
 "rótulo" : "Imagem" ,
 "info" : "A altura do container depende da altura da imagem"
 } ,
 { 
"tipo" : "selecionar" ,
 "id" : "filtro_imagem" ,
 "label" : "Filtro de imagem" ,
 "default" : "brilho(0,7)" ,
 "opções" : [
 { 
"valor" : "brilho(0,7)" ,
 "rótulo" : "escuro"
 } ,
 {
 "valor" : "brilho(1,2);" ,
 "rótulo" : "brilhante"
 } ,
 { 
"valor" : "escala de cinza(0,8);" ,
 "label" : "tons de cinza"
 } ,
 {
 "valor" : "" ,
 "rótulo" : "normal"
 }
 ]
 } ,
 { 
"tipo" : "cor" ,
 "id" : "plano de fundo" ,
 "label" : "Contêiner de fundo" ,
 "default" : "#fff" ,
 "info" : "Isso só será usado se a imagem estiver em branco"
 }
 ] , 
"blocos" : [
 {
 "tipo" : "título" ,
 "nome" : "Título" ,
 "configurações" : [
 {
 "tipo" : "texto" , 
"id" : "título" ,
 "rótulo" : "Texto" ,
 "default" : "Título"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "heading_size" , 
"label" : "Tamanho do texto" ,
 "padrão" : "h1" ,
 "opções" : [
 {
 "valor" : "h1" ,
 "rótulo" : "grande"
 } ,
 { 
"valor" : "h2" ,
 "rótulo" : "médio"
 } ,
 {
 "valor" : "h3" ,
 "rótulo" : "pequeno"
 }
 ]
 } ,
 { 
"tipo" : "cor" ,
 "id" : "heading_color" ,
 "label" : "Cor do texto do título" ,
 "padrão" : "#fff"
 }
 ]
 } ,
 { 
"tipo" : "texto" ,
 "nome" : "Texto" ,
 "configurações" : [
 {
 "type" : "richtext" ,
 "id" : "texto" , 
"rótulo" : "Texto" ,
 "default" : "<p>Promova seus produtos através de uma venda relâmpago!</p>"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "tamanho_do_texto" , 
"label" : "Tamanho do texto" ,
 "padrão" : "h3" ,
 "opções" : [
 {
 "valor" : "h2" ,
 "rótulo" : "grande"
 } ,
 { 
"valor" : "h3" ,
 "rótulo" : "médio"
 } ,
 {
 "valor" : "h4" ,
 "rótulo" : "pequeno"
 }
 ]
 } ,
 { 
"tipo" : "cor" ,
 "id" : "richtext_color" ,
 "label" : "Cor do richtext" ,
 "padrão" : "#fff"
 }
 ]
 } ,
 { 
"tipo" : "botão" ,
 "nome" : "Botão" ,
 "configurações" : [
 {
 "tipo" : "texto" ,
 "id" : "button_label" , 
"label" : "Etiqueta do botão" ,
 "default" : "Compre agora"
 } ,
 {
 "tipo" : "url" ,
 "id" : "botão_link" ,
 "label" : "Link do botão" 
} ,
 {
 "tipo" : "cor" ,
 "id" : "button_bg_color" ,
 "label" : "Cor de fundo do botão" ,
 "padrão" : "#000"
 } ,
 { 
"tipo" : "cor" ,
 "id" : "button_text_color" ,
 "label" : "Cor do texto do botão" ,
 "padrão" : "#fff"
 }
 ]
 } ,
 { 
"tipo" : "contagem regressiva" ,
 "nome" : "Contagem regressiva" ,
 "limite" : 1 ,
 "configurações" : [
 {
 "tipo" : "cabeçalho" , 
"content" : "Definir a data de término" ,
 "info" : "Certifique-se de que é posterior à data atual"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "data_mês" ,
 "label" : "Mês" , 
"opções" : [
 {
 "valor" : "01" ,
 "rótulo" : "Janeiro"
 } ,
 {
 "valor" : "02" ,
 "label" : "fevereiro" 
} ,
 {
 "valor" : "03" ,
 "rótulo" : "Março"
 } ,
 {
 "valor" : "04" ,
 "rótulo" : "abril"
 } , 
{
 "valor" : "05" ,
 "rótulo" : "maio"
 } ,
 {
 "valor" : "06" ,
 "rótulo" : "junho"
 } ,
 { 
"valor" : "07" ,
 "rótulo" : "Julho"
 } ,
 {
 "valor" : "08" ,
 "rótulo" : "agosto"
 } ,
 { 
"valor" : "09" ,
 "rótulo" : "setembro"
 } ,
 {
 "valor" : "10" ,
 "rótulo" : "Outubro"
 } ,
 { 
"valor" : "11" ,
 "rótulo" : "Novembro"
 } ,
 {
 "valor" : "12" ,
 "rótulo" : "Dezembro"
 }
 ] , 
"padrão" : "01"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "data_dia" ,
 "rótulo" : "Dia" ,
 "opções" : [
 { 
"valor" : "01" ,
 "rótulo" : "01"
 } ,
 {
 "valor" : "02" ,
 "rótulo" : "02"
 } ,
 { 
"valor" : "03" ,
 "rótulo" : "03"
 } ,
 {
 "valor" : "04" ,
 "rótulo" : "04"
 } ,
 { 
"valor" : "05" ,
 "rótulo" : "05"
 } ,
 {
 "valor" : "06" ,
 "rótulo" : "06"
 } ,
 { 
"valor" : "07" ,
 "rótulo" : "07"
 } ,
 {
 "valor" : "08" ,
 "rótulo" : "08"
 } ,
 { 
"valor" : "09" ,
 "rótulo" : "09"
 } ,
 {
 "valor" : "10" ,
 "rótulo" : "10"
 } ,
 { 
"valor" : "11" ,
 "rótulo" : "11"
 } ,
 {
 "valor" : "12" ,
 "rótulo" : "12"
 } ,
 { 
"valor" : "13" ,
 "rótulo" : "13"
 } ,
 {
 "valor" : "14" ,
 "rótulo" : "14"
 } ,
 { 
"valor" : "15" ,
 "rótulo" : "15"
 } ,
 {
 "valor" : "16" ,
 "rótulo" : "16"
 } ,
 { 
"valor" : "17" ,
 "rótulo" : "17"
 } ,
 {
 "valor" : "18" ,
 "rótulo" : "18"
 } ,
 { 
"valor" : "19" ,
 "rótulo" : "19"
 } ,
 {
 "valor" : "20" ,
 "rótulo" : "20"
 } ,
 { 
"valor" : "21" ,
 "rótulo" : "21"
 } ,
 {
 "valor" : "22" ,
 "rótulo" : "22"
 } ,
 { 
"valor" : "23" ,
 "rótulo" : "23"
 } ,
 {
 "valor" : "24" ,
 "rótulo" : "24"
 } ,
 { 
"valor" : "25" ,
 "rótulo" : "25"
 } ,
 {
 "valor" : "26" ,
 "rótulo" : "26"
 } ,
 { 
"valor" : "27" ,
 "rótulo" : "27"
 } ,
 {
 "valor" : "28" ,
 "rótulo" : "28"
 } ,
 { 
"valor" : "29" ,
 "rótulo" : "29"
 } ,
 {
 "valor" : "30" ,
 "rótulo" : "30"
 } ,
 { 
"valor" : "31" ,
 "rótulo" : "31"
 }
 ] ,
 "padrão" : "01"
 } ,
 {
 "tipo" : "selecionar" , 
"id" : "data_ano" ,
 "rótulo" : "Ano" ,
 "opções" : [
 {
 "valor" : "2023" ,
 "rótulo" : "2023"
 } ,
 { 
"valor" : "2024" ,
 "rótulo" : "2024"
 } ,
 {
 "valor" : "2025" ,
 "rótulo" : "2025"
 } ,
 { 
"valor" : "2026" ,
 "rótulo" : "2026"
 } ,
 {
 "valor" : "2027" ,
 "rótulo" : "2027"
 } ,
 { 
"valor" : "2028" ,
 "rótulo" : "2028"
 } ,
 {
 "valor" : "2029" ,
 "rótulo" : "2029"
 } ,
 { 
"valor" : "2030" ,
 "rótulo" : "2030"
 } ,
 {
 "valor" : "2031" ,
 "rótulo" : "2031"
 } ,
 { 
"valor" : "2032" ,
 "rótulo" : "2032"
 } ,
 {
 "valor" : "2033" ,
 "rótulo" : "2033"
 } ,
 { 
"valor" : "2034" ,
 "rótulo" : "2034"
 } ,
 {
 "valor" : "2035" ,
 "rótulo" : "2035"
 } ,
 { 
"valor" : "2036" ,
 "rótulo" : "2036"
 } ,
 {
 "valor" : "2037" ,
 "rótulo" : "2037"
 } ,
 { 
"valor" : "2038" ,
 "rótulo" : "2038"
 } ,
 {
 "valor" : "2039" ,
 "rótulo" : "2039"
 } ,
 { 
"valor" : "2040" ,
 "rótulo" : "2040"
 } ,
 {
 "valor" : "2041" ,
 "rótulo" : "2041"
 } ,
 { 
"valor" : "2042" ,
 "rótulo" : "2042"
 } ,
 {
 "valor" : "2043" ,
 "rótulo" : "2043"
 } ,
 { 
"valor" : "2044" ,
 "rótulo" : "2044"
 } ,
 {
 "valor" : "2045" ,
 "rótulo" : "2045"
 } ,
 { 
"valor" : "2046" ,
 "rótulo" : "2046"
 } ,
 {
 "valor" : "2047" ,
 "rótulo" : "2047"
 } ,
 { 
"valor" : "2048" ,
 "rótulo" : "2048"
 } ,
 {
 "valor" : "2049" ,
 "rótulo" : "2049"
 } ,
 { 
"valor" : "2050" ,
 "rótulo" : "2050"
 }
 ] ,
 "padrão" : "2024"
 } ,
 {
 "tipo" : "texto" , 
"id" : "hora" ,
 "rótulo" : "Hora" ,
 "padrão" : "09:00:52" ,
 "info" : "Segue formato de hora HH:MM:SS. Ex: 09:00:52"
 } ,
 {
 "tipo" : "selecionar" , 
"id" : "am_pm" ,
 "info" : "O fuso horário é igual ao fuso horário da loja Shopify" ,
 "opções" : [
 {
 "valor" : "AM" ,
 "rótulo" : "SOU"
 } , 
{
 "valor" : "PM" ,
 "rótulo" : "PM"
 }
 ] ,
 "padrão" : "AM" ,
 "rótulo" : "AM/PM"
 } ,
 { 
"tipo" : "cor" ,
 "id" : "text_color" ,
 "label" : "Cor do texto" ,
 "padrão" : "#fff"
 } ,
 {
 "tipo" : "cor" , 
"id" : "cor_de_fundo" ,
 "label" : "Cor de fundo" ,
 "padrão" : "#111"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "contagem_texto" , 
"label" : "Cor de dias/horas/minutos/segundos" ,
 "padrão" : "#fff"
 }
 ]
 }
 ] ,
 "predefinições" : [
 {
 "name" : "Seção de contagem regressiva"
 }
 ]
 } 
{ % termina o esquema % }

 classe CountdownSection estende HTMLElement {
 construtor ( ) {
 super ( ) ; 
esse . targetDate = nova data ( this.dataset.date ) ; _
 esse . iniciar ( ) ;
 }
 iniciar ( ) { 
const t = setInterval ( ( ) => {
 const e = isto . updateAllSegments ( ) ;
 se ( e ) {
 clearInterval ( t ) ;
 } 
} , 1e3 ) ;
 }
 atualizarSegmentValues ​​( e , t , n ) {
 e. conteúdotexto = n ;
 t. conteúdotexto = n ;
 }
 getTimeSegmentElements ( e ) { 
const t = e. querySelector ( ".cartão de contagem regressiva" ) ;
 constante n = t. querySelector ( ".countdown-card__top" ) ;
 const o = t. querySelector ( ".countdown-card__bottom" ) ; 
const s = t. querySelector ( ".countdown-overlay" ) ;
 const eu = s. querySelector ( ".countdown-overlay__top" ) ;
 const a = s. querySelector ( ".countdown-overlay__bottom" ) ; 
retornar {
 segmentDisplayTop : n ,
 segmentDisplayBottom : o ,
 sobreposição de segmento : s ,
 segmentOverlayTop : eu ,
 segmentOverlayBottom : a ,
 } ;
 }
 updateTimeSegment ( e , t ) { 
const n = isto . getTimeSegmentElements ( e ) ;
 if ( parseInt ( n. segmentDisplayTop . textContent , 10 ) === t ) {
 retornar ;
 } 
e. querySelector ( ".countdown-overlay" ) . lista de classes . adicionar ( "virar" ) ;
 esse . updateSegmentValues ​​( n. segmentDisplayTop , n. segmentOverlayBottom , t ) ;
 n. sobreposição de segmento . addEventListener ( 
"fim da animação" ,
 esse . terminarAnimação . vincular ( este , n , t )
 ) ;
 }
 terminarAnimação ( e , t ) { 
esse . updateSegmentValues ​​( e. segmentDisplayBottom , e. segmentOverlayTop , t ) ;
 e. sobreposição de segmento . lista de classes . remover ( "virar" ) ; 
esse . removeEventListener ( "animationend" , this ) ;
 }
 updateTimeSection ( e , t ) {
 const n = matemática. piso ( t / 10 ) || 0 ; 
const o = t % 10 || 0 ;
 consts = documento. getElementById ( e ) ;
 const eu = s. querySelectorAll ( ".segmento de tempo" ) ; 
se ( t <= 0 ) {
 if ( e == "dias" || e == "horas" ) {
 S. estilo . exibir = "nenhum" ;
 }
 } 
esse . updateTimeSegment ( i [ 0 ] , n ) ;
 esse . updateTimeSegment ( i [ 1 ] , o ) ;
 }
 getTimeRemaining ( e ) { 
const t = Data. agora ( ) ;
 const n = t >= e ;
 se ( n ) { 
return { completo : n , segundos : 0 , minutos : 0 , horas : 0 , dias : 0 } ;
 } 
const o = matemática. andar ( ( e - t ) / 1e3 ) ;
 consts = matemática. andar ( o / 86400 ) % 24 ; 
const i = matemática. piso ( o / 3600 ) % 24 ;
 const a = matemática. piso ( o / 60 ) % 60 ;
 const m = o % 60 ; 
return { completo : n , segundos : m , minutos : a , horas : i , dias : s } ;
 }
 atualizarTodosSegmentos ( ) { 
const e = isto . getTimeRemaining ( new Date ( this.targetDate ) .getTime ( ) ) ; 
esse . updateTimeSection ( "segundos" , por exemplo segundos ) ;
 esse . updateTimeSection ( "minutos" , por exemplo minutos ) ; 
esse . updateTimeSection ( "horas" , por exemplo horas ) ;
 esse . updateTimeSection ( "dias" , por exemplo dias ) ;
 retornar e. completo ;
 }
 } 
elementos personalizados. define ( "seção de contagem regressiva" , CountdownSection ) ;