test/moxie/web/templates/landing.html
Z User 1f9535d683 Add complete MOXIE web UI with authentication and user management
- 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
2026-03-24 05:15:50 +00:00

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>