Hugging Face's logo

Spaces:
Nick-Phizz27
/
brainybyte-wizard
Running

App Files Community
brainybyte-wizard / settings.html
Nick-Phizz27's picture
Nick-Phizz27
try again
e45a16a verified
Raw History Blame Contribute Delete
11.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BrainyAI - Settings</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">
<div id="vanta-bg" class="fixed inset-0 -z-10"></div>
<!-- Header -->
<header class="bg-gray-800/80 backdrop-blur-md border-b border-gray-700 sticky top-0 z-50">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<a href="index.html" class="flex items-center space-x-2">
<i data-feather="cpu" class="text-emerald-400"></i>
<h1 class="text-xl font-bold bg-gradient-to-r from-emerald-400 to-blue-400 bg-clip-text text-transparent">BrainyAI</h1>
</a>
</div>
<div class="flex items-center space-x-4">
<button id="dark-mode-toggle" class="p-2 rounded-full hover:bg-gray-700">
<i data-feather="moon" class="text-gray-300"></i>
</button>
<a href="index.html" class="px-3 py-1 rounded-md bg-gray-700 hover:bg-gray-600 flex items-center space-x-1">
<i data-feather="arrow-left" class="w-4 h-4"></i>
<span>Back to Chat</span>
</a>
</div>
</div>
</header>
<!-- Main Content -->
<main class="flex-grow container mx-auto px-4 py-6">
<div class="max-w-3xl mx-auto bg-gray-800/50 border border-gray-700 rounded-xl overflow-hidden">
<div class="border-b border-gray-700 px-6 py-4">
<h2 class="text-2xl font-bold flex items-center space-x-2">
<i data-feather="settings" class="text-emerald-400"></i>
<span>Settings</span>
</h2>
</div>
<div class="divide-y divide-gray-700">
<!-- Theme Settings -->
<div class="p-6">
<h3 class="text-lg font-semibold mb-4 flex items-center space-x-2">
<i data-feather="moon" class="text-blue-400"></i>
<span>Appearance</span>
</h3>
<div class="space-y-4">
<div class="flex items-center justify-between">
<span>Dark Mode</span>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" value="" class="sr-only peer" checked>
<div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-500"></div>
</label>
</div>
<div>
<label class="block mb-2">Primary Color</label>
<div class="flex space-x-2">
<button class="w-8 h-8 rounded-full bg-emerald-500 border-2 border-emerald-300"></button>
<button class="w-8 h-8 rounded-full bg-blue-500 border-2 border-transparent"></button>
<button class="w-8 h-8 rounded-full bg-purple-500 border-2 border-transparent"></button>
<button class="w-8 h-8 rounded-full bg-red-500 border-2 border-transparent"></button>
<button class="w-8 h-8 rounded-full bg-yellow-500 border-2 border-transparent"></button>
<button class="w-8 h-8 rounded-full bg-pink-500 border-2 border-transparent"></button>
</div>
</div>
</div>
</div>
<!-- AI Settings -->
<div class="p-6">
<h3 class="text-lg font-semibold mb-4 flex items-center space-x-2">
<i data-feather="cpu" class="text-emerald-400"></i>
<span>AI Configuration</span>
</h3>
<div class="space-y-4">
<div>
<label class="block mb-2">AI Model</label>
<select class="w-full bg-gray-700 border border-gray-600 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:border-transparent">
<option>BrainyAI Pro (Recommended)</option>
<option>BrainyAI Fast</option>
<option>BrainyAI Creative</option>
<option>BrainyAI Precise</option>
</select>
</div>
<div>
<label class="block mb-2">Response Length</label>
<input type="range" min="1" max="5" value="3" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
<div class="flex justify-between text-sm text-gray-400">
<span>Concise</span>
<span>Balanced</span>
<span>Detailed</span>
</div>
</div>
<div class="flex items-center space-x-2">
<input type="checkbox" id="code-formatting" class="w-4 h-4 text-emerald-500 bg-gray-700 border-gray-600 rounded focus:ring-emerald-400">
<label for="code-formatting">Automatic Code Formatting</label>
</div>
<div class="flex items-center space-x-2">
<input type="checkbox" id="markdown" class="w-4 h-4 text-emerald-500 bg-gray-700 border-gray-600 rounded focus:ring-emerald-400" checked>
<label for="markdown">Markdown Support</label>
</div>
</div>
</div>
<!-- Account Settings -->
<div class="p-6">
<h3 class="text-lg font-semibold mb-4 flex items-center space-x-2">
<i data-feather="user" class="text-blue-400"></i>
<span>Account</span>
</h3>
<div class="space-y-4">
<div>
<label class="block mb-2">Email</label>
<input type="email" value="user@example.com" class="w-full bg-gray-700 border border-gray-600 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:border-transparent">
</div>
<div>
<label class="block mb-2">API Key</label>
<div class="flex space-x-2">
<input type="password" value="sk_test_1234567890abcdef" class="flex-grow bg-gray-700 border border-gray-600 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:border-transparent">
<button class="px-3 py-2 bg-gray-700 hover:bg-gray-600 rounded-md">
<i data-feather="eye" class="w-4 h-4"></i>
</button>
<button class="px-3 py-2 bg-gray-700 hover:bg-gray-600 rounded-md">
<i data-feather="copy" class="w-4 h-4"></i>
</button>
</div>
</div>
<div class="pt-4">
<button class="px-4 py-2 bg-emerald-500 hover:bg-emerald-600 rounded-md flex items-center space-x-2">
<i data-feather="save" class="w-4 h-4"></i>
<span>Save Changes</span>
</button>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-gray-800/80 backdrop-blur-md border-t border-gray-700 py-4">
<div class="container mx-auto px-4 text-center text-gray-400 text-sm">
<p>BrainyAI v1.0 - Your genius companion 🤖</p>
</div>
</footer>
<script>
// Initialize Vanta.js background
VANTA.GLOBE({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x3b82f6,
backgroundColor: 0x111827,
size: 0.8
});
// Initialize feather icons
feather.replace();
// Theme toggle
const darkModeToggle = document.getElementById('dark-mode-toggle');
darkModeToggle.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
const icon = darkModeToggle.querySelector('i');
if (document.documentElement.classList.contains('dark')) {
feather.icons['sun'].replace(icon);
} else {
feather.icons['moon'].replace(icon);
}
});
// Color selection
const colorButtons = document.querySelectorAll('.bg-blue-500, .bg-purple-500, .bg-red-500, .bg-yellow-500, .bg-pink-500');
colorButtons.forEach(button => {
button.addEventListener('click', () => {
document.querySelector('.bg-emerald-500.border-emerald-300')?.classList.replace('border-emerald-300', 'border-transparent');
if (button.classList.contains('bg-blue-500')) {
// Would change to blue theme
} else if (button.classList.contains('bg-purple-500')) {
// Would change to purple theme
} else {
// Default to emerald
button.classList.replace('border-transparent', 'border-emerald-300');
}
});
});
</script>
</body>
</html>