File: /var/www/vhost/disk-apps/demo.sports-crowd.com/public/album/index.html
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<title>Album Embedded</title>
<meta name="viewport" content="width = 1050, user-scalable = no" />
<script type="text/javascript" src="extras/jquery.min.1.7.js"></script>
<script type="text/javascript" src="extras/modernizr.2.5.3.min.js"></script>
<script type="text/javascript" src="lib/hash.js"></script>
<link rel="stylesheet" href='../js/bootstrap/css/bootstrap.min.css'>
<style>
.image-container{
height: 200px;
width: 200px;
background-color: gray;
margin: 5px 5px;
position: relative;
top: 60px;
left: 80px;
}
.image-container-1{
height: 120px;
width: 80px;
background-color: transparent;
position: relative;
top: 346px;
left: 142px;
}
.info-ok{
text-align: center;
height: 30px;
width: 200px;
background-color: red;
position: relative;
top: 100px;
left: 100px;
border-radius: 8px;
}
.info-no{
text-align: center;
height: 30px;
width: 200px;
background-color: red;
position: relative;
top: 70px;
left: 100px;
border-radius: 8px;
}
</style>
</head>
<body>
<div id="canvas">
<!-- <div class="zoom-icon zoom-icon-in"></div> -->
<div class="magazine-viewport">
<div class="container">
<div class="magazine">
<!-- Next button -->
<div ignore="1" class="next-button"></div>
<div>
<h1 class="text-center" style="margin-top: 70px;">ALBUM DIM</h1>
<p class="text-center">Disfruta llenando tu Album DIM</p>
<div class="image-container">
<p class="text-center" style="position: relative; top: 50px;">Escudo del Paderoso</p>
</div>
</div>
<div style="background-image: url(pages/page2.png);">
<div class="image-container-1" id="page2">
<p class="text-center" style="font-size: 20px; position: relative; top: 50px;">DIM</p>
<p class="text-center" style="font-size: 12px; position: relative; top: 30px;">vs.</p>
<p class="text-center" style="font-size: 16px; position: relative; top: 10px;">Nacional</p>
</div>
<div class="info-ok" hidden>
<p style="padding:5px; color: white;">Boleta agregada</p>
</div>
<div class="info-no" hidden>
<p style="padding:5px; color: white;">Aun no tienes esta boleta</p>
</div>
</div>
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div style="background-image: url(pages/page4.png);"></div>
<div style="background-image: url(pages/page5.png);"></div>
<div>FIN</div>
<!-- Previous button -->
<div ignore="1" class="previous-button"></div>
</div>
</div>
</div>
<!-- Thumbnails -->
<!-- <div class="thumbnails">
<div>
<ul>
<li class="i">
<img src="pages/1-thumb.jpg" width="76" height="100" class="page-1">
<span>1</span>
</li>
<li class="d">
<img src="pages/2-thumb.jpg" width="76" height="100" class="page-2">
<img src="pages/3-thumb.jpg" width="76" height="100" class="page-3">
<span>2-3</span>
</li>
<li class="d">
<img src="pages/4-thumb.jpg" width="76" height="100" class="page-4">
<img src="pages/5-thumb.jpg" width="76" height="100" class="page-5">
<span>4-5</span>
</li>
<li class="d">
<img src="pages/6-thumb.jpg" width="76" height="100" class="page-6">
<img src="pages/7-thumb.jpg" width="76" height="100" class="page-7">
<span>6-7</span>
</li>
<li class="d">
<img src="pages/8-thumb.jpg" width="76" height="100" class="page-8">
<img src="pages/9-thumb.jpg" width="76" height="100" class="page-9">
<span>8-9</span>
</li>
<li class="d">
<img src="pages/10-thumb.jpg" width="76" height="100" class="page-10">
<img src="pages/11-thumb.jpg" width="76" height="100" class="page-11">
<span>10-11</span>
</li>
<li class="i">
<img src="pages/12-thumb.jpg" width="76" height="100" class="page-12">
<span>12</span>
</li>
<ul>
<div>
</div> -->
</div>
<!-- <script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script> -->
<script type="text/javascript" src="js/geturl.js"></script>
<script type="text/javascript">
var logo = false;
let match_event_1 = 1;
let match_event_1_ok = false;
if(logo){
$(".image-container").html("<img src='pages/albumDimimg.jpeg' class='img-thumbnail'>");
}
// Llenar espacios con imágenes
$('.image-container').click(function() {
logo = true;
$(".image-container").html("<img src='pages/albumDimimg.jpeg' class='img-thumbnail'>");
});
$(document).ready(function () {
$.ajax({
url: "/getValidations/",
type: "GET",
contentType: "application/json",
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
"Content-Type": "application/json",
},
success: function (match_event) {
for (var i = 0; i < match_event.length; i++){
console.log(match_event[i].match_event_id);
if(match_event[i].match_event_id == 1){
$("#page2").html("<img src='pages/albumDimimg.jpeg' class='img-thumbnail'>");
match_event_1_ok = true;
}
}
}
});
});
$('#page2').click(function() {
$.ajax({
url: "/validateTickets/" + match_event_1,
type: "GET",
contentType: "application/json",
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
"Content-Type": "application/json",
},
success: function (r) {
console.log(r);
if(r){
if(!match_event_1_ok){
$("#page2").html("<img src='pages/albumDimimg.jpeg' class='img-thumbnail'>");
$(".info-ok" ).show(400).delay(800).hide(400);
match_event_1_ok = true;
}
}else{
$(".info-no" ).show(400).delay(800).hide(400);
}
}
});
});
function loadApp() {
$('#canvas').fadeIn(1000);
var flipbook = $('.magazine');
// Verifique si el CSS ya estaba cargado
if (flipbook.width()==0 || flipbook.height()==0) {
setTimeout(loadApp, 10);
return;
}
// Crea el flipbook/libro animado
flipbook.turn({
// Magazine width
width: 922,
// Magazine height
height: 600,
// Duration in millisecond
duration: 1000,
// Hardware acceleration
acceleration: !isChrome(),
// Enables gradients
gradients: true,
// Auto center this flipbook
autoCenter: true,
// Elevation from the edge of the flipbook when turning a page
elevation: 50,
// The number of pages
pages: 6,
// Events
when: {
turning: function(event, page, view) {
var book = $(this),
currentPage = book.turn('page');
//pages = book.turn('pages');
// Update the current URI / Actualizar el URI actual
Hash.go('page/' + page).update();
// Show and hide navigation buttons
disableControls(page);
$('.thumbnails .page-'+currentPage).
parent().
removeClass('current');
$('.thumbnails .page-'+page).
parent().
addClass('current');
},
turned: function(event, page, view) {
disableControls(page);
$(this).turn('center');
if (page==1) {
$(this).turn('peel', 'br');
}
},
missing: function (event, pages) {
// Add pages that aren't in the magazine
// Agrega páginas que no están en la revista.
for (var i = 0; i < pages.length; i++)
addPage(pages[i], $(this));
}
}
});
// Zoom.js
$('.magazine-viewport').zoom({
flipbook: $('.magazine'),
max: function() {
return largeMagazineWidth()/$('.magazine').width();
},
when: {
swipeLeft: function() {
$(this).zoom('flipbook').turn('next');
},
swipeRight: function() {
$(this).zoom('flipbook').turn('previous');
},
resize: function(event, scale, page, pageElement) {
if (scale==1)
loadSmallPage(page, pageElement);
else
loadLargePage(page, pageElement);
},
// acercarse
zoomIn: function () {
$('.thumbnails').hide();
$('.made').hide();
$('.magazine').removeClass('animated').addClass('zoom-in');
$('.zoom-icon').removeClass('zoom-icon-in').addClass('zoom-icon-out');
if (!window.escTip && !$.isTouch) {
escTip = true;
$('<div />', {'class': 'exit-message'}).
html('<div>Press ESC to exit</div>').
appendTo($('body')).
delay(2000).
animate({opacity:0}, 500, function() {
$(this).remove();
});
}
},
// disminuir el zoom
zoomOut: function () {
$('.exit-message').hide();
$('.thumbnails').fadeIn();
$('.made').fadeIn();
$('.zoom-icon').removeClass('zoom-icon-out').addClass('zoom-icon-in');
setTimeout(function(){
$('.magazine').addClass('animated').removeClass('zoom-in');
resizeViewport();
}, 0);
}
}
});
// Zoom event
// if ($.isTouch)
// $('.magazine-viewport').bind('zoom.doubleTap', zoomTo);
// else
// $('.magazine-viewport').bind('zoom.tap', zoomTo);
// Usando las teclas de flecha para pasar la página
$(document).keydown(function(e){
var previous = 37, next = 39, esc = 27;
switch (e.keyCode) {
case previous:
// flecha izquierda
$('.magazine').turn('previous');
e.preventDefault();
break;
case next:
//flecha derecha
$('.magazine').turn('next');
e.preventDefault();
break;
case esc:
$('.magazine-viewport').zoom('zoomOut');
e.preventDefault();
break;
}
});
// URIs - Format #/page/1
Hash.on('^page\/([0-9]*)$', {
yep: function(path, parts) {
var page = parts[1];
if (page!==undefined) {
if ($('.magazine').turn('is'))
$('.magazine').turn('page', page);
}
},
nop: function(path) {
if ($('.magazine').turn('is'))
$('.magazine').turn('page', 1);
}
});
$(window).resize(function() {
resizeViewport();
}).bind('orientationchange', function() {
resizeViewport();
});
// Events for thumbnails
$('.thumbnails').click(function(event) {
var page;
if (event.target && (page=/page-([0-9]+)/.exec($(event.target).attr('class'))) ) {
$('.magazine').turn('page', page[1]);
}
});
$('.thumbnails li').
bind($.mouseEvents.over, function() {
$(this).addClass('thumb-hover');
}).bind($.mouseEvents.out, function() {
$(this).removeClass('thumb-hover');
});
if ($.isTouch) {
$('.thumbnails').
addClass('thumbanils-touch').
bind($.mouseEvents.move, function(event) {
event.preventDefault();
});
} else {
$('.thumbnails ul').mouseover(function() {
$('.thumbnails').addClass('thumbnails-hover');
}).mousedown(function() {
return false;
}).mouseout(function() {
$('.thumbnails').removeClass('thumbnails-hover');
});
}
// Regions
if ($.isTouch) {
$('.magazine').bind('touchstart', regionClick);
} else {
$('.magazine').click(regionClick);
}
// Events for the next button
$('.button-next').click(function() {
$('.magazine').turn('next');
});
$('.button-previous').click(function() {
$('.magazine').turn('previous');
});
$('.next-button').bind($.mouseEvents.over, function() {
$(this).addClass('next-button-hover');
}).bind($.mouseEvents.out, function() {
$(this).removeClass('next-button-hover');
}).bind($.mouseEvents.down, function() {
$(this).addClass('next-button-down');
}).bind($.mouseEvents.up, function() {
$(this).removeClass('next-button-down');
}).click(function() {
$('.magazine').turn('next');
});
// Events for the next button
$('.previous-button').bind($.mouseEvents.over, function() {
$(this).addClass('previous-button-hover');
}).bind($.mouseEvents.out, function() {
$(this).removeClass('previous-button-hover');
}).bind($.mouseEvents.down, function() {
$(this).addClass('previous-button-down');
}).bind($.mouseEvents.up, function() {
$(this).removeClass('previous-button-down');
}).click(function() {
$('.magazine').turn('previous');
});
resizeViewport();
$('.magazine').addClass('animated');
}
// Zoom icon
$('.zoom-icon').bind('mouseover', function() {
if ($(this).hasClass('zoom-icon-in'))
$(this).addClass('zoom-icon-in-hover');
if ($(this).hasClass('zoom-icon-out'))
$(this).addClass('zoom-icon-out-hover');
}).bind('mouseout', function() {
if ($(this).hasClass('zoom-icon-in'))
$(this).removeClass('zoom-icon-in-hover');
if ($(this).hasClass('zoom-icon-out'))
$(this).removeClass('zoom-icon-out-hover');
}).bind('click', function() {
if ($(this).hasClass('zoom-icon-in'))
$('.magazine-viewport').zoom('zoomIn');
else if ($(this).hasClass('zoom-icon-out'))
$('.magazine-viewport').zoom('zoomOut');
});
$('#canvas').hide();
// Load the HTML4 version if there's not CSS transform
yepnope({
test : Modernizr.csstransforms,
yep: ['lib/turn.js'],
nope: ['lib/turn.html4.min.js'],
both: ['lib/zoom.min.js', 'js/magazine.js', 'css/magazine.css'],
complete: loadApp
});
</script>
</body>
</html>