mirror of
https://github.com/m4rcel-lol/custom-discord-ai-chatbot-site.git
synced 2025-12-06 19:03:58 +05:30
cb1f66dbff
Sets up the project structure, dependencies, and basic configuration for a Discord-inspired AI chat application. Includes placeholder components and types, Vite configuration for local development, and basic styling for a dark theme and custom scrollbars. Integrates Gemini API key handling and a service for sending messages.
127 lines
3.4 KiB
HTML
127 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Discord-Style AI Chat</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: #313338;
|
|
color: #dbdee1;
|
|
}
|
|
/* Custom Scrollbar to match Discord feel */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
background-color: #2b2d31;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: #1a1b1e;
|
|
border-radius: 4px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background-color: #2b2d31;
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
@keyframes scaleIn {
|
|
from { opacity: 0; transform: scale(0.95); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
@keyframes slideUp {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.2s ease-out forwards;
|
|
}
|
|
.animate-scale-in {
|
|
animation: scaleIn 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
|
|
}
|
|
.animate-slide-up {
|
|
animation: slideUp 0.3s ease-out forwards;
|
|
}
|
|
|
|
/* Markdown Styles */
|
|
.markdown-content strong {
|
|
font-weight: 700;
|
|
color: #f2f3f5;
|
|
}
|
|
.markdown-content em {
|
|
font-style: italic;
|
|
}
|
|
.markdown-content u {
|
|
text-decoration: underline;
|
|
}
|
|
.markdown-content a {
|
|
color: #00A8FC;
|
|
text-decoration: none;
|
|
}
|
|
.markdown-content a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.markdown-content code {
|
|
background-color: #2b2d31;
|
|
padding: 0.2em 0.4em;
|
|
border-radius: 3px;
|
|
font-family: monospace;
|
|
font-size: 0.85em;
|
|
}
|
|
.markdown-content pre {
|
|
background-color: #2b2d31;
|
|
padding: 1em;
|
|
border-radius: 4px;
|
|
margin-top: 0.5em;
|
|
margin-bottom: 0.5em;
|
|
overflow-x: auto;
|
|
border: 1px solid #1e1f22;
|
|
}
|
|
.markdown-content pre code {
|
|
background-color: transparent;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
color: #dbdee1;
|
|
font-size: 0.9em;
|
|
}
|
|
.markdown-content blockquote {
|
|
border-left: 4px solid #4e5058;
|
|
padding-left: 1em;
|
|
margin: 0.5em 0;
|
|
color: #949ba4;
|
|
}
|
|
.markdown-content ul {
|
|
list-style-type: disc;
|
|
padding-left: 1.5em;
|
|
margin: 0.5em 0;
|
|
}
|
|
.markdown-content ol {
|
|
list-style-type: decimal;
|
|
padding-left: 1.5em;
|
|
margin: 0.5em 0;
|
|
}
|
|
</style>
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"react": "https://aistudiocdn.com/react@^19.2.1",
|
|
"react-dom/": "https://aistudiocdn.com/react-dom@^19.2.1/",
|
|
"react/": "https://aistudiocdn.com/react@^19.2.1/",
|
|
"@google/genai": "https://aistudiocdn.com/@google/genai@^1.31.0",
|
|
"lucide-react": "https://aistudiocdn.com/lucide-react@^0.555.0",
|
|
"react-markdown": "https://aistudiocdn.com/react-markdown@^10.1.0"
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
</body>
|
|
</html> |