Spaces:

AnesKAM
/

cos

Paused

App Files Files Community

AnesKAM commited on Apr 20

Commit

c2d7742

verified ·

1 Parent(s): 34b4d72

Create index.html

Browse files

Files changed (1) hide show

index.html +356 -0

index.html ADDED Viewed

	@@ -0,0 +1,356 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SurfGO - Powered by AnesNT</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary-color: #2563eb;
+            --accent-color: #7c3aed;
+            --bg-color: #f8fafc;
+            --text-color: #1e293b;
+            --white: #ffffff;
+            --shadow: 0 10px 25px rgba(0,0,0,0.05);
+            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            margin: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            min-height: 100vh;
+        }
+        /* Header Section */
+        .header {
+            width: 100%;
+            background: var(--white);
+            padding: 40px 0;
+            box-shadow: var(--shadow);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            position: sticky;
+            top: 0;
+            z-index: 1000;
+            transition: var(--transition);
+        }
+        .header.compact { padding: 15px 0; }
+        .logo {
+            font-size: 3rem;
+            font-weight: 600;
+            color: var(--primary-color);
+            text-decoration: none;
+            letter-spacing: -1px;
+            transition: var(--transition);
+        }
+        .header.compact .logo { font-size: 1.5rem; }
+        .dev-info {
+            font-size: 0.9rem;
+            color: #64748b;
+            margin-bottom: 25px;
+        }
+        /* Search Box */
+        .search-container {
+            width: 90%;
+            max-width: 700px;
+            display: flex;
+            gap: 12px;
+        }
+        .input-group {
+            display: flex;
+            background: var(--white);
+            border-radius: 50px;
+            flex: 1;
+            box-shadow: var(--shadow);
+            overflow: hidden;
+            border: 2px solid transparent;
+            transition: var(--transition);
+        }
+        .input-group:focus-within {
+            border-color: var(--primary-color);
+            transform: scale(1.01);
+        }
+        input {
+            flex: 1;
+            border: none;
+            padding: 15px 25px;
+            font-size: 1.1rem;
+            outline: none;
+            font-family: inherit;
+        }
+        .search-btn {
+            background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
+            color: white;
+            border: none;
+            padding: 0 30px;
+            border-radius: 50px;
+            cursor: pointer;
+            font-weight: 600;
+            transition: var(--transition);
+            box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
+        }
+        .search-btn:hover {
+            opacity: 0.9;
+            transform: translateY(-2px);
+        }
+        /* Home Page Section */
+        #home-page {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            flex: 1;
+            padding: 40px 20px;
+            animation: fadeIn 0.8s ease;
+        }
+        .quick-links {
+            margin-top: 50px;
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
+            gap: 20px;
+            width: 100%;
+            max-width: 800px;
+        }
+        .link-card {
+            background: var(--white);
+            padding: 20px;
+            border-radius: 20px;
+            text-align: center;
+            text-decoration: none;
+            color: var(--text-color);
+            box-shadow: var(--shadow);
+            transition: var(--transition);
+            border: 1px solid rgba(0,0,0,0.05);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 10px;
+        }
+        .link-card:hover {
+            transform: translateY(-10px);
+            border-color: var(--primary-color);
+            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
+        }
+        .link-card img {
+            width: 48px;
+            height: 48px;
+            border-radius: 12px;
+            object-fit: cover;
+        }
+        .link-card span { font-size: 0.85rem; font-weight: 500; }
+        .genisi-card {
+            background: linear-gradient(45deg, var(--primary-color), var(--accent-color)) !important;
+            color: white !important;
+        }
+        /* Results Page Section */
+        #results-page {
+            display: none;
+            width: 90%;
+            max-width: 850px;
+            margin: 30px auto;
+            animation: slideUp 0.5s ease;
+        }
+        .result-card {
+            background: var(--white);
+            padding: 20px 25px;
+            border-radius: 15px;
+            box-shadow: var(--shadow);
+            text-decoration: none;
+            color: inherit;
+            transition: var(--transition);
+            border: 1px solid #e2e8f0;
+            margin-bottom: 20px;
+            display: block;
+        }
+        .result-card:hover {
+            transform: translateX(10px);
+            border-color: var(--primary-color);
+            box-shadow: 0 10px 20px rgba(0,0,0,0.08);
+        }
+        .result-url {
+            font-size: 0.8rem;
+            color: #94a3b8;
+            margin-bottom: 5px;
+            display: block;
+        }
+        .result-card h3 {
+            margin: 0 0 8px 0;
+            color: var(--primary-color);
+            font-size: 1.2rem;
+        }
+        .result-card p {
+            margin: 0;
+            font-size: 0.9rem;
+            color: #475569;
+            line-height: 1.6;
+        }
+        .loader {
+            display: none;
+            text-align: center;
+            margin: 30px 0;
+            font-weight: 500;
+            color: var(--primary-color);
+        }
+        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+        @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
+        footer {
+            padding: 20px;
+            text-align: center;
+            font-size: 0.8rem;
+            color: #94a3b8;
+        }
+    </style>
+</head>
+<body>
+    <div class="header" id="main-header">
+        <a href="#" class="logo" onclick="goHome(event)">SurfGO</a>
+        <div class="dev-info">Developed by <b>AnesNT</b> 🇩🇿</div>
+        <div class="search-container">
+            <div class="input-group">
+                <input type="text" id="search-input" placeholder="Search the web with SurfGO...">
+                <button class="search-btn" onclick="performSearch()">Search</button>
+            </div>
+        </div>
+    </div>
+    <div id="home-page">
+        <div class="quick-links">
+            <a href="https://copilot.microsoft.com/" target="_blank" class="link-card genisi-card">
+                <img src="https://copilot.microsoft.com/th/id/BCO.f29916dd-b0c1-4089-87cd-43d099a7d1a6.png" alt="Genisi">
+                <span>Genisi AI</span>
+            </a>
+            <a href="https://youtube.com" target="_blank" class="link-card">
+                <img src="https://cdn-icons-png.flaticon.com/512/1384/1384060.png" alt="YouTube">
+                <span>YouTube</span>
+            </a>
+            <a href="https://facebook.com" target="_blank" class="link-card">
+                <img src="https://cdn-icons-png.flaticon.com/512/733/733547.png" alt="Facebook">
+                <span>Facebook</span>
+            </a>
+            <a href="https://web.whatsapp.com" target="_blank" class="link-card">
+                <img src="https://cdn-icons-png.flaticon.com/512/733/733585.png" alt="WhatsApp">
+                <span>WhatsApp</span>
+            </a>
+            <a href="https://instagram.com" target="_blank" class="link-card">
+                <img src="https://cdn-icons-png.flaticon.com/512/174/174855.png" alt="Instagram">
+                <span>Instagram</span>
+            </a>
+            <a href="https://github.com" target="_blank" class="link-card">
+                <img src="https://cdn-icons-png.flaticon.com/512/25/25231.png" alt="GitHub">
+                <span>GitHub</span>
+            </a>
+        </div>
+    </div>
+    <div id="results-page">
+        <div class="loader" id="loader">Searching the web...</div>
+        <div id="results"></div>
+    </div>
+    <footer>
+        &copy; 2026 SurfGO - AnesNT Initiative
+    </footer>
+    <script>
+        // ⚠️ استبدل هذا الرابط برابط الـ Space الخاص بك
+        const SEARXNG_URL = 'https://ضع_رابط_سبيس_هجينج_فيس_هنا';
+        const header = document.getElementById('main-header');
+        const homePage = document.getElementById('home-page');
+        const resultsPage = document.getElementById('results-page');
+        function goHome(e) {
+            e.preventDefault();
+            homePage.style.display = 'flex';
+            resultsPage.style.display = 'none';
+            header.classList.remove('compact');
+            document.getElementById('search-input').value = '';
+        }
+        async function performSearch() {
+            const query = document.getElementById('search-input').value;
+            const resultsDiv = document.getElementById('results');
+            const loader = document.getElementById('loader');
+            if (!query) return;
+            homePage.style.display = 'none';
+            resultsPage.style.display = 'block';
+            header.classList.add('compact');
+            loader.style.display = 'block';
+            resultsDiv.innerHTML = '';
+            try {
+                // طلب النتائج بصيغة JSON من سيرفرك في Hugging Face
+                const response = await fetch(`${SEARXNG_URL}/search?q=${encodeURIComponent(query)}&format=json`);
+                if (!response.ok) throw new Error('Network response was not ok');
+                const data = await response.json();
+                loader.style.display = 'none';
+                if (data.results && data.results.length > 0) {
+                    data.results.forEach((result, index) => {
+                        const card = document.createElement('a');
+                        card.className = 'result-card';
+                        card.href = result.url;
+                        card.target = '_blank';
+                        card.style.animationDelay = `${index * 0.1}s`;
+                        card.innerHTML = `
+                            <span class="result-url">${result.pretty_url}</span>
+                            <h3>${result.title}</h3>
+                            <p>${result.content}</p>
+                        `;
+                        resultsDiv.appendChild(card);
+                    });
+                } else {
+                    resultsDiv.innerHTML = '<p style="text-align:center">No results found.</p>';
+                }
+            } catch (error) {
+                loader.style.display = 'none';
+                resultsDiv.innerHTML = '<p style="text-align:center; color:red;">Error connecting to SurfGO engine. Please check the URL.</p>';
+            }
+        }
+        document.getElementById('search-input').addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') performSearch();
+        });
+    </script>
+</body>
+</html>