Компонент просмотра на 360°
Компонент 360° Viewer, использующий стиль дизайна Glassmorphism с отзывчивыми эффектами и поддержкой темных тем.
HTML-код
<div class="flex justify-center items-center h-screen bg-gray-100 dark:bg-gray-900">
<div class="glass-morphism-container relative w-full max-w-2xl p-6 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 bg-opacity-70">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-4">360° Viewer</h2>
<div class="viewer-wrapper relative">
<img src="https://picsum.photos/600/400?random=1" alt="360° View Image" class="object-cover w-full rounded-lg">
<div class="arrow-buttons absolute w-full flex justify-between top-1/2 transform -translate-y-1/2 px-4">
<button class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full p-2 shadow-md hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none">
<
</button>
<button class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full p-2 shadow-md hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none">
>
</button>
</div>
</div>
<div class="mt-4 text-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="mx-auto w-12 h-12 rounded-full border-2 border-white bg-white dark:border-gray-700">
<p class="text-gray-800 dark:text-gray-200 mt-2">User Name</p>
</div>
</div>
</div>
Связанные компоненты
360_viewer_component
Сложный, отзывчивый компонент 360° viewer с эстетикой киберпанка и осенней цветовой гаммы, разработанный для образовательных платформ. Он отличается поддержкой темного режима, интерактивными элементами и богатой типографикой.
Компонент 360 Viewer
Компонент просмотра на 360° с дизайном Neumorphic, отзывчивыми эффектами и поддержкой темной темы с использованием Tailwind CSS. Он включает в себя контейнер с тонкими тенями и закругленными углами, заполнитель изображения и стрелки навигации, стилизованные под эффект Neumorphic.
360_Viewer_Component
Простой, отзывчивый компонент просмотра на 360° с фокусом на микровзаимодействие для бизнес/корпоративных веб-сайтов, с поддержкой земляных тонов и темного режима. Разработано для имитации интерактивного просмотрщика 360°, позволяющего пользователям «щелкать и перетаскивать» для поворота изображения.