Spaces:

dandydow
/

frontbotcontrol

Running

App Files Files Community

frontbotcontrol / index.html

dandydow

Add 2 files

5ce3ff6 verified 12 months ago

raw

history blame contribute delete

43.6 kB

	<!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>