mirror of
https://github.com/jsbin/jsbin.git
synced 2026-01-18 15:18:04 +00:00
357 lines
12 KiB
HTML
357 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html id="jsbin" lang="en">
|
|
<head{{#embed}} class="embed"{{/embed}}>
|
|
<meta charset=utf-8 />
|
|
<title>JS Bin - Collaborative JavaScript Debugging</title>
|
|
<link rel="icon" href="{{root}}/favicon.ico">
|
|
<link rel="stylesheet" href="{{root}}/css/style.css?{{version}}" type="text/css">
|
|
{{#custom_css}}<link rel="stylesheet" href="{{root}}/{{custom_css}}?{{version}}" type="text/css">{{/custom_css}}
|
|
</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}}
|
|
<div class="menu">
|
|
<a href="#actionmenu" class="button button-dropdown group">File</a>
|
|
<div class="dropdown" id="actionmenu">
|
|
<div class="dropdownmenu">
|
|
<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="createnew" class="button group" title="Create fresh bin" href="{{root}}">New</a>
|
|
{{#home}}
|
|
<a href="#" class="button group homebtn">Open</a>
|
|
{{/home}}
|
|
{{#code_id}}
|
|
<a id="clone" title="Create a new copy" class="button clone group" href="/clone">Clone</a>
|
|
{{/code_id}}
|
|
<a id="startingpoint" title="Set as starting code" class="button group" href="{{root}}/save">Save as template</a>
|
|
<a id="download" title="Save to local drive" class="button download group" href="{{root}}/download">Download</a>
|
|
</div>
|
|
</div>
|
|
</div><!--
|
|
--><div class="menu">
|
|
<a href="#include" class="button fake-dropdown group">Add library
|
|
<select id="library"></select>
|
|
</a>
|
|
</div>
|
|
{{/embed}}
|
|
<div id="panels"></div>
|
|
<div class="help">
|
|
<a title="Revert" class="button light group left" id="revert" href="#"><img class="enabled" src="{{root}}/images/revert.png" /><img class="disabled" src="{{root}}/images/revert-disabled.png" /></a>
|
|
<a id="jsbinurl" class="button group light left right gap {{^code_id}}hidden{{/code_id}}" href="{{code_id_path}}">{{code_id_domain}}</a>
|
|
{{^embed}}
|
|
{{#home}}
|
|
<div class="menu">
|
|
<div class="group">
|
|
<a href="#" class="button homebtn">{{home}}</a><a href="#homemenu" class="button button-dropdown"><span class="icon icon-chevron-down"></span></a>
|
|
</div>
|
|
<div class="dropdown" id="homemenu">
|
|
<div class="dropdownmenu">
|
|
<form action="{{root}}/logout" method="POST">
|
|
<input type="hidden" name="_csrf" value="{{token}}" />
|
|
<input type="hidden" name="_redirect" value="{{url}}" />
|
|
<button hidden>Logout</button>
|
|
</form>
|
|
<a id="logout" class="button group" href="{{root}}/logout">Logout</a>
|
|
</div>
|
|
</div>
|
|
</div><!--
|
|
{{/home}}
|
|
{{^home}}
|
|
<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="login">
|
|
<p class="loginFeedback"></p>
|
|
<div>
|
|
<label>Username<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="#">Lost password?</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" type="email"></label>
|
|
</div>
|
|
<div>
|
|
<label>Password<br>
|
|
<input required name="password" type="password"></<label>
|
|
</div>
|
|
<div>
|
|
<input type=submit value="Register">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div><!--
|
|
{{/home}}
|
|
{{/embed}}
|
|
{{#embed}}
|
|
<a href="{{root}}/edit" class="button">Edit</a><!--
|
|
{{/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>
|
|
<a target="_blank" href="http://jsbin.tumblr.com">Tutorials</a>
|
|
<a target="_blank" href="http://jsbin.tumblr.com/faq">FAQ</a>
|
|
<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>
|
|
</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">
|
|
<span class="name"><strong>HTML</strong></span>
|
|
</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"><span class="name"><strong>JavaScript</strong></span></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"><span class="name"><strong id="csslabel">CSS</strong></span></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></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 alerts</button>
|
|
<label>Real-time JS<input type="checkbox" id="enablejs"></label>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<form 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"><p>You can jump to the latest bin by adding <code>/latest</code> to your URL</p><a class="dismiss" href="#">Dismiss x</a></div>
|
|
<!--
|
|
<div id="login" class="loginbox">
|
|
<ul class="nav">
|
|
<li><a href="#regbox">Register</a></li>
|
|
<li><a class="selected" href="#loginbox">Login</a></li>
|
|
</ul>
|
|
<div id="regbox">
|
|
<p>Registration allows you to easily retrieve all your saved bins.</p>
|
|
<form>
|
|
<div>
|
|
<label for="username">Username</label>
|
|
<input required id="username" type="text">
|
|
</div>
|
|
<div>
|
|
<label for="email">Email</label>
|
|
<input id="email" type="email">
|
|
</div>
|
|
<div>
|
|
<label for="password">Password</label>
|
|
<input required id="password" type="password">
|
|
</div>
|
|
<div>
|
|
<input type=submit value="Register">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div id="loginbox">
|
|
<form>
|
|
<div>
|
|
<label for="username">Username or email</label>
|
|
<input id="username" type="text">
|
|
</div>
|
|
<div>
|
|
<label for="password">Password</label>
|
|
<input id="password" type="password">
|
|
</div>
|
|
<div>
|
|
<input type=submit value="Log in">
|
|
<a id="lostpass" href="#">Lost password?</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
-->
|
|
<div id="old-login" class="modal">
|
|
<div>
|
|
<h2>Log in / Register</h2>
|
|
<p id="loginFeedback"></p>
|
|
<p>Logging in will associate your account with all bins you create, and allow you to access that complete history.</p>
|
|
<form action="/login" method="post">
|
|
<div>
|
|
<label for="username">Username</label><input id="username" type="text" name="username">
|
|
</div>
|
|
<div>
|
|
<label for="password">Password</label><input id="password" type="password" name="password">
|
|
</div>
|
|
<div>
|
|
<label for="email">Email</label><input id="email" type="email" name="email">
|
|
<p>Email is just used to reset your password - it's not used for anything else.</p>
|
|
</div>
|
|
<div>
|
|
<input type="submit" value="Log in">
|
|
</div>
|
|
<input type="hidden" name="_csrf" value="{{token}}" />
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div id="keyboardHelp" class="modal">
|
|
<h2>Keyboard Shortcuts</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th class="shortcut">Shortcut</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>ctrl + [panel num]</td>
|
|
<td>Show nth panel</td>
|
|
</tr>
|
|
<tr>
|
|
<td>ctrl + alt + §<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 + \</td>
|
|
<td>Auto hide navigation bar</td>
|
|
</tr>
|
|
<tr>
|
|
<td>ctrl + /</td>
|
|
<td>Toggle comment on single line</td>
|
|
</tr>
|
|
<tr>
|
|
<td>ctrl + alt + .</td>
|
|
<td>Close current HTML element</td>
|
|
</tr>
|
|
<tr>
|
|
<td>esc</td>
|
|
<td>Code complete (JavaScript only) and close open overlays - like this</td>
|
|
</tr>
|
|
<tr>
|
|
<td>ctrl + s</td>
|
|
<td>Save current Bin</td>
|
|
</tr>
|
|
<tr>
|
|
<td>ctrl + shift + s</td>
|
|
<td>Clone current Bin</td>
|
|
</tr>
|
|
<tr>
|
|
<td>tab</td>
|
|
<td>Indents selected lines</td>
|
|
</tr>
|
|
<tr>
|
|
<td>shift + tab</td>
|
|
<td>Unindents selected lines</td>
|
|
</tr>
|
|
<tr><td colspan="2"><br><small>Note that Mac users can use cmd in place of ctrl</small></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div id="urlHelp" class="modal">
|
|
<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</td>
|
|
</tr>
|
|
<tr>
|
|
<td>/edit</td>
|
|
<td>Edit the current bin</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>Where the url may be http://jsbin.com/abc the above url fragments can be added to the url to view it differently.</small></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<script>
|
|
var template = {{{json_template}}};
|
|
var jsbin = {{{jsbin}}}; tips = {{tips}};
|
|
</script>
|
|
{{^production?}}
|
|
<script src="{{root}}/js/debug/jsbin.js"></script>
|
|
{{/production?}}
|
|
{{#production?}}
|
|
<script src="{{root}}/js/jsbin-{{version}}.js"></script>
|
|
{{{analytics}}}
|
|
{{/production?}}
|
|
{{{list_history}}}
|
|
</body>
|
|
</html>
|