mirror of
https://gitlab.com/Oreolek/salet-playground.git
synced 2024-05-14 23:18:31 +03:00
225 lines
13 KiB
HTML
225 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Create a new tinker - JSTinker</title>
|
||
<!-- JSTinker Style -->
|
||
<link rel="stylesheet" href="css/style.css" type="text/css">
|
||
<!-- Latest jQuery from Google CDN -->
|
||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.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>
|
||
<!-- JSTinker Scripts -->
|
||
<script src="js/index.js"></script>
|
||
<!-- Latest compiled and minified CSS -->
|
||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
|
||
<!-- Optional theme -->
|
||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
|
||
<!-- Latest compiled and minified JavaScript -->
|
||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
|
||
</head>
|
||
<body>
|
||
<nav class="navbar navbar-default">
|
||
<div class="container-fluid">
|
||
<!-- 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>
|
||
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> JSTinker</a>
|
||
</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="btnSave"><a href=""><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Save</a></li>
|
||
<li id="btnTidyUp"><a href=""><span class="glyphicon glyphicon-flash" aria-hidden="true"></span> TidyUp</a></li>
|
||
</ul>
|
||
</div><!-- /.navbar-collapse -->
|
||
|
||
<!-- Dialog Modals -->
|
||
<div class="modal fade" id="modalSave" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" style="display: none;">
|
||
<div class="modal-dialog modal-lg">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||
<h4 class="modal-title" id="mySmallModalLabel">Save URL</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<!-- Content provided by JS -->
|
||
</div>
|
||
</div><!-- /.modal-content -->
|
||
</div><!-- /.modal-dialog -->
|
||
</div>
|
||
|
||
<div class="row">
|
||
<!-- Sidebar -->
|
||
<div class="col-md-3" id="sidebar">
|
||
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
|
||
<!-- Frameworks & Extensions -->
|
||
<div class="panel panel-default">
|
||
<div class="panel-heading" role="tab" id="headingOne">
|
||
<h4 class="panel-title">
|
||
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||
Frameworks & Extensions
|
||
</a>
|
||
</h4>
|
||
</div>
|
||
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
|
||
<div class="panel-body">
|
||
<div class="dropdown">
|
||
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
|
||
No-Library (pure JS)
|
||
<span class="caret"></span>
|
||
</button>
|
||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
|
||
<li role="presentation"><a role="menuitem" tabindex="-1" href="">No-Library (pure JS)</a></li>
|
||
</ul>
|
||
</div>
|
||
<br>
|
||
<div class="dropdown">
|
||
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
|
||
onLoad
|
||
<span class="caret"></span>
|
||
</button>
|
||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
|
||
<li role="presentation"><a role="menuitem" tabindex="-1" href="">onLoad</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Tinker Options -->
|
||
<div class="panel panel-default">
|
||
<div class="panel-heading" role="tab" id="headingTwo">
|
||
<h4 class="panel-title">
|
||
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
|
||
Tinker Options
|
||
</a>
|
||
</h4>
|
||
</div>
|
||
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
|
||
<div class="panel-body">
|
||
Stuff
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- External Resources -->
|
||
<div class="panel panel-default">
|
||
<div class="panel-heading" role="tab" id="headingThree">
|
||
<h4 class="panel-title">
|
||
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
|
||
External Resources
|
||
</a>
|
||
</h4>
|
||
</div>
|
||
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
|
||
<div class="panel-body">
|
||
Stuff
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Languages -->
|
||
<div class="panel panel-default">
|
||
<div class="panel-heading" role="tab" id="headingFour">
|
||
<h4 class="panel-title">
|
||
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
|
||
Languages
|
||
</a>
|
||
</h4>
|
||
</div>
|
||
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
|
||
<div class="panel-body">
|
||
Stuff
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Ajax Requests
|
||
<div class="panel panel-default">
|
||
<div class="panel-heading" role="tab" id="headingFive">
|
||
<h4 class="panel-title">
|
||
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
|
||
Ajax Requests
|
||
</a>
|
||
</h4>
|
||
</div>
|
||
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
|
||
<div class="panel-body">
|
||
Stuff
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
<!-- Legal, Credits and Links -->
|
||
<div class="panel panel-default">
|
||
<div class="panel-heading" role="tab" id="headingSix">
|
||
<h4 class="panel-title">
|
||
<a data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="true" aria-controls="collapseSix">
|
||
Legal, Credits and Links
|
||
</a>
|
||
</h4>
|
||
</div>
|
||
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
|
||
<div class="panel-body">
|
||
<p>Created and maintained by <a title="John's homepage" href="http://johncipponeri.github.io/">John Cipponeri</a>.</p>
|
||
<p>Hosted by <a href="https://pages.github.com/">GitHub Pages</a>.</p>
|
||
<p>Special thanks to <a href="http://jsfiddle.net" target="_new">JSFiddle</a> as this is an open source clone of it.</p>
|
||
<p><strong>License</strong></p>
|
||
<p>All code belongs to the poster and no license is enforced.</p>
|
||
<p>JSTinker or its author are not responsible or liable for any loss or damage of any kind during the usage of provided code.</p>
|
||
<p><strong>Links</strong></p>
|
||
For updates please follow my
|
||
<a href="http://twitter.com/johncipponeri/" target="_new">tweets</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- HTML Editor -->
|
||
<div class="col-md-4 editorContainer">
|
||
<div class="editor" id="html-editor"></div>
|
||
</div>
|
||
<!-- CSS EDitor -->
|
||
<div class="col-md-4 editorContainer">
|
||
<div class="editor" id="css-editor"></div>
|
||
</div>
|
||
<!-- JS Editor -->
|
||
<div class="col-md-4 editorContainer">
|
||
<div class="editor" id="js-editor"></div>
|
||
</div>
|
||
<!-- Preview -->
|
||
<div class="col-md-4 editorContainer">
|
||
<div class="editor" id="preview">
|
||
<!-- Editor content goes here -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- /.container-fluid -->
|
||
</nav>
|
||
|
||
<!-- Editor Script -->
|
||
<script>
|
||
var htmlEditor = ace.edit("html-editor");
|
||
htmlEditor.setTheme("ace/theme/crimson-editor");
|
||
htmlEditor.getSession().setMode("ace/mode/html");
|
||
|
||
var cssEditor = ace.edit("css-editor");
|
||
cssEditor.setTheme("ace/theme/crimson-editor");
|
||
cssEditor.getSession().setMode("ace/mode/css");
|
||
|
||
var jsEditor = ace.edit("js-editor");
|
||
jsEditor.setTheme("ace/theme/crimson-editor");
|
||
jsEditor.getSession().setMode("ace/mode/javascript");
|
||
</script>
|
||
</body>
|
||
</html> |