<?php
/**
 * Project:        M.VuiZ.Net
 * Author:         nampt.me <admin@vuiz.net>
 * Copyright:      © 2025 vuiz.net All rights reserved.
 */

//http://ami.responsivedesign.is/
	$key = "Tiện ích tạo mockup của giao diện web responsive - Website Mockup Generators";
	$mkey = 'Multi device website mockup generator is a free online tool to test your responsive website on devices including Desktop, laptop, tablet, mobile, ...';
	$headerScript = '
	<link rel="stylesheet" href="/template/css/mockup.css" type="text/css" />
	<!--[if IE 8]>
		<style>
			.desktop iframe {
				-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.3181, M12=0, M21=0, M22=0.3181, SizingMethod=\'auto expand\')";
			}
			
			.laptop iframe {
				-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.277, M12=0, M21=0, M22=0.277, SizingMethod=\'auto expand\')";
			}
			
			.tablet iframe {
				-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.234, M12=0, M21=0, M22=0.234, SizingMethod=\'auto expand\')";
			}
			
			.mobile iframe {
				-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.219, M12=0, M21=0, M22=0.219, SizingMethod=\'auto expand\')";
			}
		</style>
	<![endif]-->

	<!--[if lte IE 7]>
		<style>
			.desktop iframe {
				filter: progid: DXImageTransform.Microsoft.Matrix( M11=0.3181, M12=0, M21=0, M22=0.3181, SizingMethod=\'auto expand\');
			}
			
			.laptop iframe {
				filter: progid: DXImageTransform.Microsoft.Matrix( M11=0.277, M12=0, M21=0, M22=0.277, SizingMethod=\'auto expand\');
			}
			
			.tablet iframe {
				filter: progid: DXImageTransform.Microsoft.Matrix( M11=0.234, M12=0, M21=0, M22=0.234, SizingMethod=\'auto expand\');
			}
			
			.mobile iframe {
				filter: progid: DXImageTransform.Microsoft.Matrix( M11=0.219, M12=0, M21=0, M22=0.219, SizingMethod=\'auto expand\');
			}
		</style>
	<![endif]-->';
	require '../template/header.php';
?>
	<div class="col-right-xs">
		<div class="mainblok">
			<div class="phdr">
					<div vocab="https://schema.org/" typeof="BreadcrumbList">
						<span property="itemListElement" typeof="ListItem">
							<a href="/"  property="item" typeof="WebPage">
								<i class="fa fa-home"></i> <span property="name">Home</span>
							</a>
							<meta property="position" content="1">
						</span>
						<i class="fa fa-angle-right"></i>
						<span property="itemListElement" typeof="ListItem">
							<a href="/tools/"  property="item" typeof="WebPage">
								<i class="fa fa-wrench"></i> <span property="name">Công cụ</span>
							</a>
							<meta property="position" content="2">
						</span>
						<i class="fa fa-angle-right"></i>
						<span property="itemListElement" typeof="ListItem">
							<span property="name">Website Mockup Generators</span>
							<meta property="position" content="3">
						</span>
					</div>
			</div>
			<div class="newsx">Tiện ích tạo mockup mô phỏng các chế độ hiển thị website của bạn trên nhiều thiết bị khác nhau. Bạn có thể dùng để show sản phẩm website của bạn cho khách hàng.</div>
			<div class="newsx" style="text-align: center;">HÃY XEM WEB CỦA BẠN HIỂN THỊ NHƯ THẾ NÀO TRÊN CÁC THIẾT BỊ?</div>
			<div class="menu">
				<form id="form" method="post" onSubmit="return false;">
					<input type="text" placeholder="https://m.vuiz.net/" name="website" id="website" /> <input value="Xem" class="btn btn-warning" type="submit" id="submit" name="submit" /> <input type="reset" class="btn btn-primary" value="Reset" id="reset" name="reset"/>
					<a rel="noreferrer noopener" target="_blank" href="/tools/responsive-mockup.html"><button type="button" class="btn btn-success">Full Screen</button></a>
				</form>
			</div>
			<div class="wrapper menu" id="Mockup">
				<section class="display">
					<div class="mobile">
						<div class="trim">
							<iframe id="mobile" src="https://trustweb.vn/"> </iframe>
						</div>
					</div>
					<div class="tablet">
						<div class="trim">
							<iframe id="tablet" src="https://trustweb.vn/"> </iframe>
						</div>
					</div>
					<div class="laptop">
						<div class="trim">
							<iframe id="laptop" src="https://trustweb.vn/"> </iframe>
						</div>
					</div>
					<div class="desktop">
						<div class="trim">
							<iframe id="desktop" src="https://trustweb.vn/"> </iframe>
						</div>
					</div>
				</section>
			</div>
			<div id="downloadPNG"></div>
		</div>
	</div>
	<div class="col-left-xs">
<?php require './toolslist.php'; ?>
	</div>
	<div class="clear"></div>
<script>
	$(document).ready(function(){
		$("#submit").click(function(){
			var urlRegex = /(https?:\/\/[^\s]+)/g;
			var web = $("#website").val();
			if (urlRegex.test(web)) {
				$(".display iframe").attr('src', web);
				$("#website").css({"border-color":"", "color":""});

				console.log(web);
			}
			else
			{
				alert("Vui lòng điền một địa chỉ web!");
				$("#website").css({"border-color":"red", "color":"red"});
			}
		});
	});

</script>
<?php
	include '../template/footer.php';
?>