<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/txuritan/pen/dpqAmp" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">@font-face {
font-family: font1;
src: url('https://u.pomf.is/idhtno.ttf') format('truetype');
}
@font-face {
font-family: font1;
src: url('https://u.pomf.is/egjvpi.ttf') format('truetype');
font-weight: bold;
}
@font-face {
font-family: font1;
src: url('https://u.pomf.is/lenuio.ttf') format('truetype');
font-style: italic;
}
@font-face {
font-family: font2;
src: url('https://u.pomf.is/bfomin.ttf') format('truetype');
}
*:focus {
outline: none;
}
body {
background-color: #0f0f0f;
color: #898989;
font-family: font1;
}
span.icon {
display: block;
color: #ffffff;
height: 38px;
line-height: 38px;
font-size: 18px;
padding: 0px 9px 0px 9px;
}
span.icon:hover {
background-color: #252525;
}
span.icon.box::before {
content: '\e739';
font-family: font2;
}
span.icon.cancel::before {
content: '\e711';
font-family: font2;
}
span.icon.remove::before {
content: '\e738';
font-family: font2;
}
span.icon.down::before {
content: '\e011';
font-family: font2;
}
span.icon.menu::before {
content: '\ea37';
font-family: font2;
}
.btn {
background-color: #2f2f2f;
height: 38px;
border-width: 0px;
color: #ffffff;
}
.menuBar {
background-color: #141414;
}
.menuBar-2 {
background-color: #1a1a1a;
}
.menuBarLeft {
position: fixed;
top: 1px;
left: 1px;
height: 38px;
right: 50%;
}
.menuBarLeftItem {
float: left;
}
.menuBarLeftItem img {
height: 38px;
}
.menuBarRight {
position: fixed;
top: 1px;
left: 50%;
height: 38px;
right: 1px;
}
.menuBarRightItem {
float: right;
}
.panel {
background-color: #252525;
}
.chrome {
position: fixed;
top: 1px;
left: 1px;
right: 1px;
height: 38px;
}
.secondBar {
position: fixed;
top: 40px;
left: 264px;
height: 38px;
right: 1px;
}
.secondBarItem {
background-color: transparent;
float: left;
height: 38px;
line-height: 38px;
padding: 0px 9px 0px 9px;
}
.secondBarItem:hover {
background-color: #252525;
}
.sideBarTop {
position: fixed;
top: 40px;
left: 1px;
width: 262px;
height: 38px;
z-index: -1;
}
.sideBarBottom {
position: fixed;
top: 79px;
left: 1px;
width: 262px;
bottom: 1px;
overflow: auto;
z-index: -1;
}
.container {
position: fixed;
top: 79px;
left: 264px;
right: 1px;
bottom: 1px;
overflow: auto;
-webkit-transition: bottom 0.5s ease;
transition: bottom 0.5s ease;
z-index: -1;
}
.console {
bottom: 1px;
position: fixed;
height: 0px;
left: 264px;
right: 1px;
overflow: hidden;
-webkit-transition: height 0.5s ease;
transition: height 0.5s ease;
}
.consoleBar {
height: 38px;
}
.consoleContainer {
height: 128px;
overflow: auto;
}
.consoleActive div .container {
bottom: 168px;
}
.consoleActive div .console {
height: 166px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 120px;
margin: 0px;
margin-top: 1px;
z-index: -1;
list-style: none;
padding: 0px;
border: 1px solid #0f0f0f;
border-top-width: 0px;
}
.dropdown-content li {
background-color: #141414;
color: #ffffff;
z-index: 1;
height: 38px;
line-height: 28px;
}
.dropdown-content li.break {
height: 1px;
line-height: 1px;
}
.dropdown-content li.break hr {
margin-top: 10px;
border-color: #0f0f0f;
}
.dropdown-content li ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.dropdown-content li ul li:hover {
background-color: #1a1a1a;
}
.dropdown.active .dropdown-content {
display: block;
}
.dialog {
visibility: hidden;
background-color: #1a1a1a;
position: fixed;
top: 50px;
bottom: 50px;
left: 50px;
right: 50px;
border: 1px solid #0f0f0f;
z-index: 5;
opacity: 0;
-webkit-transition: visibility 0.3s ease, opacity 0.3s ease;
transition: visibility 0.3s ease, opacity 0.3s ease;
}
.dialogChrome {
background-color: #141414;
height: 19px;
position: fixed;
top: 50px;
left: 50px;
right: 50px;
}
.dialogChromeItem {
float: right;
height: 19px;
line-height: 19px;
}
.dialogChromeItem span.icon {
display: block;
color: #ffffff;
height: 19px;
line-height: 19px;
font-size: 15px;
padding: 0px 9px 0px 9px;
}
.dialog.active {
visibility: visible;
opacity: 1;
}
</style></head><body>
<div id="app"></div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://unpkg.com/react@15.3.2/dist/react.js'></script><script src='https://unpkg.com/react-dom@15.3.2/dist/react-dom.js'></script><script src='https://unpkg.com/react-router@2.8.1/umd/ReactRouter.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.12/js/perfect-scrollbar.jquery.min.js'></script>
<script >var _ReactRouter = ReactRouter,
Router = _ReactRouter.Router,
Route = _ReactRouter.Route,
IndexRoute = _ReactRouter.IndexRoute,
Link = _ReactRouter.Link,
hashHistory = _ReactRouter.hashHistory;
var Main = React.createClass({
displayName: "Main",
render: function render() {
return React.createElement(
"div",
null,
React.createElement(
"div",
{ className: "menuBar chrome" },
React.createElement(
"div",
{ className: "menuBarLeft" },
React.createElement(
"div",
{ className: "menuBarLeftItem" },
React.createElement(
"span",
{ className: "dropdown" },
React.createElement("span", { className: "icon menu" }),
React.createElement(
"ul",
{ className: "dropdown-content" },
React.createElement(
"li",
null,
React.createElement(
"ul",
null,
React.createElement(
"li",
null,
"Hello World!"
)
)
),
React.createElement(
"li",
{ className: "break" },
React.createElement("hr", null)
),
React.createElement(
"li",
null,
React.createElement(
"ul",
null,
React.createElement(
"li",
null,
"Hello World!"
)
)
)
)
)
)
),
React.createElement(
"div",
{ className: "menuBarRight" },
React.createElement(
"div",
{ className: "menuBarRightItem" },
React.createElement("span", { className: "icon cancel" })
),
React.createElement(
"div",
{ className: "menuBarRightItem" },
React.createElement("span", { className: "icon box" })
),
React.createElement(
"div",
{ className: "menuBarRightItem" },
React.createElement("span", { className: "icon remove" })
)
)
),
React.createElement(InstanceList, null),
React.createElement(
"div",
{ className: "menuBar-2 secondBar" },
React.createElement(
"button",
{ className: "btn secondBarItem", type: "none", id: "console" },
"Console"
),
React.createElement(
"button",
{ className: "btn secondBarItem", type: "none", id: "edit" },
"Edit"
),
React.createElement(
"button",
{ className: "btn secondBarItem", type: "none", id: "play" },
"Play"
)
),
React.createElement(
"div",
{ className: "container" },
this.props.children
),
React.createElement(
"div",
{ className: "panel console" },
React.createElement("div", { className: "menuBar-2 consoleBar" }),
React.createElement("div", { className: "consoleContainer" })
),
React.createElement(DialogNewInstance, null)
);
}
});
var InstanceList = React.createClass({
displayName: "InstanceList",
render: function render() {
return React.createElement(
"div",
{ className: "sideBar" },
React.createElement("div", { className: "panel sideBarTop" }),
React.createElement("div", { className: "panel sideBarBottom" })
);
}
});
var DialogNewInstance = React.createClass({
displayName: "DialogNewInstance",
render: function render() {
return React.createElement(
"div",
{ id: "dialogNewInstance", className: "dialog" },
React.createElement(
"div",
{ className: "dialogChrome" },
React.createElement(
"div",
{ className: "dialogChromeItem", id: "close" },
React.createElement("span", { className: "icon cancel" })
)
)
);
}
});
var DialogInstanceSettings = React.createClass({
displayName: "DialogInstanceSettings",
render: function render() {
return React.createElement("div", { className: "dialog" });
}
});
var Instance = React.createClass({
displayName: "Instance",
render: function render() {
return React.createElement("div", null);
}
});
ReactDOM.render(React.createElement(
Router,
{ history: hashHistory },
React.createElement(
Route,
{ path: "/", component: Main },
React.createElement(Route, { path: ":instance", component: Instance })
)
), document.getElementById('app'));
$('#console').click(function () {
$('#app').toggleClass('consoleActive');
});
$('.dropdown').click(function (event) {
$(this).toggleClass('active');
});
$('.sideBarBottom').perfectScrollbar();
$('.container').perfectScrollbar();
$('#edit').click(function () {
$('#dialogNewInstance').addClass('active');
});
$('#close').click(function () {
$(this).parent().parent('.dialog').toggleClass('active');
});
// For some reason Codepen tries to open a popup to boomerang
// My blocker blocks it and tells me but never goes away
// This removes it
$('#jq_toast').remove();
//# sourceURL=pen.js
</script>
</body></html>
