Глава 8: Раздаем файлы и медиа

8.1 Простое скачивание: делаем красивую кнопку для PDF

Часто на сайтах нужно выложить документы: прайс-листы, инструкции, регламенты. Давай сделаем это профессионально, а не просто голой ссылкой.

Шаг 1: Подготовь файл и папку.

1. Убедись, что у тебя есть папка /var/www/html/docs/. Если нет — создай: sudo mkdir /var/www/html/docs.

2. Подготовь PDF-файл на своём основном компьютере. Например, price_list.pdf.

3. Скопируй его на сервер в папку docs/:

   # Через scp или общую папку, например:
   sudo cp /tmp/price_list.pdf /var/www/html/docs/

4. Проверь права доступа (файл должен быть читаемым для всех):

   sudo chmod 644 /var/www/html/docs/price_list.pdf

Шаг 2: Создаём красивый блок для скачивания. Откроем страницу, где хотим разместить кнопку (например, index.html или отдельную страницу price.html):

sudo nano /var/www/html/index.html

Найди подходящее место (например, после галереи) и вставь такой HTML-код:

<section class="downloads">
    <div class="container">
        <h2>Документы для скачивания</h2>
        <p>Здесь вы можете ознакомиться с нашими официальными документами.</p>
        
        <div class="download-card">
            <div class="download-icon">
                <i class="fas fa-file-pdf fa-3x"></i> <!-- Иконка PDF -->
            </div>
            <div class="download-info">
                <h3>Актуальный прайс-лист</h3>
                <p>Полный перечень изделий и услуг с ценами. Обновлён 15.10.2023</p>
                <p class="file-info">PDF, 1.2 МБ</p>
            </div>
            <div class="download-action">
                <a href="/docs/price_list.pdf" class="btn-download" download>
                    <i class="fas fa-download"></i> Скачать
                </a>
                <a href="/docs/price_list.pdf" target="_blank" class="btn-preview">
                    <i class="fas fa-eye"></i> Посмотреть
                </a>
            </div>
        </div>
        
        <!-- Можно добавить ещё карточки -->
    </div>
</section>

Шаг 3: Добавляем стили в style.css. Открой файл стилей и добавь в конец:

/* Стили для секции загрузок */
.downloads {
    padding: 4rem 0;
    background-color: #f9f5f0; /* Светлый фон, похожий на бумагу */
}

.download-card {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-left: 4px solid #4a7c59; /* Зелёная акцентная полоса */
    flex-wrap: wrap; /* Для адаптивности */
}

.download-icon {
    flex: 0 0 60px;
    color: #d32f2f; /* Красный для PDF */
    text-align: center;
    margin-right: 1.5rem;
}

.download-info {
    flex: 1;
    min-width: 250px; /* Чтобы текст не съезжал на мобильных */
}

.download-info h3 {
    margin-top: 0;
    color: #2c1810;
}

.file-info {
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.5rem;
}

.download-action {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.btn-download, .btn-preview {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-download {
    background-color: #4a7c59;
    color: white;
}

.btn-download:hover {
    background-color: #3a6348;
    transform: translateY(-2px);
}

.btn-preview {
    background-color: #e6d2b9;
    color: #2c1810;
}

.btn-preview:hover {
    background-color: #d4b999;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .download-card {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .download-icon {
        margin-right: 0;
        margin-bottom: 1rem;
    }
    
    .download-action {
        width: 100%;
        justify-content: center;
    }
}

Шаг 4: Проверяем результат. Обнови главную страницу в браузере. Теперь у тебя есть красивый блок с кнопками:

• "Скачать" — файл сразу начнёт загружаться на компьютер пользователя (атрибут download).

• "Посмотреть" — файл откроется в новой вкладке браузера (атрибут target="_blank").

8.2 Создаем архив фотографий для скачивания

Представь, что клиент хочет скачать все фотографии проекта одним архивом. Давай сделаем это.

Шаг 1: Создаём архив на сервере.

# Переходим в папку с галереей
cd /var/www/html/images/gallery

# Создаём архив со всеми jpg-файлами
sudo tar -czf project_photos.tar.gz *.jpg

# Перемещаем архив в папку docs
sudo mv project_photos.tar.gz ../../

Шаг 2: Добавляем карточку для скачивания архива. В тот же HTML-код, что и для PDF, добавь ещё одну карточку:

<div class="download-card">
    <div class="download-icon">
        <i class="fas fa-file-archive fa-3x"></i> <!-- Иконка архива -->
    </div>
    <div class="download-info">
        <h3>Все фотографии проекта "Дубовая гостиная"</h3>
        <p>Полный комплект фотографий в высоком разрешении. Подходит для полиграфии.</p>
        <p class="file-info">TAR.GZ, 45.7 МБ</p>
    </div>
    <div class="download-action">
        <a href="/project_photos.tar.gz" class="btn-download" download>
            <i class="fas fa-download"></i> Скачать архив
        </a>
    </div>
</div>

Важный момент: Для больших файлов хорошо бы показывать размер и тип файла, как мы это сделали в file-info.

8.3 Организуем библиотеку документов с понятной структурой

Когда файлов становится много, нужна система. Давай создадим целую страницу-библиотеку.

Шаг 1: Создаём страницу docs.html.

sudo cp /var/www/html/about.html /var/www/html/docs.html
sudo nano /var/www/html/docs.html

Шаг 2: Меняем содержимое. Оставь шапку и подвал, а в основном контенте сделай:

<main class="container">
    <h1>Библиотека документов</h1>
    <p>Все официальные документы, инструкции и материалы в одном месте.</p>
    
    <div class="docs-categories">
        <div class="category">
            <h2><i class="fas fa-file-contract"></i> Коммерческие документы</h2>
            <ul class="docs-list">
                <li>
                    <a href="/docs/price_list.pdf" download>Прайс-лист 2023</a>
                    <span class="doc-meta">PDF, 1.2 МБ</span>
                </li>
                <li>
                    <a href="/docs/contract_template.docx">Шаблон договора</a>
                    <span class="doc-meta">DOCX, 0.3 МБ</span>
                </li>
            </ul>
        </div>
        
        <div class="category">
            <h2><i class="fas fa-images"></i> Медиаматериалы</h2>
            <ul class="docs-list">
                <li>
                    <a href="/project_photos.tar.gz" download>Фото проекта "Гостиная" (архив)</a>
                    <span class="doc-meta">TAR.GZ, 45.7 МБ</span>
                </li>
                <li>
                    <a href="/docs/logo_pack.zip" download>Фирменный стиль (логотипы)</a>
                    <span class="doc-meta">ZIP, 8.5 МБ</span>
                </li>
            </ul>
        </div>
        
        <div class="category">
            <h2><i class="fas fa-book"></i> Инструкции</h2>
            <ul class="docs-list">
                <li>
                    <a href="/docs/care_instructions.pdf">Уход за деревянной мебелью</a>
                    <span class="doc-meta">PDF, 0.8 МБ</span>
                </li>
                <li>
                    <a href="/docs/assembly_manual.pdf">Инструкция по сборке</a>
                    <span class="doc-meta">PDF, 2.1 МБ</span>
                </li>
            </ul>
        </div>
    </div>
    
    <div class="notice">
        <h3><i class="fas fa-exclamation-circle"></i> Важно!</h3>
        <p>Для открытия PDF-файлов рекомендуем использовать <a href="https://get.adobe.com/reader/" target="_blank">Adobe Acrobat Reader</a>. Архивы ZIP и TAR.GZ можно открыть с помощью <a href="https://www.7-zip.org/" target="_blank">7-Zip</a> или стандартных архиваторов операционной системы.</p>
    </div>
</main>

Шаг 3: Добавляем стили для библиотеки.

/* Стили для страницы библиотеки */
.docs-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.category {
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.category h2 {
    color: #2c1810;
    border-bottom: 2px solid #e6d2b9;
    padding-bottom: 0.5rem;
    margin-top: 0;
}

.docs-list {
    list-style: none;
    padding: 0;
}

.docs-list li {
    padding: 0.8rem 0;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.docs-list li:last-child {
    border-bottom: none;
}

.docs-list a {
    color: #4a7c59;
    text-decoration: none;
    flex: 1;
}

.docs-list a:hover {
    text-decoration: underline;
    color: #3a6348;
}

.doc-meta {
    font-size: 0.8rem;
    color: #666;
    background: #f5f5f5;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    margin-left: 1rem;
}

.notice {
    background: #fff8e1;
    border-left: 4px solid #ffc107;
    padding: 1rem 1.5rem;
    margin-top: 3rem;
    border-radius: 0 8px 8px 0;
}

.notice h3 {
    color: #2c1810;
    margin-top: 0;
}

Шаг 4: Добавляем ссылку в главное меню. Обнови навигацию на всех страницах, добавив: <a href="/docs.html">Документы</a>.

8.4 Бонус: Автоматическое определение размера файла

Ручное прописывание размера файла неудобно. Можно сделать скрипт на PHP, но это тема отдельной книги. А вот простой bash-скрипт для автоматического обновления страницы можно создать.

Создай файл update_file_sizes.sh в домашней папке:

#!/bin/bash
cd /var/www/html
# Находим все PDF и архивы, получаем их размер и создаём JSON-файл
find docs/ -type f \( -name "*.pdf" -o -name "*.zip" -o -name "*.tar.gz" \) -exec du -h {} \; | awk '{print "{\"file\":\""$2"\",\"size\":\""$1"\"},"}' > file_sizes.json

Затем сделай его исполняемым и запускай после добавления каждого нового файла: sudo bash update_file_sizes.sh. А в HTML можно будет подтягивать данные из этого JSON с помощью JavaScript.

---

Практическое задание к главе 8:

1. Создай раздел "Медиатека": На отдельной странице media.html организуй разделы: "Фотогалерея (скачать архив)", "Видео проекта", "3D-модели". Для каждого раздела сделай по 1-2 примера файлов.

2. Добавь иконки для разных типов файлов: В CSS добавь классы для иконок разных форматов: .pdf-icon { color: #d32f2f; }, .zip-icon { color: #2196f3; }, .doc-icon { color: #2e7d32; }. Используй их в карточках.

3. Создай страницу "Скачать всё": Сделай страницу, где одной кнопкой можно скачать ZIP-архив со всеми основными документами сайта. Для этого создай скрипт, который автоматически формирует этот архив:

   cd /var/www/html
   sudo tar -czf all_docs.tar.gz docs/*.pdf docs/*.docx images/gallery/*.jpg

Вывод главы: Твой сайт теперь умеет не только показывать информацию, но и быть полезным инструментом для распространения файлов. Ты создал:

1. Красивые, кликабельные элементы для скачивания.

2. Логичную структуру хранения документов.

3. Информативные блоки с метаданными (размер, тип файла).

4. Целую библиотеку документов с категориями.

Это уровень уже вполне профессионального сайта-визитки или сайта небольшой компании.