modified: templates/about.html

modified:   templates/contact.html
	modified:   templates/faq.html
	modified:   templates/help.html
	modified:   templates/landing.html
This commit is contained in:
SimolZimol
2025-08-19 00:02:29 +02:00
parent 7d0c7df6a7
commit 0da5627348
5 changed files with 1055 additions and 53 deletions

View File

@@ -3,20 +3,213 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
<title>About Multus Bot</title>
<link href="https://stackpath.bootstrapcdn.com/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-color: #f7f7f7;
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-color: #007bff;
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: 50px 0;
padding: 4rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
.content {
margin: 50px 0;
.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>
@@ -42,7 +235,7 @@
</div>
<footer class="text-center py-3">
<p>&copy; 2024 Multus Bot. Exclusively available on Ludi et Historia.</p>
<p>&copy; 2025 Multus Bot. Exclusively available on Ludi et Historia.</p>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

View File

@@ -3,20 +3,234 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
<title>Contact Us - Multus Bot</title>
<link href="https://stackpath.bootstrapcdn.com/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-color: #f7f7f7;
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-color: #28a745;
background: linear-gradient(135deg, rgba(72, 187, 120, 0.9) 0%, rgba(56, 161, 105, 0.8) 100%);
backdrop-filter: blur(10px);
color: white;
padding: 50px 0;
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 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
animation: float 8s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-15px) rotate(180deg); }
}
.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;
}
.contact-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: 3rem;
margin: 3rem auto;
max-width: 800px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
text-align: center;
}
.contact-details {
margin: 50px 0;
.contact-header {
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}
.contact-title {
color: #e2e8f0;
font-weight: 700;
font-size: 2rem;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
.contact-subtitle {
color: #a0aec0;
font-size: 1.1rem;
}
.contact-card {
background: rgba(45, 55, 72, 0.8);
border: 1px solid rgba(72, 187, 120, 0.3);
border-radius: 15px;
padding: 2rem;
margin: 1.5rem 0;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.contact-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #48bb78, #38a169);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.contact-card:hover::before {
transform: scaleX(1);
}
.contact-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(72, 187, 120, 0.2);
border-color: rgba(72, 187, 120, 0.5);
}
.discord-icon {
font-size: 4rem;
color: #5865f2;
margin-bottom: 1.5rem;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.contact-method {
color: #e2e8f0;
font-size: 1.2rem;
margin-bottom: 1rem;
}
.contact-username {
background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 50px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
font-size: 1.1rem;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(88, 101, 242, 0.3);
}
.contact-username:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(88, 101, 242, 0.4);
color: white;
text-decoration: none;
}
.contact-info {
background: rgba(45, 55, 72, 0.6);
border: 1px solid rgba(102, 126, 234, 0.2);
border-radius: 10px;
padding: 1.5rem;
margin-top: 2rem;
}
.info-item {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1rem;
color: #a0aec0;
}
.info-item:last-child {
margin-bottom: 0;
}
.info-icon {
color: #48bb78;
font-size: 1.2rem;
}
.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: #48bb78;
}
@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}
.hero .lead {
font-size: 1.1rem;
}
.contact-container {
margin: 2rem 1rem;
padding: 2rem;
}
.contact-title {
font-size: 1.5rem;
}
.discord-icon {
font-size: 3rem;
}
}
</style>
</head>
@@ -25,19 +239,54 @@
<section class="hero">
<div class="container">
<h1>Contact Us</h1>
<h1>
<i class="fas fa-envelope"></i> Contact Us
</h1>
<p class="lead">Need help? Reach out to SimolZimol on Discord.</p>
</div>
</section>
<div class="container contact-details text-center">
<h2>Get in Touch</h2>
<p>If you have any questions or need support, you can contact <strong>SimolZimol</strong> on Discord:</p>
<p><strong>Username:</strong> <a href="https://discordapp.com/users/@simolzimol">@simolzimol</a></p>
<div class="container">
<div class="contact-container">
<div class="contact-header">
<h2 class="contact-title">
<i class="fas fa-headset"></i> Get in Touch
</h2>
<p class="contact-subtitle">We're here to help with any questions or support you need</p>
</div>
<div class="contact-card">
<i class="fab fa-discord discord-icon"></i>
<p class="contact-method">Contact SimolZimol directly on Discord:</p>
<a href="https://discordapp.com/users/@simolzimol" class="contact-username">
<i class="fab fa-discord"></i> @simolzimol
</a>
<div class="contact-info">
<div class="info-item">
<i class="fas fa-clock info-icon"></i>
<span>Usually responds within 24 hours</span>
</div>
<div class="info-item">
<i class="fas fa-language info-icon"></i>
<span>Support available in English and German</span>
</div>
<div class="info-item">
<i class="fas fa-server info-icon"></i>
<span>Best reached on the Ludi et Historia server</span>
</div>
</div>
</div>
</div>
</div>
<footer class="text-center py-3">
<p>&copy; 2024 Multus Bot. Reach out to us for any questions or support.</p>
<footer class="footer">
<div class="container">
<p>
<i class="fas fa-heart footer-icon"></i>
&copy; 2025 Multus Bot. Reach out to us for any questions or support. | Built with ❤️ by SimolZimol
</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

View File

@@ -3,20 +3,193 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FAQ</title>
<title>FAQ - Multus Bot</title>
<link href="https://stackpath.bootstrapcdn.com/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-color: #f7f7f7;
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-color: #ffc107;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(139, 92, 246, 0.8) 100%);
backdrop-filter: blur(10px);
color: white;
padding: 50px 0;
padding: 4rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
.faq-list {
margin: 50px 0;
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.1) 100%);
animation: shimmer 3s linear infinite;
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.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;
}
.faq-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);
}
.faq-header {
text-align: center;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}
.faq-title {
color: #e2e8f0;
font-weight: 700;
font-size: 2rem;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.faq-subtitle {
color: #a0aec0;
font-size: 1.1rem;
}
.faq-item {
background: rgba(45, 55, 72, 0.8);
border: 1px solid rgba(102, 126, 234, 0.2);
border-radius: 15px;
margin-bottom: 1rem;
padding: 1.5rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.faq-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #667eea, #764ba2);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.faq-item:hover::before {
transform: scaleX(1);
}
.faq-item:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.2);
border-color: rgba(102, 126, 234, 0.4);
}
.faq-question {
color: #e2e8f0;
font-weight: 600;
font-size: 1.1rem;
margin-bottom: 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.faq-answer {
color: #a0aec0;
line-height: 1.6;
margin: 0;
}
.question-icon {
color: #667eea;
font-size: 1.2rem;
}
.contact-highlight {
color: #667eea;
font-weight: 600;
}
.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: #667eea;
}
.container {
max-width: 900px;
}
@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}
.hero .lead {
font-size: 1.1rem;
}
.faq-container {
margin: 2rem 1rem;
padding: 1.5rem;
}
.faq-title {
font-size: 1.5rem;
}
}
</style>
</head>
@@ -25,22 +198,103 @@
<section class="hero">
<div class="container">
<h1>Frequently Asked Questions</h1>
<h1>
<i class="fas fa-question-circle"></i> Frequently Asked Questions
</h1>
<p class="lead">Find answers to the most common questions about Multus Bot.</p>
</div>
</section>
<div class="container faq-list">
<h2>FAQ</h2>
<ul class="list-group">
<li class="list-group-item"><strong>What is Multus Bot?</strong> Multus Bot is an AI-powered Discord bot created by SimolZimol, available exclusively on the Ludi et Historia server.</li>
<li class="list-group-item"><strong>How do I use Multus Bot?</strong> You can use Multus Bot by joining the Ludi et Historia server and interacting with its features.</li>
<li class="list-group-item"><strong>Who can I contact for support?</strong> If you need help, contact SimolZimol on Discord via <strong>@simolzimol</strong>.</li>
</ul>
<div class="container">
<div class="faq-container">
<div class="faq-header">
<h2 class="faq-title">
<i class="fas fa-lightbulb"></i> Help & Support
</h2>
<p class="faq-subtitle">Everything you need to know about using Multus Bot</p>
</div>
<div class="faq-item">
<div class="faq-question">
<i class="fas fa-robot question-icon"></i>
What is Multus Bot?
</div>
<p class="faq-answer">
Multus Bot is an AI-powered Discord bot created by SimolZimol, featuring intelligent automation,
server management tools, and advanced chat assistance. It's currently available exclusively
on the Ludi et Historia server, providing a comprehensive suite of moderation and engagement features.
</p>
</div>
<div class="faq-item">
<div class="faq-question">
<i class="fas fa-cogs question-icon"></i>
How do I use Multus Bot?
</div>
<p class="faq-answer">
You can use Multus Bot by joining the Ludi et Historia server and interacting with its features
through Discord commands. Access your dashboard through this web interface to view statistics,
manage giveaways, and configure bot settings for your server experience.
</p>
</div>
<div class="faq-item">
<div class="faq-question">
<i class="fas fa-gift question-icon"></i>
How do giveaways work?
</div>
<p class="faq-answer">
Multus Bot features an integrated giveaway system where you can participate in server giveaways
and track your winnings. Winners are selected automatically, and you can view your giveaway
history and redeem prizes through your user dashboard.
</p>
</div>
<div class="faq-item">
<div class="faq-question">
<i class="fas fa-chart-line question-icon"></i>
What are points and levels?
</div>
<p class="faq-answer">
The bot tracks your server activity through a points and leveling system. Earn points by
participating in chat, completing activities, and engaging with the community. Your level
reflects your overall contribution and unlocks various server privileges.
</p>
</div>
<div class="faq-item">
<div class="faq-question">
<i class="fas fa-headset question-icon"></i>
Who can I contact for support?
</div>
<p class="faq-answer">
If you need help or have questions about Multus Bot, contact
<span class="contact-highlight">@simolzimol</span> on Discord.
Our support team is available to help with bot features, troubleshooting, and general inquiries.
</p>
</div>
<div class="faq-item">
<div class="faq-question">
<i class="fas fa-shield-alt question-icon"></i>
Is my data safe?
</div>
<p class="faq-answer">
Yes, Multus Bot follows Discord's privacy guidelines and data protection standards.
We only collect necessary information for bot functionality and server management.
Your personal data is securely stored and never shared with third parties.
</p>
</div>
</div>
</div>
<footer class="text-center py-3">
<p>&copy; 2024 Multus Bot. All rights reserved.</p>
<footer class="footer">
<div class="container">
<p>
<i class="fas fa-code footer-icon"></i>
&copy; 2025 Multus Bot. All rights reserved. | Built with ❤️ by SimolZimol
</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

View File

@@ -3,20 +3,275 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Help</title>
<title>Help Center - Multus Bot</title>
<link href="https://stackpath.bootstrapcdn.com/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-color: #f7f7f7;
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-color: #17a2b8;
background: linear-gradient(135deg, rgba(49, 130, 206, 0.9) 0%, rgba(43, 108, 176, 0.8) 100%);
backdrop-filter: blur(10px);
color: white;
padding: 50px 0;
padding: 4rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
.help-section {
margin: 50px 0;
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.1) 100%);
animation: shimmer 4s linear infinite;
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.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;
}
.help-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);
}
.help-header {
text-align: center;
margin-bottom: 3rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}
.help-title {
color: #e2e8f0;
font-weight: 700;
font-size: 2rem;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
.help-subtitle {
color: #a0aec0;
font-size: 1.1rem;
}
.help-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.help-card {
background: rgba(45, 55, 72, 0.8);
border: 1px solid rgba(102, 126, 234, 0.2);
border-radius: 15px;
padding: 2rem;
transition: all 0.3s ease;
text-align: center;
position: relative;
overflow: hidden;
}
.help-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #3182ce, #2b6cb0);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.help-card:hover::before {
transform: scaleX(1);
}
.help-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(49, 130, 206, 0.2);
border-color: rgba(49, 130, 206, 0.5);
}
.help-icon {
font-size: 3rem;
color: #3182ce;
margin-bottom: 1.5rem;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.help-card-title {
color: #e2e8f0;
font-weight: 600;
font-size: 1.3rem;
margin-bottom: 1rem;
}
.help-card-description {
color: #a0aec0;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.help-btn {
background: linear-gradient(135deg, #3182ce 0%, #2b6cb0 100%);
border: none;
padding: 0.75rem 1.5rem;
border-radius: 50px;
color: white;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(49, 130, 206, 0.3);
}
.help-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(49, 130, 206, 0.4);
color: white;
text-decoration: none;
}
.help-btn.discord {
background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%);
box-shadow: 0 4px 15px rgba(88, 101, 242, 0.3);
}
.help-btn.discord:hover {
box-shadow: 0 8px 25px rgba(88, 101, 242, 0.4);
}
.quick-links {
background: rgba(45, 55, 72, 0.6);
border: 1px solid rgba(102, 126, 234, 0.2);
border-radius: 15px;
padding: 1.5rem;
margin-top: 2rem;
}
.quick-links h3 {
color: #e2e8f0;
font-weight: 600;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.quick-link-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
margin-bottom: 0.5rem;
border-radius: 8px;
transition: all 0.3s ease;
color: #a0aec0;
text-decoration: none;
}
.quick-link-item:hover {
background: rgba(49, 130, 206, 0.1);
color: #e2e8f0;
text-decoration: none;
transform: translateX(5px);
}
.quick-link-icon {
color: #3182ce;
}
.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: #3182ce;
}
.container {
max-width: 1000px;
}
@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}
.hero .lead {
font-size: 1.1rem;
}
.help-container {
margin: 2rem 1rem;
padding: 1.5rem;
}
.help-options {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.help-title {
font-size: 1.5rem;
}
}
</style>
</head>
@@ -25,22 +280,73 @@
<section class="hero">
<div class="container">
<h1>Help Center</h1>
<h1>
<i class="fas fa-life-ring"></i> Help Center
</h1>
<p class="lead">Find the resources you need to get help with Multus Bot.</p>
</div>
</section>
<div class="container help-section">
<h2>How Can We Help?</h2>
<p>Below are the available resources to help you with Multus Bot:</p>
<ul class="list-group">
<li class="list-group-item"><a href="/faq">Check our FAQ</a></li>
<li class="list-group-item">Contact SimolZimol directly on Discord: <a href="https://discordapp.com/users/@simolzimol">@simolzimol</a></li>
</ul>
<div class="container">
<div class="help-container">
<div class="help-header">
<h2 class="help-title">
<i class="fas fa-hands-helping"></i> How Can We Help?
</h2>
<p class="help-subtitle">Choose from the available support options below</p>
</div>
<div class="help-options">
<div class="help-card">
<i class="fas fa-question-circle help-icon"></i>
<h3 class="help-card-title">Frequently Asked Questions</h3>
<p class="help-card-description">
Find answers to the most common questions about Multus Bot features, functionality, and usage.
</p>
<a href="/faq" class="help-btn">
<i class="fas fa-book"></i> View FAQ
</a>
</div>
<div class="help-card">
<i class="fab fa-discord help-icon"></i>
<h3 class="help-card-title">Direct Discord Support</h3>
<p class="help-card-description">
Get personalized help directly from SimolZimol, the creator of Multus Bot, on Discord.
</p>
<a href="https://discordapp.com/users/@simolzimol" class="help-btn discord">
<i class="fab fa-discord"></i> Contact @simolzimol
</a>
</div>
</div>
<div class="quick-links">
<h3>
<i class="fas fa-bolt quick-link-icon"></i> Quick Links
</h3>
<a href="/about" class="quick-link-item">
<i class="fas fa-info-circle quick-link-icon"></i>
<span>About Multus Bot</span>
</a>
<a href="/contact" class="quick-link-item">
<i class="fas fa-envelope quick-link-icon"></i>
<span>Contact Information</span>
</a>
<a href="/login" class="quick-link-item">
<i class="fas fa-sign-in-alt quick-link-icon"></i>
<span>Login to Dashboard</span>
</a>
</div>
</div>
</div>
<footer class="text-center py-3">
<p>&copy; 2024 Multus Bot. Reach out to us for any assistance.</p>
<footer class="footer">
<div class="container">
<p>
<i class="fas fa-support footer-icon"></i>
&copy; 2025 Multus Bot. We're here to help! | Built with ❤️ by SimolZimol
</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

View File

@@ -323,7 +323,7 @@
<footer class="footer">
<div class="container">
<p><i class="fas fa-code"></i> &copy; 2024 Multus Bot | Built by SimolZimol | Exclusively on Ludi et Historia</p>
<p><i class="fas fa-code"></i> &copy; 2025 Multus Bot | Built by SimolZimol | Exclusively on Ludi et Historia</p>
</div>
</footer>