@extends('layouts.base')

@section('css')
{!! Minify::stylesheet('/css/study.css')->withFullUrl() !!}
{!! Minify::stylesheet('/css/studyStarred.css')->withFullUrl() !!}
@stop

@section('title')
Video Tutorial
@stop
@section('description')
Video Tutoriales para almun@s que son padres o madres para acceder a la plataforma de educación de la Consejería
@stop

@section('content')
{!! Breadcrumbs::render('study') !!}


<div class="container"> 
    <div class="titulo_categoria">
        <p style="font-size:32px; text-align:center; line-height: 0.8;">Plataforma educativa de la</p>
	<p style="font-size:32px; text-align:center; line-height: 0.8;">Consejería de Educación de Canarias</p>
    </div>

    <br>

    <!-- 1ra columna -->
    <div class="col-md-12">

	<!-- 1ra fila de la 1ra columna -->
	<div class="row">
            <div class="titulo">
               Vídeo Tutoriales para padres o madres
            </div>
	</div>

	<!-- 2da fila de la 1ra columna -->
        <div class="row">

	    <!-- espaciar 1 columna (de 12)
	    <div class="col-md-1"> </div>
	    -->

	    <!-- usar 9 columnas para el contenido (de 12) -->
	    <div class="col-md-9">

	        <!-- 1er video -->
                <div class="col-md-12">
                    <div class="image-substitute-wrapper">
                        <h3>
		            <a href="https://youtu.be/R4YBtIzBJjU" class="image-substitute" target="_blank">
                            Pinche aquí para ver el vídeo tutorial sobre cómo acceder a la plataforma
                            </a>
                        </h3>
                    </div>
                    <div class="caption">
                        <p style="text-align: justify">Vídeo tutorial dirigido a nuestros alumnos/as que son padres y madres de escolares para conocer cómo acceder y usar la plataforma educativa de la Consejería de Educación y así poder ayudar a sus hijos/as en la gestión de sus deberes, la comunicación con su profesorado, etc. </p>
                    </div>
                </div>

	        <!-- 2do video -->
	        <div class="col-md-12">
                    <div class="image-substitute-wrapper">
                        <h3>
		            <a href="https://youtu.be/ikmpo0CzDPM" class="image-substitute" target="_blank">
                            Pinche aquí para ver el vídeo tutorial sobre los recursos educativos de la web para familias
                            </a>
                        </h3>
                    </div>
                    <div class="caption">
                        <p class="text-justify">Vídeo tutorial dirigido a nuestros alumnos/as que son padres y madres de escolares para conocer qué recursos ofrece la Consejería de Educación a las familias en estos tiempos de confinamiento por el COVID-19. </p>
                   </div>
                </div>

	        <!-- 5 audios -->
	        <div class="col-md-12">

                    <div class="image-substitute-wrapper">
                        <h3>Pinche en cualquiera de los siguientes enlaces para oír su contenido</h3>
                    </div>

                    <div class="caption">
                        <p class="text-justify">Le ofrecemos cinco podcasts con información interesante sobre recursos y herramientas de la Consejería de Educación para las familias.</p>
                    </div>

		    <!-- audio-1 -->
		    <div class="col-md-3" style="border:2px solid green; margin:5px">
		        <p style="font-size:14px; color:Darkred;">
			    Recursos y herramientas de la Consejería de Educación para las familias
			</p>
		        <center>
		            <a class="btn btn-large btn-primary" href="{{ asset('files/CEGC-pildora-01.mp3') }}" target="_blank">
		            Oír audio
		            </a>
			</center>
		        <br>
		    </div>

		    <!-- audio-2 -->
		    <div class="col-md-3" style="border:2px solid green; margin:5px">
		        <p style="font-size:14px; color:Darkred;">
		            Estrategias de organización del tiempo de estudio
		        </p>
		        <center>
		            <a class="btn btn-large btn-primary" href="{{ asset('files/CEGC-pildora-02.mp3') }}" target="_blank">
		            Oír audio
		            </a>
			</center>
		        <br>
		    </div>
		    <!-- audio-3 -->
		    <div class="col-md-3" style="border:2px solid green; margin:5px">
		        <p style="font-size:14px; color:Darkred;">
			    Relaciones entre la familia y el centro educativo
		        </p>
		        <center>
		            <a class="btn btn-large btn-primary" href="{{ asset('files/CEGC-pildora-03.mp3') }}" target="_blank">
		            Oír audio
		            </a>
			</center>
		        <br>
		    </div>
		    <!-- audio-4 -->
		    <div class="col-md-3" style="border:2px solid green; margin:5px">
		        <p style="font-size:14px; color:Darkred;">
			    Dónde encontrar información fiable sobre el Covid-19
		        </p>
		        <center>
		            <a class="btn btn-large btn-primary" href="{{ asset('files/CEGC-pildora-04.mp3') }}" target="_blank">
		            Oír audio
		            </a>
			</center>
		        <br>
		    </div>
		    <!-- audio-5 -->
		    <div class="col-md-3" style="border:2px solid green; margin:5px">
		        <p style="font-size:14px; color:Darkred;">
			    Guía para enseñar y aprender desde casa
		        </p>
		        <center>
		            <a class="btn btn-large btn-primary" href="{{ asset('files/CEGC-pildora-05.mp3') }}" target="_blank">
		            Oír audio
		            </a>
			</center>
		        <br>
		    </div>

                </div>

	    </div>

	<!-- fin 2da fila de la 1ra columna -->
	</div>

    <!-- fin de la 1ra columna -->
    </div>

<!-- Fin del container-->
</div>

<div class="spacer"></div>
<div class="image-viewer hide">
    <img id="load-image" class="img-responsive">
</div>
@stop

@section('js-code-post')
{!! Minify::javascript('/js/custom.js')->withFullUrl() !!}

<script>
   $(".image-item").click(function (event) {
       event.preventDefault();
       var href = $(this).attr("href");
       $(".image-viewer").removeClass("hide");
       $("#load-image").attr("src", href);
   });
   $(".image-viewer").click(function () {
       $(this).addClass("hide");
   });
</script>
@stop