136 lines
24 KiB
HTML
136 lines
24 KiB
HTML
<!doctype html><html lang="en" x-data="{darkMode:false}" x-init="darkMode=localStorage.getItem('darkMode')==='true';$watch('darkMode',
|
||
val=>{if(val)document.documentElement.classList.add('dark');else document.documentElement.classList.remove('dark');})" x-bind:class="{'dark':darkMode}">
|
||
<!--█████████████████████████████████████████████████████████████████████████████████████████████████--><head><meta charset="utf-8" /><!--
|
||
█░░░░░░░░░░░░░░█░░░░░░█████████░░░░░░███████████████░░░░░░░░░░░░░░█░░░░░░█████████░░░░░░░░░░░░░░█░░░░░░░░░░░░░░░░███░░░░░░░░██░░░░░░░░████
|
||
█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀░░█████████░░▄▀░░███████████████░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀░░█████████░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀▄▀░░███░░▄▀▄▀░░██░░▄▀▄▀░░████
|
||
█░░▄▀░░░░░░▄▀░░█░░▄▀░░█████████░░▄▀░░███████████████░░▄▀░░░░░░░░░░█░░▄▀░░█████████░░▄▀░░░░░░▄▀░░█░░▄▀░░░░░░░░▄▀░░███░░░░▄▀░░██░░▄▀░░░░████
|
||
█░░▄▀░░██░░▄▀░░█░░▄▀░░█████████░░▄▀░░███████████████░░▄▀░░█████████░░▄▀░░█████████░░▄▀░░██░░▄▀░░█░░▄▀░░████░░▄▀░░█████░░▄▀▄▀░░▄▀▄▀░░██████
|
||
█░░▄▀░░░░░░▄▀░░█░░▄▀░░█████████░░▄▀░░███████████████░░▄▀░░█████████░░▄▀░░█████████░░▄▀░░██░░▄▀░░█░░▄▀░░░░░░░░▄▀░░█████░░░░▄▀▄▀▄▀░░░░██████
|
||
█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀░░█████████░░▄▀░░███████████████░░▄▀░░██░░░░░░█░░▄▀░░█████████░░▄▀░░██░░▄▀░░█░░▄▀▄▀▄▀▄▀▄▀▄▀░░███████░░░░▄▀░░░░████████
|
||
█░░▄▀░░░░░░▄▀░░█░░▄▀░░█████████░░▄▀░░███████████████░░▄▀░░██░░▄▀░░█░░▄▀░░█████████░░▄▀░░██░░▄▀░░█░░▄▀░░░░░░▄▀░░░░█████████░░▄▀░░██████████
|
||
█░░▄▀░░██░░▄▀░░█░░▄▀░░█████████░░▄▀░░███████████████░░▄▀░░██░░▄▀░░█░░▄▀░░█████████░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░███████████░░▄▀░░██████████
|
||
█░░▄▀░░██░░▄▀░░█░░▄▀░░░░░░░░░░█░░▄▀░░░░░░░░░░███████░░▄▀░░░░░░▄▀░░█░░▄▀░░░░░░░░░░█░░▄▀░░░░░░▄▀░░█░░▄▀░░██░░▄▀░░░░░░███████░░▄▀░░██████████
|
||
█░░▄▀░░██░░▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░███████░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀░░██░░▄▀▄▀▄▀░░███████░░▄▀░░██████████
|
||
█░░░░░░██░░░░░░█░░░░░░░░░░░░░░█░░░░░░░░░░░░░░███████░░░░░░░░░░░░░░█░░░░░░░░░░░░░░█░░░░░░░░░░░░░░█░░░░░░██░░░░░░░░░░███████░░░░░░██████████
|
||
██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
|
||
█████████████████████████████████████████████████████████████████████████████████████ This source code contains messages hidden from human consciousness.
|
||
█░░░░░░░░░░░░░░█░░░░░░░░░░░░░░███████░░░░░░░░░░░░░░█░░░░░░██░░░░░░█░░░░░░░░░░░░░░████ They are encrypted in indentations, chaotically placed spaces,
|
||
█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░███████░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░████ and alignment. The mentally unprepared are strictly advised against
|
||
█░░░░░░▄▀░░░░░░█░░▄▀░░░░░░▄▀░░███████░░░░░░▄▀░░░░░░█░░▄▀░░██░░▄▀░░█░░▄▀░░░░░░░░░░████ reading into this or searching for bugs. Should you find any error,
|
||
█████░░▄▀░░█████░░▄▀░░██░░▄▀░░███████████░░▄▀░░█████░░▄▀░░██░░▄▀░░█░░▄▀░░████████████ you will permanently forfeit sane reasoning, and questions like this
|
||
█████░░▄▀░░█████░░▄▀░░██░░▄▀░░███████████░░▄▀░░█████░░▄▀░░░░░░▄▀░░█░░▄▀░░░░░░░░░░████ “why”, “wherefore”, and “what is the meaning” will haunt your mind
|
||
█████░░▄▀░░█████░░▄▀░░██░░▄▀░░███████████░░▄▀░░█████░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░████ forever. Neocortex degradation is guaranteed. The site developer
|
||
█████░░▄▀░░█████░░▄▀░░██░░▄▀░░███████████░░▄▀░░█████░░▄▀░░░░░░▄▀░░█░░▄▀░░░░░░░░░░████ bears zero liability for neural consequences. Forward all complaints
|
||
█████░░▄▀░░█████░░▄▀░░██░░▄▀░░███████████░░▄▀░░█████░░▄▀░░██░░▄▀░░█░░▄▀░░████████████ to the “Department of Feeble-Minded Benefits”, New New York City Hall
|
||
█████░░▄▀░░█████░░▄▀░░░░░░▄▀░░███████████░░▄▀░░█████░░▄▀░░██░░▄▀░░█░░▄▀░░░░░░░░░░████
|
||
█████░░▄▀░░█████░░▄▀▄▀▄▀▄▀▄▀░░███████████░░▄▀░░█████░░▄▀░░██░░▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░████ Requires Grade 24 Bureaucrat clearance
|
||
█████░░░░░░█████░░░░░░░░░░░░░░███████████░░░░░░█████░░░░░░██░░░░░░█░░░░░░░░░░░░░░████
|
||
█████████████████████████████████████████████████████████████████████████████████████ ALL GLORY TO THE HYPNOTOAD! YOU’LL LOSE YOUR MIND, IF YOU GAZE ANY...
|
||
███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
|
||
█░░░░░░██░░░░░░█░░░░░░░░██░░░░░░░░█░░░░░░░░░░░░░░█░░░░░░██████████░░░░░░█░░░░░░░░░░░░░░█░░░░░░░░░░░░░░█░░░░░░░░░░░░░░█░░░░░░░░░░░░░░█░░░░░░░░░░░░███░░░░░░█
|
||
█░░▄▀░░██░░▄▀░░█░░▄▀▄▀░░██░░▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀░░░░░░░░░░██░░▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀░░░░█░░▄▀░░█
|
||
█░░▄▀░░██░░▄▀░░█░░░░▄▀░░██░░▄▀░░░░█░░▄▀░░░░░░▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░██░░▄▀░░█░░▄▀░░░░░░▄▀░░█░░░░░░▄▀░░░░░░█░░▄▀░░░░░░▄▀░░█░░▄▀░░░░░░▄▀░░█░░▄▀░░░░▄▀▄▀░░█░░▄▀░░█
|
||
█░░▄▀░░██░░▄▀░░███░░▄▀▄▀░░▄▀▄▀░░███░░▄▀░░██░░▄▀░░█░░▄▀░░░░░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█████░░▄▀░░█████░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░█
|
||
█░░▄▀░░░░░░▄▀░░███░░░░▄▀▄▀▄▀░░░░███░░▄▀░░░░░░▄▀░░█░░▄▀░░██░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█████░░▄▀░░█████░░▄▀░░██░░▄▀░░█░░▄▀░░░░░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░█
|
||
█░░▄▀▄▀▄▀▄▀▄▀░░█████░░░░▄▀░░░░█████░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀░░██░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█████░░▄▀░░█████░░▄▀░░██░░▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░█
|
||
█░░▄▀░░░░░░▄▀░░███████░░▄▀░░███████░░▄▀░░░░░░░░░░█░░▄▀░░██░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█████░░▄▀░░█████░░▄▀░░██░░▄▀░░█░░▄▀░░░░░░▄▀░░█░░▄▀░░██░░▄▀░░█░░░░░░█
|
||
█░░▄▀░░██░░▄▀░░███████░░▄▀░░███████░░▄▀░░█████████░░▄▀░░██░░▄▀░░░░░░▄▀░░█░░▄▀░░██░░▄▀░░█████░░▄▀░░█████░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░████████
|
||
█░░▄▀░░██░░▄▀░░███████░░▄▀░░███████░░▄▀░░█████████░░▄▀░░██░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀░░░░░░▄▀░░█████░░▄▀░░█████░░▄▀░░░░░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░░░▄▀▄▀░░█░░░░░░█
|
||
█░░▄▀░░██░░▄▀░░███████░░▄▀░░███████░░▄▀░░█████████░░▄▀░░██░░░░░░░░░░▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█████░░▄▀░░█████░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀▄▀▄▀▄▀░░░░█░░▄▀░░█
|
||
█░░░░░░██░░░░░░███████░░░░░░███████░░░░░░█████████░░░░░░██████████░░░░░░█░░░░░░░░░░░░░░█████░░░░░░█████░░░░░░░░░░░░░░█░░░░░░██░░░░░░█░░░░░░░░░░░░███░░░░░░█
|
||
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->{% load static %}
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<meta name="description" content="{% block DESCRIPTION %}Neocortex-disrupting SVG matrices. Neural flicker algorithms inducing deep hypnotic trance. A revolutionary web-retention technology. Consult your neuropsychologist before deployment{% endblock %}" />
|
||
<meta name="keywords" content="{% block KEYWORDS %}hypn0, HypnoSVG, svg matrix, hypnotoad, brain slug, vector halftone generator, k-means svg, web design patterns, css grid animation, animated svg{% endblock %}" />
|
||
<meta name="copyright" lang="en" content="Sergei Erjemin{% block META_COPYRIGHT_AUTHOR %}{% endblock %}." />
|
||
<meta name="robots" content="{% block ROBOTS %}index,follow{% endblock %}" />
|
||
<meta name="format-detection" content="telephone=no" />
|
||
<title>{% block PAGE_TITLE %}HypnoSVG (hypn0) — Animated SVG Halftone & Vector Matrix Generator Online{% endblock %}</title>
|
||
<meta name="meta-title" content="{% block META_TITLE %}HypnoSVG (hypn0) — Animated SVG Halftone & Vector Matrix Generator Online{% endblock %}" />
|
||
<meta name="meta-description" content="{% block META_DESCRIPTION %}Online generator of animated SVG halftones and hypnotic vector matrices with CSS pulsations. Create living vector raster backgrounds in seconds.{% endblock %}" />
|
||
<meta property="og:site_name" content="hypn0.xyz" />
|
||
<meta property="og:locale" content="en_US" />
|
||
<meta property="og:title" content="{% block OG_TITLE %}HypnoSVG (hypn0) — Animated SVG Halftone Generator{% endblock %}" />
|
||
<meta property="og:description" content="{% block OG_DESCRIPTION %}Online generator of animated SVG halftones and vector matrices. Create psychedelic living SVG patterns in one click.{% endblock %}" />
|
||
<meta property="og:url" content="{% block OG_URL %}{{ request.scheme }}://{{ request.get_host }}{{ request.path }}{% endblock %}" />
|
||
<meta property="og:type" content="{% block OG_TYPE %}website{% endblock %}" />
|
||
<meta property="og:image" content="{% block OG_IMAGE %}{% static 'img/og-hypn0-default.png' %}{% endblock %}" />
|
||
<meta property="og:image:alt" content="{% block OG_IMAGE_ALT %}HypnoSVG (hypn0) — Animated SVG Halftone Generator{% endblock %}" />
|
||
<meta name="twitter:card" content="{% block TWITTER_CARD %}summary_large_image{% endblock %}" />
|
||
<meta name="twitter:title" content="{% block TWITTER_TITLE %}HypnoSVG (hypn0) — Animated SVG Halftone Generator{% endblock %}" />
|
||
<meta name="twitter:description" content="{% block TWITTER_DESCRIPTION %}Online generator of animated SVG halftones and vector matrices. Create psychedelic living SVG patterns in one click.{% endblock %}" />
|
||
<meta name="twitter:image" content="{% block TWITTER_IMAGE %}{% static 'img/og-hypn0-default.png' %}{% endblock %}" />
|
||
<meta name="theme-color" content="#F5F5F5" />
|
||
<!-- Best viewed on a 15" CGA monitor at 25 Hz. Up to total consciousness subjugation -->
|
||
{# Joke #}<meta name="generator" content="Microsoft FrontPage 1.0 (Patchlevel 42)" />
|
||
{# Joke #}<meta name="hypno-pulsation-level" content="97.9%" />
|
||
{# Joke #}<meta name="brain-slug-compatibility" content="v2.1" />
|
||
<!-- WARNING: Still not optimized for Netscape Navigator 3.2 and Microsoft Internet Explorer 6.0 -->
|
||
<meta name="apple-mobile-web-app-title" content="hypn0" />
|
||
{# !CANONICAL #}<link rel="canonical" href="{% block CANONICAL %}{{ request.scheme }}://{{ request.get_host }}{{ request.path }}{% endblock %}" />
|
||
<link rel="icon" type="image/png" href="{% static 'img/favicon.png' %}" sizes="96x96" />
|
||
<link rel="icon" type="image/svg+xml" href="{% static 'img/favicon.svg' %}" />
|
||
<link rel="shortcut icon" href="{% static 'img/favicon.ico' %}" />
|
||
<link rel="apple-touch-icon" href="{% static 'img/apple-touch-icon.png' %}" sizes="180x180" />
|
||
<link rel="manifest" href="{% static 'img/site.webmanifest' %}" />
|
||
<script>
|
||
if (localStorage.getItem('darkMode') === 'true' || (!('darkMode' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||
document.documentElement.classList.add('dark');
|
||
} else {
|
||
document.documentElement.classList.remove('dark');
|
||
}
|
||
</script>
|
||
{% if IS_DEBUG %}{% comment %}
|
||
Переключение dev/prod стилей Tailwind CSS происходит
|
||
АВТОМАТИЧЕСКИ через переменную IS_DEBUG (см. контексный-процессор
|
||
frontend/context_processors.py), DEV: tailwindcss из CDN, компилируется прямо в браузере. Удобно
|
||
для разработки (не нужна сборка), но грузит браузер и prod не используется. {% endcomment %}
|
||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>{% comment %}
|
||
Кастомные @theme/@layer директивы проекта (токены цвета, типовой стиль ссылок)
|
||
лежат в css/tailwind-custom.css. @tailwindcss/browser сканирует и компилирует ТОЛЬКО то, что
|
||
видит в финальном DOM — то есть только содержимое тегов style с type text/tailwindcss, а не
|
||
внешние .css, подключённые через link. Поэтому файл вставляется сюда через include, а не
|
||
подключается отдельным link.{% endcomment %}
|
||
<style type="text/tailwindcss">
|
||
{% include "css/tailwind-custom.css" %}
|
||
</style>{% else %}{% comment %} PROD: заранее собранный Tailwind CLI файл (см.
|
||
frontend-assembly/tailwind/input.css и package.json). CLI сканирует шаблоны проекта и генерирует
|
||
только реально используемые классы, включая кастомные @theme/@layer директивы из того же самого
|
||
файла css/tailwind-custom.css (подключён в input.css через @import).{% endcomment %}
|
||
<link rel="stylesheet" href="{% static 'css/tailwind.min.css' %}" />{% endif %}
|
||
<script type="application/ld+json">
|
||
[
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "WebSite",
|
||
"name": "hypn0.xyz",
|
||
"url": "{{ request.scheme }}://{{ request.get_host }}/"
|
||
}{% block EXTRA_LD_JSON %}
|
||
{% endblock EXTRA_LD_JSON %}
|
||
]
|
||
</script>
|
||
<script src="{% static 'js/hypn0.js' %}" defer></script>
|
||
<script src="{% static 'js/alpine.min.js' %}" defer></script>
|
||
<script src="{% static 'js/htmx.min.js' %}" defer></script>
|
||
{% block EXTRA_HEAD %}{% endblock EXTRA_HEAD %}
|
||
</head>
|
||
<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' class="bg-stone-50 text-emerald-700 dark:bg-zinc-950 dark:text-emerald-100 font-mono">
|
||
<noscript>
|
||
<div class="sticky top-0 z-50 bg-amber-500 text-stone-950 px-4 py-2.5 text-center text-xs sm:text-sm font-bold shadow-lg border-b border-amber-600 flex items-center justify-center gap-2">
|
||
<span>⚠️</span>
|
||
<span>To subjugate the mind and synthesize hypnotic SVG matrices, please enable <strong>JavaScript</strong> in your browser!</span>
|
||
</div>
|
||
</noscript>
|
||
{% block ADD_CSS1 %}{% endblock %}{% block ADD_CSS2 %}{% endblock %}{% block ADD_CSS3 %}{% endblock %}{% block BODY %}
|
||
{% include "block/header.html" %}
|
||
<main id="main-content" class="mx-auto min-h-screen max-w-7xl px-4 py-8">
|
||
{% block CONTENT %}{% endblock CONTENT %}
|
||
</main>
|
||
{# {% include "blocks/footer.jinja2" %} #}{% endblock BODY %}{% if not ALLOW_TRACKING %}{# Если клиент еще не согласился на отслеживание покажем ему уведомление #}{% include "block/allow-tracking.html" %}{% else %}{# Если согласился -- отслеживаем#}
|
||
<script src="{% static 'js/analytics.js' %}"></script>
|
||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5FVH3KMJ" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||
<noscript><div><img src="https://mc.yandex.ru/watch/112812760" style="position:absolute; left:-9999px;" alt="" /></div></noscript>{% endif %}
|
||
{% block ADD_JS1 %}{% endblock ADD_JS1 %}{% block ADD_JS2 %}{% endblock ADD_JS2 %}{% block ADD_JS3 %}{% endblock ADD_JS3 %}</body>
|
||
</html> |