|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>GhostSurf - Anonymous Web Proxy</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
fontFamily: { |
|
|
sans: ['Inter', 'sans-serif'], |
|
|
}, |
|
|
colors: { |
|
|
primary: { |
|
|
500: '#6366f1', |
|
|
600: '#4f46e5', |
|
|
}, |
|
|
secondary: { |
|
|
500: '#10b981', |
|
|
600: '#059669', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen flex flex-col"> |
|
|
<custom-navbar></custom-navbar> |
|
|
|
|
|
<main class="flex-grow flex items-center justify-center px-4 py-12"> |
|
|
<div class="w-full max-w-md mx-auto"> |
|
|
<div class="text-center mb-8"> |
|
|
<h1 class="text-4xl font-bold text-gray-900 mb-2">GhostSurf</h1> |
|
|
<p class="text-lg text-gray-600">Browse anonymously with our invisible proxy</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-8"> |
|
|
<form id="proxyForm" class="space-y-6"> |
|
|
<div> |
|
|
<label for="url" class="block text-sm font-medium text-gray-700 mb-1">Enter URL to visit anonymously</label> |
|
|
<div class="relative rounded-md shadow-sm"> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<i data-feather="globe" class="text-gray-400"></i> |
|
|
</div> |
|
|
<input type="url" id="url" name="url" required |
|
|
class="focus:ring-primary-500 focus:border-primary-500 block w-full pl-10 pr-12 py-3 border-gray-300 rounded-md" |
|
|
placeholder="https://example.com"> |
|
|
<div class="absolute inset-y-0 right-0 flex items-center"> |
|
|
<button type="submit" |
|
|
class="px-4 h-full bg-primary-500 text-white rounded-r-md hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500 transition-colors"> |
|
|
Go |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<input id="remember" name="remember" type="checkbox" class="h-4 w-4 text-primary-500 focus:ring-primary-500 border-gray-300 rounded"> |
|
|
<label for="remember" class="ml-2 block text-sm text-gray-700"> |
|
|
Remember my preferences |
|
|
</label> |
|
|
</div> |
|
|
</form> |
|
|
|
|
|
<div class="mt-8 pt-6 border-t border-gray-200"> |
|
|
<h3 class="text-sm font-medium text-gray-700 mb-3">How it works</h3> |
|
|
<ul class="space-y-3 text-sm text-gray-600"> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="shield" class="text-primary-500 mr-2 mt-0.5"></i> |
|
|
<span>Your IP address and location are hidden</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="lock" class="text-primary-500 mr-2 mt-0.5"></i> |
|
|
<span>Secure encrypted connection</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="zap" class="text-primary-500 mr-2 mt-0.5"></i> |
|
|
<span>Fast proxy servers worldwide</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<custom-footer></custom-footer> |
|
|
|
|
|
<script src="components/navbar.js"></script> |
|
|
<script src="components/footer.js"></script> |
|
|
<script src="script.js"></script> |
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
document.getElementById('proxyForm').addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
const url = document.getElementById('url').value; |
|
|
if (url) { |
|
|
|
|
|
const form = document.getElementById('proxyForm'); |
|
|
form.classList.add('submitting'); |
|
|
|
|
|
|
|
|
fetch(`/proxy?url=${encodeURIComponent(url)}`) |
|
|
.then(response => { |
|
|
if (!response.ok) throw new Error('Network response was not ok'); |
|
|
return response.text(); |
|
|
}) |
|
|
.then(html => { |
|
|
|
|
|
const proxiedDoc = document.open('text/html', 'replace'); |
|
|
proxiedDoc.write(html); |
|
|
proxiedDoc.close(); |
|
|
}) |
|
|
.catch(error => { |
|
|
console.error('Proxy error:', error); |
|
|
alert('Error loading the requested URL. Please try again.'); |
|
|
}) |
|
|
.finally(() => { |
|
|
form.classList.remove('submitting'); |
|
|
}); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
|
|
|
</body> |
|
|
</html> |
