images.html 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
  6. <title>
  7. OmniSearch Images - {{query}}
  8. </title>
  9. <link rel="stylesheet" href="static/main.css">
  10. </head>
  11. <body class="images-view">
  12. <header>
  13. <h1>
  14. Omni<span>Search</span>
  15. </h1>
  16. <form action="/images" method="GET" class="search-form">
  17. <input name="q" autocomplete="off"="text" class="search-box" placeholder="Search for images..."
  18. value="{{query}}">
  19. </form>
  20. </header>
  21. <nav class="nav-tabs">
  22. <div class="nav-container">
  23. <a href="/search?q={{query}}">
  24. All
  25. </a>
  26. <a href="/images?q={{query}}" class="active">
  27. Images
  28. </a>
  29. </div>
  30. </nav>
  31. <main class="image-results-container">
  32. <div class="image-grid">
  33. {{for img in images}}
  34. <div class="image-card">
  35. <div class="image-wrapper">
  36. <img src="{{img[0]}}" alt="{{img[1]}}" loading="lazy">
  37. <div class="image-overlay">
  38. <div class="overlay-buttons">
  39. <a href="{{img[3]}}" target="_blank" class="overlay-btn primary">
  40. View Image
  41. </a>
  42. <a href="{{img[2]}}" target="_blank" class="overlay-btn secondary">
  43. Visit Site
  44. </a>
  45. </div>
  46. </div>
  47. </div>
  48. <div class="image-info">
  49. <span class="image-caption">
  50. {{img[1]}}
  51. </span>
  52. <span class="image-source">
  53. {{img[2]}}
  54. </span>
  55. </div>
  56. </div>
  57. {{endfor}}
  58. </div>
  59. <nav class="pagination">
  60. <a class="pagination-btn prev" href="/images?q={{query}}&p={{prev_page}}">
  61. &larr; Page {{prev_page}}
  62. </a>
  63. <span class="pagination-current">Page {{page}}</span>
  64. <a class="pagination-btn next" href="/images?q={{query}}&p={{next_page}}">
  65. Page {{next_page}} &rarr;
  66. </a>
  67. </nav>
  68. </main>
  69. </body>
  70. </html>