Layout del cruscotto di Glassmorphism
Un complesso componente di layout del cruscotto con vetromorfismo triadico con una barra laterale, un'area di contenuto principale e più pannelli traslucidi, completamente reattivo e con supporto per la modalità oscura. Progettato per la visualizzazione dei dati e i pannelli di controllo.
Codice HTML
<div class="min-h-screen bg-gradient-to-br from-[#8A2BE2] via-[#FFD700] to-[#E24A00] dark:from-[#1A032F] dark:via-[#3E3400] dark:to-[#491600] flex flex-col lg:flex-row p-4 sm:p-6 lg:p-8 relative overflow-hidden">
<!-- Background Circles for Glassmorphism Effect -->
<div class="absolute top-1/4 left-1/2 w-48 h-48 sm:w-64 sm:h-64 bg-[#FFD700]/30 dark:bg-[#3E3400]/30 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob lg:w-96 lg:h-96"></div>
<div class="absolute bottom-1/4 right-1/4 w-48 h-48 sm:w-64 sm:h-64 bg-[#E24A00]/30 dark:bg-[#491600]/30 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 lg:w-96 lg:h-96"></div>
<div class="absolute top-1/2 left-1/4 w-48 h-48 sm:w-64 sm:h-64 bg-[#8A2BE2]/30 dark:bg-[#1A032F]/30 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000 lg:w-96 lg:h-96 hover:scale-110 transition-transform duration-500"></div>
<!-- Global Glassmorphism Styles -->
<style>
.glass-panel {
background: rgba(255, 255, 255, 0.1);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
@apply text-white dark:text-gray-100;
}
.dark .glass-panel {
background: rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.1);
}
@keyframes blob {
0% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
33% { transform: translate(30px, -50px) scale(1.1) rotate(10deg); }
66% { transform: translate(-20px, 20px) scale(0.9) rotate(-5deg); }
100% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
}
.animate-blob {
animation: blob 7s ease-in-out infinite alternate;
}
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }
</style>
<!-- Sidebar (Larger Screens) -->
<aside class="glass-panel w-full lg:w-64 p-4 lg:p-6 mb-4 lg:mb-0 lg:mr-6 flex-shrink-0 z-10 flex flex-col">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold font-spectral">Dashboard</h2>
<button class="lg:hidden focus:outline-none">
<svg class="w-6 h-6" 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="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
</div>
<nav class="space-y-4 flex-grow">
<a href="#" class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white/20 transition duration-300">
<svg class="w-6 h-6" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-5-.01v-2m-4.5 0h8.25m-6.75 3.01h9.75M9 5h.01M15 5h.01M19.75 12h.01"></path></svg>
<span class="text-lg font-medium">Home</span>
</a>
<a href="#" class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white/20 transition duration-300">
<svg class="w-6 h-6" 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="M7 12l3-3m0 0l3 3m-3-3v8m0-9a9 9 0 110 18 9 9 0 010-18z"></path></svg>
<span class="text-lg font-medium">Analytics</span>
</a>
<a href="#" class="flex items-center space-x-3 p-3 rounded-xl bg-white/10">
<svg class="w-6 h-6" 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="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
<span class="text-lg font-medium">Reports</span>
</a>
<a href="#" class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white/20 transition duration-300">
<svg class="w-6 h-6" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
<span class="text-lg font-medium">Settings</span>
</a>
</nav>
<div class="mt-auto">
<div class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white/20 transition duration-300">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white/50">
<div>
<p class="font-semibold">Jane Doe</p>
<p class="text-sm opacity-80">Admin</p>
</div>
</div>
</div>
</aside>
<!-- Main Content Area -->
<main class="flex-grow grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-min z-10">
<!-- Metric Card 1 -->
<div class="glass-panel p-6 col-span-1 md:col-span-2 lg:col-span-1 flex flex-col justify-between">
<h3 class="text-xl font-semibold mb-2">Total Sales</h3>
<p class="text-4xl font-bold font-spectral text-[#FFD700] dark:text-[#FDD700]">$1,234,567</p>
<p class="text-sm opacity-80 mt-2">+12.5% from last month</p>
<div class="mt-4">
<span class="inline-block bg-white/20 rounded-full px-3 py-1 text-sm font-semibold">Monthly Goal</span>
</div>
</div>
<!-- Metric Card 2 -->
<div class="glass-panel p-6 flex flex-col justify-between">
<h3 class="text-xl font-semibold mb-2">New Users</h3>
<p class="text-4xl font-bold font-spectral text-[#8A2BE2] dark:text-[#CD9BF4]">8,901</p>
<p class="text-sm opacity-80 mt-2">+5.2% from last week</p>
<div class="mt-4">
<span class="inline-block bg-white/20 rounded-full px-3 py-1 text-sm font-semibold">Weekly Trend</span>
</div>
</div>
<!-- Metric Card 3 -->
<div class="glass-panel p-6 flex flex-col justify-between">
<h3 class="text-xl font-semibold mb-2">Active Projects</h3>
<p class="text-4xl font-bold font-spectral text-[#E24A00] dark:text-[#FF8C6B]">17</p>
<p class="text-sm opacity-80 mt-2">3 projects pending review</p>
<div class="mt-4">
<span class="inline-block bg-white/20 rounded-full px-3 py-1 text-sm font-semibold">Portfolio Status</span>
</div>
</div>
<!-- Sales Trends Chart (Placeholder) -->
<div class="glass-panel p-6 col-span-1 md:col-span-2 lg:col-span-2 flex flex-col">
<h3 class="text-xl font-semibold mb-4">Sales Trends</h3>
<div class="relative h-48 w-full bg-white/5 rounded-lg flex items-center justify-center">
<img src="https://picsum.photos/600/300?random=1" alt="Placeholder chart" class="w-full h-full object-cover rounded-lg opacity-80" loading="lazy">
<p class="absolute text-lg font-medium text-white/70">Chart Placeholder</p>
</div>
<p class="text-sm opacity-80 mt-4">Data updated at 10:30 AM.</p>
</div>
<!-- Recent Activities -->
<div class="glass-panel p-6 col-span-1 flex flex-col">
<h3 class="text-xl font-semibold mb-4">Recent Activities</h3>
<ul class="space-y-4 text-sm">
<li class="flex items-start">
<div class="flex-shrink-0 w-2 h-2 rounded-full bg-[#FFD700] mr-3 mt-2"></div>
<p><span class="font-semibold">John Doe</span> updated project <span class="text-[#FFD700] dark:text-[#FDD700]">'Phoenix'</span>.</p>
</li>
<li class="flex items-start">
<div class="flex-shrink-0 w-2 h-2 rounded-full bg-[#8A2BE2] mr-3 mt-2"></div>
<p><span class="font-semibold">Jane Smith</span> commented on 'Monthly Report'.</p>
</li>
<li class="flex items-start">
<div class="flex-shrink-0 w-2 h-2 rounded-full bg-[#E24A00] mr-3 mt-2"></div>
<p><span class="font-semibold">Marketing Team</span> launched new campaign.</p>
</li>
<li class="flex items-start">
<div class="flex-shrink-0 w-2 h-2 rounded-full bg-[#FFD700] mr-3 mt-2"></div>
<p><span class="font-semibold">System</span> backup completed successfully.</p>
</li>
</ul>
</div>
<!-- Quick Actions -->
<div class="glass-panel p-6 col-span-1 md:col-span-2 lg:col-span-1 flex flex-col justify-between">
<h3 class="text-xl font-semibold mb-4">Quick Actions</h3>
<div class="grid grid-cols-2 gap-4">
<button class="flex flex-col items-center p-4 bg-white/10 rounded-xl hover:bg-white/20 transition duration-300">
<svg class="w-8 h-8 mb-2" 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 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
<span class="text-center text-sm">New Report</span>
</button>
<button class="flex flex-col items-center p-4 bg-white/10 rounded-xl hover:bg-white/20 transition duration-300">
<svg class="w-8 h-8 mb-2" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
<span class="text-center text-sm">Edit Profile</span>
</button>
<button class="flex flex-col items-center p-4 bg-white/10 rounded-xl hover:bg-white/20 transition duration-300">
<svg class="w-8 h-8 mb-2" 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="M8 7V3m8 4V3m-9 8h.01M17 11h.01M9 15h.01M15 15h.01M3 15a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10z"></path></svg>
<span class="text-center text-sm">Schedule Task</span>
</button>
<button class="flex flex-col items-center p-4 bg-white/10 rounded-xl hover:bg-white/20 transition duration-300">
<svg class="w-8 h-8 mb-2" 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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253m9 0c1.168-.776 2.754-1.253 4.5-1.253 1.746 0 3.332.477 4.5 1.253m-12 0V13m0-13a.997.997 0 01.07-2c.493-2 3.033-2 5-2s4.507 0 5 2a.997.997 0 01.07 2M4 15h3.586a1 1 0 01.707.293L12 19L16 15.293a1 1 0 01.707-.293H20M4 15c0 1.572 1.487 2.228 2.5 2V21a1 1 0 001 1h12a1 1 0 001-1v-2c1.013-.772 2.5-1.428 2.5-3"></path></svg>
<span class="text-center text-sm">Support</span>
</button>
</div>
</div>
</main>
</div>Componenti correlati
Componente Componenti di layout
Un componente di layout del cruscotto reattivo con stile Glassmorphism, combinazione di colori vivaci e supporto per temi scuri utilizzando Tailwind CSS. Presenta una barra laterale e un'area di contenuto principale con elementi traslucidi simili al vetro smerigliato ed effetti di sfocatura.
Componente Layout 3D
Un componente di layout per social media 3D Design reattivo con una combinazione di colori in scala di grigi. Adatto per interfacce di social networking.
Componente Componenti di layout
Un componente di layout ispirato al brutalismo per il consumo di contenuti con una combinazione di colori pastello e una complessità moderata, con design reattivo e supporto per la modalità oscura.