Hugging Face's logo

Spaces:
D110
/
game
Running

App Files Community
game / index.html
D110's picture
D110
Add 2 files
da183fa verified
raw
history blame contribute delete
13.6 kB
 <!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">
<!-- Browser Header -->
<div class="bg-white border-b border-gray-200 flex items-center px-2 py-1">
<!-- Dragon Logo -->
<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>
<!-- Menu Buttons -->
<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>
<!-- Tab Bar -->
<div class="bg-gray-100 flex items-center px-2 pt-2 pb-0 overflow-x-auto">
<!-- New Tab Button -->
<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>
<!-- Tabs -->
<div class="flex space-x-1">
<!-- Active Tab -->
<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>
<!-- Inactive Tabs -->
<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>
<!-- Toolbar -->
<div class="bg-white border-b border-gray-200 flex items-center px-4 py-2">
<!-- Navigation Buttons -->
<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>
<!-- URL Bar -->
<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>
<!-- User Menu -->
<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>
<!-- Bookmarks Bar -->
<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>
<!-- Web Content Area -->
<div class="flex-1 bg-white overflow-hidden">
<!-- New Tab Page -->
<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>
<!-- Search Box -->
<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>
<!-- Quick Links -->
<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>
<!-- Status Bar -->
<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>
// Simple tab switching functionality
document.querySelectorAll('.tab-inactive').forEach(tab => {
tab.addEventListener('click', function() {
// Remove active class from all tabs
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');
});
// Add active class to clicked tab
this.classList.remove('tab-inactive');
this.classList.add('tab-active');
this.classList.remove('border-gray-200');
this.classList.add('border-blue-500');
// Update URL bar (simplified)
const tabText = this.querySelector('span').textContent;
document.querySelector('.url-bar input').value = `https://${tabText.toLowerCase().replace(/ /g, '')}.com`;
});
});
// Close tab functionality
document.querySelectorAll('.tab-close').forEach(btn => {
btn.addEventListener('click', function(e) {
e.stopPropagation();
const tab = this.closest('.tab-active, .tab-inactive');
tab.remove();
});
});
// Search functionality
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>