_layouts/default.html - master - hardtmuth/startpage

_layouts/default.html
130 строк5 KB
Andrey Abramov
add ai btn
30 апр 2026, 11:23
30 апр 2026, 11:233deb9f0
<!doctype html>
<html lang="{{ site.lang | default: 'ru' }}" id="theme-root">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>
        {% if page.title %}{{ page.title }} · {% endif %}{{ site.title }}
    </title>

    <meta name="description" content="{{ site.description | default: page.excerpt | strip_html | truncate: 160 }}" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/iconfont/tabler-icons.min.css">
    <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
    {% feed_meta %}
</head>
<body>
<header class="site-header">
    <div class="wrap">
        <a class="brand" href="{{ '/' | relative_url }}">{{ site.title }}</a>
        <nav class="nav">
            <a href="https://alice.yandex.ru/" class="nav-link" target="_blank" rel="noopener" aria-label="Открыть Алису">
                🤖
            </a>
            <!-- Кнопка смены темы -->
            <button id="theme-toggle" aria-label="Переключить тему" title="Переключить тему">
                🌙
            </button>
        </nav>
    </div>
</header>

<!-- Секция вкладок -->
<section class="tabs-section">
    <div class="wrap">
        <!-- Вкладки (табы) -->
        <div class="tabs">
            {% for tab in site.data.tabs %}
                <button class="tab-btn" data-tab="{{ forloop.index0 }}">{{ tab.name }}</button>
            {% endfor %}
        </div>

        <!-- Контент вкладок -->
        <div class="tabs-content">
            {% for tab in site.data.tabs %}
                <div class="tab-panel" data-tab="{{ forloop.index0 }}">
                    {% for category in tab.categories %}
                        <div class="category">
                            <h3 class="category-title">{{ category.name }}</h3>
                            <div class="links-grid">
                                {% for link in category.links %}
                    <a href="{{ link.url }}" class="link-item" target="_blank" rel="noopener">
                        <i class="ti ti-{{ link.icon }}" style="color: {{ link.icon_color }};"></i>
                        <span class="link-name">{{ link.name }}</span>
                    </a>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
{% endfor %}
</div>
</section>

<main class="wrap content">
    {{ content }}
</main>

<footer class="site-footer">
    <div class="wrap">
        <span>© {{ site.time | date: "%Y" }} {{ site.title }}</span>
    </div>
</footer>

<script>
// Скрипт для управления вкладками
document.addEventListener('DOMContentLoaded', function() {
    const tabBtns = document.querySelectorAll('.tab-btn');
    const tabPanels = document.querySelectorAll('.tab-panel');

    // Показываем первую вкладку по умолчанию
    if (tabPanels.length > 0) {
        tabPanels[0].style.display = 'block';
        tabBtns[0].classList.add('active');
    }

    tabBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const tabId = this.getAttribute('data-tab');

            // Сбрасываем активные классы
            tabBtns.forEach(b => b.classList.remove('active'));
            tabPanels.forEach(p => p.style.display = 'none');

            // Активируем текущую вкладку
            this.classList.add('active');
            document.querySelector(`.tab-panel[data-tab="${tabId}"]`).style.display = 'block';
        });
    });

    // Код для смены темы (из предыдущего решения)
    const toggleButton = document.getElementById('theme-toggle');
    const root = document.getElementById('theme-root');

    const savedTheme = localStorage.getItem('theme');
    const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    if (savedTheme) {
        root.setAttribute('data-theme', savedTheme);
    } else if (systemDark) {
        root.setAttribute('data-theme', 'dark');
    }

    updateButtonIcon();

    toggleButton.addEventListener('click', function() {
        const currentTheme = root.getAttribute('data-theme') || 'light';
        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';

        root.setAttribute('data-theme', newTheme);
        localStorage.setItem('theme', newTheme);
        updateButtonIcon();
    });

    function updateButtonIcon() {
        const theme = root.getAttribute('data-theme');
        toggleButton.textContent = theme === 'dark' ? '☀️' : '🌙';
    }
});
</script>
</body>
</html>