59 lines
3.4 KiB
HTML
59 lines
3.4 KiB
HTML
{% load static %}
|
||
<div id="gallery-card-{{ item.s_hash_id }}"
|
||
style="{{ item.card_bg_style }}"
|
||
class="aspect-square rounded-2xl border border-stone-300/80 dark:border-zinc-800/80 overflow-hidden relative group transition-all duration-300 hover:scale-[1.03] hover:shadow-2xl hover:border-amber-500/60 dark:hover:border-amber-500/50 flex items-center justify-center select-none shadow-sm bg-[var(--card-bg-light)] dark:bg-[var(--card-bg-dark)]">
|
||
|
||
<!-- Ссылка на полный просмотр картины -->
|
||
<a href="{% url 'hypn0_site:gallery_detail' item.s_hash_id %}"
|
||
class="absolute inset-0 z-10 flex items-center justify-center p-3 sm:p-4 border-0 border-none no-underline hover:border-0 hover:border-none focus:outline-none"
|
||
title="{{ item.s_title }}">
|
||
<div class="hypn0-card-svg w-full h-full flex items-center justify-center drop-shadow-sm transition-transform duration-300 group-hover:scale-105 border-0">
|
||
<template shadowrootmode="open">
|
||
{# Declarative Shadow DOM: изолирует ID (<defs id="s1"..>) и стили каждой картины в галерее. #}
|
||
{# В отличие от <img>, события мыши не блокируются, а в отличие от обычного inline SVG нет конфликтов идентификаторов. #}
|
||
<style>
|
||
:host {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 100%;
|
||
align-items: center;
|
||
justify-content: center;
|
||
pointer-events: auto;
|
||
}
|
||
svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
{# В покое внутри SVG действует --hypn0-play: paused (0% нагрузки на CPU). #}
|
||
{# При наведении мыши на хост-карточку переопределяем переменную на running, и анимация оживает. #}
|
||
:host(:hover) svg, svg:hover {
|
||
--hypn0-play: running !important;
|
||
}
|
||
</style>
|
||
{{ item.card_svg|safe }}
|
||
</template>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Верхний бейдж: Хэш -->
|
||
<div class="absolute top-2 left-2 z-20 pointer-events-none">
|
||
<span class="text-[10px] font-mono font-bold tracking-tight px-1.5 py-0.5 rounded bg-stone-900/70 text-stone-200 backdrop-blur-md border border-white/10 opacity-75 group-hover:opacity-100 transition-opacity">
|
||
¤{{ item.s_hash_id }}
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Нижняя панель статистики (Лайки и Просмотры) -->
|
||
<div class="absolute bottom-2 left-2 right-2 z-20 flex items-center justify-between pointer-events-none">
|
||
<!-- Бейдж лайков -->
|
||
<span class="inline-flex items-center gap-1 text-[11px] font-bold font-mono px-2 py-0.5 rounded-full bg-stone-900/80 text-amber-400 backdrop-blur-md border border-amber-500/20 shadow-sm opacity-90 group-hover:opacity-100 transition-opacity">
|
||
♥ {{ item.i_likes_count }}
|
||
</span>
|
||
|
||
<!-- Бейдж просмотров (проявляется при наведении) -->
|
||
<span class="inline-flex items-center gap-1 text-[10px] font-mono px-1.5 py-0.5 rounded-full bg-stone-900/80 text-stone-400 backdrop-blur-md opacity-0 group-hover:opacity-100 transition-opacity">
|
||
👁 {{ item.i_views_count }}
|
||
</span>
|
||
</div>
|
||
</div>
|