mirror of
https://github.com/jsbin/jsbin.git
synced 2026-01-25 15:38:56 +00:00
267 lines
12 KiB
HTML
267 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html id="jsbin-com" lang="en" class="{{#if flash_tip}}showtip{{/if}}{{#if embed}} embed{{/if}}{{#equal editorLayout "0"}}{{else}} layout layout{{editorLayout}}{{/equal}}">
|
|
<head>
|
|
<meta charset=utf-8>
|
|
<title>JS Bin - Collaborative JavaScript Debugging</title>
|
|
<link rel="alternate" type="application/json+oembed" href="{{root}}/oembed?url={{root}}{{request.url}}">
|
|
<link rel="icon" href="{{static}}/images/favicon.png">
|
|
<link rel="stylesheet" href="{{static}}/js/vendor/codemirror5/lib/codemirror.css{{cacheBust}}">
|
|
<link rel="stylesheet" href="{{static}}/css/style.css{{cacheBust}}">
|
|
<link rel="stylesheet" href="{{static}}/css/themes.css{{cacheBust}}">
|
|
<meta name="monetization" content="$ilp.uphold.com/AQzKX9y6jBdh">
|
|
{{#feature request "mobile"}}
|
|
{{#unless embed}}
|
|
<link rel="manifest" href="{{root}}/manifest.json">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="{{static}}/css/mobile.css{{cacheBust}}">
|
|
{{/unless}}
|
|
{{/feature}}
|
|
{{#if userCSS}}<style>{{{userCSS}}}</style>{{/if}}
|
|
<link rel="stylesheet" href="{{static}}/css/font.css{{cacheBust}}">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
{{#if custom_css}}<link rel="stylesheet" href="{{makeURL custom_css static}}{{cacheBust}}">{{/if}}
|
|
{{#equal editorLayout "0"}}{{else}}<link rel="stylesheet" href="{{static}}/css/editor-layout.css{{cacheBust}}">{{/equal}}
|
|
<!--[if lte IE 9 ]><link rel="stylesheet" href="{{static}}/css/ie.css{{cacheBust}}"><![endif]-->
|
|
{{#if is_production}}
|
|
{{> analytics}}
|
|
{{/if}}
|
|
<meta id="app-description" name="description" content="A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more..." />
|
|
{{#if bin}}
|
|
<meta property="og:url" content="{{root}}{{code_id_path}}/edit" />
|
|
<meta property="og:title" content="JS Bin" />
|
|
<meta property="og:description" content="Sample of the bin: {{bin.metadata.summary}}" />
|
|
{{else}}
|
|
<meta property="og:url" content="{{root}}" />
|
|
<meta property="og:title" content="JS Bin" />
|
|
<meta property="og:description" content="A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more..." />
|
|
{{/if}}
|
|
<meta property="og:image" content="{{static}}/images/logo.png" />
|
|
</head>
|
|
<!--[if lt IE 7]> <body class="source ie ie6"> <![endif]-->
|
|
<!--[if IE 7]> <body class="source ie ie7"> <![endif]-->
|
|
<!--[if gt IE 7]> <body class="source ie"> <![endif]-->
|
|
<!--[if !IE]><!--> <body class="source {{#if private}}private{{else}}public{{/if}} {{bodyClass}}"> <!--<![endif]-->
|
|
{{#unless embed}}
|
|
<script>
|
|
if(top != self) {
|
|
window.location = location.pathname.split('/').slice(0, -1).concat(['embed']).join('/') + (location.search ? location.search : '');
|
|
document.write('<' + '!--');
|
|
}
|
|
</script>
|
|
<a href="#html" id="skipToEditor" class="visuallyhidden">Skip welcome & menu and move to editor</a>
|
|
{{#feature request "welcomePanel"}}
|
|
{{> welcome_panel}}
|
|
{{/feature}}
|
|
{{/unless}}
|
|
<main>
|
|
{{#feature request "mobile"}}
|
|
{{>mobile-nav}}
|
|
{{/feature}}
|
|
{{> control_navigation}}
|
|
<div id="load-cached" tabindex="-1">
|
|
<a href="#">Load cached copy from <span></span></a>
|
|
</div>
|
|
<script type="template/text" id="profile-template">
|
|
<a title="@{name}" href="#profile" class="button button-dropdown avatar" id="accountBtn"><picture>
|
|
<source srcset="{avatar} 1x, {avatar}?&s=58 2x">
|
|
<img src="{avatar}">
|
|
</picture> Account</a>
|
|
<div class="dropdown dd-right" id="profile">
|
|
<div class="dropdowncontent">
|
|
<div class="large-gravatar"><object data="{{static}}/images/default-avatar.min.svg?{name}&{{version}}" type="image/svg+xml">
|
|
<img src="{{static}}/images/default-avatar.min.svg?{{version}}"></object><picture class="large-gravatar">
|
|
<source srcset="{large_avatar} 1x, {large_avatar}?&s=240 2x">
|
|
<img class="large-gravatar" src="{large_avatar}">
|
|
</picture></div>
|
|
<span class="input" id="username" readonly>
|
|
@{name}<sup class="pro">pro</sup>
|
|
</span>
|
|
|
|
<ul>
|
|
<li><a href="{{root}}/account/profile">Profile</a></li>
|
|
<li><a href="{{root}}/account/editor">Editor settings</a></li>
|
|
<li><a href="{{root}}/account/preferences">Preferences</a></li>
|
|
<li><a href="{{root}}/logout">Logout</a></li>
|
|
</ul>
|
|
|
|
</div>
|
|
<a href="{{root}}/upgrade" class="gopro">Support JS Bin: upgrade to PRO</a>
|
|
</div>
|
|
</script>
|
|
<div id="bin" class="stretch" style="opacity: 0; filter:alpha(opacity=0);">
|
|
{{#feature request "mobile"}}
|
|
<div class="inline-menu menu">
|
|
<ul>
|
|
<li class="add-library"><span>Add library</span><select class="library" id="alt-library"></select></li>
|
|
<li class="run-with-js"><a tabindex="0" role="button">Run with JS</a></li>
|
|
<li><a tabindex="0" role="button" class="save">Save</a></li>
|
|
<li><a tabindex="0" role="button" class="show-share">Share</a></li>
|
|
<li><a tabindex="0" role="button" aria-label="More bin links and information" class="more">…</a></li>
|
|
</ul>
|
|
</div>
|
|
{{/feature}}
|
|
<div id="source" class="binview stretch">
|
|
</div>
|
|
<div id="panelswaiting">
|
|
<div class="code stretch html panel">
|
|
<div role="menubar" class="label menu" tabindex="0"><span class="name"><strong><a href="#htmlprocessors" role="menuitem" class="fake-dropdown button-dropdown">Processor</a></strong></span><div class="dropdown" id="htmlprocessors">
|
|
<div role="menu" aria-hidden="true" class="dropdownmenu processorSelector" data-type="html">
|
|
<a role="menuitemradio" aria-checked="true" href="#html" data-label="HTML">HTML</a>
|
|
<a role="menuitemradio" href="#markdown">Markdown</a>
|
|
<a role="menuitemradio" href="#jade">Jade</a>
|
|
<a href="#convert">Convert to HTML</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="editbox">
|
|
<textarea aria-label="HTML Code Panel" spellcheck="false" autocapitalize="none" autocorrect="off" id="html"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="code stretch javascript panel">
|
|
<div role="menubar" class="label menu" tabindex="0"><span class="name"><strong><a role="menuitem" class="fake-dropdown button-dropdown" href="#javascriptprocessors">Processor</a></strong></span>
|
|
<div class="dropdown" id="javascriptprocessors">
|
|
<div role="menu" aria-hidden="true" class="dropdownmenu processorSelector" data-type="javascript">
|
|
<a role="menuitemradio" aria-checked="true" href="#javascript" data-label="JavaScript">JavaScript</a>
|
|
<a role="menuitemradio" href="#babel">ES6 / Babel</a>
|
|
<a role="menuitemradio" href="#jsx">JSX (React)</a>
|
|
<a role="menuitemradio" href="#coffeescript">CoffeeScript</a>
|
|
<a role="menuitemradio" href="#traceur">Traceur</a>
|
|
<a role="menuitemradio" href="#typescript">TypeScript</a>
|
|
<a role="menuitemradio" href="#processing">Processing</a>
|
|
<a role="menuitemradio" href="#livescript">LiveScript</a>
|
|
<a role="menuitemradio" href="#clojurescript">ClojureScript</a>
|
|
<a role="menuitem" href="#convert">Convert to JavaScript</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="editbox">
|
|
<textarea aria-label="JavaScript Code Panel" spellcheck="false" autocapitalize="none" autocorrect="off" id="javascript"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="code stretch css panel">
|
|
<div role="menubar" class="label menu" tabindex="0"><span class="name"><strong><a role="menuitem" class="fake-dropdown button-dropdown" href="#cssprocessors">Processor</a></strong></span>
|
|
<div class="dropdown" id="cssprocessors">
|
|
<div role="menu" aria-hidden="true" class="dropdownmenu processorSelector" data-type="css">
|
|
<a role="menuitemradio" aria-checked="true" href="#css" data-label="CSS">CSS</a>
|
|
<a role="menuitemradio" href="#less">Less</a>
|
|
<a role="menuitemradio" href="#myth">Myth</a>
|
|
{{#feature request "processors"}}
|
|
<a role="menuitemradio" href="#sass" data-label="Sass">Sass <span class="small">with Compass</span></a>
|
|
<a role="menuitemradio" href="#scss" data-label="SCSS">SCSS <span class="small">with Compass</span></a>
|
|
{{/feature}}
|
|
<a role="menuitemradio" href="#stylus">Stylus</a>
|
|
<a role="menuitem" href="#convert">Convert to CSS</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="editbox">
|
|
<textarea aria-label="CSS Code Panel" spellcheck="false" autocapitalize="none" autocorrect="off" id="css"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="stretch console panel">
|
|
<div class="label">
|
|
<span class="name"><strong>Console</strong></span>
|
|
<span class="options">
|
|
<button id="runconsole" title="ctrl + enter">Run</button>
|
|
<button id="clearconsole" title="ctrl + l">Clear</button>
|
|
</span>
|
|
</div>
|
|
<div id="console" class="stretch"><ul id="output"></ul><form>
|
|
<textarea aria-label="Console Panel" id="exec" spellcheck="false" autocapitalize="none" rows="1" autocorrect="off"></textarea>
|
|
</form></div>
|
|
</div>
|
|
<div id="live" class="stretch live panel">
|
|
<div class="label">
|
|
<span class="name"><strong>Output</strong></span>
|
|
<span class="options">
|
|
<button id="runwithalerts" title="ctrl + enter
|
|
Include alerts, prompts & confirm boxes">Run with JS</button>
|
|
<label>Auto-run JS<input type="checkbox" id="enablejs"></label>
|
|
<a target="_blank" title="Live preview" id="jsbinurl" class="{{#unless code_id}}hidden{{/unless}}" href="{{code_id_path}}"><img src="{{static}}/images/popout.png"></a>
|
|
</span>
|
|
<span class="size"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{#unless embed}}
|
|
<form id="saveform" method="post" action="{{code_id_path}}/save">
|
|
<input type="hidden" name="method">
|
|
<input type="hidden" name="_csrf" value="{{token}}">
|
|
</form>
|
|
{{/unless}}
|
|
</div>
|
|
<div id="tip" class="{{#if flash_tip_type}}{{flash_tip_type}}{{/if}}{{#unless flash_tip_type}} notification{{/unless}}">
|
|
<p>
|
|
{{#if flash_tip}}{{{flash_tip}}}{{/if}}
|
|
{{#unless flash_tip}}You can jump to the latest bin by adding <code>/latest</code> to your URL{{/unless}}
|
|
</p>
|
|
<a class="dismiss" href="#">Dismiss x</a>
|
|
</div>
|
|
{{>keyboardhelp}}
|
|
{{>urlhelp}}
|
|
{{#unless embed}}
|
|
{{>infocard}}
|
|
{{/unless}}
|
|
|
|
<script src="{{static}}/js/vendor/jquery-1.11.0.min.js"></script>
|
|
|
|
{{#feature request "offline"}}
|
|
<script>
|
|
if ('serviceWorker' in navigator) {
|
|
navigator.serviceWorker.register('/sw.js', { scope: '/' });
|
|
navigator.serviceWorker.addEventListener('message', function (event) {
|
|
window.postMessage(event.data, window.location.origin);
|
|
setTimeout(function () {
|
|
var data = JSON.parse(event.data);
|
|
console.log(data);
|
|
if (!document.body.classList.contains('ready')) {
|
|
document.querySelector('#load-cached span').innerHTML = data.updated;
|
|
document.body.classList.add('show-cached');
|
|
|
|
document.querySelector('#load-cached a').onclick = function (event) {
|
|
event.preventDefault();
|
|
navigator.serviceWorker.controller.postMessage(JSON.stringify({
|
|
type: 'accept-cache',
|
|
id: data.id,
|
|
}));
|
|
};
|
|
}
|
|
}, 1000);
|
|
});
|
|
}
|
|
</script>
|
|
{{/feature}}
|
|
<script src="{{root}}/bin/user.js?{{bust}}"></script>
|
|
{{!-- we use the passed in version of isProduction here, not the app global as we need to be able to switch it - even when in production --}}
|
|
{{#if isProduction}}
|
|
<script src="{{static}}/js/prod/jsbin-{{version}}.min.js"></script>
|
|
<script async defer src="{{root}}/bin/start.js?{{bust}}"></script>
|
|
{{else}}{{!- if development, we need include the user code first, otherwise last --}}
|
|
<script src="{{root}}/bin/start.js?{{bust}}"></script>
|
|
{{#if concat}}
|
|
<script src="{{static}}/js/prod/jsbin-{{version}}.js"></script>
|
|
{{else}}
|
|
{{#scripts}}<script src="{{../static}}{{.}}{{cacheBust}}"></script>{{/scripts}}
|
|
{{/if}}
|
|
{{#addons}}<script src="{{../static}}{{.}}{{cacheBust}}"></script>{{/addons}}
|
|
{{/if}}
|
|
{{#if live}}
|
|
{{!- the `live` value is never true now, and loaded from source --}}
|
|
<!-- <script src="{{static}}/js/vendor/eventsource.js{{cacheBust}}"></script>
|
|
<script src="{{static}}/js/spike.js{{cacheBust}}"></script> -->
|
|
{{/if}}
|
|
{{#if custom_js}}
|
|
<script src="{{makeURL custom_js static}}{{cacheBust}}"></script>
|
|
{{/if}}
|
|
</main>
|
|
{{#unless embed}}
|
|
{{#feature request "!pro"}}
|
|
{{#feature request "ad"}}
|
|
{{>ad}}
|
|
{{/feature}}
|
|
{{/feature}}
|
|
{{/unless}}
|
|
|
|
</body>
|
|
</html>
|