<?php $id = $pagina[1]; $color = ''; $circulo = ''; if ($id%2==0) { $color = "#006db7"; $circulo = 'circulo_azul.png'; } else{ $color = "#00b08c"; $circulo = 'circulo_verde.png'; } ?> <style> body{ background-size: cover; background-position: center; background-attachment: inherit; background-image: url(<?php echo $url; ?>/img/bg_internas_agenda.png); } </style> <a href="<?php echo $url; ?>/agenda"> <img src="<?php echo $url; ?>/img/bt_regresar.png" width="100" style="position: fixed; left: 50px; bottom: 120px; width: 180px; z-index: 5;" class="e_web"> </a> <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">PLENARIA - 18 DE ENERO</h2> '; } if( $id == 2 ){ echo ' <h2 class="ti_grupo">19 DE ENERO</h2> '; } if( $id == 3 ){ echo ' <h2 class="ti_grupo">20 DE ENERO</h2> '; } if( $id == 4 ){ echo ' <h2 class="ti_grupo">21 DE ENERO</h2> '; } ?> </div> <!-- INCIA LA AGENDA --> <?php $count = 0; $queryGroup = mysqli_query($connect,"SELECT * FROM Agenda WHERE dia = '".$id."' AND estado = 1 GROUP BY fecha ORDER BY id ASC "); 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 estado = 1 AND fecha = '".$dataG["fecha"]."' ORDER BY id ASC "); 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>Participantes:</b> '.$data["participantes"].'</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>Participantes:</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: 27px; 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> <style> .ti_grupo{ margin-top: 10px; color: #006db7; 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: #ffffff; border-radius: 50px; display: table-cell; vertical-align: middle; background-position: center; background-repeat: no-repeat; background-size: 90%; 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>