2024-09-20 17:12:22 +02:00
<!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 >
2024-09-24 00:00:18 +02:00
{% 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 %}
2024-09-20 17:12:22 +02:00
< / 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 >
2024-09-24 00:00:18 +02:00
<!-- 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 >
2024-09-20 17:12:22 +02:00
< 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 >
2024-09-24 00:00:18 +02:00
{% 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 %}
2024-09-20 17:12:22 +02:00
< / body >
< / html >
