123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284 |
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- html {
- box-sizing: border-box;
- }
- *, *:before, *:after {
- box-sizing: inherit;
- }
- body {
- margin: 0;
- font-family: sans-serif;
- overflow: hidden;
- height: 100vh;
- }
- a {
- text-decoration: none;
- color: inherit;
- }
- iframe {
- display: block;
- border: none;
- }
- .frame {
- height: 100vh;
- display: flex;
- flex-direction: column;
- background: #444;
- color: #AAA;
- }
- .tabs {
- flex: 0 0 auto;
- display: flex;
- justify-content: space-between;
- align-items: center;
- background: #666;
- }
- .panes {
- display: flex;
- flex: 1 1 auto;
- height: 50%; /* this is needed for firefox. It won't actually be 50% because the flex: 1 1 auto means stretch */
- }
- .panes>div {
- display: none;
- flex: 1 1 50%;
- flex-direction: column;
- min-width: 0;
- }
- .panes .code {
- flex: 1 1 auto;
- position: relative;
- height: 100%;
- }
- .panes .code > div {
- height: 100%;
- }
- .panes .files {
- position: relative;
- }
- .panes .fileSelected {
- color: white;
- background: #666;
- }
- .panes .files > div {
- border: 1px solid black;
- font-family: monospace;
- text-overflow: ellipsis;
- overflow: hidden;
- width: 100%;
- white-space: nowrap;
- cursor: pointer;
- }
- .panes>div.other {
- display: block
- }
- .editor {
- g-overflow: auto;
- }
- .result {
- overflow: auto;
- }
- .result>iframe {
- width: 100%;
- height: 100%;
- background: white;
- }
- .result .console .log {
- white-space: pre-line;
- }
- .other>div,
- .other>div>div {
- display: flex;
- justify-content: center;
- align-items: center;
- align-content: center;
- font-size: xx-large;
- }
- .other>div {
- height: 100%;
- flex-direction: column;
- }
- .other .loading {
- height: 2em;
- width: 2em;
- animation: rotate 0.8s infinite linear;
- border: 0.4em solid #fff;
- border-right-color: transparent;
- border-radius: 50%;
- }
- .dialog {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, 0.8);
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .dialog>div {
- background: #444;
- color: white;
- padding: 1em;
- outline: none;
- max-width: 90%;
- }
- .dialog p {
- margin-left: 0.25em;
- }
- .dialog a {
- color: lightseagreen;
- }
- .dialog a:hover {
- color: orange;
- }
- /* ---- */
- .export .export-buttons {
- display: flex;
- flex-wrap: wrap;
- }
- .export .export-buttons button {
- width: 8em;
- }
- /* ---- */
- .copy-dialog .copy-area {
- height: 8em;
- overflow: auto;
- user-select: all;
- background: #222;
- padding: 0.5em;
- }
- /* ---- */
- @keyframes rotate {
- 0% { transform: rotate(0deg); }
- 100% { transform: rotate(360deg); }
- }
- .tabs>div {
- padding: 0.125em;
- }
- button {
- padding: 0.5em;
- border: none;
- background: #AAA;
- border-bottom: 5px solid black;
- margin: 0.25em;
- width: 5em;
- cursor: pointer;
- }
- button:hover {
- background-color: orange;
- }
- button:focus {
- outline: none;
- }
- .panelogo {
- font-size: medium;
- }
- .panelogo>*>* {
- vertical-align: middle;
- display: inline-block;
- color: #CCC;
- }
- .show {
- background: #FFF !important;
- border-bottom: none !important;
- border-top: 5px solid #666 !important;
- }
- .button-result {
- margin-left: 2em !important;
- }
- .panebuttons>.button-fullscreen {
- background-image: url(editor-fullscreen-icon.svg);
- background-size: 80% 80%;
- background-position: center center;
- background-repeat: no-repeat no-repeat;
- }
- .fullscreen .panebuttons>.button-fullscreen {
- background-image: url(editor-unfullscreen-icon.svg) !important;
- }
- @media ( max-width: 950px ) {
- .panebuttons>button, body {
- font-size: x-small;
- }
- }
- @media ( max-width: 740px ) {
- .panelogo>div>a:nth-child(1) {
- display: none;
- }
- }
- @media ( max-width: 590px ) {
- .tabs {
- display: none;
- }
- .panes>div {
- display: none !important;
- height: auto;
- }
- .panes>.result {
- display: block !important;
- }
- }
- </style>
- </head>
- <body>
- <div class="frame notranslate">
- <div class="tabs">
- <div class="panebuttons">
- <button class="button-js">JS</button>
- <button class="button-html">HTML</button>
- <button class="button-css">CSS</button>
- <button class="button-export">Export</button>
- <button class="button-result">Result</button>
- <button class="button-run">Run</button>
- <button class="button-fullscreen"> </button>
- </div>
- <div class="panelogo">
- <div><a href="/"><span data-subst="textContent|name"></span> </a><a href="/"><img data-subst="src|icon" width="32" height="32"/></a></div>
- </div>
- </div>
- <div class="panes">
- <div class="js"><div class="files"></div><div class="code"></div></div>
- <div class="html"><div class="files"></div><div class="code"></div></div>
- <div class="css"><div class="files"></div><div class="code"></div></div>
- <div class="result"><iframe></iframe></div>
- <div class="other">
- <div>
- <div><a href="/"><span data-subst="textContent|name"></span> </a><a href="/"><img data-subst="src|icon" width="64" height="64"/></a></div>
- <div class="loading"></div>
- </div>
- </div>
- </div>
- </div>
- <div class="dialog export" style="display: none;">
- <div tabindex="-1">
- <p>Export To: </p>
- <div class="export-buttons">
- <button class="button-jsgist">jsGist</button>
- <button class="button-codepen">Codepen</button>
- <button class="button-jsfiddle">JSFiddle</button>
- <button class="button-codesandbox">CodeSandbox</button>
- <button class="button-stackoverflow">Stack Overflow</button>
- </div>
- </div>
- </div>
- <div class="dialog copy-dialog" style="display: none;">
- <div tabindex="-1">
- <p>Copy and paste the text below into a <a href="" target="_blank">stack overflow question</a>.</p>
- <pre class="copy-area"></pre>
- </div>
- </div>
- </body>
- <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.40.0/min/vs/loader.js"></script>
- <script src="editor-settings.js"></script>
- <script src="editor.js"></script>
- </html>
|