projetoopenwave/openwave
1
0
Fork 0
Code Activity

site

Browse source
This commit is contained in:
Daniel Ferreira 2026-04-22 16:26:10 +00:00
commit 70032fdace
2 changed files with 351 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

259
index.html Normal file
View file

@ -0,0 +1,259 @@
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Projeto Openwave | Ecossistema Comunitário</title>
<meta name="description" content="Ecossistema de ferramentas gratuitas e de código aberto mantido pela Linkwave Connect.">
<link rel="icon" type="image/png" href="https://openwave.net.br/assets/openwavelogoico.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', gray: '#888888' } },
animation: { 'fade-in': 'fadeIn 0.4s ease-out forwards' },
keyframes: { fadeIn: { '0%': { opacity: '0', transform: 'translateY(15px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } } }
}
}
}
</script>
<style>
body { background-color: #050505; color: #e5e5e5; overflow-x: hidden; overscroll-behavior-y: none; }
.glass {
background: rgba(15, 15, 15, 0.95); border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transform: translateZ(0); -webkit-transform: translateZ(0); will-change: transform, backdrop-filter;
}
@media (min-width: 768px) { .glass { background: rgba(15, 15, 15, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } }
.text-gradient { background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.bg-grid { background-image: linear-gradient(#ffffff05 1px, transparent 1px), linear-gradient(90deg, #ffffff05 1px, transparent 1px); background-size: 30px 30px; }
.nav-btn.active { color: white; background-color: rgba(255, 255, 255, 0.1); border-color: #333; }
.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">
<!-- Fundo Global (Acelerado) -->
<div class="fixed inset-0 bg-grid opacity-30 pointer-events-none transform-gpu z-0"></div>
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[150vw] h-[150vw] md:w-[800px] md:h-[600px] bg-brand-cyan/10 rounded-full blur-[80px] md:blur-[120px] pointer-events-none transform-gpu z-0"></div>
<!-- Navigation -->
<nav class="fixed w-full z-50 glass">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-20">
<!-- LOGO OPENWAVE -->
<a href="#" onclick="navigateTo('home'); return false;" class="cursor-pointer group flex items-center shrink-0">
<img src="https://openwave.net.br/assets/openwavelogo.png" alt="Openwave Logo" class="h-10 md:h-12 w-auto object-contain transition-transform duration-300 group-hover:scale-105 filter drop-shadow-[0_0_10px_rgba(6,182,212,0.5)]">
</a>
<!-- Desktop Menu -->
<div class="hidden md:flex items-center gap-1 p-1 bg-brand-dark/50 rounded-xl border border-brand-border/50">
<button onclick="navigateTo('home')" id="nav-d-home" class="nav-btn active px-4 py-2 rounded-lg text-xs font-medium text-gray-400 hover:text-white transition-all border border-transparent whitespace-nowrap">Início</button>
<button onclick="navigateTo('services')" id="nav-d-services" class="nav-btn px-4 py-2 rounded-lg text-xs font-medium text-gray-400 hover:text-white transition-all border border-transparent whitespace-nowrap flex items-center gap-2"><i class="fa-solid fa-cubes"></i> Serviços</button>
<div class="w-px h-4 bg-brand-border mx-1"></div>
<a href="https://github.com/linkwaveconnect" target="_blank" class="px-4 py-2 rounded-lg text-xs font-medium text-gray-400 hover:text-white hover:bg-gray-800 transition-all border border-transparent whitespace-nowrap flex items-center gap-2"><i class="fa-brands fa-github text-sm"></i> GitHub</a>
</div>
<!-- Right Actions: Patrocinador e Voltar -->
<div class="flex items-center gap-2 md:gap-3">
<button onclick="history.back()" class="flex items-center justify-center bg-[#111] hover:bg-[#222] border border-brand-border text-gray-300 hover:text-white h-9 md:h-10 px-3 md:px-4 rounded-lg text-xs font-medium transition-all gap-2 shadow-sm whitespace-nowrap">
<i class="fa-solid fa-arrow-left"></i> <span class="hidden md:inline">Voltar</span>
</button>
<a href="https://linkwaveconnect.com.br" class="hidden sm:flex items-center justify-center bg-[#111] hover:bg-[#222] border border-brand-border text-gray-300 hover:text-white h-9 md:h-10 px-4 rounded-lg text-xs font-medium transition-all gap-2 shadow-sm whitespace-nowrap">
<span class="hidden xl:inline text-[10px] uppercase text-gray-500 mr-1">Mantido por</span> Linkwave
</a>
</div>
</div>
<!-- Mobile Menu -->
<div class="md:hidden pb-3 -mt-1 overflow-x-auto no-scrollbar flex gap-2 w-full border-t border-brand-border/30 pt-3">
<button onclick="navigateTo('home')" id="nav-m-home" class="nav-btn active bg-brand-dark text-white border-gray-600 flex-shrink-0 px-4 py-1.5 rounded-full text-xs font-medium whitespace-nowrap">Início</button>
<button onclick="navigateTo('services')" id="nav-m-services" class="nav-btn flex-shrink-0 px-4 py-1.5 rounded-full text-xs font-medium text-gray-400 border border-brand-border whitespace-nowrap flex items-center gap-1"><i class="fa-solid fa-cubes"></i> Serviços</button>
<a href="https://github.com/linkwaveconnect" target="_blank" class="flex-shrink-0 px-4 py-1.5 rounded-full text-xs font-medium text-gray-400 border border-brand-border whitespace-nowrap flex items-center gap-1"><i class="fa-brands fa-github"></i> GitHub</a>
</div>
</div>
</nav>
<main class="flex-grow pt-[140px] md:pt-32 pb-10 px-4 relative z-10">
<!-- ================= PAGE: HOME ================= -->
<div id="page-home" class="page-section max-w-7xl mx-auto animate-fade-in relative z-10">
<div class="relative overflow-hidden rounded-2xl md:rounded-3xl bg-brand-card border border-brand-border p-8 md:p-24 text-center">
<div class="absolute inset-0 bg-grid opacity-20 pointer-events-none transform-gpu"></div>
<div class="relative z-10 max-w-4xl mx-auto">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#050505] border border-brand-border text-[10px] md:text-xs text-gray-400 mb-6 md:mb-8">
<i class="fa-solid fa-code text-brand-cyan"></i> Software Livre & Gratuito
</div>
<h1 class="font-display text-4xl sm:text-5xl md:text-7xl font-bold tracking-tight mb-6 text-white leading-tight">
Tecnologia aberta <br/>para <span class="text-gradient">todos.</span>
</h1>
<p class="text-sm md:text-xl text-gray-400 max-w-2xl mx-auto mb-8 md:mb-12 leading-relaxed">
O Projeto Openwave é um braço comunitário criado para fornecer serviços, ferramentas e infraestrutura gratuita para desenvolvedores, sysadmins e projetos independentes.
</p>
<div class="flex flex-col sm:flex-row justify-center items-center gap-4">
<button onclick="navigateTo('services')" class="w-full sm:w-auto bg-white text-black px-8 py-3.5 rounded-xl font-bold hover:bg-gray-200 transition-all text-sm flex items-center justify-center gap-2 shadow-[0_0_20px_rgba(255,255,255,0.2)]">
<i class="fa-solid fa-cubes text-lg"></i> Explorar Serviços
</button>
<a href="https://github.com/linkwaveconnect" target="_blank" class="w-full sm:w-auto px-8 py-3.5 rounded-xl font-bold text-white border border-brand-border bg-[#111] hover:bg-[#222] transition-all text-sm flex items-center justify-center gap-2">
<i class="fa-brands fa-github text-lg"></i> Ver Códigos Fonte
</a>
</div>
</div>
</div>
<div class="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto mt-12">
<div class="bg-[#111] border border-brand-border p-6 rounded-2xl text-center">
<div class="w-12 h-12 bg-cyan-500/10 text-cyan-500 rounded-full flex items-center justify-center mx-auto mb-4 text-xl"><i class="fa-solid fa-lock-open"></i></div>
<h3 class="text-white font-bold mb-2">Sem Paywalls</h3>
<p class="text-xs text-gray-500">Todas as ferramentas do ecossistema são 100% gratuitas para a comunidade.</p>
</div>
<div class="bg-[#111] border border-brand-border p-6 rounded-2xl text-center">
<div class="w-12 h-12 bg-blue-500/10 text-blue-500 rounded-full flex items-center justify-center mx-auto mb-4 text-xl"><i class="fa-solid fa-shield-halved"></i></div>
<h3 class="text-white font-bold mb-2">Privacidade</h3>
<p class="text-xs text-gray-500">Operamos nossos próprios servidores garantindo a total segurança dos dados.</p>
</div>
<div class="bg-[#111] border border-brand-border p-6 rounded-2xl text-center">
<div class="w-12 h-12 bg-purple-500/10 text-purple-500 rounded-full flex items-center justify-center mx-auto mb-4 text-xl"><i class="fa-solid fa-server"></i></div>
<h3 class="text-white font-bold mb-2">Mantido por Linkwave</h3>
<p class="text-xs text-gray-500">Infraestrutura em nuvem e rede fornecida pela equipe da Linkwave Connect.</p>
</div>
</div>
</div>
<!-- ================= PAGE: SERVIÇOS (ECOSISTEMA) ================= -->
<div id="page-services" class="page-section max-w-7xl mx-auto hidden animate-fade-in relative z-10">
<div class="mb-8 border-b border-brand-border pb-6 text-center md:text-left">
<h2 class="font-display text-3xl md:text-4xl font-bold mb-2 text-white">Serviços da Comunidade</h2>
<p class="text-gray-500 text-sm md:text-base">Acesse as plataformas e aplicações mantidas pelo Projeto Openwave.</p>
</div>
<div id="services-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="col-span-full py-12 text-center text-gray-500">
<i class="fa-solid fa-circle-notch fa-spin text-2xl mb-4"></i>
<p>Carregando serviços...</p>
</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="#" onclick="navigateTo('home'); return false;" class="flex items-center justify-center md:justify-start mb-4 opacity-60 grayscale transition-all duration-300 hover:grayscale-0 hover:opacity-100">
<img src="https://openwave.net.br/assets/openwavelogo.png" alt="Openwave" class="h-10 w-auto">
</a>
<p class="text-sm text-gray-600 max-w-sm">Tecnologia aberta e infraestrutura comunitária mantida com orgulho pela equipe Linkwave.</p>
</div>
<div class="flex flex-col gap-3 w-full md:w-auto min-w-[220px]">
<a href="https://linkwaveconnect.com.br" target="_blank" class="bg-[#111] hover:bg-[#222] border border-brand-border text-gray-300 hover:text-white px-6 py-3 rounded-lg text-sm font-medium transition-all flex items-center justify-center gap-2">
<i class="fa-solid fa-globe"></i> Conhecer a Linkwave
</a>
</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> Projeto Openwave. Uma iniciativa Linkwave Connect.</p>
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<script>
async function loadServices() {
try {
const ts = new Date().getTime();
const response = await fetch(`https://openwave.net.br/services.json?t=${ts}`);
if (!response.ok) throw new Error('Network response was not ok');
const data = await response.json();
renderEcosystem(data.ecosystem);
} catch (error) {
console.error("Erro ao carregar os serviços:", error);
document.getElementById('services-container').innerHTML = `
<div class="col-span-full py-12 text-center text-red-500">
<i class="fa-solid fa-triangle-exclamation text-3xl mb-4"></i>
<p>Erro ao carregar a lista de serviços. Verifique a conexão.</p>
</div>
`;
}
}
function renderEcosystem(services) {
const container = document.getElementById('services-container');
if(!container) return;
container.innerHTML = services.map(x => `
<a href="${x.link}" target="_blank" class="group bg-[#111] border border-brand-border rounded-2xl p-6 hover:-translate-y-1 transition-all ${x.borderHover}">
<div class="flex justify-between items-start mb-4">
<div class="w-12 h-12 rounded-xl ${x.bg} flex items-center justify-center ${x.color} text-2xl shadow-inner">
<i class="fa-solid ${x.icon}"></i>
</div>
<span class="text-[9px] uppercase tracking-wider text-gray-500 bg-[#050505] px-2.5 py-1 rounded border border-gray-800">${x.tech}</span>
</div>
<h3 class="text-xl font-bold text-white mb-2 group-hover:${x.color} transition-colors">${x.name}</h3>
<p class="text-sm text-gray-500 leading-relaxed">${x.description}</p>
</a>
`).join('');
}
function navigateTo(id) {
// Atualiza o hash na URL para que o F5 mantenha a aba correta
if (window.location.hash.replace('#', '') !== id) {
window.location.hash = id;
}
document.querySelectorAll('.page-section').forEach(s => s.classList.add('hidden'));
const t = document.getElementById(`page-${id}`) || document.getElementById('page-home');
t.classList.remove('hidden');
document.querySelectorAll('.nav-btn').forEach(b => {
b.classList.remove('active', 'bg-brand-dark', 'text-white', 'border-gray-600');
if(b.id && b.id.startsWith('nav-m-')) b.classList.add('text-gray-400', 'border-brand-border');
});
const dBtn = document.getElementById(`nav-d-${id}`);
if(dBtn) dBtn.classList.add('active');
const mBtn = document.getElementById(`nav-m-${id}`);
if(mBtn) {
mBtn.classList.add('bg-brand-dark', 'text-white', 'border-gray-600');
mBtn.classList.remove('border-brand-border', 'text-gray-400');
}
window.scrollTo(0,0);
}
function checkHashAndNavigate() {
const hash = window.location.hash.replace('#', '');
if (hash && ['services'].includes(hash)) {
navigateTo(hash);
} else {
navigateTo('home');
}
}
document.addEventListener('DOMContentLoaded', () => {
loadServices();
checkHashAndNavigate();
const startYear = 2023, currentYear = new Date().getFullYear();
document.getElementById('copyright-year').textContent = currentYear > startYear ? `${startYear}-${currentYear}` : startYear;
});
window.addEventListener('hashchange', checkHashAndNavigate);
</script>
</body>
</html>