web-petting/templates/admin/settings.html

{% extends "admin/layout.html" %}
{% let active_page = "settings" %}

{% block title %}{{ t.settings_title }}{% endblock %}

{% block content %}
<div class="page-head">
    <h1>{{ t.settings_title }}</h1>
</div>

{% if saved %}
    <div class="notification is-success is-light">{{ t.settings_saved }}</div>
{% endif %}

<div class="form-card">
    <form method="post" action="/admin/settings/save">
        <div class="field">
            <label class="label">{{ t.settings_telegram_bot_token }}</label>
            <div class="control">
                <input class="input" type="text" name="telegram_bot_token" value="{% for s in &settings %}{% if s.key == "telegram_bot_token" %}{{ s.value }}{% endif %}{% endfor %}">
            </div>
        </div>
        <div class="field">
            <label class="label">{{ t.settings_contact_info }}</label>
            <div class="control">
                <input class="input" type="text" name="contact_info" placeholder="+7 999 123-45-67 / info@example.com" value="{% for s in &settings %}{% if s.key == "contact_info" %}{{ s.value }}{% endif %}{% endfor %}">
            </div>
        </div>
        <div class="field">
            <label class="label">{{ t.settings_pricing_info }}</label>
            <div class="control">
                <textarea class="input" name="pricing_info" rows="3" style="min-height:70px;resize:vertical;" placeholder="от 600 рублей за визит">{% for s in &settings %}{% if s.key == "pricing_info" %}{{ s.value }}{% endif %}{% endfor %}</textarea>
            </div>
        </div>
        <div class="field">
            <label class="label">{{ t.settings_site_domain }}</label>
            <div class="control">
                <input class="input" type="text" name="site_domain" placeholder="https://example.com" value="{% for s in &settings %}{% if s.key == "site_domain" %}{{ s.value }}{% endif %}{% endfor %}">
            </div>
        </div>
        <div class="field">
            <label class="label">{{ t.settings_timezone }}</label>
            <div class="control">
                <input class="input" type="text" name="timezone" placeholder="Asia/Vladivostok" value="{% for s in &settings %}{% if s.key == "timezone" %}{{ s.value }}{% endif %}{% endfor %}">
            </div>
        </div>
        <div class="field">
            <label class="label">{{ t.settings_seo_keywords }}</label>
            <div class="control">
                <textarea id="seoKeywordsInput" class="textarea" name="seo_keywords" rows="3"
                    style="resize:vertical;"
                    placeholder="зооняня Хабаровск, присмотр за питомцем Хабаровск, догситтер Хабаровск">{% for s in &settings %}{% if s.key == "seo_keywords" %}{{ s.value }}{% endif %}{% endfor %}</textarea>
            </div>
            <div id="seoPreview" style="margin-top:0.5rem;padding:0.5rem 0.75rem;background:#fafafa;border:1px solid #eee;border-radius:6px;min-height:2rem;line-height:2;font-size:0.85rem;display:none;"></div>
            <p style="font-size:0.78rem;color:#aaa;margin-top:0.3rem;">Каждая фраза между запятыми — отдельное ключевое слово</p>
        </div>

        <button type="submit" class="button is-primary">{{ t.settings_save }}</button>
    </form>
</div>

<script>
(function() {
    var COLORS = [
        'rgba(124,108,255,0.18)',
        'rgba(255,82,135,0.15)',
        'rgba(255,140,38,0.18)',
        'rgba(0,180,150,0.15)',
        'rgba(77,166,255,0.18)',
        'rgba(255,179,64,0.18)',
        'rgba(176,108,255,0.16)',
        'rgba(34,180,130,0.16)',
    ];

    var ta      = document.getElementById('seoKeywordsInput');
    var preview = document.getElementById('seoPreview');

    function esc(s) {
        return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
    }

    function render() {
        var text = ta.value.trim();
        if (!text) { preview.style.display = 'none'; return; }

        var parts = text.split(',');
        var html = '';
        parts.forEach(function(part, i) {
            var word = part.trim();
            if (word) {
                var color = COLORS[i % COLORS.length];
                html += '<span style="background:' + color + ';border-radius:4px;padding:2px 6px;margin:2px;">' + esc(word) + '</span>';
            }
            if (i < parts.length - 1) {
                html += '<span style="color:#ccc;font-size:0.8em;margin:0 1px">,</span>';
            }
        });

        preview.innerHTML = html;
        preview.style.display = 'block';
    }

    ta.addEventListener('input', render);
    render();
})();
</script>
{% endblock %}