fotohost/app/templates/index.html

{% 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 %}