@@ -0,0 +1,133 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% macro format_size(bytes) %}
|
||||
{% set size = bytes|float %}
|
||||
{% if size < 1024 %}
|
||||
{{ size|int }} Б
|
||||
{% elif size < 1048576 %}
|
||||
{{ "%.1f"|format(size / 1024) }} КБ
|
||||
{% elif size < 1073741824 %}
|
||||
{{ "%.1f"|format(size / 1048576) }} МБ
|
||||
{% else %}
|
||||
{{ "%.1f"|format(size / 1073741824) }} ГБ
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
|
||||
{% block content %}
|
||||
<section class="hero">
|
||||
<div class="container hero__inner">
|
||||
<div class="hero__badge">Бесплатно · Без регистрации</div>
|
||||
<h1 class="hero__title">
|
||||
Загружайте фото<br>
|
||||
<span class="hero__accent">мгновенно</span>
|
||||
</h1>
|
||||
<p class="hero__subtitle">
|
||||
Современный фото-хостинг на Python и PostgreSQL.
|
||||
Перетащите изображение — получите прямую ссылку за секунды.
|
||||
</p>
|
||||
<div class="stats">
|
||||
<div class="stat-card">
|
||||
<span class="stat-card__value">{{ total_photos }}</span>
|
||||
<span class="stat-card__label">фото загружено</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-card__value">{{ format_size(total_size) }}</span>
|
||||
<span class="stat-card__label">общий объём</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-card__value">до {{ max_upload_mb }} МБ</span>
|
||||
<span class="stat-card__label">на файл</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
<section class="container alerts">
|
||||
{% for category, message in messages %}
|
||||
<div class="alert alert--{{ category }}">{{ message }}</div>
|
||||
{% endfor %}
|
||||
</section>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
<section id="upload" class="upload-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Загрузить фото</h2>
|
||||
<form action="{{ url_for('main.upload') }}" method="post" enctype="multipart/form-data" class="upload-form" id="uploadForm">
|
||||
<div class="dropzone" id="dropzone">
|
||||
<input type="file" name="photo" id="photoInput" accept="image/png,image/jpeg,image/gif,image/webp,image/bmp" hidden>
|
||||
<div class="dropzone__icon">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M12 16V4m0 0L8 8m4-4l4 4"/>
|
||||
<path d="M20 16.5v1a2.5 2.5 0 01-2.5 2.5h-11A2.5 2.5 0 014 17.5v-1"/>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="dropzone__title">Перетащите фото сюда</p>
|
||||
<p class="dropzone__hint">или нажмите для выбора файла</p>
|
||||
<p class="dropzone__formats">PNG · JPG · GIF · WEBP · BMP</p>
|
||||
<div class="dropzone__preview" id="preview" hidden>
|
||||
<img id="previewImg" alt="Предпросмотр">
|
||||
<span id="previewName"></span>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn--primary" id="submitBtn" disabled>
|
||||
<span>Загрузить на сервер</span>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="gallery" class="gallery-section">
|
||||
<div class="container">
|
||||
<div class="gallery-header">
|
||||
<h2 class="section-title">Галерея</h2>
|
||||
<span class="gallery-count">{{ total_photos }} {{ 'фото' if total_photos != 1 else 'фото' }}</span>
|
||||
</div>
|
||||
|
||||
{% if photos %}
|
||||
<div class="gallery">
|
||||
{% for photo in photos %}
|
||||
<article class="photo-card" data-id="{{ photo.id }}">
|
||||
<div class="photo-card__image-wrap">
|
||||
<img
|
||||
src="{{ photo.url }}"
|
||||
alt="{{ photo.original_name }}"
|
||||
class="photo-card__image"
|
||||
loading="lazy"
|
||||
>
|
||||
<div class="photo-card__overlay">
|
||||
<button type="button" class="btn btn--ghost btn--sm copy-btn" data-url="{{ request.url_root.rstrip('/') }}{{ photo.url }}">
|
||||
Копировать ссылку
|
||||
</button>
|
||||
<a href="{{ photo.url }}" target="_blank" class="btn btn--ghost btn--sm">Открыть</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="photo-card__info">
|
||||
<span class="photo-card__name" title="{{ photo.original_name }}">{{ photo.original_name }}</span>
|
||||
<div class="photo-card__meta">
|
||||
<span>{{ photo.size_human }}</span>
|
||||
<span>{{ photo.created_at.strftime('%d.%m.%Y %H:%M') }}</span>
|
||||
</div>
|
||||
<form action="{{ url_for('main.delete_photo', photo_id=photo.id) }}" method="post" class="photo-card__delete" onsubmit="return confirm('Удалить это фото?');">
|
||||
<button type="submit" class="btn btn--danger btn--sm">Удалить</button>
|
||||
</form>
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<div class="empty-state__icon">🖼️</div>
|
||||
<h3>Пока нет фотографий</h3>
|
||||
<p>Загрузите первое изображение — оно появится здесь</p>
|
||||
<a href="#upload" class="btn btn--primary">Загрузить фото</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user