<!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 = 'v42'; # 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/icon-120x120.png"> <link rel="apple-touch-icon" sizes="180x180" href="/static/<%= $av %>/icons/icon-180x180.png"> <link rel="apple-touch-icon" sizes="152x152" href="/static/<%= $av %>/icons/icon-152x152.png"> <link rel="apple-touch-icon" sizes="167x167" href="/static/<%= $av %>/icons/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'); function toggleTheme() { currentTheme = otherTheme[currentTheme] || 'light'; localStorage.setItem('theme', currentTheme); addStyleSheet(currentTheme, 'theme'); } </script> %= stylesheet "/static/${av}/css/material-icons.css" %= stylesheet "/static/${av}/css/local.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" %= javascript "/static/${av}/js/travelynx-actions.min.js" % if (stash('with_geolocation')) { %= javascript "/static/${av}/js/geolocation.min.js" % } % if (stash('with_autocomplete')) { %= javascript "/static/${av}/js/autocomplete.min.js" % } % if (stash('with_map')) { %= javascript "/static/${av}/leaflet/leaflet.js" % } </head> <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> <li class="waves-effect waves-light"> <a onClick="javascript:toggleTheme()" title="Farbschema invertieren"><i class="material-icons" aria-label="Farbschema invertieren">invert_colors</i></a> </li> % if (is_user_authenticated()) { <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">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> % } <div class="container"> % if (is_user_authenticated()) { % my $acc = current_user(); % if ($acc and $acc->{deletion_requested}) { %= include '_deletion_note', timestamp => $acc->{deletion_requested} % } % } %= content </div> <script> if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/service-worker.js'); }); } </script> </body> </html>