home.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  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</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. <script>
  19. (function () {
  20. function isEmbedMode() {
  21. return (
  22. (window.location.hash || "").indexOf("#embed") !== -1
  23. );
  24. }
  25. function syncEmbedClassFromHash() {
  26. document.body.classList.toggle("embed", isEmbedMode());
  27. }
  28. function wireEmbedPreservingHomeSearchSubmit() {
  29. const form = document.querySelector(
  30. "form.home-search-form",
  31. );
  32. if (!form) return;
  33. form.addEventListener("submit", function (ev) {
  34. if (!isEmbedMode()) return;
  35. // Default GET form submission omits the fragment.
  36. // In embed mode, submit by navigating to action + querystring + #embed.
  37. ev.preventDefault();
  38. const actionAttr =
  39. form.getAttribute("action") || "/search";
  40. const actionUrl = new URL(
  41. actionAttr,
  42. window.location.origin,
  43. );
  44. const params = new URLSearchParams(new FormData(form));
  45. actionUrl.search = params.toString();
  46. window.location.assign(actionUrl.toString() + "#embed");
  47. });
  48. }
  49. function init() {
  50. syncEmbedClassFromHash();
  51. wireEmbedPreservingHomeSearchSubmit();
  52. }
  53. if (document.readyState === "loading") {
  54. document.addEventListener("DOMContentLoaded", init);
  55. } else {
  56. init();
  57. }
  58. window.addEventListener("hashchange", syncEmbedClassFromHash);
  59. })();
  60. </script>
  61. </head>
  62. <body>
  63. <div class="view-home">
  64. <div class="container" id="container">
  65. <h1 class="hero-logo">Simo <span>Search</span></h1>
  66. <form action="/search" class="home-search-form">
  67. <div class="search-input-wrapper">
  68. <input
  69. name="q"
  70. type="text"
  71. class="search-box"
  72. placeholder="Search the web..."
  73. autofocus
  74. autocomplete="off"
  75. />
  76. </div>
  77. <div class="buttons">
  78. <button type="submit" class="btn-primary">
  79. Search
  80. </button>
  81. </div>
  82. </form>
  83. </div>
  84. </div>
  85. </body>
  86. </html>