mirror of
https://github.com/chinchang/web-maker.git
synced 2025-10-09 10:36:24 +02:00
654 lines
23 KiB
HTML
654 lines
23 KiB
HTML
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Web Maker</title>
|
||
<link rel="stylesheet" href="lib/codemirror/lib/codemirror.css">
|
||
<link rel="stylesheet" href="lib/codemirror/theme/monokai.css">
|
||
<link rel="stylesheet" href="lib/hint.min.css">
|
||
<style>
|
||
@font-face {
|
||
font-family: 'Inconsolata';
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
src: local('Inconsolata'), url(../Inconsolata-Regular.ttf) format('truetype');
|
||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
background: #444;
|
||
color: rgba(255,255,255,0.9);
|
||
min-height: 100vh;
|
||
font-family: Helvetica, arial;
|
||
}
|
||
h1 {
|
||
margin-top: 0;
|
||
}
|
||
a { text-decoration: none; color: crimson; cursor: pointer; }
|
||
/*a:hover { text-decoration: underline; }*/
|
||
.flex {
|
||
display: flex;
|
||
}
|
||
.flex-grow {
|
||
flex-grow: 1;
|
||
}
|
||
.fr {
|
||
float: right;
|
||
}
|
||
.caret {
|
||
display: inline-block;
|
||
width: 0;
|
||
height: 0;
|
||
border: 6px solid transparent;
|
||
border-top-color: currentColor;
|
||
position: relative;
|
||
top: 5px;
|
||
margin-left: 7px;
|
||
}
|
||
input[type="text"] {
|
||
padding: 3px 5px;
|
||
font-size: inherit;
|
||
}
|
||
.btn {
|
||
display: inline-block;
|
||
border: 0;
|
||
background: #0074d9;
|
||
color: white;
|
||
font-size: inherit;
|
||
border-radius: 3px;
|
||
padding: 7px 15px;
|
||
cursor: pointer;
|
||
transition: 0.2s ease;
|
||
}
|
||
.btn:hover {
|
||
text-decoration: none;
|
||
box-shadow: 0 3px 5px 0 rgba(0,0,0,0.15);
|
||
}
|
||
.star:after {
|
||
content: '★';
|
||
color: #eee333;
|
||
}
|
||
.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 {
|
||
flex-basis: inherit;
|
||
height: 33%;
|
||
overflow: hidden;
|
||
position: relative;
|
||
/*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%;
|
||
}
|
||
.code-wrap:nth-of-type(3) {
|
||
animation-delay: 0.3s;
|
||
}
|
||
.code-wrap:nth-of-type(5) {
|
||
animation-delay: 0.4s;
|
||
}
|
||
|
||
.code-wrap__header {
|
||
padding: 5px 20px;
|
||
background: rgba(0,0,0,0.55);
|
||
color: #888;
|
||
border-bottom: 1px solid rgba(0,0,0,0.3);
|
||
font-weight: bold;
|
||
}
|
||
@keyframes pop-in {
|
||
from { transform: scale(0.9); opacity: 0; }
|
||
to { transform: scale(1); opacity: 1; }
|
||
}
|
||
|
||
/* Codemirror */
|
||
.Codemirror {
|
||
width: 100%;
|
||
height: calc(100% - 25px); /* 25px for header */
|
||
font-size: 16px;
|
||
}
|
||
.Codemirror pre {
|
||
font-family: 'Inconsolata', monospace;
|
||
}
|
||
.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;
|
||
}
|
||
.main-header,
|
||
.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;
|
||
}
|
||
.main-header {
|
||
border: 0;
|
||
border-bottom: 1px solid rgba(255,255,255,0.14);
|
||
}
|
||
.logo {
|
||
display: inline-block;
|
||
height: 25px;
|
||
width: 48px;
|
||
margin-right: 5px;
|
||
background: url(icon-48.png) 0px -12px;
|
||
background-repeat: no-repeat;
|
||
vertical-align: middle;
|
||
-webkit-filter: grayscale(0.9);
|
||
transition: 0.4s ease;
|
||
}
|
||
.footer:hover .logo {
|
||
-webkit-filter: grayscale(0);
|
||
}
|
||
.footer__right {
|
||
font-size: 0;
|
||
line-height: 0;
|
||
}
|
||
.footer__separator {
|
||
display: inline-block;
|
||
height: 24px;
|
||
margin: 0 10px 0 20px;
|
||
border-left: 1px solid rgba(255,255,255,0.2);
|
||
}
|
||
.mode-btn {
|
||
margin-left: 10px;
|
||
display: inline-block;
|
||
}
|
||
.footer__link:first-of-type {
|
||
margin-left: 5px;
|
||
}
|
||
.footer__link {
|
||
display: inline-block;
|
||
margin-right: 5px;
|
||
position: relative;
|
||
top: 2px;
|
||
}
|
||
.footer a > svg {
|
||
transition: 0.3s ease;
|
||
fill: rgba(255, 255, 255, 0.2)
|
||
}
|
||
.footer a:hover svg {
|
||
fill: rgba(255, 255, 255, 0.45)
|
||
}
|
||
.mode-btn svg {
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
.mode-btn.selected svg {
|
||
fill: rgba(255, 255, 255, 0.45);
|
||
}
|
||
.gutter {
|
||
background: rgba(0,0,0,0.2);
|
||
}
|
||
.gutter-horizontal {
|
||
cursor: ew-resize;
|
||
}
|
||
.gutter-vertical {
|
||
cursor: ns-resize;
|
||
}
|
||
.item-title-input {
|
||
background: none;
|
||
border: 0;
|
||
color: rgba(255,255,255,0.8);
|
||
width: calc(100vw - 400px);
|
||
}
|
||
.modal {
|
||
position: fixed;
|
||
top: 5vh;
|
||
left: 50%;
|
||
width: 70vw;
|
||
margin-left: -35vw;
|
||
max-width: 90vw;
|
||
height: auto;
|
||
z-index: 2000;
|
||
visibility: hidden;
|
||
}
|
||
.modal__content {
|
||
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;
|
||
}
|
||
.saved-items-pane {
|
||
position: fixed;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 400px;
|
||
padding: 20px;
|
||
z-index: 4;
|
||
background-color: #111;
|
||
transition: 0.3s ease;
|
||
will-change: transform;
|
||
transform: translateX(100%);
|
||
}
|
||
.saved-items-pane.is-open {
|
||
transform: translateX(0);
|
||
}
|
||
.saved-items-pane__close-btn {
|
||
position: absolute;
|
||
left: -32px;
|
||
opacity: 0;
|
||
transition: 0.25s ease;
|
||
}
|
||
.saved-items-pane.is-open .saved-items-pane__close-btn {
|
||
opacity: 1;
|
||
}
|
||
.saved-item-tile {
|
||
padding: 20px;
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
margin: 10px 0;
|
||
display: block;
|
||
border-radius: 2px;
|
||
}
|
||
.saved-item-tile:hover {
|
||
background: rgba(255,255,255,0.1);
|
||
}
|
||
.notifications-btn {
|
||
position: relative;
|
||
}
|
||
@keyframes shake {
|
||
2%, 22% {
|
||
transform: translate3d(-1px, 0, 0);
|
||
}
|
||
5%,20% {
|
||
transform: translate3d(2px, 0, 0);
|
||
}
|
||
7%, 12%, 17% {
|
||
transform: translate3d(-4px, 0, 0);
|
||
}
|
||
10%, 15% {
|
||
transform: translate3d(4px, 0, 0);
|
||
}
|
||
}
|
||
.notifications-btn.has-new {
|
||
animation: shake 10s linear infinite;
|
||
transform-origin: 50% 10px;
|
||
}
|
||
.notifications-btn__dot {
|
||
position: absolute;
|
||
right: 1;
|
||
top: -2px;
|
||
background: #2fbe3d;
|
||
border-radius: 50%;
|
||
width: 12px;
|
||
height: 12px;
|
||
display: none;
|
||
}
|
||
.has-new .notifications-btn__dot {
|
||
display: block;
|
||
}
|
||
.notification {
|
||
border: 1px solid #f1f1f1;
|
||
border-radius: 5px;
|
||
padding: 20px;
|
||
background: #f8f6f9;
|
||
position: relative;
|
||
}
|
||
.notification:not(:last-child) {
|
||
margin-bottom: 10px;
|
||
}
|
||
.notification li:not(:last-child) {
|
||
margin-bottom: 10px;
|
||
}
|
||
.notification__version {
|
||
background: #ff8c00;
|
||
color: white;
|
||
padding: 3px;
|
||
border-radius: 5px;
|
||
position: absolute;
|
||
top: 2px;
|
||
left: 2px;
|
||
}
|
||
.btn-group {
|
||
position: relative;
|
||
cursor: pointer;
|
||
}
|
||
.dropdown__menu {
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
padding: 0;
|
||
margin: 0;
|
||
min-width: 200px;
|
||
display: block;
|
||
list-style: none;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: 0.25s ease;
|
||
transform: translateY(10px);
|
||
z-index: 5;
|
||
background: white;
|
||
}
|
||
.dropdown__menu > li > a {
|
||
display: block;
|
||
padding: 15px;
|
||
color: #333;
|
||
cursor: pointer;
|
||
}
|
||
.dropdown__menu > li > a:hover {
|
||
background: #ff8c00;
|
||
color: white;
|
||
}
|
||
.dropdown__menu > li:not(:last-child) {
|
||
border-bottom: 1px solid rgba(0,0,0,0.05);
|
||
}
|
||
|
||
.open .dropdown__menu {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
transform: translateY(0);
|
||
}
|
||
.alerts-container {
|
||
position: fixed;
|
||
will-change: transform;
|
||
left: 50%;
|
||
top: 0;
|
||
padding: 10px;
|
||
background: #9f3b4e;
|
||
border-radius: 3px;
|
||
transform: translateY(-100%);
|
||
transition: 0.3s ease;
|
||
}
|
||
.alerts-container.is-active {
|
||
transform: translateY(0);
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="layout-">
|
||
<div class="main-container">
|
||
<div class="main-header">
|
||
<div class="fr">
|
||
|
||
<a id="js-new-btn"><svg style="vertical-align:middle;width:14px;height:14px" viewBox="0 0 24 24">
|
||
<path fill="crimson" d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
|
||
</svg>New</a>
|
||
<a id="js-save-btn" style="margin-left:10px"><svg style="vertical-align:middle;width:14px;height:14px" viewBox="0 0 24 24">
|
||
<path fill="crimson" d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" />
|
||
</svg>Save</a>
|
||
<a id="js-open-btn" style="margin-left:10px"><svg style="width:14px;height:14px;vertical-align:middle;" viewBox="0 0 24 24">
|
||
<path fill="crimson" d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z" />
|
||
</svg>Open</a>
|
||
</div>
|
||
<input type="text" id="js-title-input" class="item-title-input" value="Untitled Work">
|
||
</div>
|
||
<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 class="code-wrap__header">
|
||
<div class="btn-group" dropdown title="Click to change">
|
||
<span id="js-html-mode-label">HTML</span><span class="caret"></span>
|
||
<ul class="js-modes-menu dropdown__menu">
|
||
<li><a data-type="html" data-mode="html">HTML</a></li>
|
||
<li><a data-type="html" data-mode="markdown">Markdown</a></li>
|
||
<li><a data-type="html" data-mode="jade">Jade</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="js-css-code" data-type="css" class="code-wrap">
|
||
<div class="code-wrap__header">
|
||
<div class="btn-group" dropdown title="Click to change">
|
||
<span id="js-css-mode-label">CSS</span><span class="caret"></span>
|
||
<ul class="js-modes-menu dropdown__menu">
|
||
<li><a data-type="css" data-mode="css">CSS</a></li>
|
||
<li><a data-type="css" data-mode="scss">SCSS</a></li>
|
||
<li><a data-type="css" data-mode="less">LESS</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="js-js-code" data-type="js" class="code-wrap">
|
||
<div class="code-wrap__header">
|
||
<div class="btn-group" dropdown title="Click to change">
|
||
<span id="js-js-mode-label">JS</span><span class="caret"></span>
|
||
<ul class="js-modes-menu dropdown__menu">
|
||
<li><a data-type="js" data-mode="js">JS</a></li>
|
||
<li><a data-type="js" data-mode="coffee">CoffeeScript</a></li>
|
||
<li><a data-type="js" data-mode="es6">ES6 (Babel)</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="demo-side" id="js-demo-side">
|
||
<iframe src="about://blank" frameborder="0" id="demo-frame"></iframe>
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<div class="footer__right fr">
|
||
<a id="js-save-html" class="mode-btn hint--rounded hint--top-left" data-hint="Save as HTML file">
|
||
<svg viewBox="0 0 24 24">
|
||
<path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
|
||
</svg>
|
||
</a>
|
||
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
|
||
<symbol id="codepen-logo" viewBox="0 0 120 120"><path class="outer-ring" d="M60.048 0C26.884 0 0 26.9 0 60.048s26.884 60 60 60.047c33.163 0 60.047-26.883 60.047-60.047 S93.211 0 60 0z M60.048 110.233c-27.673 0-50.186-22.514-50.186-50.186S32.375 9.9 60 9.9 c27.672 0 50.2 22.5 50.2 50.186S87.72 110.2 60 110.233z"/><path class="inner-box" d="M97.147 48.319c-0.007-0.047-0.019-0.092-0.026-0.139c-0.016-0.09-0.032-0.18-0.056-0.268 c-0.014-0.053-0.033-0.104-0.05-0.154c-0.025-0.078-0.051-0.156-0.082-0.232c-0.021-0.053-0.047-0.105-0.071-0.156 c-0.033-0.072-0.068-0.143-0.108-0.211c-0.029-0.051-0.061-0.1-0.091-0.148c-0.043-0.066-0.087-0.131-0.135-0.193 c-0.035-0.047-0.072-0.094-0.109-0.139c-0.051-0.059-0.104-0.117-0.159-0.172c-0.042-0.043-0.083-0.086-0.127-0.125 c-0.059-0.053-0.119-0.104-0.181-0.152c-0.048-0.037-0.095-0.074-0.145-0.109c-0.019-0.012-0.035-0.027-0.053-0.039L61.817 23.5 c-1.072-0.715-2.468-0.715-3.54 0L24.34 46.081c-0.018 0.012-0.034 0.027-0.053 0.039c-0.05 0.035-0.097 0.072-0.144 0.1 c-0.062 0.049-0.123 0.1-0.181 0.152c-0.045 0.039-0.086 0.082-0.128 0.125c-0.056 0.055-0.108 0.113-0.158 0.2 c-0.038 0.045-0.075 0.092-0.11 0.139c-0.047 0.062-0.092 0.127-0.134 0.193c-0.032 0.049-0.062 0.098-0.092 0.1 c-0.039 0.068-0.074 0.139-0.108 0.211c-0.024 0.051-0.05 0.104-0.071 0.156c-0.031 0.076-0.057 0.154-0.082 0.2 c-0.017 0.051-0.035 0.102-0.05 0.154c-0.023 0.088-0.039 0.178-0.056 0.268c-0.008 0.047-0.02 0.092-0.025 0.1 c-0.019 0.137-0.029 0.275-0.029 0.416V71.36c0 0.1 0 0.3 0 0.418c0.006 0 0 0.1 0 0.1 c0.017 0.1 0 0.2 0.1 0.268c0.015 0.1 0 0.1 0.1 0.154c0.025 0.1 0.1 0.2 0.1 0.2 c0.021 0.1 0 0.1 0.1 0.154c0.034 0.1 0.1 0.1 0.1 0.213c0.029 0 0.1 0.1 0.1 0.1 c0.042 0.1 0.1 0.1 0.1 0.193c0.035 0 0.1 0.1 0.1 0.139c0.05 0.1 0.1 0.1 0.2 0.2 c0.042 0 0.1 0.1 0.1 0.125c0.058 0.1 0.1 0.1 0.2 0.152c0.047 0 0.1 0.1 0.1 0.1 c0.019 0 0 0 0.1 0.039L58.277 96.64c0.536 0.4 1.2 0.5 1.8 0.537c0.616 0 1.233-0.18 1.77-0.537 l33.938-22.625c0.018-0.012 0.034-0.027 0.053-0.039c0.05-0.035 0.097-0.072 0.145-0.109c0.062-0.049 0.122-0.1 0.181-0.152 c0.044-0.039 0.085-0.082 0.127-0.125c0.056-0.055 0.108-0.113 0.159-0.172c0.037-0.045 0.074-0.09 0.109-0.139 c0.048-0.062 0.092-0.127 0.135-0.193c0.03-0.049 0.062-0.098 0.091-0.146c0.04-0.07 0.075-0.141 0.108-0.213 c0.024-0.051 0.05-0.102 0.071-0.154c0.031-0.078 0.057-0.156 0.082-0.234c0.017-0.051 0.036-0.102 0.05-0.154 c0.023-0.088 0.04-0.178 0.056-0.268c0.008-0.045 0.02-0.092 0.026-0.137c0.018-0.139 0.028-0.277 0.028-0.418V48.735 C97.176 48.6 97.2 48.5 97.1 48.319z M63.238 32.073l25.001 16.666L77.072 56.21l-13.834-9.254V32.073z M56.856 32.1 v14.883L43.023 56.21l-11.168-7.471L56.856 32.073z M29.301 54.708l7.983 5.34l-7.983 5.34V54.708z M56.856 88.022L31.855 71.4 l11.168-7.469l13.833 9.252V88.022z M60.048 67.597l-11.286-7.549l11.286-7.549l11.285 7.549L60.048 67.597z M63.238 88.022V73.14 l13.834-9.252l11.167 7.469L63.238 88.022z M90.794 65.388l-7.982-5.34l7.982-5.34V65.388z"/></symbol>
|
||
</svg>
|
||
|
||
<a href="" id="js-codepen-btn" class="mode-btn hint--rounded hint--top-left" data-hint="Edit on CodePen">
|
||
<svg>
|
||
<use xlink:href="#codepen-logo"></use>
|
||
</svg>
|
||
</a>
|
||
|
||
<div class="footer__separator"></div>
|
||
|
||
<a id="js-layout-btn-1" class="mode-btn">
|
||
<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">
|
||
<svg viewBox="0 0 100 100">
|
||
<use xlink:href="#mode-icon" />
|
||
</svg>
|
||
</a>
|
||
<a id="js-layout-btn-3" class="mode-btn">
|
||
<svg viewBox="0 0 100 100" style="transform:rotate(90deg)">
|
||
<use xlink:href="#mode-icon" />
|
||
</svg>
|
||
</a>
|
||
|
||
<div class="footer__separator"></div>
|
||
|
||
<a id="js-notifications-btn" class="notifications-btn mode-btn hint--top-left hint--rounded" aria-label="Notifications">
|
||
<svg viewBox="0 0 24 24">
|
||
<path d="M14,20A2,2 0 0,1 12,22A2,2 0 0,1 10,20H14M12,2A1,1 0 0,1 13,3V4.08C15.84,4.56 18,7.03 18,10V16L21,19H3L6,16V10C6,7.03 8.16,4.56 11,4.08V3A1,1 0 0,1 12,2Z" />
|
||
</svg>
|
||
<span class="notifications-btn__dot"></span>
|
||
</a>
|
||
<a id="js-settings-btn" class="mode-btn hint--top-left hint--rounded" aria-label="Settings">
|
||
<svg>
|
||
<path id="settings-icon" fill="" d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"></path>
|
||
</svg>
|
||
</a>
|
||
|
||
</div>
|
||
|
||
<a href="http://kushagragour.in/lab/web-maker/" target="_blank"><div class="logo"></div></a>
|
||
© Web Maker
|
||
<a id="js-help-btn" class="footer__link hint--rounded hint--top-right" data-hint="Help">
|
||
<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 class="footer__link hint--rounded hint--top-right" data-hint="Tweet about 'Web Maker'" href="http://twitter.com/share?url=http://kushagragour.in/lab/web-maker/&text=Web Maker - Convert your Chrome tabs into an offline web playground!&related=chinchang457&hashtags=web,playground,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">
|
||
<h1>Web Maker<small style="font-size:14px;"> v1.7.1</small></h1>
|
||
<div>
|
||
<p>Made by <a href="https://twitter.com/chinchang457" target="_blank">Kushagra Gour</a></p>
|
||
<p>Tweet out your feature requests, comments & suggestions to <a href="https://twitter.com/chinchang457">@chinchang457</a>.</p>
|
||
<p>Like this extension? Please <a href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" target="_blank">rate it here</a>.</p>
|
||
<p>Contribute on <a href="https://github.com/chinchang/web-maker">Github</a>.</p>
|
||
|
||
<p>
|
||
<h3>Awesome libraries used</h3>
|
||
<ul>
|
||
<li><a target="_blank" href="http://kushagragour.in/lab/hint/">Hint.css</a> - By me :)</li>
|
||
<li><a target="_blank" href="https://nathancahill.github.io/Split.js/">Split.js</a> - Nathan Cahill</li>
|
||
<li><a target="_blank" href="https://codemirror.net/">Codemirror</a> - Marijn Haverbeke</li>
|
||
<li><a target="_blank" href="https://emmet.io/">Emmet</a> - Sergey Chikuyonok</li>
|
||
<li><a target="_blank" href="https://kushagragour.in/lab/web-maker">Web Maker!</a> - whhat!</li>
|
||
</ul>
|
||
</p>
|
||
|
||
<p>
|
||
<h3>License</h3>
|
||
"Web Maker" is open-source under the <a href="https://opensource.org/licenses/MIT" target="_blank">MIT License</a>.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal" id="js-notifications-modal">
|
||
<div class="modal__content">
|
||
<h1>Whats new?</h1>
|
||
<div class="notification">
|
||
<span class="notification__version">1.7.0</span>
|
||
<ul>
|
||
<li><strong>Preprocessors!</strong> - Enjoy a whole list of preprocessors for HTML(Jade & markdown), CSS(SCSS & LESS) and JavaScript(CoffeeScript & Babel).</li>
|
||
<li>More awesome font for code.</li>
|
||
<li>Like it? <a href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" target="_blank" class="btn">Please rate Web Maker <span class="star"></span></a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="notification">
|
||
<span class="notification__version">1.6.0</span>
|
||
<ul>
|
||
<li>You can now configure Web-Maker to not replace new tab page from the settings. It is always accessible from the icon in the top-right.</li>
|
||
<li>Download current code as HTML file with Ctrl/⌘ + S keyboard shortcut.</li>
|
||
<li>New notifications panel added so you are always aware of the new changes in Web-Maker.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="js-saved-items-pane" class="saved-items-pane">
|
||
<button class="btn saved-items-pane__close-btn" id="js-saved-items-pane-close-btn">X</button>
|
||
<h3>My Items</h3>
|
||
<div id="js-saved-items-wrap">
|
||
|
||
</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>
|
||
|
||
<div class="alerts-container" id="js-alerts-container"></div>
|
||
<form style="display:none;" action="http://codepen.io/pen/define" method="POST" target="_blank" id="js-codepen-form">
|
||
<input type="hidden" name="data" value='{"title": "New Pen!", "html": "<div>Hello, World!</div>"}'>
|
||
</form>
|
||
|
||
<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/addon/comment/comment.js"></script>
|
||
<script src="lib/codemirror/addon/mode/loadmode.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="utils.js"></script>
|
||
<script src="deferred.js"></script>
|
||
<script src="loader.js"></script>
|
||
<script src="notifications.js"></script>
|
||
<script src="script.js"></script>
|
||
<script src="dropdown.js"></script>
|
||
|
||
</body>
|
||
</html> |