Files
2026-hypn0-site/hypn0/templates/blog/detail.html
T

383 lines
21 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{% extends '_base.html' %}
{% load static %}
{% block PAGE_TITLE %}{{ post.s_title|striptags }} | Хроники гипноза HypnoSVG{% endblock %}
{% block META_TITLE %}{{ post.s_title|striptags }} — HypnoSVG{% endblock %}
{% block META_DESCRIPTION %}{% if post.s_teaser %}{{ post.s_teaser|striptags|truncatechars:160 }}{% else %}Статья из хроник гипноза HypnoSVG: {{ post.s_title|striptags }}{% endif %}{% endblock %}
{% block OG_TITLE %}{{ post.s_title|striptags }} | HypnoSVG{% endblock %}
{% block OG_DESCRIPTION %}{% if post.s_teaser %}{{ post.s_teaser|striptags|truncatechars:200 }}{% else %}Статья из хроник гипноза HypnoSVG: {{ post.s_title|striptags }}{% endif %}{% endblock %}
{% block OG_IMAGE %}{% if post.f_cover_img %}{{ request.scheme }}://{{ request.get_host }}{{ post.f_cover_img.url }}{% elif post.k_item and post.k_item.file_svg %}{{ request.scheme }}://{{ request.get_host }}{{ post.k_item.file_svg.url }}{% else %}{% static 'img/og-hypn0-default.png' %}{% endif %}{% endblock %}
{% block CANONICAL %}{{ request.scheme }}://{{ request.get_host }}{{ post.get_absolute_url }}{% endblock %}
{% block EXTRA_LD_JSON %},
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Главная",
"item": "{{ request.scheme }}://{{ request.get_host }}{% url 'hypn0_site:index' %}"
},
{
"@type": "ListItem",
"position": 2,
"name": "Хроники гипноза",
"item": "{{ request.scheme }}://{{ request.get_host }}{% url 'hypn0_site:blog_feed' %}"
}{% if series_parent %},
{
"@type": "ListItem",
"position": 3,
"name": "{{ series_parent.s_title|striptags|escapejs }}",
"item": "{{ request.scheme }}://{{ request.get_host }}{{ series_parent.get_absolute_url }}"
},
{
"@type": "ListItem",
"position": 4,
"name": "{{ post.s_title|striptags|escapejs }}",
"item": "{{ request.scheme }}://{{ request.get_host }}{{ post.get_absolute_url }}"
}{% else %},
{
"@type": "ListItem",
"position": 3,
"name": "{{ post.s_title|striptags|escapejs }}",
"item": "{{ request.scheme }}://{{ request.get_host }}{{ post.get_absolute_url }}"
}{% endif %}
]
},
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "{{ post.s_title|striptags|escapejs }}",
"description": "{{ post.s_teaser|striptags|escapejs }}",
"datePublished": "{{ post.d_published_at|date:'c' }}",
"dateModified": "{{ post.d_updated_at|date:'c' }}",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "{{ request.scheme }}://{{ request.get_host }}{{ post.get_absolute_url }}"
}
}
{% endblock EXTRA_LD_JSON %}
{% block CONTENT %}
<article class="mx-auto space-y-10">
<!-- Навигационная полоса / Хлебные крошки -->
<nav aria-label="Хлебные крошки" class="flex flex-wrap items-center gap-1.5 text-xs font-bold uppercase tracking-wider text-stone-500 dark:text-stone-400">
<a href="{% url 'hypn0_site:index' %}" class="inline-flex items-center gap-1 " title="Главная">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
</svg>
<span class="hidden sm:inline">Главная</span>
</a>
<span class="text-stone-300 dark:text-zinc-700">/</span>
<a href="{% url 'hypn0_site:blog_feed' %}">
{{ post.blog_nav_title }}
</a>
{% if series_parent %}
<span class="text-stone-300 dark:text-zinc-700">/</span>
<a href="{{ series_parent.get_absolute_url }}" title="{{ series_parent.s_title|striptags }}">
Глава {{ post.i_order }}{% if series_total_count %} из {{ series_total_count }}{% endif %}
</a>
{% endif %}
<span class="text-stone-300 dark:text-zinc-700">/</span>
<span class="text-stone-400 dark:text-stone-500 truncate max-w-[180px] sm:max-w-xs md:max-w-sm font-normal" aria-current="page" title="{{ post.s_title|striptags }}">
{{ post.s_title|safe }}
</span>
</nav>
<!-- Серия: индикатор цикла (если пост является частью серии) -->
{% if series_parent %}
<div class="bg-purple-500/10 dark:bg-purple-950/30 border border-purple-500/20 rounded-2xl p-4 sm:p-5 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
<div class="flex items-center gap-3">
<span class="w-2.5 h-2.5 rounded-full bg-purple-500 animate-pulse shrink-0"></span>
<div class="text-xs">
<span class="text-stone-500 dark:text-stone-400">Материал входит в серию:</span>
<a href="{{ series_parent.get_absolute_url }}" class="font-bold text-purple-700 dark:text-purple-300 hover:underline border-0 ml-1">
{{ series_parent.s_title|safe }}
</a>
</div>
</div>
<span class="text-[11px] text-purple-600 dark:text-purple-400 shrink-0">
Глава {{ post.i_order }}
</span>
</div>
{% endif %}
<!-- ЕДИНАЯ ДВУХКОЛОНОЧНАЯ СЕТКА: 1/4 слева (превью + SVG), 3/4 справа (заголовок + дата + тизер + контент) -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-x-6 items-start">
<!-- 1. Верхний ряд слева (1/4): Тизер-превью обложки -->
<div class="md:col-span-1 w-full pb-8">
{% if post.f_cover_img %}{# ЕСТЬ ТИЗЕР-КАРТИНКА И ПОКАЗЫВАЕМ ЕË #}
<div class="aspect-square sm:aspect-[4/3] md:aspect-square rounded-2xl overflow-hidden border border-stone-200 dark:border-zinc-800 shadow-md bg-stone-100 dark:bg-zinc-900">
<img src="{{ post.f_cover_img.url }}"
alt="{{ post.s_title|striptags }}"
class="w-full h-full object-cover">
</div>
{% else %}{# НЕТ ТИЗЕР-КАРТИНКИ И ПОКАЗЫВАЕМ ЗАГЛУШКУ #}
<div class="aspect-square sm:aspect-[4/3] md:aspect-square rounded-2xl border border-dashed border-stone-300 dark:border-zinc-700 bg-stone-100/40 dark:bg-zinc-900/40 flex flex-col items-center justify-center p-3 text-stone-400 dark:text-stone-600 text-center">
<img src="{% static 'img/brain-slug.svg' %}" alt="Гипножаба" class="w-10 h-10 opacity-40 mb-1">{# <-- СЮДА ДЕФОЛТНУЮ КАРТИНКУ #}
<span class="text-[10px] uppercase tracking-wider">Тут ничего не нарисовано</span>{# <-- А ПОСЛЕ ЭТО УБРАТЬ #}
</div>
{% endif %}
</div>
<!-- 1. Верхний ряд справа (3/4): Заголовок + Дата + Тизер с непрерывной пунктирной линией -->
<div class="md:col-span-3 border-l-1 border-purple-500 border-dotted pl-6 pb-8 space-y-4">
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-black tracking-tight text-stone-900 dark:text-stone-100 leading-tight">
{{ post.s_title|safe }}
</h1>
<!-- Дата и время публикации статьи в рамочке с иконкой часов -->
<div class="flex items-center justify-start">
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-purple-500/10 text-purple-700 dark:text-purple-300 border border-purple-500/20 font-bold text-sm">
<svg class="w-3.5 h-3.5 text-purple-700 dark:text-purple-300 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<time datetime="{{ post.d_published_at|date:'c' }}">
{{ post.d_published_at|date:'d E 30y, H:i:s' }}
</time>
</div>
</div>
<!-- Лид / Тизер статьи -->
{% if post.s_teaser %}
<div class="text-base sm:text-lg text-stone-600 dark:text-stone-300 leading-relaxed font-sans p-4 sm:p-5 bg-stone-100 dark:bg-zinc-900 border border-stone-200 dark:border-zinc-800 rounded-2xl">
{{ post.s_teaser|safe }}
</div>
{% endif %}
</div>
<!-- 2. Нижний ряд слева (1/4): Связанный SVG + Музейная экспликация (выровнены по вертикали с первой строкой контента) -->
<div class="md:col-span-1 space-y-4">
{% if post.k_item %}
<aside class="space-y-3 md:sticky md:top-6">
<!-- Интерактивное SVG-полотно экспоната -->
<div class="aspect-square rounded-2xl overflow-hidden bg-stone-950 shadow-md flex items-center justify-center p-2 select-none hypn0-detail-canvas [&>svg]:w-full [&>svg]:h-full [&>svg]:max-w-full [&>svg]:max-h-full [&>svg]:object-contain">
{% if active_svg %}
<div class="w-full h-full flex items-center justify-center pointer-events-auto">
<template shadowrootmode="open">
<style>
:host {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
pointer-events: auto;
}
svg {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
--hypn0-play: running !important;
}
</style>
{{ active_svg|safe }}
</template>
</div>
{% elif post.k_item.file_svg %}
<img src="{{ post.k_item.file_svg.url }}" alt="{{ post.k_item.s_title }}" class="max-w-full max-h-full object-contain">
{% endif %}
</div>
<!-- Музейная экспликация (Табличка с описанием экспоната) -->
<div class="bg-stone-100/80 dark:bg-zinc-900/80 border border-stone-200/80 dark:border-zinc-800 rounded-2xl p-3.5 space-y-2.5 text-xs shadow-sm">
<div class="text-right">
<div class="font-bold text-stone-900 dark:text-stone-100 text-sm leading-snug">
{{ post.k_item.s_title|safe }}
</div>
<div class="flex items-center justify-end gap-1.5 my-2.5">
<a href="{% url 'hypn0_site:gallery_detail' post.k_item.s_hash_id %}"
class="text-[10px]"
title="Открыть картину в галерее">#{{ post.k_item.s_hash_id }}</a>
</div>
<div class="flex items-center justify-end gap-1.5 mt-1.5">
<span class="text-[10px] px-2 py-0.5 rounded-full bg-purple-500/10 text-purple-700 dark:text-purple-300 border border-purple-500/20 font-bold">
{{ post.k_item.get_i_level_display }}
</span>
</div>
</div>
<div class="border-t border-stone-200/60 dark:border-zinc-800 pt-2 space-y-1.5 text-[11px] text-stone-600 dark:text-stone-400">
{% if svg_stats.total_oscillators %}
<div class="flex justify-between items-center">
<span class="opacity-70">Осцилляций:</span>
<span class="font-bold text-stone-900 dark:text-stone-200">{{ svg_stats.total_oscillators }}</span>
</div>
{% endif %}
{% if svg_stats.viewbox %}
<div class="flex justify-between items-center">
<span class="opacity-70">viewBox:</span>
<span class="font-mono text-purple-600 dark:text-purple-400">{{ svg_stats.viewbox }}</span>
</div>
{% endif %}
{% if svg_stats.total_kb %}
<div class="flex justify-between items-center">
<span class="opacity-70">Вес:</span>
<span class="font-mono text-stone-900 dark:text-stone-200">{{ svg_stats.total_kb }} Кб</span>
</div>
{% endif %}
<div class="flex justify-between items-center">
<span><svg class="w-3.5 h-3.5 text-emerald-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
</svg></span>
<span class="inline-flex items-center gap-1 font-bold text-stone-900 dark:text-stone-200">
{{ post.k_item.i_views_count }}
</span>
</div>
<div class="flex justify-between items-center">
<span><svg class="w-3.5 h-3.5 fill-rose-500 text-rose-500 shrink-0" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
</svg></span>
<span class="inline-flex items-center gap-1 font-bold text-stone-900 dark:text-stone-200">
{{ post.k_item.i_likes_count }}
</span>
</div>
</div>
<!-- Действия с экспонатом -->
<div class="border-t border-stone-200/60 dark:border-zinc-800 pt-2 flex flex-col gap-1.5">
<a href="{% url 'hypn0_site:gallery_download' post.k_item.s_hash_id %}"
class="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-bold bg-stone-200/70 hover:bg-stone-200 dark:bg-zinc-800 dark:hover:bg-zinc-700 text-stone-700 dark:text-stone-300 transition-all border border-stone-300/50 dark:border-zinc-700/50 border-0 text-center">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
</svg>
<span>Скачать SVG</span>
</a>
</div>
</div>
</aside>
{% endif %}
</div>
<!-- 2. Нижний ряд справа (3/4): Текстовый блок статьи -->
<div class="md:col-span-3 border-l-1 border-purple-500 border-dotted pl-6">
<div class="prose max-w-none font-sans text-base sm:text-lg">
{{ post.s_content|safe }}
</div>
</div>
</div>
<!-- РАЗДЕЛ СЕРИИ: список глав (если статья является родительской подборкой/серией) -->
{% if series_posts and not series_parent %}
<section class="space-y-4 pt-8 border-t border-stone-200 dark:border-zinc-800">
<div class="flex items-center gap-3">
<div class="w-3 h-3 rounded-full bg-purple-500"></div>
<h2 class="text-xl font-bold uppercase tracking-wider text-stone-900 dark:text-stone-100">
Материалы и главы этого цикла
</h2>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
{% for child in series_posts %}
<div class="bg-stone-100/70 dark:bg-zinc-900/70 rounded-2xl border border-stone-200 dark:border-zinc-800 p-4 space-y-2 hover:border-purple-400 dark:hover:border-purple-600 transition-colors">
<div class="flex items-center justify-between text-[11px] text-stone-400">
<span class="font-bold text-purple-600 dark:text-purple-400">Глава {{ child.i_order }}</span>
<time datetime="{{ child.d_published_at|date:'c' }}">{{ child.d_published_at|date:'d E Y' }}</time>
</div>
<h3 class="font-bold text-sm text-stone-900 dark:text-stone-100">
<a href="{{ child.get_absolute_url }}" class="hover:text-purple-600 dark:hover:text-purple-400 transition-colors border-0">
{{ child.s_title|safe }}
</a>
</h3>
{% if child.s_teaser %}
<p class="text-xs text-stone-600 dark:text-stone-400 line-clamp-2">
{{ child.s_teaser|striptags }}
</p>
{% endif %}
</div>
{% endfor %}
</div>
</section>
{% endif %}
<!-- НАВИГАЦИЯ ВПЕРЕД / НАЗАД -->
<footer class="pt-8 border-t border-stone-200 dark:border-zinc-800 space-y-6">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<!-- Предыдущая статья -->
{% if prev_post %}
<a href="{{ prev_post.get_absolute_url }}"
class="group flex flex-col p-5 rounded-2xl bg-stone-100/70 dark:bg-zinc-900/70 border border-stone-200 dark:border-zinc-800 hover:border-purple-400 dark:hover:border-purple-600 transition-all shadow-sm border-0">
<span class="text-xs text-stone-400 dark:text-stone-500 mb-1 inline-flex items-center gap-1 group-hover:text-purple-600 transition-colors">
<svg class="w-3.5 h-3.5 transition-transform group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
</svg>
{% if series_parent %}Предыдущая глава цикла{% else %}Предыдущая депеша{% endif %}
</span>
<span class="font-bold text-sm text-stone-900 dark:text-stone-100 line-clamp-2">
{{ prev_post.s_title|safe }}
</span>
</a>
{% else %}
<div class="p-5 rounded-2xl bg-stone-100/30 dark:bg-zinc-900/30 border border-stone-200/40 dark:border-zinc-800/40 opacity-40">
<span class="text-xs text-stone-400 block mb-1">
{% if series_parent %}Первая глава цикла{% else %}Начало хроник гипноза{% endif %}
</span>
<span class="font-bold text-sm text-stone-500 dark:text-stone-400">
Нет предшествующих записей
</span>
</div>
{% endif %}
<!-- Следующая статья -->
{% if next_post %}
<a href="{{ next_post.get_absolute_url }}"
class="group flex flex-col items-end text-right p-5 rounded-2xl bg-stone-100/70 dark:bg-zinc-900/70 border border-stone-200 dark:border-zinc-800 hover:border-purple-400 dark:hover:border-purple-600 transition-all shadow-sm border-0">
<span class="text-xs text-stone-400 dark:text-stone-500 mb-1 inline-flex items-center gap-1 group-hover:text-purple-600 transition-colors">
{% if series_parent %}Следующая глава цикла{% else %}Следующая депеша{% endif %}
<svg class="w-3.5 h-3.5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
</span>
<span class="font-bold text-sm text-stone-900 dark:text-stone-100 line-clamp-2">
{{ next_post.s_title|safe }}
</span>
</a>
{% else %}
<div class="flex flex-col items-end text-right p-5 rounded-2xl bg-stone-100/30 dark:bg-zinc-900/30 border border-stone-200/40 dark:border-zinc-800/40 opacity-40">
<span class="text-xs text-stone-400 block mb-1">
{% if series_parent %}Финальная глава цикла{% else %}Край ноосферы{% endif %}
</span>
<span class="font-bold text-sm text-stone-500 dark:text-stone-400">
Свежие депеши еще материализуются
</span>
</div>
{% endif %}
</div>
<!-- Центральная кнопка возврата в блог -->
<div class="text-center pt-2">
<a href="{% url 'hypn0_site:blog_feed' %}"
class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl text-xs font-bold uppercase tracking-wider bg-stone-100 hover:bg-stone-200 dark:bg-zinc-800 dark:hover:bg-zinc-700 text-stone-700 dark:text-stone-300 transition-all border border-stone-200 dark:border-zinc-700 border-0">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/>
</svg>
<span>Все статьи в хрониках</span>
</a>
</div>
</footer>
</article>
{% endblock CONTENT %}