feat(ui): complete design overhaul (#4942)

This PR changes entirely the UI look and feeling. It updates all
sections and makes it also mobile-ready.

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
This commit is contained in:
Ettore Di Giacinto 2025-03-05 08:27:03 +01:00 committed by GitHub
parent d732e261a4
commit 6b46c52789
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 1573 additions and 978 deletions

View file

@ -1,5 +1,43 @@
<footer class="text-center py-8">
LocalAI Version {{.Version}}<br>
<a href='https://github.com/mudler/LocalAI' class="text-blue-400 hover:text-blue-600" target="_blank">LocalAI</a> © 2023-2025 <a href='https://mudler.pm' class="text-blue-400 hover:text-blue-600" target="_blank">Ettore Di Giacinto</a>
</footer>
<script src="static/assets/tw-elements.js"></script>
<footer class="bg-gradient-to-r from-gray-900 to-gray-950 border-t border-gray-800/50 py-8 mt-auto">
<div class="container mx-auto px-4">
<div class="flex flex-col items-center justify-center space-y-4">
<!-- Logo & Version -->
<div class="flex items-center space-x-2">
{{ if .Version }}
<span class="text-sm md:text-base font-medium text-gray-400">LocalAI Version <span class="text-blue-400">{{.Version}}</span></span>
{{ end }}
</div>
<!-- Links -->
<div class="flex flex-wrap justify-center gap-x-6 gap-y-3">
<a href="https://github.com/mudler/LocalAI"
class="group flex items-center text-gray-300 hover:text-blue-400 transition duration-300 ease-in-out"
target="_blank">
<i class="fab fa-github mr-2 text-lg"></i>
<span>GitHub</span>
<i class="fas fa-external-link-alt text-xs ml-1.5 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></i>
</a>
<a href="https://localai.io"
class="group flex items-center text-gray-300 hover:text-blue-400 transition duration-300 ease-in-out"
target="_blank">
<i class="fas fa-book mr-2 text-lg"></i>
<span>Documentation</span>
<i class="fas fa-external-link-alt text-xs ml-1.5 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></i>
</a>
<a href="https://mudler.pm"
class="group flex items-center text-gray-300 hover:text-blue-400 transition duration-300 ease-in-out"
target="_blank">
<i class="fas fa-user mr-2 text-lg"></i>
<span>Author</span>
<i class="fas fa-external-link-alt text-xs ml-1.5 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></i>
</a>
</div>
<!-- Copyright Notice -->
<div class="mt-4 text-sm text-gray-500">
<span>© 2023-2025 <a href="https://mudler.pm" class="text-blue-400 hover:text-blue-300 transition duration-300" target="_blank">Ettore Di Giacinto</a></span>
</div>
</div>
</div>
<script src="static/assets/tw-elements.js"></script>
</footer>