Hugging Face's logo

Spaces:
ASDAD34
/
anycoder-53c8a95b
Running

App Files Community
ASDAD34 commited on
Commit
bf793a1
·
verified ·
1 Parent(s): 5967c95

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +623 -19
index.html CHANGED
@@ -1,19 +1,623 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="tr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Flux Browser</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
9
+ <style>
10
+ body {
11
+ font-family: 'Inter', sans-serif;
12
+ background-color: #0f172a; /* Slate 900 */
13
+ overflow: hidden; /* Prevent body scroll, handle in app */
14
+ user-select: none; /* App-like feel */
15
+ }
16
+
17
+ /* Custom Scrollbar */
18
+ ::-webkit-scrollbar {
19
+ width: 8px;
20
+ height: 8px;
21
+ }
22
+ ::-webkit-scrollbar-track {
23
+ background: transparent;
24
+ }
25
+ ::-webkit-scrollbar-thumb {
26
+ background: #334155;
27
+ border-radius: 4px;
28
+ }
29
+ ::-webkit-scrollbar-thumb:hover {
30
+ background: #475569;
31
+ }
32
+
33
+ /* Glassmorphism Utilities */
34
+ .glass {
35
+ background: rgba(30, 41, 59, 0.7);
36
+ backdrop-filter: blur(12px);
37
+ -webkit-backdrop-filter: blur(12px);
38
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
39
+ }
40
+
41
+ .glass-panel {
42
+ background: rgba(15, 23, 42, 0.95);
43
+ backdrop-filter: blur(20px);
44
+ border: 1px solid rgba(255, 255, 255, 0.1);
45
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
46
+ }
47
+
48
+ /* Tab Animations */
49
+ .tab-item {
50
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
51
+ }
52
+ .tab-item.active {
53
+ background: rgba(255, 255, 255, 0.1);
54
+ }
55
+ .tab-item:hover:not(.active) {
56
+ background: rgba(255, 255, 255, 0.05);
57
+ }
58
+
59
+ /* Address Bar Focus */
60
+ .address-bar:focus-within {
61
+ background: rgba(30, 41, 59, 0.9);
62
+ box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.5);
63
+ }
64
+
65
+ /* Content Fade In */
66
+ .fade-in {
67
+ animation: fadeIn 0.4s ease-out forwards;
68
+ }
69
+ @keyframes fadeIn {
70
+ from { opacity: 0; transform: translateY(10px); }
71
+ to { opacity: 1; transform: translateY(0); }
72
+ }
73
+
74
+ /* Loader */
75
+ .loader {
76
+ width: 100%;
77
+ height: 2px;
78
+ background: linear-gradient(90deg, transparent, #38bdf8, transparent);
79
+ background-size: 200% 100%;
80
+ animation: loading 1.5s infinite linear;
81
+ position: absolute;
82
+ top: 0;
83
+ left: 0;
84
+ z-index: 50;
85
+ display: none;
86
+ }
87
+ @keyframes loading {
88
+ 0% { background-position: 100% 0; }
89
+ 100% { background-position: -100% 0; }
90
+ }
91
+
92
+ /* Hide default scrollbar for clean look in webviews if we were using iframes,
93
+ but here we simulate content */
94
+ .content-area {
95
+ height: calc(100vh - 85px);
96
+ overflow-y: auto;
97
+ position: relative;
98
+ }
99
+ </style>
100
+ </head>
101
+ <body class="text-slate-200 h-screen flex flex-col">
102
+
103
+ <!-- Loading Bar -->
104
+ <div id="page-loader" class="loader"></div>
105
+
106
+ <!-- Title Bar / Header -->
107
+ <header class="glass h-[40px] flex items-center justify-between px-4 draggable">
108
+ <div class="flex items-center space-x-4 opacity-50 text-xs font-medium tracking-wide">
109
+ <span>Flux Browser</span>
110
+ </div>
111
+ <div class="flex items-center space-x-2">
112
+ <div class="w-3 h-3 rounded-full bg-red-500/80 hover:bg-red-500 transition-colors cursor-pointer"></div>
113
+ <div class="w-3 h-3 rounded-full bg-yellow-500/80 hover:bg-yellow-500 transition-colors cursor-pointer"></div>
114
+ <div class="w-3 h-3 rounded-full bg-green-500/80 hover:bg-green-500 transition-colors cursor-pointer"></div>
115
+ </div>
116
+ </header>
117
+
118
+ <!-- Toolbar & Tabs Container -->
119
+ <div class="flex flex-col bg-slate-900/80 border-b border-slate-800">
120
+
121
+ <!-- Tabs Row -->
122
+ <div class="flex items-center px-2 pt-2 space-x-1 overflow-x-auto no-scrollbar" id="tabs-container">
123
+ <!-- Tabs injected via JS -->
124
+ <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">
125
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
126
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
127
+ </svg>
128
+ </button>
129
+ </div>
130
+
131
+ <!-- Navigation Row -->
132
+ <div class="flex items-center px-3 py-2 space-x-3">
133
+ <!-- Nav Controls -->
134
+ <div class="flex items-center space-x-1 text-slate-400">
135
+ <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">
136
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
137
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
138
+ </svg>
139
+ </button>
140
+ <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">
141
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
142
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
143
+ </svg>
144
+ </button>
145
+ <button onclick="app.refresh()" class="p-1.5 rounded-full hover:bg-slate-800 hover:text-white transition-colors">
146
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
147
+ <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" />
148
+ </svg>
149
+ </button>
150
+ </div>
151
+
152
+ <!-- Address Bar -->
153
+ <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">
154
+ <div class="text-slate-500 mr-2">
155
+ <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">
156
+ <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" />
157
+ </svg>
158
+ </div>
159
+ <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">
160
+ <div class="text-slate-500 hover:text-slate-300 cursor-pointer">
161
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
162
+ <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" />
163
+ </svg>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Extensions/Profile -->
168
+ <div class="flex items-center space-x-2 text-slate-400">
169
+ <button class="p-1.5 rounded-full hover:bg-slate-800 hover:text-white transition-colors relative">
170
+ <div class="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full border-2 border-slate-900"></div>
171
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
172
+ <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" />
173
+ </svg>
174
+ </button>
175
+ <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">
176
+ A
177
+ </button>
178
+ </div>
179
+ </div>
180
+ </div>
181
+
182
+ <!-- Main Content Area -->
183
+ <main id="main-view" class="flex-1 bg-slate-900 relative overflow-hidden">
184
+ <!-- Content injected via JS -->
185
+ </main>
186
+
187
+ <!-- Footer Status Bar -->
188
+ <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">
189
+ <div class="flex items-center space-x-3">
190
+ <span id="status-text">Bağlantı güvenli</span>
191
+ </div>
192
+ <div class="flex items-center space-x-3">
193
+ <span>Flux v2.4.0</span>
194
+ <span class="flex items-center gap-1"><div class="w-1.5 h-1.5 rounded-full bg-green-500"></div> 12ms</span>
195
+ </div>
196
+ </footer>
197
+
198
+ <!-- JavaScript Application Logic -->
199
+ <script>
200
+ /**
201
+ * Flux Browser Core Logic
202
+ * Simulates a browser environment using DOM manipulation.
203
+ */
204
+ const app = (() => {
205
+ // State
206
+ let tabs = [];
207
+ let activeTabId = null;
208
+ let tabCounter = 0;
209
+
210
+ // DOM Elements
211
+ const els = {
212
+ tabsContainer: document.getElementById('tabs-container'),
213
+ mainView: document.getElementById('main-view'),
214
+ urlInput: document.getElementById('url-input'),
215
+ loader: document.getElementById('page-loader'),
216
+ btnBack: document.getElementById('btn-back'),
217
+ btnForward: document.getElementById('btn-forward'),
218
+ statusText: document.getElementById('status-text')
219
+ };
220
+
221
+ // Mock Data for Simulation
222
+ const mockData = {
223
+ 'google.com': {
224
+ title: 'Google',
225
+ content: `
226
+ <div class="flex flex-col items-center justify-center h-full w-full bg-[#202124] text-white">
227
+ <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>
228
+ <div class="w-full max-w-xl relative">
229
+ <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
230
+ <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>
231
+ </div>
232
+ <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">
233
+ <div class="absolute inset-y-0 right-0 pr-4 flex items-center">
234
+ <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>
235
+ </div>
236
+ </div>
237
+ <div class="mt-8 flex space-x-4">
238
+ <button class="bg-[#303134] border border-[#303134] hover:border-[#5f6368] px-4 py-2 rounded text-sm text-[#e8eaed]">Google'da Ara</button>
239
+ <button class="bg-[#303134] border border-[#303134] hover:border-[#5f6368] px-4 py-2 rounded text-sm text-[#e8eaed]">Kendimi Şanslı Hissediyorum</button>
240
+ </div>
241
+ <div class="mt-8 text-sm text-[#9aa0a6]">Google'ı kullanabileceğiniz diğer diller: <a href="#" class="text-[#8ab4f8] hover:underline">English</a></div>
242
+ </div>
243
+ `
244
+ },
245
+ 'github.com': {
246
+ title: 'GitHub',
247
+ content: `
248
+ <div class="flex flex-col h-full w-full bg-[#0d1117] text-[#c9d1d9] overflow-y-auto">
249
+ <div class="border-b border-[#30363d] bg-[#161b22] px-8 py-4 flex items-center justify-between">
250
+ <div class="flex items-center space-x-4">
251
+ <svg height="32" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32" data-view-component="true" fill="white">
252
+ <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>
253
+ </svg>
254
+ <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...">
255
+ </div>
256
+ <div class="flex items-center space-x-4 text-sm font-semibold">
257
+ <a href="#" class="hover:text-slate-300">Pull requests</a>
258
+ <a href="#" class="hover:text-slate-300">Issues</a>
259
+ <a href="#" class="hover:text-slate-300">Codespaces</a>
260
+ <a href="#" class="hover:text-slate-300">Marketplace</a>
261
+ <a href="#" class="hover:text-slate-300">Explore</a>
262
+ </div>
263
+ </div>
264
+ <div class="max-w-6xl mx-auto w-full mt-8 px-4">
265
+ <div class="flex items-center justify-between mb-6">
266
+ <h2 class="text-xl font-normal">Home</h2>
267
+ <div class="flex space-x-2">
268
+ <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>
269
+ </div>
270
+ </div>
271
+ <div class="grid grid-cols-3 gap-4">
272
+ <div class="col-span-2 space-y-4">
273
+ <div class="border border-[#30363d] rounded-md p-4 bg-[#161b22]">
274
+ <div class="flex items-center mb-2">
275
+ <div class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-400 to-emerald-400 mr-2"></div>
276
+ <div>
277
+ <div class="text-sm font-semibold">akhaliq <span class="font-normal text-slate-400">created a repository</span></div>
278
+ <div class="text-xs text-slate-500">2 hours ago</div>
279
+ </div>
280
+ </div>
281
+ <div class="border border-[#30363d] rounded p-3 bg-[#0d1117]">
282
+ <div class="font-bold text-blue-400 text-sm">akhaliq/anycoder</div>
283
+ <div class="text-xs text-slate-400 mt-1">AI powered coding assistant</div>
284
+ <div class="flex items-center mt-3 space-x-4 text-xs text-slate-500">
285
+ <span class="flex items-center"><span class="w-2 h-2 rounded-full bg-yellow-400 mr-1"></span> Python</span>
286
+ <span>⭐ 1.2k</span>
287
+ </div>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ <div class="col-span-1">
292
+ <div class="border border-[#30363d] rounded-md p-4 bg-[#161b22]">
293
+ <h3 class="text-sm font-semibold mb-3">Latest changes</h3>
294
+ <ul class="text-xs space-y-3 text-slate-400">
295
+ <li>3 hours ago — GitHub Actions: New runner images</li>
296
+ <li>5 hours ago — Security Advisory: Critical patch</li>
297
+ </ul>
298
+ </div>
299
+ </div>
300
+ </div>
301
+ </div>
302
+ </div>
303
+ `
304
+ },
305
+ 'youtube.com': {
306
+ title: 'YouTube',
307
+ content: `
308
+ <div class="flex h-full w-full bg-[#0f0f0f] text-white overflow-hidden">
309
+ <div class="w-20 flex flex-col items-center py-4 space-y-6 bg-[#0f0f0f]">
310
+ <div class="flex flex-col items-center cursor-pointer group">
311
+ <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>
312
+ <span class="text-[10px] group-hover:text-white text-slate-400">Ana Sayfa</span>
313
+ </div>
314
+ <div class="flex flex-col items-center cursor-pointer group">
315
+ <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>
316
+ <span class="text-[10px] group-hover:text-white text-slate-400">Ke��fet</span>
317
+ </div>
318
+ <div class="flex flex-col items-center cursor-pointer group">
319
+ <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>
320
+ <span class="text-[10px] group-hover:text-white text-slate-400">Shorts</span>
321
+ </div>
322
+ </div>
323
+ <div class="flex-1 overflow-y-auto p-6">
324
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
325
+ ${Array(8).fill(0).map((_, i) => `
326
+ <div class="flex flex-col cursor-pointer group">
327
+ <div class="aspect-video bg-slate-800 rounded-xl overflow-hidden relative mb-2">
328
+ <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">
329
+ <div class="absolute bottom-1 right-1 bg-black/80 text-xs px-1 rounded">10:0${i}</div>
330
+ </div>
331
+ <div class="flex space-x-3">
332
+ <div class="w-9 h-9 rounded-full bg-slate-700 overflow-hidden flex-shrink-0">
333
+ <img src="https://picsum.photos/seed/${i+20}/100/100" class="w-full h-full">
334
+ </div>
335
+ <div>
336
+ <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>
337
+ <div class="text-xs text-slate-400">Kanal Adı</div>
338
+ <div class="text-xs text-slate-400">1${i}B görüntüleme • 1 gün önce</div>
339
+ </div>
340
+ </div>
341
+ </div>
342
+ `).join('')}
343
+ </div>
344
+ </div>
345
+ </div>
346
+ `
347
+ },
348
+ 'weather.com': {
349
+ title: 'Hava Durumu',
350
+ content: `
351
+ <div class="h-full w-full bg-gradient-to-br from-blue-400 to-blue-600 text-white p-8 overflow-y-auto">
352
+ <div class="max-w-4xl mx-auto">
353
+ <div class="flex justify-between items-end mb-8">
354
+ <div>
355
+ <h1 class="text-4xl font-light">İstanbul</h1>
356
+ <p class="text-blue-100">Salı 14:30</p>
357
+ </div>
358
+ <div class="text-right">
359
+ <div class="text-6xl font-light">24°</div>
360
+ <div class="text-xl">Parçalı Bulutlu</div>
361
+ </div>
362
+ </div>
363
+
364
+ <div class="bg-white/20 backdrop-blur-md rounded-2xl p-6 mb-6 shadow-lg">
365
+ <h3 class="text-sm font-semibold mb-4 uppercase tracking-wider text-blue-50">Saatlik Tahmin</h3>
366
+ <div class="flex justify-between overflow-x-auto pb-2 space-x-8">
367
+ ${['14:00', '15:00', '16:00', '17:00', '18:00', '19:00'].map(t => `
368
+ <div class="flex flex-col items-center min-w-[40px]">
369
+ <span class="text-sm mb-2">${t}</span>
370
+ <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>
371
+ <span class="font-bold">${Math.floor(Math.random() * 5) + 22}°</span>
372
+ </div>
373
+ `).join('')}
374
+ </div>
375
+ </div>
376
+
377
+ <div class="grid grid-cols-2 gap-4">
378
+ <div class="bg-white/20 backdrop-blur-md rounded-2xl p-4">
379
+ <div class="text-sm text-blue-100 mb-1">Nem</div>
380
+ <div class="text-2xl font-semibold">%65</div>
381
+ </div>
382
+ <div class="bg-white/20 backdrop-blur-md rounded-2xl p-4">
383
+ <div class="text-sm text-blue-100 mb-1">Rüzgar</div>
384
+ <div class="text-2xl font-semibold">12 km/s</div>
385
+ </div>
386
+ </div>
387
+ </div>
388
+ </div>
389
+ `
390
+ }
391
+ };
392
+
393
+ // --- Core Functions ---
394
+
395
+ function init() {
396
+ // Event Listeners
397
+ els.urlInput.addEventListener('keydown', (e) => {
398
+ if (e.key === 'Enter') {
399
+ navigateTo(els.urlInput.value);
400
+ }
401
+ });
402
+
403
+ // Start with a new tab
404
+ newTab();
405
+ }
406
+
407
+ function createTabElement(tab) {
408
+ const div = document.createElement('div');
409
+ 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'}`;
410
+ div.onclick = (e) => {
411
+ if(!e.target.closest('.close-btn')) switchTab(tab.id);
412
+ };
413
+
414
+ // Favicon (simulated with a colored circle)
415
+ const faviconColor = tab.url.includes('google') ? 'bg-blue-500' :
416
+ tab.url.includes('github') ? 'bg-gray-200' :
417
+ tab.url.includes('youtube') ? 'bg-red-600' : 'bg-slate-500';
418
+
419
+ const favicon = `<div class="w-3 h-3 rounded-full ${faviconColor} mr-2 flex-shrink-0"></div>`;
420
+
421
+ const title = `<span class="truncate text-xs flex-1 text-slate-300 group-hover:text-slate-200">${tab.title}</span>`;
422
+
423
+ const closeBtn = `
424
+ <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">
425
+ <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>
426
+ </button>
427
+ `;
428
+
429
+ div.innerHTML = favicon + title + closeBtn;
430
+ return div;
431
+ }
432
+
433
+ function renderTabs() {
434
+ // Clear current tabs (except the + button which is last)
435
+ const addBtn = els.tabsContainer.lastElementChild;
436
+ els.tabsContainer.innerHTML = '';
437
+
438
+ tabs.forEach(tab => {
439
+ els.tabsContainer.appendChild(createTabElement(tab));
440
+ });
441
+
442
+ els.tabsContainer.appendChild(addBtn);
443
+ }
444
+
445
+ function renderContent() {
446
+ const tab = tabs.find(t => t.id === activeTabId);
447
+ if (!tab) return;
448
+
449
+ // Show loader
450
+ els.loader.style.display = 'block';
451
+ els.statusText.innerText = `Bağlanılıyor... ${tab.url}`;
452
+
453
+ // Simulate network delay
454
+ setTimeout(() => {
455
+ els.loader.style.display = 'none';
456
+ els.statusText.innerText = 'Tamamlandı';
457
+
458
+ // Generate Content
459
+ let contentHtml = '';
460
+
461
+ // Check if URL matches mock data
462
+ const domain = tab.url.replace(/^https?:\/\//, '').replace(/\/$/, '');
463
+ if (mockData[domain]) {
464
+ contentHtml = mockData[domain].content;
465
+ tab.title = mockData[domain].title;
466
+ } else {
467
+ // Generic 404 / Search Page
468
+ contentHtml = `
469
+ <div class="flex flex-col items-center justify-center h-full w-full bg-slate-900 text-slate-300">
470
+ <div class="w-24 h-24 bg-slate-800 rounded-full flex items-center justify-center mb-6 text-4xl">🌐</div>
471
+ <h2 class="text-2xl font-bold mb-2">Siteye erişilemiyor</h2>
472
+ <p class="text-slate-500 mb-6 max-w-md text-center">
473
+ "${tab.url}" adresine ulaşılamıyor veya bu uygulama tarafından desteklenmiyor.
474
+ <br><br>
475
+ <span class="text-xs text-slate-600">(Bu bir simülasyondur. Gerçek internet siteleri yüklenmez.)</span>
476
+ </p>
477
+ <div class="grid grid-cols-2 gap-4 w-full max-w-md">
478
+ <button onclick="app.navigateTo('google.com')" class="p-4 bg-slate-800 rounded hover:bg-slate-700 flex flex-col items-center transition-colors">
479
+ <span class="text-2xl mb-2">🔍</span>
480
+ <span class="text-sm">Google</span>
481
+ </button>
482
+ <button onclick="app.navigateTo('github.com')" class="p-4 bg-slate-800 rounded hover:bg-slate-700 flex flex-col items-center transition-colors">
483
+ <span class="text-2xl mb-2">💻</span>
484
+ <span class="text-sm">GitHub</span>
485
+ </button>
486
+ <button onclick="app.navigateTo('youtube.com')" class="p-4 bg-slate-800 rounded hover:bg-slate-700 flex flex-col items-center transition-colors">
487
+ <span class="text-2xl mb-2">🎬</span>
488
+ <span class="text-sm">YouTube</span>
489
+ </button>
490
+ <button onclick="app.navigateTo('weather.com')" class="p-4 bg-slate-800 rounded hover:bg-slate-700 flex flex-col items-center transition-colors">
491
+ <span class="text-2xl mb-2">☀️</span>
492
+ <span class="text-sm">Hava Durumu</span>
493
+ </button>
494
+ </div>
495
+ </div>
496
+ `;
497
+ }
498
+
499
+ els.mainView.innerHTML = `<div class="fade-in h-full w-full">${contentHtml}</div>`;
500
+ els.urlInput.value = tab.url;
501
+
502
+ // Update Tab Title in UI
503
+ renderTabs();
504
+
505
+ // Update Nav Buttons
506
+ updateNavButtons();
507
+
508
+ }, 600); // 600ms fake delay
509
+ }
510
+
511
+ function updateNavButtons() {
512
+ const tab = tabs.find(t => t.id === activeTabId);
513
+ if(tab) {
514
+ els.btnBack.disabled = tab.historyIndex <= 0;
515
+ els.btnForward.disabled = tab.historyIndex >= tab.history.length - 1;
516
+
517
+ // Opacity handling for disabled state via Tailwind classes
518
+ els.btnBack.style.opacity = els.btnBack.disabled ? '0.3' : '1';
519
+ els.btnForward.style.opacity = els.btnForward.disabled ? '0.3' : '1';
520
+ }
521
+ }
522
+
523
+ // --- Public Methods ---
524
+
525
+ function newTab(url = 'flux://newtab') {
526
+ tabCounter++;
527
+ const newTab = {
528
+ id: tabCounter,
529
+ url: url,
530
+ title: 'Yeni Sekme',
531
+ history: [url],
532
+ historyIndex: 0
533
+ };
534
+ tabs.push(newTab);
535
+ switchTab(tabCounter);
536
+ }
537
+
538
+ function closeTab(id) {
539
+ tabs = tabs.filter(t => t.id !== id);
540
+ if (tabs.length === 0) {
541
+ newTab();
542
+ } else if (activeTabId === id) {
543
+ switchTab(tabs[tabs.length - 1].id);
544
+ } else {
545
+ renderTabs();
546
+ }
547
+ }
548
+
549
+ function switchTab(id) {
550
+ activeTabId = id;
551
+ renderTabs();
552
+ renderContent();
553
+ }
554
+
555
+ function navigateTo(url) {
556
+ const tab = tabs.find(t => t.id === activeTabId);
557
+ if (!tab) return;
558
+
559
+ // Format URL
560
+ if (!url.includes('://') && !url.startsWith('flux://')) {
561
+ if (url.includes('.') && !url.includes(' ')) {
562
+ url = 'https://' + url;
563
+ } else {
564
+ url = 'https://google.com/search?q=' + encodeURIComponent(url);
565
+ }
566
+ }
567
+
568
+ // Update History
569
+ // Remove forward history if we navigate from middle of stack
570
+ if (tab.historyIndex < tab.history.length - 1) {
571
+ tab.history = tab.history.slice(0, tab.historyIndex + 1);
572
+ }
573
+
574
+ tab.history.push(url);
575
+ tab.historyIndex++;
576
+
577
+ tab.url = url;
578
+ renderContent();
579
+ }
580
+
581
+ function goBack() {
582
+ const tab = tabs.find(t => t.id === activeTabId);
583
+ if (tab && tab.historyIndex > 0) {
584
+ tab.historyIndex--;
585
+ tab.url = tab.history[tab.historyIndex];
586
+ renderContent();
587
+ }
588
+ }
589
+
590
+ function goForward() {
591
+ const tab = tabs.find(t => t.id === activeTabId);
592
+ if (tab && tab.historyIndex < tab.history.length - 1) {
593
+ tab.historyIndex++;
594
+ tab.url = tab.history[tab.historyIndex];
595
+ renderContent();
596
+ }
597
+ }
598
+
599
+ function refresh() {
600
+ renderContent();
601
+ }
602
+
603
+ // Expose public API
604
+ return {
605
+ init,
606
+ newTab,
607
+ closeTab,
608
+ switchTab,
609
+ navigateTo,
610
+ goBack,
611
+ goForward,
612
+ refresh
613
+ };
614
+ })();
615
+
616
+ // Initialize App on Load
617
+ document.addEventListener('DOMContentLoaded', () => {
618
+ app.init();
619
+ });
620
+
621
+ </script>
622
+ </body>
623
+ </html>