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>
2023-10-29 21:16:11 -04:00
<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="description" content="UnderCover is an easy way to generate unique cover letters, making it simple to send personalized applications to many companies quickly.">
<meta name="viewport" content="user-scalable=no; width=device-width">
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
const darkSystem = () => window.matchMedia('(prefers-color-scheme: dark)').matches
const lightStored = () => localStorage.getItem('dark-mode') === 'false'
const darkStored = () => localStorage.getItem('dark-mode') === 'true'
if (!lightStored() && (darkSystem() || darkStored())) {
document.body.classList.add('dark-mode')
2022-10-02 02:27:23 -04:00
}
2023-10-29 21:16:11 -04:00
const togglers = document.getElementsByClassName('theme-toggler');
for (let i = 0; i < togglers.length; i++) {
togglers[i].addEventListener('click', () => {
document.body.classList.toggle('dark-mode')
const darkMode = document.body.classList.contains('dark-mode')
localStorage.setItem("dark-mode", darkMode)
})
}
setTimeout(() => document.body.classList.add('transition'), 600)
})
function toggleTheme() {
document.body.classList.toggle('dark-mode')
}
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')
2023-05-03 16:32:06 -04:00
2023-10-29 21:16:11 -04:00
const createAccountElements = [
'confirm-password',
'confirm-password-label',
'create-account-form-button'
]
const loginElements = [
'log-in-form-button'
]
const [visibleElements, hiddenElements] = login
? [loginElements, createAccountElements]
: [createAccountElements, loginElements]
2022-10-02 02:27:23 -04:00
2023-10-29 21:16:11 -04:00
visibleElements.forEach(element => document.getElementById(element).classList.remove('hidden'))
hiddenElements.forEach(element => document.getElementById(element).classList.add('hidden'))
}
</script>
<style>
@font-face {
font-family: 'Barlow';
font-display: swap;
src: url('/static/fonts/Barlow-Regular.ttf');
}
@font-face {
font-family: 'BarlowMedium';
font-display: swap;
src: url('/static/fonts/Barlow-Medium.ttf');
}
@font-face {
font-family: 'BarlowBold';
font-display: swap;
src: url('/static/fonts/Barlow-Bold.ttf');
}
</style>
{% block head %}{{ head }}{% endblock head %}
2022-09-23 18:55:45 -04:00
</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">
2023-10-29 21:16:11 -04:00
<input class="btn primary color-fade" style="font-family: 'BarlowMedium'; margin-right: 1em; margin: 0;" type="submit" value="Log Out"></input>
2022-09-30 00:50:19 -04:00
</form>
</div>
2022-10-02 02:27:23 -04:00
{% else %}
<div class="user logged-out">
<form action="/create_account">
2023-12-17 00:48:40 -05:00
<button type="button" class="btn primary color-fade" style="font-family: 'BarlowMedium'; margin-right: 1em; padding: 0.6em 2em;" onclick="showModal(false, 'Create your account')">
2023-05-03 16:09:12 -04:00
Create account
2023-12-17 00:48:40 -05:00
</button>
<button type="button" class="btn secondary color-fade" style="margin: 0; padding: 0.6em 2em;" onclick="showModal(true, 'Login now')">Log in</button>
2022-10-02 02:27:23 -04:00
</form>
</div>
2022-09-30 00:50:19 -04:00
{% endif %}
2023-10-29 21:16:11 -04:00
<!--<a href="/" style="text-decoration: none;">-->
<h1 title="Click to toggle dark mode" class="theme-toggler"><span class="logo left">Under</span><span class="logo right">Cover</span></h1>
<!--</a>-->
2022-09-23 18:55:45 -04:00
<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>
