105 lines
5.2 KiB
HTML
105 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<meta charset="UTF-8">
|
|
<title>🫐{{ pub_type | capitalize }} - {{ username }} - Artberry🫐</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
|
|
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap" rel="stylesheet">
|
|
<link rel="icon" href="{{ url_for('static', filename='artberry.ico') }}" type="image/x-icon">
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<div class="nav-buttons">
|
|
<a class="button" href="{{ url_for('index') }}" class="nav-button">MainPage</a>
|
|
<a class="button" href="{{ url_for('profile', username=username) }}" class="nav-button">Profile</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<header>
|
|
<h1>{{ pub_type | capitalize }} by {{ username }}</h1>
|
|
<form method="GET" action="{{ search_url if search_url else url_for(request.endpoint, pub_type=pub_type, username=username) }}" class="search-form">
|
|
<input type="text" name="search" id="search-input" placeholder="Search by tags" class="input-field search-field" autocomplete="off">
|
|
<button type="submit" class="button search-button">Search</button>
|
|
</form>
|
|
<div id="autocomplete-suggestions" class="autocomplete-suggestions"></div>
|
|
</form>
|
|
</header>
|
|
|
|
<section class="gallery">
|
|
{% for item in items %}
|
|
<div class="card {% if pub_type == 'videos' %}video-card{% elif pub_type == 'comics' %}comic-card{% elif pub_type == 'arts' %}art-card{% endif %}">
|
|
|
|
{% if pub_type == 'arts' %}
|
|
<a href="{{ url_for('view', content_type='art', id=item.id) }}">
|
|
<img src="{{ url_for('static', filename='arts/' + item.image_file) }}" alt="Art Image" class="art-image">
|
|
</a>
|
|
{% elif pub_type == 'videos' %}
|
|
<a href="{{ url_for('view', content_type='video', id=item.id) }}">
|
|
<img src="{{ url_for('static', filename='thumbnails/' + item.video_thumbnail_file) }}" alt="Video Thumbnail" class="video-thumbnail">
|
|
</a>
|
|
<p class="video-title">{{ item.video_name }}</p>
|
|
{% elif pub_type == 'comics' %}
|
|
<a href="{{ url_for('view', content_type='comic', id=item.id) }}">
|
|
<img src="{{ url_for('static', filename='comicthumbs/' + item.comic_thumbnail_file) }}" alt="Comic Thumbnail" class="comic-thumbnail">
|
|
</a>
|
|
<p>{{ item.name }}</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</section>
|
|
|
|
<div class="pagination">
|
|
{% if pagination.has_prev %}
|
|
<a class="button" href="{{ url_for('user_pubs', pub_type=pub_type, username=username, page=pagination.prev_num, search=search_query) }}">« Previous</a>
|
|
{% endif %}
|
|
{% for page in pagination.iter_pages() %}
|
|
{% if page %}
|
|
<a class="button" href="{{ url_for('user_pubs', pub_type=pub_type, username=username, page=page, search=search_query) }}">{{ page }}</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% if pagination.has_next %}
|
|
<a class="button" href="{{ url_for('user_pubs', pub_type=pub_type, username=username, page=pagination.next_num, search=search_query) }}">Next »</a>
|
|
{% endif %}
|
|
</div>
|
|
<script>
|
|
document.getElementById('search-input').addEventListener('input', function() {
|
|
var query = this.value;
|
|
|
|
if (query.length < 2) {
|
|
document.getElementById('autocomplete-suggestions').innerHTML = '';
|
|
return;
|
|
}
|
|
|
|
fetch(`/autocomplete?search=${encodeURIComponent(query)}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
var suggestionsContainer = document.getElementById('autocomplete-suggestions');
|
|
suggestionsContainer.innerHTML = '';
|
|
|
|
if (data.length > 0) {
|
|
data.forEach(function(suggestion) {
|
|
var suggestionElement = document.createElement('div');
|
|
suggestionElement.classList.add('suggestion-item');
|
|
suggestionElement.textContent = suggestion;
|
|
suggestionElement.addEventListener('click', function() {
|
|
var searchInput = document.getElementById('search-input');
|
|
var currentValue = searchInput.value;
|
|
|
|
var tags = currentValue.split(',').map(tag => tag.trim());
|
|
tags[tags.length - 1] = suggestion;
|
|
|
|
searchInput.value = tags.join(', ');
|
|
|
|
suggestionsContainer.innerHTML = '';
|
|
});
|
|
suggestionsContainer.appendChild(suggestionElement);
|
|
});
|
|
}
|
|
})
|
|
.catch(error => console.error('Error fetching autocomplete data:', error));
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|