erjemin/2018-lpon-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: front (4) шаблон шапки (драфт 01) + главная страница (драфт 00)

Browse Source
This commit is contained in:
erjemin
2026-07-25 20:41:36 +03:00
parent 18ff09fe3d
commit ad4f176209
6 changed files with 56 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lpon_site/templates/_base.html
+6 -6
View File
@@ -43,17 +43,17 @@
"name": "LPON.RU",
"url": "{{ request.scheme }}://{{ request.get_host }}/"
}
</script>{% block EXTRAHEAD %}
{% endblock %}
</script>{% block EXTRAHEAD %}{% endblock EXTRAHEAD %}
<link rel="stylesheet" href="{% static 'css/lpon.css' %}" />
</head>
<body class="bg-white dark:bg-slate-950 text-slate-900 dark:text-slate-100">{% block ADD_CSS1 %}{% endblock %}{% block ADD_CSS2 %}{% endblock %}{% block ADD_CSS3 %}{% endblock %}{% block BODY %}
{# {% include "blocks/header_nav.jinja2" %}#}
<main id="main-content">{% block CONTENT %}{% endblock %}</main>
{% include "block/header.html" %}
<main id="main-content">{% block CONTENT %}{% endblock CONTENT %}
</main>
{# {% include "blocks/footer.jinja2" %}{% if COOKIES %}#}
{# {% include "blocks/accept-cookies.jinja2" %}{% endif %}#}
{% endblock BODY %}
<script src="{% static 'js/alpine.min.js' %}"></script>
<script src="{% static 'js/htmx.min.js' %}"></script> {% block ADD_JS1 %}{% endblock %}{% block ADD_JS2 %}{% endblock %}{% block ADD_JS3 %}
{% endblock %}</body>
<script src="{% static 'js/htmx.min.js' %}"></script> {% block ADD_JS1 %}{% endblock ADD_JS1 %}{% block ADD_JS2 %}{% endblock ADD_JS2 %}{% block ADD_JS3 %}{% endblock ADD_JS3 %}
</body>
</html>
lpon_site/templates/block/header.html
+21
View File
@@ -0,0 +1,21 @@
{% load static %}<header class="sticky top-0 z-50 bg-white/90 dark:bg-slate-800/70 backdrop-blur border-b border-gray-200 dark:border-gray-800 bg-[url({% static 'svgs/cc.svg' %})] bg-bottom-right bg-no-repeat grid grid-cols-[1fr_auto_1fr] items-center content-center gap-x-4 px-4 py-0">
{# ЛЕВОЕ МЕНЮ #}<menu class="flex items-center gap-x-4 justify-self-end text-xl font-semibold text-slate-900 dark:text-slate-100">
<a href="#" class="px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg">ВИНИЛ</a>
<span class="px-4 py-2 bg-gray-300 dark:bg-gray-600 rounded-lg hidden md:block">КАССЕТЫ</span>
<a href="#" class="px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg hidden md:block">MD</a>
</menu>{# /ЛЕВОЕ МЕНЮ #}
{# ЛОГОТИП В ЦЕНТРЕ #}<div class="flex flex-col items-center justify-self-center px-6">
<a href="/" class="block leading-none">
<picture id="logo" class="block px-6 mb-0 mt-2 leading-none">
<source srcset="{% static 'svgs/logo-lpon-d.svg' %}" media="(prefers-color-scheme: dark)" class="mx-auto h-16">
<img src="{% static 'svgs/logo-lpon-l.svg' %}" alt="Логотип lpon.ru" class="mx-auto h-16 block">
</picture>
</a>
</div>{# /ЛОГОТИП В ЦЕНТРЕ #}
{# ПРАВОЕ МЕНЮ #}<menu class="flex items-center gap-x-4 justify-self-start text-xl font-semibold text-slate-900 dark:text-slate-100">
<a href="#" class="px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg">CD</a>
<a href="#" class="px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg hidden md:block hyphens-none">BLU-RAY</a>
<a href="#" class="px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg hidden lg:block">АКСЕССУАРЫ</a>
</menu>{# /ПРАВОЕ МЕНЮ #}
{# СЛОГАН #}<p id="slogan" class="col-span-3 text-xs tracking-widest text-gray-300 bg-black/80 dark:text-gray-300 dark:bg-gray-400/80 px-6 pt-1 pb-1 mt-2 mb-4 leading-none rounded-lg justify-self-center">Живой звук C-46, C-60, C-90 и&nbsp;далее…</p>{# /СЛОГАН #}
</header>
lpon_site/templates/catalog.html
+12
View File
@@ -0,0 +1,12 @@
{% extends "_base.html" %}{% load static %}
{% block DESCRIPTION %}LPON — Магазин виниловых пластинок и аудиокассет{% endblock %}
{% block CONTENT %}
<div class="grid grid-cols-6 gap-4 h-lvh">
<div class="col-span-4 col-start-2 bg-blue-500 ...">01 Каталог</div>
<div class="col-start-1 col-end-3 bg-blue-600 ...">02 Блок</div>
<div class="col-span-2 col-end-7 bg-blue-500 ...">03 Блок</div>
<div class="col-start-1 col-end-7 bg-blue-200 ...">04 Блок</div>
</div>
{% endblock CONTENT %}