mirror of
https://github.com/Labelbase/Labelbase.git
synced 2026-08-13 12:33:23 +02:00
452 lines
14 KiB
HTML
452 lines
14 KiB
HTML
{% load i18n %}
|
||
{% load labelbase_tags %}
|
||
{% load sekizai_tags %}
|
||
{% load bootstrap %}
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>{% block title %}{% endblock %}</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
|
||
<link href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.min.css" rel="stylesheet">
|
||
{% block extra_media %}{% endblock %}
|
||
{% block css %}{% endblock %}
|
||
{% render_block "css" %}
|
||
<style>
|
||
|
||
/* dashboard */
|
||
|
||
body {
|
||
font-size: .875rem;
|
||
}
|
||
|
||
.feather {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
/*
|
||
* Sidebar
|
||
*/
|
||
|
||
.sidebar {
|
||
position: fixed;
|
||
top: 0;
|
||
/* rtl:raw:
|
||
right: 0;
|
||
*/
|
||
bottom: 0;
|
||
/* rtl:remove */
|
||
left: 0;
|
||
z-index: 100; /* Behind the navbar */
|
||
padding: 48px 0 0; /* Height of navbar */
|
||
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
|
||
}
|
||
|
||
@media (max-width: 767.98px) {
|
||
.sidebar {
|
||
top: 5rem;
|
||
}
|
||
}
|
||
|
||
.sidebar-sticky {
|
||
height: calc(100vh - 48px);
|
||
overflow-x: hidden;
|
||
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
|
||
}
|
||
|
||
.sidebar .nav-link {
|
||
font-weight: 400;
|
||
font-size: 1rem;
|
||
color: #333;
|
||
}
|
||
|
||
.sidebar .nav-link .feather {
|
||
margin-right: 4px;
|
||
color: #727272;
|
||
}
|
||
|
||
.sidebar .nav-link.active {
|
||
color: #2470dc;
|
||
}
|
||
|
||
.sidebar .nav-link:hover .feather,
|
||
.sidebar .nav-link.active .feather {
|
||
color: inherit;
|
||
}
|
||
|
||
.sidebar-heading {
|
||
font-size: .75rem;
|
||
}
|
||
|
||
/*
|
||
* Navbar
|
||
*/
|
||
|
||
.navbar-brand {
|
||
padding-top: .75rem;
|
||
padding-bottom: .75rem;
|
||
background-color: rgba(0, 0, 0, .25);
|
||
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
|
||
}
|
||
|
||
.navbar .navbar-toggler {
|
||
top: .25rem;
|
||
right: 1rem;
|
||
}
|
||
|
||
.navbar .form-control {
|
||
padding: .75rem 1rem;
|
||
}
|
||
|
||
.form-control-dark {
|
||
color: #fff;
|
||
background-color: rgba(255, 255, 255, .1);
|
||
border-color: rgba(255, 255, 255, .1);
|
||
}
|
||
|
||
.form-control-dark:focus {
|
||
border-color: transparent;
|
||
box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
|
||
}
|
||
|
||
/* end dashboard */
|
||
|
||
|
||
.bd-placeholder-img {
|
||
font-size: 1.125rem;
|
||
text-anchor: middle;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
user-select: none;
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.bd-placeholder-img-lg {
|
||
font-size: 3.5rem;
|
||
}
|
||
}
|
||
|
||
.b-example-divider {
|
||
height: 3rem;
|
||
background-color: rgba(0, 0, 0, .1);
|
||
border: solid rgba(0, 0, 0, .15);
|
||
border-width: 1px 0;
|
||
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
|
||
}
|
||
|
||
.b-example-vr {
|
||
flex-shrink: 0;
|
||
width: 1.5rem;
|
||
height: 100vh;
|
||
}
|
||
|
||
.bi {
|
||
vertical-align: -.125em;
|
||
fill: currentColor;
|
||
}
|
||
|
||
.nav-scroller {
|
||
position: relative;
|
||
z-index: 2;
|
||
height: 2.75rem;
|
||
overflow-y: hidden;
|
||
}
|
||
|
||
.nav-scroller .nav {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
padding-bottom: 1rem;
|
||
margin-top: -1px;
|
||
overflow-x: auto;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
</style>
|
||
|
||
</head>
|
||
<body>
|
||
{% block content_wrapper %}
|
||
|
||
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
|
||
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="{% url 'home' %}"
|
||
style="font-weight:800;">L<span style="height:1.12em; width:1.25em" data-feather="tag" class="align-text-bottom"></span>BELBASE
|
||
</a>
|
||
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
|
||
{% if user.is_authenticated %}
|
||
<input style="margin: 4px;" type="text" placeholder="Search your Labelbases" aria-label="Search" class="form-control form-control-dark">
|
||
{% endif %}
|
||
|
||
<div class="navbar-nav">
|
||
<div class="nav-item text-nowrap">
|
||
</div>
|
||
</div>
|
||
|
||
</header>
|
||
|
||
{% url 'registration' as reg_url %}
|
||
{% url 'two_factor:login' as login_url %}
|
||
{% url 'logout' as logout_url %}
|
||
{% url 'secret' as secret_url %}
|
||
|
||
|
||
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
|
||
|
||
<div style="background: rgb(33, 37, 41);z-index: 999999;position: relative;/*! padding: 11px; */" class="d-block px-3 py-1 text-center text-bold skippy">
|
||
<span style="background: goldenrod;display: inline-block;padding: 10px 20px;border-radius: 20px; marign-top: -7px;margin: 10px;font-weight: bold;">
|
||
<a href="https://labelbase.space/ann-v2/" class="text-white text-decoration-none">💥 Run your self-hosted Labelbase! <u>Learn more</u></span>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse" style="z-index:103">
|
||
<div class="position-sticky pt-3 sidebar-sticky">
|
||
{% if user.is_authenticated %}
|
||
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase">
|
||
<span>Labelbases</span>
|
||
<a class="link-secondary" data-bs-toggle="modal" data-bs-target="#addLabelbaseModal" href="#" aria-label="Add a new wallet">
|
||
<span data-feather="plus-circle" class="align-text-bottom"></span>
|
||
</a>
|
||
</h6>
|
||
{% endif %}
|
||
<ul class="nav flex-column mb-2">
|
||
{% if user.is_authenticated %}
|
||
{% for labelbase in user.profile.labelbases %}
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="{{ labelbase.get_absolute_url }}">
|
||
<span data-feather="database" class="align-text-bottom"></span>
|
||
{% if labelbase.name %}{{ labelbase.name }}{% endif %} {% if labelbase.fingerprint %}<tt>{{ labelbase.fingerprint }}</tt>{% endif %}
|
||
</a>
|
||
</li>
|
||
{% empty %}
|
||
<!-- empty, no labelbases -->
|
||
{% endfor %}
|
||
{% else %}
|
||
<!-- empty, no session -->
|
||
{% endif %}
|
||
</ul>
|
||
<!-- -->
|
||
<div class="">
|
||
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase">
|
||
<span>Your account</span>
|
||
</h6>
|
||
|
||
|
||
|
||
|
||
<ul class="nav flex-column mb-2">
|
||
|
||
{% if user.is_authenticated %}
|
||
<li class="nav-item">
|
||
<a class="nav-link {% block nav_userprofile %}{% endblock %}" href="{% url 'userprofile' %}">{{ user }}'s Profile {% if user.otp_device %}🔒{% endif %}</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link {% block nav_profile %}{% endblock %}" href="{% url 'two_factor:profile' %}">{% trans "Account Security" %}</a></li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link {% block nav_apikey %}{% endblock %}" href="{% url 'apikey' %}">API Key</a>
|
||
<li>
|
||
<li class="nav-item ">
|
||
<a class="nav-link" href="/api-reference/">API Reference</a>
|
||
<li>
|
||
|
||
<li>
|
||
</li>
|
||
|
||
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="{{ logout_url }}">{% trans "Logout" %}</a>
|
||
</li>
|
||
{% else %}
|
||
<li class="nav-item"> <a class="nav-link" href="{{ login_url }}">Sign in</a>
|
||
</li>
|
||
<li class="nav-item"> <a class="nav-link" href="{{ reg_url }}">Create an account</a>
|
||
</li>
|
||
|
||
{% endif %}
|
||
|
||
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase">
|
||
<span> </span>
|
||
</h6>
|
||
<li class="nav-item ">
|
||
<a class="nav-link" href="{% url 'about' %}">About</a>
|
||
<li>
|
||
<li class="nav-item ">
|
||
<a class="nav-link" href="{% url 'faq' %}">FAQ</a>
|
||
<li>
|
||
<li class="nav-item ">
|
||
<a class="nav-link" href="{% url 'privacy_policy' %}">Privacy Policy</a>
|
||
<li>
|
||
<li class="nav-item ">
|
||
<a class="nav-link" href="{% url 'terms' %}">Terms</a>
|
||
<li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</nav>
|
||
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
|
||
{% include "_messages.html" %}
|
||
{% block content %}{% endblock %}
|
||
</main>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
{% if user.is_authenticated %}
|
||
|
||
<!-- modal -->
|
||
<div class="modal" tabindex="-1" id="addLabelbaseModal">
|
||
<div class="modal-dialog modal-dialog-centered">
|
||
<div class="modal-content">
|
||
<form action="{% url 'labelbase_new' %}" method="post">
|
||
{% csrf_token %}
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">Create a new labelbase</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
{% labelbaseform as form %}
|
||
{{ form|bootstrap }}
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||
<button type="submit" class="btn btn-primary">OK</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% endblock %}
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script>
|
||
<!--script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script-->
|
||
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
||
<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
|
||
<script src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.min.js"></script>
|
||
|
||
<script type="text/javascript">
|
||
|
||
/* globals Chart:false, feather:false */
|
||
(() => {
|
||
'use strict'
|
||
|
||
feather.replace({ 'aria-hidden': 'true' })
|
||
|
||
})()
|
||
|
||
|
||
{% block js %}{% endblock %}
|
||
{% render_block "js" %}
|
||
|
||
|
||
|
||
/* dark mode */
|
||
|
||
/*!
|
||
* Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
|
||
* Copyright 2011-2023 The Bootstrap Authors
|
||
* Licensed under the Creative Commons Attribution 3.0 Unported License.
|
||
*/
|
||
|
||
(() => {
|
||
'use strict'
|
||
|
||
const getStoredTheme = () => localStorage.getItem('theme')
|
||
const setStoredTheme = theme => localStorage.setItem('theme', theme)
|
||
|
||
const getPreferredTheme = () => {
|
||
const storedTheme = getStoredTheme()
|
||
if (storedTheme) {
|
||
return storedTheme
|
||
}
|
||
|
||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
||
}
|
||
|
||
const setTheme = theme => {
|
||
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||
document.documentElement.setAttribute('data-bs-theme', 'dark')
|
||
} else {
|
||
document.documentElement.setAttribute('data-bs-theme', theme)
|
||
}
|
||
}
|
||
|
||
setTheme(getPreferredTheme())
|
||
|
||
const showActiveTheme = (theme, focus = false) => {
|
||
const themeSwitcher = document.querySelector('#bd-theme')
|
||
|
||
if (!themeSwitcher) {
|
||
return
|
||
}
|
||
|
||
const themeSwitcherText = document.querySelector('#bd-theme-text')
|
||
const activeThemeIcon = document.querySelector('.theme-icon-active use')
|
||
const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
|
||
const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
|
||
|
||
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
|
||
element.classList.remove('active')
|
||
element.setAttribute('aria-pressed', 'false')
|
||
})
|
||
|
||
btnToActive.classList.add('active')
|
||
btnToActive.setAttribute('aria-pressed', 'true')
|
||
activeThemeIcon.setAttribute('href', svgOfActiveBtn)
|
||
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
|
||
themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
|
||
|
||
if (focus) {
|
||
themeSwitcher.focus()
|
||
}
|
||
}
|
||
|
||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||
const storedTheme = getStoredTheme()
|
||
if (storedTheme !== 'light' && storedTheme !== 'dark') {
|
||
setTheme(getPreferredTheme())
|
||
}
|
||
})
|
||
|
||
window.addEventListener('DOMContentLoaded', () => {
|
||
showActiveTheme(getPreferredTheme())
|
||
|
||
document.querySelectorAll('[data-bs-theme-value]')
|
||
.forEach(toggle => {
|
||
toggle.addEventListener('click', () => {
|
||
const theme = toggle.getAttribute('data-bs-theme-value')
|
||
setStoredTheme(theme)
|
||
setTheme(theme)
|
||
showActiveTheme(theme, true)
|
||
})
|
||
})
|
||
})
|
||
})()
|
||
|
||
/* end dark mode */
|
||
|
||
|
||
</script>
|
||
<!--
|
||
https://datatables.net/examples/styling/bootstrap5.html
|
||
-->
|
||
</body>
|
||
</html>
|