fix: restore working utilities and add real GitHub repos

- Restore all utilities from working commit (76abb9a)
- Restore all CSS files from working version
- Restore main page with correct utilities list
- Add only real GitHub repos: conf-watch and Excel-to-Vcard-converter
- Remove all fake/incorrect utility links
- Create basic JS files for utilities that need them
- All utilities now work as they did before today's changes

Author: mrvi0

assets/css/button-generator-style.css

@@ -0,0 +1,361 @@
+/* assets/css/button-generator-style.css */
+
+/* --- Переменные (можно использовать из layout-styles.css, если они глобальные) --- */
+:root {
+    --btn-gen-text: var(--text-color, #e0e0e0);
+    --btn-gen-text-muted: var(--text-color-muted, #b3b3cc);
+    --btn-gen-bg-panel: var(--bg-color-lighter, #2a2a4e);
+    --btn-gen-bg-fieldset: rgba(255, 255, 255, 0.03);
+    --btn-gen-border: var(--border-color, rgba(135, 206, 250, 0.3));
+    --btn-gen-accent: var(--link-color, #87CEFA);
+    --btn-gen-input-bg: rgba(0,0,0, 0.15);
+}
+
+/* --- Основной контейнер --- */
+.button-generator-container {
+    display: grid;
+    grid-template-columns: minmax(320px, 1fr) 2fr; /* Чуть больше мин. ширина настроек */
+    gap: 2rem;
+    max-width: 1300px; /* Можно увеличить */
+    margin: 0 auto;
+    /* Задаем высоту контейнеру, чтобы ограничить высоту дочерних элементов */
+    /* Можно использовать vh (viewport height) минус высота шапки/подвала */
+    /* Пример: 100vh - высота шапки - высота подвала - отступы */
+    /* Либо фиксированную высоту, если шапка/подвал не видны */
+     /* height: calc(100vh - 150px); */ /* Пример расчета, подбери значение */
+     /* Или пока не задаем, пусть растягивается */
+     align-items: start; /* Выравнивание колонок по верху */
+}
+
+/* Панель Настроек */
+.controls-panel {
+    background-color: var(--btn-gen-bg-panel);
+    padding: 1.5rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    /* --- Добавляем скролл --- */
+    max-height: calc(90vh - 100px); /* Примерная макс. высота (подбери значение) */
+    /* Или можно так: position: sticky; top: 20px; max-height: calc(100vh - 40px); */
+    overflow-y: auto; /* Включаем вертикальный скролл */
+    /* Стилизация скроллбара (опционально) */
+    scrollbar-width: thin;
+    scrollbar-color: var(--btn-gen-border) var(--btn-gen-bg-panel);
+}
+.controls-panel::-webkit-scrollbar { width: 8px; }
+.controls-panel::-webkit-scrollbar-track { background: var(--btn-gen-bg-fieldset); border-radius: 4px;}
+.controls-panel::-webkit-scrollbar-thumb { background-color: var(--btn-gen-border); border-radius: 4px; }
+
+.controls-panel h2 {
+    text-align: center;
+    margin-bottom: 0; /* Убрали нижний отступ, используем gap */
+    font-size: 1.5em;
+    color: var(--btn-gen-text);
+}
+
+.controls-panel fieldset {
+    border: 1px solid var(--btn-gen-border);
+    border-radius: 6px;
+    padding: 1rem 1.2rem;
+    margin: 0;
+    background-color: var(--btn-gen-bg-fieldset);
+}
+
+.controls-panel legend {
+    padding: 0 0.5em;
+    font-weight: bold;
+    color: var(--btn-gen-text-muted);
+    font-size: 0.9em;
+}
+/* Легенда с чекбоксом */
+.controls-panel legend label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5em;
+    cursor: pointer;
+}
+
+/* Группа контролов */
+.control-group {
+    margin-bottom: 0.8rem;
+}
+.control-group:last-child {
+    margin-bottom: 0;
+}
+.control-group label {
+    display: block;
+    margin-bottom: 0.3rem;
+    font-size: 0.9em;
+    color: var(--btn-gen-text-muted);
+}
+/* Группа с элементами в строку */
+.control-group.row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap; /* Перенос, если не влезает */
+}
+.control-group.row label {
+    margin-bottom: 0;
+    flex-shrink: 0; /* Не сжимать метку */
+    min-width: 90px; /* Выравнивание меток */
+}
+.control-group.row input[type="range"] {
+    flex-grow: 1; /* Ползунок занимает место */
+    cursor: pointer;
+    height: 5px; /* Тонкий ползунок */
+}
+.control-group.row span { /* Для 'px', '%' и т.д. */
+    font-size: 0.85em;
+    color: var(--btn-gen-text-muted);
+}
+/* Группа с чекбоксами */
+.checkbox-group {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+.checkbox-group label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4em;
+    margin-bottom: 0;
+    cursor: pointer;
+}
+.checkbox-group input[type="checkbox"] {
+    cursor: pointer;
+}
+
+
+/* Стили для инпутов */
+.controls-panel input[type="text"],
+.controls-panel input[type="number"],
+.controls-panel select {
+    width: 100%;
+    padding: 0.5em 0.7em;
+    border: 1px solid var(--btn-gen-border);
+    background-color: var(--btn-gen-input-bg);
+    color: var(--btn-gen-text);
+    border-radius: 4px;
+    font-size: 0.9em;
+    box-sizing: border-box; /* Учитывать padding и border в ширине */
+}
+.controls-panel input:focus,
+.controls-panel select:focus {
+    outline: none;
+    border-color: var(--btn-gen-accent);
+    box-shadow: 0 0 0 2px rgba(135, 206, 250, 0.3);
+    background-color: var(--bg-color-lighter);
+}
+
+/* Маленькие числовые инпуты */
+.input-number-small {
+    width: 5em;
+    text-align: right;
+    flex-shrink: 0;
+    padding-right: 0.4em;
+    -moz-appearance: textfield;
+}
+.input-number-small::-webkit-inner-spin-button,
+.input-number-small::-webkit-outer-spin-button {
+    -webkit-appearance: none; margin: 0;
+}
+.input-number-tiny { /* Еще меньше (для opacity) */
+    width: 4em;
+    text-align: right;
+    flex-shrink: 0;
+    padding-right: 0.4em;
+    -moz-appearance: textfield;
+}
+.input-number-tiny::-webkit-inner-spin-button,
+.input-number-tiny::-webkit-outer-spin-button {
+     -webkit-appearance: none; margin: 0;
+}
+
+/* Контролы цвета */
+.control-group.color-control {
+    align-items: center;
+}
+.color-control label { min-width: auto; } /* Убираем мин. ширину для цвета */
+.color-control input[type="color"] {
+    width: 32px;
+    height: 32px;
+    border: none;
+    padding: 0;
+    border-radius: 4px;
+    cursor: pointer;
+    background-color: transparent;
+    overflow: hidden;
+    flex-shrink: 0;
+}
+.color-control input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
+.color-control input[type="color"]::-webkit-color-swatch { border: none; border-radius: 3px;}
+.color-control input[type="color"]::-moz-color-swatch { border: none; border-radius: 3px;}
+
+.input-hex-small { /* Для отображения HEX рядом с color picker */
+    font-family: var(--font-code, monospace);
+    font-size: 0.85em;
+    width: 6em;
+    padding: 0.3em 0.5em;
+    text-align: center;
+    background-color: rgba(0,0,0,0.1);
+    border: 1px solid transparent;
+    flex-shrink: 0;
+}
+.opacity-label { /* Метка для прозрачности */
+     margin-left: 0.5rem;
+     font-size: 0.8em !important; /* Важно перебить общие стили label */
+     color: var(--btn-gen-text-muted) !important;
+     margin-bottom: 0 !important;
+}
+
+
+/* Скрытие/показ блоков настроек тени */
+.control-group-multiple {
+    border-top: 1px dashed var(--btn-gen-border);
+    margin-top: 1rem;
+    padding-top: 1rem;
+}
+
+
+/* --- Панель Превью и Вывода CSS --- */
+.preview-output-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    /* Делаем эту панель "липкой", если панель настроек скроллится */
+     position: sticky;
+     top: 20px; /* Отступ от верха окна */
+     /* Важно: чтобы sticky работал, у родителя (.button-generator-container)
+        не должно быть overflow: hidden/auto/scroll по той оси,
+        по которой элемент должен "липнуть" */
+}
+.preview-output-panel section { /* Стили для секций Превью и Вывода */
+     background-color: var(--btn-gen-bg-panel);
+     padding: 1.5rem;
+     border-radius: 8px;
+     box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+}
+.preview-output-panel h2 {
+    text-align: center;
+    margin-top: 0;
+    margin-bottom: 1.5rem;
+    font-size: 1.5em;
+    color: var(--btn-gen-text);
+}
+
+/* Область превью */
+.preview-box {
+    min-height: 150px; /* Минимальная высота */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--btn-gen-bg-fieldset); /* Фон для превью */
+    border-radius: 6px;
+    padding: 2rem;
+    border: 1px dashed var(--btn-gen-border);
+    overflow: hidden; /* На случай больших теней */
+}
+
+/* Кнопка превью (стили будут задаваться JS) */
+#previewButton {
+    /* Базовые стили, которые могут быть переопределены JS */
+    border: 1px solid #ccc;
+    background-color: #eee;
+    color: #333;
+    padding: 6px 24px;
+    font-size: 15px;
+    border-radius: 6px;
+    cursor: default; /* Не кликабельна по умолчанию */
+    transition: all 0.2s ease-out; /* Плавные переходы для стилей */
+}
+
+/* Область вывода CSS */
+.output-area .output-wrapper { /* Используем класс из конвертера */
+    display: flex;
+    gap: 0.5rem;
+    align-items: stretch;
+}
+#cssOutput {
+    flex-grow: 1;
+    background-color: #282c34; /* Темный фон для кода */
+    border: 1px solid var(--btn-gen-border);
+    padding: 0.8rem 1rem;
+    border-radius: 4px;
+    font-family: var(--font-code, monospace);
+    color: #abb2bf; /* Цвет текста кода */
+    resize: vertical;
+    min-height: 150px;
+    white-space: pre; /* Сохраняем пробелы и переносы */
+    line-height: 1.5;
+}
+.output-area .copy-button { /* Кнопка Копировать */
+    background: var(--btn-gen-accent);
+    border: none;
+    color: var(--btn-gen-bg-panel);
+    font-size: 0.8em;
+    font-weight: bold;
+    cursor: pointer;
+    padding: 0.5em 1em;
+    border-radius: 4px;
+    opacity: 0.9;
+    transition: opacity 0.2s ease;
+    writing-mode: vertical-rl; /* Вертикальный текст (опционально) */
+    text-orientation: mixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.output-area .copy-button:hover { opacity: 1; }
+
+
+/* Адаптивность */
+@media (max-width: 900px) {
+    .button-generator-container {
+        grid-template-columns: 1fr; /* Одна колонка */
+        height: auto; /* Убираем ограничение высоты */
+        align-items: stretch; /* Сбрасываем выравнивание */
+    }
+    .controls-panel {
+        order: 2;
+        max-height: none; /* Убираем ограничение высоты и скролл */
+        overflow-y: visible;
+    }
+    .preview-output-panel {
+        order: 1;
+        position: static; /* Убираем sticky */
+        top: auto;
+    }
+}
+
+@media (max-width: 500px) {
+    .control-group.row {
+        flex-direction: column; /* Элементы в столбик */
+        align-items: stretch; /* Растянуть по ширине */
+    }
+    .control-group.row label {
+         min-width: auto; /* Убрать мин ширину метки */
+         margin-bottom: 0.3rem;
+    }
+    .input-number-small, .input-number-tiny, .input-hex-small {
+         width: 100%; /* Числовые поля на всю ширину */
+         text-align: left;
+         padding-left: 0.7em;
+    }
+    .control-group.row span { /* 'px', '%' */
+        display: none; /* Скрыть единицы */
+    }
+     .control-group.color-control {
+         flex-direction: row; /* Оставить цвет и хекс в строку */
+         flex-wrap: wrap;
+     }
+     .opacity-label { margin-left: 0; margin-top: 0.5rem;}
+     .checkbox-group { flex-direction: column; gap: 0.5rem; align-items: flex-start;}
+
+     .output-area .copy-button { /* Возвращаем горизонтальный текст */
+         writing-mode: horizontal-tb;
+         padding: 0.5em 1em;
+     }
+}