578 lines
19 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.

{% load static %}
{% load programmer_tags %}
{% load django_bootstrap5 %}
<!DOCTYPE html>
<html lang="ru">
<head>
<title>{{title}}</title>
<!-- Основные мета-теги -->
<meta name="description" content="{% block meta_description %}{{ meta_description|default:'Профессиональный программист 1С с более чем 10-летним опытом. Разработка, интеграция и оптимизация систем 1С.' }}{% endblock %}">
<meta name="keywords" content="{% block meta_keywords %}{{ meta_keywords|default:'программист 1С, разработка 1С, интеграция 1С, оптимизация 1С, 1С предприятие' }}{% endblock %}">
<meta name="author" content="Николай Сердюк">
<!-- Open Graph для соцсетей -->
<meta property="og:title" content="{{title}}">
<meta property="og:description" content="{% block og_description %}{{ meta_description|default:'Профессиональный программист 1С с более чем 10-летним опытом' }}{% endblock %}">
<meta property="og:type" content="website">
<meta property="og:url" content="{{ request.build_absolute_uri }}">
<meta property="og:image" content="{% static 'programmer/images/og-image.jpg' %}">
<meta property="og:site_name" content="Программист 1С - Николай Сердюк">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{title}}">
<meta name="twitter:description" content="{% block twitter_description %}{{ meta_description|default:'Профессиональный программист 1С с более чем 10-летним опытом' }}{% endblock %}">
<meta name="twitter:image" content="{% static 'programmer/images/og-image.jpg' %}">
<!-- Дополнительные SEO-теги -->
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
<link rel="canonical" href="{{ request.build_absolute_uri }}">
{% bootstrap_css %}
<!-- Основной CSS файл (темная тема по умолчанию) -->
<link type="text/css" href="{% static 'programmer/css/styles_w.css' %}" rel="stylesheet" id="theme-css" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="{% static 'programmer/images/main.ico' %}" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
/* Временные стили для тумблера и мобильного меню */
.theme-switcher {
display: flex;
align-items: center;
}
.theme-toggle-checkbox {
display: none;
}
.theme-toggle-label {
position: relative;
display: flex;
align-items: center;
width: 60px;
height: 30px;
background: #222738;
border: 2px solid #2D3447;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
padding: 2px;
}
.theme-toggle-slider {
position: absolute;
width: 24px;
height: 24px;
background: #FF6B00;
border-radius: 50%;
transition: all 0.3s ease;
left: 2px;
z-index: 2;
}
.theme-toggle-checkbox:checked + .theme-toggle-label .theme-toggle-slider {
transform: translateX(30px);
background: #0055A5;
}
.theme-icon {
position: absolute;
font-size: 12px;
transition: all 0.3s ease;
z-index: 1;
}
.theme-icon.sun {
left: 8px;
opacity: 0;
}
.theme-icon.moon {
right: 8px;
opacity: 1;
}
.theme-toggle-checkbox:checked + .theme-toggle-label .theme-icon.sun {
opacity: 1;
}
.theme-toggle-checkbox:checked + .theme-toggle-label .theme-icon.moon {
opacity: 0;
}
.nav-actions {
display: flex;
align-items: center;
gap: 1rem;
}
/* Мобильное меню */
.mobile-menu-btn {
display: none;
background: none;
border: none;
color: var(--text-primary);
font-size: 1.5rem;
cursor: pointer;
padding: 0.5rem;
border-radius: 4px;
transition: all 0.3s ease;
}
.mobile-menu-btn:hover {
background: var(--border-light);
}
.mobile-menu-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.mobile-menu {
position: fixed;
top: 0;
right: -100%;
width: 300px;
height: 100%;
background: var(--bg-card);
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
transition: right 0.3s ease;
z-index: 1000;
overflow-y: auto;
padding: 2rem 1.5rem;
}
.mobile-menu.active {
right: 0;
}
.mobile-menu-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border-light);
}
.mobile-menu-close {
background: none;
border: none;
font-size: 1.5rem;
color: var(--text-primary);
cursor: pointer;
padding: 0.5rem;
border-radius: 4px;
transition: all 0.3s ease;
}
.mobile-menu-close:hover {
background: var(--border-light);
}
.mobile-nav-menu {
list-style: none;
margin-bottom: 2rem;
}
.mobile-nav-item {
margin-bottom: 0.5rem;
}
.mobile-nav-link {
display: block;
padding: 1rem;
color: var(--text-primary);
text-decoration: none;
border-radius: 8px;
transition: all 0.3s ease;
font-weight: 500;
}
.mobile-nav-link:hover,
.mobile-nav-link.active {
background: var(--primary);
color: white;
}
.mobile-nav-actions {
display: flex;
flex-direction: column;
gap: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--border-light);
}
/* ===== MOBILE RESPONSIVE STYLES ===== */
@media (max-width: 768px) {
.hero-title {
font-size: 2.5rem;
}
.hero-subtitle {
font-size: 1.125rem;
padding: 0 1rem;
}
.page-title {
font-size: 2.25rem;
}
.page-subtitle {
font-size: 1.125rem;
padding: 0 1rem;
}
.grid-2 {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.modern-card {
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.card-title {
font-size: 1.375rem;
}
.content-card {
padding: 1.5rem;
}
.about-section {
padding: 1.5rem;
}
.skills-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.competence-item {
flex-direction: column;
padding: 1.5rem;
gap: 1.5rem;
}
.competence-scan-container {
width: 100%;
max-width: 280px;
margin: 0 auto;
}
.recall-header {
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}
.recall-meta {
flex-direction: column;
gap: 0.5rem;
}
.footer-content {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.footer-contacts p {
justify-content: center;
}
.card-actions {
flex-direction: column;
}
.btn {
width: 100%;
justify-content: center;
}
.modal-content {
margin: 5% auto;
max-width: 95%;
}
.modal-header {
padding: 1.5rem 1.5rem 1rem;
}
.modal-body {
padding: 1.5rem;
}
.page-content {
padding: 1.5rem;
}
.breadcrumbs {
font-size: 0.8rem;
}
}
@media (max-width: 480px) {
.hero-title {
font-size: 2rem;
}
.hero-subtitle {
font-size: 1rem;
}
.page-title {
font-size: 1.875rem;
}
.modern-card {
padding: 1.25rem;
}
.content-card {
padding: 1.25rem;
}
.about-section {
padding: 1.25rem;
}
.card-title {
font-size: 1.25rem;
}
.competence-scan-container {
max-width: 100%;
}
}
</style>
{% block extra_css %}
<!-- Дополнительные CSS файлы для конкретных страниц -->
{% endblock %}
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-X3W9YSQHRM"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-X3W9YSQHRM');
</script>
<!-- Яндекс.Метрика -->
<script type="text/javascript">
(function(m,e,t,r,i,k,a){
m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
})(window, document,'script','https://mc.yandex.ru/metrika/tag.js?id=105278924', 'ym');
ym(105278924, 'init', {ssr:true, webvisor:true, clickmap:true, ecommerce:"dataLayer", accurateTrackBounce:true, trackLinks:true});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/105278924" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "Николай Сердюк",
"jobTitle": "Программист 1С",
"description": "Профессиональный программист 1С с более чем 10-летним опытом",
"url": "https://nikdizell.ru",
"email": "{{ CONTACT_EMAIL }}",
"telephone": "{{ CONTACT_PHONE }}",
"knowsAbout": [
"1С:Предприятие 8.3",
"Управление торговлей",
"Бухгалтерия предприятия",
"Зарплата и управление персоналом",
"SQL",
"Веб-сервисы",
"API интеграция"
],
"hasOccupation": {
"@type": "Occupation",
"name": "Программист 1С",
"description": "Разработка и сопровождение систем на платформе 1С",
"occupationLocation": "Россия"
}
}
</script>
</head>
<body>
<!-- Header -->
{% block mainmenu %}
<header class="header">
<div class="container">
<nav class="nav">
<a href="{% url 'home' %}" class="logo">
<img src="{% static 'programmer/images/main.ico' %}" alt="Logo" class="logo-img">
<span class="logo-text">Программист 1С</span>
</a>
<!-- Десктопное меню -->
<ul class="nav-menu">
{% for m in menu %}
<li class="nav-item">
<a href="{% url m.url_name %}" class="nav-link {% if request.resolver_match.url_name == m.url_name %}active{% endif %}">
{{m.title}}
</a>
</li>
{% endfor %}
</ul>
<div class="nav-actions">
<a href="https://t.me/odinesina_prog" target="_blank" class="telegram-btn">
<span class="telegram-icon">
<img src="{% static 'programmer/images/share_tg.png' %}" alt="Telegram" width="20" height="20">
</span>
</a>
<!-- Theme Toggle Switch -->
<div class="theme-switcher">
<input type="checkbox" id="theme-toggle" class="theme-toggle-checkbox" checked>
<label for="theme-toggle" class="theme-toggle-label">
<span class="theme-toggle-slider"></span>
<span class="theme-icon sun">☀️</span>
<span class="theme-icon moon">🌙</span>
</label>
</div>
<!-- Кнопка мобильного меню -->
<button class="mobile-menu-btn" id="mobileMenuBtn">
</button>
</div>
</nav>
</div>
</header>
<!-- Мобильное меню -->
<div class="mobile-menu-overlay" id="mobileMenuOverlay"></div>
<div class="mobile-menu" id="mobileMenu">
<div class="mobile-menu-header">
<h3>Меню</h3>
<button class="mobile-menu-close" id="mobileMenuClose">
</button>
</div>
<ul class="mobile-nav-menu">
{% for m in menu %}
<li class="mobile-nav-item">
<a href="{% url m.url_name %}" class="mobile-nav-link {% if request.resolver_match.url_name == m.url_name %}active{% endif %}">
{{m.title}}
</a>
</li>
{% endfor %}
</ul>
<div class="mobile-nav-actions">
<a href="https://t.me/odinesina_prog" target="_blank" class="btn btn-primary" style="width: 100%; text-align: center;">
<span class="telegram-icon">
<img src="{% static 'programmer/images/share_tg.png' %}" alt="Telegram" width="20" height="20">
</span>
</a>
<div class="theme-switcher" style="justify-content: center;">
<input type="checkbox" id="mobile-theme-toggle" class="theme-toggle-checkbox" checked>
<label for="mobile-theme-toggle" class="theme-toggle-label">
<span class="theme-toggle-slider"></span>
<span class="theme-icon sun">☀️</span>
<span class="theme-icon moon">🌙</span>
</label>
</div>
</div>
</div>
{% endblock mainmenu %}
<!-- Main Content -->
<main class="main">
<div class="container">
<section class="content">
<!-- Breadcrumbs -->
{% block breadcrumbs %}
<nav class="breadcrumbs">
<a href="{% url 'home' %}" class="breadcrumb-link">Главная</a>
<span class="breadcrumb-separator">/</span>
<span class="breadcrumb-current">{{title}}</span>
</nav>
{% endblock %}
<!-- Messages -->
{% bootstrap_messages %}
<!-- Page Content -->
<div class="page-content">
{% block content %}
{% endblock %}
</div>
</section>
</div>
</main>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-info">
<h3>Николай Сердюк</h3>
<p>Программист 1С</p>
</div>
<div class="footer-contacts">
<p>📧 {{ CONTACT_EMAIL }}</p>
<p>📱 {{ CONTACT_PHONE }}</p>
</div>
<div class="footer-copyright">
<p>&copy; 2025 ИП Сердюк Николай Александрович. Все права защищены.</p>
</div>
</div>
</div>
</footer>
{% bootstrap_javascript %}
<script src="{% static 'programmer/js/theme-switcher.js' %}"></script>
<script src="{% static 'programmer/js/mobile-menu.js' %}"></script>
{% block extra_js %}
<!-- Дополнительные JS файлы для конкретных страниц -->
{% endblock %}
<!-- В recall.html после основного контента -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Review",
"itemReviewed": {
"@type": "Service",
"name": "Услуги программиста 1С"
},
"author": {
"@type": "Organization",
"name": "ООО «РОВЕН-Регионы»"
},
"reviewRating": {
"@type": "Rating",
"ratingValue": "5",
"bestRating": "5"
},
"datePublished": "2025-11-13",
"description": "Выражаю благодарность программисту 1С Николаю Сердюк за профессиональную работу и качественное решение поставленных задач..."
}
</script>
</body>
</html>