mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-01-04 05:46:14 +00:00
228 lines
9.5 KiB
HTML
228 lines
9.5 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 }}"/>
|
|
|
|
<link rel="manifest" href="static/manifest.json"/>
|
|
|
|
<!-- phosphor icons!!! -->
|
|
<script src="https://unpkg.com/@phosphor-icons/web"></script>
|
|
|
|
<link
|
|
href="{{url_for('static', filename='logo-black.svg')}}"
|
|
rel="icon"
|
|
type="image/svg+xml"
|
|
media="(prefers-color-scheme: light)"/>
|
|
<link
|
|
href="{{url_for('static', filename='logo-white.svg')}}"
|
|
rel="icon"
|
|
type="image/svg+xml"
|
|
media="(prefers-color-scheme: dark)"/>
|
|
|
|
<link
|
|
rel="prefetch"
|
|
href="{{url_for('static', filename='fonts/font.css')}}"
|
|
type="stylesheet"/>
|
|
|
|
{% 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>
|
|
{% if request.path == "/" %}<button class="info-button" aria-label="Show info on gallery"><i class="ph ph-question"></i></button>{% endif %}
|
|
|
|
<div class="pop-up">
|
|
<span class="pop-up__click-off" onclick="popupDissmiss()"></span>
|
|
<div class="pop-up-wrapper">
|
|
<div class="pop-up-header"></div>
|
|
<div class="pop-up-controlls"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
|
|
<div class="navigation">
|
|
<!--<img src="{{url_for('static', filename='icon.png')}}" alt="Logo" class="logo" onload="this.style.opacity=1;" style="opacity:0">-->
|
|
|
|
<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>
|
|
<span class="tool-tip">Home<i class="ph-fill ph-caret-left"></i></span>
|
|
</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>
|
|
<span class="tool-tip">Groups<i class="ph-fill ph-caret-left"></i></span>
|
|
</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>
|
|
<span class="tool-tip">Upload<i class="ph-fill ph-caret-left"></i></span>
|
|
</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('media_api.media', path='pfp/' + current_user.picture) }}?r=pfp&e=webp">
|
|
<source srcset="{{ url_for('media_api.media', path='pfp/' + current_user.picture) }}?r=pfp&e=png">
|
|
<img
|
|
src="{{ url_for('media_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 %}
|
|
<span class="tool-tip">Profile<i class="ph-fill ph-caret-left"></i></span>
|
|
</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>
|
|
<span class="tool-tip">Settings<i class="ph-fill ph-caret-left"></i></span>
|
|
</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>
|
|
<span class="tool-tip">Login<i class="ph-fill ph-caret-left"></i></span>
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% 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 %}
|
|
|
|
<div class="content">
|
|
{% block content %}
|
|
{% endblock %}
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
// Show notifications on page load
|
|
{% for message in get_flashed_messages() %}
|
|
addNotification('{{ message[0] }}', {{ message[1] }});
|
|
{% endfor %}
|
|
</script>
|
|
|
|
{% block script %}{% endblock %}
|
|
|
|
<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.onresize = () => {
|
|
keepSquare();
|
|
makeGrid();
|
|
}
|
|
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');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |