mirror of
https://github.com/jsbin/jsbin.git
synced 2026-01-18 15:18:04 +00:00
443 lines
19 KiB
HTML
443 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html id="jsbin" lang="en" class="{{#flash_info}}showtip{{/flash_info}}{{#embed}} embed{{/embed}}">
|
|
<head>
|
|
<meta charset=utf-8 />
|
|
<title>JS Bin - Collaborative JavaScript Debugging</title>
|
|
<link rel="icon" href="{{static}}/images/favicon.png">
|
|
<link rel="stylesheet" href="{{static}}/css/style.css?{{version}}" type="text/css">
|
|
{{#custom_css}}<link rel="stylesheet" href="{{static}}/{{custom_css}}?{{version}}" type="text/css">{{/custom_css}}
|
|
<!--[if lte IE 9 ]><link rel="stylesheet" href="{{static}}/css/ie.css?{{version}}" type="text/css"><![endif]-->
|
|
</head>
|
|
<!--[if lt IE 7 ]><body class="source ie ie6"><![endif]-->
|
|
<!--[if lt IE 8 ]><body class="source ie ie7"><![endif]-->
|
|
<!--[if gte IE 8 ]><body class="source ie"><![endif]-->
|
|
<!--[if !IE]><!--><body class="source"><!--<![endif]-->
|
|
<div id="control">
|
|
<div class="control">
|
|
<div class="buttons">
|
|
{{#embed}}
|
|
<span class="menu">
|
|
<a target="_blank" href="{{code_id_path}}/edit" class="brand button group"><img src="{{static}}/images/favicon.png"> <h1>JS Bin</h1></a><a href="{{code_id_path}}/save" target="_blank" class="button save">Save</a>
|
|
</span>
|
|
{{/embed}}
|
|
{{^embed}}
|
|
<div class="menu">
|
|
<a href="{{root}}{{code_id_path}}/edit#actionmenu" target="_blank" class="brand button button-dropdown group"><img src="{{static}}/images/favicon.png"> <h1>JS Bin</h1></a>
|
|
<div class="dropdown" id="actionmenu">
|
|
<div class="dropdownmenu">
|
|
<a id="createnew" class="button group" title="Create fresh bin" href="{{root}}">New</a>
|
|
{{#home}}
|
|
<a href="#" class="button group homebtn">Open</a>
|
|
{{/home}}
|
|
<hr>
|
|
<a id="addmeta" title="Add meta data to bin" class="button group" href="#">Add description</a>
|
|
<a title="Create milestone" class="button save group" href="{{root}}/save">Create milestone</a>
|
|
<a id="startingpoint" title="Set as starting code" class="button group" href="{{root}}/save">Save as template</a>
|
|
<a id="clone" title="Create a new copy" class="button clone group{{^code_id}} disabled{{/code_id}}" href="/clone">Clone</a>
|
|
<a id="download" title="Save to local drive" class="button download group{{^code_id}} disabled{{/code_id}}" href="{{root}}/download">Download</a>
|
|
</div>
|
|
</div>
|
|
</div><!-- spacer (or not) DO NOT TOUCH ERE BE DRAGONS etc wat?
|
|
--><div class="menu">
|
|
<span class="button group">Add library
|
|
<select id="library"></select>
|
|
</span>
|
|
</div><div id="sharemenu" class="menu {{^code_id}}hidden{{/code_id}}">
|
|
<a href="#share" class="button button-dropdown group">Share</a>
|
|
<div class="dropdown" id="share">
|
|
<div class="dropdowncontent">
|
|
<form>
|
|
<div class="lockoption" id="enablelock"><input type="button" title="Locks the bin's content so no more changes will be made this URL, and typing will create a new bin as if you 'created milestone'" class="lockrevision" value="Lock revision #{{revision}}"> <small>from further changes.</small></div>
|
|
<!-- <div id="removelock"><input type="button" title="Unlocks the revision that you own so that you can continue to write to this specific bin" class="unlocklockrevision" value="Unlock revision #{{revision}}"> <small>to allow changes.</small></div> -->
|
|
<div>
|
|
<strong><a class="link" data-path="/" target="_blank" href="{{root}}{{code_id_path}}">Live & Full Preview</a></strong><br><input data-path="/" class="link" value="{{root}}{{code_id_path}}/" type="text">
|
|
</div>
|
|
<div>
|
|
<strong><a class="link" data-path="/edit" target="_blank" href="{{root}}{{code_id_path}}/edit">Code View</a></strong><br><input data-path="/edit" class="link" value="{{root}}{{code_id_path}}/edit" type="text">
|
|
</div>
|
|
<div>
|
|
<strong>Embed</strong><br><textarea data-path="/embed" class="link"><a class="jsbin-embed" href="{{root}}{{code_id_path}}/embed?live">JS Bin demo</a><script src="{{static}}/js/embed.js"></script></textarea>
|
|
</div>
|
|
<div class="disabled">
|
|
<strong><a class="link" target="_blank" data-path="/watch" href="{{root}}{{code_id_path}}/watch">Codecast</a></strong><br><input data-path="/watch" class="link" value="{{root}}{{code_id_path}}/watch" type="text">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div><!-- intentional space -->
|
|
<div id="start-saving" class="menu">
|
|
<a href="{{code_id_path}}/save" class="save button group">Start saving your work</a>
|
|
</div>
|
|
{{/embed}}
|
|
<div id="panels"></div>
|
|
<div class="help">
|
|
{{^embed}}
|
|
{{#home}}
|
|
<div class="menu">
|
|
<div class="group">
|
|
<a href="#" id="avatar" class="button homebtn">{{#gravatar}}<img class="avatar" src="{{gravatar}}">{{/gravatar}}{{home}}</a><a href="#homemenu" class="button button-dropdown button-dropdown-arrow"><span class="icon icon-chevron-down"></span></a>
|
|
</div>
|
|
<div class="dropdown dd-right" id="homemenu">
|
|
<div class="dropdowncontent">
|
|
<form class="login">
|
|
<p class="loginFeedback"></p>
|
|
<!-- <div>
|
|
<label>Username<br><input value="{{home}}" name="username" type="text"></label>
|
|
</div> -->
|
|
<div>
|
|
<label>Email<br>
|
|
<input name="email" type="email" value="{{email}}"></label>
|
|
</div>
|
|
<div>
|
|
<label>Password<br>
|
|
<input name="password" type="password" value=""></label>
|
|
</div>
|
|
<div>
|
|
<input type=submit value="Update account">
|
|
<a class="logout" href="#logout">Logout</a>
|
|
</div>
|
|
<div>
|
|
<span class="login-splitter">or</span>
|
|
<a class="btn-github" href="/auth/github"><img src="{{static}}/images/github-32.png"> Link your Github account</a>
|
|
</div>
|
|
</form>
|
|
|
|
<form action="{{root}}/logout" method="POST" id="logout">
|
|
<input type="hidden" name="_csrf" value="{{token}}" />
|
|
<button hidden>Logout</button>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{/home}}
|
|
{{^home}}
|
|
{{#client.user}}
|
|
<div class="menu">
|
|
<a href="#login" class="button button-open" id="loginbtn">Log in</a>
|
|
<div class="dropdown dd-right" id="login">
|
|
<div class="dropdowncontent">
|
|
<form class="forgot" action="/forgot" method="post">
|
|
<div>
|
|
<label>Email<br>
|
|
<input name="email" required type="email"></label>
|
|
</div>
|
|
<div>
|
|
<input type=submit value="Request password reset">
|
|
<input type="hidden" name="_csrf" value="{{token}}">
|
|
<input type="hidden" name="_redirect" value="home">
|
|
</div>
|
|
</form>
|
|
<form class="login">
|
|
<p class="loginFeedback"></p>
|
|
<div>
|
|
<label>Username or Email<br>
|
|
<input name="username" type="text"></label>
|
|
</div>
|
|
<div>
|
|
<label>Password<br>
|
|
<input name="password" type="password"></label>
|
|
</div>
|
|
<div>
|
|
<input type=submit value="Log in">
|
|
<a id="lostpass" href="{{root}}/forgot">Reset password</a>
|
|
</div>
|
|
<div>
|
|
<span class="login-splitter">or</span>
|
|
<a class="btn-github" href="/auth/github"><img src="{{static}}/images/github-32.png"> Sign in with Github</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div><div class="menu">
|
|
<a href="#register" class="button button-open" id="regbtn">Register</a>
|
|
<div class="dropdown dd-right" id="register">
|
|
<div class="dropdowncontent">
|
|
<p>Registration allows you to retrieve your saved files.</p>
|
|
<form class="login">
|
|
<p class="loginFeedback"></p>
|
|
<div>
|
|
<label>Username<br><input required name="username" type="text"></label>
|
|
</div>
|
|
<div>
|
|
<label>Email<br>
|
|
<input name="email" required type="email"></label>
|
|
</div>
|
|
<div>
|
|
<label>Password<br>
|
|
<input required name="password" type="password"></label>
|
|
</div>
|
|
<div>
|
|
<input type=submit value="Register">
|
|
</div>
|
|
<div>
|
|
<span class="login-splitter">or</span>
|
|
<a class="btn-github" href="/auth/github"><img src="{{static}}/images/github-32.png"> Register with Github</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{/client.user}}
|
|
{{/home}}
|
|
{{/embed}}
|
|
<div class="menu">
|
|
<a href="#helpmenu" class="button button-dropdown">Help</a>
|
|
<div class="dropdown dd-right" id="helpmenu">
|
|
<div class="dropdownmenu">
|
|
<a id="showhelp" href="#keyboardHelp">Keyboard Shortcuts</a>
|
|
<a id="showurls" href="#urls">JS Bin URLs</a>
|
|
<hr>
|
|
<a target="_blank" href="/videos">Videos</a>
|
|
<a target="_blank" href="http://jsbin.tumblr.com">Tutorials</a>
|
|
<a target="_blank" href="http://jsbin.tumblr.com/faq">FAQ</a>
|
|
<hr>
|
|
<a target="_blank" href="http://github.com/remy/jsbin/issues/new">Send feedback & file bugs</a>
|
|
<a target="_blank" href="http://github.com/remy/jsbin/">Fork on Github</a>
|
|
<a target="_blank" href="http://jsbin.tumblr.com/about">About</a>
|
|
<a target="_blank" href="http://twitter.com/js_bin">Follow @js_bin</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="bin" class="stretch" style="opacity: 0; filter:alpha(opacity=0);">
|
|
<div id="source" class="binview stretch">
|
|
</div>
|
|
<div id="panelswaiting">
|
|
<div class="code stretch html panel">
|
|
<div class="label menu">
|
|
<span class="name"><strong><a href="#htmlprocessors" class="fake-dropdown button-dropdown">HTML</a></strong></span>
|
|
<div class="dropdown" id="htmlprocessors">
|
|
<div class="dropdownmenu processorSelector" data-type="html">
|
|
<a href="#html">HTML</a>
|
|
<a href="#markdown">Markdown</a>
|
|
<a href="#jade">Jade</a>
|
|
<a href="#convert">Convert to HTML</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="editbox">
|
|
<textarea spellcheck="false" autocapitalize="off" autocorrect="off" id="html"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="code stretch javascript panel">
|
|
<div class="label menu"><span class="name"><strong><a class="fake-dropdown button-dropdown" href="#javascriptprocessors">JavaScript</a></strong></span>
|
|
<div class="dropdown" id="javascriptprocessors">
|
|
<div class="dropdownmenu processorSelector" data-type="javascript">
|
|
<a href="#javascript">JavaScript</a>
|
|
<a href="#coffeescript">CoffeeScript</a>
|
|
<a href="#processing">Processing</a>
|
|
<a href="#traceur">Traceur</a>
|
|
<a href="#typescript">TypeScript</a>
|
|
<a href="#convert">Convert to JavaScript</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="editbox">
|
|
<textarea spellcheck="false" autocapitalize="off" autocorrect="off" id="javascript"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="code stretch css panel">
|
|
<div class="label menu"><span class="name"><strong><a class="fake-dropdown button-dropdown" href="#cssprocessors">CSS</a></strong></span>
|
|
<div class="dropdown" id="cssprocessors">
|
|
<div class="dropdownmenu processorSelector" data-type="css">
|
|
<a href="#css">CSS</a>
|
|
<a href="#less">LESS</a>
|
|
<a href="#stylus">Stylus</a>
|
|
<a href="#convert">Convert to CSS</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="editbox">
|
|
<textarea spellcheck="false" autocapitalize="off" 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>
|
|
</span>
|
|
</div>
|
|
<div id="console" class="stretch"><ul id="output"></ul><form>
|
|
<textarea id="exec" spellcheck="false" autocapitalize="off" 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="{{^code_id}}hidden{{/code_id}}" href="{{code_id_path}}"><img src="{{static}}/images/popout.png"></a>
|
|
</span>
|
|
<span class="size"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<form {{#embed}}target="_blank"{{/embed}} id="saveform" method="post" action="{{code_id_path}}/save">
|
|
<input type="hidden" name="method" />
|
|
<input type="hidden" name="_csrf" value="{{token}}" />
|
|
</form>
|
|
</div>
|
|
<div id="tip">
|
|
{{#flash_info}}
|
|
<p>{{flash_info}}</p><a class="dismiss" href="#">Dismiss x</a>
|
|
{{/flash_info}}
|
|
{{^flash_info}}
|
|
<p>You can jump to the latest bin by adding <code>/latest</code> to your URL</p><a class="dismiss" href="#">Dismiss x</a>
|
|
{{/flash_info}}
|
|
</div>
|
|
<div id="keyboardHelp" class="modal">
|
|
<div>
|
|
<h2>Keyboard Shortcuts</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th class="shortcut">Shortcut</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>ctrl + [num]</td>
|
|
<td>Toggle nth panel</td>
|
|
</tr>
|
|
<tr>
|
|
<td>esc, ctrl + [num]</td>
|
|
<td>JS Bin ignores this sequence, and returns control to browser shortcuts</td>
|
|
</tr>
|
|
<!--<tr>
|
|
<td>ctrl + §<br />(or `)</td>
|
|
<td>Hide focused panel</td>
|
|
</tr>-->
|
|
<tr>
|
|
<td>ctrl + enter</td>
|
|
<td>Re-render JavaScript.<br>If console visible: run JS in console</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Ctrl + l</td>
|
|
<td>Clear the console</td>
|
|
</tr>
|
|
<tr>
|
|
<td>ctrl + \</td>
|
|
<td>Auto hide navigation bar</td>
|
|
</tr>
|
|
<tr>
|
|
<td>ctrl + /</td>
|
|
<td>Toggle comment on selected lines</td>
|
|
</tr>
|
|
<!-- <tr>
|
|
<td>ctrl + alt + .</td>
|
|
<td>Close current HTML element</td>
|
|
</tr> -->
|
|
<tr>
|
|
<td>cmd + [</td>
|
|
<td>Indents selected lines</td>
|
|
</tr>
|
|
<tr>
|
|
<td>cmd + ]</td>
|
|
<td>Unindents selected lines</td>
|
|
</tr>
|
|
<tr>
|
|
<td>tab</td>
|
|
<td>Code complete (JavaScript only) & Emmet expand</td>
|
|
</tr>
|
|
<tr>
|
|
<td>ctrl + s</td>
|
|
<td>Freeze current Bin</td>
|
|
</tr>
|
|
<tr>
|
|
<td>ctrl + shift + s</td>
|
|
<td>Clone current Bin</td>
|
|
</tr>
|
|
|
|
<tr><td colspan="2"><small><br>JS Bin also supports <a href="http://docs.emmet.io/" target="_blank">Emmet/Zen Coding</a> shortcuts</small></td></tr>
|
|
<tr><td colspan="2"><small><input type="checkbox" id="enablealt"> <label for="enablealt">Use "cmd + alt + key" instead of "cmd + key" (refresh required)</label></small></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div id="urlHelp" class="modal">
|
|
<div>
|
|
<h2>JS Bin URLs</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th class="shortcut">URL</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>/</td>
|
|
<td>Show the full rendered output.<br><small>This content will update in real time as it's updated from the /edit url.</small></td>
|
|
</tr>
|
|
<tr>
|
|
<td>/edit</td>
|
|
<td>Edit the current bin</td>
|
|
</tr>
|
|
<tr>
|
|
<td>/watch</td>
|
|
<td>Follow a Code Casting session</td>
|
|
</tr>
|
|
<tr>
|
|
<td>/embed</td>
|
|
<td>Create an embeddable version of the bin</td>
|
|
</tr>
|
|
<tr>
|
|
<td>/latest</td>
|
|
<td>Load the very latest bin (/latest goes in place of the revision)</td>
|
|
</tr>
|
|
<tr>
|
|
<td>/{{#home}}{{home}}{{/home}}{{^home}}[username]{{/home}}/last</td>
|
|
<td>View the last edited bin for this user</td>
|
|
</tr>
|
|
<tr>
|
|
<td>/{{#home}}{{home}}{{/home}}{{^home}}[username]{{/home}}/last/edit</td>
|
|
<td>Edit the last edited bin for this user</td>
|
|
</tr>
|
|
<tr>
|
|
<td>/{{#home}}{{home}}{{/home}}{{^home}}[username]{{/home}}/last/watch</td>
|
|
<td>Follow the Code Casting session for the latest bin for this user</td>
|
|
</tr>
|
|
<tr>
|
|
<td>/quiet</td>
|
|
<td>Remove analytics and edit button from rendered output</td>
|
|
</tr>
|
|
<tr>
|
|
<td>.js</td>
|
|
<td>Load only the JavaScript for a bin</td>
|
|
</tr>
|
|
<tr>
|
|
<td>.css</td>
|
|
<td>Load only the CSS for a bin</td>
|
|
</tr>
|
|
<tr><td colspan="2"><br><small>Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently.</small></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var template = {{{json_template}}};
|
|
var jsbin = {{{jsbin}}}; tips = {{tips}};
|
|
</script>
|
|
{{^is_production}}
|
|
{{#scripts}}
|
|
<script src="{{static}}{{.}}"></script>
|
|
{{/scripts}}
|
|
{{/is_production}}
|
|
{{#is_production}}
|
|
<script src="{{static}}/js/prod/jsbin-{{version}}.min.js"></script>
|
|
{{{analytics}}}
|
|
{{/is_production}}
|
|
{{#live}}
|
|
<script src="{{static}}/js/spike.js"></script>
|
|
{{/live}}
|
|
</body>
|
|
</html>
|