EVOLUTION-MANAGER

Edit File: folleto.blade.php

@php $route_public=""; @endphp

<!doctype html>

<head>

.btn{
			height: 100px;
			width: 100px;
			font-size: 50px;
			border-radius: 3px;
			background: #e0e5ec;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			-webkit-tap-highlight-color: rgba(0,0,0,0);
			-webkit-tap-highlight-color: transparent;
			box-shadow:
			-7px -7px 20px 0px #fff9,
			-4px -4px 5px 0px #fff9,
			7px 7px 20px 0px #0002,
			4px 4px 5px 0px #0001;
			transition:box-shadow 0.6s cubic-bezier(.79,.21,.06,.81);
			color: #1987c4;
			text-decoration: none;
		}

.texto{
			height: 100px;
			font-size: 50px;
			width: fit-content;
			border-radius: 3px;
			background: #e0e5ec;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			-webkit-tap-highlight-color: rgba(0,0,0,0);
			-webkit-tap-highlight-color: transparent;
			box-shadow:
			-7px -7px 20px 0px #fff9,
			-4px -4px 5px 0px #fff9,
			7px 7px 20px 0px #0002,
			4px 4px 5px 0px #0001;
			transition:box-shadow 0.6s cubic-bezier(.79,.21,.06,.81);
			-webkit-box-shadow: inset 0px 0px 21px 3px rgba(0,0,0,0.21); 
			box-shadow: inset 0px 0px 21px 3px rgba(0,0,0,0.21);
			color: #000;
			text-decoration: none;
			user-select: none;
			padding: 0px 15px;
			margin: 0px 20px;
		}

.btn:hover{
			background: radial-gradient(circle,  #0ff 0%, #e0e5ec 60%);
			color: rgba(102,102,102,.5); 
			animation: colorchange 3s linear infinite;
		}
		.btn:active{
			box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
						-4px -4px 6px 0 rgba(116, 125, 136, .2), 
				inset -4px -4px 6px 0 rgba(255,255,255,.5),
				inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
		}

.boton_regresar{
			position: absolute; 
			bottom: 0; 
			right: 0; 
			margin: 0px 30px 60px 0px
		}

@media (min-width: 1100px) {
			.frame{
				height: 60px;
			}
			.btn{
				height: 40px;
				width: 40px;
				font-size: 26px;
			}
			.texto{
				height: 40px;
				font-size: 26px;
			}

.boton_regresar{
				position: absolute; 
				top: 0; 
				left: 0; 
				margin: 10px 0px 0px 10px
			}

}

@keyframes colorchange {
			to {filter: hue-rotate(360deg);}
		}
	</style>

</head>
<body>

</center>

var a = 2068;
	var b = 1465;

var margin_left = 0;
	var restar = 50;

function posicionar_folleto(){

ancho = $(window).width()-restar;
		alto = $(window).height()-restar-$("#content_botones").height()-restar;

if(alto-ancho < 50){
			//valores conocidos (dimenciones reales de las imagenes en pixeles)
			// x = (b*c)/a #regla de tres
			var c = alto;
			var x = (b*c)/a;
			ancho = x;
			margin_left = (($(window).width()-ancho)/2)-25;
			$("#contenedor_todo").attr("style", $("#contenedor_todo").attr("style")+`margin-left: ${margin_left}px !important;`);
			// $(".flipbook").attr("style", $(".flipbook").attr("style")+`margin-left: ${margin_left}px !important;`);
		
		}
	}

function loadApp() {

//calculamos el ancho y alto
		var ancho = $(window).width()-restar;
		var alto = $(window).height()-restar-$("#content_botones").height()-restar;

if(alto-ancho < 50){
			//valores conocidos (dimenciones reales de las imagenes en pixeles)
			// x = (b*c)/a #regla de tres
			var c = alto;
			var x = (b*c)/a;
			ancho = x;
		}

// Create the flipbook

$('.flipbook').turn({
				// Width
				width: ancho,
				height: alto,
				// Elevation
				elevation: 50,
				// Enable gradients
				gradients: true,
				// Auto center this flipbook
				duration: 1200,
				autoCenter: true,
				diplay: 'single',
		});

$(".flipbook").turn("display", "single");

posicionar_folleto();

//inicializamos los contadores de paginas
		$("#texto_boton").html(`${$(".flipbook").turn("view")[0]} - ${$(".flipbook").turn("pages")}`);

//evento despues de cambiar una pagina
		$(".flipbook").bind("turning",function(event, page, obj){
			
			var actual = page;
			var total = $(".flipbook").turn("pages");		
			$("#texto_boton").html(`${actual} - ${total}`);
			posicionar_folleto();

});

$(".flipbook").bind("turned",function(event, page, obj){
			
			posicionar_folleto();

});

}

function next_page(){
		$(".flipbook").turn("next");
	}

function previous_page(){
		$(".flipbook").turn("previous");
	}

// Load the HTML4 version if there's not CSS transform

yepnope({
		test : Modernizr.csstransforms,
		yep:  [$("#ruta_proyecto").val()+'/plugins/turnjs4/lib/turn.js'],
		nope: [$("#ruta_proyecto").val()+'/plugins/turnjs4/lib/turn.html4.min.js'],
		both: [$("#ruta_proyecto").val()+'/plugins/turnjs4/samples/basic/css/basic.css'],
		complete: loadApp
	});

</script>

</body>
</html>