<?php $id = $pagina[1]; $seccion = $pagina[3]; $color = ''; $circulo = ''; if ($id % 2 == 0) { $color = "#a62b4e"; $circulo = 'img_wd/circulo.png'; } else { $color = "#a62b4e"; $circulo = 'img_wd/circulo.png'; } ?> <style> body { background-size: cover; background-position: center; background-attachment: inherit; background-image: url(<?php echo $url; ?>/img/img_wd/bg_dia.png); } </style> <div class="container" style="margin-bottom: 150px"> <div class="row"> <div class="col-md-12" align="center" style="padding-left: 50px; padding-right: 50px;"> <div class="row" style="margin-top: 20px; margin-bottom: 20px"> <div class="col-md-12 "> <?php if ($id == 1) { echo ' <h2 class="ti_grupo">20 DE ABRIL</h2> '; } if ($id == 2) { echo ' <h2 class="ti_grupo">21 DE ABRIL</h2> '; } if ($id == 3) { echo ' <h2 class="ti_grupo">22 DE ABRIL</h2> '; } if ($id == 4) { echo ' <h2 class="ti_grupo">23 DE ABRIL</h2> '; } ?> </div> <!-- INCIA LA AGENDA --> <?php $count = 0; $queryGroup = mysqli_query($connect, "select * from Agenda where dia='" . $id . "' and id_evento=" . $seccion . " and estado=1; "); /* while($dataG = mysqli_fetch_array($queryGroup)){ $dia_tx = explode("-", $dataG["fecha"]); $mes_tx = Mes_Text($dia_tx[1], $array_mes); echo ' <div style=" width: 100%; display: none "> <div class="ti_dia" style="color:'.$color.'">'.$dia_tx[2].' de '.$mes_tx.'</div> </div> '; */ $query = mysqli_query($connect, "select * from Agenda where dia='" . $id . "' and id_evento=" . $seccion . " and estado=1; "); while ($data = mysqli_fetch_array($query)) { $link = ''; if ($data["evidencias"] != "") { $link = ' <div style="text-align: right;"> <a href="' . $data["evidencias"] . '" target="_blank"> <button type="button" class="btn btn-warning btn-sm" style="font-size: 11px; margin-top: 5px; background-color: #fff500; border: 0px;" > Ir al Taller </button> </a> </div> '; } $ficha_iz = ''; $ficha_dr = ''; if ($data["tipo"] == 1 || $data["tipo"] == 2) { $ficha_iz = ' <div> <table width="100%" class="ficha_contenido" style="background-color: ' . $color . ';"> <tr> <td style=" line-height: 16px; padding: 10px; padding-left: 30px;"> <b>' . $data["actividad"] . '</b><br> <div>' . $data["exponentes"] . '</div><br> <div style="color: #fff500;"><b>Encargado:</b> ' . ''/* $data["encargado"] */ . '</div> <div class="e_movil"> ' . $data["hora_inicia"] . ' - ' . $data["hora_termina"] . ' </div> ' . $link . ' </td> </tr> </table> </div> '; $ficha_dr = ' <div > <table width="100%" class="ficha_contenido" style="background-color: ' . $color . ';"> <tr> <td style=" line-height: 16px; padding: 10px; padding-left: 30px;"> <b>' . $data["actividad"] . '</b><br> <div>' . $data["exponentes"] . '</div><br> <div style="color: #fff500;"><b>Encargado:</b> ' . ''/* $data["participantes"] */ . '</div> <div class="e_movil"> ' . $data["hora_inicia"] . ' - ' . $data["hora_termina"] . ' </div> ' . $link . ' </td> </tr> </table> </div> '; } if ($data["tipo"] == 3) { $ficha_iz = ' <div> <table width="100%" class="ficha_contenido" style="background-color: #ffea00;"> <tr> <td style=" line-height: 16px; padding: 10px; padding-left: 30px;"> <div style="color: ' . $color . '; font-size: 20px; margin: 20px 10px;"> <b>' . $data["actividad"] . '</b> </div> </td> </tr> </table> </div> '; $ficha_dr = ' <div > <table width="100%" class="ficha_contenido" style="background-color: #ffea00;"> <tr> <td style=" line-height: 16px; padding: 10px; padding-left: 30px;"> <div style="color: ' . $color . '; font-size: 27px; margin: 20px 10px;"> <b>' . $data["actividad"] . '</b> </div> </td> </tr> </table> </div> '; } $iz = ''; $dr = ''; if ($count == 0) { $iz = '<img src="' . $url . '/img/linea_dotted.png" width="80" style="margin-top: 36px; margin-bottom: -50px; margin-left: -50px; position: relative; z-index: -1;">'; $iz .= $ficha_iz; } if ($count == 1) { $dr = '<img src="' . $url . '/img/linea_dotted_iz.png" width="80" style="margin-top: 36px; margin-bottom: -50px; margin-right: -50px; position: relative; z-index: -1;">'; $dr .= $ficha_dr; } echo ' <div class="col-md-5 izquierda e_web" align="right" "> ' . $dr . ' </div> <div class="col-md-2 e_web" align="center" > <div class="circulo"> ' . $data["hora_inicia"] . '<br> ' . $data["hora_termina"] . ' </div> </div> <div class="col-md-5 derecha e_web" align="left" > ' . $iz . ' </div> <div class="col-md-12 e_movil" align="center" style="margin-bottom: 10px;"> ' . $dr . ' ' . $iz . ' </div> '; $count++; if ($count > 1) { $count = 0; } } /* } */ ?> </div> </div> </div> <div class="row"> <div class="col-6" align="right"> <a href="<?php echo $url; ?>/agenda/<?php echo $seccion; ?>"> <img src="<?php echo $url; ?>/img/img_wd/bt_back.png" width="100" style="width: 180px; z-index: 5;" class="e_web"> </a> </div> <div class="col-6" align="left"> <a href="<?php echo $url; ?>/secciones"> <img src="<?php echo $url; ?>/img/img_wd/bt_back.png" width="100" style="width: 180px; z-index: 5;" class="e_web"> </a> </div> </div> </div> <style> .ti_grupo { margin-top: 10px; color: #000; font-weight: bold; } .ti_dia { color: #000; background-color: #FFF500; display: inline-block; padding: 8px 30px; margin-bottom: 20px; margin-top: 20px; font-size: 22px; font-weight: bold; } .inputs { margin-bottom: 5px; } label { color: #006cc1; font-weight: bold; margin-bottom: 0px; margin-top: 5px; } .ficha_agenda { background-color: #fff; width: 150px; border-radius: 20px; overflow: hidden; text-align: center; margin-bottom: -5px; transform: scale(0.9); transition: 0.5s all; display: inline-table; color: #062a3c; } .ficha_agenda:hover { transform: scale(1); } .ti_ficha_agenda { background-color: #109CCE; color: #fff; padding: 6px; font-weight: bold; font-size: 18px; border-radius: 30px; } .ficha_evento { width: 100%; background-color: <?php echo $color; ?>; border-radius: 17px; padding: 2px; } .ficha_contenido { background-color: #00b08c; border-radius: 15px; font-size: 14px; color: #fff; } .circulo { text-align: center; font-size: 12px; width: 100px; height: 90px; color: #a62b4e; border-radius: 50px; display: table-cell; vertical-align: middle; background-position: center; background-repeat: no-repeat; background-size: 70%; background-image: url(<?php echo $url; ?>/img/<?php echo $circulo; ?>); } .actividad { padding: 10px 20px; line-height: 14px; padding-top: 0px; height: 50px; } .foto { width: 67px; height: 67px; background-size: cover; background-position: center; border-radius: 30px; margin: 10px; display: inline-table; } .dias_mod { margin-top: 45%; } @media (max-width: 780px) { .dias_mod { margin-top: 25px; } } </style> <script> $(document).ready(function() { if ($(window).width() < 800) { $(".ficha_evento").css("width", "100%"); } if ($(window).width() > 800) { $(".ficha_evento").css("width", "100%"); } $("#ficha_<?php echo $id; ?>").css("box-shadow", "0px 0px 26px #00BCD4"); }); $(document).ready(function() { if ($(window).width() < 800) { $(".ficha_evento").css("width", "100%"); } if ($(window).width() > 800) { $(".ficha_evento").css("width", "100%"); } }); /* $( document ).ready(function() { } if( $(window).width() < 800 ){ $( ".ficha_evento" ).css( "width" , "100%" ); } if( $( window ).width() > 800 ){ $( ".ficha_evento" ).css( "width" , "80%" ); } if( $(window).width() < 800 ){ $(".izquierda").prop( "align", "center" ); $(".derecha").prop( "align", "center" ); } if( $( window ).width() > 800 ){ $(".izquierda").prop( "align", "right" ); $(".derecha").prop( "align", "left" ); } }); $( window ).resize(function() { if( $( window ).width() < 800 ){ $(".izquierda").prop( "align", "center" ); $(".derecha").prop( "align", "center" ); } if( $( window ).width() > 800 ){ $(".izquierda").prop( "align", "right" ); $(".derecha").prop( "align", "left" ); } }); */ </script>