|
| 1 | +<!DOCTYPE html> |
| 2 | +<html> |
| 3 | +<head> |
| 4 | +<title>Extended Log — Barecss Style</title> |
| 5 | +<meta name="viewport" content="width=device-width, initial-scale=1" /> |
| 6 | +<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bare-css@2.0.3/css/bare.min.css" /> |
| 7 | +<style> |
| 8 | +:focus {outline:0} |
| 9 | +body {background:white;margin:12px} |
| 10 | +/* STATUS-COLOR-TAGS */ |
| 11 | +tag[debug] {color:black;background:#DFF2BF} |
| 12 | +tag[info] {color:black;background:#BDE5F8} |
| 13 | +tag[notice] {color:black;background:#FEEFB3} |
| 14 | +tag[warning] {color:black;background:#FFCCBA} |
| 15 | +tag[error] {color:black;background:#FFBABA} |
| 16 | +tag[critical] {color:white;background:#D8000C} |
| 17 | +tag[alert] {color:white;background:blueviolet} |
| 18 | +tag[emergency] {color:white;background:deeppink} |
| 19 | +tag[gau] {color:white;background:black} |
| 20 | +/* TABLE-SORT */ |
| 21 | +.tablesorter-header { /* COLUMNE HEADER */ |
| 22 | + background-repeat:no-repeat;background-position:center right;cursor:pointer |
| 23 | +} |
| 24 | +.tablesorter-headerUnSorted { /* UNSORTED IMAGE */ |
| 25 | + background-image:url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw) |
| 26 | +} |
| 27 | +.tablesorter-headerAsc { /* UP IMAGE */ |
| 28 | + background-image:url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7) |
| 29 | +} |
| 30 | +.tablesorter-headerDesc { /* DOWN IMAGE */ |
| 31 | + background-image:url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7) |
| 32 | +} |
| 33 | +.sorter-false { background-image:none !important } |
| 34 | +/* RESPONSIVE TABLE */ |
| 35 | +@media screen and (max-width:600px){thead{display:none} |
| 36 | + tr{display:block;border-bottom:2px solid #ddd} |
| 37 | + td{display:block;text-align:right;font-size:.9em} |
| 38 | + td:before{content:attr(data-label);float:left;font-weight:bold} |
| 39 | +} |
| 40 | +</style> |
| 41 | +<link href="data:image/x-icon;base64,AAABAAEAEBAQAAAAAAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAnYBjAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEREREREQAAERERERERAAAAAAAAAAAAAAAAAAAAAAAAERERERERAAAREREREREAAAAAAAAAAAAAAAAAAAAAAAAREREREREAABEREREREQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//wAA//8AAP//AADAAwAAwAMAAP//AAD//wAAwAMAAMADAAD//wAA//8AAMADAADAAwAA//8AAP//AAD//wAA" rel="icon" type="image/x-icon" /> |
| 42 | +<script src="//code.jquery.com/jquery-2.1.1.min.js"></script> |
| 43 | +<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/jquery.tablesorter.min.js"></script> |
| 44 | +<script> |
| 45 | + $(document).ready(function(){ $("table").tablesorter({dateFormat:"yyyymmdd"}); }); |
| 46 | +</script> |
| 47 | +</head> |
| 48 | +<body> |
| 49 | +<section> |
| 50 | +<h2>Extended Log</h2> |
| 51 | +<table xx> |
| 52 | + <thead> |
| 53 | + <tr> |
| 54 | + <th>Date/Time</th> |
| 55 | + <th>Programm</th> |
| 56 | + <th>Message</th> |
| 57 | + <th>Status</th> |
| 58 | + </tr> |
| 59 | + </thead> |
| 60 | + <tbody> |
| 61 | +<!-- </tbody></table></section></body></html> --> |
0 commit comments