Spaces:

KingNish
/

test-space

Running

App Files Files Community

Initial Google clone implementation

#17

by smolSWE - opened May 19

base: refs/heads/main

←

from: refs/pr/17

Discussion Files changed

+103

-244

Files changed (5) hide show

.gitattributes +0 -35
.gitignore +0 -6
index.html +10 -57
script.js +56 -16
style.css +37 -130

.gitattributes CHANGED Viewed

@@ -1,35 +0,0 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text

.gitignore CHANGED Viewed

@@ -1,6 +0,0 @@
-*.env
-*.__pycache__
-*.pyc
-*.pyo
-*.exe
-.venv

index.html CHANGED Viewed

@@ -1,64 +1,17 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Netflix Clone</title>
-    <link rel="stylesheet" href="style.css">
 </head>
 <body>
-    <nav class="navbar">
-        <div class="navbar-logo">
-            <img src="https://upload.wikimedia.org/wikipedia/commons/0/08/Netflix_2015_logo.svg" alt="Netflix Logo">
-        </div>
-        <ul class="navbar-menu">
-            <li><a href="#">Home</a></li>
-            <li><a href="#">TV Shows</a></li>
-            <li><a href="#">Movies</a></li>
-            <li><a href="#">My List</a></li>
-        </ul>
-    </nav>
-    <section class="hero">
-        <div class="hero-content">
-            <h1>Movie Title</h1>
-            <p>A brief description of the movie.</p>
-            <div class="hero-buttons">
-                <button>Play</button>
-                <button>More Info</button>
-            </div>
-        </div>
-    </section>
-    <main class="container">
-        <div class="movie-row">
-            <h2>Trending Now</h2>
-            <div class="movie-posters">
-                <img src="https://via.placeholder.com/150x200" alt="Movie Poster">
-                <img src="https://via.placeholder.com/150x200" alt="Movie Poster">
-                <img src="https://via.placeholder.com/150x200" alt="Movie Poster">
-                <img src="https://via.placeholder.com/150x200" alt="Movie Poster">
-                <img src="https://via.placeholder.com/150x200" alt="Movie Poster">
-            </div>
-        </div>
-        <div class="movie-row">
-            <h2>Top Picks for You</h2>
-            <div class="movie-posters">
-                <img src="https://via.placeholder.com/150x200" alt="Movie Poster">
-                <img src="https://via.placeholder.com/150x200" alt="Movie Poster">
-                <img src="https://via.placeholder.com/150x200" alt="Movie Poster">
-                <img src="https://via.placeholder.com/150x200" alt="Movie Poster">
-                <img src="https://via.placeholder.com/150x200" alt="Movie Poster">
-            </div>
-        </div>
-    </main>
-    <footer class="footer">
-        <p>&copy; 2024 Netflix Clone</p>
-        <ul>
-            <li><a href="#">Terms of Use</a></li>
-            <li><a href="#">Privacy Policy</a></li>
-        </ul>
-    </footer>
-    <script src="script.js"></script>
 </body>
-</html>

 <!DOCTYPE html>
 <html>
 <head>
+  <title>Google Clone</title>
+  <link rel="stylesheet" href="style.css">
 </head>
 <body>
+  <div class="search-container">
+    <input type="text" id="search-input" placeholder="Search Google">
+    <div id="suggestions"></div>
+  </div>
+  <div id="results-container">
+  </div>
+  <script src="script.js"></script>
 </body>
+</html>

script.js CHANGED Viewed

@@ -1,22 +1,62 @@
-// Function to display a movie trailer (placeholder)
-function showTrailer() {
-    alert('Trailer is not available yet.');
-}
-// Function to add a movie to My List (placeholder)
-function addToMyList() {
-    alert('Added to My List!');
-}
-// Add event listeners to movie posters
-const moviePosters = document.querySelectorAll('.movie-posters img');
-moviePosters.forEach(poster => {
-    poster.addEventListener('click', showTrailer);
 });
-// Add event listener to the "More Info" button (placeholder)
-const moreInfoButton = document.querySelector('.hero-buttons button:last-child');
-moreInfoButton.addEventListener('click', () => {
-    alert('More info about the movie will be displayed here.');
 });

+const searchInput = document.getElementById("search-input");
+const suggestionsDiv = document.getElementById("suggestions");
+const resultsContainer = document.getElementById("results-container");
+const dummySuggestions = [
+  "what is javascript",
+  "how to make a website",
+  "best restaurants near me",
+  "weather today",
+  "current news"
+];
+searchInput.addEventListener("input", function() {
+  const inputValue = searchInput.value.toLowerCase();
+  const filteredSuggestions = dummySuggestions.filter(suggestion =>
+    suggestion.toLowerCase().startsWith(inputValue)
+  );
+  displaySuggestions(filteredSuggestions);
 });
+function displaySuggestions(suggestions) {
+  suggestionsDiv.innerHTML = "";
+  if (suggestions.length > 0 && searchInput.value) {
+    suggestions.forEach(suggestion => {
+      const suggestionElement = document.createElement("div");
+      suggestionElement.textContent = suggestion;
+      suggestionElement.addEventListener("click", function() {
+        searchInput.value = suggestion;
+        suggestionsDiv.style.display = "none";
+        displayResults(suggestion);
+      });
+      suggestionsDiv.appendChild(suggestionElement);
+    });
+    suggestionsDiv.style.display = "block";
+  } else {
+    suggestionsDiv.style.display = "none";
+  }
+}
+searchInput.addEventListener("keydown", function(event) {
+  if (event.key === "Enter") {
+    const inputValue = searchInput.value;
+    displayResults(inputValue);
+    suggestionsDiv.style.display = "none";
+  }
 });
+function displayResults(query) {
+  resultsContainer.innerHTML = "";
+  const dummyResults = [
+    `Result 1 for ${query}`,
+    `Result 2 for ${query}`,
+    `Result 3 for ${query}`
+  ];
+  dummyResults.forEach(result => {
+    const resultElement = document.createElement("div");
+    resultElement.textContent = result;
+    resultsContainer.appendChild(resultElement);
+  });
+}

style.css CHANGED Viewed

@@ -1,143 +1,50 @@
 body {
-    font-family: sans-serif;
-    background-color: #000;
-    color: #fff;
-    margin: 0;
-}
-.navbar {
-    background-color: #000;
-    padding: 10px 20px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-.navbar-logo img {
-    width: 100px;
-}
-.navbar-menu {
-    list-style: none;
-    display: flex;
-    padding: 0;
-}
-.navbar-menu li {
-    margin-left: 20px;
-}
-.navbar-menu li a {
-    color: #fff;
-    text-decoration: none;
-}
-.hero {
-    background-image: url('https://via.placeholder.com/1920x1080');
-    background-size: cover;
-    background-position: center;
-    height: 500px;
-    display: flex;
-    align-items: center;
-    padding: 0 20px;
-}
-.hero-content {
-    max-width: 600px;
-}
-.hero-content h1 {
-    font-size: 3em;
-    margin-bottom: 20px;
 }
-.hero-content p {
-    font-size: 1.2em;
-    margin-bottom: 30px;
 }
-.hero-buttons button {
-    background-color: rgba(0, 0, 0, 0.5);
-    color: #fff;
-    border: none;
-    padding: 10px 20px;
-    margin-right: 10px;
-    font-size: 1.1em;
-    cursor: pointer;
 }
-.container {
-    padding: 20px;
 }
-.movie-row {
-    margin-bottom: 30px;
 }
-.movie-posters {
-    display: flex;
-    overflow-x: auto;
 }
-.movie-posters img {
-    margin-right: 10px;
-    width: 150px;
-    height: 200px;
-}
-.footer {
-    background-color: #222;
-    padding: 20px;
-    text-align: center;
-}
-.footer ul {
-    list-style: none;
-    padding: 0;
-    display: flex;
-    justify-content: center;
-}
-.footer li {
-    margin: 0 10px;
-}
-.footer li a {
-    color: #fff;
-    text-decoration: none;
-}
-/* Responsive Design */
-@media (max-width: 768px) {
-    .navbar {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-    .navbar-menu {
-        margin-top: 10px;
-        flex-direction: column;
-    }
-    .navbar-menu li {
-        margin-left: 0;
-        margin-bottom: 10px;
-    }
-    .hero {
-        height: 400px;
-    }
-    .hero-content {
-        max-width: 100%;
-    }
-    .hero-content h1 {
-        font-size: 2em;
-    }
-    .hero-content p {
-        font-size: 1em;
-    }
-}

 body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
+.search-container {
+  margin-top: 100px;
+  position: relative;
 }
+#search-input {
+  width: 500px;
+  padding: 12px 20px;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  border-radius: 24px;
+  outline: none;
 }
+#suggestions {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 500px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-top: none;
+  border-radius: 0 0 8px 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  display: none;
+  z-index: 1;
 }
+#suggestions div {
+  padding: 8px 16px;
+  cursor: pointer;
 }
+#suggestions div:hover {
+  background-color: #f0f0f0;
 }
+#results-container {
+  margin-top: 20px;
+  width: 600px;
+}