|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Eternity Browser</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> |
|
|
@keyframes dragonPulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.1); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
|
|
|
.dragon-logo { |
|
|
animation: dragonPulse 2s infinite; |
|
|
} |
|
|
|
|
|
.tab-active { |
|
|
border-top: 3px solid #3b82f6; |
|
|
background: linear-gradient(to bottom, #ffffff, #f0f4ff); |
|
|
} |
|
|
|
|
|
.tab-inactive { |
|
|
background: linear-gradient(to bottom, #e5e7eb, #f3f4f6); |
|
|
} |
|
|
|
|
|
.tab-close:hover { |
|
|
background-color: #fee2e2; |
|
|
color: #dc2626; |
|
|
} |
|
|
|
|
|
.url-bar:focus { |
|
|
box-shadow: 0 0 0 2px #3b82f6; |
|
|
} |
|
|
|
|
|
.toolbar-btn:hover { |
|
|
background-color: #e0e7ff; |
|
|
} |
|
|
|
|
|
.bookmark-btn:hover { |
|
|
background-color: #fee2e2; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 h-screen flex flex-col overflow-hidden"> |
|
|
|
|
|
<div class="bg-white border-b border-gray-200 flex items-center px-2 py-1"> |
|
|
|
|
|
<div class="flex items-center mr-4"> |
|
|
<div class="dragon-logo text-red-500 text-2xl mr-2"> |
|
|
<i class="fas fa-dragon"></i> |
|
|
</div> |
|
|
<span class="text-xl font-bold text-red-600">Eternity</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex space-x-1"> |
|
|
<button class="toolbar-btn p-2 rounded-full text-blue-600"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
<button class="toolbar-btn p-2 rounded-full text-blue-600"> |
|
|
<i class="fas fa-book"></i> |
|
|
</button> |
|
|
<button class="toolbar-btn p-2 rounded-full text-blue-600"> |
|
|
<i class="fas fa-cog"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-100 flex items-center px-2 pt-2 pb-0 overflow-x-auto"> |
|
|
|
|
|
<button class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 mr-2"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
|
|
|
|
|
|
<div class="flex space-x-1"> |
|
|
|
|
|
<div class="tab-active flex items-center rounded-t-lg px-3 py-1 border border-gray-200 border-b-0 shadow-sm min-w-[200px] max-w-[250px]"> |
|
|
<i class="fas fa-lock text-gray-500 text-xs mr-2"></i> |
|
|
<span class="truncate flex-1">Eternity Browser Home</span> |
|
|
<button class="tab-close w-5 h-5 rounded-full flex items-center justify-center ml-2"> |
|
|
<i class="fas fa-times text-xs"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tab-inactive flex items-center rounded-t-lg px-3 py-1 border border-gray-200 border-b-0 shadow-sm min-w-[200px] max-w-[250px]"> |
|
|
<i class="fas fa-globe text-gray-500 text-xs mr-2"></i> |
|
|
<span class="truncate flex-1">Google Search - Eternity Browser</span> |
|
|
<button class="tab-close w-5 h-5 rounded-full flex items-center justify-center ml-2"> |
|
|
<i class="fas fa-times text-xs"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="tab-inactive flex items-center rounded-t-lg px-3 py-1 border border-gray-200 border-b-0 shadow-sm min-w-[200px] max-w-[250px]"> |
|
|
<i class="fas fa-unlock text-gray-500 text-xs mr-2"></i> |
|
|
<span class="truncate flex-1">GitHub - Create your own browser</span> |
|
|
<button class="tab-close w-5 h-5 rounded-full flex items-center justify-center ml-2"> |
|
|
<i class="fas fa-times text-xs"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white border-b border-gray-200 flex items-center px-4 py-2"> |
|
|
|
|
|
<div class="flex space-x-1 mr-4"> |
|
|
<button class="toolbar-btn w-8 h-8 rounded-full text-gray-600 disabled opacity-50"> |
|
|
<i class="fas fa-arrow-left"></i> |
|
|
</button> |
|
|
<button class="toolbar-btn w-8 h-8 rounded-full text-gray-600"> |
|
|
<i class="fas fa-arrow-right"></i> |
|
|
</button> |
|
|
<button class="toolbar-btn w-8 h-8 rounded-full text-gray-600"> |
|
|
<i class="fas fa-redo"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex items-center"> |
|
|
<div class="url-bar flex-1 bg-gray-100 rounded-full flex items-center px-4 py-2 border border-gray-300"> |
|
|
<i class="fas fa-lock text-green-500 mr-2"></i> |
|
|
<input type="text" value="https://eternitybrowser.com/home" class="bg-transparent outline-none flex-1 text-sm"> |
|
|
<div class="flex space-x-2 ml-2"> |
|
|
<button class="w-5 h-5 rounded-full text-gray-500 hover:bg-gray-200"> |
|
|
<i class="fas fa-star text-xs"></i> |
|
|
</button> |
|
|
<button class="w-5 h-5 rounded-full text-gray-500 hover:bg-gray-200"> |
|
|
<i class="fas fa-ellipsis-h text-xs"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex space-x-1 ml-4"> |
|
|
<button class="toolbar-btn w-8 h-8 rounded-full text-blue-600"> |
|
|
<i class="fas fa-user-circle"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white border-b border-gray-200 flex items-center px-4 py-1"> |
|
|
<button class="bookmark-btn px-3 py-1 rounded-full text-sm flex items-center mr-2"> |
|
|
<i class="fas fa-home text-red-500 mr-1"></i> |
|
|
<span>Home</span> |
|
|
</button> |
|
|
<button class="bookmark-btn px-3 py-1 rounded-full text-sm flex items-center mr-2"> |
|
|
<i class="fab fa-youtube text-red-500 mr-1"></i> |
|
|
<span>YouTube</span> |
|
|
</button> |
|
|
<button class="bookmark-btn px-3 py-1 rounded-full text-sm flex items-center mr-2"> |
|
|
<i class="fab fa-twitter text-blue-400 mr-1"></i> |
|
|
<span>Twitter</span> |
|
|
</button> |
|
|
<button class="bookmark-btn px-3 py-1 rounded-full text-sm flex items-center mr-2"> |
|
|
<i class="fab fa-github text-gray-700 mr-1"></i> |
|
|
<span>GitHub</span> |
|
|
</button> |
|
|
<button class="bookmark-btn px-3 py-1 rounded-full text-sm flex items-center"> |
|
|
<i class="fas fa-shopping-cart text-blue-600 mr-1"></i> |
|
|
<span>Amazon</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 bg-white overflow-hidden"> |
|
|
|
|
|
<div class="h-full flex flex-col items-center justify-center bg-gradient-to-b from-blue-50 to-white p-8"> |
|
|
<div class="dragon-logo text-red-500 text-6xl mb-4"> |
|
|
<i class="fas fa-dragon"></i> |
|
|
</div> |
|
|
<h1 class="text-4xl font-bold text-red-600 mb-2">Eternity Browser</h1> |
|
|
<p class="text-gray-600 mb-8">The browser that lasts forever</p> |
|
|
|
|
|
|
|
|
<div class="w-full max-w-2xl mb-8"> |
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="Search or enter website name" |
|
|
class="w-full px-5 py-3 rounded-full border border-gray-300 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
<button class="absolute right-3 top-3 text-blue-600"> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-5 gap-4 w-full max-w-4xl"> |
|
|
<a href="#" class="flex flex-col items-center p-3 rounded-lg hover:bg-blue-50"> |
|
|
<div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mb-2"> |
|
|
<i class="fab fa-google"></i> |
|
|
</div> |
|
|
<span class="text-sm">Google</span> |
|
|
</a> |
|
|
<a href="#" class="flex flex-col items-center p-3 rounded-lg hover:bg-red-50"> |
|
|
<div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center text-red-600 mb-2"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
</div> |
|
|
<span class="text-sm">YouTube</span> |
|
|
</a> |
|
|
<a href="#" class="flex flex-col items-center p-3 rounded-lg hover:bg-blue-50"> |
|
|
<div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-400 mb-2"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</div> |
|
|
<span class="text-sm">Twitter</span> |
|
|
</a> |
|
|
<a href="#" class="flex flex-col items-center p-3 rounded-lg hover:bg-purple-50"> |
|
|
<div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 mb-2"> |
|
|
<i class="fab fa-twitch"></i> |
|
|
</div> |
|
|
<span class="text-sm">Twitch</span> |
|
|
</a> |
|
|
<a href="#" class="flex flex-col items-center p-3 rounded-lg hover:bg-gray-100"> |
|
|
<div class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-700 mb-2"> |
|
|
<i class="fab fa-github"></i> |
|
|
</div> |
|
|
<span class="text-sm">GitHub</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-100 border-t border-gray-200 flex items-center justify-between px-4 py-1 text-xs text-gray-600"> |
|
|
<div> |
|
|
<span class="mr-3"><i class="fas fa-lock text-green-500 mr-1"></i> Secure connection</span> |
|
|
<span><i class="fas fa-shield-alt text-blue-500 mr-1"></i> Protected by Eternity</span> |
|
|
</div> |
|
|
<div> |
|
|
<span class="mr-3"><i class="fas fa-desktop mr-1"></i> 100%</span> |
|
|
<span><i class="fas fa-wifi mr-1"></i> Online</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelectorAll('.tab-inactive').forEach(tab => { |
|
|
tab.addEventListener('click', function() { |
|
|
|
|
|
document.querySelectorAll('.tab-active').forEach(t => { |
|
|
t.classList.remove('tab-active'); |
|
|
t.classList.add('tab-inactive'); |
|
|
t.classList.remove('border-blue-500'); |
|
|
t.classList.add('border-gray-200'); |
|
|
}); |
|
|
|
|
|
|
|
|
this.classList.remove('tab-inactive'); |
|
|
this.classList.add('tab-active'); |
|
|
this.classList.remove('border-gray-200'); |
|
|
this.classList.add('border-blue-500'); |
|
|
|
|
|
|
|
|
const tabText = this.querySelector('span').textContent; |
|
|
document.querySelector('.url-bar input').value = `https://${tabText.toLowerCase().replace(/ /g, '')}.com`; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.tab-close').forEach(btn => { |
|
|
btn.addEventListener('click', function(e) { |
|
|
e.stopPropagation(); |
|
|
const tab = this.closest('.tab-active, .tab-inactive'); |
|
|
tab.remove(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const searchInput = document.querySelector('.url-bar input'); |
|
|
searchInput.addEventListener('keypress', function(e) { |
|
|
if (e.key === 'Enter') { |
|
|
const url = this.value; |
|
|
if (!url.startsWith('http')) { |
|
|
this.value = `https://${url}`; |
|
|
} |
|
|
alert(`Navigating to: ${this.value}\n\nThis is a demo - actual navigation would happen in a real browser.`); |
|
|
} |
|
|
}); |
|
|
</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=D110/game" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
