Spaces:

dandydow
/

frontbotcontrol

Running

File size: 43,639 Bytes

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VPS Control Panel</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#6366F1',
                        danger: '#EF4444',
                        dark: {
                            800: '#1E293B',
                            900: '#0F172A',
                        }
                    }
                }
            }
        }
    </script>
    <style>
        .draggable-item {
            transition: all 0.3s ease;
        }
        .draggable-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
        }
        .resize-handle {
            width: 10px;
            height: 10px;
            background-color: #3B82F6;
            position: absolute;
            right: 0;
            bottom: 0;
            cursor: nwse-resize;
        }
        .editor-toolbar {
            position: sticky;
            top: 0;
            z-index: 10;
            background-color: #1E293B;
        }
        .editor-content {
            min-height: 300px;
            border: 1px solid #334155;
        }
        .file-upload {
            position: relative;
            overflow: hidden;
            display: inline-block;
        }
        .file-upload input[type="file"] {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }
    </style>
</head>
<body class="bg-gray-900 text-gray-200 min-h-screen">
    <div class="flex h-screen overflow-hidden">
        <!-- Sidebar -->
        <div class="w-64 bg-gray-800 border-r border-gray-700 flex flex-col">
            <div class="p-4 border-b border-gray-700">
                <h1 class="text-xl font-bold text-white flex items-center">
                    <i class="fas fa-server mr-2 text-blue-500"></i>
                    VPS Control
                </h1>
            </div>
            <div class="flex-1 overflow-y-auto">
                <nav class="p-4">
                    <div class="mb-6">
                        <h3 class="text-xs uppercase font-semibold text-gray-400 mb-3">GERAL</h3>
                        <ul>
                            <li class="mb-2">
                                <a href="#" class="flex items-center p-2 rounded-lg bg-gray-700 text-white">
                                    <i class="fas fa-tachometer-alt mr-3 text-blue-400"></i>
                                    Dashboard
                                </a>
                            </li>
                            <li class="mb-2">
                                <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-700">
                                    <i class="fas fa-chart-line mr-3 text-purple-400"></i>
                                    Estatísticas
                                </a>
                            </li>
                            <li class="mb-2">
                                <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-700">
                                    <i class="fas fa-shield-alt mr-3 text-yellow-400"></i>
                                    Segurança
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="mb-6">
                        <h3 class="text-xs uppercase font-semibold text-gray-400 mb-3">SITES</h3>
                        <ul>
                            <li class="mb-2">
                                <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-700">
                                    <i class="fas fa-globe mr-3 text-green-400"></i>
                                    Todos os Sites
                                </a>
                            </li>
                            <li class="mb-2">
                                <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-700">
                                    <i class="fas fa-plus-circle mr-3 text-red-400"></i>
                                    Adicionar Site
                                </a>
                            </li>
                            <li class="mb-2">
                                <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-700">
                                    <i class="fas fa-database mr-3 text-indigo-400"></i>
                                    Bancos de Dados
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="mb-6">
                        <h3 class="text-xs uppercase font-semibold text-gray-400 mb-3">SERVIDOR</h3>
                        <ul>
                            <li class="mb-2">
                                <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-700">
                                    <i class="fas fa-terminal mr-3 text-blue-400"></i>
                                    Terminal
                                </a>
                            </li>
                            <li class="mb-2">
                                <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-700">
                                    <i class="fas fa-cogs mr-3 text-orange-400"></i>
                                    Configurações
                                </a>
                            </li>
                            <li class="mb-2">
                                <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-700">
                                    <i class="fas fa-cloud-upload-alt mr-3 text-teal-400"></i>
                                    Backups
                                </a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
            <div class="p-4 border-t border-gray-700">
                <div class="flex items-center">
                    <div class="w-10 h-10 rounded-full bg-gray-600 flex items-center justify-center">
                        <i class="fas fa-user text-white"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-white">Admin</p>
                        <p class="text-xs text-gray-400">Super Admin</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="flex-1 overflow-auto">
            <!-- Header -->
            <header class="bg-gray-800 border-b border-gray-700 p-4 flex justify-between items-center">
                <h2 class="text-xl font-semibold">Dashboard</h2>
                <div class="flex items-center space-x-4">
                    <div class="relative">
                        <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                        <input type="text" placeholder="Pesquisar..." class="bg-gray-700 rounded-lg pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
                        <i class="fas fa-plus mr-2"></i>
                        Novo Site
                    </button>
                </div>
            </header>

            <!-- Dashboard Content -->
            <main class="p-6">
                <!-- Stats Cards -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                    <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
                        <div class="flex justify-between items-start">
                            <div>
                                <p class="text-gray-400">Uso de CPU</p>
                                <h3 class="text-2xl font-bold mt-1">24%</h3>
                            </div>
                            <div class="bg-blue-500/10 p-3 rounded-full">
                                <i class="fas fa-microchip text-blue-500"></i>
                            </div>
                        </div>
                        <div class="mt-4">
                            <div class="h-1 w-full bg-gray-700 rounded-full">
                                <div class="h-1 bg-blue-500 rounded-full" style="width: 24%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
                        <div class="flex justify-between items-start">
                            <div>
                                <p class="text-gray-400">Uso de Memória</p>
                                <h3 class="text-2xl font-bold mt-1">3.2/8GB</h3>
                            </div>
                            <div class="bg-purple-500/10 p-3 rounded-full">
                                <i class="fas fa-memory text-purple-500"></i>
                            </div>
                        </div>
                        <div class="mt-4">
                            <div class="h-1 w-full bg-gray-700 rounded-full">
                                <div class="h-1 bg-purple-500 rounded-full" style="width: 40%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
                        <div class="flex justify-between items-start">
                            <div>
                                <p class="text-gray-400">Armazenamento</p>
                                <h3 class="text-2xl font-bold mt-1">120/500GB</h3>
                            </div>
                            <div class="bg-yellow-500/10 p-3 rounded-full">
                                <i class="fas fa-hdd text-yellow-500"></i>
                            </div>
                        </div>
                        <div class="mt-4">
                            <div class="h-1 w-full bg-gray-700 rounded-full">
                                <div class="h-1 bg-yellow-500 rounded-full" style="width: 24%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
                        <div class="flex justify-between items-start">
                            <div>
                                <p class="text-gray-400">Sites Ativos</p>
                                <h3 class="text-2xl font-bold mt-1">8</h3>
                            </div>
                            <div class="bg-red-500/10 p-3 rounded-full">
                                <i class="fas fa-globe text-red-500"></i>
                            </div>
                        </div>
                        <div class="mt-4">
                            <div class="h-1 w-full bg-gray-700 rounded-full">
                                <div class="h-1 bg-red-500 rounded-full" style="width: 80%"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Editor de Notícias -->
                <div class="bg-gray-800 rounded-lg border border-gray-700 mb-8">
                    <div class="border-b border-gray-700 p-4 flex justify-between items-center">
                        <h3 class="font-semibold">Editor de Notícias</h3>
                        <div class="flex space-x-2">
                            <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm">
                                <i class="fas fa-save mr-1"></i> Salvar
                            </button>
                            <button class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-sm">
                                <i class="fas fa-eye mr-1"></i> Visualizar
                            </button>
                        </div>
                    </div>
                    <div class="p-4">
                        <div class="mb-4">
                            <input type="text" placeholder="Título da Matéria" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        <div class="mb-4">
                            <textarea placeholder="Resumo da Matéria" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" rows="2"></textarea>
                        </div>
                        
                        <!-- Editor de Blocos Arrastáveis -->
                        <div id="blocks-container" class="space-y-4">
                            <!-- Bloco de Texto -->
                            <div class="draggable-item bg-gray-700 rounded-lg border border-gray-600 p-4 relative" draggable="true">
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-sm font-medium text-gray-300">Bloco de Texto</span>
                                    <div class="flex space-x-2">
                                        <button class="text-gray-400 hover:text-white">
                                            <i class="fas fa-cog"></i>
                                        </button>
                                        <button class="text-gray-400 hover:text-white">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                                <textarea class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500" rows="4">Digite seu conteúdo de texto aqui...</textarea>
                                <div class="resize-handle"></div>
                            </div>
                            
                            <!-- Bloco de Imagem -->
                            <div class="draggable-item bg-gray-700 rounded-lg border border-gray-600 p-4 relative" draggable="true">
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-sm font-medium text-gray-300">Bloco de Imagem</span>
                                    <div class="flex space-x-2">
                                        <button class="text-gray-400 hover:text-white">
                                            <i class="fas fa-cog"></i>
                                        </button>
                                        <button class="text-gray-400 hover:text-white">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="file-upload">
                                    <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm mb-2">
                                        <i class="fas fa-upload mr-1"></i> Enviar Imagem
                                    </button>
                                    <input type="file" accept="image/*">
                                </div>
                                <div class="border border-dashed border-gray-600 rounded-lg p-4 text-center">
                                    <i class="fas fa-image text-gray-500 text-4xl mb-2"></i>
                                    <p class="text-gray-400 text-sm">Nenhuma imagem selecionada</p>
                                </div>
                                <div class="mt-2">
                                    <input type="text" placeholder="Legenda da imagem" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500">
                                </div>
                                <div class="resize-handle"></div>
                            </div>
                            
                            <!-- Bloco de Vídeo -->
                            <div class="draggable-item bg-gray-700 rounded-lg border border-gray-600 p-4 relative" draggable="true">
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-sm font-medium text-gray-300">Bloco de Vídeo</span>
                                    <div class="flex space-x-2">
                                        <button class="text-gray-400 hover:text-white">
                                            <i class="fas fa-cog"></i>
                                        </button>
                                        <button class="text-gray-400 hover:text-white">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="file-upload">
                                    <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm mb-2">
                                        <i class="fas fa-upload mr-1"></i> Enviar Vídeo
                                    </button>
                                    <input type="file" accept="video/*">
                                </div>
                                <div class="border border-dashed border-gray-600 rounded-lg p-4 text-center">
                                    <i class="fas fa-video text-gray-500 text-4xl mb-2"></i>
                                    <p class="text-gray-400 text-sm">Nenhum vídeo selecionado</p>
                                </div>
                                <div class="mt-2">
                                    <input type="text" placeholder="Título do vídeo" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500">
                                </div>
                                <div class="resize-handle"></div>
                            </div>
                        </div>
                        
                        <!-- Botões para adicionar novos blocos -->
                        <div class="mt-4 flex flex-wrap gap-2">
                            <button onclick="addTextBlock()" class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-sm flex items-center">
                                <i class="fas fa-font mr-1"></i> Texto
                            </button>
                            <button onclick="addImageBlock()" class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-sm flex items-center">
                                <i class="fas fa-image mr-1"></i> Imagem
                            </button>
                            <button onclick="addVideoBlock()" class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-sm flex items-center">
                                <i class="fas fa-video mr-1"></i> Vídeo
                            </button>
                            <button onclick="addGalleryBlock()" class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-sm flex items-center">
                                <i class="fas fa-images mr-1"></i> Galeria
                            </button>
                            <button onclick="addQuoteBlock()" class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-sm flex items-center">
                                <i class="fas fa-quote-right mr-1"></i> Citação
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Sites Ativos -->
                <div class="bg-gray-800 rounded-lg border border-gray-700 mb-8">
                    <div class="border-b border-gray-700 p-4">
                        <h3 class="font-semibold">Sites Ativos</h3>
                    </div>
                    <div class="p-4">
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-700">
                                <thead>
                                    <tr>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Site</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Status</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Uso</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Última Atualização</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Ações</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-700">
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <div class="flex-shrink-0 h-10 w-10 bg-blue-500 rounded-full flex items-center justify-center">
                                                    <i class="fas fa-globe text-white"></i>
                                                </div>
                                                <div class="ml-4">
                                                    <div class="text-sm font-medium text-white">meusite.com.br</div>
                                                    <div class="text-sm text-gray-400">PHP 8.1</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                                Online
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="w-full bg-gray-700 rounded-full h-2">
                                                <div class="bg-blue-500 h-2 rounded-full" style="width: 45%"></div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">2 horas atrás</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <button class="text-blue-500 hover:text-blue-700 mr-3"><i class="fas fa-cog"></i></button>
                                            <button class="text-purple-500 hover:text-purple-700 mr-3"><i class="fas fa-terminal"></i></button>
                                            <button class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <div class="flex-shrink-0 h-10 w-10 bg-purple-500 rounded-full flex items-center justify-center">
                                                    <i class="fas fa-newspaper text-white"></i>
                                                </div>
                                                <div class="ml-4">
                                                    <div class="text-sm font-medium text-white">noticias.com.br</div>
                                                    <div class="text-sm text-gray-400">Node.js</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                                Online
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="w-full bg-gray-700 rounded-full h-2">
                                                <div class="bg-purple-500 h-2 rounded-full" style="width: 72%"></div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">15 minutos atrás</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <button class="text-blue-500 hover:text-blue-700 mr-3"><i class="fas fa-cog"></i></button>
                                            <button class="text-purple-500 hover:text-purple-700 mr-3"><i class="fas fa-terminal"></i></button>
                                            <button class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <div class="flex-shrink-0 h-10 w-10 bg-red-500 rounded-full flex items-center justify-center">
                                                    <i class="fas fa-shopping-cart text-white"></i>
                                                </div>
                                                <div class="ml-4">
                                                    <div class="text-sm font-medium text-white">loja.com.br</div>
                                                    <div class="text-sm text-gray-400">PHP 7.4</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                                Manutenção
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="w-full bg-gray-700 rounded-full h-2">
                                                <div class="bg-red-500 h-2 rounded-full" style="width: 18%"></div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">1 dia atrás</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <button class="text-blue-500 hover:text-blue-700 mr-3"><i class="fas fa-cog"></i></button>
                                            <button class="text-purple-500 hover:text-purple-700 mr-3"><i class="fas fa-terminal"></i></button>
                                            <button class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Terminal Virtual -->
                <div class="bg-gray-800 rounded-lg border border-gray-700">
                    <div class="border-b border-gray-700 p-4 flex justify-between items-center">
                        <h3 class="font-semibold">Terminal SSH</h3>
                        <div class="flex space-x-2">
                            <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm">
                                <i class="fas fa-play mr-1"></i> Conectar
                            </button>
                            <button class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-sm">
                                <i class="fas fa-stop mr-1"></i> Parar
                            </button>
                        </div>
                    </div>
                    <div class="p-4">
                        <div class="bg-black rounded-lg p-4 font-mono text-sm h-64 overflow-y-auto">
                            <div class="text-green-400">user@vps:~$ <span class="text-white">sudo apt update</span></div>
                            <div class="text-gray-400 mt-2">Hit:1 http://archive.ubuntu.com/ubuntu focal InRelease</div>
                            <div class="text-gray-400">Get:2 http://archive.ubuntu.com/ubuntu focal-updates InRelease [114 kB]</div>
                            <div class="text-gray-400">Get:3 http://security.ubuntu.com/ubuntu focal-security InRelease [114 kB]</div>
                            <div class="text-gray-400">Fetched 228 kB in 1s (214 kB/s)</div>
                            <div class="text-gray-400">Reading package lists... Done</div>
                            <div class="text-gray-400">Building dependency tree</div>
                            <div class="text-gray-400">Reading state information... Done</div>
                            <div class="text-green-400 mt-2">user@vps:~$ <span class="text-white blink">_</span></div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script>
        // Inicializar arrastar e soltar
        document.addEventListener('DOMContentLoaded', function() {
            new Sortable(document.getElementById('blocks-container'), {
                animation: 150,
                handle: '.draggable-item',
                ghostClass: 'bg-blue-500/10'
            });
            
            // Tornar os blocos redimensionáveis
            document.querySelectorAll('.resize-handle').forEach(handle => {
                handle.addEventListener('mousedown', initResize);
            });
        });
        
        // Funções para adicionar novos blocos
        function addTextBlock() {
            const container = document.getElementById('blocks-container');
            const newBlock = document.createElement('div');
            newBlock.className = 'draggable-item bg-gray-700 rounded-lg border border-gray-600 p-4 relative';
            newBlock.setAttribute('draggable', 'true');
            newBlock.innerHTML = `
                <div class="flex justify-between items-center mb-2">
                    <span class="text-sm font-medium text-gray-300">Bloco de Texto</span>
                    <div class="flex space-x-2">
                        <button class="text-gray-400 hover:text-white">
                            <i class="fas fa-cog"></i>
                        </button>
                        <button class="text-gray-400 hover:text-white">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
                <textarea class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500" rows="4">Digite seu conteúdo de texto aqui...</textarea>
                <div class="resize-handle"></div>
            `;
            container.appendChild(newBlock);
            newBlock.querySelector('.resize-handle').addEventListener('mousedown', initResize);
        }
        
        function addImageBlock() {
            const container = document.getElementById('blocks-container');
            const newBlock = document.createElement('div');
            newBlock.className = 'draggable-item bg-gray-700 rounded-lg border border-gray-600 p-4 relative';
            newBlock.setAttribute('draggable', 'true');
            newBlock.innerHTML = `
                <div class="flex justify-between items-center mb-2">
                    <span class="text-sm font-medium text-gray-300">Bloco de Imagem</span>
                    <div class="flex space-x-2">
                        <button class="text-gray-400 hover:text-white">
                            <i class="fas fa-cog"></i>
                        </button>
                        <button class="text-gray-400 hover:text-white">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
                <div class="file-upload">
                    <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm mb-2">
                        <i class="fas fa-upload mr-1"></i> Enviar Imagem
                    </button>
                    <input type="file" accept="image/*">
                </div>
                <div class="border border-dashed border-gray-600 rounded-lg p-4 text-center">
                    <i class="fas fa-image text-gray-500 text-4xl mb-2"></i>
                    <p class="text-gray-400 text-sm">Nenhuma imagem selecionada</p>
                </div>
                <div class="mt-2">
                    <input type="text" placeholder="Legenda da imagem" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500">
                </div>
                <div class="resize-handle"></div>
            `;
            container.appendChild(newBlock);
            newBlock.querySelector('.resize-handle').addEventListener('mousedown', initResize);
        }
        
        function addVideoBlock() {
            const container = document.getElementById('blocks-container');
            const newBlock = document.createElement('div');
            newBlock.className = 'draggable-item bg-gray-700 rounded-lg border border-gray-600 p-4 relative';
            newBlock.setAttribute('draggable', 'true');
            newBlock.innerHTML = `
                <div class="flex justify-between items-center mb-2">
                    <span class="text-sm font-medium text-gray-300">Bloco de Vídeo</span>
                    <div class="flex space-x-2">
                        <button class="text-gray-400 hover:text-white">
                            <i class="fas fa-cog"></i>
                        </button>
                        <button class="text-gray-400 hover:text-white">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
                <div class="file-upload">
                    <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm mb-2">
                        <i class="fas fa-upload mr-1"></i> Enviar Vídeo
                    </button>
                    <input type="file" accept="video/*">
                </div>
                <div class="border border-dashed border-gray-600 rounded-lg p-4 text-center">
                    <i class="fas fa-video text-gray-500 text-4xl mb-2"></i>
                    <p class="text-gray-400 text-sm">Nenhum vídeo selecionado</p>
                </div>
                <div class="mt-2">
                    <input type="text" placeholder="Título do vídeo" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500">
                </div>
                <div class="resize-handle"></div>
            `;
            container.appendChild(newBlock);
            newBlock.querySelector('.resize-handle').addEventListener('mousedown', initResize);
        }
        
        function addGalleryBlock() {
            const container = document.getElementById('blocks-container');
            const newBlock = document.createElement('div');
            newBlock.className = 'draggable-item bg-gray-700 rounded-lg border border-gray-600 p-4 relative';
            newBlock.setAttribute('draggable', 'true');
            newBlock.innerHTML = `
                <div class="flex justify-between items-center mb-2">
                    <span class="text-sm font-medium text-gray-300">Bloco de Galeria</span>
                    <div class="flex space-x-2">
                        <button class="text-gray-400 hover:text-white">
                            <i class="fas fa-cog"></i>
                        </button>
                        <button class="text-gray-400 hover:text-white">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
                <div class="file-upload">
                    <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm mb-2">
                        <i class="fas fa-upload mr-1"></i> Adicionar Imagens
                    </button>
                    <input type="file" accept="image/*" multiple>
                </div>
                <div class="border border-dashed border-gray-600 rounded-lg p-4 text-center">
                    <i class="fas fa-images text-gray-500 text-4xl mb-2"></i>
                    <p class="text-gray-400 text-sm">Nenhuma imagem na galeria</p>
                </div>
                <div class="mt-2">
                    <input type="text" placeholder="Título da galeria" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500">
                </div>
                <div class="resize-handle"></div>
            `;
            container.appendChild(newBlock);
            newBlock.querySelector('.resize-handle').addEventListener('mousedown', initResize);
        }
        
        function addQuoteBlock() {
            const container = document.getElementById('blocks-container');
            const newBlock = document.createElement('div');
            newBlock.className = 'draggable-item bg-gray-700 rounded-lg border border-gray-600 p-4 relative';
            newBlock.setAttribute('draggable', 'true');
            newBlock.innerHTML = `
                <div class="flex justify-between items-center mb-2">
                    <span class="text-sm font-medium text-gray-300">Bloco de Citação</span>
                    <div class="flex space-x-2">
                        <button class="text-gray-400 hover:text-white">
                            <i class="fas fa-cog"></i>
                        </button>
                        <button class="text-gray-400 hover:text-white">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
                <textarea class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500" rows="2" placeholder="Digite a citação..."></textarea>
                <div class="mt-2">
                    <input type="text" placeholder="Autor" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500">
                </div>
                <div class="resize-handle"></div>
            `;
            container.appendChild(newBlock);
            newBlock.querySelector('.resize-handle').addEventListener('mousedown', initResize);
        }
        
        // Função para redimensionar blocos
        function initResize(e) {
            e.preventDefault();
            
            const element = e.target.parentElement;
            const startX = e.clientX;
            const startY = e.clientY;
            const startWidth = parseInt(document.defaultView.getComputedStyle(element).width, 10);
            const startHeight = parseInt(document.defaultView.getComputedStyle(element).height, 10);
            
            function doResize(e) {
                element.style.width = (startWidth + e.clientX - startX) + 'px';
                element.style.height = (startHeight + e.clientY - startY) + 'px';
            }
            
            function stopResize() {
                window.removeEventListener('mousemove', doResize, false);
                window.removeEventListener('mouseup', stopResize, false);
            }
            
            window.addEventListener('mousemove', doResize, false);
            window.addEventListener('mouseup', stopResize, false);
        }
        
        // Efeito de cursor piscante no terminal
        function blinkCursor() {
            const cursor = document.querySelector('.blink');
            if (cursor) {
                setInterval(() => {
                    cursor.style.visibility = (cursor.style.visibility === 'hidden' ? '' : 'hidden');
                }, 500);
            }
        }
        
        blinkCursor();
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=dandydow/frontbotcontrol" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>