113 lines
4.1 KiB
Django/Jinja
113 lines
4.1 KiB
Django/Jinja
<!DOCTYPE html>
|
|
<html lang="en">
|
|
{% from "_formhelpers.jinja2" import modal %}
|
|
|
|
<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="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')
|
|
}
|
|
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')
|
|
|
|
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]
|
|
|
|
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 %}
|
|
</head>
|
|
|
|
<body>
|
|
{{ modal() }}
|
|
{% if username %}
|
|
<div class="user logged-in">
|
|
<p style="margin: 0 1em 0 0;">{{ username }}</p>
|
|
<form action="/logout">
|
|
<input class="btn primary color-fade" style="font-family: 'BarlowMedium'; margin-right: 1em; margin: 0;" type="submit" value="Log Out"></input>
|
|
</form>
|
|
</div>
|
|
{% else %}
|
|
<div class="user logged-out">
|
|
<form action="/create_account">
|
|
<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')">
|
|
Create account
|
|
</button>
|
|
<button type="button" class="btn secondary color-fade" style="margin: 0; padding: 0.6em 2em;" onclick="showModal(true, 'Login now')">Log in</button>
|
|
</form>
|
|
</div>
|
|
{% endif %}
|
|
<!--<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>-->
|
|
<h2>The secret cover letter generator</h2>
|
|
{% if error %}
|
|
<div class="errors">
|
|
{{ error }}
|
|
</div>
|
|
{% endif %}
|
|
<div>
|
|
{% block content %}
|
|
{{ content }}
|
|
{% endblock content %}
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|