# VIZVI-HOSTING.md - как сделать сайт для хостинга Визви

Ты (нейросеть) делаешь сайт, который владелец загрузит на хостинг Визви (vizvi.ru) HTML-файлом или ZIP-архивом. Сайт получит адрес вида имя.vizvi.su или свой домен, например свойдомен.рф.
Хостинг статический: он отдаёт готовые файлы и ничего не выполняет на сервере. Соблюдай правила ниже - тогда сайт заработает сразу после загрузки, без правок.

## Общие правила
1. Сайт - готовые статические файлы: HTML, CSS, JavaScript, картинки, шрифты. Без PHP, Python, баз данных, Node.js-сервера и сборщиков. index.html должен открываться в браузере двойным кликом.
2. Главная страница - index.html в корне ZIP-архива. Остальные страницы - отдельные файлы (about.html, prices.html) или папки (about/index.html).
3. Все пути к файлам - относительные: images/photo.jpg, css/style.css. Никаких C:\..., file:///, /Users/....
4. Стили, скрипты и шрифты - внутри архива. Внешние CDN допустимы, но надёжнее положить файлы в архив.
5. Фото - файлами в папке images/ (не base64 внутри HTML и не ссылки на стоки): images/hero.jpg, images/team-1.jpg. Имена - латиницей, цифрами и дефисом, без пробелов. Каждому <img> - alt, width и height. Если фото владельца ещё нет - всё равно поставь путь images/понятное-имя.jpg и в конце ответа дай список этих файлов: владелец добавит фото с такими именами, и они встанут на свои места.
6. Формы заявок не делать самому. В место, где нужна форма, поставить одну строку: <div data-vz-block="lead"></div>. Визви вставит рабочую форму (имя, телефон, комментарий, согласие на обработку персональных данных), заявки придут владельцу в кабинет и в мессенджер.
7. Кнопки связи размечать так, чтобы владелец мог менять контакты без правки кода: <a data-sk-contact="phone" href="tel:+79990000000">, <a data-sk-contact="telegram" href="https://t.me/имя">, а также "vk", "max", "email", "address". Номер или адрес в тексте - в <span data-sk-value="phone">...</span>.
8. Не просить у посетителей пароли, данные банковских карт, паспорта и коды из СМС: такие сайты блокируются.
9. В <head>: <meta charset="utf-8">, <meta name="viewport" content="width=device-width, initial-scale=1">, <title> и <meta name="description">. Сайт удобно смотреть на телефоне шириной 360 px.
10. Политику конфиденциальности, согласие на обработку данных и баннер cookie делать не нужно - Визви добавит их сам из данных владельца.

## Если это лендинг (одна страница)
- Один файл index.html: стили в <style>, скрипты в <script>, картинки в папке images/.
- Меню ведёт на блоки страницы якорями: <a href="#uslugi">Услуги</a> и <section id="uslugi">.
- Блок контактов с формой заявок - ближе к концу страницы.

## Если это многостраничный сайт
- Каждая страница - отдельный HTML-файл в корне: index.html (главная), uslugi.html, ceny.html, kontakty.html. Имена файлов - латиницей, без пробелов.
- Общие стили - один файл css/style.css, общие скрипты - js/main.js, подключены на каждой странице одинаково.
- Шапка с меню и подвал - одинаковые на всех страницах. Ссылки меню относительные: href="uslugi.html", на главную - href="index.html".
- У каждой страницы свой <title> и <meta name="description">, один <h1>.
- Форма заявок (<div data-vz-block="lead"></div>) - на странице контактов и при желании на главной.

Структура архива:
```
index.html
uslugi.html
kontakty.html
css/style.css
js/main.js
images/hero.webp
```

## Фото и картинки
Визви проверяет каждую картинку, поворачивает фото с телефона, убирает из них скрытые данные и уменьшает слишком большие. Но правильные имена и пути - твоя задача:
- Все фото - в папке images/ рядом с index.html. В HTML путь images/hero.jpg, со страницы в подпапке - ../images/hero.jpg.
- В CSS-файле путь считается от самого CSS-файла: в css/style.css пиши url('../images/hero.jpg'), а не url('images/hero.jpg').
- Имена файлов - латиницей, цифрами и дефисом, без пробелов и заглавных: hero.jpg, about-team.jpg, work-01.jpg. Одно имя - одно фото.
- Формат: фото - JPG или WebP, логотип с прозрачностью - PNG, иконки - SVG. Ширина: фон первого экрана - 1920 px, фото в блоках - 1200 px, карточки - 800 px. Вес - до 500 КБ.
- Визви сам переводит JPG и PNG в лёгкий формат WebP и меняет ссылки на них - в коде можно смело писать images/hero.jpg.
- Не вшивай фото в код строкой base64 и не ссылайся на файлы с компьютера (C:\..., file:///, /Users/...): хостинг их не увидит.
- Не ставь ссылки на чужие фото со стоков и случайные адреса картинок: они пропадают, а права на них не у владельца.
- У каждого <img> - alt с описанием, width и height (или aspect-ratio), чтобы страница не прыгала при загрузке. Фото ниже первого экрана - с loading="lazy". Для карточек - object-fit: cover.
- Пока фото нет, блок должен выглядеть аккуратно: задай фон-подложку (background: #e9edf5) и пропорции, а не пустую рамку.
- Иконка сайта - favicon.png 512×512 в корне и <link rel="icon" href="favicon.png">.

Образец:
```html
<img src="images/team-1.jpg" alt="Мастер Анна за работой" width="800" height="600" loading="lazy" style="object-fit:cover;background:#e9edf5">
```

**Если владелец ещё не прислал фото**, всё равно поставь пути images/понятное-имя.jpg и в конце ответа дай таблицу:

| Файл | Что на фото | Размер |
|---|---|---|
| images/hero.jpg | фасад салона или мастер за работой | 1920×1080 |
| images/team-1.jpg | портрет мастера | 800×1000 |

Владелец назовёт свои фото так же и добавит их в Визви кнопкой «Добавить фото» или положит в папку images/ архива - каждое встанет на своё место.

## Блок контактов - образец
```html
<section id="kontakty">
  <h2>Свяжитесь с нами</h2>
  <p>Телефон: <span data-sk-value="phone">+7 999 000-00-00</span></p>
  <p>Адрес: <span data-sk-value="address">город, улица, дом</span></p>
  <a data-sk-contact="phone" href="tel:+79990000000">Позвонить</a>
  <a data-sk-contact="telegram" href="https://t.me/имя">Telegram</a>
  <a data-sk-contact="vk" href="https://vk.com/имя">VK</a>
  <a data-sk-contact="max" href="https://max.ru/имя">MAX</a>
  <div data-vz-block="lead"></div>
</section>
```
Если контакта нет - оставь кнопку с href="#": Визви скроет её, пока владелец не заполнит контакт в настройках. Не придумывай номера и адреса.

## Проверь себя перед ответом
- [ ] index.html открывается двойным кликом, без сборки и сервера.
- [ ] Нет PHP, React/Vue без сборки, обращений к API и базам данных.
- [ ] Нет своих <form>: на месте формы - <div data-vz-block="lead"></div>.
- [ ] Все пути к файлам относительные и эти файлы есть в архиве.
- [ ] Фото - в images/, имена латиницей без пробелов, у каждого <img> есть alt, width и height; список нужных фото дан владельцу.
- [ ] Есть meta viewport, <title>, description; сайт удобен на телефоне шириной 360 px.
- [ ] Код прислан целиком, без «...остальное аналогично».

## Что вернуть владельцу
Лендинг - один файл index.html. Многостраничный сайт - список всех файлов с путями и полным содержимым (или ZIP-архив, если умеешь), чтобы владелец сложил их в архив с index.html в корне.

Инструкции для разных нейросетей: https://vizvi.ru/razmestit-sajt