Clean up website design and add search functionality

app.js

@@ -1,6 +1,8 @@
 // Global variables
 let isLoading = false;
 let currentPostCount = 0;
+let allPosts = []; // Store all posts for search functionality
+let filteredPosts = []; // Store currently displayed posts
 const POSTS_CACHE_KEY = "cached_posts_100";
 const CACHE_EXPIRY_TIME = 5 * 60 * 1000; // 5 minutes
 
@@ -116,13 +118,36 @@ function createPostElement(post) {
   return postElement;
 }
 
+// Function to update search results counter
+function updateSearchResultsCount() {
+  const searchResultsElement = document.getElementById("search-results");
+  const searchInput = document.getElementById("search-input");
+  
+  if (searchResultsElement && searchInput) {
+    const searchTerm = searchInput.value.trim().toLowerCase();
+    const count = searchTerm ? filteredPosts.length : allPosts.length;
+    
+    if (searchResultsElement) {
+      searchResultsElement.textContent = searchTerm 
+        ? `${filteredPosts.length} post${filteredPosts.length !== 1 ? 's' : ''} found`
+        : `${allPosts.length} post${allPosts.length !== 1 ? 's' : ''}`;
+    }
+  }
+}
+
 function renderPosts(posts) {
   const container = document.getElementById("posts-container");
   
+  // Clear container
+  container.innerHTML = "";
+  
   posts.forEach((post) => {
     const postElement = createPostElement(post);
     container.appendChild(postElement);
   });
+  
+  // Update search results counter
+  updateSearchResultsCount();
 }
 
 // Cache management functions
@@ -166,6 +191,52 @@ function clearCachedPosts() {
   }
 }
 
+// Search functionality
+function performSearch() {
+  const searchInput = document.getElementById("search-input");
+  const searchTerm = searchInput.value.trim().toLowerCase();
+  
+  if (searchTerm === "") {
+    // Show all posts if search is empty
+    filteredPosts = [...allPosts];
+    renderPosts(filteredPosts);
+    return;
+  }
+  
+  // Filter posts by title (case-insensitive partial match)
+  filteredPosts = allPosts.filter(post => 
+    post.title && 
+    post.title.toLowerCase().includes(searchTerm)
+  );
+  
+  renderPosts(filteredPosts);
+}
+
+// Initialize search functionality
+function initializeSearch() {
+  const searchInput = document.getElementById("search-input");
+  if (searchInput) {
+    // Add debouncing to search for better performance
+    let searchTimeout;
+    searchInput.addEventListener("input", () => {
+      clearTimeout(searchTimeout);
+      searchTimeout = setTimeout(performSearch, 300); // 300ms delay
+    });
+    
+    // Add search results counter
+    const searchResults = document.createElement("div");
+    searchResults.id = "search-results";
+    searchResults.className = "search-results";
+    searchResults.textContent = "Loading posts...";
+    
+    // Insert search results counter after the header
+    const header = document.querySelector(".header");
+    if (header) {
+      header.parentNode.insertBefore(searchResults, header.nextSibling);
+    }
+  }
+}
+
 // Extract real title from base_url
 function extractRealTitleFromUrl(baseUrl) {
   if (!baseUrl || typeof baseUrl !== "string") {
@@ -236,7 +307,9 @@ async function loadInitialPosts() {
 
   if (cachedPosts && cachedPosts.length > 0) {
     console.log("Loading posts from cache");
-    renderPosts(cachedPosts);
+    allPosts = cachedPosts;
+    filteredPosts = [...allPosts];
+    renderPosts(filteredPosts);
     currentPostCount = cachedPosts.length;
 
     // Check if we have more posts or not
@@ -253,7 +326,9 @@ async function loadInitialPosts() {
   try {
     console.log("Fetching posts from API");
     const posts = await fetchRedditPosts();
-    renderPosts(posts);
+    allPosts = posts;
+    filteredPosts = [...allPosts];
+    renderPosts(filteredPosts);
     currentPostCount = posts.length;
 
     // Cache the posts
@@ -284,7 +359,11 @@ async function loadMorePosts() {
     const morePosts = await fetchMorePosts(currentPostCount);
 
     if (morePosts.length > 0) {
-      renderPosts(morePosts);
+      // Add new posts to allPosts and filteredPosts
+      allPosts = [...allPosts, ...morePosts];
+      filteredPosts = [...filteredPosts, ...morePosts];
+      
+      renderPosts(filteredPosts);
       currentPostCount += morePosts.length;
     } else {
       // No more posts to load
@@ -329,6 +408,7 @@ function setupInfiniteScroll() {
 document.addEventListener("DOMContentLoaded", () => {
   loadInitialPosts();
   setupInfiniteScroll();
+  initializeSearch();
 
   // Add event listener to dark mode toggle button
   const darkModeToggle = document.getElementById("dark-mode-toggle");

index.html

@@ -9,8 +9,16 @@
     <body>
         <div class="container">
             <header class="header">
-                <div style="flex: 1"></div>
                 <h1>Red Head</h1>
+                <div class="search-container">
+                    <span class="search-icon">🔍</span>
+                    <input
+                        type="text"
+                        id="search-input"
+                        placeholder="Search posts by title..."
+                        autocomplete="off"
+                    />
+                </div>
                 <button
                     id="dark-mode-toggle"
                     class="dark-mode-toggle"

styles.css

@@ -15,6 +15,7 @@ body {
     transition:
         background-color 0.3s,
         color 0.3s;
+    min-height: 100vh;
 }
 
 body.dark-mode {
@@ -30,7 +31,7 @@ body.dark-mode {
 
 .header {
     background-color: white;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     padding: 15px 0;
     position: sticky;
     top: 0;
@@ -38,25 +39,73 @@ body.dark-mode {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: 15px;
+    flex-wrap: wrap;
 }
 
 .header.dark-mode {
     background-color: #2d2d2d;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
 }
 
 .header h1 {
-    font-size: 1.8rem;
+    font-size: 2rem;
     color: #ff4500;
     margin: 0;
     flex-grow: 0;
     flex-shrink: 0;
+    font-weight: 700;
 }
 
 .header.dark-mode h1 {
     color: #ff6b35;
 }
 
+/* Search container */
+.search-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-grow: 1;
+    max-width: 500px;
+}
+
+.search-container input {
+    flex-grow: 1;
+    padding: 10px 15px;
+    border: 1px solid #ddd;
+    border-radius: 20px;
+    font-size: 1rem;
+    background-color: #f8f8f8;
+    transition: all 0.3s ease;
+}
+
+.search-container input.dark-mode {
+    background-color: #3a3a3a;
+    border-color: #444;
+    color: #e0e0e0;
+}
+
+.search-container input:focus {
+    outline: none;
+    border-color: #ff4500;
+    box-shadow: 0 0 0 2px rgba(255, 69, 0, 0.2);
+}
+
+.search-container input.dark-mode:focus {
+    border-color: #ff6b35;
+    box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2);
+}
+
+.search-icon {
+    color: #999;
+    font-size: 1.2rem;
+}
+
+.search-container .search-icon.dark-mode {
+    color: #aaa;
+}
+
 .content {
     padding: 20px 0;
 }
@@ -70,45 +119,49 @@ body.dark-mode {
 /* New rectangular post card design */
 .post-card {
     background-color: white;
-    border-radius: 4px;
+    border-radius: 12px;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
     overflow: hidden;
     transition:
-        transform 0.2s,
+        transform 0.3s ease,
-        box-shadow 0.2s;
+        box-shadow 0.3s ease;
     display: flex;
     flex-direction: column;
-    min-height: 100px;
+    min-height: 120px;
+    border: 1px solid #eee;
 }
 
 .post-card.dark-mode {
     background-color: #2d2d2d;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    border-color: #444;
 }
 
 .post-card:hover {
-    transform: translateY(-1px);
+    transform: translateY(-3px);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
 }
 
 .post-card.dark-mode:hover {
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
 
 .post-content {
-    padding: 12px;
+    padding: 16px;
     flex-grow: 1;
     display: flex;
     flex-direction: column;
 }
 
 .post-title {
-    font-size: 1.1rem;
+    font-size: 1.2rem;
-    margin-bottom: 8px;
+    margin-bottom: 12px;
     color: #000;
     text-decoration: none;
     display: block;
     flex-grow: 1;
+    font-weight: 600;
+    line-height: 1.4;
 }
 
 .post-title.dark-mode {
@@ -117,6 +170,7 @@ body.dark-mode {
 
 .post-title:hover {
     color: #ff4500;
+    text-decoration: underline;
 }
 
 .post-title.dark-mode:hover {
@@ -128,23 +182,25 @@ body.dark-mode {
     background-color: #f0f0f0;
     border: none;
     border-radius: 50%;
-    width: 40px;
+    width: 44px;
-    height: 40px;
+    height: 44px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: background-color 0.3s;
+    transition: all 0.3s ease;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    flex-shrink: 0;
 }
 
 .dark-mode-toggle.dark-mode {
     background-color: #404040;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
 .dark-mode-toggle:hover {
     background-color: #e0e0e0;
+    transform: scale(1.1);
 }
 
 .dark-mode-toggle.dark-mode:hover {
@@ -152,14 +208,82 @@ body.dark-mode {
 }
 
 .dark-mode-icon {
-    font-size: 1.2rem;
+    font-size: 1.3rem;
-    transition: transform 0.3s;
+    transition: transform 0.3s ease;
 }
 
 .dark-mode-toggle.dark-mode .dark-mode-icon {
     transform: rotate(180deg);
 }
 
+/* Post buttons */
+.post-buttons {
+    display: flex;
+    gap: 8px;
+    padding: 0 16px 16px;
+    flex-wrap: wrap;
+    align-self: flex-start;
+    margin-top: 8px;
+}
+
+.post-button {
+    background-color: #ff4500;
+    color: white;
+    text-decoration: none;
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-size: 0.9rem;
+    transition: all 0.2s ease;
+    border: none;
+    cursor: pointer;
+    flex-shrink: 0;
+    font-weight: 500;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.post-button.dark-mode {
+    background-color: #ff6b35;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.post-button:hover {
+    background-color: #e03d00;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+}
+
+.post-button.dark-mode:hover {
+    background-color: #ff7b45;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Search results counter */
+.search-results {
+    margin: 15px 0;
+    font-size: 1.1rem;
+    font-weight: 500;
+    color: #666;
+}
+
+.search-results.dark-mode {
+    color: #aaa;
+}
+
+/* Loading and no more messages */
+.loading,
+.no-more {
+    text-align: center;
+    padding: 25px;
+    font-size: 1.2rem;
+    color: #666;
+    font-weight: 500;
+}
+
+.loading.dark-mode,
+.no-more.dark-mode {
+    color: #aaa;
+}
+
 .post-image-container {
     width: 100%;
     height: 130px;
@@ -234,11 +358,11 @@ body.dark-mode {
     .post-content {
         max-height: 15vh; /* About 1/6 screen height for wide displays */
         overflow-y: auto;
-        padding: 12px;
+        padding: 16px;
     }
 
     .post-card {
-        min-height: 100px;
+        min-height: 120px;
     }
 }
 
@@ -249,25 +373,53 @@ body.dark-mode {
     }
 
     .header {
-        padding: 10px 0;
+        padding: 12px 0;
+        gap: 10px;
     }
 
     .header h1 {
-        font-size: 1.5rem;
+        font-size: 1.6rem;
+    }
+
+    .search-container {
+        max-width: 100%;
+        width: 100%;
     }
 
     .post-content {
-        padding: 10px;
+        padding: 12px;
+    }
+
+    .post-title {
+        font-size: 1.1rem;
+        margin-bottom: 10px;
+    }
+
+    .post-buttons {
+        padding: 0 12px 12px;
+    }
+
+    .post-button {
+        padding: 6px 10px;
+        font-size: 0.8rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .header h1 {
+        font-size: 1.4rem;
     }
 
     .post-title {
         font-size: 1rem;
-        margin-bottom: 6px;
     }
 
-    .post-image-container {
+    .post-card {
-        height: 100px;
+        min-height: 100px;
-        margin-bottom: 6px;
+    }
+
+    .post-content {
+        padding: 10px;
     }
 
     .post-buttons {
@@ -280,24 +432,6 @@ body.dark-mode {
     }
 }
 
-@media (max-width: 480px) {
-    .post-image-container {
-        height: 80px;
-    }
-
-    .header h1 {
-        font-size: 1.3rem;
-    }
-
-    .post-title {
-        font-size: 0.9rem;
-    }
-
-    .post-card {
-        min-height: 90px;
-    }
-}
-
 /* Loading and no more messages */
 .loading,
 .no-more {