<commit_before><!DOCTYPE html>
<head>
	<meta charset='utf-8'>
	<meta http-equiv='X-UA-Compatible' content='IE=edge'>
	<meta name='description' content='A front-end template that helps you build fast, modern mobile web apps.'>
	<meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0'>

	<!-- open graph card - http://ogp.me/ -->
	<meta property="og:title" content="Augmented Website" />
	<meta property="og:type" content="website" />
	<meta property="og:image" content="https://jeromeetienne.github.io/AR.js/data/logo/logo-alone-512x512.png" />
	<meta property="og:description" content="Bringing AR to any website" />
	<meta property="og:url" content="https://jeromeetienne.github.io/AR.js/three.js/examples/augmented-website/" />

	<!-- twitter card - https://dev.twitter.com/cards/types -->
	<meta name="twitter:card" content="summary_large_image" />
	<meta name="twitter:site" content="@jerome_etienne" />
	<meta name="twitter:creator" content="@jerome_etienne" />
	<meta name="twitter:domain" content="arjs.org" />
	<meta name="twitter:title" content="Augmented Website" />
	<meta name="twitter:url" content="https://jeromeetienne.github.io/AR.js/three.js/examples/augmented-website/" />
	<meta name="twitter:description" content="Bringing AR to any website" />
	<meta name="twitter:image:src" content="https://jeromeetienne.github.io/AR.js/data/logo/logo-alone-512x512.png" />

	<title>Augmented Website with AR.js - Bringing AR to Any Website</title>
	
	<!-- Add to homescreen for Chrome on Android -->
	<meta name='mobile-web-app-capable' content='yes'>
	<!-- IOS: Set your app to full screen mode -->
	<meta name='apple-mobile-web-app-capable' content='yes'>
	
	<!-- dialog-polyfill -->
	<link rel='stylesheet' href='landing-page/vendor/dialog-polyfill/dialog-polyfill.css'>
	<script src='landing-page/vendor/dialog-polyfill/dialog-polyfill.js'></script>

	<!-- getmdl.io -->
	<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
	<link rel='stylesheet' href='https://code.getmdl.io/1.3.0/material.indigo-pink.min.css'>
	
	<!-- https://davidshimjs.github.io/qrcodejs/ -->
	<script defer src='https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js'></script>
	
	<link rel='stylesheet' href='landing-page/css/main.css'>
	<link rel='stylesheet' href='landing-page/css/markers-overlay.css'>
	
	<script defer src='https://apis.google.com/js/client.js'></script>
	<script defer src='landing-page/js/urlshortener.js'></script>
	
	<script defer src='https://www.gstatic.com/firebasejs/4.1.3/firebase.js'></script>
	<script defer src='landing-page/js/firebase.js'></script>
	
	<script defer src='landing-page/js/markers-page.js'></script>
	<script defer src='landing-page/js/fullscreen.js'></script>
	<script defer src='landing-page/js/arAppURL.js'></script>
	<script defer src='landing-page/js/dialog.js'></script>
</head>
<body>
	<!-- marker page -->
	<div id='markers-page' style='display: none;'>
		<div style='position: absolute; top: 10px; width:100%; text-align: center;';>
			filter brightness <span class='currentBrightness'></span>
			-
			filter opacity <span class='currentOpacity'></span>
			-
			arrow keys to tune
			<br/>
				<a href='javascript:void(0)' onclick='markersPageLeave()'>Back</a>
		</div>
		<div style='position: absolute; bottom: 10px; width:100%; text-align: center;';>
			Tracking backend:
			<a href='javascript:void(0)' onclick='markersPageSetTrackingBackend('artoolkit')'>artoolkit</a> /
			<a href='javascript:void(0)' onclick='markersPageSetTrackingBackend('aruco')'>aruco</a>
			- Current : <span id='currentTracking'></span>
		</div>
		<div class='markers-aruco'>
			<img class='marker-center marker-image' src='landing-page/images/markers-aruco/1001.png'>
			<img class='marker-topleft marker-image' src='landing-page/images/markers-aruco/1002.png'>
			<img class='marker-topright marker-image' src='landing-page/images/markers-aruco/1003.png'>
			<img class='marker-bottomleft marker-image' src='landing-page/images/markers-aruco/1004.png'>
			<img class='marker-bottomright marker-image' src='landing-page/images/markers-aruco/1005.png'>
		</div>
		<div class='markers-artoolkit'>
			<img class='marker-center marker-image' src='landing-page/images/markers-artoolkit/pattern-hiro.png'>
			<img class='marker-topleft marker-image' src='landing-page/images/markers-artoolkit/pattern-letterA.png'>
			<img class='marker-topright marker-image' src='landing-page/images/markers-artoolkit/pattern-letterB.png'>
			<img class='marker-bottomleft marker-image' src='landing-page/images/markers-artoolkit/pattern-letterC.png'>
			<img class='marker-bottomright marker-image' src='landing-page/images/markers-artoolkit/pattern-letterF.png'>
		</div>
		<div class='filter'></div>
	</div>
	
	<!-- Always shows a header, even in smaller screens. -->
	<div class='mdl-layout mdl-js-layout mdl-layout--fixed-header'>
		<header class='mdl-layout__header'>
			<div class='mdl-layout__header-row' id='infoPageHeader'>
				<!-- Title -->
				<span id='infoPageTitle' class='mdl-layout-title'>Augmented Website with <a href='https://github.com/jeromeetienne/ar.js' target='_blank'>AR.js</a>
					<br/>
					<span style='font-size: 80%; color: #ccc;'>Bringing AR to Any Website</span></span>
				</div>
			</header>
			<main class='mdl-layout__content'>
				<div class='page-content'>
					<!-- Fullscreen Button -->
					<button id='fullscreenButton' class='mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect'>
						<i class='material-icons'>fullscreen</i>
					</button>
					<!-- INFO BUTTON and DIALOG -->
					<button id='infoButton' class='mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect'>
						<i class='material-icons'>info_outline</i>
					</button>
					<dialog id='infoDialog' class='mdl-dialog'>
						<img class='close' src='https://d30y9cdsu7xlg0.cloudfront.net/png/53504-200.png' style='cursor: pointer; float: right; width: 3em'/>
						<h4 class='mdl-dialog__title'>Augmented Web Pages</h4>
						<div class='mdl-dialog__content'>
							<p>
								Augmented webpages is a way to bring
								augmented reality to any webpages with AR.js.
								See more about this in this <a href='https://medium.com/arjs/augmenting-the-web-page-e893f2d199b8' target='_blank'>post</a>.
							</p>
							<iframe width='560' height='315' src='https://www.youtube.com/embed/sp7Wxk1yVcY' frameborder='0' allowfullscreen></iframe>
						</div>
					</dialog>
					
					<!-- help BUTTON and DIALOG -->
					<button id='helpButton' class='mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect'>
						<i class='material-icons'>link</i>
					</button>
					<dialog id='helpDialog' class='mdl-dialog'>
						<img class='close' src='https://d30y9cdsu7xlg0.cloudfront.net/png/53504-200.png' style='cursor: pointer; float: right; width: 3em'/>
						<h4 class='mdl-dialog__title'>Sharing links between Web Pages</h4>
						<div class='mdl-dialog__content'>
							You need to open the AR application on your phone. 
							The QRCode is likely the easiest way. But here are other ways.
							<br/>
							<br/>
							<strong>AR Application URL :</strong>
							<input id='arAppURLView' type='text' style='width: 100%'>
							<br/>							
							<br/>
							You can simply copy paste the link. Up to you to send it to your phone. 
							You can use twitter, facebook or other. You can even
							<a id='emailURLtoMeLink' href='#' target='_blank'>email it to yourself</a>.
							Or simple type it by hand.
							<br/>
							<br/>
							

							Currently the resolution is <span id='markerPageResolution'>unknown</a>.
						</div>
					</dialog>
					
					<!-- MIDDLE QRCODE CARD -->
					<div class='mdl-grid' style='justify-content: center'>
						<div class='mdl-cell mdl-cell--4-col'>
							<div id='scanThisQRCode' class='mdl-card mdl-shadow--2dp' style='justify-content: center'>
								<div class='mdl-card__title'>
									<h2 class='mdl-card__title-text'>Scan this QR-Code</h2>
								</div>
								<div class='mdl-card__supporting-text'>
									<div id='qrCodeContainer'></div>
								</div>
								<div class='mdl-card__actions mdl-card--border'>
									<a onclick='markersPageEnter()' class='mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect'  style='width: 90%'>
										Done
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div style='position: absolute; bottom: 10px; width:100%; text-align: center;';>
					Made with love by <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>.
					Direct link to <a target='_blank' id='arAppURLLink' href='javascript:void(0)'>AR App</a> 
				</div>
			</main>
		</div>
		
		<!-- getmdl.io -->
		<script defer src='https://code.getmdl.io/1.3.0/material.min.js'></script>
		
		<!-- from https://davidshimjs.github.io/qrcodejs/ -->
		<script defer src='https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js'></script>
		
		<script defer src='landing-page/js/main.js'></script>
	</body>
<commit_msg>link to webar-playground<commit_after><!DOCTYPE html>
<head>
	<meta charset='utf-8'>
	<meta http-equiv='X-UA-Compatible' content='IE=edge'>
	<meta name='description' content='A front-end template that helps you build fast, modern mobile web apps.'>
	<meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0'>

	<!-- open graph card - http://ogp.me/ -->
	<meta property="og:title" content="Augmented Website" />
	<meta property="og:type" content="website" />
	<meta property="og:image" content="https://jeromeetienne.github.io/AR.js/data/logo/logo-alone-512x512.png" />
	<meta property="og:description" content="Bringing AR to any website" />
	<meta property="og:url" content="https://jeromeetienne.github.io/AR.js/three.js/examples/augmented-website/" />

	<!-- twitter card - https://dev.twitter.com/cards/types -->
	<meta name="twitter:card" content="summary_large_image" />
	<meta name="twitter:site" content="@jerome_etienne" />
	<meta name="twitter:creator" content="@jerome_etienne" />
	<meta name="twitter:domain" content="arjs.org" />
	<meta name="twitter:title" content="Augmented Website" />
	<meta name="twitter:url" content="https://jeromeetienne.github.io/AR.js/three.js/examples/augmented-website/" />
	<meta name="twitter:description" content="Bringing AR to any website" />
	<meta name="twitter:image:src" content="https://jeromeetienne.github.io/AR.js/data/logo/logo-alone-512x512.png" />

	<title>Augmented Website with AR.js - Bringing AR to Any Website</title>
	
	<!-- Add to homescreen for Chrome on Android -->
	<meta name='mobile-web-app-capable' content='yes'>
	<!-- IOS: Set your app to full screen mode -->
	<meta name='apple-mobile-web-app-capable' content='yes'>
	
	<!-- dialog-polyfill -->
	<link rel='stylesheet' href='landing-page/vendor/dialog-polyfill/dialog-polyfill.css'>
	<script src='landing-page/vendor/dialog-polyfill/dialog-polyfill.js'></script>

	<!-- getmdl.io -->
	<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
	<link rel='stylesheet' href='https://code.getmdl.io/1.3.0/material.indigo-pink.min.css'>
	
	<!-- https://davidshimjs.github.io/qrcodejs/ -->
	<script defer src='https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js'></script>
	
	<link rel='stylesheet' href='landing-page/css/main.css'>
	<link rel='stylesheet' href='landing-page/css/markers-overlay.css'>
	
	<script defer src='https://apis.google.com/js/client.js'></script>
	<script defer src='landing-page/js/urlshortener.js'></script>
	
	<script defer src='https://www.gstatic.com/firebasejs/4.1.3/firebase.js'></script>
	<script defer src='landing-page/js/firebase.js'></script>
	
	<script defer src='landing-page/js/markers-page.js'></script>
	<script defer src='landing-page/js/fullscreen.js'></script>
	<script defer src='landing-page/js/arAppURL.js'></script>
	<script defer src='landing-page/js/dialog.js'></script>
</head>
<body>
	<!-- marker page -->
	<div id='markers-page' style='display: none;'>
		<div style='position: absolute; top: 10px; width:100%; text-align: center;';>
			filter brightness <span class='currentBrightness'></span>
			-
			filter opacity <span class='currentOpacity'></span>
			-
			arrow keys to tune
			<br/>
				<a href='javascript:void(0)' onclick='markersPageLeave()'>Back</a>
		</div>
		<div style='position: absolute; bottom: 10px; width:100%; text-align: center;';>
			Tracking backend:
			<a href='javascript:void(0)' onclick='markersPageSetTrackingBackend('artoolkit')'>artoolkit</a> /
			<a href='javascript:void(0)' onclick='markersPageSetTrackingBackend('aruco')'>aruco</a>
			- Current : <span id='currentTracking'></span>
		</div>
		<div class='markers-aruco'>
			<img class='marker-center marker-image' src='landing-page/images/markers-aruco/1001.png'>
			<img class='marker-topleft marker-image' src='landing-page/images/markers-aruco/1002.png'>
			<img class='marker-topright marker-image' src='landing-page/images/markers-aruco/1003.png'>
			<img class='marker-bottomleft marker-image' src='landing-page/images/markers-aruco/1004.png'>
			<img class='marker-bottomright marker-image' src='landing-page/images/markers-aruco/1005.png'>
		</div>
		<div class='markers-artoolkit'>
			<img class='marker-center marker-image' src='landing-page/images/markers-artoolkit/pattern-hiro.png'>
			<img class='marker-topleft marker-image' src='landing-page/images/markers-artoolkit/pattern-letterA.png'>
			<img class='marker-topright marker-image' src='landing-page/images/markers-artoolkit/pattern-letterB.png'>
			<img class='marker-bottomleft marker-image' src='landing-page/images/markers-artoolkit/pattern-letterC.png'>
			<img class='marker-bottomright marker-image' src='landing-page/images/markers-artoolkit/pattern-letterF.png'>
		</div>
		<div class='filter'></div>
	</div>
	
	<!-- Always shows a header, even in smaller screens. -->
	<div class='mdl-layout mdl-js-layout mdl-layout--fixed-header'>
		<header class='mdl-layout__header'>
			<div class='mdl-layout__header-row' id='infoPageHeader'>
				<!-- Title -->
				<span id='infoPageTitle' class='mdl-layout-title'>Augmented Website with <a href='https://github.com/jeromeetienne/ar.js' target='_blank'>AR.js</a>
					<br/>
					<span style='font-size: 80%; color: #ccc;'>Bringing AR to Any Website</span></span>
				</div>
			</header>
			<main class='mdl-layout__content'>
				<div class='page-content'>
					<!-- Fullscreen Button -->
					<button id='fullscreenButton' class='mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect'>
						<i class='material-icons'>fullscreen</i>
					</button>
					<!-- INFO BUTTON and DIALOG -->
					<button id='infoButton' class='mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect'>
						<i class='material-icons'>info_outline</i>
					</button>
					<dialog id='infoDialog' class='mdl-dialog'>
						<img class='close' src='https://d30y9cdsu7xlg0.cloudfront.net/png/53504-200.png' style='cursor: pointer; float: right; width: 3em'/>
						<h4 class='mdl-dialog__title'>Augmented Web Pages</h4>
						<div class='mdl-dialog__content'>
							<p>
								Augmented webpages is a way to bring
								augmented reality to any webpages with AR.js.
								See more about this in this <a href='https://medium.com/arjs/augmenting-the-web-page-e893f2d199b8' target='_blank'>post</a>.
							</p>
							<iframe width='560' height='315' src='https://www.youtube.com/embed/sp7Wxk1yVcY' frameborder='0' allowfullscreen></iframe>
						</div>
					</dialog>
					
					<!-- help BUTTON and DIALOG -->
					<button id='helpButton' class='mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect'>
						<i class='material-icons'>link</i>
					</button>
					<dialog id='helpDialog' class='mdl-dialog'>
						<img class='close' src='https://d30y9cdsu7xlg0.cloudfront.net/png/53504-200.png' style='cursor: pointer; float: right; width: 3em'/>
						<h4 class='mdl-dialog__title'>Sharing links between Web Pages</h4>
						<div class='mdl-dialog__content'>
							You need to open the AR application on your phone. 
							The QRCode is likely the easiest way. But here are other ways.
							<br/>
							<br/>
							<strong>AR Application URL :</strong>
							<input id='arAppURLView' type='text' style='width: 100%'>
							<br/>							
							<br/>
							You can simply copy paste the link. Up to you to send it to your phone. 
							You can use twitter, facebook or other. You can even
							<a id='emailURLtoMeLink' href='#' target='_blank'>email it to yourself</a>.
							Or simple type it by hand.
							<br/>
							<br/>
							

							Currently the resolution is <span id='markerPageResolution'>unknown</a>.
						</div>
					</dialog>
					
					<!-- MIDDLE QRCODE CARD -->
					<div class='mdl-grid' style='justify-content: center'>
						<div class='mdl-cell mdl-cell--4-col'>
							<div id='scanThisQRCode' class='mdl-card mdl-shadow--2dp' style='justify-content: center'>
								<div class='mdl-card__title'>
									<h2 class='mdl-card__title-text'>Scan this QR-Code</h2>
								</div>
								<div class='mdl-card__supporting-text'>
									<div id='qrCodeContainer'></div>
								</div>
								<div class='mdl-card__actions mdl-card--border'>
									<a onclick='markersPageEnter()' class='mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect'  style='width: 90%'>
										Done
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div style='position: absolute; bottom: 10px; width:100%; text-align: center;';>
					Made with love by <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>.
					Create your own AR with <a href='https://jeromeetienne.github.io/webar-playground/' target='_blank'>WebAR Playground</a>.
					Direct link to <a target='_blank' id='arAppURLLink' href='javascript:void(0)'>AR App</a> 
				</div>
			</main>
		</div>
		
		<!-- getmdl.io -->
		<script defer src='https://code.getmdl.io/1.3.0/material.min.js'></script>
		
		<!-- from https://davidshimjs.github.io/qrcodejs/ -->
		<script defer src='https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js'></script>
		
		<script defer src='landing-page/js/main.js'></script>
	</body>

{'fraction_non_alphanumeric': 0.17911344033191395, 'fraction_numerical': 0.013647778141718529, 'mean_word_length': 3.749546279491833, 'pattern_counts': {'":': 0, '<': 393, '<?xml version=': 0, '>': 393, 'https://': 41, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2758981', 'n_tokens_mistral': 7533, 'n_tokens_neox': 6278, 'n_words': 1173}