Files
Discord-ai-chatbot/templates/about.html
SimolZimol fe55ffaf1e modified: templates/about.html
modified:   templates/navbar.html
2025-08-19 00:09:34 +02:00

296 lines
9.7 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Multus Bot</title>
<link href="https://stackpath.bootstr <div class="content-container">
<div class="section-card">
<h2><i class="fas fa-rocket"></i> Our Mission</h2>
<p>Multus Bot, created by SimolZimol, is designed to simplify server management through AI-powered tools. Whether you're looking for help with moderation, user interactions, or just want to automate server tasks, Multus Bot is here to assist you.</p>
</div>
<div class="section-card">
<h2><i class="fas fa-server"></i> Where to Use Multus Bot?</h2>
<p>At this time, Multus Bot is only available for the <strong>Ludi et Historia</strong> Discord server. We are exploring ways to extend its reach to more communities in the future.</p>
</div>
<div class="section-card">
<h2><i class="fas fa-code"></i> Creator and Support</h2>
<p>Multus Bot was created by <strong>SimolZimol</strong>, a dedicated Discord enthusiast and developer. If you need assistance or have any questions about the bot, feel free to reach out to SimolZimol on Discord via <strong>@simolzimol</strong>.</p>
</div>
<div class="section-card">
<h2><i class="fas fa-star"></i> Key Features</h2>
<div class="feature-grid">
<div class="feature-item">
<div class="feature-icon">
<i class="fas fa-brain"></i>
</div>
<h3>AI-Powered</h3>
<p>Advanced artificial intelligence to handle complex server interactions and provide intelligent responses.</p>
</div>
<div class="feature-item">
<div class="feature-icon">
<i class="fas fa-shield-alt"></i>
</div>
<h3>Moderation Tools</h3>
<p>Comprehensive moderation features to keep your Discord server safe and organized.</p>
</div>
<div class="feature-item">
<div class="feature-icon">
<i class="fas fa-cogs"></i>
</div>
<h3>Automation</h3>
<p>Automate repetitive tasks and streamline server management processes.</p>
</div>
<div class="feature-item">
<div class="feature-icon">
<i class="fas fa-users"></i>
</div>
<h3>User Engagement</h3>
<p>Interactive features designed to enhance community engagement and participation.</p>
</div>
</div>
</div>
</div>bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
body {
background: linear-gradient(135deg, #0c1426 0%, #1a1f2e 25%, #2d3748 75%, #0c1426 100%);
min-height: 100vh;
color: #e2e8f0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.hero {
background: linear-gradient(135deg, rgba(56, 178, 172, 0.9) 0%, rgba(49, 151, 149, 0.8) 100%);
backdrop-filter: blur(10px);
color: white;
padding: 4rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.hero h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 1;
}
.hero .lead {
font-size: 1.3rem;
font-weight: 400;
position: relative;
z-index: 1;
}
.content-container {
background: rgba(26, 31, 46, 0.8);
backdrop-filter: blur(15px);
border: 1px solid rgba(102, 126, 234, 0.2);
border-radius: 20px;
padding: 2rem;
margin: 3rem auto;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.section-card {
background: rgba(45, 55, 72, 0.6);
border: 1px solid rgba(102, 126, 234, 0.2);
border-radius: 15px;
padding: 2rem;
margin-bottom: 2rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.section-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #38b2ac, #319795);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.section-card:hover::before {
transform: scaleX(1);
}
.section-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(56, 178, 172, 0.1);
border-color: rgba(56, 178, 172, 0.4);
}
.section-title {
color: #e2e8f0;
font-weight: 700;
font-size: 1.5rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.section-icon {
color: #38b2ac;
font-size: 1.5rem;
}
.section-content {
color: #a0aec0;
line-height: 1.7;
font-size: 1rem;
}
.highlight {
color: #38b2ac;
font-weight: 600;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.feature-item {
background: rgba(45, 55, 72, 0.4);
border: 1px solid rgba(56, 178, 172, 0.2);
border-radius: 10px;
padding: 1.5rem;
text-align: center;
transition: all 0.3s ease;
}
.feature-item:hover {
transform: translateY(-3px);
border-color: rgba(56, 178, 172, 0.5);
box-shadow: 0 8px 20px rgba(56, 178, 172, 0.1);
}
.feature-icon {
font-size: 2.5rem;
color: #38b2ac;
margin-bottom: 1rem;
}
.feature-title {
color: #e2e8f0;
font-weight: 600;
margin-bottom: 0.5rem;
}
.feature-description {
color: #a0aec0;
font-size: 0.9rem;
}
.footer {
background: linear-gradient(135deg, #0c1426 0%, #1a1f2e 100%);
color: #a0aec0;
padding: 2rem 0;
text-align: center;
border-top: 1px solid rgba(102, 126, 234, 0.1);
margin-top: 3rem;
}
.footer p {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.footer-icon {
color: #38b2ac;
}
.container {
max-width: 1000px;
}
@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}
.hero .lead {
font-size: 1.1rem;
}
.content-container {
margin: 2rem 1rem;
padding: 1.5rem;
}
.section-card {
padding: 1.5rem;
}
.feature-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
{% include 'navbar.html' %}
<section class="hero">
<div class="container">
<h1>About Multus Bot</h1>
<p class="lead">The AI-powered Discord bot, exclusively available on the Ludi et Historia server.</p>
</div>
</section>
<div class="container content">
<h2>Our Mission</h2>
<p>Multus Bot, created by SimolZimol, is designed to simplify server management through AI-powered tools. Whether youre looking for help with moderation, user interactions, or just want to automate server tasks, Multus Bot is here to assist you.</p>
<h2>Where to Use Multus Bot?</h2>
<p>At this time, Multus Bot is only available for the <strong>Ludi et Historia</strong> Discord server. We are exploring ways to extend its reach to more communities in the future.</p>
<h2>Creator and Support</h2>
<p>Multus Bot was created by <strong>SimolZimol</strong>, a dedicated Discord enthusiast and developer. If you need assistance or have any questions about the bot, feel free to reach out to SimolZimol on Discord via <strong>@simolzimol</strong>.</p>
</div>
<footer>
<div class="footer-content">
<p>&copy; 2025 Multus Bot. Exclusively available on Ludi et Historia.</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>