Updated the page buttons

src/Routes/Images.c

@@ -20,15 +20,20 @@ int images_handler(UrlParams *params) {
     }
   }
 
-  char page_str[16], prev_str[16], next_str[16];
+  char page_str[16], prev_str[16], next_str[16], two_prev_str[16],
+      two_next_str[16];
+
   snprintf(page_str, sizeof(page_str), "%d", page);
   snprintf(prev_str, sizeof(prev_str), "%d", page > 1 ? page - 1 : 0);
   snprintf(next_str, sizeof(next_str), "%d", page + 1);
-
+  snprintf(two_prev_str, sizeof(two_prev_str), "%d", page > 2 ? page - 2 : 0);
+  snprintf(two_next_str, sizeof(two_next_str), "%d", page + 2);
   context_set(&ctx, "query", raw_query);
   context_set(&ctx, "page", page_str);
   context_set(&ctx, "prev_page", prev_str);
   context_set(&ctx, "next_page", next_str);
+  context_set(&ctx, "two_prev_page", two_prev_str);
+  context_set(&ctx, "two_next_page", two_next_str);
 
   char *display_query = url_decode_query(raw_query);
   context_set(&ctx, "query", display_query);

src/Routes/Search.c

@@ -174,13 +174,18 @@ int results_handler(UrlParams *params) {
 
   context_set(&ctx, "query", raw_query);
 
-  char page_str[16], prev_str[16], next_str[16];
+  char page_str[16], prev_str[16], next_str[16], two_prev_str[16],
+      two_next_str[16];
   snprintf(page_str, sizeof(page_str), "%d", page);
   snprintf(prev_str, sizeof(prev_str), "%d", page > 1 ? page - 1 : 0);
   snprintf(next_str, sizeof(next_str), "%d", page + 1);
+  snprintf(two_prev_str, sizeof(two_prev_str), "%d", page > 2 ? page - 2 : 0);
+  snprintf(two_next_str, sizeof(two_next_str), "%d", page + 2);
   context_set(&ctx, "page", page_str);
   context_set(&ctx, "prev_page", prev_str);
   context_set(&ctx, "next_page", next_str);
+  context_set(&ctx, "two_prev_page", two_prev_str);
+  context_set(&ctx, "two_next_page", two_next_str);
 
   if (!raw_query || strlen(raw_query) == 0) {
     send_response("<h1>No query provided</h1>");
@@ -265,9 +270,12 @@ int results_handler(UrlParams *params) {
     int *results_inner_counts = (int *)malloc(sizeof(int) * total_results);
     char **seen_urls = (char **)malloc(sizeof(char *) * total_results);
     if (!results_matrix || !results_inner_counts || !seen_urls) {
-      if (results_matrix) free(results_matrix);
-      if (results_inner_counts) free(results_inner_counts);
-      if (seen_urls) free(seen_urls);
+      if (results_matrix)
+        free(results_matrix);
+      if (results_inner_counts)
+        free(results_inner_counts);
+      if (seen_urls)
+        free(seen_urls);
       char *html = render_template("results.html", &ctx);
       if (html) {
         send_response(html);

static/main.css

@@ -360,9 +360,9 @@ h1 span {
 
 .pagination-btn {
     background: var(--bg-card);
-    color: var(--text-primary);
+    color: var(--text-secondary);
     border: 1px solid var(--border);
-    padding: 8px 16px;
+    padding: 4px 8px;
     border-radius: 8px;
     text-decoration: none;
     font-size: 0.9rem;
@@ -376,11 +376,26 @@ h1 span {
     border-color: var(--text-secondary);
 }
 
+
 .pagination-current {
-    color: var(--text-secondary);
-    font-size: 0.9rem;
+    background: var(--bg-card);
+    color: var(--text-primary);
+    border: 1px solid var(--border);
+    padding: 4px 12px;
+    border-radius: 8px;
+    text-decoration: none;
+    font-size: 1.2rem;
+    font-weight: 600;
+    transition: all 0.2s;
+    touch-action: manipulation;
 }
 
+.pagination-current:hover {
+    background: var(--border);
+    border-color: var(--text-secondary);
+}
+
+
 @media (max-width:1200px) {
     .content-layout {
         grid-template-columns:1fr;

templates/images.html

@@ -59,15 +59,48 @@
                 </div>
                 {{endfor}}
             </div>
-            <nav class="pagination">
-                <a class="pagination-btn prev" href="/images?q={{query}}&p={{prev_page}}">
-                    &larr; Page {{prev_page}}
-                </a>
-                <span class="pagination-current">Page {{page}}</span>
-                <a class="pagination-btn next" href="/images?q={{query}}&p={{next_page}}">
-                    Page {{next_page}} &rarr;
-                </a>
-            </nav>
+                <nav class="pagination">
+                    <a class="pagination-btn prev" href="/images?q={{query}}&p={{prev_page}}">
+                        &larr;
+                    </a>
+                    
+                    {{if two_prev_page != 0}}
+                    <a class="pagination-btn prev" href="/images?q={{query}}&p={{two_prev_page}}">
+                         {{two_prev_page}}
+                    </a>
+                    {{endif}}
+
+                    {{if prev_page != 0}}
+                    <a class="pagination-btn prev" href="/images?q={{query}}&p={{prev_page}}">
+                         {{prev_page}}
+                    </a>
+                    {{endif}}
+
+                    <a class="pagination-current" href="/images?q={{query}}&p={{page}}">
+                         {{page}}
+                    </a>
+                    <a class="pagination-btn next" href="/images?q={{query}}&p={{next_page}}">
+                         {{next_page}}
+                    </a>
+                    <a class="pagination-btn next" href="/images?q={{query}}&p={{two_next_page}}">
+                         {{two_next_page}}
+                    </a>
+
+                    {{if prev_page == 0}}
+                    <a class="pagination-btn prev" href="/images?q={{query}}&p=4">
+                         4
+                    </a>
+                    {{endif}}
+
+                    {{if two_prev_page == 0}}
+                    <a class="pagination-btn prev" href="/images?q={{query}}&p=5">
+                         5
+                    </a>
+                    {{endif}}
+                    <a class="pagination-btn next" href="/images?q={{query}}&p={{next_page}}">
+                          &rarr;
+                    </a>
+                </nav>
         </main>
     </body>
 

templates/results.html

@@ -54,11 +54,44 @@
 
                 <nav class="pagination">
                     <a class="pagination-btn prev" href="/search?q={{query}}&p={{prev_page}}">
-                        &larr; Page {{prev_page}}
+                        &larr;
+                    </a>
+                    
+                    {{if two_prev_page != 0}}
+                    <a class="pagination-btn prev" href="/search?q={{query}}&p={{two_prev_page}}">
+                         {{two_prev_page}}
+                    </a>
+                    {{endif}}
+
+                    {{if prev_page != 0}}
+                    <a class="pagination-btn prev" href="/search?q={{query}}&p={{prev_page}}">
+                         {{prev_page}}
+                    </a>
+                    {{endif}}
+
+                    <a class="pagination-current" href="/search?q={{query}}&p={{page}}">
+                         {{page}}
                     </a>
-                    <span class="pagination-current">Page {{page}}</span>
                     <a class="pagination-btn next" href="/search?q={{query}}&p={{next_page}}">
-                        Page {{next_page}} &rarr;
+                         {{next_page}}
+                    </a>
+                    <a class="pagination-btn next" href="/search?q={{query}}&p={{two_next_page}}">
+                         {{two_next_page}}
+                    </a>
+
+                    {{if prev_page == 0}}
+                    <a class="pagination-btn prev" href="/search?q={{query}}&p=4">
+                         4
+                    </a>
+                    {{endif}}
+
+                    {{if two_prev_page == 0}}
+                    <a class="pagination-btn prev" href="/search?q={{query}}&p=5">
+                         5
+                    </a>
+                    {{endif}}
+                    <a class="pagination-btn next" href="/search?q={{query}}&p={{next_page}}">
+                          &rarr;
                     </a>
                 </nav>
             </main>