UnderCover/undercover/templates/base.jinja2

70 lines
2.4 KiB
Django/Jinja

<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}UnderCover{% endblock title %}</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
<link rel="icon" href="{{ url_for('static', filename='favicon.png') }}" />
<meta name="viewport" content="user-scalable=no; width=device-width">
<script type="text/javascript">
function closeModal() {
document.getElementById('modal').classList.add('transparent')
document.body.classList.remove('scroll-lock')
}
function showModal(login, text) {
document.getElementById('modal').classList.remove('transparent')
document.getElementById('modal-title').innerText = text
document.body.classList.add('scroll-lock')
const createAccountElements = [
'confirm-password',
'confirm-password-label',
'create-account-form-button'
]
const loginElements = [
'log-in-form-button'
]
const visibleElements = login ? loginElements : createAccountElements
visibleElements.forEach(element => document.getElementById(element).classList.remove('hidden'))
const hiddenElements = login ? createAccountElements : loginElements
hiddenElements.forEach(element => document.getElementById(element).classList.add('hidden'))
}
</script>
{% block head %}{{ head }}{% endblock head %}
</head>
<body>
{{ modal() }}
{% if username %}
<div class="user logged-in">
<p style="margin: 0 1em 0 0;">{{ username }}</p>
<form action="/logout">
<input class="black-white-button" style="margin: 0; padding: 0.4em;" type="submit" value="Logout">
</form>
</div>
{% else %}
<div class="user logged-out">
<form action="/create_account">
<div class="black-white-button" style="margin-right: 1em; padding: 0.4em 1em;" onclick="showModal(false, 'Create your account')">Create account</div>
<div class="white-black-button" style="margin: 0; padding: 0.4em 1em;" onclick="showModal(true, 'Login now')">Log in</div>
</form>
</div>
{% endif %}
<a href="/" style="text-decoration: none;">
<h1><span class="logo left">Under</span><span class="logo right">Cover</span></h1>
</a>
<h2>The secret cover letter generator</h2>
{% if error %}
<div class="errors">
{{ error }}
</div>
{% endif %}
<div>
{% block content %}
{{ content }}
{% endblock content %}
</div>
</body>
</html>