<?php
    /* Contador de visitas a la pagina Autor: Junior Yauricasa Fecha: 15/05/2017 */
    $archivo = "contador.txt";
    $contador = 0;
    $fp = fopen($archivo,"r");
    $contador = fgets($fp, 26);
    fclose($fp);
    ++$contador;
    $fp = fopen($archivo,"w+");
    fwrite($fp, $contador, 26);
    fclose($fp);
    //echo "Tu Página ha sido visitada $contador veces";

    /*
        Resultado, (fecha actual 21/09/2012):
        Viernes, 21 de Septiembre del 2012
    */
    $arrayMeses = array('Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
   'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre');

    $arrayDias = array( 'Domingo', 'Lunes', 'Martes',
       'Miercoles', 'Jueves', 'Viernes', 'Sabado');

    $arrayDias[date('w')].", ".date('d')." de ".$arrayMeses[date('m')-1]." del ".date('Y');

?>

<style>
.card {
    font-size: 1em;
    overflow: hidden;
    padding: 0;
    border: none;
    border-radius: .28571429rem;
    box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
}

.card-block {
    font-size: 1em;
    position: relative;
    margin: 0;
    padding: 1em;
    border: none;
    border-top: 1px solid rgba(34, 36, 38, .1);
    box-shadow: none;
}

.card-img-top {
    display: block;
    width: 100%;
    height: auto;
}

.card-title {
    font-size: 1.28571429em;
    font-weight: 700;
    line-height: 1.2857em;
}

.card-text {
    clear: both;
    margin-top: .5em;
    color: rgba(0, 0, 0, .68);
}

.card-footer {
    font-size: 1em;
    position: static;
    top: 0;
    left: 0;
    max-width: 100%;
    padding: .75em 1em;
    color: rgba(0, 0, 0, .4);
    border-top: 1px solid rgba(0, 0, 0, .05) !important;
    background: #fff;
}

.card-inverse .btn {
    border: 1px solid rgba(0, 0, 0, .05);
}

</style>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
    setInterval(function(){
        $("#screen").load('contador.txt')
    }, 1000);
});
</script>

<div class="container" style="margin-top: 10px">
    <div class="row">
        <div class="row mb-5">
            <div class="col-sm-6 col-md-4 col-lg-3 mt-4">
                <div class="card card-inverse card-primary ">
                    <img class="card-img-top" src="http://www.codewithcoffee.com/wp-content/uploads/2016/04/04-twitter-bell-animation.gif">
                    <div class="card-block">
                        <h4 class="card-title">Contador de Visitas</h4>
                        <!--div class="meta">
                            <a href="#">Facebook</a>
                        </div-->
                        <div class="card-text">
                            Se han realizado <span id="screen"></span> visitas a <b><a href="http://hyodelivery.com">hyodelivery</a></b>.
                        </div>
                    </div>
                    <div class="card-footer">
                        <span class="float-right">
                            <b>
                                <?php echo $arrayDias[date('w')].", ".date('d')." de ".$arrayMeses[date('m')-1]." de ".date('Y'); ?>
                            </b>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>