body{
font-family: 'DM Sans', sans-serif;
box-sizing: border-box;
}
.container{
width: 640px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: auto;
}
.lineas-container{
margin-top: 20px;
margin-bottom: 49px;
display: flex;
flex-direction: row;
width: 640px;
height: 60px;
background-color: rgb(209, 194, 238);
border-radius: 15px;
}
.linea-btn{
flex-basis: 25%;
background-color: transparent;
border: none;
color: rgb(63, 0, 186);
cursor: pointer;
}
.linea-btn:hover{
background-color: rgb(63, 0, 186);
color: #fff;
border-radius: 15px;
}
.datos{
display: flex;
flex-direction: row;
width: 100%;
margin-top: 21px;
margin-bottom: 32px;
font-size: 14px;
}
.datos-flex{
display: flex;
flex-direction: column;
align-items: center;
}
.datos-span{
color: rgb(209, 194, 238);
}
.datos-light{
flex-basis: 20%;
}
.datos-heavy{
flex-basis: 30%;
}
.datos-moderado{
flex-basis: 30%;
}
.datos-extremely{
flex-basis: 20%;
}
.datos-span-cantidad{
color: rgb(138, 142, 146);
}
.input-range{
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
}
.titles{
font-size: 18px;
font-weight: 400;
}
.textButtons{
font-size: 18px;
font-weight: 700;
}
#uso-datos{
margin: 0;
z-index: 2;
-webkit-appearance: none;
outline: none;
width: 100%;
height: 20px;
border-radius: 15px;
background-image: linear-gradient(to right, rgb(209, 194, 238) calc(var(--value)*1.3%), rgb(216, 216, 216) 0);
}
#uso-datos::-webkit-slider-thumb{
-webkit-appearance: none;
height: 40px;
width: 40px;
border-radius: 15px;
background: rgb(63, 0, 186);
cursor: pointer;
}
#uso-datos::-moz-range-thumb{
-moz-appearance: none;
height: 40px;
width: 40px;
border-radius: 15px;
background: rgb(63, 0, 186);
cursor: pointer;
}
.etiqueta {
margin-top: 30px;
width: 75px;
height: 35px;
position: relative;
z-index: 9;
background-color: #fff;
color: rgb(63, 0, 186);
border: 1px solid rgb(216, 216, 216);
font-size: 15px;
font-weight: bold;
text-align: center;
padding-top: 9px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.28);
}
.etiqueta:after {
top: -38px;
right: -30px;
content: '';
display: block;
width: 15px;
height: 15px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 1;
background-color: #fff;
position: relative;
border-left: 1px solid rgb(216, 216, 216);
border-top: 1px solid rgb(216, 216, 216);
}
.ayuda-uso{
margin-top: 41px;
width: 488px;
}
.desplegar-texto{
height: 50px;
display: flex;
align-items: center;
}
.desplegar-texto span{
font-size: 16px;
font-weight: 700;
}
#btn-desplegar{
cursor: pointer;
height: 25px;
width: 25px;
}
.desplegable-btn{
width: 198px;
height: 46px;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
border-radius: 10px;
border: 0.5px solid rgb(128, 128, 128);
cursor: pointer;
outline: none;
}
.desplegable-btn:hover{
background-color: #fff;
}
.desplegable-btn:focus{
background-color: #fff;
}
.desplegable-btn svg{
background-color: #fff;
}
.desplegable-btn span{
background-color: #fff;
color:#000;
}
.desplegable-btn span:hover{
color: #3F00BA;
}
.desplegable-grid{
display: grid;
grid-template-columns: 51% 49%;
grid-template-rows: 86px auto auto auto auto;
padding: 40px;
border-radius: 20px;
background-color: #fff;
box-shadow: 0px 2px 32px -5px rgba(0,0,0,0.75);
height: 404px;
box-sizing: border-box;
margin-top: 35px;
}
#opciones{
grid-column: 1/3;
background-color: #fff;
font-size: 18px;
font-weight: normal;
}
.precios-container{
display: flex;
flex-direction: row;
width: 640px;
height: 75px;
background-color: rgb(209, 194, 238);
border-radius: 15px;
}
.precio-btn{
flex-basis: 34%;
background-color: transparent;
border: none;
color: rgb(63, 0, 186);
cursor: pointer;
font-size: 18px;
outline: none;
}
.precio-btn:hover{
background-color: rgb(63, 0, 186);
color: #fff;
border-radius: 15px;
}
#submit{
background-color: rgb(63, 0, 186);
color: #fff;
border-radius: 7px;
border: none;
width: 331px;
font-size: 18px;
height: 49px;
cursor: pointer;
margin-top: 40px;
}
.span-precio{
margin-top: 54px;
margin-bottom: 43px;
}
@media screen and (max-width: 748px) {
.container{
width: 500px;
}
.lineas-container{
width: 500px;
}
.precios-container{
width: 500px;
}
.ayuda-uso{
width: 500px;
}
.desplegable-btn{
width: 190px;
}
#submit{
width: 250px;
}
.datos{
font-size: 12px;
}
.input-range{
width: 100%;
}
.datos-light{
flex-basis: 15%;
}
.datos-moderado{
flex-basis: 35%;
}
#rango-1, #rango-2, #rango-3{
font-size: 12px;
}
}
@media screen and (max-width: 520px) {
.container{
width: 300px;
}
.lineas-container{
width: 300px;
}
.precios-container{
width: 300px;
}
.ayuda-uso{
width: 300px;
}
.desplegable-grid{
padding: 20px;
}
.desplegable-btn svg{
display: none;
}
.desplegable-btn{
width: 110px;
font-size: 12px;
}
}
.modal{
height: 100vh;
width: 100vw;
left: 0;
top: 0;
background-color: #ffffff;
position: fixed;
z-index: 200;
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
}
.modal h2{
color: rgb(105,55,201);
font-weight: 100;
}
.planRecomendado{
height: 450px;
width: 300px;
background-color: #fff;
border-radius: 15px;
box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.28);
}
.plan{
display: flex;
flex-direction: column;
font-size: 15px;
height: 100px;
background: rgb(105,55,201);
background: linear-gradient(270deg, rgba(105,55,201,1) 15%, rgba(69,8,188,1) 66%);
color: #fff;
border-radius: 15px;
justify-content: space-evenly;
align-items: center;
}
#gbTitle{
font-size: 50px;
font-weight: bold;
}
#gbTitle2{
font-size: 50px;
font-weight: bold;
}
.plan-2{
display: flex;
flex-direction: column;
height: 77%;
align-items: center;
justify-content: space-evenly;
}
.precio-plan{
color: rgb(63, 0, 186);
font-weight: bold;
display: flex;
flex-direction: row;
}
.precioGB{
font-size: 70px;
}
.mxn{
align-self: flex-end;
}
.iconPrecio{
padding-top: 10px;
}
#cerrarModal{
border: none;
background-color: rgb(63, 0, 186);
color: #fff;
padding: 10px;
border-radius: 15px;
cursor: pointer;
width: 150px;
margin-top: 10px;
}
#pack{
color: rgb(141, 141, 141);
}
Su plan recomendado es
5G · 4.5G LTE DATA
GB /MES
$
/MXN
Minutos y SMS ilimitados
Cobertura MEX, EUA y Canada
GB de 5G-4G LTE Internet para compartir
Vigencia 30 días
Aceptar
¿Cuántas líneas necesitas?
1
2
3
4
¿Qué tantos datos usas por línea al mes?
Light
0-4 GB/mo
Moderado
5-10 GB/mo
Heavy
11-15 GB/mo
Extremely Heavy
15+ GB/mo
¿No estás seguro? Te podemos ayudar.
Selecciona las opciones donde usas más tus datos sin estar conectado a WiFi:
Navegación Web
Música
Redes sociales
YouTube
Mapas
Juegos
Videoconferencia
Películas/TV
¿Cuánto pagas por servicio de telefonía móvil al mes?
$300-$600
$600-$1000
$1000+
Ver Plan Recomendado
var $slider = document.getElementById("uso-datos");
var $btnLine1 = document.getElementById("linea-1");
var $btnLine2 = document.getElementById("linea-2");
var $btnLine3 = document.getElementById("linea-3");
var $btnLine4 = document.getElementById("linea-4");
var $datos1 = document.querySelector(".datos-span1");
var $datosCantidad1 = document.querySelector(".datos-span-cantidad1");
var $datos2 = document.querySelector(".datos-span2");
var $datosCantidad2 = document.querySelector(".datos-span-cantidad2");
var $datos3 = document.querySelector(".datos-span3");
var $datosCantidad3 = document.querySelector(".datos-span-cantidad3");
var $datos4 = document.querySelector(".datos-span4");
var $datosCantidad4 = document.querySelector(".datos-span-cantidad4");
var $inputRange = document.querySelector(".input-range");
var $etiqueta = document.querySelector(".etiqueta");
var opcionesbtn1 = document.querySelector(".btn1");
var opcionesbtn2 = document.querySelector(".btn2");
var opcionesbtn3 = document.querySelector(".btn3");
var opcionesbtn4 = document.querySelector(".btn4");
var opcionesbtn5 = document.querySelector(".btn5");
var opcionesbtn6 = document.querySelector(".btn6");
var opcionesbtn7 = document.querySelector(".btn7");
var opcionesbtn8 = document.querySelector(".btn8");
var desplegarbtn = document.getElementById("btn-desplegar");
var desplegarOpciones = document.querySelector(".desplegable-grid");
var btnprecio1 = document.getElementById("rango-1");
var btnprecio2 = document.getElementById("rango-2");
var btnprecio3 = document.getElementById("rango-3");
var submitbtn = document.getElementById("submit");
var $planGb = document.querySelector(".planGB");
var $planGb2 = document.querySelector(".planGB-2");
var $modal = document.querySelector(".modal");
var $precioGb = document.querySelector(".precioGB");
var $extra = document.getElementById("extra");
var $pack = document.getElementById("pack");
var $cerrarModal = document.getElementById("cerrarModal");
var planGB = 0;
var btnpreciobo1 = false;
var btnpreciobo2 = false;
var btnpreciobo3 = false;
var desplegadoOpciones = false;
var opcionesbtnbo1 = false;
var opcionesbtnbo2 = false;
var opcionesbtnbo3 = false;
var opcionesbtnbo4 = false;
var opcionesbtnbo5 = false;
var opcionesbtnbo6 = false;
var opcionesbtnbo7 = false;
var opcionesbtnbo8 = false;
var btnline1 = false;
var btnline2 = false;
var btnline3 = false;
var btnline4 = false;
var valueOpciones = 0;
function colorBtnOption(btno){
btno.style.border = "2px solid rgb(63, 0, 186)";
}
function colorBtnOptionReset(btno){
btno.style.border = "1px solid rgb(128, 128, 128)";
}
function colorBtn(btn){
btn.style.backgroundColor = "rgb(63, 0, 186)"
btn.style.color = "#fff"
btn.style.borderRadius = "15px"
}
function colorBtnNormal(btn){
btn.style.backgroundColor = "rgb(209, 194, 238)"
btn.style.color = "rgb(63, 0, 186)"
btn.style.borderRadius = "15px"
}
function colorSlider(span, cantidad){
span.style.color = "rgb(62, 0, 185)";
cantidad.style.color = "rgb(0, 0 , 0)";
}
function colorSliderReset(spanReset, cantidadReset){
spanReset.style.color = "rgb(209, 194, 238)";
cantidadReset.style.color = "rgb(138, 142, 146)";
}
function slider(){
let sliderValue = $slider.value*25;
$slider.style.setProperty("--value", sliderValue);
let pageWidth = document.documentElement.scrollWidth;
if ($slider.value==0){
colorSliderReset($datos2, $datosCantidad2);
colorSlider($datos1, $datosCantidad1);
$etiqueta.innerHTML = "0-4GB";
if (pageWidth<504){
$etiqueta.style.left = "-5%";
}else{
$etiqueta.style.left = "-2%";
}
}else if($slider.value==1){
colorSliderReset($datos1, $datosCantidad1);
colorSliderReset($datos3, $datosCantidad3);
colorSlider($datos2, $datosCantidad2);
$etiqueta.innerHTML = "5-10GB";
if(pageWidth504){
$etiqueta.style.left = "27%"
}else if(pageWidth<504){
$etiqueta.style.left = "24%"
}else{
$etiqueta.style.left = "29%"
}
}else if($slider.value==2){
colorSliderReset($datos4, $datosCantidad4);
colorSliderReset($datos2, $datosCantidad2);
colorSlider($datos3, $datosCantidad3);
$etiqueta.innerHTML = "11-15GB";
if (pageWidth504){
$etiqueta.style.left = "58%";
}else if(pageWidth<504){
$etiqueta.style.left = "52%";
}else{
$etiqueta.style.left = "60%";
}
}else if($slider.value==3){
colorSliderReset($datos3, $datosCantidad3);
colorSlider($datos4, $datosCantidad4);
$etiqueta.innerHTML = "+15GB";
if(pageWidth504){
$etiqueta.style.left = "87%";
}else if(pageWidth=1&valueOpciones=5&valueOpciones10&valueOpciones15){
$slider.value = 3;
slider();
}
if ($slider.value==0){
planGB = 5;
$planGb.innerHTML = planGB;
$planGb2.innerHTML = planGB;
$precioGb.innerHTML = 140;
$extra.remove();
$pack.innerHTML = "$600 por 6 meses de servicio";
}else if($slider.value==1){
planGB = 8;
$planGb.innerHTML = planGB;
$planGb2.innerHTML = planGB;
$precioGb.innerHTML = 180;
$extra.remove();
$pack.innerHTML = "";
}else if($slider.value==2){
planGB = 20;
$planGb.innerHTML = planGB;
$planGb2.innerHTML = planGB;
$precioGb.innerHTML = 240;
$extra.innerHTML = planGB+"GB extra en velocidad reducida";
$pack.innerHTML = "$599 por 3 meses de servicio";
}else if($slider.value==3){
planGB = 50;
$planGb.innerHTML = planGB;
$planGb2.innerHTML = planGB;
$precioGb.innerHTML = 550;
$extra.innerHTML = planGB+"GB extra en velocidad reducida";
$pack.innerHTML = "";
}
$modal.style.display = "flex";
});
$cerrarModal.addEventListener("click", function(){
$modal.style.display = "none";
})
window.addEventListener("resize", slider);
