mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2025-02-21 01:31:20 +00:00
88 lines
2.8 KiB
HTML
88 lines
2.8 KiB
HTML
<div class="container mx-auto px-4">
|
|
<div class="mb-6">
|
|
<div class="bg-gradient-welcome card p-8 rounded-lg shadow-lg transform hover:scale-102 transition-transform duration-300">
|
|
<h3 class="text-gradient-title text-4xl font-bold mb-6 animate-fade-in">🌐 Welcome to v18 "Matrix"! 🌐</h3>
|
|
|
|
<!-- Feature Highlights with Matrix Theme -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
|
|
<div class="feature-card matrix-glow p-4 rounded-lg bg-opacity-20 backdrop-blur-sm">
|
|
<span class="text-2xl">⚡</span>
|
|
<h4 class="text-xl font-semibold mb-2">Neural Processing</h4>
|
|
<p class="text-sm opacity-90">Advanced AI capabilities unleashed</p>
|
|
</div>
|
|
<div class="feature-card matrix-glow p-4 rounded-lg bg-opacity-20 backdrop-blur-sm">
|
|
<span class="text-2xl">🧠</span>
|
|
<h4 class="text-xl font-semibold mb-2">Enhanced Intelligence</h4>
|
|
<p class="text-sm opacity-90">Smarter responses and analysis</p>
|
|
</div>
|
|
<div class="feature-card matrix-glow p-4 rounded-lg bg-opacity-20 backdrop-blur-sm">
|
|
<span class="text-2xl">🔮</span>
|
|
<h4 class="text-xl font-semibold mb-2">Digital Evolution</h4>
|
|
<p class="text-sm opacity-90">Revolutionary new capabilities</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center mt-8 space-y-4 animate-fade-up">
|
|
<p class="text-2xl font-bold text-gradient-title matrix-text">Thank you for joining the digital revolution with LoLLMs!</p>
|
|
<p class="text-xl text-progress">Together, we're redefining the boundaries of AI interaction.</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.matrix-glow {
|
|
box-shadow: 0 0 15px rgba(0, 255, 0, 0.1);
|
|
border: 1px solid rgba(0, 255, 0, 0.1);
|
|
}
|
|
|
|
.matrix-text {
|
|
text-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
|
|
}
|
|
|
|
.matrix-pulse {
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.4); }
|
|
70% { box-shadow: 0 0 0 10px rgba(0, 255, 0, 0); }
|
|
100% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0); }
|
|
}
|
|
|
|
/* Previous animations remain unchanged */
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.8s ease-in;
|
|
}
|
|
|
|
.animate-fade-up {
|
|
animation: fadeUp 1s ease-out;
|
|
}
|
|
|
|
.feature-card {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes fadeUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|