Hugging Face's logo

Spaces:
ASDAD34
/
anycoder-53c8a95b
Running

App Files Community
anycoder-53c8a95b / index.html
ASDAD34's picture
ASDAD34
Upload folder using huggingface_hub
bf793a1 verified
raw
history blame contribute delete
35.7 kB
 <!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flux Browser</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #0f172a; /* Slate 900 */
overflow: hidden; /* Prevent body scroll, handle in app */
user-select: none; /* App-like feel */
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #334155;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #475569;
}
/* Glassmorphism Utilities */
.glass {
background: rgba(30, 41, 59, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.glass-panel {
background: rgba(15, 23, 42, 0.95);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
/* Tab Animations */
.tab-item {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.tab-item.active {
background: rgba(255, 255, 255, 0.1);
}
.tab-item:hover:not(.active) {
background: rgba(255, 255, 255, 0.05);
}
/* Address Bar Focus */
.address-bar:focus-within {
background: rgba(30, 41, 59, 0.9);
box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.5);
}
/* Content Fade In */
.fade-in {
animation: fadeIn 0.4s ease-out forwards;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Loader */
.loader {
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #38bdf8, transparent);
background-size: 200% 100%;
animation: loading 1.5s infinite linear;
position: absolute;
top: 0;
left: 0;
z-index: 50;
display: none;
}
@keyframes loading {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* Hide default scrollbar for clean look in webviews if we were using iframes,
but here we simulate content */
.content-area {
height: calc(100vh - 85px);
overflow-y: auto;
position: relative;
}
</style>
</head>
<body class="text-slate-200 h-screen flex flex-col">
<!-- Loading Bar -->
<div id="page-loader" class="loader"></div>
<!-- Title Bar / Header -->
<header class="glass h-[40px] flex items-center justify-between px-4 draggable">
<div class="flex items-center space-x-4 opacity-50 text-xs font-medium tracking-wide">
<span>Flux Browser</span>
</div>
<div class="flex items-center space-x-2">
<div class="w-3 h-3 rounded-full bg-red-500/80 hover:bg-red-500 transition-colors cursor-pointer"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500/80 hover:bg-yellow-500 transition-colors cursor-pointer"></div>
<div class="w-3 h-3 rounded-full bg-green-500/80 hover:bg-green-500 transition-colors cursor-pointer"></div>
</div>
</header>
<!-- Toolbar & Tabs Container -->
<div class="flex flex-col bg-slate-900/80 border-b border-slate-800">
<!-- Tabs Row -->
<div class="flex items-center px-2 pt-2 space-x-1 overflow-x-auto no-scrollbar" id="tabs-container">
<!-- Tabs injected via JS -->
<button onclick="app.newTab()" class="p-1.5 rounded-md hover:bg-slate-700 text-slate-400 hover:text-white transition-colors ml-2" title="Yeni Sekme">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
</button>
</div>
<!-- Navigation Row -->
<div class="flex items-center px-3 py-2 space-x-3">
<!-- Nav Controls -->
<div class="flex items-center space-x-1 text-slate-400">
<button onclick="app.goBack()" class="p-1.5 rounded-full hover:bg-slate-800 hover:text-white transition-colors disabled:opacity-30" id="btn-back">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</button>
<button onclick="app.goForward()" class="p-1.5 rounded-full hover:bg-slate-800 hover:text-white transition-colors disabled:opacity-30" id="btn-forward">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</button>
<button onclick="app.refresh()" class="p-1.5 rounded-full hover:bg-slate-800 hover:text-white transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
</button>
</div>
<!-- Address Bar -->
<div class="flex-1 address-bar bg-slate-800/50 rounded-lg flex items-center px-3 py-1.5 transition-all border border-transparent focus-within:border-sky-500/50">
<div class="text-slate-500 mr-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" id="security-icon">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</div>
<input type="text" id="url-input" class="bg-transparent border-none outline-none text-sm text-slate-200 w-full font-light placeholder-slate-500" placeholder="Ara veya adres gir" autocomplete="off">
<div class="text-slate-500 hover:text-slate-300 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</div>
</div>
<!-- Extensions/Profile -->
<div class="flex items-center space-x-2 text-slate-400">
<button class="p-1.5 rounded-full hover:bg-slate-800 hover:text-white transition-colors relative">
<div class="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full border-2 border-slate-900"></div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
</svg>
</button>
<button class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 text-white flex items-center justify-center text-xs font-bold shadow-lg hover:scale-105 transition-transform">
A
</button>
</div>
</div>
</div>
<!-- Main Content Area -->
<main id="main-view" class="flex-1 bg-slate-900 relative overflow-hidden">
<!-- Content injected via JS -->
</main>
<!-- Footer Status Bar -->
<footer class="h-6 bg-slate-900 border-t border-slate-800 flex items-center justify-between px-3 text-[10px] text-slate-500 select-none">
<div class="flex items-center space-x-3">
<span id="status-text">Bağlantı güvenli</span>
</div>
<div class="flex items-center space-x-3">
<span>Flux v2.4.0</span>
<span class="flex items-center gap-1"><div class="w-1.5 h-1.5 rounded-full bg-green-500"></div> 12ms</span>
</div>
</footer>
<!-- JavaScript Application Logic -->
<script>
/**
* Flux Browser Core Logic
* Simulates a browser environment using DOM manipulation.
*/
const app = (() => {
// State
let tabs = [];
let activeTabId = null;
let tabCounter = 0;
// DOM Elements
const els = {
tabsContainer: document.getElementById('tabs-container'),
mainView: document.getElementById('main-view'),
urlInput: document.getElementById('url-input'),
loader: document.getElementById('page-loader'),
btnBack: document.getElementById('btn-back'),
btnForward: document.getElementById('btn-forward'),
statusText: document.getElementById('status-text')
};
// Mock Data for Simulation
const mockData = {
'google.com': {
title: 'Google',
content: `
<div class="flex flex-col items-center justify-center h-full w-full bg-[#202124] text-white">
<div class="mb-8 text-6xl font-medium tracking-tighter bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-red-400 to-yellow-400">Google</div>
<div class="w-full max-w-xl relative">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
</div>
<input type="text" class="w-full bg-[#303134] border border-[#5f6368] rounded-full py-3 pl-12 pr-12 text-white focus:outline-none focus:border-[#8ab4f8] shadow-lg" placeholder="Google'da arama yapın veya bir URL yazın">
<div class="absolute inset-y-0 right-0 pr-4 flex items-center">
<svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" /></svg>
</div>
</div>
<div class="mt-8 flex space-x-4">
<button class="bg-[#303134] border border-[#303134] hover:border-[#5f6368] px-4 py-2 rounded text-sm text-[#e8eaed]">Google'da Ara</button>
<button class="bg-[#303134] border border-[#303134] hover:border-[#5f6368] px-4 py-2 rounded text-sm text-[#e8eaed]">Kendimi Şanslı Hissediyorum</button>
</div>
<div class="mt-8 text-sm text-[#9aa0a6]">Google'ı kullanabileceğiniz diğer diller: <a href="#" class="text-[#8ab4f8] hover:underline">English</a></div>
</div>
`
},
'github.com': {
title: 'GitHub',
content: `
<div class="flex flex-col h-full w-full bg-[#0d1117] text-[#c9d1d9] overflow-y-auto">
<div class="border-b border-[#30363d] bg-[#161b22] px-8 py-4 flex items-center justify-between">
<div class="flex items-center space-x-4">
<svg height="32" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32" data-view-component="true" fill="white">
<path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
</svg>
<input type="text" class="bg-[#0d1117] border border-[#30363d] rounded-md px-3 py-1 text-sm w-64 text-slate-300 focus:border-blue-500 focus:outline-none" placeholder="Search or jump to...">
</div>
<div class="flex items-center space-x-4 text-sm font-semibold">
<a href="#" class="hover:text-slate-300">Pull requests</a>
<a href="#" class="hover:text-slate-300">Issues</a>
<a href="#" class="hover:text-slate-300">Codespaces</a>
<a href="#" class="hover:text-slate-300">Marketplace</a>
<a href="#" class="hover:text-slate-300">Explore</a>
</div>
</div>
<div class="max-w-6xl mx-auto w-full mt-8 px-4">
<div class="flex items-center justify-between mb-6">
<h2 class="text-xl font-normal">Home</h2>
<div class="flex space-x-2">
<button class="bg-[#21262d] border border-[#30363d] hover:border-[#8b949e] text-[#c9d1d9] px-3 py-1 rounded-md text-xs font-medium">Send feedback</button>
</div>
</div>
<div class="grid grid-cols-3 gap-4">
<div class="col-span-2 space-y-4">
<div class="border border-[#30363d] rounded-md p-4 bg-[#161b22]">
<div class="flex items-center mb-2">
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-400 to-emerald-400 mr-2"></div>
<div>
<div class="text-sm font-semibold">akhaliq <span class="font-normal text-slate-400">created a repository</span></div>
<div class="text-xs text-slate-500">2 hours ago</div>
</div>
</div>
<div class="border border-[#30363d] rounded p-3 bg-[#0d1117]">
<div class="font-bold text-blue-400 text-sm">akhaliq/anycoder</div>
<div class="text-xs text-slate-400 mt-1">AI powered coding assistant</div>
<div class="flex items-center mt-3 space-x-4 text-xs text-slate-500">
<span class="flex items-center"><span class="w-2 h-2 rounded-full bg-yellow-400 mr-1"></span> Python</span>
<span>⭐ 1.2k</span>
</div>
</div>
</div>
</div>
<div class="col-span-1">
<div class="border border-[#30363d] rounded-md p-4 bg-[#161b22]">
<h3 class="text-sm font-semibold mb-3">Latest changes</h3>
<ul class="text-xs space-y-3 text-slate-400">
<li>3 hours ago — GitHub Actions: New runner images</li>
<li>5 hours ago — Security Advisory: Critical patch</li>
</ul>
</div>
</div>
</div>
</div>
</div>
`
},
'youtube.com': {
title: 'YouTube',
content: `
<div class="flex h-full w-full bg-[#0f0f0f] text-white overflow-hidden">
<div class="w-20 flex flex-col items-center py-4 space-y-6 bg-[#0f0f0f]">
<div class="flex flex-col items-center cursor-pointer group">
<svg class="w-6 h-6 mb-1 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
<span class="text-[10px] group-hover:text-white text-slate-400">Ana Sayfa</span>
</div>
<div class="flex flex-col items-center cursor-pointer group">
<svg class="w-6 h-6 mb-1 text-slate-400 group-hover:text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
<span class="text-[10px] group-hover:text-white text-slate-400">Keşfet</span>
</div>
<div class="flex flex-col items-center cursor-pointer group">
<svg class="w-6 h-6 mb-1 text-slate-400 group-hover:text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>
<span class="text-[10px] group-hover:text-white text-slate-400">Shorts</span>
</div>
</div>
<div class="flex-1 overflow-y-auto p-6">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
${Array(8).fill(0).map((_, i) => `
<div class="flex flex-col cursor-pointer group">
<div class="aspect-video bg-slate-800 rounded-xl overflow-hidden relative mb-2">
<img src="https://picsum.photos/seed/${i+10}/400/225" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
<div class="absolute bottom-1 right-1 bg-black/80 text-xs px-1 rounded">10:0${i}</div>
</div>
<div class="flex space-x-3">
<div class="w-9 h-9 rounded-full bg-slate-700 overflow-hidden flex-shrink-0">
<img src="https://picsum.photos/seed/${i+20}/100/100" class="w-full h-full">
</div>
<div>
<h3 class="text-sm font-semibold text-white leading-tight mb-1 line-clamp-2">Harika Bir Video Başlığı #${i+1} - Flux Browser Demo</h3>
<div class="text-xs text-slate-400">Kanal Adı</div>
<div class="text-xs text-slate-400">1${i}B görüntüleme • 1 gün önce</div>
</div>
</div>
</div>
`).join('')}
</div>
</div>
</div>
`
},
'weather.com': {
title: 'Hava Durumu',
content: `
<div class="h-full w-full bg-gradient-to-br from-blue-400 to-blue-600 text-white p-8 overflow-y-auto">
<div class="max-w-4xl mx-auto">
<div class="flex justify-between items-end mb-8">
<div>
<h1 class="text-4xl font-light">İstanbul</h1>
<p class="text-blue-100">Salı 14:30</p>
</div>
<div class="text-right">
<div class="text-6xl font-light">24°</div>
<div class="text-xl">Parçalı Bulutlu</div>
</div>
</div>
<div class="bg-white/20 backdrop-blur-md rounded-2xl p-6 mb-6 shadow-lg">
<h3 class="text-sm font-semibold mb-4 uppercase tracking-wider text-blue-50">Saatlik Tahmin</h3>
<div class="flex justify-between overflow-x-auto pb-2 space-x-8">
${['14:00', '15:00', '16:00', '17:00', '18:00', '19:00'].map(t => `
<div class="flex flex-col items-center min-w-[40px]">
<span class="text-sm mb-2">${t}</span>
<svg class="w-6 h-6 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
<span class="font-bold">${Math.floor(Math.random() * 5) + 22}°</span>
</div>
`).join('')}
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="bg-white/20 backdrop-blur-md rounded-2xl p-4">
<div class="text-sm text-blue-100 mb-1">Nem</div>
<div class="text-2xl font-semibold">%65</div>
</div>
<div class="bg-white/20 backdrop-blur-md rounded-2xl p-4">
<div class="text-sm text-blue-100 mb-1">Rüzgar</div>
<div class="text-2xl font-semibold">12 km/s</div>
</div>
</div>
</div>
</div>
`
}
};
// --- Core Functions ---
function init() {
// Event Listeners
els.urlInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
navigateTo(els.urlInput.value);
}
});
// Start with a new tab
newTab();
}
function createTabElement(tab) {
const div = document.createElement('div');
div.className = `tab-item group flex items-center max-w-[200px] min-w-[140px] h-8 px-3 rounded-t-lg cursor-pointer border-t border-l border-r border-transparent relative ${tab.id === activeTabId ? 'active border-slate-700 bg-slate-800' : 'hover:bg-slate-800/50'}`;
div.onclick = (e) => {
if(!e.target.closest('.close-btn')) switchTab(tab.id);
};
// Favicon (simulated with a colored circle)
const faviconColor = tab.url.includes('google') ? 'bg-blue-500' :
tab.url.includes('github') ? 'bg-gray-200' :
tab.url.includes('youtube') ? 'bg-red-600' : 'bg-slate-500';
const favicon = `<div class="w-3 h-3 rounded-full ${faviconColor} mr-2 flex-shrink-0"></div>`;
const title = `<span class="truncate text-xs flex-1 text-slate-300 group-hover:text-slate-200">${tab.title}</span>`;
const closeBtn = `
<button onclick="app.closeTab(${tab.id})" class="close-btn ml-2 p-0.5 rounded-full hover:bg-slate-600 text-slate-500 hover:text-white opacity-0 group-hover:opacity-100 transition-opacity">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
`;
div.innerHTML = favicon + title + closeBtn;
return div;
}
function renderTabs() {
// Clear current tabs (except the + button which is last)
const addBtn = els.tabsContainer.lastElementChild;
els.tabsContainer.innerHTML = '';
tabs.forEach(tab => {
els.tabsContainer.appendChild(createTabElement(tab));
});
els.tabsContainer.appendChild(addBtn);
}
function renderContent() {
const tab = tabs.find(t => t.id === activeTabId);
if (!tab) return;
// Show loader
els.loader.style.display = 'block';
els.statusText.innerText = `Bağlanılıyor... ${tab.url}`;
// Simulate network delay
setTimeout(() => {
els.loader.style.display = 'none';
els.statusText.innerText = 'Tamamlandı';
// Generate Content
let contentHtml = '';
// Check if URL matches mock data
const domain = tab.url.replace(/^https?:\/\//, '').replace(/\/$/, '');
if (mockData[domain]) {
contentHtml = mockData[domain].content;
tab.title = mockData[domain].title;
} else {
// Generic 404 / Search Page
contentHtml = `
<div class="flex flex-col items-center justify-center h-full w-full bg-slate-900 text-slate-300">
<div class="w-24 h-24 bg-slate-800 rounded-full flex items-center justify-center mb-6 text-4xl">🌐</div>
<h2 class="text-2xl font-bold mb-2">Siteye erişilemiyor</h2>
<p class="text-slate-500 mb-6 max-w-md text-center">
"${tab.url}" adresine ulaşılamıyor veya bu uygulama tarafından desteklenmiyor.
<br><br>
<span class="text-xs text-slate-600">(Bu bir simülasyondur. Gerçek internet siteleri yüklenmez.)</span>
</p>
<div class="grid grid-cols-2 gap-4 w-full max-w-md">
<button onclick="app.navigateTo('google.com')" class="p-4 bg-slate-800 rounded hover:bg-slate-700 flex flex-col items-center transition-colors">
<span class="text-2xl mb-2">🔍</span>
<span class="text-sm">Google</span>
</button>
<button onclick="app.navigateTo('github.com')" class="p-4 bg-slate-800 rounded hover:bg-slate-700 flex flex-col items-center transition-colors">
<span class="text-2xl mb-2">💻</span>
<span class="text-sm">GitHub</span>
</button>
<button onclick="app.navigateTo('youtube.com')" class="p-4 bg-slate-800 rounded hover:bg-slate-700 flex flex-col items-center transition-colors">
<span class="text-2xl mb-2">🎬</span>
<span class="text-sm">YouTube</span>
</button>
<button onclick="app.navigateTo('weather.com')" class="p-4 bg-slate-800 rounded hover:bg-slate-700 flex flex-col items-center transition-colors">
<span class="text-2xl mb-2">☀️</span>
<span class="text-sm">Hava Durumu</span>
</button>
</div>
</div>
`;
}
els.mainView.innerHTML = `<div class="fade-in h-full w-full">${contentHtml}</div>`;
els.urlInput.value = tab.url;
// Update Tab Title in UI
renderTabs();
// Update Nav Buttons
updateNavButtons();
}, 600); // 600ms fake delay
}
function updateNavButtons() {
const tab = tabs.find(t => t.id === activeTabId);
if(tab) {
els.btnBack.disabled = tab.historyIndex <= 0;
els.btnForward.disabled = tab.historyIndex >= tab.history.length - 1;
// Opacity handling for disabled state via Tailwind classes
els.btnBack.style.opacity = els.btnBack.disabled ? '0.3' : '1';
els.btnForward.style.opacity = els.btnForward.disabled ? '0.3' : '1';
}
}
// --- Public Methods ---
function newTab(url = 'flux://newtab') {
tabCounter++;
const newTab = {
id: tabCounter,
url: url,
title: 'Yeni Sekme',
history: [url],
historyIndex: 0
};
tabs.push(newTab);
switchTab(tabCounter);
}
function closeTab(id) {
tabs = tabs.filter(t => t.id !== id);
if (tabs.length === 0) {
newTab();
} else if (activeTabId === id) {
switchTab(tabs[tabs.length - 1].id);
} else {
renderTabs();
}
}
function switchTab(id) {
activeTabId = id;
renderTabs();
renderContent();
}
function navigateTo(url) {
const tab = tabs.find(t => t.id === activeTabId);
if (!tab) return;
// Format URL
if (!url.includes('://') && !url.startsWith('flux://')) {
if (url.includes('.') && !url.includes(' ')) {
url = 'https://' + url;
} else {
url = 'https://google.com/search?q=' + encodeURIComponent(url);
}
}
// Update History
// Remove forward history if we navigate from middle of stack
if (tab.historyIndex < tab.history.length - 1) {
tab.history = tab.history.slice(0, tab.historyIndex + 1);
}
tab.history.push(url);
tab.historyIndex++;
tab.url = url;
renderContent();
}
function goBack() {
const tab = tabs.find(t => t.id === activeTabId);
if (tab && tab.historyIndex > 0) {
tab.historyIndex--;
tab.url = tab.history[tab.historyIndex];
renderContent();
}
}
function goForward() {
const tab = tabs.find(t => t.id === activeTabId);
if (tab && tab.historyIndex < tab.history.length - 1) {
tab.historyIndex++;
tab.url = tab.history[tab.historyIndex];
renderContent();
}
}
function refresh() {
renderContent();
}
// Expose public API
return {
init,
newTab,
closeTab,
switchTab,
navigateTo,
goBack,
goForward,
refresh
};
})();
// Initialize App on Load
document.addEventListener('DOMContentLoaded', () => {
app.init();
});
</script>
</body>
</html>