2022-09-23 18:55:45 -04:00
<!DOCTYPE html>
<html lang="en">
2022-10-02 15:09:16 -04:00
{% from "_formhelpers.jinja2" import modal %}
2022-09-23 18:55:45 -04:00
<head>
<title>{% block title %}UnderCover{% endblock title %}</title>
2022-09-27 22:00:34 -04:00
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
2022-09-23 18:55:45 -04:00
<link rel="icon" href="{{ url_for('static', filename='favicon.png') }}" />
2022-10-02 11:12:50 -04:00
<meta name="description" content="UnderCover is an easy way to generate unique cover letters, making it simple to send personalized applications to many companies quickly.">
2022-09-23 18:55:45 -04:00
<meta name="viewport" content="user-scalable=no; width=device-width">
2022-10-02 02:27:23 -04:00
<script type="text/javascript">
function closeModal() {
document.getElementById('modal').classList.add('transparent')
2022-10-02 09:57:17 -04:00
document.body.classList.remove('scroll-lock')
2022-10-02 02:27:23 -04:00
}
2022-10-02 02:54:59 -04:00
function showModal(login, text) {
2022-10-02 02:27:23 -04:00
document.getElementById('modal').classList.remove('transparent')
2022-10-02 02:54:59 -04:00
document.getElementById('modal-title').innerText = text
2022-10-02 09:57:17 -04:00
document.body.classList.add('scroll-lock')
2022-10-02 02:27:23 -04:00
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>
2022-10-02 11:24:52 -04:00
<style>
@font-face {
font-family: 'Barlow';
2022-10-02 11:28:02 -04:00
font-display: swap;
2022-10-02 11:24:52 -04:00
src: url('/static/fonts/Barlow-Regular.ttf');
}
@font-face {
font-family: 'BarlowMedium';
2022-10-02 11:28:02 -04:00
font-display: swap;
2022-10-02 11:24:52 -04:00
src: url('/static/fonts/Barlow-Medium.ttf');
}
</style>
2022-09-23 18:55:45 -04:00
{% block head %}{{ head }}{% endblock head %}
</head>
<body>
2022-10-02 02:27:23 -04:00
{{ modal() }}
2022-09-30 00:50:19 -04:00
{% 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>
2022-10-02 02:27:23 -04:00
{% else %}
<div class="user logged-out">
<form action="/create_account">
2023-05-03 16:09:12 -04:00
<div class="black-white-button" style="font-family: 'BarlowMedium'; margin-right: 1em; padding: 0.4em 1em;" onclick="showModal(false, 'Create your account')">
Create account
</div>
2022-10-02 09:45:40 -04:00
<div class="white-black-button" style="margin: 0; padding: 0.4em 1em;" onclick="showModal(true, 'Login now')">Log in</div>
2022-10-02 02:27:23 -04:00
</form>
</div>
2022-09-30 00:50:19 -04:00
{% endif %}
2022-09-23 18:55:45 -04:00
<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>
2022-09-24 17:20:38 -04:00
{% if error %}
<div class="errors">
{{ error }}
</div>
{% endif %}
2022-09-27 20:39:44 -04:00
<div>
2022-09-23 18:55:45 -04:00
{% block content %}
{{ content }}
{% endblock content %}
2022-09-27 20:39:44 -04:00
</div>
2022-09-23 18:55:45 -04:00
</body>
</html>
