<!doctype html>{% load sass_tags static %} <html> <head> <title>{{ settings.TITLE }}</title> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-touch-fullscreen" content="yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <link href="{% sass_src 'css/style.scss' %}" rel="stylesheet" type="text/css"> <base target="_blank" > <link rel="stylesheet" href="{% static 'timeline/css/timeline.css' %}"> <link rel="stylesheet" href="{% static 'timeline/css/fonts/font.default.css' %}"> <style> html, body { height:100%; width:100%; padding: 0px; margin: 0px; } #timeline, #tl { height: 100%; width:100%; } #tl { display: block; } .tl-timeline { } .tl-attribution { display: none !important; } .tl-timeline h1, .tl-timeline h2, .tl-timeline h3, .tl-timeline h4, .tl-timeline h5, .tl-timeline h6 { text-transform: initial !important; } .tl-timeline .tl-timegroup-message { color: #000 !important; } </style> </head> <body> <div id="title" class="page tl-timeline"> <div class="content"> {{ title.body | safe }} </div> </div> <div id="about" class="page tl-timeline"> <div class="content"> {{ about.body | safe }} </div> </div> <div id="timeline" class="page"> <div id="tl"></div> </div> <div id="imprint" class="page tl-timeline"> <div class="content"> {{ imprint.body | safe }} </div> </div> <div id="contact" class="page tl-timeline"> <div class="content"> <form class="contact-form" action="/disabled" method="post"> <input type="text" placeholder="Your name" name="name" required><br> <input type="text" placeholder="Your email" name="email" required><br> <textarea placeholder="Message" name="message" required></textarea><br> <input type="submit" value="Send message" /> {% csrf_token %} </form> </div> </div> <div id="menu-overlay" class="tl-timeline"> <ul> <li><a href="#start" target="_self">timeline</a></li> <li><a href="#about" target="_self">about</a></li> <li><a href="#contact" target="_self">contact</a></li> <li><a href="#imprint" target="_self">imprint</a></li> </ul> </div> <div id="menu"> <svg viewBox="0 0 100 100" width="64" height="64"> <rect y="20" width="80" height="10"></rect> <rect y="40" width="80" height="10"></rect> <rect y="60" width="80" height="10"></rect> </svg> </div> <script src="{% static 'timeline/js/timeline.js' %}"></script> <script> function submitContact(event) { event.preventDefault() event.stopPropagation() var data = {} var form = document.querySelector('.contact-form') form.querySelectorAll('input,textarea').forEach(input => { if (input.name) { data[input.name] = input.value } }) fetch('/contact/', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRFToken': data.csrfmiddlewaretoken, }, body: JSON.stringify(data) }).then(response => response.json()).then(response => { if (response.sent) { var content = document.querySelector('#contact .content') content.innerHTML = ` Thank you for taking the time to send us a message, we will get back to you soon. <br><br> <a href="/" target="_self">Back to Timeline</a> ` } }) } document.querySelector('#contact .contact-form').addEventListener('submit', submitContact) var data = {{ timeline_json | safe }}; var timeline function load_timeline() { timeline = new TL.Timeline('tl', data, { hash_bookmark: true, debug: false, timenav_height: 100, }); } function openPage(qs) { var active = document.querySelector(qs) document.querySelectorAll('.page').forEach(page => { if (page != active) { if (page.classList.contains('active')) { page.classList.remove('active') active.classList.add('active') } } }) active.classList.add('active') } function hashchange(event) { console.log('hc', document.location.hash.slice(1).length, document.location.hash.slice(1)) var page if (document.location.hash.slice(1).length) { page = document.querySelector(document.location.hash + '.page') } if (page) { openPage(document.location.hash) } else if (document.location.hash.slice(1).length) { openPage('#timeline') if (!timeline) { load_timeline() } } else { openPage("#title") } } window.addEventListener('hashchange', hashchange) hashchange() document.querySelector('#menu').addEventListener('click', event => { var overlay = document.querySelector('#menu-overlay') if (overlay.classList.contains('active')) { overlay.classList.remove('active') } else { overlay.classList.add('active') } }) document.querySelectorAll('#menu-overlay a').forEach(a => { a.addEventListener('click', event => { var overlay = document.querySelector('#menu-overlay') overlay.classList.remove('active') }) }) </script> </body> </html>