Linkwave-Connect/tools
1
0
Fork 0
Code Activity

Site

Browse source
This commit is contained in:
Daniel Ferreira 2026-04-22 16:40:35 +00:00
commit 14c8189e6f
1 changed files with 248 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

248
index.html Normal file
View file

@ -0,0 +1,248 @@
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linkwave Tools | Utilitários de Rede</title>
<link rel="icon" type="image/png" href="https://image.openwave.net.br/image/012a0895-a13c-410a-9725-b7a7bf89b065.png">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: { sans: ['Inter', 'sans-serif'], display: ['Space Grotesk', 'sans-serif'] },
colors: { brand: { dark: '#050505', card: '#0F0F0F', border: '#1F1F1F', blue: '#3b82f6', cyan: '#06b6d4', green: '#10b981', gray: '#888888' } },
animation: { 'fade-in': 'fadeIn 0.5s ease-out forwards' }
}
}
}
</script>
<style>
body { background-color: #050505; color: #e5e5e5; overflow-x: hidden; overscroll-behavior-y: none; }
.bg-grid { background-image: linear-gradient(#ffffff05 1px, transparent 1px), linear-gradient(90deg, #ffffff05 1px, transparent 1px); background-size: 30px 30px; }
.glass-nav {
background: rgba(5, 5, 5, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform, backdrop-filter;
}
.glass-card {
background: rgba(15, 15, 15, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid #1F1F1F; transition: all 0.3s ease;
transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform, backdrop-filter;
}
.text-gradient { background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.tool-panel { display: none; }
.tool-panel.active { display: block; animation: fadeIn 0.3s ease-out forwards; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
</style>
</head>
<body class="antialiased selection:bg-brand-cyan selection:text-white flex flex-col min-h-screen relative">
<div class="fixed inset-0 bg-grid opacity-30 pointer-events-none z-0 transform-gpu"></div>
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-[800px] h-[400px] md:h-[600px] bg-brand-cyan/10 rounded-full blur-[80px] md:blur-[120px] pointer-events-none z-0 transform-gpu"></div>
<nav class="fixed w-full z-50 glass-nav">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-20">
<a href="https://linkwaveconnect.com.br" class="flex items-center gap-3 group shrink-0">
<img src="https://linkwaveconnect.com.br/assets/linkwaveconnect.png" alt="Linkwave" class="h-10 md:h-16 w-auto object-contain transition-transform duration-300 group-hover:scale-105" style="image-rendering: -webkit-optimize-contrast; transform-origin: left center;">
<div class="h-6 w-px bg-brand-border hidden md:block"></div>
<span class="font-display font-bold text-white text-sm md:text-base hidden xl:block group-hover:text-brand-cyan transition-colors">Tools</span>
</a>
<div class="hidden lg:flex items-center gap-1 p-1 bg-brand-dark/50 rounded-xl border border-brand-border/50">
<a href="https://linkwaveconnect.com.br/#hosting" class="px-2 xl:px-4 py-2 rounded-lg text-[11px] xl:text-xs font-medium text-gray-400 hover:text-white transition-all border border-transparent whitespace-nowrap">Cloud & VPS</a>
<a href="https://linkwaveconnect.com.br/#isp" class="px-2 xl:px-4 py-2 rounded-lg text-[11px] xl:text-xs font-medium text-gray-400 hover:text-white transition-all border border-transparent flex items-center gap-2 whitespace-nowrap"><span class="w-1.5 h-1.5 rounded-full bg-brand-green"></span>Internet</a>
<div class="w-px h-4 bg-brand-border mx-1"></div>
<a href="https://linkwaveconnect.com.br/midia/" class="px-2 xl:px-4 py-2 rounded-lg text-[11px] xl:text-xs font-medium text-purple-400 hover:text-white hover:bg-purple-500/10 transition-all border border-transparent whitespace-nowrap flex items-center gap-1 xl:gap-2"><i class="fa-solid fa-video"></i> Mídia</a>
<div class="w-px h-4 bg-brand-border mx-1"></div>
<a href="https://tools.linkwaveconnect.com.br" class="px-2 xl:px-4 py-2 rounded-lg text-[11px] xl:text-xs font-medium text-white bg-[#111] border border-brand-border whitespace-nowrap flex items-center gap-1 xl:gap-2"><i class="fa-solid fa-toolbox"></i> Ferramentas</a>
<div class="w-px h-4 bg-brand-border mx-1"></div>
<a href="https://openwave.net.br" class="px-2 xl:px-4 py-2 rounded-lg text-[11px] xl:text-xs font-medium text-brand-blue hover:text-white hover:bg-brand-blue/10 transition-all border border-transparent whitespace-nowrap flex items-center gap-1 xl:gap-2"><i class="fa-solid fa-cubes"></i> Ecossistema</a>
<div class="w-px h-4 bg-brand-border mx-1"></div>
<a href="https://transparencia.linkwaveconnect.com.br/" class="px-2 xl:px-4 py-2 rounded-lg text-[11px] xl:text-xs font-medium text-cyan-400 hover:text-white hover:bg-cyan-500/10 transition-all border border-transparent whitespace-nowrap flex items-center gap-1 xl:gap-2" title="Portal da Transparência"><i class="fa-solid fa-scale-balanced"></i> Transp.</a>
</div>
<div class="flex items-center gap-4 shrink-0">
<!-- Botão Voltar removido conforme solicitado -->
</div>
</div>
<div class="lg:hidden pb-3 -mt-1 overflow-x-auto no-scrollbar flex gap-2 w-full border-t border-brand-border/30 pt-3">
<a href="https://linkwaveconnect.com.br/#hosting" class="flex-shrink-0 px-3 py-1.5 rounded-full text-xs font-medium text-gray-400 border border-brand-border whitespace-nowrap">Cloud & VPS</a>
<a href="https://linkwaveconnect.com.br/#isp" class="flex-shrink-0 px-3 py-1.5 rounded-full text-xs font-medium text-gray-400 border border-brand-border whitespace-nowrap flex items-center gap-1"><span class="w-1.5 h-1.5 rounded-full bg-brand-green"></span>Internet</a>
<a href="https://linkwaveconnect.com.br/midia/" class="flex-shrink-0 px-3 py-1.5 rounded-full text-xs font-medium text-purple-400 border border-purple-500/30 whitespace-nowrap flex items-center gap-1"><i class="fa-solid fa-video"></i>Mídia</a>
<a href="https://tools.linkwaveconnect.com.br" class="flex-shrink-0 px-3 py-1.5 rounded-full text-xs font-medium text-white bg-[#111] border border-brand-border whitespace-nowrap flex items-center gap-1"><i class="fa-solid fa-toolbox"></i>Ferramentas</a>
<a href="https://openwave.net.br" class="flex-shrink-0 px-3 py-1.5 rounded-full text-xs font-medium text-brand-blue border border-brand-blue/30 whitespace-nowrap flex items-center gap-1"><i class="fa-solid fa-cubes"></i>Ecossistema</a>
<a href="https://transparencia.linkwaveconnect.com.br/" class="flex-shrink-0 px-3 py-1.5 rounded-full text-xs font-medium text-cyan-400 border border-cyan-500/30 whitespace-nowrap flex items-center gap-1"><i class="fa-solid fa-scale-balanced"></i>Transparência</a>
</div>
</div>
</nav>
<main class="flex-grow pt-32 pb-20 px-4 relative z-10">
<div class="max-w-4xl mx-auto text-center mb-16 animate-fade-in">
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-brand-cyan/10 border border-brand-cyan/30 text-xs font-bold text-brand-cyan mb-6 uppercase tracking-wider">
<i class="fa-solid fa-wrench"></i> Utilitários Abertos
</div>
<h1 class="font-display text-4xl sm:text-5xl md:text-7xl font-bold tracking-tight mb-6 text-white leading-tight">
Hub de Ferramentas <span class="text-gradient">SysAdmin.</span>
</h1>
<p class="text-lg md:text-xl text-gray-400 max-w-2xl mx-auto mb-10 leading-relaxed">
Ferramentas rápidas e offline-first para manipulação de texto, senhas e redes.
</p>
</div>
<div class="max-w-5xl mx-auto flex flex-col md:flex-row gap-6">
<div class="w-full md:w-64 shrink-0">
<div class="bg-[#111] border border-brand-border rounded-2xl p-2 sticky top-28 flex overflow-x-auto md:flex-col gap-1 no-scrollbar">
<button onclick="switchTool('password')" class="tool-menu-btn active w-full text-left px-4 py-3 rounded-xl text-sm font-medium transition-all bg-brand-cyan text-black whitespace-nowrap flex items-center gap-3">
<i class="fa-solid fa-key w-4 text-center"></i> Gerador de Senhas
</button>
<button onclick="switchTool('base64')" class="tool-menu-btn w-full text-left px-4 py-3 rounded-xl text-sm font-medium text-gray-400 hover:text-white hover:bg-[#222] transition-all whitespace-nowrap flex items-center gap-3">
<i class="fa-solid fa-code w-4 text-center"></i> Base64 Encode
</button>
<button onclick="switchTool('myip')" class="tool-menu-btn w-full text-left px-4 py-3 rounded-xl text-sm font-medium text-gray-400 hover:text-white hover:bg-[#222] transition-all whitespace-nowrap flex items-center gap-3">
<i class="fa-solid fa-network-wired w-4 text-center"></i> Meu IP Público
</button>
</div>
</div>
<div class="flex-grow glass-card rounded-2xl p-6 md:p-8 min-h-[400px]">
<div id="tool-password" class="tool-panel active">
<h2 class="text-2xl font-bold text-white mb-2"><i class="fa-solid fa-key text-brand-cyan mr-2"></i>Gerador de Senhas Seguras</h2>
<p class="text-sm text-gray-400 mb-8">Gere senhas fortes localmente. Nada é enviado para o servidor.</p>
<div class="bg-[#050505] border border-brand-border p-4 rounded-xl flex justify-between items-center mb-6">
<span id="pw-result" class="text-2xl font-mono text-brand-cyan break-all mr-4">clique_em_gerar</span>
<button onclick="copyToClipboard('pw-result')" class="bg-[#222] hover:bg-[#333] text-white p-3 rounded-lg transition-colors"><i class="fa-regular fa-copy"></i></button>
</div>
<div class="space-y-4 mb-8">
<div>
<label class="block text-sm text-gray-400 mb-2">Comprimento: <span id="pw-length-val" class="text-white font-bold">16</span></label>
<input type="range" id="pw-length" min="8" max="64" value="16" oninput="document.getElementById('pw-length-val').innerText = this.value" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-brand-cyan">
</div>
<div class="flex gap-4 flex-wrap">
<label class="flex items-center gap-2 text-sm text-gray-300 cursor-pointer"><input type="checkbox" id="pw-upper" checked class="accent-brand-cyan w-4 h-4"> Maiúsculas</label>
<label class="flex items-center gap-2 text-sm text-gray-300 cursor-pointer"><input type="checkbox" id="pw-lower" checked class="accent-brand-cyan w-4 h-4"> Minúsculas</label>
<label class="flex items-center gap-2 text-sm text-gray-300 cursor-pointer"><input type="checkbox" id="pw-numbers" checked class="accent-brand-cyan w-4 h-4"> Números</label>
<label class="flex items-center gap-2 text-sm text-gray-300 cursor-pointer"><input type="checkbox" id="pw-symbols" checked class="accent-brand-cyan w-4 h-4"> Símbolos</label>
</div>
</div>
<button onclick="generatePassword()" class="w-full bg-brand-cyan hover:bg-cyan-500 text-black font-bold py-3 rounded-xl transition-all shadow-[0_0_15px_rgba(6,182,212,0.2)]">Gerar Nova Senha</button>
</div>
<div id="tool-base64" class="tool-panel">
<h2 class="text-2xl font-bold text-white mb-2"><i class="fa-solid fa-code text-brand-cyan mr-2"></i>Base64 Encode/Decode</h2>
<p class="text-sm text-gray-400 mb-8">Converta texto simples para Base64 e vice-versa instantaneamente.</p>
<textarea id="b64-input" rows="4" placeholder="Cole o texto..." class="w-full bg-[#050505] border border-brand-border text-white text-sm rounded-xl p-4 mb-4 font-mono"></textarea>
<div class="grid grid-cols-2 gap-4 mb-6">
<button onclick="processBase64('encode')" class="bg-[#222] hover:bg-[#333] border border-brand-border text-white font-bold py-3 rounded-xl">Codificar</button>
<button onclick="processBase64('decode')" class="bg-[#222] hover:bg-[#333] border border-brand-border text-white font-bold py-3 rounded-xl">Decodificar</button>
</div>
<div class="relative">
<textarea id="b64-output" rows="4" readonly placeholder="Resultado..." class="w-full bg-brand-cyan/10 border border-brand-cyan/30 text-brand-cyan text-sm rounded-xl p-4 font-mono"></textarea>
<button onclick="copyToClipboard('b64-output')" class="absolute top-2 right-2 bg-[#050505] border border-brand-cyan/30 text-brand-cyan p-2 rounded-lg"><i class="fa-regular fa-copy"></i></button>
</div>
</div>
<div id="tool-myip" class="tool-panel text-center py-10">
<h2 class="text-2xl font-bold text-white mb-2"><i class="fa-solid fa-network-wired text-brand-cyan mr-2"></i>Seu Endereço IP Público</h2>
<p class="text-sm text-gray-400 mb-12">Como a internet enxerga a sua conexão no momento.</p>
<div class="inline-block bg-[#050505] border border-brand-border p-8 rounded-3xl mb-8 relative">
<span class="absolute -top-3 left-1/2 -translate-x-1/2 bg-brand-cyan text-black text-[10px] font-bold uppercase px-3 py-1 rounded-full">IPv4</span>
<h3 id="ip-result" class="text-4xl md:text-5xl font-mono font-bold text-white">Carregando...</h3>
</div>
<div class="flex justify-center gap-4">
<button onclick="fetchIP()" class="bg-[#222] text-white px-6 py-2 rounded-lg text-sm font-bold"><i class="fa-solid fa-rotate-right mr-2"></i>Atualizar</button>
<button onclick="copyToClipboard('ip-result')" class="bg-brand-cyan text-black px-6 py-2 rounded-lg text-sm font-bold"><i class="fa-regular fa-copy mr-2"></i>Copiar</button>
</div>
</div>
</div>
</div>
</main>
<footer class="border-t border-brand-border bg-[#020202] pt-12 pb-8 relative z-20">
<div class="max-w-7xl mx-auto px-4 text-center md:text-left">
<div class="flex flex-col md:flex-row justify-between items-center gap-6 mb-8">
<div>
<a href="https://linkwaveconnect.com.br" class="flex items-center justify-center md:justify-start gap-3 mb-4 opacity-60 grayscale transition-all duration-300 hover:grayscale-0 hover:opacity-100">
<img src="https://linkwaveconnect.com.br/assets/linkwaveconnect.png" alt="Linkwave Connect" class="h-12 md:h-16 w-auto">
<div class="h-6 w-px bg-gray-600"></div>
<span class="font-display font-bold text-white text-sm md:text-base">Tools</span>
</a>
<p class="text-sm text-gray-600 max-w-sm">Hub de ferramentas essenciais e utilitários de rede para SysAdmins e desenvolvedores.</p>
</div>
</div>
<div class="border-t border-brand-border pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-gray-600 font-mono">
<div class="flex flex-col md:flex-row gap-2 md:gap-4 items-center">
<p>&copy; <span id="copyright-year">2024</span> Linkwave Connect LTDA. Todos os direitos reservados.</p>
</div>
</div>
</div>
</footer>
<script>
function switchTool(id) {
document.querySelectorAll('.tool-panel').forEach(p => p.classList.remove('active'));
document.getElementById(`tool-${id}`).classList.add('active');
document.querySelectorAll('.tool-menu-btn').forEach(b => {
b.classList.remove('active', 'bg-brand-cyan', 'text-black');
b.classList.add('text-gray-400', 'hover:bg-[#222]', 'hover:text-white');
});
event.currentTarget.classList.add('active', 'bg-brand-cyan', 'text-black');
if(id === 'myip') fetchIP();
}
function generatePassword() {
const len = document.getElementById('pw-length').value;
const u = document.getElementById('pw-upper').checked, l = document.getElementById('pw-lower').checked, n = document.getElementById('pw-numbers').checked, s = document.getElementById('pw-symbols').checked;
let charset = "";
if(u) charset += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
if(l) charset += "abcdefghijklmnopqrstuvwxyz";
if(n) charset += "0123456789";
if(s) charset += "!@#$%^&*()_+~`|}{[]:;?><,./-=";
if(charset === "") { document.getElementById('pw-result').innerText = "Opção!"; return; }
let pwd = "";
for (let i = 0, n = charset.length; i < len; ++i) pwd += charset.charAt(Math.floor(Math.random() * n));
document.getElementById('pw-result').innerText = pwd;
}
function processBase64(action) {
const input = document.getElementById('b64-input').value, out = document.getElementById('b64-output');
try {
if(action === 'encode') out.value = btoa(unescape(encodeURIComponent(input)));
else out.value = decodeURIComponent(escape(atob(input)));
} catch(e) { out.value = "Erro."; }
}
async function fetchIP() {
const el = document.getElementById('ip-result');
el.innerText = "Buscando...";
try {
const res = await fetch('https://api.ipify.org?format=json');
const data = await res.json();
el.innerText = data.ip;
} catch(e) { el.innerText = "Erro."; }
}
function copyToClipboard(elementId) {
const el = document.getElementById(elementId);
const text = el.tagName === 'TEXTAREA' ? el.value : el.innerText;
if(!text || text.includes('clique')) return;
navigator.clipboard.writeText(text).then(() => {
const icon = event.currentTarget.querySelector('i');
icon.className = "fa-solid fa-check text-green-500";
setTimeout(() => icon.className = "fa-regular fa-copy", 2000);
});
}
document.addEventListener('DOMContentLoaded', () => {
generatePassword();
const yr = new Date().getFullYear();
document.getElementById('copyright-year').textContent = yr > 2023 ? `2023-${yr}` : '2023';
});
</script>
</body>
</html>