2015-01-28 07:35:57 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
2017-02-22 08:30:25 +02:00
|
|
|
<title>Salet playground</title>
|
2015-02-01 00:24:56 +02:00
|
|
|
|
|
|
|
|
<!-- Bootstrap Latest compiled and minified CSS -->
|
2015-01-28 07:35:57 +02:00
|
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
|
2015-02-01 00:24:56 +02:00
|
|
|
<!-- Bootstrap Optional theme -->
|
2015-01-28 07:35:57 +02:00
|
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
|
2015-02-06 08:14:46 +02:00
|
|
|
<!-- JSTinker Style -->
|
|
|
|
|
<link rel="stylesheet" href="css/jstinker.css" type="text/css">
|
2015-01-28 07:35:57 +02:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<nav class="navbar navbar-default">
|
2015-02-06 08:14:46 +02:00
|
|
|
<!-- Brand and toggle get grouped for better mobile display -->
|
|
|
|
|
<div class="navbar-header">
|
|
|
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toolbar">
|
|
|
|
|
<span class="sr-only">Toggle toolbar</span>
|
|
|
|
|
<span class="icon-bar"></span>
|
|
|
|
|
<span class="icon-bar"></span>
|
|
|
|
|
<span class="icon-bar"></span>
|
|
|
|
|
</button>
|
2017-02-22 08:30:25 +02:00
|
|
|
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> Salet playground</a>
|
2015-02-06 08:14:46 +02:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Collect the nav links, forms, and other content for toggling -->
|
|
|
|
|
<div class="collapse navbar-collapse" id="toolbar">
|
|
|
|
|
<ul class="nav navbar-nav">
|
|
|
|
|
<li id="btnRun"><a href=""><span class="glyphicon glyphicon-play" aria-hidden="true"></span> Run</a></li>
|
|
|
|
|
<li id="btnTidyUp"><a href=""><span class="glyphicon glyphicon-flash" aria-hidden="true"></span> TidyUp</a></li>
|
2015-02-12 05:39:13 +02:00
|
|
|
<li id="btnTogether"><a href=""><span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span> Collaborate</button></li>
|
2015-02-06 08:14:46 +02:00
|
|
|
</ul>
|
|
|
|
|
</div><!-- /.navbar-collapse -->
|
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
<!-- Sidebar -->
|
|
|
|
|
<div id="sidebar">
|
2017-02-22 08:30:25 +02:00
|
|
|
<div class="panel-body">
|
|
|
|
|
<p>You write in HTML, SCSS and CoffeeScript. Press Run to play your game.</p>
|
|
|
|
|
<h4>Legal and Credits</h4>
|
|
|
|
|
<p>Original JSTinker by <a title="John's homepage" href="http://johncipponeri.github.io/">John Cipponeri</a>.</p>
|
|
|
|
|
<p>CSS Design by <a title="Gianni's Twitter" href="https://twitter.com/Hazulu">@Hazulu</a></p>
|
|
|
|
|
<p>Salet is MIT license.</p>
|
|
|
|
|
<p>You own what you write. The code that runs here belongs to you only.</p>
|
|
|
|
|
<p>The code is not saved anywhere. We are not responsible for any loss.</p>
|
|
|
|
|
<h4>Links</h4>
|
|
|
|
|
<p><a href="https://salet.su">Salet website</a></p>
|
|
|
|
|
</div>
|
2015-02-06 08:14:46 +02:00
|
|
|
</div><!-- /sidebar -->
|
|
|
|
|
|
|
|
|
|
<div class="editors">
|
|
|
|
|
<div class="top">
|
|
|
|
|
<!-- HTML Editor -->
|
|
|
|
|
<div class="editorContainer">
|
2017-02-22 08:30:25 +02:00
|
|
|
<div class="editor" id="html-editor"><div id="page">
|
|
|
|
|
<div class="fixed container">
|
|
|
|
|
<div id="tools_wrapper" class="row">
|
|
|
|
|
<div class='ways'>
|
|
|
|
|
<ul class="nav nav-pills" id="ways">
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="buttons">
|
|
|
|
|
<button id="night" class="btn btn-outline-primary">Night mode</button>
|
|
|
|
|
<button id="erase" class="btn btn-outline-danger">Restart</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div> <!-- End of div.tools_wrapper -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div id="content_wrapper" class="row">
|
|
|
|
|
<div id="content" class="content"></div>
|
|
|
|
|
<a name="end_of_content"></a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div> <!-- End of div.page --></div>
|
2015-02-06 08:14:46 +02:00
|
|
|
</div>
|
|
|
|
|
<!-- CSS EDitor -->
|
|
|
|
|
<div class="editorContainer">
|
2017-02-22 08:30:25 +02:00
|
|
|
<div class="editor" id="css-editor">
|
|
|
|
|
</div>
|
2015-02-06 08:14:46 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottom">
|
|
|
|
|
<!-- JS Editor -->
|
|
|
|
|
<div class="editorContainer">
|
2017-02-22 08:30:25 +02:00
|
|
|
<div class="editor" id="js-editor">
|
|
|
|
|
</div>
|
2015-02-06 08:14:46 +02:00
|
|
|
</div>
|
|
|
|
|
<!-- Preview -->
|
|
|
|
|
<div class="editorContainer">
|
2017-02-22 08:30:25 +02:00
|
|
|
<iframe class="editor" id="preview" name="result" frameborder="0">
|
2015-02-06 08:14:46 +02:00
|
|
|
#document
|
|
|
|
|
</iframe>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
2017-02-22 08:30:25 +02:00
|
|
|
|
|
|
|
|
<!-- Latest jQuery from Google CDN -->
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
|
|
|
|
|
<!-- Crypto JS -->
|
|
|
|
|
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>
|
|
|
|
|
<!-- Beautify Web - HTML, CSS, JS -->
|
|
|
|
|
<script src="js/beautify-web/beautify-html.js"></script>
|
|
|
|
|
<script src="js/beautify-web/beautify-css.js"></script>
|
|
|
|
|
<script src="js/beautify-web/beautify.js"></script>
|
|
|
|
|
<!-- Ace Editor -->
|
|
|
|
|
<script src="js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
|
|
|
|
|
<script src="js/ace/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
|
|
|
|
|
<!-- Together -->
|
|
|
|
|
<script src="https://togetherjs.com/togetherjs-min.js"></script>
|
|
|
|
|
<!-- SASS and CoffeeScript -->
|
|
|
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.12.4/coffee-script.min.js' type='text/javascript'></script>
|
|
|
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.3/sass.min.js' type='text/javascript'></script>
|
|
|
|
|
<!-- JSTinker Scripts -->
|
|
|
|
|
<script src="js/jstinker.js"></script>
|
2015-02-01 00:24:56 +02:00
|
|
|
<!-- Set Editor Modes -->
|
2015-01-28 07:35:57 +02:00
|
|
|
<script>
|
2015-02-04 06:12:49 +02:00
|
|
|
ace.require("ace/ext/language_tools");
|
|
|
|
|
|
2015-01-28 07:35:57 +02:00
|
|
|
var htmlEditor = ace.edit("html-editor");
|
|
|
|
|
htmlEditor.setTheme("ace/theme/crimson-editor");
|
|
|
|
|
htmlEditor.getSession().setMode("ace/mode/html");
|
2015-02-04 06:12:49 +02:00
|
|
|
htmlEditor.setOptions({
|
|
|
|
|
enableBasicAutocompletion: true
|
|
|
|
|
});
|
2015-01-28 07:35:57 +02:00
|
|
|
|
|
|
|
|
var cssEditor = ace.edit("css-editor");
|
|
|
|
|
cssEditor.setTheme("ace/theme/crimson-editor");
|
|
|
|
|
cssEditor.getSession().setMode("ace/mode/css");
|
2015-02-04 06:12:49 +02:00
|
|
|
cssEditor.setOptions({
|
|
|
|
|
enableBasicAutocompletion: true
|
|
|
|
|
});
|
2015-01-28 07:35:57 +02:00
|
|
|
|
|
|
|
|
var jsEditor = ace.edit("js-editor");
|
|
|
|
|
jsEditor.setTheme("ace/theme/crimson-editor");
|
|
|
|
|
jsEditor.getSession().setMode("ace/mode/javascript");
|
2015-02-04 06:12:49 +02:00
|
|
|
jsEditor.setOptions({
|
|
|
|
|
enableBasicAutocompletion: true
|
|
|
|
|
});
|
2015-01-28 07:35:57 +02:00
|
|
|
</script>
|
2015-02-06 08:14:46 +02:00
|
|
|
|
2015-01-28 07:35:57 +02:00
|
|
|
</body>
|
2015-02-12 05:39:13 +02:00
|
|
|
</html>
|
