logt
Version:
🖥️ A colourful logger for the browser
150 lines (118 loc) • 4.81 kB
HTML
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><title>🖥️ LogT - A colorful logger for the web</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"><script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script><script src="logt.min.js"></script><style>.hidden.menu {
display: none;
}
.masthead.segment {
min-height: 700px;
padding: 1em 0em;
}
.masthead .logo.item img {
margin-right: 1em;
}
.masthead .ui.menu .ui.button {
margin-left: 0.5em;
}
.masthead h1.ui.header {
margin-top: 3em;
margin-bottom: 0em;
font-size: 4em;
font-weight: normal;
}
.masthead h2 {
font-size: 1.7em;
font-weight: normal;
}
.ui.vertical.stripe {
padding: 8em 0em;
}
.ui.vertical.stripe h3 {
font-size: 2em;
}
.ui.vertical.stripe .button+h3,
.ui.vertical.stripe p+h3 {
margin-top: 3em;
}
.ui.vertical.stripe .floated.image {
clear: both;
}
.ui.vertical.stripe p {
font-size: 1.33em;
}
.ui.vertical.stripe .horizontal.divider {
margin: 3em 0em;
}
.quote.stripe.segment {
padding: 0em;
}
.quote.stripe.segment .grid .column {
padding-top: 5em;
padding-bottom: 5em;
}
.footer.segment {
padding: 5em 0em;
}
.secondary.pointing.menu .toc.item {
display: none;
}
@media only screen and (max-width: 700px) {
.ui.fixed.menu {
display: none ;
}
.secondary.pointing.menu .item,
.secondary.pointing.menu .menu {
display: none;
}
.secondary.pointing.menu .toc.item {
display: block;
}
.masthead.segment {
min-height: 350px;
}
.masthead h1.ui.header {
font-size: 2em;
margin-top: 1.5em;
}
.masthead h2 {
margin-top: 0.5em;
font-size: 1.5em;
}
}</style><script>$(document).ready(function () {
// fix menu when passed
$('.masthead').visibility(
{
once: false,
onBottomPassed: function () {
$('.fixed.menu').transition('fade in');
},
onBottomPassedReverse: function () {
$('.fixed.menu').transition('fade out');
}
}
);
// create sidebar and attach to menu open
$('.ui.sidebar').sidebar('attach events', '.toc.item');
});
var logger = createLogger(5);
function logError() {
var logTag = '.logError';
logger.error(logTag, new Error('sample error'));
}
function logWarn() {
var logTag = '.logWarn';
logger.warn(logTag, 'sample warning');
}
function logInfo() {
var logTag = '.logInfo';
logger.info(logTag, 'sample info');
}
function logVerbose() {
var logTag = '.logVerbose';
logger.verbose(logTag, 'sample verbose');
}
function logDebug() {
var logTag = '.logDebug';
logger.debug(logTag, 'sample debug');
}
function logSilly() {
var logTag = '.logSilly';
logger.silly(logTag, 'sample silly');
}</script><script defer="defer" src="logt.min.js"></script></head><body><div class="pusher"><div class="ui inverted vertical masthead center aligned segment"><div class="ui text"><h1 class="ui inverted header">LogT</h1><h2>Click a button to see a log in the developer console</h2><br/><button class="ui huge red button" onclick="logError()">Error</button> <button class="ui huge orange button" onclick="logWarn()">Warn</button> <button class="ui huge olive button" onclick="logInfo()">Info</button> <button class="ui huge violet button" onclick="logVerbose()">Verbose</button> <button class="ui huge primary button" onclick="logDebug()">Debug</button> <button class="ui huge green button" onclick="logSilly()">Silly</button><h2><a href="https://github.com/sidhantpanda/logt">Installation and usage <i class="github icon"></i></a></h2></div></div><div class="ui vertical stripe segment"><div class="ui middle aligned stackable grid container"><div class="row centered"><div class="twelve wide column middle aligned"><h2>Try it in the developer console!</h2><br/><script src="https://gist.github.com/sidhantpanda/38f8ff3f1bdcd93f6d3f56a4783c4b34.js"></script></div></div><div class="row"><div class="eight wide column"></div></div></div></div></div></body></html>