python-gallery/onlylegs/templates/layout.html

156 lines
6.4 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 %}">
<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 %}">
<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()">
<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 %}">
{% if current_user.picture %}
<span class="nav-pfp">
<img
src="{{ url_for('media_api.media', path='pfp/' + current_user.picture) }}?r=icon"
alt="Profile picture"
onload="imgFade(this)"
style="opacity:0;"
/>
</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 %}">
<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()">
<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 %}
</body>
</html>