feat: Implement comprehensive security enhancements and deployment guide for AmayoWeb
- Added a detailed deployment guide (DEPLOYMENT_GUIDE.md) for frontend and backend setup. - Created an index documentation (INDEX.md) summarizing changes and available resources. - Established Nginx security configuration (NGINX_SECURITY_CONFIG.md) to protect backend IP and enforce rate limiting. - Developed a backend security guide (SECURITY_BACKEND_GUIDE.md) outlining security measures and best practices. - Introduced middleware for security, including rate limiting, CORS, and Cloudflare validation. - Updated frontend components and services to improve security and user experience. - Implemented logging and monitoring strategies for better security oversight.
This commit is contained in:
Shni
@@ -59,8 +59,8 @@ import { botService } from '@/services/bot'
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
const texts = {
|
||||
es: 'Un bot con mucha personalidad',
|
||||
en: 'A bot beyond comparison'
|
||||
es: 'El Mejor Bot de Discord',
|
||||
en: 'The Best Discord Bot'
|
||||
}
|
||||
|
||||
const displayText = ref('')
|
||||
@@ -202,7 +202,7 @@ const inviteBot = () => {
|
||||
}
|
||||
|
||||
.hero-title::before {
|
||||
content: 'Un bot con mucha personalidad';
|
||||
content: 'El Mejor Bot de Discord';
|
||||
font-size: 4rem;
|
||||
font-weight: 800;
|
||||
visibility: hidden;
|
||||
@@ -349,19 +349,19 @@ const inviteBot = () => {
|
||||
|
||||
.card-1 {
|
||||
top: 30px;
|
||||
right: -538px;
|
||||
right: 405px;
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.card-2 {
|
||||
top: 190px;
|
||||
right: -772px;
|
||||
right: 185px;
|
||||
animation: float 6s ease-in-out infinite 2s;
|
||||
}
|
||||
|
||||
.card-3 {
|
||||
bottom: 50px;
|
||||
right: -540px;
|
||||
bottom: -2px;
|
||||
right: -32px;;
|
||||
animation: float 6s ease-in-out infinite 4s;
|
||||
}
|
||||
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
</button>
|
||||
|
||||
<!-- Navigation Buttons -->
|
||||
<a href="#get-started" class="nav-btn primary">
|
||||
<a href="/docs" class="nav-btn primary">
|
||||
{{ t('navbar.getStarted') }}
|
||||
</a>
|
||||
<a href="/dashboard" class="nav-btn secondary">
|
||||
@@ -126,7 +126,7 @@ onUnmounted(() => {
|
||||
.island-navbar {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
left: 98%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1000;
|
||||
width: 150%;
|
||||
|
||||
213
AmayoWeb/src/components/docs/HeroSection.vue
Normal file
213
AmayoWeb/src/components/docs/HeroSection.vue
Normal file
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<section class="hero-section">
|
||||
<div class="hero-content">
|
||||
<div class="hero-text">
|
||||
<h1 class="hero-title">
|
||||
<span class="title-text">{{ titleText }}</span>
|
||||
</h1>
|
||||
<p class="hero-subtitle">{{ t('hero_docs.subtitle') }}</p>
|
||||
|
||||
<div class="hero-actions">
|
||||
<button class="hero-btn primary" @click="scrollToFeatures">
|
||||
{{ t('hero_docs.exploreFeatures') }}
|
||||
</button>
|
||||
<button class="hero-btn secondary" @click="inviteBot">
|
||||
{{ t('hero_docs.inviteBot') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { botService } from '@/services/bot'
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
const titleText = computed(() => {
|
||||
return locale.value === 'es'
|
||||
? 'Comandos, Tickets y Moderación'
|
||||
: 'Commands, Tickets, and Moderation'
|
||||
})
|
||||
|
||||
const isLoading = ref(true)
|
||||
|
||||
const stats = ref({
|
||||
servers: '...',
|
||||
users: '...',
|
||||
commands: '...'
|
||||
})
|
||||
|
||||
// Cargar estadísticas reales del bot
|
||||
const loadStats = async () => {
|
||||
try {
|
||||
isLoading.value = true
|
||||
const data = await botService.getStats()
|
||||
stats.value = {
|
||||
servers: botService.formatNumber(data.servers || 0),
|
||||
users: botService.formatNumber(data.users || 0),
|
||||
commands: botService.formatNumber(data.commands || 0)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading stats:', error)
|
||||
// Valores por defecto si falla
|
||||
stats.value = {
|
||||
servers: '0',
|
||||
users: '0',
|
||||
commands: '0'
|
||||
}
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadStats()
|
||||
// Actualizar estadísticas cada 5 minutos
|
||||
setInterval(loadStats, 5 * 60 * 1000)
|
||||
})
|
||||
|
||||
const scrollToFeatures = () => {
|
||||
document.querySelector('#features')?.scrollIntoView({ behavior: 'smooth' })
|
||||
}
|
||||
|
||||
const inviteBot = () => {
|
||||
window.open('https://discord.com/oauth2/authorize?client_id=991062751633883136&permissions=2416176272&integration_type=0&scope=bot', '_blank')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hero-section {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120px 20px 80px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 4rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 24px;
|
||||
line-height: 1.2;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
background: linear-gradient(135deg, #fff, var(--color-secondary, #ff5252));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-bottom: 32px;
|
||||
line-height: 1.6;
|
||||
max-width: 600px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 48px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.hero-btn {
|
||||
padding: 14px 32px;
|
||||
border-radius: 30px;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.hero-btn.primary {
|
||||
background: var(--gradient-primary, linear-gradient(135deg, #ff1744, #d50000));
|
||||
color: white;
|
||||
box-shadow: 0 8px 30px var(--color-glow, rgba(255, 23, 68, 0.4));
|
||||
}
|
||||
|
||||
.hero-btn.primary:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 12px 40px var(--color-glow, rgba(255, 23, 68, 0.6));
|
||||
}
|
||||
|
||||
.hero-btn.secondary {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: white;
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.hero-btn.secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 968px) {
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.hero-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
340
AmayoWeb/src/components/docs/IslandNavbar.vue
Normal file
340
AmayoWeb/src/components/docs/IslandNavbar.vue
Normal file
@@ -0,0 +1,340 @@
|
||||
<template>
|
||||
<nav class="island-navbar">
|
||||
<div class="navbar-content">
|
||||
<!-- Logo Section -->
|
||||
<div class="logo-section">
|
||||
<div class="bot-avatar">
|
||||
<img :src="favicon" alt="Amayo Bot" />
|
||||
</div>
|
||||
<span class="bot-name">{{ botName }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Actions Section -->
|
||||
<div class="actions-section">
|
||||
<!-- Theme Selector Dropdown -->
|
||||
<div class="theme-dropdown" ref="themeDropdown">
|
||||
<button class="theme-toggle-btn" @click="toggleThemeMenu">
|
||||
<div class="current-theme-preview" :style="{ background: getCurrentThemeGradient() }"></div>
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="white">
|
||||
<path d="M2 4l4 4 4-4" stroke="currentColor" stroke-width="2" fill="none" />
|
||||
</svg>
|
||||
</button>
|
||||
<div v-show="showThemeMenu" class="theme-menu">
|
||||
<button
|
||||
v-for="theme in themes"
|
||||
:key="theme.name"
|
||||
:class="['theme-menu-item', { active: currentTheme === theme.name }]"
|
||||
@click="changeTheme(theme.name)"
|
||||
>
|
||||
<div class="theme-preview" :style="{ background: theme.gradient }"></div>
|
||||
<span>{{ t(`themes.${theme.name}`) }}</span>
|
||||
<svg v-if="currentTheme === theme.name" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M13 4L6 11L3 8" stroke="#00e676" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Language Selector -->
|
||||
<button class="lang-btn" @click="toggleLanguage">
|
||||
{{ currentLang === 'es' ? '🇪🇸' : '🇺🇸' }}
|
||||
</button>
|
||||
|
||||
<!-- Navigation Buttons -->
|
||||
<a href="/dashboard" class="nav-btn primary">
|
||||
{{ t('navbar.dashboard') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
const favicon = ref('https://docs.amayo.dev/favicon.ico') // Reemplaza con el avatar real del bot
|
||||
const botName = ref('Amayo')
|
||||
|
||||
const currentTheme = ref('red')
|
||||
const currentLang = computed(() => locale.value)
|
||||
const showThemeMenu = ref(false)
|
||||
const themeDropdown = ref(null)
|
||||
|
||||
const themes = [
|
||||
{ name: 'red', gradient: 'linear-gradient(135deg, #ff1744, #d50000)' },
|
||||
{ name: 'blue', gradient: 'linear-gradient(135deg, #2196f3, #1565c0)' },
|
||||
{ name: 'green', gradient: 'linear-gradient(135deg, #00e676, #00c853)' },
|
||||
{ name: 'purple', gradient: 'linear-gradient(135deg, #e040fb, #9c27b0)' },
|
||||
{ name: 'orange', gradient: 'linear-gradient(135deg, #ff9100, #ff6d00)' },
|
||||
]
|
||||
|
||||
const getCurrentThemeGradient = () => {
|
||||
const theme = themes.find(t => t.name === currentTheme.value)
|
||||
return theme ? theme.gradient : themes[0].gradient
|
||||
}
|
||||
|
||||
const toggleThemeMenu = () => {
|
||||
showThemeMenu.value = !showThemeMenu.value
|
||||
}
|
||||
|
||||
const changeTheme = (themeName) => {
|
||||
currentTheme.value = themeName
|
||||
document.documentElement.setAttribute('data-theme', themeName)
|
||||
localStorage.setItem('theme', themeName)
|
||||
showThemeMenu.value = false
|
||||
}
|
||||
|
||||
const toggleLanguage = () => {
|
||||
locale.value = locale.value === 'es' ? 'en' : 'es'
|
||||
localStorage.setItem('language', locale.value)
|
||||
}
|
||||
|
||||
const handleClickOutside = (event) => {
|
||||
if (themeDropdown.value && !themeDropdown.value.contains(event.target)) {
|
||||
showThemeMenu.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', handleClickOutside)
|
||||
|
||||
const savedTheme = localStorage.getItem('theme')
|
||||
const savedLang = localStorage.getItem('language')
|
||||
|
||||
if (savedTheme) {
|
||||
currentTheme.value = savedTheme
|
||||
document.documentElement.setAttribute('data-theme', savedTheme)
|
||||
}
|
||||
|
||||
if (savedLang) {
|
||||
locale.value = savedLang
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', handleClickOutside)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.island-navbar {
|
||||
position: fixed;
|
||||
top: 25px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1000;
|
||||
width: 90%;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 24px;
|
||||
background: rgba(10, 10, 10, 0.8);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 50px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.bot-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 2px solid var(--color-primary, #ff1744);
|
||||
box-shadow: 0 0 20px var(--color-glow, rgba(255, 23, 68, 0.3));
|
||||
}
|
||||
|
||||
.bot-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.bot-name {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
background: var(--gradient-primary, linear-gradient(135deg, #ff1744, #ff5252));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.actions-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.theme-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.theme-toggle-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.theme-toggle-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.current-theme-preview {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.theme-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
right: 0;
|
||||
background: rgba(10, 10, 10, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: 8px;
|
||||
min-width: 200px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.theme-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
color: white;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.theme-menu-item:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.theme-menu-item.active {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.theme-preview {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.theme-menu-item span {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.lang-btn {
|
||||
font-size: 1.5rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.lang-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
padding: 10px 24px;
|
||||
border-radius: 25px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.nav-btn.primary {
|
||||
background: var(--gradient-primary, linear-gradient(135deg, #ff1744, #d50000));
|
||||
color: white;
|
||||
box-shadow: 0 4px 15px var(--color-glow, rgba(255, 23, 68, 0.4));
|
||||
}
|
||||
|
||||
.nav-btn.primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px var(--color-glow, rgba(255, 23, 68, 0.6));
|
||||
}
|
||||
|
||||
.nav-btn.secondary {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: white;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.nav-btn.secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.navbar-content {
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
.bot-name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theme-dropdown {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
padding: 8px 16px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.island-navbar {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1000;
|
||||
width: 85%;
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user