forked from mirrors/Scribe.js
328 lines
11 KiB
HTML
328 lines
11 KiB
HTML
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<title>TITLE</title>
|
||
|
|
<link rel="stylesheet" href="//mus.ec/stylesheets/prototype.typography.css"><link rel="stylesheet" href="https://d1rk5ck21lz9pi.cloudfront.net/stylesheets/prototype.reset.css.gz">
|
||
|
|
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
function Transform3d(jObject) {
|
||
|
|
this.desc = "";
|
||
|
|
this.obj = jObject;
|
||
|
|
|
||
|
|
this.translate = function (x, y, z) {
|
||
|
|
this.desc += ' translate3d(' + x + ',' + y + ',' + z + ')';
|
||
|
|
return this;
|
||
|
|
};
|
||
|
|
this.scale = function (x, y, z) {
|
||
|
|
this.desc += ' scale3d(' + x + ',' + y + ',' + z + ')';
|
||
|
|
return this;
|
||
|
|
};
|
||
|
|
this.rotate = function (x, y, z) {
|
||
|
|
this.desc += ' rotate3d(' + x + ',' + y + ',' + z + ')';
|
||
|
|
return this;
|
||
|
|
};
|
||
|
|
this.apply = function () {
|
||
|
|
|
||
|
|
var obj = this.obj;
|
||
|
|
var desc = this.desc;
|
||
|
|
|
||
|
|
(obj = $(obj)).css({
|
||
|
|
'-webkit-transform': desc,
|
||
|
|
'-ms-transform': desc,
|
||
|
|
'-moz-transform': desc,
|
||
|
|
'transform': desc,
|
||
|
|
});
|
||
|
|
|
||
|
|
return obj;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
$.fn.transform3d = function () {
|
||
|
|
return new Transform3d(this);
|
||
|
|
};
|
||
|
|
|
||
|
|
$.fn.center = function () {
|
||
|
|
this.css("position", "absolute");
|
||
|
|
this.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) +
|
||
|
|
$(window).scrollTop()) + "px");
|
||
|
|
this.css("left", Math.max(0, (($(window).width() - this.outerWidth()) / 2) +
|
||
|
|
$(window).scrollLeft()) + "px");
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
|
||
|
|
$.fn.centerInParent = function () {
|
||
|
|
this.css("position", "absolute");
|
||
|
|
this.css("top", Math.max(0, ((this.parent().height() - this.outerHeight()) / 2) +
|
||
|
|
this.parent().scrollTop()) + "px");
|
||
|
|
this.css("left", Math.max(0, ((this.parent().width() - this.outerWidth()) / 2) +
|
||
|
|
this.parent().scrollLeft()) + "px");
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
html,
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
border: none;
|
||
|
|
float: none;
|
||
|
|
display: block;
|
||
|
|
padding: 0;
|
||
|
|
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
|
||
|
|
background: #161D25;
|
||
|
|
overflow: hidden;
|
||
|
|
position: relative;
|
||
|
|
width:100%;
|
||
|
|
height:100%;
|
||
|
|
}
|
||
|
|
div {
|
||
|
|
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
|
||
|
|
font-size: 11px;
|
||
|
|
}
|
||
|
|
html {
|
||
|
|
background: #161D25;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
border-left: 1px solid rgba(255, 255, 255, 0.12);
|
||
|
|
}
|
||
|
|
.animator {
|
||
|
|
-webkit-transition: all 500ms ease-out;
|
||
|
|
transition: all 500ms ease-out;
|
||
|
|
-ms-transition: all 500ms ease-out;
|
||
|
|
-moz-transition: all 500ms ease-out;
|
||
|
|
-webkit-transform: translate3d(0,0,0);
|
||
|
|
-ms-transform: translate3d(0,0,0);
|
||
|
|
-moz-transform: translate3d(0,0,0);
|
||
|
|
transform: translate3d(0,0,0);
|
||
|
|
-webkit-backface-visibility: hidden;
|
||
|
|
}
|
||
|
|
.log-time {
|
||
|
|
background: none;
|
||
|
|
color: rgba(255, 255, 255, 0.24);
|
||
|
|
padding: 2px 5px;
|
||
|
|
margin-right: 2px;
|
||
|
|
margin-left: -1px;
|
||
|
|
font-size: 11px;
|
||
|
|
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
|
||
|
|
}
|
||
|
|
.log-type {
|
||
|
|
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
|
||
|
|
background: #04C25F;
|
||
|
|
color: #000;
|
||
|
|
padding: 2px 4px;
|
||
|
|
margin-right: 2px;
|
||
|
|
font-size: 11px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
font-size: 9px;
|
||
|
|
letter-spacing: 1px;
|
||
|
|
font-weight: 700;
|
||
|
|
border-radius: 3px;
|
||
|
|
}
|
||
|
|
.log-line {
|
||
|
|
height: auto;
|
||
|
|
line-height: 15px;
|
||
|
|
color: #BEBEBE;
|
||
|
|
font-size: 11px;
|
||
|
|
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
|
||
|
|
}
|
||
|
|
.button,
|
||
|
|
.selected {
|
||
|
|
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
|
||
|
|
background: #2C3338;
|
||
|
|
text-align: center;
|
||
|
|
width: 100%;
|
||
|
|
line-height: 35px;
|
||
|
|
height: 35px;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11);
|
||
|
|
}
|
||
|
|
.selected {
|
||
|
|
background: #4D5961;
|
||
|
|
}
|
||
|
|
a {
|
||
|
|
background: none;
|
||
|
|
text-decoration: none;
|
||
|
|
font-size: 11px;
|
||
|
|
color: #C2C2C2;
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu {
|
||
|
|
border-radius:3px;background:url(http://i.imgur.com/LnFUuFm.png) center center no-repeat;background-size:67%;cursor:pointer;background-color:#2980b9;
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.05)
|
||
|
|
}
|
||
|
|
.menu-item {
|
||
|
|
border-bottom: 1px solid rgba(255,255,255,0.15);
|
||
|
|
color: #DDD;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 2px;
|
||
|
|
height: 40px;
|
||
|
|
line-height: 40px;
|
||
|
|
text-indent: 14px;
|
||
|
|
font-family: "Museo Sans";
|
||
|
|
font-size: 9px;
|
||
|
|
cursor:pointer;
|
||
|
|
font-weight: 900;
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu-item-selected {
|
||
|
|
background:rgba(255,255,255,0.2);
|
||
|
|
border-bottom-color:transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.back {
|
||
|
|
background-image:url(http://i.imgur.com/hkF73Yp.png?1);
|
||
|
|
background-size:30% auto;background-color: #c0392b;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.date {
|
||
|
|
height: 200px;
|
||
|
|
line-height: 49px;
|
||
|
|
width: 200px;
|
||
|
|
margin: 10px;
|
||
|
|
background: #393E41;
|
||
|
|
color: rgba(255, 255, 255, 0.39);
|
||
|
|
text-align: center;
|
||
|
|
/* border-radius: 5px; */
|
||
|
|
font-family: "Museo Sans";
|
||
|
|
text-transform: uppercase;
|
||
|
|
font-weight: 300;
|
||
|
|
letter-spacing: 1px;
|
||
|
|
font-size: 53px;
|
||
|
|
text-align: left;
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
||
|
|
cursor:pointer;
|
||
|
|
display:inline-block;
|
||
|
|
margin-right:0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.date-month {
|
||
|
|
font-family: "Museo Sans";
|
||
|
|
text-align: center;
|
||
|
|
font-weight: 700;
|
||
|
|
letter-spacing: 2px;
|
||
|
|
padding-top: 6px;
|
||
|
|
font-size: 21px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.date-year {
|
||
|
|
font-family: "Museo Sans";
|
||
|
|
text-align: center;
|
||
|
|
font-weight: 300;
|
||
|
|
letter-spacing: 2px;
|
||
|
|
margin-top: 21px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.date-day {
|
||
|
|
text-align: center;
|
||
|
|
width: 100%;
|
||
|
|
font-size: 92px;
|
||
|
|
font-family: "Museo Sans";
|
||
|
|
margin-top: 25px;
|
||
|
|
color: #FFF;
|
||
|
|
font-weight: 100;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body style="position:relative;left:0;top:0;bottom:0;">
|
||
|
|
<div class = "back" style="position:absolute;left:0;top:50px;bottom:0;width:30px;cursor:pointer;z-index:900;">
|
||
|
|
</div>
|
||
|
|
<div style="position:absolute;left:0;top:0;right:0;height:50px;background:#34495e;">
|
||
|
|
<div id = "menu-container" style="position:absolute;left:0;top:0;right:0;height:50px;">
|
||
|
|
<div id = "menu" class = "menu" style="position:absolute;left:10px;top:9px;height:30px;width:40px;"></div>
|
||
|
|
<div id = "path" style="position:absolute;left:70px;top:9px;height:30px;width:500px;color:#DDD;line-height: 33px;font-weight:bold;color:#FFF;text-transform: uppercase;font-weight: 300;letter-spacing: 1px;font-size: 9px;"></div>
|
||
|
|
</div>
|
||
|
|
<div style="position:absolute;right:0;top:5px;bottom:5px;width: 168px;right: 5px;background: url(http://i.imgur.com/0Jg6k6g.png) center right no-repeat;background-size: 66%;"></div>
|
||
|
|
</div>
|
||
|
|
<div id = "sidebar" class = "shift" style="position:absolute;left:30px;top:50px;right:0;width:250px;background:#000;border-right:1px solid rgba(255,255,255,0.15);bottom:0;z-index:800;box-shadow: 50px 0 50px -50px #000;">LOGGERS
|
||
|
|
</div>
|
||
|
|
<div class = "shift" style="position:absolute;left:30px;top:50px;bottom:0;right:0;">
|
||
|
|
<div style="width:100%;height:100%;overflow:auto;">
|
||
|
|
<div id = "dates" style = "width:100%;height:auto;">LOGGER_DATES</div>
|
||
|
|
<div id = "content" style="width:100%;height:auto;"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
var activeDate = "may_19_14";
|
||
|
|
var activeMenuItem = undefined;
|
||
|
|
var logPath = "LOG_PATH";
|
||
|
|
var username = "LOGGER_USERNAME";
|
||
|
|
|
||
|
|
$("#sidebar").on('click', '.menu-item', function(){
|
||
|
|
$(".menu-item").removeClass('menu-item-selected');
|
||
|
|
$(this).addClass('menu-item-selected');
|
||
|
|
var type = $(this).html();
|
||
|
|
activeMenuItem = type;
|
||
|
|
var date = activeDate;
|
||
|
|
$.get("log?type=" + type + "&date=" + date, {}, function(data){
|
||
|
|
$("#content").html(data.data);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
$("#path").html(logPath + "/log/" + activeDate + "/" + username + "/app." + type);
|
||
|
|
|
||
|
|
toggleSidebar();
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".date").click(function(){
|
||
|
|
activeDate = $(this).attr('data-raw');
|
||
|
|
$("#dates").css("display", "none");
|
||
|
|
|
||
|
|
var types = $(this).attr("data-types").split(',');
|
||
|
|
if(types) {
|
||
|
|
var menuItems = "";
|
||
|
|
for(var i = 0; i < types.length; i++)
|
||
|
|
menuItems += '<div class = "menu-item" id="menu-' + types[i] + '">' + types[i] + '</div>';
|
||
|
|
$("#sidebar").html(menuItems);
|
||
|
|
($('#menu-' + activeMenuItem).length > 0 ? $('#menu-' + activeMenuItem) : $("#sidebar").children().eq(0)).trigger('click');
|
||
|
|
}
|
||
|
|
|
||
|
|
toggleSidebar(false);
|
||
|
|
$(".shift").css("left", "30px");
|
||
|
|
$(".back").css("width", "30px");
|
||
|
|
$("#menu-container").transform3d().translate(0, 0, 0).apply()
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".back").click(function(){
|
||
|
|
$(".shift").css("left", "0");
|
||
|
|
$(".back").css("width", "0");
|
||
|
|
$("#menu-container").transform3d().translate("-52px", 0, 0).apply();
|
||
|
|
$("#dates").css("display", "block");
|
||
|
|
$("#content").html("");
|
||
|
|
$("#path").html("Select a date to begin");
|
||
|
|
toggleSidebar(false);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
var sidebarVisible = false;
|
||
|
|
|
||
|
|
function toggleSidebar(f){
|
||
|
|
sidebarVisible = typeof f === 'boolean' ? f : !sidebarVisible;
|
||
|
|
if(!sidebarVisible) $("#sidebar").transform3d().translate("-300px", 0, 0).apply();
|
||
|
|
else $("#sidebar").transform3d().translate(0, 0, 0).apply();
|
||
|
|
}
|
||
|
|
|
||
|
|
$("#menu").click(function(){
|
||
|
|
toggleSidebar();
|
||
|
|
});
|
||
|
|
|
||
|
|
$(document).ready(function(){
|
||
|
|
$(".shift").css("left", "0").addClass("animator");
|
||
|
|
$(".back").css("width", "0").addClass("animator");
|
||
|
|
$("#menu-container").transform3d().translate("-52px", 0, 0).apply().addClass('animator');
|
||
|
|
$("#sidebar").transform3d().translate("-300px", 0, 0).apply().addClass('animator');
|
||
|
|
$("#path").html("Select a date to begin");
|
||
|
|
})
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|