<!DOCTYPE html> <html lang="de"> <head> <title><%= stash('title') // 'travelynx' %></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Checkin-Service und Verspätungslog für Bahnfahrten"> <meta name="theme-color" content="#673ab7"> <meta name="apple-mobile-web-app-title" content="Travelynx"> % while (my ($key, $value) = each %{stash('twitter') // {}}) { <meta name="twitter:<%= $key %>" content="<%= $value %>"> % } % while (my ($key, $value) = each %{stash('opengraph') // {}}) { <meta property="og:<%= $key %>" content="<%= $value %>"> % } % my $av = 'v81'; # asset version <link rel="icon" type="image/png" href="/static/<%= $av %>/icons/icon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/static/<%= $av %>/icons/icon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/static/<%= $av %>/icons/icon-96x96.png" sizes="96x96"> <link rel="apple-touch-icon" href="/static/<%= $av %>/icons/touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="180x180" href="/static/<%= $av %>/icons/touch-icon-180x180.png"> <link rel="apple-touch-icon" sizes="152x152" href="/static/<%= $av %>/icons/touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="167x167" href="/static/<%= $av %>/icons/touch-icon-167x167.png"> <link rel="manifest" href="/static/<%= $av %>/manifest.json"> % if (session('theme') and session('theme') eq 'dark') { %= stylesheet "/static/${av}/css/dark.min.css", id => 'theme' % } % else { %= stylesheet "/static/${av}/css/light.min.css", id => 'theme' % } <script> function addStyleSheet(name, id) { var path = '/static/<%=$av%>/css/' + name + '.min.css'; var old = document.getElementById(id); if (old && (old.href != path)) { old.href = path; document.cookie = 'theme=' + name; } } var otherTheme = { 'dark': 'light', 'light': 'dark', }; var currentTheme = localStorage.getItem('theme'); if (!otherTheme.hasOwnProperty(currentTheme)) { currentTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; } addStyleSheet(currentTheme, 'theme'); </script> %= stylesheet "/static/${av}/css/material-icons.css" % if (stash('with_map')) { %= stylesheet "/static/${av}/leaflet/leaflet.css" % } %= javascript "/static/${av}/js/jquery-3.4.1.min.js" %= javascript "/static/${av}/js/materialize.min.js" % my $min = ".min"; % if (app->mode eq 'development') { % $min = q{}; % } %= javascript "/static/${av}/js/travelynx-actions${min}.js" % if (stash('with_geolocation')) { %= javascript "/static/${av}/js/geolocation${min}.js" % } % if (stash('with_autocomplete')) { %= javascript "/dyn/${av}/autocomplete.js?backend_id=" . (stash('backend_id') // 1), defer => undef % } % if (stash('with_map')) { %= javascript "/static/${av}/leaflet/leaflet.js" % } </head> % my $acc = is_user_authenticated() && current_user(); <body> <div class="navbar-fixed"> <nav class="deep-purple"> <div class="nav-wrapper container"> <a href="/" class="brand-logo left"><span class="ca">tr</span><span class="cb">av</span><span class="cc">e</span><span class="cd">ly</span><span class="ce">nx</span></a> <ul id="nav-mobile" class="right"> <li class="loading"> <div class="preloader-wrapper small" style="margin-top: 0.5em; margin-bottom: -1em;"> <div class="spinner-layer spinner-blue-only"> <div class="circle-clipper left"> <div class="circle"></div> </div><div class="gap-patch"> <div class="circle"></div> </div><div class="circle-clipper right"> <div class="circle"></div> </div> </div> </div> </li> % if ($acc) { <li class="<%= navbar_class('/history') %>"><a href='/history' title="Vergangene Zugfahrten"><i class="material-icons" aria-label="Vergangene Zugfahrten">history</i></a></li> <li class="<%= navbar_class('/account') %>"><a href="/account" title="Account"><i class="material-icons" aria-label="Account"><%= $acc->{notifications} ? 'notifications' : 'account_circle' %></i></a></li> % } % else { <li class="<%= navbar_class('/about') %>"><a href='/about' title="Über Travelynx"><i class="material-icons" aria-label="Über Travelynx">info_outline</i></a></li> % } </ul> </div> </nav> </div> % if (app->mode eq 'development') { <div class="container"> <div class="row"> <div class="col s12 caution-color white-text"> Development Mode – Datenbank: <%= app->config->{db}->{database} %> @ <%= app->config->{db}->{host} %> </div> </div> </div> % } % if (app->config->{announcement}) { <div class="container"> <div class="row"> <div class="col s12 caution-color white-text"> %= app->config->{announcement} </div> </div> </div> % } <div class="container"> % if ($acc and $acc->{deletion_requested}) { %= include '_deletion_note', timestamp => $acc->{deletion_requested} % } %= content <div class="row" style="margin-top: 5em;"> <div class="col s12 center-align grey-text"> <a href="/about">travelynx</a> v<%= $version // '???' %> <span style="margin-left: 0.5em; margin-right: 0.5em;">–</span> <a href="/impressum">Impressum</a> <span style="margin-left: 0.5em; margin-right: 0.5em;">–</span> <a href="/impressum">Datenschutz</a> <span style="margin-left: 0.5em; margin-right: 0.5em;">–</span> <a href="/legend">Legende</a> </div> </div> <div class="row"> <div class="col s12 center-align grey-text config"> Farbschema: <a onClick="javascript:setTheme('light')">hell</a> · <a onClick="javascript:setTheme('dark')">dunkel</a> · <a onClick="javascript:setTheme('default')">automatisch</a> </div> </div> </div> <script> if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/service-worker.js'); }); } </script> </body> </html>