mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2024-12-29 10:56:10 +00:00
195 lines
8.2 KiB
HTML
195 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>{{ config.WEBSITE_CONF.name }}</title>
|
|
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<meta name="description" content="{{ config.WEBSITE_CONF.motto }}">
|
|
<meta name="author" content="{{ config.WEBSITE_CONF.author }}">
|
|
|
|
<meta property="og:title" content="{{ config.WEBSITE_CONF.name }}">
|
|
<meta property="og:description" content="{{ config.WEBSITE_CONF.motto }}">
|
|
<meta property="og:type" content="website">
|
|
|
|
<meta name="twitter:title" content="{{ config.WEBSITE_CONF.name }}">
|
|
<meta name="twitter:description" content="{{ config.WEBSITE_CONF.motto }}">
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap">
|
|
|
|
<!-- phosphor icons -->
|
|
<script src="https://unpkg.com/@phosphor-icons/web"></script>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" href="{{url_for('static', filename='icon.png')}}" type="image/png">
|
|
|
|
{% assets "scripts" %} <script type="text/javascript" src="{{ ASSET_URL }}"></script> {% endassets %}
|
|
{% assets "styles" %} <link rel="stylesheet" href="{{ ASSET_URL }}" type="text/css" defer> {% endassets %}
|
|
{% block head %}{% endblock %}
|
|
</head>
|
|
<body>
|
|
<div class="notifications"></div>
|
|
<button class="top-of-page" aria-label="Jump to top of page"><i class="ph ph-arrow-up"></i></button>
|
|
|
|
<div class="pop-up">
|
|
<span class="pop-up__click-off" onclick="popupDismiss()"></span>
|
|
<div class="pop-up-wrapper">
|
|
<div class="pop-up-header"></div>
|
|
<div class="pop-up-controlls"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<nav>
|
|
<a href="{{ url_for('gallery.index') }}{% block page_index %}{% endblock %}" class="navigation-item {% block nav_home %}{% endblock %}" aria-label="Home Page">
|
|
<i class="ph-fill ph-images-square"></i>
|
|
</a>
|
|
|
|
<a href="{{ url_for('group.groups') }}" class="navigation-item {% block nav_groups %}{% endblock %}" aria-label="Photo Groups">
|
|
<i class="ph-fill ph-package"></i>
|
|
</a>
|
|
|
|
{% if current_user.is_authenticated %}
|
|
<button class="navigation-item {% block nav_upload %}{% endblock %}" onclick="toggleUploadTab()" aria-label="Upload Photo">
|
|
<i class="ph-fill ph-upload"></i>
|
|
</button>
|
|
{% endif %}
|
|
|
|
<span class="navigation-spacer"></span>
|
|
|
|
{% if current_user.is_authenticated %}
|
|
<a href="{{ url_for('profile.profile') }}" class="navigation-item {% block nav_profile %}{% endblock %}" aria-label="Profile Page">
|
|
{% if current_user.picture %}
|
|
<span class="nav-pfp">
|
|
<picture>
|
|
<source srcset="{{ url_for('api.media', path='pfp/' + current_user.picture) }}?r=pfp&e=webp">
|
|
<source srcset="{{ url_for('api.media', path='pfp/' + current_user.picture) }}?r=pfp&e=png">
|
|
<img
|
|
src="{{ url_for('api.media', path='pfp/' + current_user.picture) }}?r=icon"
|
|
alt="Profile picture"
|
|
onload="imgFade(this)"
|
|
style="opacity:0;"
|
|
>
|
|
</picture>
|
|
</span>
|
|
{% else %}
|
|
<i class="ph-fill ph-folder-simple-user"></i>
|
|
{% endif %}
|
|
</a>
|
|
|
|
<a href="{{ url_for('settings.general') }}" class="navigation-item {% block nav_settings %}{% endblock %}" aria-label="Gallery Settings">
|
|
<i class="ph-fill ph-gear-fine"></i>
|
|
</a>
|
|
{% else %}
|
|
<button class="navigation-item {% block nav_login %}{% endblock %}" onclick="showLogin()" aria-label="Sign up or Login">
|
|
<i class="ph-fill ph-sign-in"></i>
|
|
</button>
|
|
{% endif %}
|
|
</nav>
|
|
|
|
<header>{% block header %}{% endblock %}</header>
|
|
|
|
<main>
|
|
{% if current_user.is_authenticated %}
|
|
<div class="upload-panel">
|
|
<span class="click-off" onclick="closeUploadTab()"></span>
|
|
<div class="container">
|
|
<span id="dragIndicator"></span>
|
|
<h3>Upload stuffs</h3>
|
|
<p>May the world see your stuff 👀</p>
|
|
<form id="uploadForm">
|
|
<button class="fileDrop-block" type="button">
|
|
<i class="ph ph-upload"></i>
|
|
<span class="status">Choose or Drop file</span>
|
|
<input type="file" id="file" tab-index="-1">
|
|
</button>
|
|
|
|
<input class="input-block" type="text" placeholder="alt" id="alt">
|
|
<input class="input-block" type="text" placeholder="description" id="description">
|
|
<input class="input-block" type="text" placeholder="tags" id="tags">
|
|
<button class="btn-block primary" type="submit">Upload</button>
|
|
</form>
|
|
<div class="upload-jobs"></div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
|
|
<script type="text/javascript">
|
|
keepSquare();
|
|
|
|
const times = document.querySelectorAll('.time');
|
|
for (let i = 0; i < times.length; i++) {
|
|
// Remove milliseconds
|
|
const raw = times[i].innerHTML.split('.')[0];
|
|
|
|
// Parse YYYY-MM-DD HH:MM:SS to Date object
|
|
const time = raw.split(' ')[1];
|
|
const date = raw.split(' ')[0].split('-');
|
|
|
|
// Format to YYYY/MM/DD HH:MM:SS and convert to UTC Date object
|
|
const dateTime = new Date(`${date[0]}/${date[1]}/${date[2]} ${time} UTC`);
|
|
|
|
// Convert to local time
|
|
times[i].innerHTML = `${dateTime.toLocaleDateString()} ${dateTime.toLocaleTimeString()}`;
|
|
}
|
|
|
|
// Top Of Page button
|
|
const topOfPage = document.querySelector('.top-of-page');
|
|
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
|
|
topOfPage.classList.add('show');
|
|
} else {
|
|
topOfPage.classList.remove('show');
|
|
}
|
|
topOfPage.onclick = () => {
|
|
document.body.scrollTop = 0;
|
|
document.documentElement.scrollTop = 0;
|
|
}
|
|
|
|
// Info button
|
|
const infoButton = document.querySelector('.info-button');
|
|
if (infoButton) {
|
|
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
|
|
infoButton.classList.remove('show');
|
|
} else {
|
|
infoButton.classList.add('show');
|
|
}
|
|
infoButton.onclick = () => {
|
|
popupShow('OnlyLegs',
|
|
'<a href="https://github.com/Fluffy-Bean/onlylegs">v{{ config['APP_VERSION'] }}</a> ' +
|
|
'using <a href="https://phosphoricons.com/">Phosphoricons</a> and Flask.' +
|
|
'<br>Made by Fluffy and others with ❤️');
|
|
}
|
|
}
|
|
|
|
window.onload = () => { keepSquare(); }
|
|
window.onresize = () => { keepSquare(); }
|
|
window.onscroll = () => {
|
|
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
|
|
topOfPage.classList.add('show');
|
|
} else {
|
|
topOfPage.classList.remove('show');
|
|
}
|
|
|
|
if (infoButton) {
|
|
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
|
|
infoButton.classList.remove('show');
|
|
} else {
|
|
infoButton.classList.add('show');
|
|
}
|
|
}
|
|
}
|
|
|
|
{% for message in get_flashed_messages() %}
|
|
addNotification('{{ message[0] }}', {{ message[1] }});
|
|
{% endfor %}
|
|
</script>
|
|
|
|
{% block script %}{% endblock %}
|
|
</body>
|
|
</html> |