⚙️ Как я сделал быстрый лендинг для услуг по вывозу мусора

Иногда хочется попрактиковаться в фронтенде и PHP, но не абстрактно, а на реальной, пусть и вымышленной задаче. Так родился мини-лендинг на тему "Вывоз мусора в Туле" — не коммерческий проект, а демо-сайт с формой заявки, калькулятором и вёрсткой, адаптированной под мобильные.

https://ip-gamers.net/demo1

🧱 Зачем это всё?

Мне нужен был учебный шаблон, в котором:

• Есть форма обратной связи, отправляющая данные на email.
• Присутствует интерактивный калькулятор стоимости.
• Используется адаптивная верстка, современный CSS и чистый PHP.
• Всё можно быстро задеплоить на свой сервер.

💡 Идея и структура

Тематика сайта — услуги вывоза мусора и демонтажа в городе Тула. Я добавил фейковое предупреждение, что это всего лишь демо, чтобы избежать недоразумений:

<section style="background-color: #ffcc00; ...">  Внимание! Это демонстрационная страница...</section>

Основные блоки лендинга:

1. Хедер с якорными ссылками.
2. Блок-герой с заголовком и кнопкой прокрутки.
3. Услуги — список основных направлений.
4. Калькулятор — интерактивный расчет стоимости.
5. Форма обратной связи с отправкой через SMTP.
6. Футер — лаконичная подпись.

🖌️ Вёрстка: Адаптивно и со вкусом

Вся стилистика сделана на чистом CSS без фреймворков — с нуля, в духе современного лендинга.

🎮 Особенности (да, они странные — и это осознанно)

🧨 Геймерский вайб… для мусора?

Да-да, вы не ослышались. Этот лендинг по вывозу мусора стилизован так, как будто он рекламирует киберспортивную арену или сервер Warzone:

• 💥 Градиенты, неон и свечение — всё, чтобы вывоз старой мебели ощущался как эпическое приключение в духе Cyberpunk 2077.
• 🎨 Цветовая палитра #ffb347 (оранжево-медовая) + #1b2735 (тёмно-синий космос). Обычно так красят сайты про технологии, биткоин или e-sports.
• 📱 Адаптив под 720px и 480px — на любом экране "мусорный рейд" будет выглядеть достойно.
• 🧲 Кнопки с плавной анимацией, отскоком и свечением, как будто нажимаешь "Play Now", а не "Вызвать грузчиков".

🤯 Ни один здравомыслящий маркетолог не стал бы оформлять лендинг по вывозу строительного мусора в Туле в стилистике FPS-шутера. Но я — не маркетолог. Это — эксперимент, вызов и повод поугарать.

💡 Пример кнопки:

.hero button {  background: #ffb347;  padding: 18px 64px;  font-weight: 900;  border-radius: 50px;  transition: background-color 0.3s ease, transform 0.3s ease;}.hero button:hover {  background: #ffd580;  transform: translateY(-6px);}

📦 Калькулятор стоимости

Простой, но полезный блок, написанный на JavaScript без библиотек:

function calculate() {  const volume = parseFloat(document.getElementById('volume').value) || 0;  const floor = parseInt(document.getElementById('floor').value) || 0;  const total = 1500 + (volume * 500) + (floor * 100);  document.getElementById('result').textContent = `Итого: ${total.toLocaleString('ru-RU')} ₽`;}

Такой интерактивный элемент делает лендинг более вовлекающим, даже если он "учебный".

✉️ Обработка формы: PHP + SMTP

Отправка формы реализована через чистый PHP с ручной реализацией SMTP-сессии — без библиотек типа PHPMailer. Это был своего рода челлендж.

В send.php реализован полноценный SMTP-клиент на stream_socket_client():

• Прямое подключение по SSL.
• Аутентификация через AUTH LOGIN.
• Кодировка темы в base64.
• Заголовки MIME и Content-Type: text/plain; charset=UTF-8.

🧪 Обработка результата

Успех или ошибка выводятся через блок #status-alert в index.php, с автоисчезновением через 6 секунд.

🛡️ Безопасность

Несмотря на демонстрационный характер, я предусмотрел:

• Очистку входных данных через htmlspecialchars(), strip_tags() и trim().
• Проверку обязательных полей на стороне сервера.
• Скрытие потенциально опасных сообщений от SMTP-сервера.

function clean_input($data) {  return htmlspecialchars(strip_tags(trim($data)), ENT_QUOTES, 'UTF-8');}

📱 Адаптивность

Сайт отлично смотрится как на десктопе, так и на мобильном. Я добавил два media-запроса:

• До 720px — уменьшаются размеры шрифта и блоков.
• До 480px — навигация уходит в столбик, форма и калькулятор адаптируются под ширину.

🔧 Зачем это нужно мне?

Этот проект — не просто шаблон, а:

• Тест площадка для SMTP-отправки без сторонних библиотек.
• Тренажёр по адаптивной верстке и UI-дизайну.
• Основа для быстрого клонирования под любые локальные услуги: клининг, грузчики, доставка.

🚀 Что дальше?

В будущем, если потребуется:

• Сделаю из этого полноценный PHP-модуль с backend-панелью.
• Добавлю сохранение заявок в базу данных.
• Подключу Telegram-бота для уведомлений.

🧾 Заключение

Такой демо-сайт — отличный способ потренировать стек HTML + CSS + JS + PHP, и заодно попрактиковаться в UI-дизайне. А если подставить реальные данные, добавить хостинг и домен — получится боевой лендинг для заказа услуг.

📎 Демо-версия доступна по адресу