From e83b0e73fd652650b481d43e606f7e3cd11b061d Mon Sep 17 00:00:00 2001
From: abrendan <94894839+abrendan@users.noreply.github.com>
Date: Mon, 12 Feb 2024 16:46:24 +0000
Subject: [PATCH] modernized the results page

---
 main.py                   | 19 ++++++---------
 static/styles_results.css | 51 ++++++++++++++++++++++++++++++++++++---
 templates/results.html    | 18 ++++++++++----
 3 files changed, 68 insertions(+), 20 deletions(-)

diff --git a/main.py b/main.py
index 9f63fe0..914c72b 100644
--- a/main.py
+++ b/main.py
@@ -1,12 +1,9 @@
 from flask import Flask, render_template, request
-import requests  # Import the requests library
+import requests
 import os
 
 app = Flask(__name__)
 
-# Replace 'your_api_key' with your actual Google Custom Search JSON API key
-# Replace 'your_search_engine_id' with your actual search engine id obtained
-# from your custom search engine configuration on Google
 GOOGLE_API_KEY = os.environ['GOOGLEAPI']
 GOOGLE_CX = os.environ['GOOGLEID']
 
@@ -22,7 +19,7 @@ def search():
         return render_template('index.html')
 
     start_index = (page - 1) * 10 + 1
-    # Build the Google Custom Search API request URL
+
     search_url = "https://www.googleapis.com/customsearch/v1"
     params = {
         'key': GOOGLE_API_KEY,
@@ -31,30 +28,30 @@ def search():
         'start': start_index
     }
 
-    # Issue a request to the Google API
     response = requests.get(search_url, params=params)
     search_results = []
     if response.status_code == 200:
         search_data = response.json()
 
-        # Extract the search results
         items = search_data.get('items', [])
         for item in items:
+            # Extract thumbnail if available, often found in `item['pagemap']['cse_thumbnail'][0]['src']`
+            thumbnail = item.get('pagemap', {}).get('cse_thumbnail', [{}])[0].get('src', '/path-to-default-thumbnail.jpg')
+
             search_results.append({
                 'title': item.get('title'),
                 'link': item.get('link'),
-                'snippet': item.get('snippet')
+                'snippet': item.get('snippet'),
+                'thumbnail': thumbnail  # Add this line to include the thumbnail URL
             })
 
         total_results = int(search_data.get('searchInformation', {}).get('totalResults', 0))
         total_pages = (total_results + 9) // 10
 
     else:
-        # In a production environment, you should handle response errors appropriately.
         print(f"Error: {response.status_code}")
 
-    return render_template('results.html', query=query,
-                           search_results=search_results, page=page, total_pages=total_pages)
+    return render_template('results.html', query=query, search_results=search_results, page=page, total_pages=total_pages)
 
 if __name__ == '__main__':
     app.run(host='0.0.0.0', port=80)
diff --git a/static/styles_results.css b/static/styles_results.css
index 5d96b91..3e1f8f7 100644
--- a/static/styles_results.css
+++ b/static/styles_results.css
@@ -40,12 +40,23 @@ h1 {
 }
 
 .result-item {
-  background: rgba(255, 255, 255, 0.5); /* Semi-transparent background for frosted effect */
+  display: flex;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.5);
   margin-bottom: 10px;
-  padding: 1rem; /* Reduced padding to make result items smaller */
-  border-radius: 10px; /* Rounded corners */
+  padding: 1rem;
+  border-radius: 10px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  font-size: 0.9rem; /* Reduced font size for better clarity */
+  font-size: 0.9rem;
+}
+.result-thumbnail {
+  margin-right: 1rem; /* Add space between image and text */
+  width: 100px; /* Fixed width or your preference */
+  height: auto; /* Keep aspect ratio */
+  border-radius: 5px; /* Optional: if you want rounded corners for thumbnails */
+}
+.result-content {
+  flex: 1; /* Allows the content to fill the remainder of the space */
 }
 
 .result-title {
@@ -62,3 +73,35 @@ h1 {
 .result-snippet {
   color: #545454;
 }
+
+.search-container {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 1.5rem;
+}
+.search-form {
+  width: 100%;
+  max-width: 500px;
+  display: flex;
+}
+.search-input {
+  width: 100%;
+  padding: 0.5rem;
+  font-size: 1rem;
+  border: none;
+  border-radius: 5px 0 0 5px; /* Rounded corners left side */
+  outline: none;
+}
+.search-button {
+  padding: 0.5rem 1rem;
+  background-color: #1a0dab;
+  border: none;
+  color: white;
+  cursor: pointer;
+  border-radius: 0 5px 5px 0; /* Rounded corners right side */
+  font-size: 1rem;
+  text-align: center;
+}
+.search-button:hover {
+  background-color: #0f0c7b; /* Darker shade on hover */
+}
diff --git a/templates/results.html b/templates/results.html
index 16d2e67..cd52cdd 100644
--- a/templates/results.html
+++ b/templates/results.html
@@ -3,21 +3,29 @@
 <head>
   <meta charset="utf-8">
   <title>Search Results</title>
-  <link rel="stylesheet" href="{{ url_for('static', filename='styles_results.css') }}"> <!-- Link to the CSS file -->
+  <link rel="stylesheet" href="{{ url_for('static', filename='styles_results.css') }}">
 </head>
 <body>
   <div class="container">
     <h1>Search Results</h1>
-    <a href="/" class="search-link">New Search</a>
+    <div class="search-container">
+      <form action="/search" method="get" class="search-form">
+        <input type="text" name="query" required class="search-input" placeholder="Search again...">
+        <button type="submit" class="search-button">&#x1F50D;</button>
+      </form>
+    </div>
     <ul class="results-list">
       {% for result in search_results %}
-        <li class="result-item">
+      <li class="result-item">
+        <img src="{{ result.thumbnail }}" alt="Thumbnail" class="result-thumbnail">
+        <div class="result-content">
           <h2><a href="{{ result.link }}" class="result-title">{{ result.title }}</a></h2>
           <p class="result-snippet">{{ result.snippet }}</p>
           <a href="{{ result.link }}" class="result-link">{{ result.link }}</a>
-        </li>
+        </div>
+      </li>
       {% endfor %}
     </ul>
   </div>
 </body>
-</html>
\ No newline at end of file
+</html>