Spaces:

NihalGazi
/

Wikipedai

Sleeping

App Files Files Community

NihalGazi commited on Sep 6

Commit

a31c5b5

verified ·

1 Parent(s): bd67720

Upload index.html

Browse files

Files changed (1) hide show

index.html +278 -0

index.html ADDED Viewed

	@@ -0,0 +1,278 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<link rel="icon" type"image/png" href="https://huggingface.co/spaces/NihalGazi/Wikipedai/resolve/main/wikipedai.png">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Wikipedai</title>
+    <style>
+        :root {
+            --background-color: #ffffff;
+            --text-color: #202122;
+            --link-color: #3366cc;
+            --border-color: #a2a9b1;
+            --button-primary-background: #3366cc;
+            --button-primary-text: #ffffff;
+            --search-background: #ffffff;
+            --search-border: #a2a9b1;
+            --search-focus-border: #3366cc;
+        }
+        body {
+            font-family: sans-serif;
+            margin: 0;
+            background-color: var(--background-color);
+            color: var(--text-color);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            min-height: 100vh;
+        }
+        main {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            flex-grow: 1;
+            padding: 1em;
+            width: 100%;
+            box-sizing: border-box;
+        }
+        .central-logo {
+            width: 180px;
+            height: 180px;
+            margin-bottom: 1em;
+            /* Ensure the new logo scales properly if it's not square */
+            object-fit: contain;
+        }
+        .central-title {
+            font-family: 'Linux Libertine', 'Georgia', 'Times', serif;
+            font-size: 3em;
+            font-weight: normal;
+            margin: 0;
+        }
+        .central-subtitle {
+            font-size: 1.1em;
+            margin-top: 0.25em;
+            color: #54595d;
+        }
+        .search-container {
+            margin-top: 1.5em;
+            width: 100%;
+            max-width: 550px;
+        }
+        .search-form {
+            display: flex;
+            border: 1px solid var(--search-border);
+            border-radius: 2px;
+            overflow: hidden;
+        }
+        .search-form:focus-within {
+             border-color: var(--search-focus-border);
+        }
+        #searchInput {
+            flex-grow: 1;
+            border: none;
+            padding: 10px 12px;
+            font-size: 1em;
+            background-color: var(--search-background);
+        }
+        #searchInput:focus {
+            outline: none;
+        }
+        .search-button {
+            background-color: var(--button-primary-background);
+            color: var(--button-primary-text);
+            border: none;
+            padding: 0 20px;
+            font-size: 1em;
+            font-weight: bold;
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+        .search-button:hover {
+            background-color: #447ff5;
+        }
+        .lang-list {
+            margin-top: 2em;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 1.5em;
+            max-width: 800px;
+        }
+        .lang-list-item {
+            text-align: center;
+            line-height: 1.4;
+        }
+        .lang-list-item a {
+            text-decoration: none;
+            color: var(--link-color);
+        }
+        .lang-list-item strong {
+            display: block;
+            font-size: 1.1em;
+        }
+        .lang-list-item small {
+            color: #54595d;
+            font-size: 0.85em;
+        }
+        footer {
+            width: 100%;
+            text-align: center;
+            padding: 1.5em 0;
+            font-size: 0.8em;
+            color: #54595d;
+        }
+        footer a {
+            color: var(--link-color);
+            text-decoration: none;
+            margin: 0 0.5em;
+        }
+        @media (max-width: 600px) {
+            .central-logo {
+                width: 120px;
+                height: 120px;
+            }
+            .central-title {
+                font-size: 2.2em;
+            }
+            .lang-list {
+                gap: 1em;
+            }
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <img src="https://huggingface.co/spaces/NihalGazi/Wikipedai/resolve/main/wikipedai.png" alt="Wikipedai Globe Logo" class="central-logo">
+        <h1 class="central-title">Wikipedai</h1>
+        <div class="central-subtitle">The Free Encyclopedai</div>
+        <div class="search-container">
+            <form id="search-form" class="search-form">
+                <input type="search" id="searchInput" placeholder="Search Wikipedai" autofocus>
+                <button type="submit" class="search-button">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: white;"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                </button>
+            </form>
+        </div>
+        <div class="lang-list">
+            <div class="lang-list-item">
+                <a href="#">
+                    <strong>English</strong>
+                    <small>6,900,000+ articles</small>
+                </a>
+            </div>
+            <div class="lang-list-item">
+                <a href="#">
+                    <strong>日本語</strong>
+                    <small>1,400,000+ 記事</small>
+                </a>
+            </div>
+            <div class="lang-list-item">
+                <a href="#">
+                    <strong>Español</strong>
+                    <small>1,900,000+ artículos</small>
+                </a>
+            </div>
+            <div class="lang-list-item">
+                <a href="#">
+                    <strong>Русский</strong>
+                    <small>2,000,000+ статей</small>
+                </a>
+            </div>
+            <div class="lang-list-item">
+                <a href="#">
+                    <strong>Deutsch</strong>
+                    <small>2,900,000+ Artikel</small>
+                </a>
+            </div>
+            <div class="lang-list-item">
+                <a href="#">
+                    <strong>Français</strong>
+                    <small>2,600,000+ articles</small>
+                </a>
+            </div>
+            <div class="lang-list-item">
+                <a href="#">
+                    <strong>Italiano</strong>
+                    <small>1,800,000+ voci</small>
+                </a>
+            </div>
+            <div class="lang-list-item">
+                <a href="#">
+                    <strong>中文</strong>
+                    <small>1,400,000+ 条目</small>
+                </a>
+            </div>
+            <div class="lang-list-item">
+                <a href="#">
+                    <strong>Português</strong>
+                    <small>1,100,000+ artigos</small>
+                </a>
+            </div>
+            <div class="lang-list-item">
+                <a href="#">
+                    <strong>العربية</strong>
+                    <small>1,200,000+ مقالة</small>
+                </a>
+            </div>
+        </div>
+    </main>
+    <footer>
+        <div>
+            <a href="#">Wikimedia Foundation</a>
+            <a href="#">Terms of Use</a>
+            <a href="#">Privacy Policy</a>
+        </div>
+    </footer>
+    <script>
+        document.getElementById('search-form').addEventListener('submit', function(event) {
+            // Prevent the default form submission behavior
+            event.preventDefault();
+            // Get the user's query from the input field
+            const query = document.getElementById('searchInput').value;
+            // If the query is empty, do nothing
+            if (!query) {
+                return;
+            }
+            // URI-encode the query to handle special characters safely
+            const encodedQuery = encodeURIComponent(query);
+            // Construct the final URL for the API
+            const apiUrl = `https://nihalgazi-Wikipedai.hf.space/Wikipedai/${encodedQuery}`;
+            // Redirect the browser to the API URL
+            window.location.href = apiUrl;
+        });
+    </script>
+</body>
+</html>