<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Фотографии</title>
<style>
.thumb img {
border: 2px solid #55c5e9; /* Рамка вокруг фотографии */
padding: 15px; /* Расстояние от картинки до рамки */
background: #666; /* Цвет фона */
margin-right: 10px; /* Отступ справа */
margin-bottom: 10px; /* Отступ снизу */
}
</style>
</head>
<body>
<p class="thumb">
<img src="BallonsInFloweredTree2.jpg" alt="Фотография 1" width="120" height="120">пейзаж</img>
<img src="CarOnEuroBridge2.jpg" alt="Фотография 2" width="120" height="120">
<img src="ColoredHousesHarbor2.jpg" alt="Фотография 3" width="120" height="120">
<img src="CountryRoad2.jpg" alt="Фотография 4" width="120" height="120">
</p>
</body>
</html>
Разработать интерфейс файлового менеджера с выводом изображений из папки на сервере (10-15 файлов)
Для каждого изображения должен быть вывод превью, имя файла, название файла, вес файла.
Должен быть доступен функционал:
• Переименование изображения с помощью диалогового окна с верификацией введенных данных (5-25 символов АяAz09_)
• Сортировка изображений перетаскиванием с сохранением состояния в БД (после перезагрузки страницы новый порядок сохраняется).
• Вывод превью небольшого размера, полный файл по клику на изображение
В интерфейсе должны быть учитаны:
• Отображение в 2 или 1 колонку в зависимости от размера (responsive: desktop, mobile)
• Диалоговые окна для пользовательского ввода (имени изображения)
• Общий внешний вид должен быть приятным, не черновым макетом
• Оформить каждый файл в виде карточки поделенной на 2 части (слева изображение, справа кнопки и тексты)
https://ibb.co/RhbFYZk
плачу 500 р срочно
