results.html 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta
  6. name="viewport"
  7. content="width=device-width, initial-scale=1.0, maximum-scale=5.0"
  8. />
  9. <title>Simo Search - {{query}}</title>
  10. <link rel="stylesheet" href="/static/main.css" />
  11. <link rel="icon" type="image/x-icon" href="/static/favicon.gif" />
  12. <link
  13. rel="search"
  14. type="application/opensearchdescription+xml"
  15. title="Simo Search"
  16. href="/opensearch.xml"
  17. />
  18. </head>
  19. <body class="results-view">
  20. <header>
  21. <h1>Simo<span>Search</span></h1>
  22. <form action="/search" method="GET" class="search-form">
  23. <input
  24. name="q"
  25. type="text"
  26. class="search-box"
  27. autocomplete="off"
  28. placeholder="Search the web..."
  29. value="{{query}}"
  30. />
  31. </form>
  32. </header>
  33. <nav class="nav-tabs">
  34. <div class="nav-container">
  35. <a href="/search?q={{query}}" class="active"> All </a>
  36. <a href="/images?q={{query}}"> Images </a>
  37. </div>
  38. </nav>
  39. <div class="content-layout">
  40. <main class="results-container">
  41. {{for result in results}}
  42. <div class="result">
  43. <span class="url"> {{result[1]}} </span>
  44. <a href="{{result[0]}}"> {{result[2]}} </a>
  45. <p class="desc">{{result[3]}}</p>
  46. </div>
  47. {{endfor}}
  48. <nav class="pagination">
  49. <a
  50. class="pagination-btn prev"
  51. href="/search?q={{query}}&p={{prev_page}}"
  52. >
  53. &larr; Page {{prev_page}}
  54. </a>
  55. <span class="pagination-current">Page {{page}}</span>
  56. <a
  57. class="pagination-btn next"
  58. href="/search?q={{query}}&p={{next_page}}"
  59. >
  60. Page {{next_page}} &rarr;
  61. </a>
  62. </nav>
  63. </main>
  64. <aside class="infobox-sidebar">
  65. {{if exists infoboxes}} {{for info in infoboxes}}
  66. <section class="infobox">
  67. <div class="infobox-header">
  68. <h2 class="infobox-title">{{info[0]}}</h2>
  69. </div>
  70. <div class="infobox-main">
  71. <img
  72. src="{{info[1]}}"
  73. alt="{{info[0]}}"
  74. class="infobox-image"
  75. />
  76. <div class="infobox-content">
  77. <p class="infobox-summary">{{info[2]|safe}}</p>
  78. <a class="read-more" href="{{info[3]}}">
  79. Read More
  80. </a>
  81. </div>
  82. </div>
  83. </section>
  84. {{endfor}} {{endif}}
  85. </aside>
  86. </div>
  87. </body>
  88. </html>