1#@!#!123s

https 1#@!#!123s
: / home2 / hershinecreation / www / hiiu-design.com / flipbook /
Filename : index.php
back
<!doctype html>
<html>

<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
	<meta content="width=device-width,initial-scale=1" name="viewport">
	<meta name="generator" content="Y2F0YWxvZy53bGltZy5jb20=">
	<title>Flipbook</title>
	<!-- <link rel="shortcut icon" href="images/logo.png" type="image/x-icon"> -->
	<link type="text/css" href="flip/aa.css" rel="stylesheet">
	<link type="text/css" href="flip/style.css" rel="stylesheet">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	<link href="flip/mini.css" rel="stylesheet">
	<script src="flip/j.js"></script>
	<script src="flip/t.js"></script>
	<script src="flip/b.js"></script>
	<script src="flip/mini.js"></script>
	<script src="flip/theme.js"></script>
	<!-- style css  -->
	<style>
		html,
		body {
			margin: 0;
			padding: 0;
			overflow: auto !important;
			font: 12px Arial, sans-serif;
			background: url('flip/re.png');
			object-fit: contain;
			background-position: center center;

		}
	</style>

	<style>
		#fancybox-wrap,
		#fancybox-wrap div {
			box-sizing: content-box;
		}

		button,
		input[type="button"],
		input[type="reset"],
		input[type="submit"] {
			-webkit-appearance: button;
			cursor: pointer;
			overflow: visible;
		}

		button[disabled],
		input[disabled] {
			cursor: default;
		}

		button::-moz-focus-inner,
		input::-moz-focus-inner {
			border: 0;
		}

		button,
		.button {
			padding: 5px 10px;
		}

		#aside {
			top: 10px;
			left: -196px;
			position: absolute;
			z-index: 99
		}

		form {
			display: inline
		}

		select {
			width: 125px;
			border-radius: 3px;
			padding: 2px 5px;
			font-size: 1.3em;
		}

		#aside #show-modify-theme {
			float: right;
			padding: 5px;
			background: #ff8000;
			border: 1px solid rgba(255, 255, 255, .5);
			-webkit-border-radius: 0 5px 5px 0;
			-moz-border-radius: 0 5px 5px 0;
			border-radius: 0 5px 5px 0;
			-webkit-box-shadow: 0 0 5px #ff8000;
			-moz-box-shadow: 0 0 5px #ff8000;
			box-shadow: 0 0 5px #ff8000;
		}

		#modify-theme {
			background: #ff8000;
			background: rgba(255, 255, 255, .9);
			padding: 20px 10px;
			border: 1px solid #444;
			margin-right: 30px;
			width: 175px;
			-webkit-border-radius: 0 0 10px 0;
			-moz-border-radius: 0 0 10px 0;
			border-radius: 0 0 10px 0;
			-webkit-box-shadow: 0 0 10px #ff8000;
			-moz-box-shadow: 0 0 10px #ff8000;
			box-shadow: 0 0 10px #ff8000;
		}

		#modify-theme>p {
			margin: 0 0 5px;
			font-weight: bold;
		}

		#fb5 .fb5-menu .counter {
			width: 120px;
			white-space: nowrap
		}
	</style>

	<style id="styleBodyBgColor">
		html,
		#fb5 .fb5-bcg-book {

			background-image: url(flip/bg.jpg)
		}
	</style>

	<style id="styleFooterBgColor">
		#bottom,
		#fb5 #fb5-footer,
		#fb5 .fb5-nav-arrow {
			background: #1c594b
		}
	</style>

	<style id="styleFooterColor">
		#bottom,
		#bottom a,
		#fb5 #fb5-footer,
		#fb5 #fb5-footer a,
		#fb5 .fb5-nav-arrow {
			color: #fff;
		}
	</style>

</head>

<body>

	<!-- DIV YOUR WEBSITE -->
	<div style="width:100%;margin:0 auto">

		<!-- BEGIN FLIPBOOK STRUCTURE -->
		<div id="fb5-ajax">

			<!-- BEGIN HTML BOOK -->
			<div data-current="book5" class="fb5" id="fb5">

				<!-- PRELOADER -->
				<div id="Page_loader" class="fb5-preloader">
					<div class="AniDG"></div>
				</div>

				<!-- BACKGROUND FOR BOOK -->
				<div class="fb5-bcg-book"></div>

				<!-- BEGIN CONTAINER BOOK -->
				<div id="fb5-container-book">

					<!-- BEGIN deep linking -->
					<section id="fb5-deeplinking">
						<ul>
							<li data-address="cover" data-page="1"></li>
							<!-- Add data-address entries for all 35 pages -->
							<?php for($i=1; $i<=8; $i++) { ?>
							<li data-address="page<?php echo $i; ?>-<?php echo ($i+1); ?>" data-page="<?php echo ($i+1); ?>"></li>
							<?php } ?>
							<li data-address="end" data-page="10"></li>
						</ul>
					</section>
					<!-- END deep linking -->

					<!-- BEGIN BOOK -->
					<div id="fb5-book">
						<!-- Front Cover -->
						<div data-background-image="img1/front.gif" style="background-size:100% 100%; color: #ff8000;">
							<div class="fb5-cont-page-book">
								<img src="img1/front.gif" alt="Front Cover" style="width:100%; height:100%;">
							</div>
						</div>

						<!-- Pages 1-35 -->
						<?php for($i=1; $i<=8; $i++) { ?>
						<div data-background-image="img1/<?php echo $i; ?>.webp" style="background-size:100% 100%;">
							<div class="fb5-cont-page-book">
								<img src="img1/<?php echo $i; ?>.webp" alt="Page <?php echo $i; ?>" style="width:100%; height:100%;">
							</div>
						</div>
						<?php } ?>

						<!-- End Cover -->
						<div data-background-image="img1/end.gif" style="background-size:100% 100%;">
							<div class="fb5-cont-page-book">
								<img src="img1/end.gif" alt="End Cover" style="width:100%; height:100%;">
							</div>
						</div>

					</div>
					<!-- END BOOK -->

					<!-- arrows -->
					<a class="fb5-nav-arrow prev fa fa-angle-left" title="PREVIOUS PAGE"></a>
					<a class="fb5-nav-arrow next fa fa-angle-right" title="NEXT PAGE"></a>
					<!-- shadow -->
					<div class="fb5-shadow"></div>
				</div>
				<!-- END CONTAINER BOOK -->

				<!-- BEGIN FOOTER -->
				<div id="fb5-footer">
					<div class="fb5-bcg-tools"></div>
					<div class="fb5-menu" id="fb5-left">
						<ul>
							<li class="fb5-goto" title="JUMP TO">Jump:
								<select id="flipbook-select-menu">
									<option value="1">Cover</option>
									<?php for($i=1; $i<=8; $i+=2) { ?>
									<option value="<?php echo $i; ?>">Page <?php echo $i; ?>-<?php echo ($i+1); ?></option>
									<?php } ?>
									<option value="10">End</option>
								</select>
							</li>
							<li class="counter" title="YOU ARE HERE">
								<p>Current: <span id="cur_pag"></span></p>
							</li>
						</ul>
					</div>

					<div class="fb5-menu" id="fb5-center">
						<ul>
							<!-- icon_home -->
							<li title="SHOW HOME PAGE">
								<a class="fb5-home"><i class="fa fa-home"></i></a>
							</li>

							<!-- icon_allpages -->
							<li title="SHOW ALL PAGES">
								<a class="fb5-show-all"><i class="fa fa-sitemap"></i></a>
							</li>

							<!-- icon_zoom_in -->
							<li title="ZOOM IN">
								<a class="fb5-zoom-in"><i class="fa fa-search-plus"></i></a>
							</li>

							<!-- icon_zoom_out -->
							<li title="ZOOM OUT ">
								<a class="fb5-zoom-out"><i class="fa fa-search-minus"></i></a>
							</li>

							<!-- icon_zoom_auto -->
							<li title="ZOOM AUTO ">
								<a class="fb5-zoom-auto"><i class="fa fa-search"></i></a>
							</li>

							<!-- icon_zoom_original -->
							<li title="ZOOM ORIGINAL (SCALE 1:1)">
								<a class="fb5-zoom-original"><i class="fa fa-eye"></i></a>
							</li>
						</ul>
					</div>

					<div class="fb5-menu" id="fb5-right">
						<ul>
							<!-- icon contact form -->
							<li title="DOWNLOAD (PDF)">
								<a class="fb5-download" href="img1/pdf.pdf" target="_blank"><i class="fa fa-download"></i></a>
							</li>

							<!-- icon fullscreen -->
							<li title="FULL / NORMAL SCREEN">
								<a class="fb5-fullscreen"><i class="fa fa-arrows-alt"></i></a>
							</li>
						</ul>
					</div>
				</div>

			</div>
			<!-- END HTML BOOK -->

			<!-- CONFIGURATION FLIPBOOK -->
			<script>
				jQuery('#fb5').data('config', {
					"page_width": "550",
					"page_height": "715", 
					"zoom_double_click": "1.3",
					"zoom_step": "0.06",
					"double_click_enabled": "true",
					"tooltip_visible": "true",
					"toolbar_visible": "true",
					"gotopage_width": "30",
					"deeplinking_enabled": "true",
					"rtl": "false",
					'full_area': 'true',
					'lazy_loading_thumbs': 'false',
					'lazy_loading_pages': 'false'
				})
			</script>

		</div>
		<!-- END FLIPBOOK STRUCTURE -->

	</div>
</body>

</html>