mirror of
https://github.com/m4rcel-lol/custom-discord-ai-chatbot-site.git
synced 2025-12-06 19:03:58 +05:30
89e465ed12
Adds a loading animation fade-in and reduces initial loading time. Suppresses Tailwind CDN production warnings in the console for a cleaner developer experience. Enhances error messages for missing API keys and API communication failures, providing more specific guidance. Removes redundant content from README.md and updates the banner image reference. Sets body overflow to hidden to prevent unwanted scrolling and ensures the application handles its own scroll.
139 lines
3.9 KiB
HTML
139 lines
3.9 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 to suppress Tailwind CDN production warning for a cleaner console -->
|
|
<script>
|
|
(function() {
|
|
var originalWarn = console.warn;
|
|
console.warn = function(...args) {
|
|
if (args[0] && typeof args[0] === 'string' && args[0].includes('cdn.tailwindcss.com')) return;
|
|
originalWarn.apply(console, args);
|
|
};
|
|
})();
|
|
</script>
|
|
<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;
|
|
overflow: hidden; /* Prevent body scroll, let app handle it */
|
|
}
|
|
/* 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>
|
|
<script type="module" src="./index.tsx"></script>
|
|
</body>
|
|
</html> |