diff options
Diffstat (limited to 'template/index.tmpl')
| -rw-r--r--[-rwxr-xr-x] | template/index.tmpl | 75 |
1 files changed, 44 insertions, 31 deletions
diff --git a/template/index.tmpl b/template/index.tmpl index 5c09374..abcd66a 100755..100644 --- a/template/index.tmpl +++ b/template/index.tmpl @@ -1,5 +1,5 @@ <!doctype html> -<html lang="en" ng-app="tour"> +<html lang="en" ng-app="tour" data-theme="auto"> <head> {{.AnalyticsHTML}} <meta charset="utf-8"> @@ -7,17 +7,55 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> - <link rel="shortcut icon" sizes="196x196" href="/favicon.ico"> + <script> + (function() { + const theme = document.cookie.match(/prefers-color-scheme=(light|dark|auto)/)?.[1] + if (theme) { + document.querySelector('html').setAttribute('data-theme', theme); + } + }()) + </script> <link rel="stylesheet" href="/static/css/app.css" /> <link rel="stylesheet" href="/static/lib/codemirror/lib/codemirror.css"> - <link href='//fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'> + <link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'> + <link rel="icon" href="/static/img/favicon-gopher.png" sizes="any"> + <link rel="apple-touch-icon" href="/static/img/favicon-gopher-plain.png"/> + <link rel="icon" href="/static/img/favicon-gopher.svg" type="image/svg+xml"> </head> <body> <div class="bar top-bar"> - <a class="left logo" href="/list">Tur Bahasa Pemrograman Go</a> - <div table-of-contents-button=".toc"></div> - <div feedback-button></div> + <div class="left"> + <a href="/"><img src="/static/img/go-logo-white.svg" class="gopherlogo"></a> + <a class="logo" href="/list">Tur Bahasa Go</a> + </div> + <div class="right"> + <button class="header-toggleTheme js-toggleTheme" aria-label="Toggle theme"> + <img + data-value="auto" + class="go-Icon go-Icon--inverted" + height="24" + width="24" + src="/static/img/icons/brightness_6_gm_grey_24dp.svg" + alt="System theme"> + <img + data-value="dark" + class="go-Icon go-Icon--inverted" + height="24" + width="24" + src="/static/img/icons/brightness_2_gm_grey_24dp.svg" + alt="Dark theme"> + <img + data-value="light" + class="go-Icon go-Icon--inverted" + height="24" + width="24" + src="/static/img/icons/light_mode_gm_grey_24dp.svg" + alt="Light theme"> + </button> + <div table-of-contents-button=".toc"></div> + <div feedback-button></div> + </div> </div> <div table-of-contents></div> @@ -25,31 +63,6 @@ <div ng-view ng-cloak class="ng-cloak"></div> <script src="/script.js"></script> - <script> - window.transport = {{.Transport}}(); - window.socketAddr = "{{.SocketAddr}}"; - - function highlight(selector) { - var speed = 50; - var obj = $(selector).stop(true, true) - for (var i = 0; i < 5; i++) { - obj.addClass("highlight", speed) - obj.delay(speed) - obj.removeClass("highlight", speed) - } - } - - function highlightAndClick(selector) { - highlight(selector); - setTimeout(function() { - $(selector)[0].click() - }, 750); - } - - function click(selector) { - $(selector)[0].click(); - } - </script> </body> </html> |