360_viewer_component
Un composant de visionneuse à 360° simple et minimaliste conçu pour les plates-formes éducatives, avec des couleurs néon/électriques vives et une typographie forte, avec une réactivité totale et une prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 md:p-8 min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-black flex items-center justify-center font-sans">
<div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-2xl overflow-hidden transform hover:scale-105 transition-all duration-300 ease-in-out border-2 border-transparent dark:border-transparent dark:hover:border-electric-blue-500 relative group">
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-electric-blue-500 to-lime-green-500 opacity-20 dark:from-hot-pink-500 dark:to-electric-blue-500 dark:opacity-10 rounded-lg group-hover:opacity-30 dark:group-hover:opacity-20 transition-opacity duration-300"></div>
<div class="relative p-6 sm:p-8 md:p-10 z-10">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-4 sm:mb-6 leading-tight tracking-tighter text-center sm:text-left">
<span class="text-electric-blue-500 dark:text-hot-pink-500">360°</span> <span class="text-lime-green-500 dark:text-electric-blue-500">Explorer</span>
</h2>
<div class="relative w-full h-48 sm:h-64 md:h-80 lg:h-96 bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden mb-6 sm:mb-8 flex items-center justify-center border-4 border-electric-blue-400 dark:border-hot-pink-400 transform hover:scale-[1.01] transition-transform duration-300">
<!-- Placeholder for 360 image (could be an actual 360 viewer library in a real app) -->
<img src="https://picsum.photos/800/600?random=1" alt="360-degree view placeholder" class="w-full h-full object-cover select-none filter group-hover:blur-sm transition-all duration-300">
<div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40 dark:bg-opacity-60 text-white text-base sm:text-lg font-bold opacity-0 group-hover:opacity-100 transition-opacity duration-300">
Drag to rotate (Simulated)
</div>
</div>
<p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-6 sm:mb-8 leading-relaxed">
Immerse yourself in a comprehensive, interactive 360-degree view of complex structures and environments. Ideal for <span class="font-semibold text-electric-blue-600 dark:text-hot-pink-400">detailed study</span> and <span class="font-semibold text-lime-green-600 dark:text-electric-blue-400">enhanced visualization</span>.
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
<div class="flex items-center space-x-3">
<svg class="w-6 h-6 sm:w-7 sm:h-7 text-lime-green-500 dark:text-electric-blue-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9v-c1.333-3.333-2.667-6.667-7-10"></path></svg>
<span class="text-base sm:text-lg font-medium text-gray-800 dark:text-gray-200">Interactive Exploration</span>
</div>
<div class="flex items-center space-x-3">
<svg class="w-6 h-6 sm:w-7 sm:h-7 text-electric-blue-500 dark:text-hot-pink-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 7h14a2 2 0 012 2v7a2 2 0 01-2 2H5a2 2 0 01-2-2V9a2 2 0 012-2zm0 0a2 2 0 012-2h4a2 2 0 012 2m0 0a2 2 0 012 2v4m-4-2a2 2 0 01-2 2h-4a2 2 0 01-2-2v-4a2 2 0 012-2h4a2 2 0 012 2z"></path></svg>
<span class="text-base sm:text-lg font-medium text-gray-800 dark:text-gray-200">Enhanced Learning</span>
</div>
</div>
<div class="mt-8 sm:mt-10 text-center">
<button class="inline-flex items-center justify-center px-8 py-3 rounded-full text-lg sm:text-xl font-bold bg-electric-blue-500 dark:bg-hot-pink-500 text-white shadow-xl hover:shadow-electric-blue-400/50 dark:hover:shadow-hot-pink-400/50 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-electric-blue-300 dark:focus:ring-hot-pink-300 group relative overflow-hidden">
<span class="absolute inset-0 bg-gradient-to-r from-lime-green-400 to-electric-blue-600 dark:from-electric-blue-400 dark:to-hot-pink-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300 animate-pulse-light"></span>
<span class="relative z-10">Explore Now</span>
<svg class="ml-2 w-5 h-5 sm:w-6 sm:h-6 relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
</button>
</div>
</div>
</div>
<style>
/* Custom colors for neon/electric theme */
.text-electric-blue-500 {
color: #00eeff; /* Brighter electric blue */
}
.dark .text-electric-blue-500 {
color: #00eeff;
}
.text-hot-pink-500 {
color: #ff0077; /* Hotter pink */
}
.dark .text-hot-pink-500 {
color: #ff0077;
}
.text-lime-green-500 {
color: #aeff00; /* Vibrant lime green */
}
.dark .text-lime-green-500 {
color: #aeff00;
}
.border-electric-blue-400 {
border-color: #00c0e0;
}
.dark .border-hot-pink-400 {
border-color: #e00060;
}
.bg-electric-blue-500 {
background-color: #00eeff;
}
.dark .bg-hot-pink-500 {
background-color: #ff0077;
}
.from-electric-blue-500 {
--tw-gradient-from: #00eeff var(--tw-gradient-from-position);
--tw-gradient-to: rgba(0, 238, 255, 0) var(--tw-gradient-to-position);
}
.to-lime-green-500 {
--tw-gradient-to: #aeff00 var(--tw-gradient-to-position);
}
.dark .from-hot-pink-500 {
--tw-gradient-from: #ff0077 var(--tw-gradient-from-position);
--tw-gradient-to: rgba(255, 0, 119, 0) var(--tw-gradient-to-position);
}
.dark .to-electric-blue-500 {
--tw-gradient-to: #00eeff var(--tw-gradient-to-position);
}
.hover\:shadow-electric-blue-400\/50:hover {
box-shadow: 0 10px 15px -3px rgba(0, 192, 224, 0.5), 0 4px 6px -2px rgba(0, 192, 224, 0.05);
}
.dark .hover\:shadow-hot-pink-400\/50:hover {
box-shadow: 0 10px 15px -3px rgba(224, 0, 96, 0.5), 0 4px 6px -2px rgba(224, 0, 96, 0.05);
}
@keyframes pulse-light {
0% {
opacity: 0;
}
50% {
opacity: 0.8;
}
100% {
opacity: 0;
}
}
.animate-pulse-light {
animation: pulse-light 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
</style>
</div>Composants associés
PastelBrutalist360AssetViewer
Un composant Asset Viewer 360° simple et réactif avec un style de design brutaliste et une palette de couleurs rose pastel. Conçu pour les tableaux de bord, il dispose d’un espace réservé à l’image statique (simulant une vue à 360°), de boutons de commande non fonctionnels et d’un affichage d’informations. Construit avec Tailwind CSS, il prend en charge le mode sombre et présente une esthétique brute et audacieuse avec des bordures épaisses et des ombres décalées dures.
Composant Visionneuse à 360°
Un composant de visualisation à 360° conçu avec des micro-interactions, avec des effets réactifs et une prise en charge des thèmes sombres à l’aide de Tailwind CSS.
Composant Visionneuse 360
Composant de visualisation à 360 degrés avec prise en charge du mode sombre.