<html>
	<head>
		<meta charset="utf-8">
		<title>Web Maker- code in your browser</title>
		<link rel="stylesheet" href="lib/codemirror/lib/codemirror.css">
		<link rel="stylesheet" href="lib/codemirror/theme/monokai.css">

		<style>
		body {
			margin: 0;
			padding: 0;
			background: rgba(0, 0, 0, 0.5);
			background: #444;
			min-height: 100vh;
			font-family: Helvetica, arial;
		}
		a { text-decoration: none; color: crimson; }
		/*a:hover { text-decoration: underline; }*/
		.flex {
			display: flex;
		}
		.flex-grow {
			flex-grow: 1;
		}
		.fr {
			float: right;
		}
		.main-container {
			position: absolute;
			left: 0; right: 0;
			top: 0; bottom: 0;
			display: flex;
			flex-direction: column;
		}
		.code-side,
		.demo-side {
			flex-basis: inherit;
			position: relative;
		}
		.layout-3 .content-wrap {
			flex-direction: row-reverse;
		}
		.code-side {
			display: flex;
			flex-direction: column;
		}
		.layout-2 .content-wrap {
			flex-direction: column;
		}
		.layout-2 .code-side {
			flex-direction: row;
		}
		.code-wrap {
			/*border: 1px solid #e1e1e1;*/
			flex-basis: inherit;
			height: 33%;
			/*border-radius: 6px;*/
			overflow: hidden;
			position: relative;
			/*margin-bottom: 4px;*/
			animation: pop-in 0.4s cubic-bezier(.71,1.7,.77,1.24) forwards 0.2s;
			animation: pop-in 0.4s ease forwards 0.2s;
			opacity: 0;
		}
		.layout-2 .code-wrap {
			height: auto;
			width: 33%;
			/*margin-bottom: 0;*/
			/*margin-right: 4px;*/
		}
		.code-wrap:last-child {
			/*margin-bottom: 0;*/
		}
		.code-wrap:nth-of-type(3) {
			animation-delay: 0.3s;
		}
		.code-wrap:nth-of-type(5) {
			animation-delay: 0.4s;
		}

		.code-wrap:after {
			content: attr(data-type);
			text-transform: uppercase;
			font-size: 65px;
			display: block;
			position: absolute;
			top: 4px;
			color: rgba(255,255,255,0.04);
			left: 52px;
			z-index: 3;
			pointer-events: none;
		}
		@keyframes pop-in {
			from { transform: scale(0.9); opacity: 0; }
			to { transform: scale(1); opacity: 1; }
		}

		/* Codemirror */
		.Codemirror {
			width: 100%;
			height: 100%;
			font-size: 16px;
		}
		.cm-s-monokai .CodeMirror-linenumber {
			color:rgba(255,255,255,0.2);
		}

		#demo-frame {
			border: 0;
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 1;
			background: white;
		}
		.footer {
			padding: 5px 10px;
			background-color: #111;
			color: rgba(255, 255, 255, 0.45);
			border-top: 1px solid rgba(255,255,255,0.14);
			line-height: 20px;
		}
		.footer__right {
			font-size: 0;
			line-height: 0;
		}
		.mode-btn {
			margin-left: 10px;
			display: inline-block;
		}
		.footer a > svg {
			fill: rgba(255, 255, 255, 0.2)
		}
		.footer a:hover svg {
			fill: rgba(255, 255, 255, 0.45)
		}
		.mode-btn svg {
			width: 20px;
			height: 20px;
		}
		.mode-btn.selected svg {
			fill: rgba(255, 255, 255, 0.45);
		}
		.gutter-horizontal {
			cursor: ew-resize;
		}
		.gutter-vertical {
			cursor: ns-resize;
		}
		.modal {
			position: fixed;
			top: 50%;
			left: 50%;
			width: 50%;
			max-width: 630px;
			min-width: 320px;
			height: auto;
			z-index: 2000;
			visibility: hidden;
			backface-visibility: hidden;
			transform: translateX(-50%) translateY(-50%);
		}
		.modal__content {
			/*color: #fff;*/
			background: #fdfdfd;
			position: relative;
			border-radius: 3px;
			margin: 0 auto;
			opacity: 0;
			padding: 2em;
			font-size: 1.5em;
			transition: all 0.3s;
			transform: scale(0.7);
		}
		.is-modal-visible {
			visibility: visible;
		}
		.is-modal-visible .modal__content {
			transform: scale(1);
			opacity: 1;
		}
		.modal-overlay {
			position: fixed;
			width: 100%;
			height: 100%;
			visibility: hidden;
			top: 0;
			left: 0;
			z-index: 1000;
			opacity: 0;
			background: rgba(0,0,0,0.6);
			transition: all 0.3s;
		}

		.is-modal-visible ~ .modal-overlay {
			opacity: 1;
			visibility: visible;
		}
		</style>
	</head>

	<body class="layout-">
		<div class="main-container">
			<div class="content-wrap  flex  flex-grow">
				<div class="code-side" id="js-code-side">
					<div id="js-html-code" data-type="html" class="code-wrap"></div>
					<div id="js-css-code" data-type="css" class="code-wrap"></div>
					<div id="js-js-code" data-type="js" class="code-wrap"></div>
				</div>
				<div class="demo-side" id="js-demo-side">
					<iframe src="" frameborder="0" id="demo-frame"></iframe>
				</div>
			</div>
			<div class="footer">
				<div class="footer__right  fr">
					<a id="js-layout-btn-1" class="mode-btn" href="javascript:void(0)">
						<svg viewBox="0 0 100 100" style="transform:rotate(-90deg)">
							<use xlink:href="#mode-icon" />
						</svg>
					</a>
					<a id="js-layout-btn-2" class="mode-btn" href="javascript:void(0)">
						<svg viewBox="0 0 100 100">
							<use xlink:href="#mode-icon" />
						</svg>
					</a>
					<a id="js-layout-btn-3" class="mode-btn" href="javascript:void(0)">
						<svg viewBox="0 0 100 100" style="transform:rotate(90deg)">
							<use xlink:href="#mode-icon" />
						</svg>
					</a>
				</div>
				&copy; Web-Maker &nbsp;&nbsp;
				<a id="js-help-btn">
					<svg style="width:20px; height:20px; vertical-align:text-bottom" viewBox="0 0 24 24">
					    <path d="M11,18H13V16H11V18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,6A4,4 0 0,0 8,10H10A2,2 0 0,1 12,8A2,2 0 0,1 14,10C14,12 11,11.75 11,15H13C13,12.75 16,12.5 16,10A4,4 0 0,0 12,6Z" />
					</svg>
				</a>
				<!-- #00ACED -->
				<a href="http://twitter.com/share?url=http://kushagragour.in/lab/web-maker/&text=Web-Maker: Quick & offline web experimenting in your browser!&related=hint_css&hashtags=web,tinker,chrome" target="_blank">
					<svg viewBox="0 0 16 16" style="width:20px; height:20px; vertical-align:text-bottom">
						<path id="twitter-icon" d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809
					c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/>
					</svg>
				</a>

			</div>
		</div>

		<div class="modal" id="js-help-modal">
			<div class="modal__content">
				<h3>Web-Maker</h3>
				<div>
					<p>Made by <a href="https://twitter.com/chinchang457" target="_blank">Kushagra Gour</a></p>
					<p>If you like this extension, support it by <a href="">writing a review</a>.</p>
				</div>
			</div>
		</div>

		<div class="modal-overlay"></div>


		<svg  width="30" height="30" viewBox="0 0 100 100" fill="rgba(255, 255, 255, 0.09)">
			<defs>
				<g id="mode-icon">
				  <rect x="0" y="0" width="28" height="47" />
				  <rect x="36" y="0" width="28" height="47"/>
				  <rect x="72" y="0" width="28" height="47"/>
				  <rect x="0" y="53" width="100" height="47"/>
				</g>
			</defs>
		</svg>
	    <script src="lib/codemirror/lib/codemirror.js"></script>

		<script src="lib/codemirror/addon/edit/matchbrackets.js"></script>
		<script src="lib/codemirror/addon/edit/closebrackets.js"></script>
		<script src="lib/codemirror/addon/edit/closetag.js"></script>

		<script src="lib/codemirror/mode/xml/xml.js"></script>
		<script src="lib/codemirror/mode/javascript/javascript.js"></script>
		<script src="lib/codemirror/mode/css/css.js"></script>
		<script src="lib/codemirror/mode/htmlmixed/htmlmixed.js"></script>
		<script src="lib/codemirror/keymap/sublime.js"></script>
		<script src="lib/emmet.js"></script>

		<script src="lib/split.js"></script>
		<script src="script.js"></script>



	</body>
</html>