<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> © Web-Maker <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>