Компоненты Просмотрщик на 360° Компонент просмотра на 360°

Компонент просмотра на 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">
                    &lt;
                </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">
                    &gt;
                </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°, позволяющего пользователям «щелкать и перетаскивать» для поворота изображения.

Открытый