Библиотека сниппетов

Для веб-проектов

1. Найдите нужный сниппет через поиск или фильтры по категории/тегу
2. Нажмите кнопку «Копировать» в правом верхнем углу блока кода
3. Вставьте код в свой проект (Ctrl+V)
4. Адаптируйте переменные, классы и стили под ваш дизайн

Для email-подписей

1. Найдите сниппет в категории «Email» или по тегу #подпись
2. Скопируйте HTML-код кнопкой «Копировать»
3. Откройте настройки подписи в почтовом клиенте (Gmail, Яндекс, Outlook)
4. Вставьте код в режиме HTML-редактора
5. Замените примеры контактов на ваши реальные данные

Советы

• Скриншоты показывают готовый результат — ориентируйтесь на них
• Все сниппеты адаптивны и работают на мобильных устройствах
• Код можно модифицировать — меняйте цвета, шрифты, размеры под себя

Категории:

API SEO Telegram-боты Запись Компоненты Портфолио Утилиты Формы

Теги:

#alpine #clipboard #ui #livewire #forms #validation #telegram #api #notifications #seo #schema #structured-data #css #grid #portfolio #javascript #utils #performance #http #integration #loading #booking

Простой API-клиент на Laravel Http

Обёртка над Http-фасадом для работы с внешним REST API: токен, базовый URL, обработка ошибок

API PHP

PHP

use Illuminate\Support\Facades\Http;

class SomeApiClient
{
    public function __construct(
        private readonly string $baseUrl,
        private readonly string $apiKey,
    ) {
    }

    public function get(string $endpoint, array $query = []): array
    {
        $response = Http::withToken($this->apiKey)
            ->baseUrl($this->baseUrl)
            ->get($endpoint, $query);

        $response->throw();

        return $response->json();
    }
}

// Использование:
$client = new SomeApiClient('https://api.example.com', config('services.example.key'));
$data = $client->get('/orders', ['status' => 'new']);

▼ Показать весь код

#api #http #integration

JSON-LD разметка Organization для SEO

Structured data для поисковиков — помогает Google/Яндекс показать логотип и контакты компании в выдаче

SEO Blade

Blade

@php
$schema = [
    '@context' => 'https://schema.org',
    '@type' => 'Organization',
    'name' => 'Ваша компания',
    'url' => url('/'),
    'logo' => asset('logo.png'),
    'contactPoint' => [
        '@type' => 'ContactPoint',
        'email' => 'info@example.com',
        'contactType' => 'customer service',
    ],
];
@endphp
<script type="application/ld+json">{!! json_encode($schema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}</script>

▼ Показать весь код

#seo #schema #structured-data

Уведомление в Telegram через Bot API

Отправка текстового уведомления в Telegram-чат через официальный Bot API и Laravel Http-клиент

Telegram-боты PHP

PHP

use Illuminate\Support\Facades\Http;

function notifyTelegram(string $chatId, string $text): bool
{
    $token = config('services.telegram.bot_token');

    $response = Http::post("https://api.telegram.org/bot{$token}/sendMessage", [
        'chat_id' => $chatId,
        'text' => $text,
        'parse_mode' => 'HTML',
    ]);

    return $response->successful();
}

// Использование:
notifyTelegram(config('services.telegram.admin_chat_id'), 'Новая заявка с сайта!');

▼ Показать весь код

#telegram #api #notifications

Выбор времени записи (слоты)

Сетка кнопок-слотов времени с подсветкой выбранного и передачей значения в Livewire

Запись Blade

Blade

<div class="time-slots-grid" x-data="{ selected: null }">
    @foreach($slots as $slot)
        <button
            type="button"
            @click="selected = '{{ $slot }}'; $wire.set('selectedSlot', '{{ $slot }}')"
            :class="{ 'is-selected': selected === '{{ $slot }}' }"
            class="time-slot-btn"
        >
            {{ $slot }}
        </button>
    @endforeach
</div>

<style>
.time-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 0.5rem;
}
.time-slot-btn {
    padding: 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}
.time-slot-btn.is-selected {
    background: #0ea5e9;
    color: #fff;
    border-color: #0ea5e9;
}
</style>

▼ Показать весь код

#livewire #alpine #booking

Что это за открытка

Красивое оформление — градиентный фон, тени, анимация звёздочек и плавное увеличение при наведении.

Тёплый текст — готовое пожелание, которое можно использовать как есть или изменить.

Кнопка копирования — по клику открытка копируется в буфер обмена в виде аккуратного текстового блока.

Всё в твоих цветах — оранжевый акцент, синяя кнопка, тёмно-синий текст.

Можешь легко заменить текст поздравления на любой другой — для коллеги, друга или клиента. Подойдёт для email-рассылок, соцсетей или просто красивого сообщения.

Компоненты HTML

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <style>
        .maravel-snippet {
            border: 2px solid #f39c12;
            border-radius: 12px;
            padding: 30px 35px;
            background: linear-gradient(135deg, #f9f9f9 0%, #ffffff 100%);
            font-family: 'Segoe UI', Arial, sans-serif;
            color: #2c3e50;
            max-width: 550px;
            margin: 20px auto;
            box-shadow: 0 8px 24px rgba(243, 156, 18, 0.15);
            text-align: center;
            transition: transform 0.3s;
        }
        .maravel-snippet:hover {
            transform: translateY(-4px);
        }

        .maravel-snippet h1 {
            font-size: 32px;
            font-weight: 800;
            margin: 0 0 6px 0;
            color: #2c3e50;
            letter-spacing: -0.5px;
        }

        .maravel-snippet .subtitle {
            font-size: 18px;
            color: #f39c12;
            font-weight: 600;
            margin: 0 0 16px 0;
            letter-spacing: 1px;
        }

        .maravel-snippet .divider {
            width: 80px;
            height: 3px;
            background: #f39c12;
            margin: 16px auto;
            border-radius: 2px;
        }

        .maravel-snippet .message {
            font-size: 16px;
            line-height: 1.8;
            color: #34495e;
            margin: 16px 0 20px 0;
            padding: 0 10px;
        }

        .maravel-snippet .message strong {
            color: #f39c12;
        }

        .maravel-snippet .footer-text {
            font-size: 13px;
            color: #95a5a6;
            font-style: italic;
            margin-top: 14px;
            border-top: 1px solid #ecf0f1;
            padding-top: 14px;
        }

        .maravel-button {
            background-color: #3498db;
            color: white;
            padding: 12px 32px;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            font-weight: 700;
            font-size: 15px;
            transition: all 0.3s;
            box-shadow: 0 4px 12px rgba(52, 152, 219, 0.25);
            font-family: 'Segoe UI', Arial, sans-serif;
        }
        .maravel-button:hover {
            background-color: #2980b9;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(52, 152, 219, 0.35);
        }
        .maravel-button:active {
            transform: scale(0.96);
        }

        /* Анимация для звёздочек */
        @keyframes twinkle {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.6; transform: scale(0.9); }
        }
        .star {
            display: inline-block;
            animation: twinkle 2s ease-in-out infinite;
        }
        .star:nth-child(2) { animation-delay: 0.7s; }
        .star:nth-child(3) { animation-delay: 1.4s; }
    </style>
</head>
<body>

<div class="maravel-snippet">
    <h1>С днём рождения!</h1>
    <div class="subtitle">
        <span class="star">✦</span>
        Поздравление от Maravel
        <span class="star">✦</span>
    </div>

    <div class="divider"></div>

    <div class="message">
        <strong>Дорогой друг!</strong>
        <br><br>
        Желаем тебе <strong>ярких идей</strong>, 
        <strong>вдохновения</strong> и 
        <strong>успешных проектов</strong>.
        <br>
        Пусть каждый день приносит радость,
        <br>
        а все мечты обязательно сбываются!
        <br><br>
        <strong>С наилучшими пожеланиями,</strong>
        <br>
        Команда Maravel
    </div>

    <div class="divider"></div>

    <button class="maravel-button" id="copyCardBtn">
        Скопировать открытку
    </button>

    <div class="footer-text">
        ✦ Открытка сделана с любовью ✦
    </div>
</div>

<script>
    document.getElementById('copyCardBtn').addEventListener('click', function() {
        const cardText = 
`═══════════════════════════════════
          С днём рождения!
    ✦ Поздравление от Maravel ✦
─────────────────────────────────

Дорогой друг!

Желаем тебе ярких идей, вдохновения 
и успешных проектов.

Пусть каждый день приносит радость,
а все мечты обязательно сбываются!

С наилучшими пожеланиями,
Команда Maravel

═══════════════════════════════════`;

        navigator.clipboard.writeText(cardText).then(() => {
            const btn = document.getElementById('copyCardBtn');
            btn.textContent = 'Скопировано!';
            setTimeout(() => {
                btn.textContent = 'Скопировать открытку';
            }, 2500);
        }).catch(() => {
            alert('Не удалось скопировать, но открытка перед тобой!');
        });
    });
</script>

</body>
</html>

▼ Показать весь код

Кнопка "Копировать в буфер" (Alpine.js)

Копирует текст по клику и на 2 секунды показывает "Скопировано!" — без сторонних библиотек

Компоненты HTML

HTML

<button
    x-data="{ copied: false }"
    x-on:click="
        navigator.clipboard.writeText('Текст для копирования');
        copied = true;
        setTimeout(() => copied = false, 2000)
    "
    class="btn-copy"
>
    <span x-show="!copied">Копировать</span>
    <span x-show="copied" x-cloak>Скопировано!</span>
</button>

▼ Показать весь код

#alpine #clipboard #ui