1f9535d683
- New web UI with OpenWebUI-like interface using Tailwind CSS - SQLite-based authentication with session management - User registration, login, and profile pages - Chat interface with conversation history - Streaming responses with visible thinking phase - File attachments support - User document uploads in profile - Rate limiting (5 requests/day for free users) - Admin panel user management with promote/demote/delete - Custom color theme matching balloon logo design - Compatible with Nuitka build system
105 lines
4.5 KiB
HTML
105 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MOXIE - AI Assistant</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
background: '#0B0C1C',
|
|
surface: '#1A1A1A',
|
|
'balloon-red': '#EA744C',
|
|
'balloon-yellow': '#ECDC67',
|
|
'balloon-blue': '#4F9AC3',
|
|
'balloon-purple': '#6A4477',
|
|
'text-main': '#F0F0F0',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-20px); }
|
|
}
|
|
.float-animation {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
@keyframes gradient {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
.gradient-text {
|
|
background: linear-gradient(90deg, #EA744C, #ECDC67, #4F9AC3, #6A4477, #EA744C);
|
|
background-size: 200% auto;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
animation: gradient 8s linear infinite;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background min-h-screen flex flex-col items-center justify-center text-text-main">
|
|
<!-- Background gradient effects -->
|
|
<div class="fixed inset-0 overflow-hidden pointer-events-none">
|
|
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-balloon-purple/20 rounded-full blur-3xl"></div>
|
|
<div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-balloon-blue/20 rounded-full blur-3xl"></div>
|
|
</div>
|
|
|
|
<!-- Main content -->
|
|
<div class="relative z-10 text-center px-4">
|
|
<!-- Logo -->
|
|
<div class="mb-8 float-animation">
|
|
<img src="/static/moxie_logo.jpg" alt="MOXIE Logo" class="w-48 h-48 mx-auto rounded-full shadow-2xl shadow-balloon-purple/30">
|
|
</div>
|
|
|
|
<!-- Title -->
|
|
<h1 class="text-6xl font-bold mb-4 gradient-text">MOXIE</h1>
|
|
<p class="text-xl text-text-main/70 mb-2">Your Uplifting AI Assistant</p>
|
|
<p class="text-sm text-text-main/50 mb-12 max-w-md mx-auto">
|
|
A fresh approach to AI. Powered by a neural network that lifts your ideas to new heights.
|
|
</p>
|
|
|
|
<!-- Buttons -->
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a href="/login" class="px-8 py-3 bg-balloon-red hover:bg-balloon-red/80 text-white font-semibold rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg shadow-balloon-red/30">
|
|
Sign In
|
|
</a>
|
|
<a href="/signup" class="px-8 py-3 bg-surface hover:bg-surface/80 border border-balloon-blue text-balloon-blue font-semibold rounded-lg transition-all duration-300 transform hover:scale-105">
|
|
Create Account
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Features -->
|
|
<div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
|
|
<div class="p-6 bg-surface/50 rounded-xl border border-balloon-yellow/20">
|
|
<div class="text-3xl mb-3">🧠</div>
|
|
<h3 class="text-lg font-semibold text-balloon-yellow mb-2">Intelligent</h3>
|
|
<p class="text-sm text-text-main/60">Advanced reasoning powered by multiple AI systems</p>
|
|
</div>
|
|
<div class="p-6 bg-surface/50 rounded-xl border border-balloon-blue/20">
|
|
<div class="text-3xl mb-3">🎨</div>
|
|
<h3 class="text-lg font-semibold text-balloon-blue mb-2">Creative</h3>
|
|
<p class="text-sm text-text-main/60">Generate images, videos, and audio seamlessly</p>
|
|
</div>
|
|
<div class="p-6 bg-surface/50 rounded-xl border border-balloon-purple/20">
|
|
<div class="text-3xl mb-3">📚</div>
|
|
<h3 class="text-lg font-semibold text-balloon-purple mb-2">Knowledgeable</h3>
|
|
<p class="text-sm text-text-main/60">Access to web search and your personal documents</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="absolute bottom-4 text-text-main/30 text-sm">
|
|
Powered by MOXIE AI
|
|
</footer>
|
|
</body>
|
|
</html>
|