Private-Google

Sleeping

App Files Files Community

KingNish commited on Jun 23, 2024

Commit

c8cbb1a

verified ·

1 Parent(s): d52ce34

Rename web/index.html to index.html

Browse files

Files changed (2) hide show

index.html +665 -0
web/index.html +0 -71

index.html ADDED Viewed

	@@ -0,0 +1,665 @@

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>HelpingAI Search</title>
+    <style>
+      body,
+      html {
+        margin: 0;
+        padding: 0;
+        font-family: "Arial", sans-serif;
+        height: 100%;
+        background: #f2f2f2; /* Light gray background */
+      }
+      .container {
+        display: flex;
+        flex-direction: column;
+        min-height: 100%;
+      }
+      header {
+        padding: 30px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background: #fff; /* White header background */
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+      }
+      .main-content {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 40px 20px; /* Increased padding */
+      }
+      .logo {
+        font-size: 40px; /* Reduced logo size */
+        font-weight: bold;
+        margin-bottom: 20px;
+        color: #4285f4;
+        position: absolute;
+        left: 43vw;
+        top: 6px;
+      }
+      .logo span:nth-child(2) {
+        color: #ea4335;
+      }
+      .logo span:nth-child(3) {
+        color: #fbbc05;
+      }
+      .logo span:nth-child(4) {
+        color: #34a853;
+      }
+      .logo span:nth-child(5) {
+        color: #ea4335;
+      }
+      .search-container {
+        width: 100%;
+        max-width: 700px;
+        margin-bottom: 20px;
+        position: relative; /* For positioning suggestions */
+      }
+      .search-box {
+        display: flex;
+        border: 1px solid #dfe1e5;
+        border-radius: 24px;
+        padding: 5px 8px;
+        transition: box-shadow 0.3s;
+        background: #fff; /* White search box background */
+      }
+      .search-box:hover,
+      .search-box:focus-within {
+        box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
+        border-color: rgba(223, 225, 229, 0);
+      }
+      #search-query {
+        flex-grow: 1;
+        border: none;
+        outline: none;
+        font-size: 16px;
+        padding: 10px 15px;
+      }
+      button {
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: 0 15px;
+      }
+      #search-form button svg {
+        width: 20px; /* Reduced icon size */
+        height: 20px;
+      }
+      #suggestions {
+        width: 100%;
+        max-width: 700px;
+        border: 1px solid #dfe1e5;
+        border-top: none;
+        border-radius: 0 0 24px 24px;
+        box-shadow: 0 4px 6px rgba(32, 33, 36, 0.28);
+        display: none;
+        position: absolute;
+        background: white;
+        z-index: 1000;
+      }
+      #suggestions ul {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+      }
+      #suggestions li {
+        padding: 10px 15px;
+        cursor: pointer;
+        border-bottom: 1px solid #eee; /* Subtle separator */
+      }
+      #suggestions li:hover {
+        background-color: #f1f3f4;
+      }
+      #results {
+        width: 100%;
+        max-width: 700px;
+        padding: 20px 0;
+      }
+      .result {
+        margin-bottom: 20px;
+        padding: 15px;
+        border-radius: 8px;
+        background: #fff;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+      .result h3 {
+        margin: 0;
+        font-weight: normal;
+      }
+      .result h3 a {
+        color: #1a0dab;
+        text-decoration: none;
+        font-size: 18px;
+      }
+      .result h3 a:hover {
+        text-decoration: underline;
+      }
+      .result .url {
+        color: #006621;
+        font-size: 14px;
+        margin-bottom: 3px;
+      }
+      .result p {
+        color: #545454;
+        font-size: 14px;
+        line-height: 1.58;
+        margin: 0;
+      }
+      .settings-icon {
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: 0;
+        position: absolute;
+        right: 5vw;
+      }
+      .settings-icon svg {
+        width: 24px; /* Increased icon size */
+        height: 24px;
+        fill: #333; /* Darker icon color */
+      }
+      .settings-menu {
+        display: none;
+        position: fixed;
+        top: 60px;
+        right: 20px;
+        background: #fff;
+        border: 1px solid #dfe1e5;
+        border-radius: 4px;
+        box-shadow: 0 4px 6px rgba(32, 33, 36, 0.28);
+        padding: 15px;
+        z-index: 1001;
+        width: 300px; /* Increased width for better visibility */
+      }
+      .settings-menu select {
+        display: block;
+        margin-bottom: 10px;
+        padding: 8px 12px;
+        border-radius: 4px;
+        border: 1.6px solid #2b14fa;
+        appearance: none;
+        background: #ffffff
+          url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M4 7l6 6 6-6z'></path></svg>")
+          no-repeat right 10px center;
+        font-size: 14px;
+      }
+      .settings-menu select:focus {
+        outline: none;
+        box-shadow: 0 0 0 5px #4285f4;
+      }
+      .settings-menu h4 {
+        margin-top: 0;
+        font-weight: bold;
+        color: #333;
+      }
+      /* About Section Styling */
+      .about-section {
+        width: 100%;
+        max-width: 700px;
+        padding: 20px;
+        border-radius: 8px;
+        background: #fff;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        margin-top: 20px;
+      }
+      .about-section h2 {
+        color: #333;
+        margin-bottom: 10px;
+      }
+      .about-section p {
+        color: #545454;
+        font-size: 14px;
+        line-height: 1.58;
+        margin: 0;
+      }
+      /* People Also Search For Styling */
+      .people-also-search {
+        width: 100%;
+        max-width: 700px;
+        padding: 20px;
+        border-radius: 8px;
+        background: #fff;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        margin-top: 20px;
+      }
+      .people-also-search h3 {
+        color: #333;
+        margin-bottom: 10px;
+      }
+      .people-also-search ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+      }
+      .people-also-search li {
+        padding: 5px 0;
+        cursor: pointer;
+        color: #545454;
+        font-size: 14px;
+      }
+      .people-also-search li a {
+        text-decoration: none;
+        color: #1a0dab;
+      }
+      .people-also-search li a:hover {
+        text-decoration: underline;
+      }
+      .sidebar {
+        width: 300px; /* Adjust width as needed */
+        padding: 20px;
+        background: #fff;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        position: fixed;
+        top: 60px;
+        right: 20px;
+        height: calc(100vh - 60px); /* Adjust height as needed */
+        overflow-y: auto;
+        display: none;
+      }
+      .sidebar h2,
+      .sidebar h3 {
+        color: #333;
+        margin-bottom: 10px;
+      }
+      .sidebar p {
+        color: #545454;
+        font-size: 14px;
+        line-height: 1.58;
+        margin: 0;
+      }
+      .sidebar ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+      }
+      .sidebar li {
+        padding: 5px 0;
+        cursor: pointer;
+        color: #545454;
+        font-size: 14px;
+      }
+      .sidebar li a {
+        text-decoration: none;
+        color: #1a0dab;
+      }
+      .sidebar li a:hover {
+        text-decoration: underline;
+      }
+      .main-content {
+        margin-right: 320px; /* Adjust based on sidebar width */
+        transition: margin-left 0.3s;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <header>
+        <div class="logo">
+          <span>H</span><span>e</span><span>l</span><span>p</span><span>i</span
+          ><span>ng</span><span>AI</span>
+        </div>
+        <button class="settings-icon" onclick="toggleSettings()">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="feather feather-settings"
+          >
+            <circle cx="12" cy="12" r="3"></circle>
+            <path
+              d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
+            ></path>
+          </svg>
+        </button>
+        <div class="settings-menu" id="settings-menu">
+          <h4>Time Limit</h4>
+          <select id="timelimit">
+            <option value="none">All Time</option>
+            <option value="d">Day</option>
+            <option value="w">Week</option>
+            <option value="m">Month</option>
+            <option value="y">Year</option>
+          </select>
+          <h4>Safe Search</h4>
+          <select id="safesearch">
+            <option value="off">Off</option>
+            <option value="moderate">Moderate</option>
+            <option value="on">On</option>
+          </select>
+        </div>
+      </header>
+      <div class="sidebar" id="sidebar">
+        <div id="about-section" style="display: none">
+          <h2>About</h2>
+          <p id="about-description"></p>
+        </div>
+        <div id="people-also-search-section" style="display: none">
+          <h3>People Also Search For</h3>
+          <ul id="people-also-search-list"></ul>
+        </div>
+      </div>
+      <div class="main-content">
+        <div class="search-container">
+          <form id="search-form">
+            <div class="search-box">
+              <input
+                type="text"
+                id="search-query"
+                placeholder="Search the web"
+                autocomplete="off"
+              />
+              <button type="submit">
+                <svg
+                  focusable="false"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  width="24px"
+                >
+                  <path
+                    d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+                  ></path>
+                </svg>
+              </button>
+            </div>
+          </form>
+          <div id="suggestions"></div>
+        </div>
+        <div id="results"></div>
+      </div>
+    </div>
+    <script>
+      const searchForm = document.getElementById("search-form");
+      const searchQueryInput = document.getElementById("search-query");
+      const timelimitSelect = document.getElementById("timelimit");
+      const safesearchSelect = document.getElementById("safesearch");
+      const resultsContainer = document.getElementById("results");
+      const suggestionsContainer = document.getElementById("suggestions");
+      const peopleAlsoSearchList = document.getElementById(
+        "people-also-search-list"
+      );
+      const peopleAlsoSearchSection = document.getElementById(
+        "people-also-search-section"
+      );
+      const aboutSection = document.getElementById("about-section");
+      const sidebar = document.getElementById("sidebar");
+      const BASE_URL = "https://oevortex-webscout-api.hf.space";
+      searchQueryInput.addEventListener("input", async () => {
+        const searchQuery = searchQueryInput.value;
+        const apiEndpoint = `${BASE_URL}/api/suggestions`;
+        if (searchQuery.trim() === "") {
+          suggestionsContainer.style.display = "none";
+          return;
+        }
+        try {
+          const response = await fetch(
+            `${apiEndpoint}?q=${encodeURIComponent(searchQuery)}`
+          );
+          if (!response.ok) {
+            throw new Error(
+              `API request failed with status: ${response.status}`
+            );
+          }
+          const data = await response.json();
+          displaySuggestions(data);
+        } catch (error) {
+          console.error("Error:", error);
+          suggestionsContainer.style.display = "none";
+        }
+      });
+      searchQueryInput.addEventListener("focus", () => {
+        if (searchQueryInput.value.trim() !== "") {
+          suggestionsContainer.style.display = "block";
+        }
+      });
+      document.addEventListener("click", (event) => {
+        if (!searchForm.contains(event.target)) {
+          suggestionsContainer.style.display = "none";
+        }
+      });
+      searchForm.addEventListener("submit", async (event) => {
+        event.preventDefault();
+        const searchQuery = searchQueryInput.value;
+        const timelimit = timelimitSelect.value;
+        const safesearch = safesearchSelect.value;
+        await performSearch(searchQuery, timelimit, safesearch);
+      });
+      function displaySuggestions(suggestions) {
+        suggestionsContainer.innerHTML = "";
+        if (suggestions.length === 0) {
+          suggestionsContainer.style.display = "none";
+          return;
+        }
+        const suggestionList = document.createElement("ul");
+        suggestions.forEach((suggestion) => {
+          const listItem = document.createElement("li");
+          listItem.textContent = suggestion.phrase;
+          listItem.addEventListener("click", () => {
+            searchQueryInput.value = suggestion.phrase;
+            suggestionsContainer.style.display = "none";
+            performSearch(suggestion.phrase);
+          });
+          suggestionList.appendChild(listItem);
+        });
+        suggestionsContainer.appendChild(suggestionList);
+        suggestionsContainer.style.display = "block";
+      }
+      async function performSearch(query, timelimit, safesearch) {
+        const apiEndpoint = `${BASE_URL}/api/search`;
+        try {
+          const response = await fetch(
+            `${apiEndpoint}?q=${encodeURIComponent(
+              query
+            )}&max_results=100&timelimit=${timelimit}&safesearch=${safesearch}`
+          );
+          if (!response.ok) {
+            throw new Error(
+              `API request failed with status: ${response.status}`
+            );
+          }
+          const searchResults = await response.json();
+          displayResults(searchResults);
+          suggestionsContainer.style.display = "none";
+          // Get "People Also Search For" data
+          const peopleAlsoSearchData = await getPeopleAlsoSearch(query);
+          // Display "About" section
+          const aboutDescription = peopleAlsoSearchData.find(
+            (item) => item.topic === null
+          );
+          if (aboutDescription) {
+            document.getElementById("about-description").textContent =
+              aboutDescription.text;
+            aboutSection.style.display = "block";
+          } else {
+            aboutSection.style.display = "none";
+          }
+          // Display "People Also Search For" list (limited to 5-6 items)
+          const peopleAlsoSearchItems = peopleAlsoSearchData.filter(
+            (item) => item.topic === "See also"
+          );
+          displayPeopleAlsoSearch(peopleAlsoSearchItems.slice(0, 6));
+          if (peopleAlsoSearchItems.length > 0) {
+            peopleAlsoSearchSection.style.display = "block";
+          } else {
+            peopleAlsoSearchSection.style.display = "none";
+          }
+          if (aboutSection.style.display === "block" || peopleAlsoSearchSection.style.display === "block") {
+            // Show the sidebar if either section is displayed
+            sidebar.style.display = "block";
+            document.querySelector(".main-content").style.marginLeft = "320px";
+          } else {
+            // Hide the sidebar if both sections are hidden
+            sidebar.style.display = "none";
+            document.querySelector(".main-content").style.marginLeft = "0px";
+          }
+        } catch (error) {
+          console.error("Error:", error);
+          displayError("An error occurred while fetching results.");
+        }
+      }
+      async function getPeopleAlsoSearch(query) {
+        const apiEndpoint = `${BASE_URL}/api/answers`;
+        try {
+          const response = await fetch(
+            `${apiEndpoint}?q=${encodeURIComponent(query)}`
+          );
+          if (!response.ok) {
+            throw new Error(
+              `API request failed with status: ${response.status}`
+            );
+          }
+          const data = await response.json();
+          return data; // Return the data from the API
+        } catch (error) {
+          console.error("Error:", error);
+          return null; // Return null if there's an error fetching data
+        }
+      }
+      function displayPeopleAlsoSearch(data) {
+        peopleAlsoSearchList.innerHTML = ""; // Clear previous list
+        if (data.length === 0) {
+          // Handle the case where no "People Also Search For" results are found
+          return;
+        }
+        data.forEach((item) => {
+          const listItem = document.createElement("li");
+          const link = document.createElement("a");
+          link.href = item.url;
+          link.textContent = item.text;
+          link.target = "_blank";
+          link.rel = "noopener noreferrer";
+          listItem.appendChild(link);
+          peopleAlsoSearchList.appendChild(listItem);
+        });
+      }
+      function displayResults(results) {
+        resultsContainer.innerHTML = "";
+        if (results.length === 0) {
+          displayError("No results found.");
+          return;
+        }
+        results.forEach((result) => {
+          const resultElement = document.createElement("div");
+          resultElement.classList.add("result");
+          const titleElement = document.createElement("h3");
+          const titleLink = document.createElement("a");
+          titleLink.href = result.href;
+          titleLink.textContent = result.title;
+          titleLink.target = "_blank";
+          titleLink.rel = "noopener noreferrer";
+          titleElement.appendChild(titleLink);
+          const urlElement = document.createElement("div");
+          urlElement.classList.add("url");
+          urlElement.textContent = result.href;
+          // Correctly using result.description now
+          const descriptionElement = document.createElement("p");
+          descriptionElement.textContent = result.body;
+          resultElement.appendChild(titleElement);
+          resultElement.appendChild(urlElement);
+          resultElement.appendChild(descriptionElement);
+          resultsContainer.appendChild(resultElement);
+        });
+      }
+      function displayError(message) {
+        resultsContainer.innerHTML = "";
+        const errorElement = document.createElement("p");
+        errorElement.textContent = message;
+        errorElement.style.color = "red";
+        resultsContainer.appendChild(errorElement);
+      }
+      function toggleSettings() {
+        const settingsMenu = document.getElementById("settings-menu");
+        settingsMenu.style.display =
+          settingsMenu.style.display === "block" ? "none" : "block";
+      }
+    </script>
+  </body>
+</html>

web/index.html DELETED Viewed

@@ -1,71 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>HelpingAI Search</title>
-  <link rel="stylesheet" href="styles.css">
-  </head>
-  <body>
-    <div class="container">
-      <header>
-        <div class="logo">
-          <span>H</span><span>e</span><span>l</span><span>p</span><span>i</span
-          ><span>ng</span><span>AI</span>
-        </div>
-        <button class="settings-icon" onclick="toggleSettings()">
-          <svg>
-            </svg>
-        </button>
-        <div class="settings-menu" id="settings-menu">
-          <h4>Time Limit</h4>
-          <select id="timelimit">
-            <option value="none">All Time</option>
-            <option value="d">Day</option>
-            <option value="w">Week</option>
-            <option value="m">Month</option>
-            <option value="y">Year</option>
-          </select>
-          <h4>Safe Search</h4>
-          <select id="safesearch">
-            <option value="off">Off</option>
-            <option value="moderate">Moderate</option>
-            <option value="on">On</option>
-          </select>
-        </div>
-      </header>
-      <div class="sidebar" id="sidebar">
-        <div id="about-section" style="display: none">
-          <h2>About</h2>
-          <p id="about-description"></p>
-        </div>
-        <div id="people-also-search-section" style="display: none">
-          <h3>People Also Search For</h3>
-          <ul id="people-also-search-list"></ul>
-        </div>
-      </div>
-      <div class="main-content">
-        <div class="search-container">
-          <form id="search-form">
-            <div class="search-box">
-              <input
-                type="text"
-                id="search-query"
-                placeholder="Search the web"
-                autocomplete="off"
-              />
-              <button type="submit">
-                <svg>
-                  </svg>
-              </button>
-            </div>
-          </form>
-          <div id="suggestions"></div>
-        </div>
-        <div id="results"></div>
-      </div>
-    </div>
-    <script src="eel.js"></script> <script src="script.js"></script>
-  </body>
-</html>