diff options
Diffstat (limited to 'pages')
| -rw-r--r-- | pages/index.mustache | 25 | ||||
| -rw-r--r-- | pages/log.mustache | 59 | ||||
| -rw-r--r-- | pages/style.css | 89 |
3 files changed, 173 insertions, 0 deletions
diff --git a/pages/index.mustache b/pages/index.mustache new file mode 100644 index 0000000..cc0a8f4 --- /dev/null +++ b/pages/index.mustache @@ -0,0 +1,25 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Ircbrowse2</title> + <link rel="stylesheet" href="/style.css"> +</head> +<body> + <div id="gridwrapper" data-page="index"> + <main> + <h1>改めて ircbrowse</h1> + {{#networks}} + <h2>{{name}}</h2> + {{#channels}} + <a class="chanlink" href="/log/{{alias}}">{{name}}</a><br> + {{/channels}} + {{/networks}} + </main> + <footer> + An IRC log viewer by + <a href="https://tomsmeding.com">Tom Smeding</a>. + </footer> + </div> +</body> +</html> diff --git a/pages/log.mustache b/pages/log.mustache new file mode 100644 index 0000000..24b7b78 --- /dev/null +++ b/pages/log.mustache @@ -0,0 +1,59 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Ircbrowse2: {{channel}} ({{network}})</title> + <link rel="stylesheet" href="/style.css"> +</head> +<body> + <div id="gridwrapper" data-page="withheader"> + <header> + <a href="/" class="hdritem">Home</a> + <span class="hdrspacer"></span> + <span class="hdrchannel">{{network}}/{{channel}}</span> + <span class="hdrspacer"></span> + <a href="/cal/{{alias}}" class="hdritem">Calendar</a> + </header> + <main> + <h1>Logs for {{channel}} on {{network}}</h1> + <div id="pagepicker"> + {{#picker}} + Page + {{#prevpage}} + <a href="?page=1">1</a> + .. + <a href="?page={{prevpage}}"><Prev</a> + {{/prevpage}} + {{#leftnums}} + <a href="?page={{.}}">{{.}}</a> + {{/leftnums}} + <b>{{curnum}}</b> + {{#rightnums}} + <a href="?page={{.}}">{{.}}</a> + {{/rightnums}} + {{#nextpage}} + <a href="?page={{nextpage}}">Next></a> + .. + <a href="?page={{npages}}">{{npages}}</a> + {{/nextpage}} + {{/picker}} + <span style="margin: 0 10px 0 11px">—</span> + {{totalevents}} events total. + </div> + <table id="events"><tbody> + {{#events}} + <tr{{#classlist}} class="{{.}}"{{/classlist}}> + <td>{{datetime}}</td> + <td>{{#nickwrap1}}<span class="nickwrap">{{nickwrap1}}</span>{{/nickwrap1}}{{nick}}{{#nickwrap2}}<span class="nickwrap">{{nickwrap2}}</span>{{/nickwrap2}}</td> + <td>{{message}}</td> + </tr> + {{/events}} + </tbody></table> + </main> + <footer> + An IRC log viewer by + <a href="https://tomsmeding.com">Tom Smeding</a>. + </footer> + </div> +</body> +</html> diff --git a/pages/style.css b/pages/style.css new file mode 100644 index 0000000..e7c850a --- /dev/null +++ b/pages/style.css @@ -0,0 +1,89 @@ +html, body { + margin: 0; +} + +body { + font-family: sans-serif; +} + +#gridwrapper { + min-height: 100vh; + display: grid; +} + +#gridwrapper[data-page="index"] { + grid-template-rows: 1fr auto; +} + +#gridwrapper[data-page="withheader"] { + grid-template-rows: auto 1fr auto; +} + +header { + background-color: #ddd; + padding: 10px; + padding-left: 20px; +} + +main { + margin: 0 20px 30px 20px; +} + +footer { + background-color: #eee; + padding: 20px; + font-size: smaller; + color: #333; +} + +.hdrspacer { + display: inline-block; + width: 15px; +} + +.hdrchannel { + font-size: larger; + font-weight: bold; + vertical-align: middle; + margin-left: 15px; +} + +.hdritem { + margin-top: auto; + margin-bottom: auto; +} + +/* index page */ +.chanlink { + font-weight: bold; + font-size: large; +} + +/* log page */ +#pagepicker { + display: inline-block; + background-color: #eee; + padding: 5px; + border-radius: 5px; + margin-bottom: 10px; +} + +table#events td { + padding: 2px; + vertical-align: top; +} + +table#events td:nth-child(2) { + text-align: right; +} + +table#events td:nth-child(-n + 2) { + white-space: nowrap; + padding-right: 10px; +} + +span.nickwrap { color: #888; } +table#events tr.ev-meta > td:nth-child(n + 2) { color: #666; } +table#events tr.ev-act > td:nth-child(n + 2) { font-style: italic; } +table#events tr.ev-notice > td:nth-child(n + 2) { font-weight: bold; } +table#events tr.ev-parseerror > td:nth-child(n + 2) { color: red; } |