tiagorigoletto/provisorio.html

## provisorio.html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link href="assets/css/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/dist/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/stylesheet.css" rel="stylesheet" type="text/css">
	<script src="assets/js/jquery-1.10.2.min.js" type="text/javascript"></script>
	<script src="assets/css/dist/js/bootstrap.min.js" type="text/javascript"></script>

</head>
<body>
	<div id="site">
		<!-- Navbar -->
		<div class="navbar navbar-default navbar-static-top" role="navigation">
			<div class="container">
				<div class="navbar-header">
					<a href="index.html" class="navbar-brand">DNE</a>
				</div>

				<div class="navbar-collapse collapse">
					<ul class="nav navbar-nav pull-right">
						<li>
							<a href="index.html">Início</a>
						</li>

						<li>
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Meu DNE <span class="caret"></span></a>
							<ul class="dropdown-menu" role="menu">
							    <li><a href="#">Solicitar DNE</a></li>
							    <li><a href="#">Solicitar Segunda via</a></li>
							    <li><a href="#">Minhas Solicitações</a></li>

							</ul>
						</li>

						<li>
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Minha conta <span class="caret"></span></a>
							<ul class="dropdown-menu" role="menu">
							    <li><a href="#">Alterar e-mail</a></li>
							    <li><a href="#">Alterar senha</a></li>
							    <li><a href="#">Sair</a></li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- # Navbar # -->
		<style>
			@media print {
				html,body{
					margin: 0px;
					padding: 0px;
				}

				#provisorio {
					display: none;
				}

				.img-provisorio{
					width: 254px;
				}
			}

			@media screen {
				#img{
					/*display: none;*/
				}

				.provisorio {
					background-size: 60px;
					border-radius: 10px;
					color: #000;
					height: 648px;
					width: 1016px;
				}

				.provisorio table {
					width: 100%;
					font-weight: bold;
				}

				.provisorio .titulo {
					font-size: 40px;
					padding: 25px 0 25px 0;
					text-transform: uppercase;
					font-weight: lighter;
				}

				.provisorio .header {
					font-size: 30px;
				}

				.provisorio .data {
					text-transform: uppercase;
				}

				.provisorio .data td,
				.provisorio .header td {
					padding-left: 10px;
				}

				.provisorio .data td {
					padding-bottom: 40px;
				}

				.info {

					font-size: 30px;
					margin: 10px auto;
					padding: 5px 30px 0 0;
					width: 95%;
				}
				.data {
					font-size: 32px;
				}
			}
		</style>
		<div class="container">
			<img src="" alt="" id="img" class="img-provisorio">
			<div class="provisorio" id="provisorio">
				<table>
					<tr>
						<td colspan="2" class="text-center titulo">Documento provisório</td>
					</tr>
					<tr class="header">
						<td colspan="2">Nome</td>
					</tr>
					<tr class="data">
						<td colspan="2">Tiago Rigoletto</td>
					</tr>

					<tr class="header">
						<td colspan="2">Instituição/Curso</td>
					</tr>
					<tr class="data">
						<td colspan="2">PUC Minas - Design de Interação</td>
					</tr>

					<tr>
						<td>
							<table>
								<tr class="header">
									<td>Data da solicitação</td>
								</tr>
								<tr class="data">
									<td>05/10/1999</td>
								</tr>
							</table>
						</td>

						<td>
							<table>
								<tr class="header">
									<td>Válido até</td>
								</tr>
								<tr class="data">
									<td>08/09/2044</td>
								</tr>
							</table>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<div class="info">
								<p>Este documento pode ser utilizado para aquisição de passagens no sistema da grande Recife.</p>
							</div>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</body>
<script src="assets/js/base64.js" type="text/javascript"></script>
	<script src="assets/js/canvas2image.js" type="text/javascript"></script>
	<script src="assets/js/html2canvas.js" type="text/javascript"></script>
	<script type="text/javascript">
		html2canvas($('#provisorio'), {
		  useCORS: true,
		  allowTaint: true,
		  background: '#fff',
		  onrendered: (function(_this) {
		    return function(canvas) {
		      var ctx, dataURL;
		      ctx = canvas.getContext('2d');
		      dataURL = canvas.toDataURL();
		      $('#img').attr('src', dataURL);
		      $('#provisorio').hide();
		      //window.location.href = dataURL
		    };
		  })(this)
		});
	</script>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link href="assets/css/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/dist/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/stylesheet.css" rel="stylesheet" type="text/css">
	<script src="assets/js/jquery-1.10.2.min.js" type="text/javascript"></script>
	<script src="assets/css/dist/js/bootstrap.min.js" type="text/javascript"></script>

	</head>
	<body>
	<div id="site">
	<!-- Navbar -->
	<div class="navbar navbar-default navbar-static-top" role="navigation">
	<div class="container">
	<div class="navbar-header">
	<a href="index.html" class="navbar-brand">DNE</a>
	</div>

	<div class="navbar-collapse collapse">
	<ul class="nav navbar-nav pull-right">
	<li>
	<a href="index.html">Início</a>
	</li>

	<li>
	<a href="#" class="dropdown-toggle" data-toggle="dropdown">Meu DNE <span class="caret"></span></a>
	<ul class="dropdown-menu" role="menu">
	<li><a href="#">Solicitar DNE</a></li>
	<li><a href="#">Solicitar Segunda via</a></li>
	<li><a href="#">Minhas Solicitações</a></li>

	</ul>
	</li>

	<li>
	<a href="#" class="dropdown-toggle" data-toggle="dropdown">Minha conta <span class="caret"></span></a>
	<ul class="dropdown-menu" role="menu">
	<li><a href="#">Alterar e-mail</a></li>
	<li><a href="#">Alterar senha</a></li>
	<li><a href="#">Sair</a></li>
	</ul>
	</li>
	</ul>
	</div>
	</div>
	</div>
	<!-- # Navbar # -->
	<style>
	@media print {
	html,body{
	margin: 0px;
	padding: 0px;
	}

	#provisorio {
	display: none;
	}

	.img-provisorio{
	width: 254px;
	}
	}

	@media screen {
	#img{
	/display: none;/
	}

	.provisorio {
	background-size: 60px;
	border-radius: 10px;
	color: #000;
	height: 648px;
	width: 1016px;
	}

	.provisorio table {
	width: 100%;
	font-weight: bold;
	}

	.provisorio .titulo {
	font-size: 40px;
	padding: 25px 0 25px 0;
	text-transform: uppercase;
	font-weight: lighter;
	}

	.provisorio .header {
	font-size: 30px;
	}

	.provisorio .data {
	text-transform: uppercase;
	}

	.provisorio .data td,
	.provisorio .header td {
	padding-left: 10px;
	}

	.provisorio .data td {
	padding-bottom: 40px;
	}

	.info {

	font-size: 30px;
	margin: 10px auto;
	padding: 5px 30px 0 0;
	width: 95%;
	}
	.data {
	font-size: 32px;
	}
	}
	</style>
	<div class="container">
	<img src="" alt="" id="img" class="img-provisorio">
	<div class="provisorio" id="provisorio">
	<table>
	<tr>
	<td colspan="2" class="text-center titulo">Documento provisório</td>
	</tr>
	<tr class="header">
	<td colspan="2">Nome</td>
	</tr>
	<tr class="data">
	<td colspan="2">Tiago Rigoletto</td>
	</tr>

	<tr class="header">
	<td colspan="2">Instituição/Curso</td>
	</tr>
	<tr class="data">
	<td colspan="2">PUC Minas - Design de Interação</td>
	</tr>

	<tr>
	<td>
	<table>
	<tr class="header">
	<td>Data da solicitação</td>
	</tr>
	<tr class="data">
	<td>05/10/1999</td>
	</tr>
	</table>
	</td>

	<td>
	<table>
	<tr class="header">
	<td>Válido até</td>
	</tr>
	<tr class="data">
	<td>08/09/2044</td>
	</tr>
	</table>
	</td>
	</tr>
	<tr>
	<td colspan="2">
	<div class="info">
	<p>Este documento pode ser utilizado para aquisição de passagens no sistema da grande Recife.</p>
	</div>
	</td>
	</tr>
	</table>
	</div>
	</div>
	</div>
	</body>
	<script src="assets/js/base64.js" type="text/javascript"></script>
	<script src="assets/js/canvas2image.js" type="text/javascript"></script>
	<script src="assets/js/html2canvas.js" type="text/javascript"></script>
	<script type="text/javascript">
	html2canvas($('#provisorio'), {
	useCORS: true,
	allowTaint: true,
	background: '#fff',
	onrendered: (function(_this) {
	return function(canvas) {
	var ctx, dataURL;
	ctx = canvas.getContext('2d');
	dataURL = canvas.toDataURL();
	$('#img').attr('src', dataURL);
	$('#provisorio').hide();
	//window.location.href = dataURL
	};
	})(this)
	});
	</script>
	</html>