Spaces:

Victorr0101
/

nixware

Running

App Files Files Community

nixware / index.html

Victorr0101

Add 3 files

da6f01f verified 11 months ago

raw

history blame contribute delete

9.55 kB

	<!DOCTYPE html>
	<html lang="pt-br">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>NixWare Free - Download</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">
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

	body {
	font-family: 'Poppins', sans-serif;
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
	min-height: 100vh;
	overflow-x: hidden;
	}

	.glow {
	animation: glow 2s ease-in-out infinite alternate;
	}

	@keyframes glow {
	from {
	box-shadow: 0 0 10px -10px #4f46e5;
	}
	to {
	box-shadow: 0 0 20px 5px #4f46e5;
	}
	}

	.particle {
	position: absolute;
	background-color: rgba(79, 70, 229, 0.5);
	border-radius: 50%;
	pointer-events: none;
	}
	</style>
	</head>
	<body class="text-white">
	<!-- Navbar -->
	<nav class="bg-gray-900 bg-opacity-80 backdrop-blur-md fixed w-full z-10">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="flex items-center justify-between h-16">
	<div class="flex items-center">
	<div class="flex-shrink-0">
	<span class="text-indigo-500 font-bold text-xl">Nix<span class="text-white">Ware</span> <span class="text-green-500">Free</span></span>
	</div>
	<div class="hidden md:block">
	<div class="ml-10 flex items-baseline space-x-4">
	<a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700 transition">Home</a>
	<a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700 transition">Features</a>
	<a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700 transition">About</a>
	<a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700 transition">Contact</a>
	</div>
	</div>
	</div>
	<div class="hidden md:block">
	<div class="ml-4 flex items-center md:ml-6">
	<button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
	<i class="fas fa-search"></i>
	</button>
	</div>
	</div>
	<div class="-mr-2 flex md:hidden">
	<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
	<i class="fas fa-bars"></i>
	</button>
	</div>
	</div>
	</div>
	</nav>

	<!-- Hero Section -->
	<main class="flex flex-col items-center justify-center min-h-screen px-4 text-center relative overflow-hidden">
	<!-- Particles background -->
	<div id="particles-container" class="absolute inset-0 overflow-hidden"></div>

	<div class="z-10 max-w-4xl mx-auto">
	<h1 class="text-5xl md:text-7xl font-bold mb-6">
	<span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-500 to-purple-600">NixWare</span>
	<span class="text-green-500">Free</span>
	</h1>
	<p class="text-xl md:text-2xl text-gray-300 mb-10">
	The ultimate free software for your needs. Fast, secure and easy to use.
	</p>

	<!-- Download Button -->
	<button id="downloadBtn" class="glow relative overflow-hidden px-12 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-bold rounded-full text-xl transform transition-all duration-300 hover:scale-105 hover:from-indigo-700 hover:to-purple-700 focus:outline-none">
	<span class="relative z-10 flex items-center">
	<i class="fas fa-download mr-3"></i> DOWNLOAD NOW
	</span>
	<span class="absolute inset-0 bg-white opacity-0 hover:opacity-10 transition-opacity duration-300 rounded-full"></span>
	</button>

	<div class="mt-8 flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-8">
	<div class="flex items-center">
	<i class="fas fa-shield-alt text-green-500 mr-2"></i>
	<span>100% Virus Free</span>
	</div>
	<div class="flex items-center">
	<i class="fas fa-bolt text-yellow-500 mr-2"></i>
	<span>Lightning Fast</span>
	</div>
	<div class="flex items-center">
	<i class="fas fa-lock text-red-500 mr-2"></i>
	<span>Secure</span>
	</div>
	</div>
	</div>

	<!-- Floating elements -->
	<div class="absolute bottom-10 left-10 opacity-30">
	<i class="fas fa-code text-6xl text-indigo-500"></i>
	</div>
	<div class="absolute top-20 right-10 opacity-30">
	<i class="fas fa-cog text-8xl text-purple-500 animate-spin-slow"></i>
	</div>
	</main>

	<!-- Footer -->
	<footer class="bg-gray-900 bg-opacity-80 py-8">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="flex flex-col md:flex-row justify-between items-center">
	<div class="mb-4 md:mb-0">
	<span class="text-indigo-500 font-bold text-xl">Nix<span class="text-white">Ware</span> <span class="text-green-500">Free</span></span>
	</div>
	<div class="flex space-x-6">
	<a href="#" class="text-gray-400 hover:text-white transition">
	<i class="fab fa-twitter text-xl"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-white transition">
	<i class="fab fa-discord text-xl"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-white transition">
	<i class="fab fa-github text-xl"></i>
	</a>
	</div>
	</div>
	<div class="mt-8 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between">
	<p class="text-gray-400 text-sm">
	© 2023 NixWare Free. All rights reserved.
	</p>
	<div class="mt-4 md:mt-0 flex space-x-6">
	<a href="#" class="text-gray-400 hover:text-white text-sm transition">Privacy Policy</a>
	<a href="#" class="text-gray-400 hover:text-white text-sm transition">Terms of Service</a>
	<a href="#" class="text-gray-400 hover:text-white text-sm transition">Contact Us</a>
	</div>
	</div>
	</div>
	</footer>

	<script>
	// Create particles
	function createParticles() {
	const container = document.getElementById('particles-container');
	const particleCount = 30;

	for (let i = 0; i < particleCount; i++) {
	const particle = document.createElement('div');
	particle.classList.add('particle');

	// Random size between 2px and 6px
	const size = Math.random() * 4 + 2;
	particle.style.width = `${size}px`;
	particle.style.height = `${size}px`;

	// Random position
	particle.style.left = `${Math.random() * 100}%`;
	particle.style.top = `${Math.random() * 100}%`;

	// Random animation
	const duration = Math.random() * 20 + 10;
	particle.style.animation = `float ${duration}s linear infinite`;

	container.appendChild(particle);
	}
	}

	// Add floating animation to particles
	function addFloatingAnimation() {
	const style = document.createElement('style');
	style.innerHTML = `
	@keyframes float {
	0% {
	transform: translateY(0) translateX(0);
	opacity: 1;
	}
	100% {
	transform: translateY(${Math.random() * 200 - 100}px) translateX(${Math.random() * 200 - 100}px);
	opacity: 0;
	}
	}
	`;
	document.head.appendChild(style);
	}

	// Download button redirect
	document.getElementById('downloadBtn').addEventListener('click', function() {
	// Show loading effect
	this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> REDIRECTING...';

	// Redirect after short delay
	setTimeout(() => {
	window.location.href = 'https://
	</html>