210 lines
7.8 KiB
HTML
210 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-bs-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>TechTalks - {% block title %}{% endblock %}</title>
|
|
{% block head %}
|
|
{% if metadata %}
|
|
{% for key, value in metadata.items() %}
|
|
<meta property="og:{{ key }}" content="{{ value }}">
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endblock %}
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
padding-bottom: 70px;
|
|
}
|
|
.navbar-nav {
|
|
width: 100%;
|
|
justify-content: space-around;
|
|
}
|
|
.navbar-nav .nav-item {
|
|
text-align: center;
|
|
}
|
|
.navbar-nav .nav-link {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.navbar-nav .nav-link i {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
@media (min-width: 768px) {
|
|
body {
|
|
padding-bottom: 50px;
|
|
}
|
|
.navbar {
|
|
height: 50px;
|
|
}
|
|
.navbar-nav .nav-link {
|
|
flex-direction: row;
|
|
}
|
|
.navbar-nav .nav-link i {
|
|
font-size: 1rem;
|
|
margin-bottom: 0;
|
|
margin-right: 0.5rem;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.navbar-nav .nav-link span {
|
|
display: none;
|
|
}
|
|
.container {
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
}
|
|
.card-body {
|
|
padding-bottom: 60px;
|
|
}
|
|
.card-footer {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
background-color: inherit;
|
|
}
|
|
</style>
|
|
{% block styles %}
|
|
<style>
|
|
.post-image {
|
|
max-width: 200px;
|
|
max-height: 200px;
|
|
object-fit: contain;
|
|
cursor: pointer;
|
|
}
|
|
.modal-body img {
|
|
width: calc(100% - 40px);
|
|
height: auto;
|
|
margin: 20px;
|
|
}
|
|
.assets-section img {
|
|
max-width: 200px;
|
|
max-height: 200px;
|
|
object-fit: contain;
|
|
margin: 5px 0;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
</head>
|
|
<body>
|
|
<div class="container mt-4">
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
|
|
<nav class="navbar fixed-bottom navbar-expand navbar-dark bg-primary">
|
|
<div class="container-fluid">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{{ url_for('home') }}">
|
|
<i class="bi bi-house-door-fill"></i>
|
|
<span>Home</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{{ url_for('post') }}">
|
|
<i class="bi bi-plus-circle-fill"></i>
|
|
<span>Post</span>
|
|
</a>
|
|
</li>
|
|
{% if current_user.is_authenticated %}
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{{ url_for('profile', username=current_user.username) }}">
|
|
<i class="bi bi-person-fill"></i>
|
|
<span>Profile</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{{ url_for('logout') }}">
|
|
<i class="bi bi-box-arrow-right"></i>
|
|
<span>Logout</span>
|
|
</a>
|
|
</li>
|
|
{% else %}
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{{ url_for('login') }}">
|
|
<i class="bi bi-box-arrow-in-right"></i>
|
|
<span>Login</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{{ url_for('register') }}">
|
|
<i class="bi bi-person-plus-fill"></i>
|
|
<span>Register</span>
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#infoModal">
|
|
<i class="bi bi-info-circle-fill"></i>
|
|
<span>Info</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{{ url_for('groups') }}">
|
|
<i class="bi bi-people-fill"></i>
|
|
<span>Groups</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Info Modal -->
|
|
<div class="modal fade" id="infoModal" tabindex="-1" aria-labelledby="infoModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="infoModalLabel">About TechTalks</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>This is basically Twitter but for techtokers built by spitkov (<a href="https://spitkov.hu" target="_blank">https://spitkov.hu</a>) for anyone who will dig into on how this app works its completely garbage code it has a bunch of flaws and its really unoptimized but it works on my machine :D so have fun using it. Also this project will be avaiable on my git soon i'll post it here and other news will be shown here too</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Image Modal -->
|
|
<div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="imageModalLabel">Image</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body text-center">
|
|
<img id="modalImage" src="" class="img-fluid" alt="Post image">
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
<a id="downloadButton" href="" download class="btn btn-primary">Download</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
{% block scripts %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var modalImage = document.getElementById('modalImage');
|
|
var downloadButton = document.getElementById('downloadButton');
|
|
|
|
document.querySelectorAll('.post-image').forEach(function(image) {
|
|
image.addEventListener('click', function() {
|
|
var imageUrl = this.getAttribute('data-image-url');
|
|
modalImage.src = imageUrl;
|
|
downloadButton.href = imageUrl;
|
|
new bootstrap.Modal(document.getElementById('imageModal')).show();
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
</body>
|
|
</html> |