Spaces:

tuhbooh
/

HuggingSearch

Running

App Files Files Community

tuhbooh commited on Jan 29

Commit

d5814df

verified ·

1 Parent(s): 6c21271

Update index.html

Browse files

Files changed (1) hide show

index.html +220 -251

index.html CHANGED Viewed

@@ -3,296 +3,265 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>HuggingSearch - Thông tin bao quát & Multimedia Results</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>
         :root {
-            --bg-dark: #0f172a;
-            --surface-dark: #1e293b;
-            --accent: #fcd34d;
-            --text-main: #f8fafc;
-            --text-muted: #94a3b8;
-            --border: #334155;
-            --link-color: #38bdf8;
-            --url-color: #4ade80;
         }
         body {
-            background-color: var(--bg-dark);
-            color: var(--text-main);
-            font-family: 'Inter', system-ui, sans-serif;
         }
-        .search-input:focus { box-shadow: 0 0 0 2px var(--accent); }
-        .result-card:hover .result-title { text-decoration: underline; }
-        ::-webkit-scrollbar { width: 8px; }
-        ::-webkit-scrollbar-track { background: var(--bg-dark); }
-        ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
-        .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
-        .tab-btn.active { border-bottom: 2px solid var(--accent); color: var(--accent); }
-        .animate-fadeIn { animation: fadeIn 0.4s ease-out forwards; }
-        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-        .ai-summary-box {
-            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
-            border: 1px solid #fbbf2433;
         }
-        .image-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-            gap: 12px;
         }
-        .image-item {
-            aspect-ratio: 1/1;
             position: relative;
-            overflow: hidden;
-            border-radius: 12px;
-            background: var(--surface-dark);
-            border: 1px solid var(--border);
-            transition: transform 0.2s;
         }
-        .image-item:hover { transform: scale(1.03); border-color: var(--accent); }
-        .image-item img { width: 100%; height: 100%; object-fit: cover; }
     </style>
 </head>
-<body class="flex flex-col h-screen overflow-hidden">
-    <!-- Header -->
-    <header class="border-b border-[var(--border)] bg-[var(--bg-dark)] px-4 py-3 flex items-center justify-between z-10">
-        <div class="flex items-center gap-6 w-full max-w-6xl">
-            <div class="flex items-center gap-2 cursor-pointer" onclick="window.location.reload()">
-                <div class="text-3xl">🤗</div>
-                <span class="font-bold text-xl hidden md:block tracking-tight text-white">Hugging<span class="text-[var(--accent)]">Search</span></span>
             </div>
-            <div class="flex-1 max-w-3xl relative">
                 <input
                     type="text"
-                    id="searchInput"
-                    placeholder="Tìm ảnh, video hoặc tin tức..."
-                    class="w-full bg-[var(--surface-dark)] border border-[var(--border)] rounded-full py-2.5 px-6 pr-12 outline-none search-input text-sm transition-all text-white"
                 >
-                <button id="searchButton" class="absolute right-4 top-2.5 text-[var(--text-muted)] hover:text-[var(--accent)]">
-                    <i class="fas fa-search"></i>
                 </button>
             </div>
-        </div>
-        <div class="flex items-center gap-4 ml-4 text-[var(--text-muted)]">
-            <span class="text-[10px] font-bold uppercase tracking-widest bg-amber-900/40 text-amber-400 px-2 py-1 rounded border border-amber-800/50">Multimedia v3.1</span>
         </div>
     </header>
-    <!-- Tabs -->
-    <div class="border-b border-[var(--border)] px-4 md:px-32 bg-[var(--bg-dark)] flex items-center text-sm overflow-x-auto whitespace-nowrap">
-        <div class="flex gap-6 h-12 items-center" id="tabContainer">
-            <button class="tab-btn active h-full px-2" data-type="all">Tất cả</button>
-            <button class="tab-btn text-[var(--text-muted)] hover:text-white h-full px-2" data-type="images">Hình ảnh</button>
-            <button class="tab-btn text-[var(--text-muted)] hover:text-white h-full px-2" data-type="videos">Video</button>
-            <button class="tab-btn text-[var(--text-muted)] hover:text-white h-full px-2" data-type="news">Tin tức</button>
         </div>
-    </div>
-    <!-- Main Content -->
-    <div class="flex flex-1 overflow-hidden">
-        <main class="flex-1 overflow-y-auto p-4 md:px-12 lg:px-32">
-            <div id="loading" class="hidden py-20 text-center">
-                <div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-[var(--accent)] border-r-2 border-transparent"></div>
-                <p id="loadingText" class="mt-4 text-sm text-[var(--text-muted)] italic">Đang bóc tách dữ liệu tìm kiếm...</p>
             </div>
-            <div id="resultsArea" class="max-w-4xl space-y-8 py-6">
-                <!-- Welcome Screen -->
-                <div id="welcome" class="py-20 text-center">
-                    <div class="text-6xl mb-6">🤗</div>
-                    <h2 class="text-3xl font-bold mb-2 text-white">HuggingSearch</h2>
-                    <p class="text-[var(--text-muted)] text-sm max-w-md mx-auto">Hệ thống tìm kiếm thông tin bao quát và kết quả đa phương tiện trực quan.</p>
                 </div>
             </div>
-        </main>
-    </div>
     <script>
-        (function() {
-            const searchInput = document.getElementById('searchInput');
-            const searchButton = document.getElementById('searchButton');
-            const resultsArea = document.getElementById('resultsArea');
-            const loading = document.getElementById('loading');
-            const welcome = document.getElementById('welcome');
-            const tabButtons = document.querySelectorAll('.tab-btn');
-            let currentType = 'all';
-            tabButtons.forEach(btn => {
-                btn.addEventListener('click', () => {
-                    tabButtons.forEach(b => b.classList.remove('active', 'text-[var(--accent)]'));
-                    btn.classList.add('active', 'text-[var(--accent)]');
-                    currentType = btn.getAttribute('data-type');
-                    performSearch();
-                });
-            });
-            searchInput.addEventListener('keypress', (e) => {
-                if (e.key === 'Enter') performSearch();
-            });
-            searchButton.addEventListener('click', () => performSearch());
-            function cleanDDGUrl(url) {
-                try {
-                    if (!url) return "#";
-                    if (url.includes('duckduckgo.com/l/?')) {
-                        const urlObj = new URL('https:' + (url.startsWith('http') ? '' : 'https:') + url);
-                        const uddg = urlObj.searchParams.get('uddg');
-                        if (uddg) return decodeURIComponent(uddg);
-                    }
-                    if (url.startsWith('//')) return 'https:' + url;
-                    if (url.startsWith('/')) return 'https://duckduckgo.com' + url;
-                    return url;
-                } catch (e) {
-                    return url;
-                }
             }
-            async function performSearch() {
-                const query = searchInput.value.trim();
-                if (!query) return;
-                if (welcome) welcome.style.display = 'none';
-                resultsArea.innerHTML = '';
-                loading.classList.remove('hidden');
-                let searchQuery = query;
-                if (currentType === 'images') searchQuery += " site:pinterest.com OR site:unsplash.com OR site:pixabay.com";
-                if (currentType === 'videos') searchQuery += " site:youtube.com OR site:vimeo.com";
-                const targetUrl = "https://duckduckgo.com/html/?q=" + encodeURIComponent(searchQuery);
-                try {
-                    const response = await fetch("https://api.allorigins.win/get?url=" + encodeURIComponent(targetUrl));
-                    const data = await response.json();
-                    const parser = new DOMParser();
-                    const doc = parser.parseFromString(data.contents, 'text/html');
-                    const results = Array.from(doc.querySelectorAll('.result'));
-                    if (results.length === 0) {
-                        resultsArea.innerHTML = '<p class="text-center py-10 text-zinc-500">Không tìm thấy dữ liệu phù hợp.</p>';
-                    } else {
-                        if (currentType === 'images') renderImages(results);
-                        else if (currentType === 'videos') renderVideos(results);
-                        else renderAll(results, query);
-                    }
-                } catch (error) {
-                    resultsArea.innerHTML = '<p class="text-red-400 text-center py-10">Lỗi kết nối Proxy. Vui lòng kiểm tra lại đường truyền.</p>';
-                } finally {
-                    loading.classList.add('hidden');
-                }
-            }
-            function renderImages(results) {
-                let html = '<div class="image-grid animate-fadeIn">';
-                results.forEach((res) => {
-                    const aTag = res.querySelector('.result__a');
-                    if (!aTag) return;
-                    const link = cleanDDGUrl(aTag.getAttribute('href'));
-                    let domain = "web";
-                    try { domain = new URL(link).hostname; } catch(e) {}
-                    const screenshotUrl = "https://api.microlink.io/?url=" + encodeURIComponent(link) + "&screenshot=true&embed=screenshot.url";
-                    html += `
-                        <a href="${link}" target="_blank" class="image-item group">
-                            <img src="${screenshotUrl}"
-                                 onerror="this.src='https://via.placeholder.com/300?text=${domain}'"
-                                 loading="lazy">
-                            <div class="absolute bottom-0 left-0 right-0 p-2 bg-black/60 text-[10px] truncate opacity-0 group-hover:opacity-100 transition-opacity">
-                                ${domain}
-                            </div>
-                        </a>
-                    `;
-                });
-                html += '</div>';
-                resultsArea.innerHTML = html;
-            }
-            function renderVideos(results) {
-                let html = '<div class="space-y-6 animate-fadeIn">';
-                results.forEach((res) => {
-                    const aTag = res.querySelector('.result__a');
-                    if (!aTag) return;
-                    const title = aTag.textContent;
-                    const link = cleanDDGUrl(aTag.getAttribute('href'));
-                    const snippetNode = res.querySelector('.result__snippet');
-                    const desc = snippetNode ? snippetNode.textContent : "";
-                    let domain = "web";
-                    try { domain = new URL(link).hostname; } catch(e) {}
-                    const screenshotUrl = "https://api.microlink.io/?url=" + encodeURIComponent(link) + "&screenshot=true&embed=screenshot.url";
-                    html += `
-                        <div class="flex flex-col md:flex-row gap-4 p-4 rounded-2xl bg-[var(--surface-dark)] border border-[var(--border)] hover:border-[var(--accent)] transition-all">
-                            <div class="w-full md:w-48 aspect-video rounded-lg overflow-hidden bg-black flex-shrink-0">
-                                <img src="${screenshotUrl}"
-                                     class="w-full h-full object-cover"
-                                     onerror="this.parentElement.innerHTML='<div class=\'w-full h-full flex items-center justify-center\'><i class=\'fas fa-play text-2xl text-zinc-700\'></i></div>'">
-                            </div>
-                            <div class="flex-1">
-                                <div class="text-[10px] text-[var(--url-color)] mb-1 uppercase font-bold tracking-widest">${domain}</div>
-                                <a href="${link}" target="_blank" class="block mb-2 text-lg font-bold text-[var(--link-color)] hover:underline line-clamp-1">${title}</a>
-                                <p class="text-sm text-[var(--text-muted)] line-clamp-2">${desc}</p>
-                            </div>
-                        </div>
-                    `;
-                });
-                html += '</div>';
-                resultsArea.innerHTML = html;
-            }
-            function renderAll(results, query) {
-                let html = '';
-                const first = results[0];
-                if (first) {
-                    const firstATag = first.querySelector('.result__a');
-                    const firstSnippet = first.querySelector('.result__snippet');
-                    html += `
-                        <div class="ai-summary-box p-6 rounded-2xl animate-fadeIn mb-8">
-                            <div class="text-[var(--accent)] text-[10px] font-bold uppercase mb-2 tracking-widest flex items-center gap-2">
-                                <i class="fas fa-magic"></i> Thông tin bao quát
-                            </div>
-                            <h2 class="text-xl font-bold mb-2">${firstATag ? firstATag.textContent : query}</h2>
-                            <p class="text-sm text-zinc-300 leading-relaxed">${firstSnippet ? firstSnippet.textContent : ""}</p>
-                        </div>
-                    `;
                 }
-                results.forEach((res, i) => {
-                    const titleNode = res.querySelector('.result__a');
-                    if (!titleNode) return;
-                    const title = titleNode.textContent;
-                    const link = cleanDDGUrl(titleNode.getAttribute('href'));
-                    const snippetNode = res.querySelector('.result__snippet');
-                    const desc = snippetNode ? snippetNode.textContent : "";
-                    let domain = "web";
-                    try { domain = new URL(link).hostname; } catch(e) {}
-                    html += `
-                        <div class="result-card group animate-fadeIn" style="animation-delay: ${i*0.05}s">
-                            <div class="flex items-center gap-2 mb-1">
-                                <img src="https://www.google.com/s2/favicons?domain=${domain}&sz=32" class="w-3.5 h-3.5" alt="icon">
-                                <span class="text-[11px] text-[var(--url-color)] font-medium">${domain}</span>
-                            </div>
-                            <a href="${link}" target="_blank" class="block group">
-                                <h3 class="result-title text-[18px] text-[var(--link-color)] mb-1 leading-tight font-semibold">${title}</h3>
-                            </a>
-                            <p class="text-[13px] text-[var(--text-muted)] leading-relaxed line-clamp-2">${desc}</p>
-                        </div>
-                    `;
-                });
-                resultsArea.innerHTML = html;
             }
-        })();
     </script>
 </body>
-</html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Wiki Glass Dark Reader</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Lora:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
     <style>
         :root {
+            --glass-bg: rgba(25, 25, 25, 0.65);
+            --glass-border: rgba(255, 255, 255, 0.08);
+            --accent-blue: #3b82f6;
         }
         body {
+            background: radial-gradient(circle at top right, #1e293b, #0f172a, #020617);
+            color: #e2e8f0;
+            font-family: 'Inter', sans-serif;
+            min-height: 100vh;
+            overflow-x: hidden;
+        }
+        .glass {
+            background: var(--glass-bg);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border: 1px solid var(--glass-border);
         }
+        .wiki-content-area {
+            line-height: 1.8;
+            font-size: 1.125rem;
         }
+        .wiki-content-area h2 {
+            font-size: 1.75rem;
+            font-weight: 700;
+            margin-top: 2.5rem;
+            margin-bottom: 1.25rem;
+            color: #f8fafc;
+            border-bottom: 1px solid var(--glass-border);
+            padding-bottom: 0.5rem;
         }
+        .wiki-content-area p {
+            margin-bottom: 1.5rem;
+            color: #cbd5e1;
+        }
+        .wiki-content-area b, .wiki-content-area strong {
+            color: #f1f5f9;
+            font-weight: 600;
+        }
+        .wiki-content-area ul {
+            list-style-type: none;
+            padding-left: 1rem;
+            margin-bottom: 1.5rem;
+        }
+        .wiki-content-area li {
             position: relative;
+            padding-left: 1.5rem;
+            margin-bottom: 0.75rem;
+        }
+        .wiki-content-area li::before {
+            content: "•";
+            color: var(--accent-blue);
+            position: absolute;
+            left: 0;
+            font-weight: bold;
         }
+        .search-input {
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid var(--glass-border);
+            transition: all 0.3s ease;
+        }
+        .search-input:focus {
+            background: rgba(255, 255, 255, 0.1);
+            border-color: var(--accent-blue);
+            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
+        }
+        .font-serif { font-family: 'Lora', serif; }
+        .font-sans { font-family: 'Inter', sans-serif; }
+        .image-shimmer {
+            background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
+            background-size: 200% 100%;
+            animation: shimmer 2s infinite;
+        }
+        @keyframes shimmer {
+            0% { background-position: 200% 0; }
+            100% { background-position: -200% 0; }
+        }
+        .custom-scroll::-webkit-scrollbar { width: 8px; }
+        .custom-scroll::-webkit-scrollbar-track { background: transparent; }
+        .custom-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 4px; }
+        .custom-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }
     </style>
 </head>
+<body class="custom-scroll">
+    <!-- Sticky Header -->
+    <header class="glass sticky top-0 z-50 px-6 py-4">
+        <div class="max-w-5xl mx-auto flex flex-col sm:flex-row items-center gap-6">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-900/20">
+                    <svg class="text-white w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332-4.5-1.253"></path></svg>
+                </div>
+                <h1 class="text-xl font-extrabold tracking-tighter text-white">WIKI<span class="text-blue-500">GLASS</span></h1>
             </div>
+            <div class="relative flex-1 w-full max-w-2xl">
                 <input
                     type="text"
+                    id="searchQuery"
+                    placeholder="Tìm kiếm kiến thức..."
+                    class="search-input w-full py-3 px-5 rounded-2xl outline-none text-white placeholder-gray-500"
+                    onkeypress="if(event.key === 'Enter') performWikiFetch()"
                 >
+                <button
+                    onclick="performWikiFetch()"
+                    class="absolute right-2 top-1.5 bottom-1.5 px-5 bg-blue-600 hover:bg-blue-500 text-white text-sm font-bold rounded-xl transition-all active:scale-95"
+                >
+                    TRA CỨU
                 </button>
             </div>
+            <div class="flex gap-2">
+                <button onclick="toggleFont()" id="fontBtn" class="p-2 rounded-lg bg-white/5 hover:bg-white/10 text-xs font-medium border border-white/10">SERIF</button>
+            </div>
         </div>
     </header>
+    <main class="max-w-4xl mx-auto px-6 py-12">
+        <!-- Loader -->
+        <div id="loader" class="hidden flex flex-col items-center justify-center py-20">
+            <div class="w-12 h-12 border-4 border-blue-500/30 border-t-blue-500 rounded-full animate-spin"></div>
+            <p class="mt-4 text-gray-400 font-medium">Đang xử lý dữ liệu Wiki...</p>
         </div>
+        <!-- Article Container -->
+        <article id="articleFrame" class="hidden">
+            <!-- Hero Image Section -->
+            <div id="heroBox" class="relative w-full h-[300px] md:h-[450px] rounded-[2rem] overflow-hidden mb-12 glass shadow-2xl hidden">
+                <img id="articleImage" src="" class="w-full h-full object-cover">
+                <div class="absolute inset-0 bg-gradient-to-t from-slate-950/80 to-transparent"></div>
             </div>
+            <div class="glass rounded-[2.5rem] p-8 md:p-16 relative overflow-hidden">
+                <div class="absolute top-0 left-0 w-32 h-32 bg-blue-600/10 blur-[80px] -z-10"></div>
+                <header class="mb-10">
+                    <div class="flex items-center gap-3 mb-4">
+                        <span class="px-3 py-1 bg-blue-500/10 text-blue-400 text-[10px] font-bold uppercase tracking-[0.2em] rounded-full border border-blue-500/20">Wikipedia Source</span>
+                        <span id="langTag" class="text-gray-500 text-[10px] font-bold uppercase">VI_VN</span>
+                    </div>
+                    <h2 id="articleTitle" class="text-4xl md:text-6xl font-extrabold text-white leading-tight"></h2>
+                </header>
+                <div id="articleContent" class="wiki-content-area font-sans">
+                    <!-- Wikipedia content injected here -->
                 </div>
+                <footer class="mt-16 pt-8 border-t border-white/5 flex flex-col sm:flex-row justify-between items-center gap-6">
+                    <p class="text-gray-500 text-sm italic">Nội dung được cung cấp theo giấy phép Creative Commons.</p>
+                    <a id="sourceUrl" href="#" target="_blank" class="flex items-center gap-2 text-blue-400 font-bold hover:text-blue-300 transition-colors">
+                        Mở liên kết gốc
+                        <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
+                    </a>
+                </footer>
             </div>
+        </article>
+        <!-- Initial Placeholder -->
+        <div id="emptyState" class="text-center py-20 opacity-40">
+            <div class="text-8xl mb-6">🔭</div>
+            <h3 class="text-2xl font-bold text-white mb-2">Trung tâm Tri thức Glass</h3>
+            <p class="max-w-xs mx-auto text-gray-400">Khám phá thế giới qua lăng kính trực quan và hiện đại.</p>
+        </div>
+    </main>
     <script>
+        let isSerif = false;
+        function toggleFont() {
+            const content = document.getElementById('articleContent');
+            const btn = document.getElementById('fontBtn');
+            isSerif = !isSerif;
+            if (isSerif) {
+                content.classList.remove('font-sans');
+                content.classList.add('font-serif');
+                btn.innerText = 'SANS';
+            } else {
+                content.classList.remove('font-serif');
+                content.classList.add('font-sans');
+                btn.innerText = 'SERIF';
             }
+        }
+        async function performWikiFetch() {
+            const query = document.getElementById('searchQuery').value.trim();
+            const loader = document.getElementById('loader');
+            const frame = document.getElementById('articleFrame');
+            const empty = document.getElementById('emptyState');
+            if (!query) return;
+            // UI Transitions
+            loader.classList.remove('hidden');
+            frame.classList.add('hidden');
+            empty.classList.add('hidden');
+            try {
+                // Search for the most relevant page
+                const sUrl = `https://vi.wikipedia.org/w/api.php?action=query&list=search&srsearch=${encodeURIComponent(query)}&format=json&origin=*`;
+                const sResp = await fetch(sUrl);
+                const sData = await sResp.json();
+                if (!sData.query.search.length) throw "Không tìm thấy dữ liệu phù hợp.";
+                const bestMatch = sData.query.search[0].title;
+                // Fetch content and high-res image
+                const cUrl = `https://vi.wikipedia.org/w/api.php?action=query&prop=extracts|pageimages&titles=${encodeURIComponent(bestMatch)}&format=json&origin=*&pithumbsize=1200`;
+                const cResp = await fetch(cUrl);
+                const cData = await cResp.json();
+                const pages = cData.query.pages;
+                const pid = Object.keys(pages)[0];
+                const page = pages[pid];
+                // Update UI
+                document.getElementById('articleTitle').innerText = page.title;
+                document.getElementById('articleContent').innerHTML = page.extract;
+                document.getElementById('sourceUrl').href = `https://vi.wikipedia.org/wiki/${encodeURIComponent(page.title)}`;
+                const hero = document.getElementById('heroBox');
+                if (page.thumbnail) {
+                    document.getElementById('articleImage').src = page.thumbnail.source;
+                    hero.classList.remove('hidden');
+                } else {
+                    hero.classList.add('hidden');
                 }
+                loader.classList.add('hidden');
+                frame.classList.remove('hidden');
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+            } catch (err) {
+                loader.classList.add('hidden');
+                empty.classList.remove('hidden');
+                alert(err);
             }
+        }
     </script>
 </body>
+</html>