first commit

2025-06-26 15:38:10 +03:30
commit e928faf6d2
899 changed files with 403713 additions and 0 deletions
--- a/client/simple/.gitignore
+++ b/client/simple/.gitignore
@@ -0,0 +1,3 @@
+dist
+node_modules
+.stylelintcache
--- a/client/simple/.stylelintrc.json
+++ b/client/simple/.stylelintrc.json
@@ -0,0 +1,17 @@
+{
+  "formatter": "unix",
+  "plugins": [ "stylelint-prettier" ],
+  "extends": [ "stylelint-config-standard-less" ],
+  "rules": {
+    "prettier/prettier": true,
+    "declaration-empty-line-before": null,
+    "no-invalid-position-at-import-rule": null,
+    "property-no-vendor-prefix": null,
+    "selector-no-vendor-prefix": null,
+    "selector-attribute-quotes": null,
+    "shorthand-property-no-redundant-values": null,
+    "at-rule-no-vendor-prefix": null,
+    "selector-id-pattern": null,
+    "selector-class-pattern": null
+  }
+}
--- a/client/simple/README.rst
+++ b/client/simple/README.rst
@@ -0,0 +1,24 @@
+=====================
+MEMO vite development
+=====================
+
+Local install::
+
+  # in folder ./client/simple/
+  $ npm install
+
+Start development server::
+
+  $ ./manage vite.simple.dev
+
+  # in folder ./client/simple/
+  $ npm exec -- vite
+
+Fix source code::
+
+  # in folder ./client/simple/
+  $ npm run fix
+
+Fix & Build::
+
+  $ ./manage vite.simple.build
--- a/client/simple/eslint.config.js
+++ b/client/simple/eslint.config.js
@@ -0,0 +1,34 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  pluginJs.configs.recommended,
+
+  // global "ignores"
+  // https://eslint.org/docs/latest/use/configure/configuration-files#globally-ignoring-files-with-ignores
+  {
+    ignores: ["node_modules/", "dist/"]
+  },
+
+  {
+    files: [
+      "**/*.js",
+    ],
+    linterOptions: {
+      reportUnusedDisableDirectives: "error",
+      // noInlineConfig: true
+    },
+    languageOptions: {
+      sourceType: "module",
+      globals: {
+        ...globals.browser,
+      }
+    },
+    rules: {
+      indent: ["error", 2],
+    },
+  },
+
+];
--- a/client/simple/generated/pygments.less
+++ b/client/simple/generated/pygments.less
@@ -0,0 +1,173 @@
+/*
+   this file is generated automatically by searxng_extra/update/update_pygments.py
+   using pygments version 2.19.1
+*/
+
+
+.code-highlight {
+
+  pre { line-height: 100%; }
+  td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+  span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+  td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+  span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+  .hll { background-color: #ffffcc }
+  .c { color: #3D7B7B; font-style: italic } /* Comment */
+  .err { border: 1px solid #F00 } /* Error */
+  .k { color: #008000; font-weight: bold } /* Keyword */
+  .o { color: #666 } /* Operator */
+  .ch { color: #3D7B7B; font-style: italic } /* Comment.Hashbang */
+  .cm { color: #3D7B7B; font-style: italic } /* Comment.Multiline */
+  .cp { color: #9C6500 } /* Comment.Preproc */
+  .cpf { color: #3D7B7B; font-style: italic } /* Comment.PreprocFile */
+  .c1 { color: #3D7B7B; font-style: italic } /* Comment.Single */
+  .cs { color: #3D7B7B; font-style: italic } /* Comment.Special */
+  .gd { color: #A00000 } /* Generic.Deleted */
+  .ge { font-style: italic } /* Generic.Emph */
+  .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
+  .gr { color: #E40000 } /* Generic.Error */
+  .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+  .gi { color: #008400 } /* Generic.Inserted */
+  .go { color: #717171 } /* Generic.Output */
+  .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
+  .gs { font-weight: bold } /* Generic.Strong */
+  .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+  .gt { color: #04D } /* Generic.Traceback */
+  .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
+  .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
+  .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
+  .kp { color: #008000 } /* Keyword.Pseudo */
+  .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
+  .kt { color: #B00040 } /* Keyword.Type */
+  .m { color: #666 } /* Literal.Number */
+  .s { color: #BA2121 } /* Literal.String */
+  .na { color: #687822 } /* Name.Attribute */
+  .nb { color: #008000 } /* Name.Builtin */
+  .nc { color: #00F; font-weight: bold } /* Name.Class */
+  .no { color: #800 } /* Name.Constant */
+  .nd { color: #A2F } /* Name.Decorator */
+  .ni { color: #717171; font-weight: bold } /* Name.Entity */
+  .ne { color: #CB3F38; font-weight: bold } /* Name.Exception */
+  .nf { color: #00F } /* Name.Function */
+  .nl { color: #767600 } /* Name.Label */
+  .nn { color: #00F; font-weight: bold } /* Name.Namespace */
+  .nt { color: #008000; font-weight: bold } /* Name.Tag */
+  .nv { color: #19177C } /* Name.Variable */
+  .ow { color: #A2F; font-weight: bold } /* Operator.Word */
+  .w { color: #BBB } /* Text.Whitespace */
+  .mb { color: #666 } /* Literal.Number.Bin */
+  .mf { color: #666 } /* Literal.Number.Float */
+  .mh { color: #666 } /* Literal.Number.Hex */
+  .mi { color: #666 } /* Literal.Number.Integer */
+  .mo { color: #666 } /* Literal.Number.Oct */
+  .sa { color: #BA2121 } /* Literal.String.Affix */
+  .sb { color: #BA2121 } /* Literal.String.Backtick */
+  .sc { color: #BA2121 } /* Literal.String.Char */
+  .dl { color: #BA2121 } /* Literal.String.Delimiter */
+  .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
+  .s2 { color: #BA2121 } /* Literal.String.Double */
+  .se { color: #AA5D1F; font-weight: bold } /* Literal.String.Escape */
+  .sh { color: #BA2121 } /* Literal.String.Heredoc */
+  .si { color: #A45A77; font-weight: bold } /* Literal.String.Interpol */
+  .sx { color: #008000 } /* Literal.String.Other */
+  .sr { color: #A45A77 } /* Literal.String.Regex */
+  .s1 { color: #BA2121 } /* Literal.String.Single */
+  .ss { color: #19177C } /* Literal.String.Symbol */
+  .bp { color: #008000 } /* Name.Builtin.Pseudo */
+  .fm { color: #00F } /* Name.Function.Magic */
+  .vc { color: #19177C } /* Name.Variable.Class */
+  .vg { color: #19177C } /* Name.Variable.Global */
+  .vi { color: #19177C } /* Name.Variable.Instance */
+  .vm { color: #19177C } /* Name.Variable.Magic */
+  .il { color: #666 } /* Literal.Number.Integer.Long */
+}
+
+.code-highlight-dark(){
+  .code-highlight {
+
+    pre { line-height: 100%; }
+    td.linenos .normal { color: #3c4354; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+    span.linenos { color: #3c4354; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+    td.linenos .special { color: #3c4354; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+    span.linenos.special { color: #3c4354; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+    .hll { background-color: #6e7681 }
+    .c { color: #7E8AA1 } /* Comment */
+    .err { color: #F88F7F } /* Error */
+    .esc { color: #D4D2C8 } /* Escape */
+    .g { color: #D4D2C8 } /* Generic */
+    .k { color: #FFAD66 } /* Keyword */
+    .l { color: #D5FF80 } /* Literal */
+    .n { color: #D4D2C8 } /* Name */
+    .o { color: #FFAD66 } /* Operator */
+    .x { color: #D4D2C8 } /* Other */
+    .p { color: #D4D2C8 } /* Punctuation */
+    .ch { color: #F88F7F; font-style: italic } /* Comment.Hashbang */
+    .cm { color: #7E8AA1 } /* Comment.Multiline */
+    .cp { color: #FFAD66; font-weight: bold } /* Comment.Preproc */
+    .cpf { color: #7E8AA1 } /* Comment.PreprocFile */
+    .c1 { color: #7E8AA1 } /* Comment.Single */
+    .cs { color: #7E8AA1; font-style: italic } /* Comment.Special */
+    .gd { color: #F88F7F; background-color: #3D1E20 } /* Generic.Deleted */
+    .ge { color: #D4D2C8; font-style: italic } /* Generic.Emph */
+    .ges { color: #D4D2C8 } /* Generic.EmphStrong */
+    .gr { color: #F88F7F } /* Generic.Error */
+    .gh { color: #D4D2C8 } /* Generic.Heading */
+    .gi { color: #6AD4AF; background-color: #19362C } /* Generic.Inserted */
+    .go { color: #7E8AA1 } /* Generic.Output */
+    .gp { color: #D4D2C8 } /* Generic.Prompt */
+    .gs { color: #D4D2C8; font-weight: bold } /* Generic.Strong */
+    .gu { color: #D4D2C8 } /* Generic.Subheading */
+    .gt { color: #F88F7F } /* Generic.Traceback */
+    .kc { color: #FFAD66 } /* Keyword.Constant */
+    .kd { color: #FFAD66 } /* Keyword.Declaration */
+    .kn { color: #FFAD66 } /* Keyword.Namespace */
+    .kp { color: #FFAD66 } /* Keyword.Pseudo */
+    .kr { color: #FFAD66 } /* Keyword.Reserved */
+    .kt { color: #73D0FF } /* Keyword.Type */
+    .ld { color: #D5FF80 } /* Literal.Date */
+    .m { color: #DFBFFF } /* Literal.Number */
+    .s { color: #D5FF80 } /* Literal.String */
+    .na { color: #FFD173 } /* Name.Attribute */
+    .nb { color: #FFD173 } /* Name.Builtin */
+    .nc { color: #73D0FF } /* Name.Class */
+    .no { color: #FFD173 } /* Name.Constant */
+    .nd { color: #7E8AA1; font-weight: bold; font-style: italic } /* Name.Decorator */
+    .ni { color: #95E6CB } /* Name.Entity */
+    .ne { color: #73D0FF } /* Name.Exception */
+    .nf { color: #FFD173 } /* Name.Function */
+    .nl { color: #D4D2C8 } /* Name.Label */
+    .nn { color: #D4D2C8 } /* Name.Namespace */
+    .nx { color: #D4D2C8 } /* Name.Other */
+    .py { color: #FFD173 } /* Name.Property */
+    .nt { color: #5CCFE6 } /* Name.Tag */
+    .nv { color: #D4D2C8 } /* Name.Variable */
+    .ow { color: #FFAD66 } /* Operator.Word */
+    .pm { color: #D4D2C8 } /* Punctuation.Marker */
+    .w { color: #D4D2C8 } /* Text.Whitespace */
+    .mb { color: #DFBFFF } /* Literal.Number.Bin */
+    .mf { color: #DFBFFF } /* Literal.Number.Float */
+    .mh { color: #DFBFFF } /* Literal.Number.Hex */
+    .mi { color: #DFBFFF } /* Literal.Number.Integer */
+    .mo { color: #DFBFFF } /* Literal.Number.Oct */
+    .sa { color: #F29E74 } /* Literal.String.Affix */
+    .sb { color: #D5FF80 } /* Literal.String.Backtick */
+    .sc { color: #D5FF80 } /* Literal.String.Char */
+    .dl { color: #D5FF80 } /* Literal.String.Delimiter */
+    .sd { color: #7E8AA1 } /* Literal.String.Doc */
+    .s2 { color: #D5FF80 } /* Literal.String.Double */
+    .se { color: #95E6CB } /* Literal.String.Escape */
+    .sh { color: #D5FF80 } /* Literal.String.Heredoc */
+    .si { color: #95E6CB } /* Literal.String.Interpol */
+    .sx { color: #95E6CB } /* Literal.String.Other */
+    .sr { color: #95E6CB } /* Literal.String.Regex */
+    .s1 { color: #D5FF80 } /* Literal.String.Single */
+    .ss { color: #DFBFFF } /* Literal.String.Symbol */
+    .bp { color: #5CCFE6 } /* Name.Builtin.Pseudo */
+    .fm { color: #FFD173 } /* Name.Function.Magic */
+    .vc { color: #D4D2C8 } /* Name.Variable.Class */
+    .vg { color: #D4D2C8 } /* Name.Variable.Global */
+    .vi { color: #D4D2C8 } /* Name.Variable.Instance */
+    .vm { color: #D4D2C8 } /* Name.Variable.Magic */
+    .il { color: #DFBFFF } /* Literal.Number.Integer.Long */
+  }
+}
--- a/client/simple/package-lock.json
+++ b/client/simple/package-lock.json
--- a/client/simple/package.json
+++ b/client/simple/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "simple",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "clean": "rm -Rf node_modules",
+    "build": "node theme_icons.js && vite build",
+    "fix": "eslint --fix && stylelint --fix strict 'src/**/*.{css,scss,sass,less,styl,vue,svelte}'",
+    "icons.html": "node theme_icons.js"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.29.0",
+    "copy-webpack-plugin": "^13.0.0",
+    "css-loader": "^7.1.2",
+    "edge.js": "^6.2.1",
+    "eslint": "^9.29.0",
+    "filemanager-webpack-plugin": "^8.0.0",
+    "globals": "^16.2.0",
+    "ionicons": "^8.0.9",
+    "leaflet": "^1.9.4",
+    "less": "^4.3.0",
+    "less-loader": "^12.3.0",
+    "normalize.css": "^8.0.1",
+    "sharp": "^0.34.2",
+    "style-loader": "^4.0.0",
+    "stylelint": "^16.21.0",
+    "stylelint-config-standard": "^38.0.0",
+    "stylelint-config-standard-less": "^3.0.1",
+    "stylelint-prettier": "^5.0.3",
+    "svgo": "^3.3.2",
+    "swiped-events": "^1.2.0",
+    "vite": "^6.3.5",
+    "vite-plugin-static-copy": "^3.0.2",
+    "vite-plugin-stylelint": "^6.0.0",
+    "webpack": "^5.99.9",
+    "webpack-cli": "^6.0.1"
+  }
+}
--- a/client/simple/src/brand/img_load_error.svg
+++ b/client/simple/src/brand/img_load_error.svg
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg8"
+   version="1.1"
+   viewBox="0 0 92 92"
+   height="92mm"
+   width="92mm"
+   sodipodi:docname="img_load_error.svg"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="3840"
+     inkscape:window-height="1536"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="2.2374547"
+     inkscape:cx="-12.067286"
+     inkscape:cy="218.38203"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg8" />
+  <defs
+     id="defs2" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <path
+     d="M 39.581382,41.421315 H 30.62689 v -1.21543 q 0,-2.033984 0.818554,-3.59668 0.818555,-1.5875 3.447852,-4.018359 l 1.5875,-1.438672 q 1.413867,-1.289844 2.058789,-2.43086 0.669727,-1.141015 0.669727,-2.282031 0,-1.736328 -1.190625,-2.703711 -1.190625,-0.992188 -3.323828,-0.992188 -2.00918,0 -4.340821,0.84336 -2.331641,0.818554 -4.861719,2.455664 v -7.788673 q 3.001367,-1.041796 5.481836,-1.53789 2.480469,-0.496094 4.787305,-0.496094 6.052344,0 9.227344,2.480469 3.175001,2.455664 3.175001,7.19336 0,2.430859 -0.967383,4.365625 -0.967383,1.909961 -3.299024,4.117578 l -1.5875,1.413868 q -1.686719,1.53789 -2.207617,2.480469 -0.520899,0.917773 -0.520899,2.033984 z m -8.954492,3.671094 h 8.954492 v 8.830469 H 30.62689 Z"
+     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:50.80000305px;line-height:1;font-family:'DejaVu Sans';-inkscape-font-specification:'DejaVu Sans Bold';display:inline;fill:#808080;fill-opacity:1;stroke-width:0.26458335"
+     id="path827"
+     inkscape:connector-curvature="0" />
+  <circle
+     style="fill:none;fill-opacity:1;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="path834"
+     cx="35"
+     cy="36.486031"
+     r="30" />
+  <rect
+     style="opacity:1;fill:#808080;fill-opacity:1;stroke:none;stroke-width:8;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect912"
+     width="18.846331"
+     height="39.963303"
+     x="-12.021294"
+     y="80.490318"
+     ry="1.8669105e-13"
+     transform="rotate(-46.234709)" />
+</svg>
--- a/client/simple/src/brand/searxng-wordmark.svg
+++ b/client/simple/src/brand/searxng-wordmark.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="137" height="148">
+<path d="M0 0 C45.21 0 90.42 0 137 0 C137 48.84 137 97.68 137 148 C91.79 148 46.58 148 0 148 C0 99.16 0 50.32 0 0 Z " fill="#FEFDFE" transform="translate(0,0)"/>
+<path d="M0 0 C0.05607422 1.57587891 0.05607422 1.57587891 0.11328125 3.18359375 C0.5004042 12.03889931 1.18483308 19.73686185 5.4375 27.6875 C5.623125 28.450625 5.80875 29.21375 6 30 C4.25 32.875 4.25 32.875 2 36 C-1.39782882 44.83435494 -0.64622797 53.58480061 2.2890625 62.453125 C5.49777563 69.10497779 10.48878832 74.40765099 15.28076172 79.96826172 C31 98.54473161 31 98.54473161 31 109 C26.56262836 109.08817767 22.12548653 109.14078435 17.6875 109.1875 C16.44419922 109.21263672 15.20089844 109.23777344 13.91992188 109.26367188 C1.10790079 109.36455393 -8.0499644 107.18926136 -18 99 C-19.04994141 98.15501953 -19.04994141 98.15501953 -20.12109375 97.29296875 C-27.8931778 90.33899881 -35.29504588 77.87198764 -36.23144531 67.41552734 C-36.84161364 54.40358107 -36.83728828 42.86123404 -31 31 C-30.55140625 29.88044922 -30.55140625 29.88044922 -30.09375 28.73828125 C-27.43730495 22.47841768 -22.65228565 17.84613089 -18 13 C-17.195625 12.13375 -16.39125 11.2675 -15.5625 10.375 C-4.36842105 0 -4.36842105 0 0 0 Z " fill="#892B8D" transform="translate(55,30)"/>
+<path d="M0 0 C0.97001953 0.01804687 1.94003906 0.03609375 2.93945312 0.0546875 C5.31484894 0.10149333 7.68813844 0.16703615 10.0625 0.25 C9.49098486 3.03759427 9.12687817 4.17703808 7.1875 6.375 C3.34195023 8.68232986 0.0013944 9.07861431 -4.4140625 9.5625 C-7.05451342 10.05351029 -7.05451342 10.05351029 -8.7734375 12.125 C-10.17771637 14.28469148 -10.17771637 14.28469148 -9.9375 17.25 C-7.96952859 18.63016894 -5.96250066 19.95495169 -3.9375 21.25 C-1.93600759 23.02786197 -0.00742354 24.80661847 1.8984375 26.6796875 C2.42265289 27.19250275 2.94686829 27.70531799 3.48696899 28.2336731 C4.58374211 29.31168429 5.67773707 30.39252872 6.76904297 31.47607422 C8.44029022 33.12775756 10.13166812 34.75690965 11.82421875 36.38671875 C12.89193388 37.4413849 13.95838591 38.49733164 15.0234375 39.5546875 C15.78266006 40.27686966 15.78266006 40.27686966 16.55722046 41.01364136 C19.03564096 43.52432154 20.02383919 44.94652408 20.47509766 48.48876953 C20.0625 51.25 20.0625 51.25 18.5 53.125 C14.44907627 54.99465711 11.05392148 54.89194869 6.80859375 53.5234375 C3.1914544 52.09516097 -0.34252332 50.53078445 -3.859375 48.87109375 C-10.81681497 45.70780174 -16.30330253 44.57374235 -23.9375 45.25 C-28.50434715 36.68981674 -28.50434715 36.68981674 -28.9375 32.25 C-29.00066406 31.61707031 -29.06382813 30.98414062 -29.12890625 30.33203125 C-29.64697321 20.88984317 -26.23301247 12.97838323 -20.01171875 6.00390625 C-13.34099145 0.3633101 -8.54145595 -0.30359242 0 0 Z " fill="#613C8C" transform="translate(88.9375,9.75)"/>
+</svg>
--- a/client/simple/src/brand/searxng.svg
+++ b/client/simple/src/brand/searxng.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="449" height="193">
+<path d="M0 0 C148.17 0 296.34 0 449 0 C449 63.69 449 127.38 449 193 C300.83 193 152.66 193 0 193 C0 129.31 0 65.62 0 0 Z " fill="#FEFEFE" transform="translate(0,0)"/>
+<path d="M0 0 C0.05607422 1.57587891 0.05607422 1.57587891 0.11328125 3.18359375 C0.5004042 12.03889931 1.18483308 19.73686185 5.4375 27.6875 C5.623125 28.450625 5.80875 29.21375 6 30 C4.25 32.875 4.25 32.875 2 36 C-1.39782882 44.83435494 -0.64622797 53.58480061 2.2890625 62.453125 C5.49777563 69.10497779 10.48878832 74.40765099 15.28076172 79.96826172 C31 98.54473161 31 98.54473161 31 109 C26.56262836 109.08817767 22.12548653 109.14078435 17.6875 109.1875 C16.44419922 109.21263672 15.20089844 109.23777344 13.91992188 109.26367188 C1.10790079 109.36455393 -8.0499644 107.18926136 -18 99 C-19.04994141 98.15501953 -19.04994141 98.15501953 -20.12109375 97.29296875 C-27.8931778 90.33899881 -35.29504588 77.87198764 -36.23144531 67.41552734 C-36.84161364 54.40358107 -36.83728828 42.86123404 -31 31 C-30.55140625 29.88044922 -30.55140625 29.88044922 -30.09375 28.73828125 C-27.43730495 22.47841768 -22.65228565 17.84613089 -18 13 C-17.195625 12.13375 -16.39125 11.2675 -15.5625 10.375 C-4.36842105 0 -4.36842105 0 0 0 Z " fill="#892B8D" transform="translate(333,58)"/>
+<path d="M0 0 C1.65 0 3.3 0 5 0 C7.39959757 6.60894415 7.32977836 12.99934352 7.37890625 19.9765625 C7.39590073 21.21997406 7.4128952 22.46338562 7.43040466 23.74447632 C7.47440711 27.03370127 7.51077291 30.32288194 7.54260254 33.61224365 C7.58845565 38.2505811 7.64442852 42.88878248 7.70530701 47.52694702 C7.7371517 49.99207602 7.76407626 52.45727461 7.78553772 54.92251587 C7.79902756 56.04072723 7.8125174 57.1589386 7.82641602 58.31103516 C7.83592789 59.29141754 7.84543976 60.27179993 7.85523987 61.28189087 C7.99846279 63.97113629 8.29104412 66.40128605 9 69 C15.42209393 73.28139595 23.61830698 72.6913136 31 72 C35.89023509 70.20475951 39.22388264 67.3911776 42 63 C42.92868048 60.45921839 43.77813831 57.9581975 44.5625 55.375 C46.73823329 48.26176671 46.73823329 48.26176671 49 46 C49.99 46 50.98 46 52 46 C52.05607422 47.97033203 52.05607422 47.97033203 52.11328125 49.98046875 C52.17895657 51.71617364 52.24540337 53.45184947 52.3125 55.1875 C52.34633789 56.48397461 52.34633789 56.48397461 52.38085938 57.80664062 C52.58285669 62.59948598 52.7630597 66.20570575 56 70 C61.42837148 74.24990451 67.4139213 73.64536952 74 73 C77.5563993 71.68796267 77.5563993 71.68796267 80 70 C80.66 70 81.32 70 82 70 C83.14060537 66.57818389 83.29002527 63.59956681 83.5 60 C83.88888889 53.33333333 83.88888889 53.33333333 85 50 C86.32 50 87.64 50 89 50 C90.40207077 54.20621231 90.33074778 58.3618571 90.5234375 62.7734375 C91.03628436 66.24566299 91.93433249 68.19008463 94 71 C98.33749634 73.67904186 103.07332487 73.19320295 108 73 C108.28875 72.4225 108.5775 71.845 108.875 71.25 C110 69 110 69 111.11328125 67.1640625 C114.18588422 59.66528697 112.02076298 48.91091313 111 41 C113.81821529 41.30467192 115.54138723 41.5923442 117.6875 43.5 C121.03775212 49.88143262 122.09047434 57.90078953 121 65 C118.93372802 70.44744431 116.07614398 74.95431361 111 78 C105.53495214 79.8737307 98.61363724 79.66731164 93.0625 78.25 C90.69550398 76.81545696 89.58840703 75.23820991 88 73 C86.515 72.505 86.515 72.505 85 72 C84.814375 72.598125 84.62875 73.19625 84.4375 73.8125 C81.86620837 77.72533509 77.2825026 78.57249913 73 80 C66.06452992 80.52725796 60.02460232 80.68853203 54 77 C51.55339643 74.60450042 49.54020213 72.08040427 48 69 C44.86087201 69.76998037 44.86087201 69.76998037 42.9375 72.3125 C36.32391386 78.36322774 28.96961511 79.64390057 20.1875 79.3125 C14.80447475 78.78475243 9.51697969 78.24391114 5.34375 74.5234375 C-0.95017875 66.50965613 -0.27253142 56.54747938 -0.1953125 46.875 C-0.1915756 45.51880096 -0.18873183 44.1625992 -0.18673706 42.80639648 C-0.1791538 39.26198685 -0.15955195 35.71774492 -0.1373291 32.17340088 C-0.11675534 28.54661323 -0.10771085 24.91979811 -0.09765625 21.29296875 C-0.07630021 14.1952445 -0.04222958 7.09763328 0 0 Z " fill="#7650A2" transform="translate(144,52)"/>
+<path d="M0 0 C0.97001953 0.01804688 1.94003906 0.03609375 2.93945312 0.0546875 C5.31484894 0.10149333 7.68813844 0.16703615 10.0625 0.25 C9.49098486 3.03759427 9.12687817 4.17703808 7.1875 6.375 C3.34195023 8.68232986 0.0013944 9.07861431 -4.4140625 9.5625 C-7.05451342 10.05351029 -7.05451342 10.05351029 -8.7734375 12.125 C-10.17771637 14.28469148 -10.17771637 14.28469148 -9.9375 17.25 C-7.96952859 18.63016894 -5.96250066 19.95495169 -3.9375 21.25 C-1.93600759 23.02786197 -0.00742354 24.80661847 1.8984375 26.6796875 C2.42265289 27.19250275 2.94686829 27.70531799 3.48696899 28.2336731 C4.58374211 29.31168429 5.67773707 30.39252872 6.76904297 31.47607422 C8.44029022 33.12775756 10.13166812 34.75690965 11.82421875 36.38671875 C12.89193388 37.4413849 13.95838591 38.49733164 15.0234375 39.5546875 C15.78266006 40.27686966 15.78266006 40.27686966 16.55722046 41.01364136 C19.03564096 43.52432154 20.02383919 44.94652408 20.47509766 48.48876953 C20.0625 51.25 20.0625 51.25 18.5 53.125 C14.44907627 54.99465711 11.05392148 54.89194869 6.80859375 53.5234375 C3.1914544 52.09516097 -0.34252332 50.53078445 -3.859375 48.87109375 C-10.81681497 45.70780174 -16.30330253 44.57374235 -23.9375 45.25 C-28.50434715 36.68981674 -28.50434715 36.68981674 -28.9375 32.25 C-29.00066406 31.61707031 -29.06382812 30.98414062 -29.12890625 30.33203125 C-29.64697321 20.88984317 -26.23301247 12.97838323 -20.01171875 6.00390625 C-13.34099145 0.3633101 -8.54145595 -0.30359242 0 0 Z " fill="#613C8C" transform="translate(366.9375,37.75)"/>
+<path d="M0 0 C1.67542976 0.28604898 3.34385343 0.61781233 5 1 C6.04629934 4.13889801 6.13061138 6.35103956 6.1418457 9.64550781 C6.14888016 10.80391174 6.15591461 11.96231567 6.16316223 13.15582275 C6.16732651 14.4089325 6.17149078 15.66204224 6.17578125 16.953125 C6.19303977 18.92236624 6.21032201 20.89160759 6.22898388 22.86083603 C6.27450282 27.71692747 6.31228127 32.57290614 6.32592773 37.42919922 C6.3340813 40.15260878 6.35270368 42.87556101 6.38285828 45.59881592 C6.41094606 48.16188365 6.4239272 50.7251725 6.41999817 53.28839111 C6.51462882 60.00806297 6.74350209 64.65133419 11 70 C15.44331102 73.27907537 21.34332322 72.36861345 26.625 72.375 C28.18927734 72.41173828 28.18927734 72.41173828 29.78515625 72.44921875 C36.94372927 72.47602988 42.61922943 71.30910904 49 68 C49.33 67.67 49.66 67.34 50 67 C49.93346449 64.56842953 49.80408596 62.17390765 49.625 59.75 C49.55381958 58.67758057 49.55381958 58.67758057 49.48120117 57.58349609 C49.24432665 54.08891845 48.96303081 50.60486692 48.63671875 47.1171875 C48.52972656 45.96476562 48.42273438 44.81234375 48.3125 43.625 C48.20550781 42.58601563 48.09851563 41.54703125 47.98828125 40.4765625 C48 38 48 38 50 36 C51.9375 36.0625 51.9375 36.0625 54 37 C59.84780079 44.14731207 59.03234778 58.12530062 58.36865234 66.99316406 C57.83120188 69.91888777 56.7303313 71.23237994 54.375 73 C52.1484375 74.13671875 52.1484375 74.13671875 50 75 C49.01 75.598125 48.02 76.19625 47 76.8125 C40.23720152 79.48944106 32.68314835 79.20877677 25.5 79.25 C24.60152344 79.270625 23.70304687 79.29125 22.77734375 79.3125 C15.61298082 79.3542139 10.04675771 78.30199472 4.1875 73.875 C-1.75100282 66.07011058 -1.418927 57.26064796 -1.328125 47.8125 C-1.32506131 46.46012584 -1.32318983 45.10774852 -1.32244873 43.75537109 C-1.31787684 40.94144341 -1.30356192 38.12780692 -1.28125 35.31396484 C-1.25275126 31.7012881 -1.24201338 28.0888375 -1.2375679 24.47605896 C-1.23342364 21.6931939 -1.22361808 18.9103747 -1.21169281 16.12753296 C-1.20321477 14.14598099 -1.19672006 12.16442086 -1.19024658 10.18286133 C-1.18063904 8.99072021 -1.17103149 7.7985791 -1.16113281 6.5703125 C-1.15430481 5.51602051 -1.14747681 4.46172852 -1.14044189 3.37548828 C-1 1 -1 1 0 0 Z " fill="#7953A3" transform="translate(72,52)"/>
+<path d="M0 0 C1.61358398 -0.01836914 1.61358398 -0.01836914 3.25976562 -0.03710938 C4.28650391 -0.03904297 5.31324219 -0.04097656 6.37109375 -0.04296875 C7.79119751 -0.04913208 7.79119751 -0.04913208 9.23999023 -0.05541992 C11.5625 0.1875 11.5625 0.1875 13.5625 2.1875 C13.5625 3.5075 13.5625 4.8275 13.5625 6.1875 C4.6525 6.1875 -4.2575 6.1875 -13.4375 6.1875 C-11.7552746 -2.223627 -7.66255775 0.00457466 0 0 Z " fill="#714B9D" transform="translate(105.4375,146.8125)"/>
+<path d="M0 0 C1.32 0 2.64 0 4 0 C5.09506492 3.28519475 5.09960608 5.73663415 5.0625 9.1875 C5.05347656 10.27417969 5.04445312 11.36085938 5.03515625 12.48046875 C5.02355469 13.31191406 5.01195312 14.14335938 5 15 C4.67 15 4.34 15 4 15 C3.67 12.03 3.34 9.06 3 6 C2.01 6 1.02 6 0 6 C0.03480469 6.84304687 0.06960937 7.68609375 0.10546875 8.5546875 C0.14607422 10.19824219 0.14607422 10.19824219 0.1875 11.875 C0.22230469 12.96554688 0.25710937 14.05609375 0.29296875 15.1796875 C0.19628906 16.11039063 0.09960938 17.04109375 0 18 C-0.99 18.66 -1.98 19.32 -3 20 C-2.505 18.515 -2.505 18.515 -2 17 C-1.79831626 14.66943228 -1.63622631 12.33530825 -1.5 10 C-1.11111111 3.33333333 -1.11111111 3.33333333 0 0 Z " fill="#8158AD" transform="translate(229,102)"/>
+<path d="M0 0 C0.99 0 1.98 0 3 0 C3 0.66 3 1.32 3 2 C3.99 2.33 4.98 2.66 6 3 C6 3.99 6 4.98 6 6 C4.68 6 3.36 6 2 6 C1.34 4.02 0.68 2.04 0 0 Z " fill="#EBEBEB" transform="translate(370,3)"/>
+</svg>
--- a/client/simple/src/js/head/00_init.js
+++ b/client/simple/src/js/head/00_init.js
@@ -0,0 +1,20 @@
+/* SPDX-License-Identifier: AGPL-3.0-or-later */
+(function (w, d) {
+  'use strict';
+
+  // add data- properties
+  var script = d.currentScript  || (function () {
+    var scripts = d.getElementsByTagName('script');
+    return scripts[scripts.length - 1];
+  })();
+
+  w.searxng = {
+    settings: JSON.parse(atob(script.getAttribute('client_settings')))
+  };
+
+  // update the css
+  var htmlElement = d.getElementsByTagName("html")[0];
+  htmlElement.classList.remove('no-js');
+  htmlElement.classList.add('js');
+
+})(window, document);
--- a/client/simple/src/js/main/00_toolkit.js
+++ b/client/simple/src/js/main/00_toolkit.js
@@ -0,0 +1,165 @@
+/**
+ * @license
+ * (C) Copyright Contributors to the SearXNG project.
+ * (C) Copyright Contributors to the searx project (2014 - 2021).
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+window.searxng = (function (w, d) {
+
+  'use strict';
+
+  // not invented here toolkit with bugs fixed elsewhere
+  // purposes : be just good enough and as small as possible
+
+  // from https://plainjs.com/javascript/events/live-binding-event-handlers-14/
+  if (w.Element) {
+    (function (ElementPrototype) {
+      ElementPrototype.matches = ElementPrototype.matches ||
+      ElementPrototype.matchesSelector ||
+      ElementPrototype.webkitMatchesSelector ||
+      ElementPrototype.msMatchesSelector ||
+      function (selector) {
+        var node = this, nodes = (node.parentNode || node.document).querySelectorAll(selector), i = -1;
+        while (nodes[++i] && nodes[i] != node);
+        return !!nodes[i];
+      };
+    })(Element.prototype);
+  }
+
+  function callbackSafe (callback, el, e) {
+    try {
+      callback.call(el, e);
+    } catch (exception) {
+      console.log(exception);
+    }
+  }
+
+  var searxng = window.searxng || {};
+
+  searxng.on = function (obj, eventType, callback, useCapture) {
+    useCapture = useCapture || false;
+    if (typeof obj !== 'string') {
+      // obj HTMLElement, HTMLDocument
+      obj.addEventListener(eventType, callback, useCapture);
+    } else {
+      // obj is a selector
+      d.addEventListener(eventType, function (e) {
+        var el = e.target || e.srcElement, found = false;
+        while (el && el.matches && el !== d && !(found = el.matches(obj))) el = el.parentElement;
+        if (found) callbackSafe(callback, el, e);
+      }, useCapture);
+    }
+  };
+
+  searxng.ready = function (callback) {
+    if (document.readyState != 'loading') {
+      callback.call(w);
+    } else {
+      w.addEventListener('DOMContentLoaded', callback.bind(w));
+    }
+  };
+
+  searxng.http = function (method, url, data = null) {
+    return new Promise(function (resolve, reject) {
+      try {
+        var req = new XMLHttpRequest();
+        req.open(method, url, true);
+        req.timeout = 20000;
+
+        // On load
+        req.onload = function () {
+          if (req.status == 200) {
+            resolve(req.response, req.responseType);
+          } else {
+            reject(Error(req.statusText));
+          }
+        };
+
+        // Handle network errors
+        req.onerror = function () {
+          reject(Error("Network Error"));
+        };
+
+        req.onabort = function () {
+          reject(Error("Transaction is aborted"));
+        };
+
+        req.ontimeout = function () {
+          reject(Error("Timeout"));
+        }
+
+        // Make the request
+        if (data) {
+          req.send(data)
+        } else {
+          req.send();
+        }
+      } catch (ex) {
+        reject(ex);
+      }
+    });
+  };
+
+  searxng.loadStyle = function (src) {
+    var path = searxng.settings.theme_static_path + "/" + src,
+      id = "style_" + src.replace('.', '_'),
+      s = d.getElementById(id);
+    if (s === null) {
+      s = d.createElement('link');
+      s.setAttribute('id', id);
+      s.setAttribute('rel', 'stylesheet');
+      s.setAttribute('type', 'text/css');
+      s.setAttribute('href', path);
+      d.body.appendChild(s);
+    }
+  };
+
+  searxng.loadScript = function (src, callback) {
+    var path = searxng.settings.theme_static_path + "/" + src,
+      id = "script_" + src.replace('.', '_'),
+      s = d.getElementById(id);
+    if (s === null) {
+      s = d.createElement('script');
+      s.setAttribute('id', id);
+      s.setAttribute('src', path);
+      s.onload = callback;
+      s.onerror = function () {
+        s.setAttribute('error', '1');
+      };
+      d.body.appendChild(s);
+    } else if (!s.hasAttribute('error')) {
+      try {
+        callback.apply(s, []);
+      } catch (exception) {
+        console.log(exception);
+      }
+    } else {
+      console.log("callback not executed : script '" + path + "' not loaded.");
+    }
+  };
+
+  searxng.insertBefore = function (newNode, referenceNode) {
+    referenceNode.parentNode.insertBefore(newNode, referenceNode);
+  };
+
+  searxng.insertAfter = function (newNode, referenceNode) {
+    referenceNode.parentNode.insertAfter(newNode, referenceNode.nextSibling);
+  };
+
+  searxng.on('.close', 'click', function () {
+    this.parentNode.classList.add('invisible');
+  });
+
+  function getEndpoint () {
+    for (var className of d.getElementsByTagName('body')[0].classList.values()) {
+      if (className.endsWith('_endpoint')) {
+        return className.split('_')[0];
+      }
+    }
+    return '';
+  }
+
+  searxng.endpoint = getEndpoint();
+
+  return searxng;
+})(window, document);
--- a/client/simple/src/js/main/infinite_scroll.js
+++ b/client/simple/src/js/main/infinite_scroll.js
@@ -0,0 +1,88 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+/* global searxng */
+
+searxng.ready(function () {
+  'use strict';
+
+  searxng.infinite_scroll_supported = (
+    'IntersectionObserver' in window &&
+    'IntersectionObserverEntry' in window &&
+    'intersectionRatio' in window.IntersectionObserverEntry.prototype);
+
+  if (searxng.endpoint !== 'results') {
+    return;
+  }
+
+  if (!searxng.infinite_scroll_supported) {
+    console.log('IntersectionObserver not supported');
+    return;
+  }
+
+  let d = document;
+  var onlyImages = d.getElementById('results').classList.contains('only_template_images');
+
+  function newLoadSpinner () {
+    var loader = d.createElement('div');
+    loader.classList.add('loader');
+    return loader;
+  }
+
+  function replaceChildrenWith (element, children) {
+    element.textContent = '';
+    children.forEach(child => element.appendChild(child));
+  }
+
+  function loadNextPage (callback) {
+    var form = d.querySelector('#pagination form.next_page');
+    if (!form) {
+      return
+    }
+    replaceChildrenWith(d.querySelector('#pagination'), [ newLoadSpinner() ]);
+    var formData = new FormData(form);
+    searxng.http('POST', d.querySelector('#search').getAttribute('action'), formData).then(
+      function (response) {
+        var nextPageDoc = new DOMParser().parseFromString(response, 'text/html');
+        var articleList = nextPageDoc.querySelectorAll('#urls article');
+        var paginationElement = nextPageDoc.querySelector('#pagination');
+        d.querySelector('#pagination').remove();
+        if (articleList.length > 0 && !onlyImages) {
+          // do not add <hr> element when there are only images
+          d.querySelector('#urls').appendChild(d.createElement('hr'));
+        }
+        articleList.forEach(articleElement => {
+          d.querySelector('#urls').appendChild(articleElement);
+        });
+        if (paginationElement) {
+          d.querySelector('#results').appendChild(paginationElement);
+          callback();
+        }
+      }
+    ).catch(
+      function (err) {
+        console.log(err);
+        var e = d.createElement('div');
+        e.textContent = searxng.settings.translations.error_loading_next_page;
+        e.classList.add('dialog-error');
+        e.setAttribute('role', 'alert');
+        replaceChildrenWith(d.querySelector('#pagination'), [ e ]);
+      }
+    )
+  }
+
+  if (searxng.settings.infinite_scroll && searxng.infinite_scroll_supported) {
+    const intersectionObserveOptions = {
+      rootMargin: "20rem",
+    };
+    const observedSelector = 'article.result:last-child';
+    const observer = new IntersectionObserver(entries => {
+      const paginationEntry = entries[0];
+      if (paginationEntry.isIntersecting) {
+        observer.unobserve(paginationEntry.target);
+        loadNextPage(() => observer.observe(d.querySelector(observedSelector), intersectionObserveOptions));
+      }
+    });
+    observer.observe(d.querySelector(observedSelector), intersectionObserveOptions);
+  }
+
+});
--- a/client/simple/src/js/main/keyboard.js
+++ b/client/simple/src/js/main/keyboard.js
@@ -0,0 +1,461 @@
+/* SPDX-License-Identifier: AGPL-3.0-or-later */
+/* global searxng */
+
+searxng.ready(function () {
+
+  function isElementInDetail (el) {
+    while (el !== undefined) {
+      if (el.classList.contains('detail')) {
+        return true;
+      }
+      if (el.classList.contains('result')) {
+        // we found a result, no need to go to the root of the document:
+        // el is not inside a <div class="detail"> element
+        return false;
+      }
+      el = el.parentNode;
+    }
+    return false;
+  }
+
+  function getResultElement (el) {
+    while (el !== undefined) {
+      if (el.classList.contains('result')) {
+        return el;
+      }
+      el = el.parentNode;
+    }
+    return undefined;
+  }
+
+  function isImageResult (resultElement) {
+    return resultElement && resultElement.classList.contains('result-images');
+  }
+
+  searxng.on('.result', 'click', function (e) {
+    if (!isElementInDetail(e.target)) {
+      highlightResult(this)(true, true);
+      let resultElement = getResultElement(e.target);
+      if (isImageResult(resultElement)) {
+        e.preventDefault();
+        searxng.selectImage(resultElement);
+      }
+    }
+  });
+
+  searxng.on('.result a', 'focus', function (e) {
+    if (!isElementInDetail(e.target)) {
+      let resultElement = getResultElement(e.target);
+      if (resultElement && resultElement.getAttribute("data-vim-selected") === null) {
+        highlightResult(resultElement)(true);
+      }
+      if (isImageResult(resultElement)) {
+        searxng.selectImage(resultElement);
+      }
+    }
+  }, true);
+
+  /* common base for layouts */
+  var baseKeyBinding = {
+    'Escape': {
+      key: 'ESC',
+      fun: removeFocus,
+      des: 'remove focus from the focused input',
+      cat: 'Control'
+    },
+    'c': {
+      key: 'c',
+      fun: copyURLToClipboard,
+      des: 'copy url of the selected result to the clipboard',
+      cat: 'Results'
+    },
+    'h': {
+      key: 'h',
+      fun: toggleHelp,
+      des: 'toggle help window',
+      cat: 'Other'
+    },
+    'i': {
+      key: 'i',
+      fun: searchInputFocus,
+      des: 'focus on the search input',
+      cat: 'Control'
+    },
+    'n': {
+      key: 'n',
+      fun: GoToNextPage(),
+      des: 'go to next page',
+      cat: 'Results'
+    },
+    'o': {
+      key: 'o',
+      fun: openResult(false),
+      des: 'open search result',
+      cat: 'Results'
+    },
+    'p': {
+      key: 'p',
+      fun: GoToPreviousPage(),
+      des: 'go to previous page',
+      cat: 'Results'
+    },
+    'r': {
+      key: 'r',
+      fun: reloadPage,
+      des: 'reload page from the server',
+      cat: 'Control'
+    },
+    't': {
+      key: 't',
+      fun: openResult(true),
+      des: 'open the result in a new tab',
+      cat: 'Results'
+    },
+  };
+  var keyBindingLayouts = {
+
+    "default": Object.assign(
+      { /* SearXNG layout */
+        'ArrowLeft': {
+          key: '←',
+          fun: highlightResult('up'),
+          des: 'select previous search result',
+          cat: 'Results'
+        },
+        'ArrowRight': {
+          key: '→',
+          fun: highlightResult('down'),
+          des: 'select next search result',
+          cat: 'Results'
+        },
+      }, baseKeyBinding),
+
+    'vim': Object.assign(
+      { /* Vim-like Key Layout. */
+        'b': {
+          key: 'b',
+          fun: scrollPage(-window.innerHeight),
+          des: 'scroll one page up',
+          cat: 'Navigation'
+        },
+        'f': {
+          key: 'f',
+          fun: scrollPage(window.innerHeight),
+          des: 'scroll one page down',
+          cat: 'Navigation'
+        },
+        'u': {
+          key: 'u',
+          fun: scrollPage(-window.innerHeight / 2),
+          des: 'scroll half a page up',
+          cat: 'Navigation'
+        },
+        'd': {
+          key: 'd',
+          fun: scrollPage(window.innerHeight / 2),
+          des: 'scroll half a page down',
+          cat: 'Navigation'
+        },
+        'g': {
+          key: 'g',
+          fun: scrollPageTo(-document.body.scrollHeight, 'top'),
+          des: 'scroll to the top of the page',
+          cat: 'Navigation'
+        },
+        'v': {
+          key: 'v',
+          fun: scrollPageTo(document.body.scrollHeight, 'bottom'),
+          des: 'scroll to the bottom of the page',
+          cat: 'Navigation'
+        },
+        'k': {
+          key: 'k',
+          fun: highlightResult('up'),
+          des: 'select previous search result',
+          cat: 'Results'
+        },
+        'j': {
+          key: 'j',
+          fun: highlightResult('down'),
+          des: 'select next search result',
+          cat: 'Results'
+        },
+        'y': {
+          key: 'y',
+          fun: copyURLToClipboard,
+          des: 'copy url of the selected result to the clipboard',
+          cat: 'Results'
+        },
+      }, baseKeyBinding)
+  }
+
+  var keyBindings = keyBindingLayouts[searxng.settings.hotkeys] || keyBindingLayouts.default;
+
+  searxng.on(document, "keydown", function (e) {
+    // check for modifiers so we don't break browser's hotkeys
+    if (
+      Object.prototype.hasOwnProperty.call(keyBindings, e.key)
+        && !e.ctrlKey && !e.altKey
+        && !e.shiftKey && !e.metaKey
+    ) {
+      var tagName = e.target.tagName.toLowerCase();
+      if (e.key === 'Escape') {
+        keyBindings[e.key].fun(e);
+      } else {
+        if (e.target === document.body || tagName === 'a' || tagName === 'button') {
+          e.preventDefault();
+          keyBindings[e.key].fun();
+        }
+      }
+    }
+  });
+
+  function highlightResult (which) {
+    return function (noScroll, keepFocus) {
+      var current = document.querySelector('.result[data-vim-selected]'),
+        effectiveWhich = which;
+      if (current === null) {
+        // no selection : choose the first one
+        current = document.querySelector('.result');
+        if (current === null) {
+          // no first one : there are no results
+          return;
+        }
+        // replace up/down actions by selecting first one
+        if (which === "down" || which === "up") {
+          effectiveWhich = current;
+        }
+      }
+
+      var next, results = document.querySelectorAll('.result');
+      results = Array.from(results);  // convert NodeList to Array for further use
+
+      if (typeof effectiveWhich !== 'string') {
+        next = effectiveWhich;
+      } else {
+        switch (effectiveWhich) {
+        case 'visible':
+          var top = document.documentElement.scrollTop || document.body.scrollTop;
+          var bot = top + document.documentElement.clientHeight;
+
+          for (var i = 0; i < results.length; i++) {
+            next = results[i];
+            var etop = next.offsetTop;
+            var ebot = etop + next.clientHeight;
+
+            if ((ebot <= bot) && (etop > top)) {
+              break;
+            }
+          }
+          break;
+        case 'down':
+          next = results[results.indexOf(current) + 1] || current;
+          break;
+        case 'up':
+          next = results[results.indexOf(current) - 1] || current;
+          break;
+        case 'bottom':
+          next = results[results.length - 1];
+          break;
+        case 'top':
+          /* falls through */
+        default:
+          next = results[0];
+        }
+      }
+
+      if (next) {
+        current.removeAttribute('data-vim-selected');
+        next.setAttribute('data-vim-selected', 'true');
+        if (!keepFocus) {
+          var link = next.querySelector('h3 a') || next.querySelector('a');
+          if (link !== null) {
+            link.focus();
+          }
+        }
+        if (!noScroll) {
+          scrollPageToSelected();
+        }
+      }
+    };
+  }
+
+  function reloadPage () {
+    document.location.reload(true);
+  }
+
+  function removeFocus (e) {
+    const tagName = e.target.tagName.toLowerCase();
+    if (document.activeElement && (tagName === 'input' || tagName === 'select' || tagName === 'textarea')) {
+      document.activeElement.blur();
+    } else {
+      searxng.closeDetail();
+    }
+  }
+
+  function pageButtonClick (css_selector) {
+    return function () {
+      var button = document.querySelector(css_selector);
+      if (button) {
+        button.click();
+      }
+    };
+  }
+
+  function GoToNextPage () {
+    return pageButtonClick('nav#pagination .next_page button[type="submit"]');
+  }
+
+  function GoToPreviousPage () {
+    return pageButtonClick('nav#pagination .previous_page button[type="submit"]');
+  }
+
+  function scrollPageToSelected () {
+    var sel = document.querySelector('.result[data-vim-selected]');
+    if (sel === null) {
+      return;
+    }
+    var wtop = document.documentElement.scrollTop || document.body.scrollTop,
+      wheight = document.documentElement.clientHeight,
+      etop = sel.offsetTop,
+      ebot = etop + sel.clientHeight,
+      offset = 120;
+    // first element ?
+    if ((sel.previousElementSibling === null) && (ebot < wheight)) {
+      // set to the top of page if the first element
+      // is fully included in the viewport
+      window.scroll(window.scrollX, 0);
+      return;
+    }
+    if (wtop > (etop - offset)) {
+      window.scroll(window.scrollX, etop - offset);
+    } else {
+      var wbot = wtop + wheight;
+      if (wbot < (ebot + offset)) {
+        window.scroll(window.scrollX, ebot - wheight + offset);
+      }
+    }
+  }
+
+  function scrollPage (amount) {
+    return function () {
+      window.scrollBy(0, amount);
+      highlightResult('visible')();
+    };
+  }
+
+  function scrollPageTo (position, nav) {
+    return function () {
+      window.scrollTo(0, position);
+      highlightResult(nav)();
+    };
+  }
+
+  function searchInputFocus () {
+    window.scrollTo(0, 0);
+    var q = document.querySelector('#q');
+    q.focus();
+    if (q.setSelectionRange) {
+      var len = q.value.length;
+      q.setSelectionRange(len, len);
+    }
+  }
+
+  function openResult (newTab) {
+    return function () {
+      var link = document.querySelector('.result[data-vim-selected] h3 a');
+      if (link === null) {
+        link = document.querySelector('.result[data-vim-selected] > a');
+      }
+      if (link !== null) {
+        var url = link.getAttribute('href');
+        if (newTab) {
+          window.open(url);
+        } else {
+          window.location.href = url;
+        }
+      }
+    };
+  }
+
+  function initHelpContent (divElement) {
+    var categories = {};
+
+    for (var k in keyBindings) {
+      var key = keyBindings[k];
+      categories[key.cat] = categories[key.cat] || [];
+      categories[key.cat].push(key);
+    }
+
+    var sorted = Object.keys(categories).sort(function (a, b) {
+      return categories[b].length - categories[a].length;
+    });
+
+    if (sorted.length === 0) {
+      return;
+    }
+
+    var html = '<a href="#" class="close" aria-label="close" title="close">×</a>';
+    html += '<h3>How to navigate SearXNG with hotkeys</h3>';
+    html += '<table>';
+
+    for (var i = 0; i < sorted.length; i++) {
+      var cat = categories[sorted[i]];
+
+      var lastCategory = i === (sorted.length - 1);
+      var first = i % 2 === 0;
+
+      if (first) {
+        html += '<tr>';
+      }
+      html += '<td>';
+
+      html += '<h4>' + cat[0].cat + '</h4>';
+      html += '<ul class="list-unstyled">';
+
+      for (var cj in cat) {
+        html += '<li><kbd>' + cat[cj].key + '</kbd> ' + cat[cj].des + '</li>';
+      }
+
+      html += '</ul>';
+      html += '</td>'; // col-sm-*
+
+      if (!first || lastCategory) {
+        html += '</tr>'; // row
+      }
+    }
+
+    html += '</table>';
+
+    divElement.innerHTML = html;
+  }
+
+  function toggleHelp () {
+    var helpPanel = document.querySelector('#vim-hotkeys-help');
+    if (helpPanel === undefined || helpPanel === null) {
+      // first call
+      helpPanel = document.createElement('div');
+      helpPanel.id = 'vim-hotkeys-help';
+      helpPanel.className = 'dialog-modal';
+      initHelpContent(helpPanel);
+      var body = document.getElementsByTagName('body')[0];
+      body.appendChild(helpPanel);
+    } else {
+      // toggle hidden
+      helpPanel.classList.toggle('invisible');
+      return;
+    }
+  }
+
+  function copyURLToClipboard () {
+    var currentUrlElement = document.querySelector('.result[data-vim-selected] h3 a');
+    if (currentUrlElement === null) return;
+
+    const url = currentUrlElement.getAttribute('href');
+    navigator.clipboard.writeText(url);
+  }
+
+  searxng.scrollPageToSelected = scrollPageToSelected;
+  searxng.selectNext = highlightResult('down');
+  searxng.selectPrevious = highlightResult('up');
+});
--- a/client/simple/src/js/main/mapresult.js
+++ b/client/simple/src/js/main/mapresult.js
@@ -0,0 +1,74 @@
+/* SPDX-License-Identifier: AGPL-3.0-or-later */
+/* global L */
+(function (w, d, searxng) {
+  'use strict';
+
+  searxng.ready(function () {
+    searxng.on('.searxng_init_map', 'click', function (event) {
+      // no more request
+      this.classList.remove("searxng_init_map");
+
+      //
+      var leaflet_target = this.dataset.leafletTarget;
+      var map_lon = parseFloat(this.dataset.mapLon);
+      var map_lat = parseFloat(this.dataset.mapLat);
+      var map_zoom = parseFloat(this.dataset.mapZoom);
+      var map_boundingbox = JSON.parse(this.dataset.mapBoundingbox);
+      var map_geojson = JSON.parse(this.dataset.mapGeojson);
+
+      searxng.loadStyle('css/leaflet.css');
+      searxng.loadScript('js/leaflet.js', function () {
+        var map_bounds = null;
+        if (map_boundingbox) {
+          var southWest = L.latLng(map_boundingbox[0], map_boundingbox[2]);
+          var northEast = L.latLng(map_boundingbox[1], map_boundingbox[3]);
+          map_bounds = L.latLngBounds(southWest, northEast);
+        }
+
+        // init map
+        var map = L.map(leaflet_target);
+        // create the tile layer with correct attribution
+        var osmMapnikUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+        var osmMapnikAttrib = 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
+        var osmMapnik = new L.TileLayer(osmMapnikUrl, {minZoom: 1, maxZoom: 19, attribution: osmMapnikAttrib});
+        var osmWikimediaUrl = 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png';
+        var osmWikimediaAttrib = 'Wikimedia maps | Maps data © <a href="https://openstreetmap.org">OpenStreetMap contributors</a>';
+        var osmWikimedia = new L.TileLayer(osmWikimediaUrl, {minZoom: 1, maxZoom: 19, attribution: osmWikimediaAttrib});
+        // init map view
+        if (map_bounds) {
+          // TODO hack: https://github.com/Leaflet/Leaflet/issues/2021
+          // Still useful ?
+          setTimeout(function () {
+            map.fitBounds(map_bounds, {
+              maxZoom: 17
+            });
+          }, 0);
+        } else if (map_lon && map_lat) {
+          if (map_zoom) {
+            map.setView(new L.latLng(map_lat, map_lon), map_zoom);
+          } else {
+            map.setView(new L.latLng(map_lat, map_lon), 8);
+          }
+        }
+
+        map.addLayer(osmMapnik);
+
+        var baseLayers = {
+          "OSM Mapnik": osmMapnik,
+          "OSM Wikimedia": osmWikimedia,
+        };
+
+        L.control.layers(baseLayers).addTo(map);
+
+        if (map_geojson) {
+          L.geoJson(map_geojson).addTo(map);
+        } /* else if(map_bounds) {
+          L.rectangle(map_bounds, {color: "#ff7800", weight: 3, fill:false}).addTo(map);
+        } */
+      });
+
+      // this event occur only once per element
+      event.preventDefault();
+    });
+  });
+})(window, document, window.searxng);
--- a/client/simple/src/js/main/preferences.js
+++ b/client/simple/src/js/main/preferences.js
@@ -0,0 +1,53 @@
+/* SPDX-License-Identifier: AGPL-3.0-or-later */
+(function (w, d, searxng) {
+  'use strict';
+
+  if (searxng.endpoint !== 'preferences') {
+    return;
+  }
+
+  searxng.ready(function () {
+    let engine_descriptions = null;
+    function load_engine_descriptions () {
+      if (engine_descriptions == null) {
+        searxng.http("GET", "engine_descriptions.json").then(function (content) {
+          engine_descriptions = JSON.parse(content);
+          for (const [engine_name, description] of Object.entries(engine_descriptions)) {
+            let elements = d.querySelectorAll('[data-engine-name="' + engine_name + '"] .engine-description');
+            for (const element of elements) {
+              let source = ' (<i>' + searxng.settings.translations.Source + ':&nbsp;' + description[1] + '</i>)';
+              element.innerHTML = description[0] + source;
+            }
+          }
+        });
+      }
+    }
+
+    for (const el of d.querySelectorAll('[data-engine-name]')) {
+      searxng.on(el, 'mouseenter', load_engine_descriptions);
+    }
+
+    const enableAllEngines = d.querySelectorAll(".enable-all-engines");
+    const disableAllEngines = d.querySelectorAll(".disable-all-engines");
+    const engineToggles = d.querySelectorAll('tbody input[type=checkbox][class~=checkbox-onoff]');
+    const toggleEngines = (enable) => {
+      for (const el of engineToggles) {
+        // check if element visible, so that only engines of the current category are modified
+        if (el.offsetParent !== null) el.checked = !enable;
+      }
+    };
+    for (const el of enableAllEngines) {
+      searxng.on(el, 'click', () => toggleEngines(true));
+    }
+    for (const el of disableAllEngines) {
+      searxng.on(el, 'click', () => toggleEngines(false));
+    }
+
+    const copyHashButton = d.querySelector("#copy-hash");
+    searxng.on(copyHashButton, 'click', (e) => {
+      e.preventDefault();
+      navigator.clipboard.writeText(copyHashButton.dataset.hash);
+      copyHashButton.innerText = copyHashButton.dataset.copiedText;
+    });
+  });
+})(window, document, window.searxng);
--- a/client/simple/src/js/main/results.js
+++ b/client/simple/src/js/main/results.js
@@ -0,0 +1,184 @@
+/* SPDX-License-Identifier: AGPL-3.0-or-later */
+
+import "../../../node_modules/swiped-events/src/swiped-events.js";
+
+(function (w, d, searxng) {
+  'use strict';
+
+  if (searxng.endpoint !== 'results') {
+    return;
+  }
+
+  searxng.ready(function () {
+    d.querySelectorAll('#urls img').forEach(
+      img =>
+        img.addEventListener(
+          'error', () => {
+            // console.log("ERROR can't load: " + img.src);
+            img.src = window.searxng.settings.theme_static_path + "/img/img_load_error.svg";
+          },
+          {once: true}
+        ));
+
+    if (d.querySelector('#search_url button#copy_url')) {
+      d.querySelector('#search_url button#copy_url').style.display = "block";
+    }
+
+    searxng.on('.btn-collapse', 'click', function () {
+      var btnLabelCollapsed = this.getAttribute('data-btn-text-collapsed');
+      var btnLabelNotCollapsed = this.getAttribute('data-btn-text-not-collapsed');
+      var target = this.getAttribute('data-target');
+      var targetElement = d.querySelector(target);
+      var html = this.innerHTML;
+      if (this.classList.contains('collapsed')) {
+        html = html.replace(btnLabelCollapsed, btnLabelNotCollapsed);
+      } else {
+        html = html.replace(btnLabelNotCollapsed, btnLabelCollapsed);
+      }
+      this.innerHTML = html;
+      this.classList.toggle('collapsed');
+      targetElement.classList.toggle('invisible');
+    });
+
+    searxng.on('.media-loader', 'click', function () {
+      var target = this.getAttribute('data-target');
+      var iframe_load = d.querySelector(target + ' > iframe');
+      var srctest = iframe_load.getAttribute('src');
+      if (srctest === null || srctest === undefined || srctest === false) {
+        iframe_load.setAttribute('src', iframe_load.getAttribute('data-src'));
+      }
+    });
+
+    searxng.on('#copy_url', 'click', function () {
+      var target = this.parentElement.querySelector('pre');
+      navigator.clipboard.writeText(target.innerText);
+      this.innerText = this.dataset.copiedText;
+    });
+
+    // searxng.selectImage (gallery)
+    // -----------------------------
+
+    // setTimeout() ID, needed to cancel *last* loadImage
+    let imgTimeoutID;
+
+    // progress spinner, while an image is loading
+    const imgLoaderSpinner = d.createElement('div');
+    imgLoaderSpinner.classList.add('loader');
+
+    // singleton image object, which is used for all loading processes of a
+    // detailed image
+    const imgLoader = new Image();
+
+    const loadImage = (imgSrc, onSuccess) => {
+      // if defered image load exists, stop defered task.
+      if (imgTimeoutID) clearTimeout(imgTimeoutID);
+
+      // defer load of the detail image for 1 sec
+      imgTimeoutID = setTimeout(() => {
+        imgLoader.src = imgSrc;
+      }, 1000);
+
+      // set handlers in the on-properties
+      imgLoader.onload = () => {
+        onSuccess();
+        imgLoaderSpinner.remove();
+      };
+      imgLoader.onerror = () => {
+        imgLoaderSpinner.remove();
+      };
+    };
+
+    searxng.selectImage = (resultElement) => {
+
+      // add a class that can be evaluated in the CSS and indicates that the
+      // detail view is open
+      d.getElementById('results').classList.add('image-detail-open');
+
+      // add a hash to the browser history so that pressing back doesn't return
+      // to the previous page this allows us to dismiss the image details on
+      // pressing the back button on mobile devices
+      window.location.hash = '#image-viewer';
+
+      searxng.scrollPageToSelected();
+
+      // if there is none element given by the caller, stop here
+      if (!resultElement) return;
+
+      // find <img> object in the element, if there is none, stop here.
+      const img = resultElement.querySelector('.result-images-source img');
+      if (!img) return;
+
+      // <img src="" data-src="http://example.org/image.jpg">
+      const src = img.getAttribute('data-src');
+
+      // already loaded high-res image or no high-res image available
+      if (!src) return;
+
+      // use the image thumbnail until the image is fully loaded
+      const thumbnail = resultElement.querySelector('.image_thumbnail');
+      img.src = thumbnail.src;
+
+      // show a progress spinner
+      const detailElement = resultElement.querySelector('.detail');
+      detailElement.appendChild(imgLoaderSpinner);
+
+      // load full size image in background
+      loadImage(src, () => {
+        // after the singelton loadImage has loaded the detail image into the
+        // cache, it can be used in the origin <img> as src property.
+        img.src = src;
+        img.removeAttribute('data-src');
+      });
+    };
+
+    searxng.closeDetail = function () {
+      d.getElementById('results').classList.remove('image-detail-open');
+      // remove #image-viewer hash from url by navigating back
+      if (window.location.hash == '#image-viewer') window.history.back();
+      searxng.scrollPageToSelected();
+    };
+    searxng.on('.result-detail-close', 'click', e => {
+      e.preventDefault();
+      searxng.closeDetail();
+    });
+    searxng.on('.result-detail-previous', 'click', e => {
+      e.preventDefault();
+      searxng.selectPrevious(false);
+    });
+    searxng.on('.result-detail-next', 'click', e => {
+      e.preventDefault();
+      searxng.selectNext(false);
+    });
+
+    // listen for the back button to be pressed and dismiss the image details when called
+    window.addEventListener('hashchange', () => {
+      if (window.location.hash != '#image-viewer') searxng.closeDetail();
+    });
+
+    d.querySelectorAll('.swipe-horizontal').forEach(
+      obj => {
+        obj.addEventListener('swiped-left', function () {
+          searxng.selectNext(false);
+        });
+        obj.addEventListener('swiped-right', function () {
+          searxng.selectPrevious(false);
+        });
+      }
+    );
+
+    w.addEventListener('scroll', function () {
+      var e = d.getElementById('backToTop'),
+        scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
+        results = d.getElementById('results');
+      if (e !== null) {
+        if (scrollTop >= 100) {
+          results.classList.add('scrolling');
+        } else {
+          results.classList.remove('scrolling');
+        }
+      }
+    }, true);
+
+  });
+
+})(window, document, window.searxng);
--- a/client/simple/src/js/main/search.js
+++ b/client/simple/src/js/main/search.js
@@ -0,0 +1,199 @@
+/* SPDX-License-Identifier: AGPL-3.0-or-later */
+/* exported AutoComplete */
+
+(function (w, d, searxng) {
+  'use strict';
+
+  var qinput_id = "q", qinput;
+
+  const isMobile = window.matchMedia("only screen and (max-width: 50em)").matches;
+  const isResultsPage = document.querySelector("main").id == "main_results";
+
+  function submitIfQuery () {
+    if (qinput.value.length  > 0) {
+      var search = document.getElementById('search');
+      setTimeout(search.submit.bind(search), 0);
+    }
+  }
+
+  function createClearButton (qinput) {
+    var cs = document.getElementById('clear_search');
+    var updateClearButton = function () {
+      if (qinput.value.length === 0) {
+        cs.classList.add("empty");
+      } else {
+        cs.classList.remove("empty");
+      }
+    };
+
+    // update status, event listener
+    updateClearButton();
+    cs.addEventListener('click', function (ev) {
+      qinput.value = '';
+      qinput.focus();
+      updateClearButton();
+      ev.preventDefault();
+    });
+    qinput.addEventListener('input', updateClearButton, false);
+  }
+
+  const fetchResults = async (query) => {
+    let request;
+    if (searxng.settings.method === 'GET') {
+      const reqParams = new URLSearchParams();
+      reqParams.append("q", query);
+      request = fetch("./autocompleter?" + reqParams.toString());
+    } else {
+      const formData = new FormData();
+      formData.append("q", query);
+      request = fetch("./autocompleter", {
+        method: 'POST',
+        body: formData,
+      });
+    }
+
+    request.then(async function (response) {
+      const results = await response.json();
+
+      if (!results) return;
+
+      const autocomplete = d.querySelector(".autocomplete");
+      const autocompleteList = d.querySelector(".autocomplete ul");
+      autocomplete.classList.add("open");
+      autocompleteList.innerHTML = "";
+
+      // show an error message that no result was found
+      if (!results[1] || results[1].length == 0) {
+        const noItemFoundMessage = document.createElement("li");
+        noItemFoundMessage.classList.add('no-item-found');
+        noItemFoundMessage.innerHTML = searxng.settings.translations.no_item_found;
+        autocompleteList.appendChild(noItemFoundMessage);
+        return;
+      }
+
+      for (let result of results[1]) {
+        const li = document.createElement("li");
+        li.innerText = result;
+
+        searxng.on(li, 'mousedown', () => {
+          qinput.value = result;
+          const form = d.querySelector("#search");
+          form.submit();
+          autocomplete.classList.remove('open');
+        });
+        autocompleteList.appendChild(li);
+      }
+    });
+  };
+
+  searxng.ready(function () {
+    // focus search input on large screens
+    if (!isMobile && !isResultsPage) document.getElementById("q").focus();
+
+    qinput = d.getElementById(qinput_id);
+    const autocomplete = d.querySelector(".autocomplete");
+    const autocompleteList = d.querySelector(".autocomplete ul");
+
+    if (qinput !== null) {
+      // clear button
+      createClearButton(qinput);
+
+      // autocompleter
+      if (searxng.settings.autocomplete) {
+        searxng.on(qinput, 'input', () => {
+          const query = qinput.value;
+          if (query.length < searxng.settings.autocomplete_min) return;
+
+          setTimeout(() => {
+            if (query == qinput.value) fetchResults(query);
+          }, 300);
+        });
+
+        searxng.on(qinput, 'keyup', (e) => {
+          let currentIndex = -1;
+          const listItems = autocompleteList.children;
+          for (let i = 0; i < listItems.length; i++) {
+            if (listItems[i].classList.contains('active')) {
+              currentIndex = i;
+              break;
+            }
+          }
+
+          let newCurrentIndex = -1;
+          if (e.key === "ArrowUp") {
+            if (currentIndex >= 0) listItems[currentIndex].classList.remove('active');
+            // we need to add listItems.length to the index calculation here because the JavaScript modulos
+            // operator doesn't work with negative numbers
+            newCurrentIndex = (currentIndex - 1 + listItems.length) % listItems.length;
+          } else if (e.key === "ArrowDown") {
+            if (currentIndex >= 0) listItems[currentIndex].classList.remove('active');
+            newCurrentIndex = (currentIndex + 1) % listItems.length;
+          } else if (e.key === "Tab" || e.key === "Enter") {
+            autocomplete.classList.remove('open');
+          }
+
+          if (newCurrentIndex != -1) {
+            const selectedItem = listItems[newCurrentIndex];
+            selectedItem.classList.add('active');
+
+            if (!selectedItem.classList.contains('no-item-found')) qinput.value = selectedItem.innerText;
+          }
+        });
+      }
+    }
+
+    // Additionally to searching when selecting a new category, we also
+    // automatically start a new search request when the user changes a search
+    // filter (safesearch, time range or language) (this requires JavaScript
+    // though)
+    if (
+      qinput !== null
+        && searxng.settings.search_on_category_select
+      // If .search_filters is undefined (invisible) we are on the homepage and
+      // hence don't have to set any listeners
+        && d.querySelector(".search_filters") != null
+    ) {
+      searxng.on(d.getElementById('safesearch'), 'change', submitIfQuery);
+      searxng.on(d.getElementById('time_range'), 'change', submitIfQuery);
+      searxng.on(d.getElementById('language'), 'change', submitIfQuery);
+    }
+
+    const categoryButtons = d.querySelectorAll("button.category_button");
+    for (let button of categoryButtons) {
+      searxng.on(button, 'click', (event) => {
+        if (event.shiftKey) {
+          event.preventDefault();
+          button.classList.toggle("selected");
+          return;
+        }
+
+        // manually deselect the old selection when a new category is selected
+        const selectedCategories = d.querySelectorAll("button.category_button.selected");
+        for (let categoryButton of selectedCategories) {
+          categoryButton.classList.remove("selected");
+        }
+        button.classList.add("selected");
+      });
+    }
+
+    // override form submit action to update the actually selected categories
+    const form = d.querySelector("#search");
+    if (form != null) {
+      searxng.on(form, 'submit', (event) => {
+        event.preventDefault();
+        const categoryValuesInput = d.querySelector("#selected-categories");
+        if (categoryValuesInput) {
+          let categoryValues = [];
+          for (let categoryButton of categoryButtons) {
+            if (categoryButton.classList.contains("selected")) {
+              categoryValues.push(categoryButton.name.replace("category_", ""));
+            }
+          }
+          categoryValuesInput.value = categoryValues.join(",");
+        }
+        form.submit();
+      });
+    }
+  });
+
+})(window, document, window.searxng);
--- a/client/simple/src/js/searxng.head.js
+++ b/client/simple/src/js/searxng.head.js
@@ -0,0 +1 @@
+import "./head/00_init.js";
--- a/client/simple/src/js/searxng.js
+++ b/client/simple/src/js/searxng.js
@@ -0,0 +1,7 @@
+import "./main/00_toolkit.js";
+import "./main/infinite_scroll.js";
+import "./main/keyboard.js";
+import "./main/mapresult.js";
+import "./main/preferences.js";
+import "./main/results.js";
+import "./main/search.js";
--- a/client/simple/src/less/animations.less
+++ b/client/simple/src/less/animations.less
@@ -0,0 +1,19 @@
+.dialog-modal {
+  animation-name: dialogmodal;
+  animation-duration: 0.13s;
+
+  @keyframes dialogmodal {
+    0% {
+      opacity: 0;
+    }
+
+    50% {
+      opacity: 0.5;
+      transform: translate(-50%, -50%) scale(1.05);
+    }
+  }
+}
+
+input.checkbox-onoff[type="checkbox"]::before {
+  transition: left 0.25s;
+}
--- a/client/simple/src/less/autocomplete.less
+++ b/client/simple/src/less/autocomplete.less
@@ -0,0 +1,73 @@
+/*! Autocomplete.js v2.6.3 | license MIT | (c) 2017, Baptiste Donaux | http://autocomplete-js.com */
+
+.autocomplete {
+  position: absolute;
+  width: @search-width;
+  max-width: calc(100% - 2 * @search-padding-horizontal);
+  max-height: 0;
+  overflow-y: hidden;
+  .ltr-text-align-left();
+
+  .rounded-corners;
+
+  &:active,
+  &:focus,
+  &:hover {
+    background-color: var(--color-autocomplete-background);
+  }
+
+  &:empty {
+    display: none;
+  }
+
+  > ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+
+    > li {
+      cursor: pointer;
+      padding: 0.5rem 1rem;
+
+      &.active,
+      &:active,
+      &:focus,
+      &:hover {
+        background-color: var(--color-autocomplete-background-hover);
+
+        a:active,
+        a:focus,
+        a:hover {
+          text-decoration: none;
+        }
+      }
+
+      &.locked {
+        cursor: inherit;
+      }
+    }
+  }
+
+  &.open {
+    display: block;
+    background-color: var(--color-autocomplete-background);
+    color: var(--color-autocomplete-font);
+    max-height: 32rem;
+    overflow-y: auto;
+    z-index: 5000;
+    margin-top: 3.5rem;
+    border-radius: 0.8rem;
+
+    &:empty {
+      display: none;
+    }
+  }
+}
+
+@media screen and (max-width: @phone) {
+  .autocomplete {
+    > ul > li {
+      padding: 1rem;
+    }
+  }
+}
--- a/client/simple/src/less/code.less
+++ b/client/simple/src/less/code.less
@@ -0,0 +1,51 @@
+@import "../../generated/pygments.less";
+
+.codelines {
+  margin: @results-margin 0 0 0;
+  padding: @result-padding 0 0 0;
+}
+
+.code-highlight-sxng() {
+  .code-highlight {
+    pre {
+      overflow: auto;
+      margin: 0;
+      padding: 0 0 0.75rem 0;
+    }
+
+    .linenos {
+      user-select: none;
+      cursor: default;
+
+      &::selection {
+        background: transparent; /* WebKit/Blink Browsers */
+      }
+
+      &::-moz-selection {
+        background: transparent; /* Gecko Browsers */
+      }
+      margin-right: 8px;
+      text-align: right;
+    }
+
+    span.linenos {
+      color: var(--color-line-number);
+    }
+  }
+}
+
+.code-highlight-sxng();
+
+/// Dark Theme (autoswitch based on device pref)
+@media (prefers-color-scheme: dark) {
+  :root.theme-auto {
+    .code-highlight-dark();
+    .code-highlight-sxng();
+  }
+}
+
+// Dark Theme by preferences
+:root.theme-dark {
+  .code-highlight-dark();
+  .code-highlight-sxng();
+}
--- a/client/simple/src/less/custom_iyas.less
+++ b/client/simple/src/less/custom_iyas.less
@@ -0,0 +1,32 @@
+.search_filters {
+  display: none !important;
+}
+
+footer {
+  p {
+    display: none !important;
+  }
+}
+
+#engines_msg {
+  display: none !important;
+}
+
+#search_url {
+  display: none !important;
+}
+
+#links_on_top {
+  display: none !important;
+}
+
+.result {
+  .engines {
+    display: none !important;
+  }
+}
+
+.favicon img {
+  background: none !important;
+  border: none !important;
+}
--- a/client/simple/src/less/definitions.less
+++ b/client/simple/src/less/definitions.less
@@ -0,0 +1,313 @@
+/*
+ * SearXNG, A privacy-respecting, hackable metasearch engine
+ *
+ * To change the colors of the site, simple edit this variables
+ */
+
+/// Light Theme
+:root {
+  /// Base Colors
+  --color-base-font: #444;
+  --color-base-font-rgb: 68, 68, 68;
+  --color-base-background: #fff;
+  --color-base-background-mobile: #f2f5f8;
+  --color-url-font: #334999;
+  --color-url-visited-font: #9822c3;
+  /// Header Colors
+  --color-header-background: #fdfbff;
+  --color-header-border: #ddd;
+  /// Footer Colors
+  --color-footer-background: #fdfbff;
+  --color-footer-border: #ddd;
+  /// Sidebar Colors
+  --color-sidebar-border: #ddd;
+  --color-sidebar-font: #000;
+  --color-sidebar-background: #fff;
+  /// BackToTop Colors
+  --color-backtotop-font: #444;
+  --color-backtotop-border: #ddd;
+  --color-backtotop-background: #fff;
+  /// Button Colors
+  --color-btn-background: #3050ff;
+  --color-btn-font: #fff;
+  --color-show-btn-background: #bbb;
+  --color-show-btn-font: #000;
+  /// Search Input Colors
+  --color-search-border: #bbb;
+  --color-search-shadow: 0 2px 8px rgb(34 38 46 / 25%);
+  --color-search-background: #fff;
+  --color-search-font: #222;
+  --color-search-background-hover: #3050ff;
+  /// Modal Colors
+  --color-error: #db3434;
+  --color-error-background: lighten(#db3434, 40%);
+  --color-warning: #dbba34;
+  --color-warning-background: lighten(#dbba34, 40%);
+  --color-success: #42db34;
+  --color-success-background: lighten(#42db34, 40%);
+  /// Categories Colors
+  --color-categories-item-selected-font: #3050ff;
+  --color-categories-item-border-selected: #3050ff;
+  /// Autocomplete Colors
+  --color-autocomplete-font: #000;
+  --color-autocomplete-border: #bbb;
+  --color-autocomplete-shadow: 0 2px 8px rgb(34 38 46 / 25%);
+  --color-autocomplete-background: #fff;
+  --color-autocomplete-background-hover: #e3e3e3;
+  /// Answer Colors
+  --color-answer-font: #444; // same as --color-base-font
+  --color-answer-background: #fff;
+  // colors of the KeyValue result class
+  --color-result-keyvalue-col-table: #fdfbff;
+  --color-result-keyvalue-odd: #fdfbff;
+  --color-result-keyvalue-even: #fff;
+  /// Results Colors
+  --color-result-background: #fff;
+  --color-result-border: #ddd;
+  --color-result-url-font: #000;
+  --color-result-vim-selected: #f7f7f7;
+  --color-result-vim-arrow: #000bbb;
+  --color-result-description-highlight-font: #000;
+  --color-result-link-font: #000bbb;
+  --color-result-link-font-highlight: #000bbb;
+  --color-result-link-visited-font: #9822c3;
+  --color-result-publishdate-font: #777;
+  --color-result-engines-font: #545454;
+  --color-result-search-url-border: #ddd;
+  --color-result-search-url-font: #000;
+  // Images Colors
+  --color-result-image-span-font: #444;
+  --color-result-image-span-font-selected: #fff;
+  --color-result-image-background: #fff;
+  /// Settings Colors
+  --color-settings-tr-hover: #ebebeb;
+  --color-settings-engine-description-font: #545454;
+  --color-settings-table-group-background: #0001;
+  /// Detail modal
+  --color-result-detail-font: #fff;
+  --color-result-detail-label-font: lightgray;
+  --color-result-detail-background: #242424;
+  --color-result-detail-hr: #555;
+  --color-result-detail-link: #8af;
+  --color-result-detail-loader-border: rgb(255 255 255 / 20%);
+  --color-result-detail-loader-borderleft: rgb(0 0 0 / 0%);
+  /// Toolkit Colors
+  --color-toolkit-badge-font: #fff;
+  --color-toolkit-badge-background: #545454;
+  --color-toolkit-kbd-font: #fff;
+  --color-toolkit-kbd-background: #000;
+  --color-toolkit-dialog-border: #ddd;
+  --color-toolkit-dialog-background: #fff;
+  --color-toolkit-tabs-label-border: #fff;
+  --color-toolkit-tabs-section-border: #ddd;
+  --color-toolkit-select-background: #e1e1e1;
+  --color-toolkit-select-border: #ddd;
+  --color-toolkit-select-background-hover: #bbb;
+  --color-toolkit-input-text-font: #222;
+  --color-toolkit-checkbox-onoff-off-background: #ddd;
+  --color-toolkit-checkbox-onoff-on-background: #ddd;
+  --color-toolkit-checkbox-onoff-on-mark-background: #3050ff;
+  --color-toolkit-checkbox-onoff-on-mark-color: #fff;
+  --color-toolkit-checkbox-onoff-off-mark-background: #aaa;
+  --color-toolkit-checkbox-onoff-off-mark-color: #fff;
+  --color-toolkit-checkbox-label-background: #ddd;
+  --color-toolkit-checkbox-label-border: #ddd;
+  --color-toolkit-checkbox-input-border: #3050ff;
+  --color-toolkit-engine-tooltip-border: #ddd;
+  --color-toolkit-engine-tooltip-background: #fff;
+  --color-toolkit-loader-border: rgb(0 0 0 / 20%);
+  --color-toolkit-loader-borderleft: rgb(255 255 255 / 0%);
+  --color-doc-code: #003;
+  --color-doc-code-background: #ddeaff;
+  /// Other misc colors
+  --color-bar-chart-primary: #5bc0de;
+  --color-bar-chart-secondary: #deb15b;
+  --color-image-resolution-background: rgb(0 0 0 / 50%);
+  --color-image-resolution-font: #fff;
+  --color-loading-indicator: rgb(255 255 255 / 20%);
+  --color-loading-indicator-gap: #fff;
+  --color-line-number: #64708d;
+  // Favicons Colors
+  --color-favicon-background-color: #ddd;
+  --color-favicon-border-color: #ccc;
+}
+
+.dark-themes() {
+  /// Base Colors
+  --color-base-font: #bbb;
+  --color-base-font-rgb: 187, 187, 187;
+  --color-base-background: #222428;
+  --color-base-background-mobile: #222428;
+  --color-url-font: #8af;
+  --color-url-visited-font: #c09cd9;
+  /// Header Colors
+  --color-header-background: #1e1e22;
+  --color-header-border: #333;
+  /// Footer Colors
+  --color-footer-background: #1e1e22;
+  --color-footer-border: #333;
+  /// Sidebar Colors
+  --color-sidebar-border: #555;
+  --color-sidebar-font: #fff;
+  --color-sidebar-background: #292c34;
+  /// BackToTop Colors
+  --color-backtotop-font: #bbb;
+  --color-backtotop-border: #333;
+  --color-backtotop-background: #2b2e36;
+  /// Button Colors
+  --color-btn-background: #58f;
+  --color-btn-font: #222;
+  --color-show-btn-background: #555;
+  --color-show-btn-font: #fff;
+  /// Search Input Colors
+  --color-search-border: #555;
+  --color-search-shadow: 0 2px 8px rgb(34 38 46 / 25%);
+  --color-search-background: #2b2e36;
+  --color-search-font: #fff;
+  --color-search-background-hover: #58f;
+  /// Modal Colors
+  --color-error: #f55b5b;
+  --color-error-background: darken(#db3434, 40%);
+  --color-warning: #f1d561;
+  --color-warning-background: darken(#dbba34, 40%);
+  --color-success: #79f56e;
+  --color-success-background: darken(#42db34, 40%);
+  /// Categories Colors
+  --color-categories-item-selected-font: #58f;
+  --color-categories-item-border-selected: #58f;
+  /// Autocomplete Colors
+  --color-autocomplete-font: #fff;
+  --color-autocomplete-border: #555;
+  --color-autocomplete-shadow: 0 2px 8px rgb(34 38 46 / 25%);
+  --color-autocomplete-background: #2b2e36;
+  --color-autocomplete-background-hover: #1e1e22;
+  /// Answer Colors
+  --color-answer-font: #bbb; // same as --color-base-font
+  --color-answer-background: #26292f;
+  // colors of the KeyValue result class
+  --color-result-keyvalue-col-table: #1e1e22;
+  --color-result-keyvalue-odd: #1e1e22;
+  --color-result-keyvalue-even: #26292f;
+  /// Results Colors
+  --color-result-background: #26292f;
+  --color-result-border: #333;
+  --color-result-url-font: #fff;
+  --color-result-vim-selected: #1f1f23cc;
+  --color-result-vim-arrow: #8af;
+  --color-result-description-highlight-font: #fff;
+  --color-result-link-font: #8af;
+  --color-result-link-font-highlight: #8af;
+  --color-result-link-visited-font: #c09cd9;
+  --color-result-publishdate-font: #888;
+  --color-result-engines-font: #a4a4a4;
+  --color-result-search-url-border: #555;
+  --color-result-search-url-font: #fff;
+  /// Detail modal : same as the light version
+  --color-result-detail-font: #fff;
+  --color-result-detail-label-font: lightgray;
+  --color-result-detail-background: #1a1a1c;
+  --color-result-detail-hr: #555;
+  --color-result-detail-link: #8af;
+  --color-result-detail-loader-border: rgb(255 255 255 / 20%);
+  --color-result-detail-loader-borderleft: rgb(0 0 0 / 0%);
+  // Images Colors
+  --color-result-image-span-font: #bbb;
+  --color-result-image-span-font-selected: #222;
+  --color-result-image-background: #222;
+  /// Settings Colors
+  --color-settings-tr-hover: #2c2c32;
+  --color-settings-engine-description-font: darken(#dcdcdc, 30%);
+  --color-settings-table-group-background: #1b1b21;
+  /// Toolkit Colors
+  --color-toolkit-badge-font: #fff;
+  --color-toolkit-badge-background: #555;
+  --color-toolkit-kbd-font: #000;
+  --color-toolkit-kbd-background: #fff;
+  --color-toolkit-dialog-border: #555;
+  --color-toolkit-dialog-background: #1e1e22;
+  --color-toolkit-tabs-label-border: #222;
+  --color-toolkit-tabs-section-border: #555;
+  --color-toolkit-select-background: #313338;
+  --color-toolkit-select-border: #555;
+  --color-toolkit-select-background-hover: #373b49;
+  --color-toolkit-input-text-font: #fff;
+  --color-toolkit-checkbox-onoff-off-background: #313338;
+  --color-toolkit-checkbox-onoff-on-background: #313338;
+  --color-toolkit-checkbox-onoff-on-mark-background: #58f;
+  --color-toolkit-checkbox-onoff-on-mark-color: #222;
+  --color-toolkit-checkbox-onoff-off-mark-background: #ddd;
+  --color-toolkit-checkbox-onoff-off-mark-color: #222;
+  --color-toolkit-checkbox-label-background: #222;
+  --color-toolkit-checkbox-label-border: #333;
+  --color-toolkit-checkbox-input-border: #58f;
+  --color-toolkit-engine-tooltip-border: #333;
+  --color-toolkit-engine-tooltip-background: #222;
+  --color-toolkit-loader-border: rgb(255 255 255 / 20%);
+  --color-toolkit-loader-borderleft: rgb(0 0 0 / 0%);
+  --color-doc-code: #ddd;
+  --color-doc-code-background: #4d5a6f;
+  // Favicons Colors
+  --color-favicon-background-color: #ddd;
+  --color-favicon-border-color: #ccc;
+}
+
+.black-themes() {
+  --color-base-background: #000;
+  --color-base-background-mobile: #000;
+  --color-header-background: #000;
+  --color-footer-background: #000;
+  --color-sidebar-background: #000;
+}
+
+/// Dark Theme (autoswitch based on device pref)
+@media (prefers-color-scheme: dark) {
+  :root.theme-auto {
+    .dark-themes();
+  }
+}
+
+// Dark Theme by preferences
+:root.theme-dark {
+  .dark-themes();
+}
+
+:root.theme-black {
+  .dark-themes();
+  .black-themes();
+}
+
+/// General Size
+@results-width: 45rem;
+@results-sidebar-width: 25rem;
+@results-offset: 10rem;
+@results-tablet-offset: 0.5rem;
+@results-gap: 5rem;
+@results-margin: 0.125rem;
+@result-padding: 1rem;
+@results-image-row-height: 12rem;
+@results-image-row-height-phone: 10rem;
+@search-width: 44rem;
+// height of #search, see detail.less
+@search-height: 13rem;
+@search-padding-horizontal: 0.5rem;
+
+/// Device Size
+/// @desktop > @tablet
+@tablet: 79.75em; // see https://github.com/searxng/searxng/issues/874
+@phone: 50em;
+@small-phone: 35em;
+@ultra-small-phone: 20rem;
+
+/// From style.less
+@stacked-bar-chart: rgb(0, 0, 0);
+
+/// Load fonts from this directory.
+@icon-font-path: "../../../fonts/";
+//** File name for all font files.
+@icon-font-name: "glyphicons-halflings-regular";
+//** Element ID within SVG icon file.
+@icon-font-svg-id: "glyphicons_halflingsregular";
+
+// decoration of the select HTML elements
+@select-light-svg-path: "../svg/select-light.svg";
+@select-dark-svg-path: "../svg/select-dark.svg";
--- a/client/simple/src/less/detail.less
+++ b/client/simple/src/less/detail.less
@@ -0,0 +1,256 @@
+#main_results #results.image-detail-open.only_template_images {
+  width: min(98%, 59.25rem) !important;
+}
+
+#main_results #results.only_template_images.image-detail-open #backToTop {
+  .ltr-left(56.75rem) !important;
+  .ltr-right(inherit);
+}
+
+article.result-images .detail {
+  display: none;
+}
+
+#results.image-detail-open article.result-images[data-vim-selected] .detail {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  .ltr-left(60rem);
+  .ltr-right(0);
+  top: @search-height;
+  transition: top 0.064s ease-in 0s;
+  bottom: 0;
+  background: var(--color-result-detail-background);
+  border: 1px solid var(--color-result-detail-background);
+  z-index: 1000;
+  padding: 4rem 3rem 3rem 3rem;
+  overflow-y: scroll;
+
+  a.result-images-source {
+    display: block;
+    flex: 1;
+    text-align: left;
+    width: 100%;
+    border: none;
+    text-decoration: none;
+
+    img {
+      padding: 0;
+      margin: 0;
+      border: none;
+      object-fit: contain;
+      width: inherit;
+      height: inherit;
+      max-width: 100%;
+      min-height: inherit;
+      max-height: calc(100vh - 25rem - 17rem);
+      background: inherit;
+    }
+  }
+
+  .result-images-labels {
+    color: var(--color-result-detail-font);
+    height: 19rem;
+
+    hr {
+      border-top: 1px solid var(--color-result-detail-hr);
+      border-bottom: none;
+    }
+
+    h4 {
+      height: 2rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: 0.9rem;
+      margin-bottom: 0;
+    }
+
+    p {
+      color: var(--color-result-detail-label-font);
+      font-size: 0.9rem;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      margin: 0.8rem 0;
+
+      span {
+        display: inline-block;
+        width: 12rem;
+      }
+    }
+
+    h4,
+    p,
+    a {
+      .ltr-text-align-left();
+    }
+
+    p.result-content {
+      height: 2rem;
+      line-height: unset;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    p.result-url {
+      white-space: nowrap;
+      overflow: hidden hidden;
+      text-overflow: ellipsis;
+    }
+
+    p.result-content:hover,
+    p.result-url:hover {
+      position: relative;
+      overflow: inherit !important;
+      background: var(--color-result-detail-background);
+      text-overflow: inherit !important;
+    }
+
+    a,
+    a:visited,
+    a:hover,
+    a:active {
+      color: var(--color-result-detail-link);
+    }
+
+    a:hover {
+      text-decoration: underline;
+    }
+  }
+
+  a.result-detail-close {
+    top: 1rem;
+    .ltr-left(1rem);
+    padding: 0.4rem;
+  }
+
+  a.result-detail-previous {
+    top: 1rem;
+    .ltr-right(6rem);
+    // center the icon by moving it slightly on the left
+    padding-top: 0.4rem;
+    .ltr-padding-right(0.5rem);
+    padding-bottom: 0.4rem;
+    .ltr-padding-left(0.3rem);
+  }
+
+  a.result-detail-next {
+    top: 1rem;
+    .ltr-right(2rem);
+    padding: 0.4rem;
+  }
+
+  a.result-detail-close,
+  a.result-detail-next,
+  a.result-detail-previous {
+    border-radius: 50%;
+    display: block;
+    width: 1.5rem;
+    height: 1.5rem;
+    position: absolute;
+    filter: opacity(40%);
+    z-index: 1200;
+
+    span {
+      display: block;
+      width: 1.5rem;
+      height: 1.5rem;
+      text-align: center;
+    }
+  }
+
+  a.result-detail-next,
+  a.result-detail-previous {
+    span::before {
+      // vertical center small icons
+      vertical-align: sub;
+    }
+  }
+
+  a.result-detail-close,
+  a.result-detail-close:visited,
+  a.result-detail-close:hover,
+  a.result-detail-close:active,
+  a.result-detail-previous,
+  a.result-detail-previous:visited,
+  a.result-detail-previous:hover,
+  a.result-detail-previous:active,
+  a.result-detail-next,
+  a.result-detail-next:visited,
+  a.result-detail-next:hover,
+  a.result-detail-next:active {
+    color: var(--color-result-detail-font);
+    background: var(--color-result-detail-background);
+    border: 1px solid var(--color-result-detail-font);
+  }
+
+  a.result-detail-close:focus,
+  a.result-detail-close:hover,
+  a.result-detail-previous:focus,
+  a.result-detail-previous:hover,
+  a.result-detail-next:focus,
+  a.result-detail-next:hover {
+    filter: opacity(80%);
+  }
+
+  .loader {
+    position: absolute;
+    top: 1rem;
+    .ltr-right(50%);
+    border-top: 0.5em solid var(--color-result-detail-loader-border);
+    border-right: 0.5em solid var(--color-result-detail-loader-border);
+    border-bottom: 0.5em solid var(--color-result-detail-loader-border);
+    border-left: 0.5em solid var(--color-result-detail-loader-borderleft);
+  }
+}
+
+#results.image-detail-open.scrolling
+  article.result-images[data-vim-selected]
+  .detail {
+  top: 0;
+
+  a.result-images-source img {
+    max-height: calc(100vh - 25rem);
+  }
+}
+
+@media screen and (max-width: @tablet) {
+  #results.image-detail-open article.result-images[data-vim-selected] .detail {
+    top: 0;
+    .ltr-left(0);
+
+    a.result-images-source {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      img {
+        width: 100%;
+        max-height: calc(100vh - 24rem);
+      }
+    }
+
+    a.result-detail-next {
+      .ltr-right(1rem);
+    }
+  }
+}
+
+@media screen and (max-width: @phone) {
+  #results.image-detail-open article.result-images[data-vim-selected] .detail {
+    top: 0;
+    .ltr-left(0);
+    padding: 1rem;
+
+    a.result-images-source img {
+      width: 100%;
+      max-height: calc(100vh - 20rem);
+      margin: 0;
+    }
+
+    .result-images-labels p span {
+      width: inherit;
+      .ltr-margin-right(1rem);
+    }
+  }
+}
--- a/client/simple/src/less/embedded.less
+++ b/client/simple/src/less/embedded.less
@@ -0,0 +1,39 @@
+iframe[src^="https://w.soundcloud.com"]
+{
+  height: 120px;
+}
+
+iframe[src^="https://www.deezer.com"]
+{
+  // The real size is 92px, but 94px are needed to avoid an inner scrollbar of
+  // the embedded HTML.
+  height: 94px;
+}
+
+iframe[src^="https://www.mixcloud.com"]
+{
+  // the embedded player from mixcloud has some quirks: initial there is an
+  // issue with an image URL that is blocked since it is an a Cross-Origin
+  // request. The alternative text (<img alt='Mixcloud Logo'> then cause an
+  // scrollbar in the inner of the iframe we can't avoid.  Another quirk comes
+  // when pressing the play button, sometimes the shown player has an height of
+  // 200px, sometimes 250px.
+  height: 250px;
+}
+
+iframe[src^="https://bandcamp.com/EmbeddedPlayer"]
+{
+  // show playlist
+  height: 350px;
+}
+
+iframe[src^="https://bandcamp.com/EmbeddedPlayer/track"]
+{
+  // hide playlist
+  height: 120px;
+}
+
+iframe[src^="https://genius.com/songs"]
+{
+  height: 65px;
+}
--- a/client/simple/src/less/index.less
+++ b/client/simple/src/less/index.less
@@ -0,0 +1,51 @@
+#main_index {
+  margin-top: 26vh;
+}
+
+.index {
+  text-align: center;
+
+  .title {
+    background: url("../img/searxng.png") no-repeat;
+    min-height: 4rem;
+    margin: 4rem auto;
+    background-position: center;
+    background-size: contain;
+  }
+
+  h1 {
+    font-size: 4em;
+    visibility: hidden;
+  }
+
+  #search,
+  #search_header {
+    margin: 0 auto;
+    background: inherit;
+    border: inherit;
+    padding: 0;
+    display: block;
+  }
+
+  .search_filters {
+    display: block;
+    margin: 1em 0;
+  }
+
+  .category label {
+    padding: 6px 10px;
+    border-bottom: initial !important;
+  }
+}
+
+@media screen and (max-width: @tablet) {
+  div.title {
+    h1 {
+      font-size: 1em;
+    }
+  }
+
+  #main_index {
+    margin-top: 6em;
+  }
+}
--- a/client/simple/src/less/info.less
+++ b/client/simple/src/less/info.less
@@ -0,0 +1,10 @@
+.info-page {
+  code {
+    font-family: monospace;
+    .rounded-corners-tiny;
+    background-color: var(--color-doc-code-background);
+    color: var(--color-doc-code);
+    padding: 0.2rem;
+    border: 0 none;
+  }
+}
--- a/client/simple/src/less/mixins.less
+++ b/client/simple/src/less/mixins.less
@@ -0,0 +1,40 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+// Mixins
+.text-size-adjust (@property: 100%) {
+  -webkit-text-size-adjust: @property;
+  -ms-text-size-adjust: @property;
+  -moz-text-size-adjust: @property;
+  text-size-adjust: @property;
+}
+
+.rounded-corners (@radius: 10px) {
+  border-radius: @radius;
+}
+
+.rounded-right-corners (@radius: 0 10px 10px 0) {
+  border-radius: @radius;
+}
+
+.rounded-corners-tiny (@radius: 5px) {
+  border-radius: @radius;
+}
+
+// disable user selection
+.disable-user-select () {
+  -webkit-touch-callout: none;
+  user-select: none;
+}
+
+.show-content-button() {
+  padding: 5px 10px;
+  .rounded-corners-tiny;
+  background: var(--color-show-btn-background);
+  color: var(--color-show-btn-font);
+  cursor: pointer;
+
+  &:hover {
+    background: var(--color-btn-background);
+    color: var(--color-btn-font);
+  }
+}
--- a/client/simple/src/less/new_issue.less
+++ b/client/simple/src/less/new_issue.less
@@ -0,0 +1,37 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+.stats_endpoint {
+  .github-issue-button {
+    display: block;
+    font-size: 16px;
+  }
+
+  .issue-hide {
+    display: none;
+  }
+
+  input[type="checked"] {
+    position: absolute;
+  }
+
+  label {
+    margin: 1rem 1rem 1rem 0;
+  }
+
+  .step_content {
+    margin: 1rem 1rem 1rem 2rem;
+  }
+
+  .step1,
+  .step2 {
+    visibility: hidden;
+  }
+
+  .step1_delay {
+    transition: visibility 0s linear 4s;
+  }
+
+  #step1:checked ~ .step1,
+  #step2:checked ~ .step2 {
+    visibility: visible;
+  }
+}
--- a/client/simple/src/less/preferences.less
+++ b/client/simple/src/less/preferences.less
@@ -0,0 +1,233 @@
+table {
+  border-collapse: collapse;
+
+  th,
+  td {
+    text-align: center;
+    padding: 1rem 0.5rem;
+    .ltr-text-align-left();
+  }
+
+  tr.pref-group th {
+    font-weight: normal;
+    .ltr-text-align-left();
+    background: var(--color-settings-table-group-background);
+  }
+}
+
+#main_preferences {
+  form {
+    width: 100%;
+  }
+
+  fieldset {
+    margin: 8px;
+    border: none;
+  }
+
+  legend {
+    margin: 0;
+    padding: 5px 0 0 0;
+    display: block;
+    .ltr-float-left();
+    width: 300px;
+  }
+
+  input[type="text"] {
+    width: 13.25rem;
+    color: var(--color-toolkit-input-text-font);
+    border: none;
+    background: none repeat scroll 0 0 var(--color-toolkit-select-background);
+    padding: 0.2rem 0.4rem;
+    height: 2rem;
+    .rounded-corners-tiny;
+
+    &:hover,
+    &:focus {
+      background-color: var(--color-toolkit-select-background-hover);
+    }
+  }
+
+  div.pref-group {
+    width: 100%;
+    font-weight: normal;
+    padding: 1rem 0.5rem;
+    .ltr-text-align-left();
+    background: var(--color-settings-table-group-background);
+  }
+
+  .value {
+    margin: 0;
+    padding: 0;
+    .ltr-float-left();
+    width: 15em;
+
+    select,
+    input[type="text"] {
+      font-size: inherit !important;
+      margin-top: 0;
+      .ltr-margin-right(1rem);
+      margin-bottom: 0;
+      .ltr-margin-left(0);
+    }
+
+    select {
+      width: 14rem;
+    }
+
+    select:focus,
+    input:focus {
+      outline: none;
+      box-shadow: 0 0 1px 1px var(--color-btn-background);
+    }
+  }
+
+  .description {
+    margin: 0;
+    padding: 5px 0 0 0;
+    .ltr-float-right();
+    width: 50%;
+    color: var(--color-settings-engine-description-font);
+    font-size: 90%;
+  }
+
+  .bang {
+    .ltr-text-align-left();
+    .rounded-corners-tiny;
+    background-color: var(--color-doc-code-background);
+    color: var(--color-doc-code);
+    padding: 0.2rem;
+    border: 0 none;
+  }
+
+  .category {
+    .ltr-margin-right(0.5rem);
+
+    label {
+      border: 2px solid transparent;
+      padding: 0.2rem 0.4rem;
+      .rounded-corners-tiny;
+    }
+  }
+
+  .category input[type="checkbox"]:checked + label {
+    border: 2px solid var(--color-categories-item-border-selected);
+  }
+
+  table.table_engines {
+    th.name {
+      /* stylelint-disable */
+      label {
+        cursor: pointer;
+      }
+      /* stylelint-enable */
+
+      .engine-tooltip {
+        margin-top: 1.8rem;
+        .ltr-left(calc((100% - 85em) / 2 + 10em));
+        max-width: 40rem;
+
+        .engine-description {
+          margin-top: 0.5rem;
+        }
+
+        .bang {
+          margin: 0.3rem;
+        }
+      }
+    }
+
+    .checkbox-col,
+    .name,
+    .shortcut {
+      .ltr-text-align-left();
+    }
+  }
+
+  table.cookies {
+    width: 100%;
+    direction: ltr;
+
+    th,
+    td {
+      text-align: left;
+      font-family: monospace;
+      font-size: 1rem;
+      padding: 0.5em;
+      vertical-align: top;
+    }
+
+    td:first-child {
+      word-break: keep-all;
+      width: 14rem;
+      padding-right: 1rem;
+    }
+
+    td:last-child {
+      word-break: break-all;
+    }
+
+    & > tbody > tr:nth-child(even) > th,
+    & > tbody > tr:nth-child(even) > td {
+      background-color: var(--color-settings-tr-hover);
+    }
+  }
+
+  .preferences_back {
+    background: none repeat scroll 0 0 var(--color-btn-background);
+    color: var(--color-btn-font);
+    border: 0 none;
+    .rounded-corners;
+
+    cursor: pointer;
+    display: inline-block;
+    margin: 2px 4px;
+    padding: 0.7em;
+
+    a {
+      color: var(--color-settings-return-font);
+    }
+
+    a::first-letter {
+      text-transform: uppercase;
+    }
+  }
+
+  #toggle-all-engines-container {
+    width: max-content;
+    margin-left: auto;
+  }
+
+  div.selectable_url {
+    pre {
+      width: 100%;
+    }
+  }
+
+  #copy-hash-container {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    div.selectable_url {
+      pre {
+        width: auto;
+        flex-grow: 1;
+      }
+    }
+  }
+
+  #pref-hash-input {
+    width: 100%;
+  }
+}
+
+@media screen and (max-width: @tablet) {
+  .preferences_back {
+    clear: both;
+  }
+
+  .engine-tooltip {
+    .ltr-left(10em) !important;
+  }
+}
--- a/client/simple/src/less/result_templates.less
+++ b/client/simple/src/less/result_templates.less
@@ -0,0 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+.osm-map-box {
+  height: 300px;
+  width: 100%;
+  margin: 10px 0;
+}
--- a/client/simple/src/less/result_types/keyvalue.less
+++ b/client/simple/src/less/result_types/keyvalue.less
@@ -0,0 +1,35 @@
+/*
+  Layout of the KeyValue result class
+*/
+#main_results .result-keyvalue {
+  caption {
+    padding: 0.8rem 0.5rem;
+    font-style: italic;
+    caption-side: bottom;
+    background-color: var(--color-result-keyvalue-table);
+  }
+
+  .col-key {
+    width: 25%;
+  }
+
+  table {
+    word-break: break-word;
+    table-layout: fixed;
+    width: 100%;
+    background-color: var(--color-result-keyvalue-table);
+  }
+
+  tr.odd {
+    background-color: var(--color-result-keyvalue-odd);
+  }
+
+  tr.even {
+    background-color: var(--color-result-keyvalue-even);
+  }
+
+  th,
+  td {
+    padding: 0.3rem 0.5rem;
+  }
+}
--- a/client/simple/src/less/rss.less
+++ b/client/simple/src/less/rss.less
@@ -0,0 +1,45 @@
+@import (inline) "../../node_modules/normalize.css/normalize.css";
+@import "definitions.less";
+
+.text-size-adjust (@property: 100%) {
+  -webkit-text-size-adjust: @property;
+  -ms-text-size-adjust: @property;
+  -moz-text-size-adjust: @property;
+  text-size-adjust: @property;
+}
+
+// Reset padding and margin
+html,
+body,
+main {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-family: sans-serif;
+  font-size: 0.9em;
+  .text-size-adjust;
+
+  color: var(--color-base-font);
+  background-color: var(--color-base-background);
+
+  scroll-behavior: smooth;
+}
+
+body {
+  margin-inline: 1rem;
+}
+
+a {
+  text-decoration: none;
+  color: var(--color-url-font);
+
+  &:visited {
+    color: var(--color-url-visited-font);
+
+    .highlight {
+      color: var(--color-url-visited-font);
+    }
+  }
+}
--- a/client/simple/src/less/search.less
+++ b/client/simple/src/less/search.less
@@ -0,0 +1,395 @@
+/*
+* SearXNG, A privacy-respecting, hackable metasearch engine
+*/
+
+#search {
+  padding: 0;
+  margin: 0;
+}
+
+#search_header {
+  padding-top: 1.5em;
+  .ltr-padding-right(2em);
+  .ltr-padding-left(@results-offset - 3rem);
+  margin: 0;
+  background: var(--color-header-background);
+  border-bottom: 1px solid var(--color-header-border);
+  display: grid;
+  gap: 1rem 1.2rem;
+  grid-template-columns: 3rem 1fr;
+  grid-template-areas:
+    "logo search"
+    "spacer categories";
+}
+
+.category_checkbox,
+.category_button {
+  display: inline-block;
+  position: relative;
+  .ltr-margin-right(1rem);
+  padding: 0;
+}
+
+.category_checkbox {
+  input {
+    display: none;
+  }
+
+  label {
+    svg {
+      padding-right: 0.2rem;
+    }
+
+    cursor: pointer;
+    padding: 0.2rem 0;
+    display: inline-flex;
+    text-transform: capitalize;
+    font-size: 0.9em;
+    border-bottom: 2px solid transparent;
+    .disable-user-select;
+
+    div.category_name {
+      margin: auto 0;
+    }
+  }
+
+  input[type="checkbox"]:checked + label {
+    color: var(--color-categories-item-selected-font);
+    border-bottom: 2px solid var(--color-categories-item-border-selected);
+  }
+}
+
+button.category_button {
+  background-color: inherit;
+  color: var(--color-base-font);
+  cursor: pointer;
+  padding: 0.2rem 0;
+  display: inline-flex;
+  align-items: center;
+  text-transform: capitalize;
+  font-size: 0.9em;
+  border: none;
+  border-bottom: 2px solid transparent;
+
+  svg {
+    padding-right: 0.2rem;
+  }
+
+  &.selected,
+  &:active {
+    color: var(--color-categories-item-selected-font);
+    border-bottom: 2px solid var(--color-categories-item-border-selected);
+  }
+}
+
+// only used when JavaScript is disabled
+.no-js
+  #categories_container:has(button.category_button:focus-within)
+  button.category_button {
+  &.selected {
+    color: var(--color-base-font);
+    border-bottom: none;
+  }
+
+  &:focus-within {
+    color: var(--color-categories-item-selected-font);
+    border-bottom: 2px solid var(--color-categories-item-border-selected);
+  }
+}
+
+#search_logo {
+  padding: 0.5rem 10px 0 10px;
+  grid-area: logo;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    flex: 1;
+    width: 30px;
+    height: 30px;
+    margin: 0.5rem 0 auto 0;
+  }
+}
+
+.search_categories {
+  grid-area: categories;
+
+  .help {
+    display: none;
+  }
+
+  &:hover .help {
+    display: block;
+    position: absolute;
+    background: var(--color-base-background);
+    padding: 1rem 0.6rem 0.6rem 0;
+    z-index: 1000;
+    width: 100%;
+    left: -0.1rem;
+  }
+}
+
+#search_view {
+  padding: 0.5rem @search-padding-horizontal 0 @search-padding-horizontal;
+  grid-area: search;
+
+  body.results_endpoint & {
+    padding: 0.5rem 2.8rem 0 0;
+  }
+}
+
+.search_box {
+  border-radius: 0.8rem;
+  width: 100%;
+  max-width: @search-width;
+  display: inline-flex;
+  flex-direction: row;
+  white-space: nowrap;
+  box-shadow: var(--color-search-shadow);
+}
+
+#clear_search {
+  display: block;
+  border-collapse: separate;
+  box-sizing: border-box;
+  width: 1.8rem;
+  margin: 0;
+  padding: 0.8rem 0.2rem;
+  background: none repeat scroll 0 0 var(--color-search-background);
+  border: none;
+  outline: none;
+  color: var(--color-search-font);
+  font-size: 1.1rem;
+  z-index: 1000;
+
+  &:hover {
+    color: var(--color-search-background-hover);
+  }
+
+  &.empty * {
+    display: none;
+  }
+}
+
+html.no-js #clear_search.hide_if_nojs {
+  display: none;
+}
+
+#q,
+#send_search {
+  display: block;
+  margin: 0;
+  padding: 0.8rem;
+  background: none repeat scroll 0 0 var(--color-search-background);
+  border: none;
+  outline: none;
+  color: var(--color-search-font);
+  font-size: 1.1rem;
+  z-index: 100;
+}
+
+#q {
+  width: 100%;
+  .ltr-padding-left(1rem);
+  .ltr-padding-right(0) !important;
+  .ltr-rounded-left-corners(0.8rem);
+}
+
+#q::-ms-clear,
+#q::-webkit-search-cancel-button {
+  display: none;
+}
+
+#send_search {
+  .ltr-rounded-right-corners(0.8rem);
+
+  &:hover {
+    cursor: pointer;
+    background-color: var(--color-search-background-hover);
+    color: var(--color-search-background);
+  }
+}
+
+.no-js #clear_search,
+.no-js #send_search {
+  width: auto !important;
+  .ltr-border-left(1px solid var(--color-search-border));
+}
+
+.search_filters {
+  margin-top: 0.6rem;
+  .ltr-margin-right(0);
+  margin-bottom: 0;
+  .ltr-margin-left(@results-offset + 0.6rem);
+  display: flex;
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+
+  select {
+    background-color: inherit;
+
+    &:hover,
+    &:focus {
+      color: var(--color-base-font);
+    }
+  }
+}
+
+@media screen and (max-width: @tablet) {
+  #search_header {
+    padding: 1.5em @results-tablet-offset 0 @results-tablet-offset;
+    column-gap: @results-tablet-offset;
+  }
+
+  .search_filters {
+    margin-top: 0.6rem;
+    .ltr-margin-right(0);
+    margin-bottom: 0;
+    .ltr-margin-left(@results-tablet-offset + 3rem);
+  }
+
+  #categories {
+    font-size: 90%;
+    clear: both;
+  }
+}
+
+@media screen and (max-width: @tablet) and (hover: none) {
+  #main_index,
+  #main_results {
+    #categories_container {
+      width: max-content;
+
+      .category_checkbox {
+        display: inline-block;
+        width: auto;
+      }
+    }
+
+    #categories {
+      width: 100%;
+      .ltr-text-align-left();
+      overflow: scroll hidden;
+      -webkit-overflow-scrolling: touch;
+    }
+  }
+}
+
+@media screen and (max-width: @phone) {
+  #search_header {
+    width: 100%;
+    margin: 0;
+    padding: 0.1rem 0 0 0;
+    gap: 0 0;
+    grid-template-areas:
+      "logo search"
+      "categories categories";
+  }
+
+  .search_logo {
+    padding: 0;
+  }
+
+  .search_box {
+    width: 100%;
+  }
+
+  #q {
+    width: 100%;
+    flex: 1;
+  }
+
+  .search_filters {
+    margin: 0 10px;
+    padding: 0.5rem 0;
+  }
+
+  .category {
+    display: inline-block;
+    width: auto;
+    margin: 0;
+
+    svg {
+      display: none;
+    }
+  }
+
+  .category_checkbox {
+    label {
+      padding: 1rem !important;
+      margin: 0 !important;
+    }
+  }
+
+  .category_button {
+    padding: 1rem !important;
+    margin: 0 !important;
+  }
+
+  #search_view:focus-within {
+    display: block;
+    background-color: var(--color-search-background);
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 2000;
+
+    .search_box {
+      border-bottom: 1px solid var(--color-search-border);
+      width: 100%;
+      border-radius: 0;
+      box-shadow: none;
+
+      #send_search {
+        .ltr-margin-right(0) !important; // Delete when send_search button is disabled on mobile.
+      }
+
+      * {
+        border: none;
+        border-radius: 0;
+        box-shadow: none;
+      }
+    }
+  }
+
+  #main_results #q:placeholder-shown ~ #send_search {
+    .ltr-margin-right(2.6rem);
+    transition: margin 0.1s;
+  }
+}
+
+@media screen and (max-width: @ultra-small-phone) {
+  #search_header {
+    grid-template-areas:
+      "search search"
+      "categories categories";
+  }
+
+  #search_logo {
+    display: none;
+  }
+}
+
+#categories {
+  .disable-user-select;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}
+
+#categories_container {
+  position: relative;
+}
+
+.favicon img {
+  height: 1.5rem;
+  width: 1.5rem;
+  border-radius: 10%;
+  background-color: var(--color-favicon-background-color);
+  border: 1px solid var(--color-favicon-border-color);
+  display: flex;
+}
--- a/client/simple/src/less/stats.less
+++ b/client/simple/src/less/stats.less
@@ -0,0 +1,106 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+.engine-stats {
+  border-spacing: 0;
+  border-collapse: collapse;
+
+  tr td,
+  tr th {
+    border-bottom: 1px solid var(--color-result-border);
+    padding: 0.25rem;
+  }
+
+  table.engine-tooltip {
+    border-spacing: 0;
+    border-collapse: collapse;
+
+    td,
+    th {
+      border: none;
+    }
+  }
+
+  .engine-name {
+    width: 20rem;
+  }
+
+  .engine-score {
+    width: 7rem;
+    text-align: right;
+  }
+
+  .engine-reliability {
+    text-align: right;
+  }
+}
+
+table.engine-error th.engine-error-type,
+table.engine-error td.engine-error-type,
+failed-test {
+  width: 10rem;
+}
+
+.engine-errors {
+  margin-top: 3rem;
+
+  table.engine-error {
+    max-width: 1280px;
+    margin: 1rem 0 3rem 0;
+    border: 1px solid var(--color-result-border);
+    .ltr-text-align-left();
+
+    tr th,
+    tr td {
+      padding: 0.5rem;
+    }
+
+    & span.log_parameters {
+      border-right: 1px solid solid var(--color-result-border);
+      padding: 0 1rem 0 0;
+      margin: 0 0 0 0.5rem;
+    }
+  }
+}
+
+.bar-chart-value {
+  width: 3em;
+  display: inline-block;
+  text-align: right;
+  padding-right: 0.5rem;
+}
+
+.bar-chart-graph {
+  width: calc(100% - 5rem);
+  display: inline-block;
+}
+
+.bar-chart-bar {
+  border: 3px solid var(--color-bar-chart-primary);
+  margin: 1px 0;
+}
+
+.bar-chart-serie1 {
+  border: 3px solid var(--color-bar-chart-primary);
+  margin: 1px 0;
+  float: left;
+}
+
+.bar-chart-serie2 {
+  border: 3px solid var(--color-bar-chart-secondary);
+  margin: 1px 0;
+  float: left;
+}
+
+.bar0 {
+  width: 0;
+  border: 0;
+}
+
+.generate-bar(100);
+
+.generate-bar(@n, @i: 1) when (@i =< @n) {
+  .bar@{i} {
+    width: (@i * 100% / @n);
+  }
+  .generate-bar(@n, (@i + 1));
+}
--- a/client/simple/src/less/style-center.less
+++ b/client/simple/src/less/style-center.less
@@ -0,0 +1,122 @@
+/*
+--center-page-width overrides the less variable @results-width when the results are centered
+see the CSS rules for #results in style.less ( grid-template-columns and gap).
+
+In this file, the --center-page-width values comes from the Oscar theme (Bootstrap 3).
+
+All rules starts with ".center-alignment-yes #main_results" to be enabled only
+on the /search URL and when the "center alignment" preference is enabled.
+*/
+
+@media screen and (min-width: @phone) {
+  .center-alignment-yes #main_results {
+    --center-page-width: 48rem;
+  }
+}
+
+@media screen and (width >= 62rem) {
+  .center-alignment-yes #main_results {
+    --center-page-width: 60rem;
+  }
+}
+
+@media screen and (min-width: @tablet) {
+  .center-alignment-yes #main_results {
+    --center-page-width: 73rem;
+  }
+}
+
+@media screen and (min-width: @phone) and (max-width: @tablet) {
+  // any change must be reset in @media screen and (min-width: @tablet) { ... }
+  .center-alignment-yes #main_results {
+    #results {
+      grid-template-columns: 60% calc(40% - @results-gap);
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    #urls {
+      .ltr-margin-left(3rem);
+    }
+
+    #sidebar {
+      .ltr-margin-right(1rem);
+    }
+
+    #backToTop {
+      .ltr-left(calc(60% + 1rem));
+    }
+  }
+}
+
+@media screen and (min-width: @tablet) {
+  .center-alignment-yes #main_results {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    #search {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    #search_header {
+      grid-template-columns:
+        calc(50% - 4.5rem - var(--center-page-width) / 2)
+        3rem var(--center-page-width);
+      grid-template-areas: "na logo search" "na spacer categories";
+      column-gap: 1.2rem; // from search.less
+      width: 100%;
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .search_filters {
+      .ltr-margin-left(0.5rem);
+      width: var(--center-page-width);
+    }
+
+    #results {
+      // from style.less (when screen width = @tablet, reset layout from tablet)
+      .ltr-margin-right(2rem);
+      .ltr-margin-left(@results-offset);
+      //
+
+      &.only_template_images,
+      &.image-detail-open {
+        // * grid-template-columns and .ltr-margin-left are set in style.less
+        // * With .image-detail-open.only_template_images, the width is set in detail.less
+        // * #results is going to be centered because of the #main_results rules,
+        //   align-self aligns the results on the left or right according to the language.
+        align-self: flex-start;
+      }
+
+      &:not(.only_template_images, .image-detail-open) {
+        // the gap is set in style.less
+        .ltr-margin-left(1.5rem);
+        grid-template-columns:
+          calc(var(--center-page-width) - @results-gap - @results-sidebar-width)
+          @results-sidebar-width;
+
+        #backToTop {
+          .ltr-left(calc(50% - @results-sidebar-width - @results-gap + 1rem + var(--center-page-width) / 2));
+        }
+      }
+
+      .result .content {
+        max-width: inherit;
+      }
+    }
+
+    // from style.less (when screen width = @tablet, reset layout from tablet)
+    #urls {
+      .ltr-margin-left(0);
+    }
+
+    #sidebar {
+      .ltr-margin-right(0);
+    }
+  }
+}
--- a/client/simple/src/less/style-ltr.less
+++ b/client/simple/src/less/style-ltr.less
@@ -0,0 +1,85 @@
+.ltr-left(@offset) {
+  left: @offset;
+}
+
+.ltr-right(@offset) {
+  right: @offset;
+}
+
+.ltr-margin-right(@offset) {
+  margin-right: @offset;
+}
+
+.ltr-margin-left(@offset) {
+  margin-left: @offset;
+}
+
+.ltr-border-right(@offset) {
+  border-right: @offset;
+}
+
+.ltr-border-left(@offset) {
+  border-left: @offset;
+}
+
+.ltr-padding-right(@offset) {
+  padding-right: @offset;
+}
+
+.ltr-padding-left(@offset) {
+  padding-left: @offset;
+}
+
+.ltr-float-left() {
+  float: left;
+}
+
+.ltr-float-right() {
+  float: right;
+}
+
+.ltr-text-align-right() {
+  text-align: right;
+}
+
+.ltr-rounded-left-corners(@radius) {
+  border-radius: @radius 0 0 @radius;
+}
+
+.ltr-rounded-top-left-corners(@radius) {
+  border-radius: @radius 0 0 0;
+}
+
+.ltr-rounded-bottom-left-corners(@radius) {
+  border-radius: 0 0 0 @radius;
+}
+
+.ltr-rounded-right-corners(@radius) {
+  border-radius: 0 @radius @radius 0;
+}
+
+.ltr-rounded-top-right-corners(@radius) {
+  border-radius: 0 @radius 0 0;
+}
+
+.ltr-rounded-bottom-right-corners(@radius) {
+  border-radius: 0 0 @radius 0;
+}
+
+.ltr-text-align-left() {
+  text-align: left;
+}
+
+.ltr-border-left-width(@offset) {
+  border-left-width: @offset;
+}
+
+.ltr-border-right-width(@offset) {
+  border-right-width: @offset;
+}
+
+.ltr-transform() {
+  transform: scale(1, 1);
+}
+
+@import "style.less";
--- a/client/simple/src/less/style-rtl.less
+++ b/client/simple/src/less/style-rtl.less
@@ -0,0 +1,171 @@
+@import "custom_iyas.less";
+
+.ltr-left(@offset) {
+  right: @offset;
+}
+
+.ltr-right(@offset) {
+  left: @offset;
+}
+
+.ltr-margin-right(@offset) {
+  margin-left: @offset;
+}
+
+.ltr-margin-left(@offset) {
+  margin-right: @offset;
+}
+
+.ltr-border-right(@offset) {
+  border-left: @offset;
+}
+
+.ltr-border-left(@offset) {
+  border-right: @offset;
+}
+
+.ltr-padding-right(@offset) {
+  padding-left: @offset;
+}
+
+.ltr-padding-left(@offset) {
+  padding-right: @offset;
+}
+
+.ltr-float-left() {
+  float: right;
+}
+
+.ltr-float-right() {
+  float: left;
+}
+
+.ltr-text-align-right() {
+  text-align: left;
+}
+
+.ltr-rounded-left-corners(@radius) {
+  border-radius: 0 @radius @radius 0;
+}
+
+.ltr-rounded-top-left-corners(@radius) {
+  border-radius: 0 @radius 0 0;
+}
+
+.ltr-rounded-bottom-left-corners(@radius) {
+  border-radius: 0 0 @radius 0;
+}
+
+.ltr-rounded-right-corners(@radius) {
+  border-radius: @radius 0 0 @radius;
+}
+
+.ltr-rounded-top-right-corners(@radius) {
+  border-radius: @radius 0 0 0;
+}
+
+.ltr-rounded-bottom-right-corners(@radius) {
+  border-radius: 0 0 0 @radius;
+}
+
+.ltr-text-align-left() {
+  text-align: right;
+}
+
+.ltr-border-left-width(@offset) {
+  border-right-width: @offset;
+}
+
+.ltr-border-right-width(@offset) {
+  border-left-width: @offset;
+}
+
+.ltr-transform() {
+  transform: scale(-1, 1);
+}
+
+@import "style.less";
+
+#q,
+#sidebar .infobox dt bdi {
+  direction: rtl;
+}
+
+// URL are displayed LTR but align on the right
+#urls {
+  direction: initial;
+  text-align: right;
+
+  .result .url_header {
+    direction: rtl;
+  }
+
+  .result .url_wrapper {
+    justify-content: end;
+  }
+}
+
+// Image flexbox
+#main_results div#results.only_template_images #urls {
+  direction: rtl;
+}
+
+// Image detail
+#results.image-detail-open
+  article.result-images[data-vim-selected]
+  .detail
+  .result-images-labels
+  p {
+  direction: rtl;
+
+  &.result-url {
+    // Display URL using the LTR direction
+    direction: ltr;
+
+    span {
+      // And put the label on the right
+      direction: rtl;
+      float: right;
+    }
+  }
+}
+
+// select HTML element
+@supports (
+  (background-position-x: 100%) and
+    (
+      (appearance: none) or (-webkit-appearance: none) or
+        (-moz-appearance: none)
+    )
+) {
+  select {
+    border-width: 0 0 0 2rem;
+    background-position-x: -2rem;
+  }
+}
+
+// vim hotkey helps is not translated
+#vim-hotkeys-help table {
+  direction: ltr;
+  text-align: left;
+}
+
+// Logo on the right
+#main_preferences h1,
+#main_stats h1 {
+  background-position-x: 100%;
+}
+
+// patch of stats.less
+.bar-chart-serie1,
+.bar-chart-serie2 {
+  float: right;
+}
+
+.engine-stats .engine-name,
+.engine-stats .engine-score,
+.engine-stats .result-count,
+.engine-stats .response-time,
+.engine-stats .engine-reliability {
+  text-align: right;
+}
--- a/client/simple/src/less/style.less
+++ b/client/simple/src/less/style.less
--- a/client/simple/src/less/toolkit.less
+++ b/client/simple/src/less/toolkit.less
@@ -0,0 +1,663 @@
+// other solution :  http://stackoverflow.com/questions/1577598/how-to-hide-parts-of-html-when-javascript-is-disabled/13857783#13857783
+
+// stylelint-disable no-descending-specificity
+
+html.no-js .hide_if_nojs {
+  display: none;
+}
+
+html.js .show_if_nojs {
+  display: none;
+}
+
+.center {
+  text-align: center;
+}
+
+.right {
+  float: right;
+}
+
+.left {
+  float: left;
+}
+
+.invisible {
+  display: none !important;
+}
+
+.list-unstyled {
+  list-style-type: none;
+
+  li {
+    margin-top: 4px;
+    margin-bottom: 4px;
+  }
+}
+
+.danger {
+  background-color: var(--color-error-background);
+}
+
+.warning {
+  background: var(--color-warning-background);
+}
+
+.success {
+  background: var(--color-success-background);
+}
+
+.badge {
+  display: inline-block;
+  color: var(--color-toolkit-badge-font);
+  background-color: var(--color-toolkit-badge-background);
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  min-width: 10px;
+  padding: 1px 5px;
+  border-radius: 5px;
+}
+
+// kbd
+kbd {
+  padding: 2px 4px;
+  margin: 1px;
+  font-size: 90%;
+  color: var(--color-toolkit-kbd-font);
+  background: var(--color-toolkit-kbd-background);
+}
+
+// table
+table {
+  width: 100%;
+
+  &.striped {
+    tr {
+      border-bottom: 1px solid var(--color-settings-tr-hover);
+    }
+  }
+}
+
+th {
+  padding: 0.4em;
+}
+
+td {
+  padding: 0 4px;
+}
+
+tr {
+  &:hover {
+    background: var(--color-settings-tr-hover) !important;
+  }
+}
+
+// pre
+.pre() {
+  display: block;
+  font-size: 0.8em;
+  word-break: break-all;
+  margin: 0.1em;
+  user-select: all;
+}
+
+div.selectable_url {
+  display: block;
+  border: 1px solid var(--color-result-search-url-border);
+  padding: 4px;
+  color: var(--color-result-search-url-font);
+  margin: 0.1em;
+  overflow: hidden;
+  height: 1.2em;
+  line-height: 1.2em;
+  .rounded-corners-tiny;
+
+  pre {
+    .pre();
+  }
+}
+
+// dialog
+.dialog() {
+  position: relative;
+  display: flex;
+  padding: 1rem;
+  margin: 0 0 1em 0;
+  border: 1px solid var(--color-toolkit-dialog-border);
+  .ltr-text-align-left();
+  .rounded-corners;
+
+  .close {
+    .ltr-float-right();
+    position: relative;
+    top: -3px;
+    color: inherit;
+    font-size: 1.5em;
+  }
+
+  ul,
+  ol,
+  p {
+    margin: 1px 0 0 0;
+  }
+
+  table {
+    width: auto;
+  }
+
+  tr {
+    vertical-align: text-top;
+
+    &:hover {
+      background: transparent !important;
+    }
+  }
+
+  td {
+    padding: 0 1em 0 0;
+    padding-top: 0;
+    .ltr-padding-right(1rem);
+    padding-bottom: 0;
+    .ltr-padding-left(0);
+  }
+
+  h4 {
+    margin-top: 0.3em;
+    margin-bottom: 0.3em;
+  }
+}
+
+.dialog-error {
+  .dialog();
+
+  color: var(--color-error);
+  background: var(--color-error-background);
+  border-color: var(--color-error);
+}
+
+.dialog-error-block {
+  .dialog();
+
+  display: block;
+  color: var(--color-error);
+  background: var(--color-error-background);
+  border-color: var(--color-error);
+}
+
+.dialog-warning {
+  .dialog();
+
+  color: var(--color-warning);
+  background: var(--color-warning-background);
+  border-color: var(--color-warning);
+}
+
+.dialog-modal {
+  .dialog();
+
+  display: block;
+  background: var(--color-toolkit-dialog-background);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  margin: 0 auto;
+  transform: translate(-50%, -50%);
+  z-index: 5000;
+
+  h3 {
+    margin-top: 0;
+  }
+}
+
+// btn-collapse
+.btn-collapse {
+  cursor: pointer;
+}
+
+//
+.scrollx {
+  overflow: auto hidden;
+  display: block;
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+
+/* -- tabs -- */
+.tabs .tabs > label {
+  font-size: 90%;
+}
+
+ul.tabs {
+  border-bottom: 1px solid var(--color-toolkit-tabs-section-border);
+  list-style: none;
+  padding-left: 0;
+
+  li {
+    display: flex;
+  }
+}
+
+.tabs {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  min-width: 100%;
+
+  & > * {
+    order: 2;
+  }
+
+  & > input[type="radio"] {
+    display: none;
+  }
+
+  & > label,
+  & > li > a {
+    order: 1;
+    padding: 0.7em;
+    margin: 0 0.7em;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+    border: solid var(--color-toolkit-tabs-label-border);
+    border-width: 0 0 2px 0;
+    color: unset;
+
+    .disable-user-select();
+
+    cursor: pointer;
+
+    &.active {
+      border-bottom: 2px solid var(--color-categories-item-border-selected);
+      background: var(--color-categories-item-selected);
+      color: var(--color-categories-item-selected-font);
+    }
+  }
+
+  & > label:hover,
+  & > li > a:hover {
+    border-bottom: 2px solid var(--color-categories-item-border-selected);
+  }
+
+  & > section {
+    min-width: 100%;
+    padding: 0.7rem 0;
+    box-sizing: border-box;
+    border-top: 1px solid var(--color-toolkit-tabs-section-border);
+    display: none;
+  }
+
+  // default selection
+  & > label:last-of-type {
+    border-bottom: 2px solid var(--color-categories-item-border-selected);
+    background: var(--color-categories-item-selected);
+    color: var(--color-categories-item-selected-font);
+    letter-spacing: -0.1px;
+  }
+
+  & > section:last-of-type {
+    display: block;
+  }
+}
+
+html body .tabs > input:checked {
+  ~ section {
+    display: none;
+  }
+
+  ~ label {
+    position: inherited;
+    background: inherit;
+    border-bottom: 2px solid transparent;
+    font-weight: normal;
+    color: inherit;
+
+    &:hover {
+      border-bottom: 2px solid var(--color-categories-item-border-selected);
+    }
+  }
+
+  + label {
+    border-bottom: 2px solid var(--color-categories-item-border-selected);
+    background: var(--color-categories-item-selected);
+    color: var(--color-categories-item-selected-font);
+  }
+
+  + label + section {
+    display: block;
+  }
+}
+
+/* -- select -- */
+select {
+  height: 2.4rem;
+  margin-top: 0;
+  .ltr-margin-right(1rem);
+  margin-bottom: 0;
+  .ltr-margin-left(0);
+  padding: 0.2rem !important;
+  color: var(--color-search-font);
+  font-size: 0.9rem;
+  z-index: 100;
+
+  &:hover,
+  &:focus {
+    cursor: pointer;
+  }
+}
+
+@supports (
+  (background-position-x: 100%) and
+    (
+      (appearance: none) or (-webkit-appearance: none) or
+        (-moz-appearance: none)
+    )
+) {
+  select {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    border-width: 0 2rem 0 0;
+    border-color: transparent;
+    background: data-uri("image/svg+xml;charset=UTF-8", @select-light-svg-path)
+      no-repeat;
+    background-position-x: calc(100% + 2rem);
+    background-size: 2rem;
+    background-origin: content-box;
+    background-color: var(--color-toolkit-select-background);
+    outline: medium none;
+    text-overflow: ellipsis;
+    .rounded-corners-tiny;
+
+    &:hover,
+    &:focus {
+      background-color: var(--color-toolkit-select-background-hover);
+    }
+
+    option {
+      background-color: var(--color-base-background);
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    html.theme-auto select,
+    html.theme-dark select {
+      background-image: data-uri(
+        "image/svg+xml;charset=UTF-8",
+        @select-dark-svg-path
+      );
+    }
+  }
+
+  html.theme-dark select {
+    background-image: data-uri(
+      "image/svg+xml;charset=UTF-8",
+      @select-dark-svg-path
+    );
+  }
+}
+
+/* -- checkbox-onoff -- */
+input.checkbox-onoff[type="checkbox"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  display: inline-block;
+  width: 2.5em;
+  height: 0.7em;
+  box-shadow: none !important;
+  margin: 0 16px;
+  border-radius: 10px;
+  position: relative;
+
+  /* focus & hover */
+  &:focus,
+  &:hover {
+    outline: none;
+  }
+
+  &:focus::after {
+    content: "";
+    position: absolute;
+    width: 3.5em;
+    height: 1.65em;
+    border: 1px solid var(--color-btn-background);
+    border-radius: 12px;
+    box-shadow: var(--color-btn-background) 0 0 3px;
+    z-index: 1200;
+    top: -0.55em;
+    left: -0.6em;
+  }
+
+  &::before {
+    position: absolute;
+    top: -0.5em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 0.75em;
+    width: 1.875em;
+    height: 1.875em;
+    border-radius: 50%;
+  }
+}
+
+/* check mark
+reversed-checkbox displays unchecked checkedboxes as checked, and vice versa.
+see https://github.com/searxng/searxng/blob/3408d061aab9abc6168fec9bbc6deab71b236dac/searx/templates/simple/preferences.html#L313
+*/
+input.checkbox-onoff[type="checkbox"],
+input.checkbox-onoff.reversed-checkbox[type="checkbox"]:checked {
+  background: var(--color-toolkit-checkbox-onoff-off-background);
+
+  &::before {
+    left: -0.5em;
+    content: "\2715";
+    color: var(--color-toolkit-checkbox-onoff-off-mark-color);
+    background: var(--color-toolkit-checkbox-onoff-off-mark-background);
+  }
+}
+
+input.checkbox-onoff[type="checkbox"]:checked,
+input.checkbox-onoff.reversed-checkbox[type="checkbox"] {
+  background: var(--color-toolkit-checkbox-onoff-on-background);
+
+  &::before {
+    left: calc(100% - 1.5em);
+    content: "\2713";
+    color: var(--color-toolkit-checkbox-onoff-on-mark-color);
+    background: var(--color-toolkit-checkbox-onoff-on-mark-background);
+  }
+}
+
+/* -- checkbox -- */
+@supports (transform: rotate(-45deg)) {
+  input[type="checkbox"]:not(.checkbox-onoff) {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    position: relative;
+    top: 0;
+    left: 0;
+    border: 2px solid var(--color-toolkit-checkbox-input-border);
+    .rounded-corners(0.3em);
+
+    &::after {
+      content: "";
+      width: 9px;
+      height: 5px;
+      position: absolute;
+      top: 3px;
+      left: 2px;
+      border: 3px solid var(--color-toolkit-checkbox-label-border);
+      border-top: none;
+      border-right: none;
+      background: transparent;
+      opacity: 0;
+      transform: rotate(-45deg);
+    }
+
+    &:checked::after {
+      border-color: var(--color-toolkit-checkbox-input-border);
+      opacity: 1;
+    }
+  }
+
+  // disabled : can't be focused, show only the check mark
+  input[type="checkbox"][disabled]:not(.checkbox-onoff) {
+    border: inherit;
+    background-color: transparent !important;
+    cursor: inherit;
+  }
+
+  // if not checked and possible to checked then display a "light" check mark on hover
+  input.checkbox[type="checkbox"]:not(
+      :checked,
+      [disabled],
+      .checkbox-onoff
+    ):hover::after {
+    opacity: 0.5;
+  }
+}
+
+@media screen and (max-width: @phone) {
+  .tabs > label {
+    width: 100%;
+  }
+}
+
+/* -- loader -- */
+.loader,
+.loader::after {
+  border-radius: 50%;
+  width: 2em;
+  height: 2em;
+}
+
+.loader {
+  margin: 1em auto;
+  font-size: 10px;
+  position: relative;
+  text-indent: -9999em;
+  border-top: 0.5em solid var(--color-toolkit-loader-border);
+  border-right: 0.5em solid var(--color-toolkit-loader-border);
+  border-bottom: 0.5em solid var(--color-toolkit-loader-border);
+  border-left: 0.5em solid var(--color-toolkit-loader-borderleft);
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load8 1.2s infinite linear;
+  animation: load8 1.2s infinite linear;
+}
+
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+/* -- engine-tooltip -- */
+.engine-tooltip {
+  display: none;
+  position: absolute;
+  padding: 0.5rem 1rem;
+  margin: 0 0 0 2rem;
+  border: 1px solid var(--color-toolkit-engine-tooltip-border);
+  background: var(--color-toolkit-engine-tooltip-background);
+  font-size: 14px;
+  font-weight: normal;
+  z-index: 5000;
+  text-align: left;
+  .rounded-corners;
+}
+
+th:hover .engine-tooltip,
+td:hover .engine-tooltip,
+.engine-tooltip:hover {
+  display: inline-block;
+}
+
+/* -- stacked bar chart -- */
+.stacked-bar-chart {
+  margin: 0;
+  padding: 0 0.125rem 0 4rem;
+  width: 100%;
+  width: -moz-available;
+  width: -webkit-fill-available;
+  width: fill;
+  flex-flow: row nowrap;
+  align-items: center;
+  display: inline-flex;
+}
+
+.stacked-bar-chart-value {
+  width: 3rem;
+  display: inline-block;
+  position: absolute;
+  padding: 0 0.5rem;
+  text-align: right;
+}
+
+.stacked-bar-chart-base {
+  display: flex;
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: unset;
+}
+
+.stacked-bar-chart-median {
+  .stacked-bar-chart-base();
+
+  background: var(--color-base-font);
+  border: 1px solid rgba(var(--color-base-font-rgb), 0.9);
+  padding: 0.3rem 0;
+}
+
+.stacked-bar-chart-rate80 {
+  .stacked-bar-chart-base();
+
+  background: transparent;
+  border: 1px solid rgba(var(--color-base-font-rgb), 0.3);
+  padding: 0.3rem 0;
+}
+
+.stacked-bar-chart-rate95 {
+  .stacked-bar-chart-base();
+
+  background: transparent;
+  border-bottom: 1px dotted rgba(var(--color-base-font-rgb), 0.5);
+  padding: 0;
+}
+
+.stacked-bar-chart-rate100 {
+  .stacked-bar-chart-base();
+
+  background: transparent;
+  border-left: 1px solid rgba(var(--color-base-font-rgb), 0.9);
+  padding: 0.4rem 0;
+  width: 1px;
+}
--- a/client/simple/src/less/toolkit_loader.less
+++ b/client/simple/src/less/toolkit_loader.less
@@ -0,0 +1,29 @@
+.loader,
+.loader::after {
+  border-radius: 50%;
+  width: 10em;
+  height: 10em;
+}
+
+.loader {
+  margin: 60px auto;
+  font-size: 10px;
+  position: relative;
+  text-indent: -9999em;
+  border-top: 1.1em solid var(--color-loading-indicator);
+  border-right: 1.1em solid var(--color-loading-indicator);
+  border-bottom: 1.1em solid var(--color-loading-indicator);
+  border-left: 1.1em solid var(--color-loading-indicator-gap);
+  transform: translateZ(0);
+  animation: load8 1.1s infinite linear;
+}
+
+@keyframes load8 {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
--- a/client/simple/src/less/weather.less
+++ b/client/simple/src/less/weather.less
@@ -0,0 +1,42 @@
+#answers .weather {
+  summary {
+    display: block;
+    list-style: none;
+  }
+
+  div.summary {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    background-color: var(--color-header-background);
+    .rounded-corners-tiny;
+  }
+
+  table {
+    font-size: 0.9rem;
+    table-layout: fixed;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    border-collapse: separate;
+    border-spacing: 0.1em 0;
+  }
+
+  td {
+    padding: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  img.symbol {
+    width: 5rem;
+    margin: auto;
+    display: block;
+  }
+
+  .title {
+    // background-color: var(--color-result-keyvalue-even);
+  }
+
+  .measured {
+    // background-color: var(--color-result-keyvalue-odd);
+  }
+}
--- a/client/simple/src/svg/empty_favicon.svg
+++ b/client/simple/src/svg/empty_favicon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+  <path fill="#58f" d="M11 20.85a.92.92 0 0 1-1.1.93A10 10 0 0 1 2.06 13c-.06-.55.4-1 .95-1h3a1 1 0 0 1 1 1 3 3 0 0 0 3 3 1 1 0 0 1 1 1v3.85Zm6-1.92c0 .77.83 1.23 1.42.74a10 10 0 0 0 2.03-2.32c.39-.61-.09-1.35-.81-1.35H18a1 1 0 0 0-1 1v1.93ZM12 2a10 10 0 0 1 6.65 2.53c.61.55.17 1.47-.65 1.47h-.15A2.85 2.85 0 0 0 15 8.85c0 .33-.18.62-.47.77l-.08.04a1 1 0 0 1-.9 0l-.08-.04a.85.85 0 0 1-.47-.77A2.85 2.85 0 0 0 10.15 6H10a1 1 0 0 1-1-1V3.2c0-.44.28-.84.7-.94C10.45 2.1 11.22 2 12 2Z"/>
+  <path fill="#58f" d="M3.42 10c-.63 0-1.1-.58-.9-1.18.6-1.8 1.7-3.36 3.12-4.53C6.2 3.82 7 4.26 7 5a3 3 0 0 0 3 3h.15c.47 0 .85.38.85.85 0 1.09.61 2.07 1.58 2.56l.08.04a3 3 0 0 0 2.68 0l.08-.04A2.85 2.85 0 0 0 17 8.85c0-.47.38-.85.85-.85h2.66c.4 0 .77.23.9.6a9.98 9.98 0 0 1 .52 4.6.94.94 0 0 1-.95.8H18a3 3 0 0 0-3 3v3.8c0 .44-.28.84-.7.94l-.2.04a.92.92 0 0 1-1.1-.93V17a3 3 0 0 0-3-3 1 1 0 0 1-1-1 3 3 0 0 0-3-3H3.42Z"/>
+</svg>
--- a/client/simple/src/svg/ionicons/information-circle-outline.svg
+++ b/client/simple/src/svg/ionicons/information-circle-outline.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path d="M248 64C146.39 64 64 146.39 64 248s82.39 184 184 184 184-82.39 184-184S349.61 64 248 64z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/>
+    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M220 220h32v116"/>
+    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M208 340h88"/>
+    <path d="M248 130a26 26 0 1026 26 26 26 0 00-26-26z" fill="currentColor" stroke="currentColor" stroke-miterlimit="10" stroke-width="1"/>
+</svg>
--- a/client/simple/src/svg/ionicons/newspaper-outline.svg
+++ b/client/simple/src/svg/ionicons/newspaper-outline.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path d="M368 415.86V72a24.07 24.07 0 00-24-24H72a24.07 24.07 0 00-24 24v352a40.12 40.12 0 0040 40h328" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/>
+    <path d="M416 464h0a48 48 0 01-48-48V128h72a24 24 0 0124 24v264a48 48 0 01-48 48z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/>
+    <path d="M240 128h64M240 192h64M112 256h192M112 320h192M112 384h192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
+    <path d="M176 208h-64a16 16 0 01-16-16v-64a16 16 0 0116-16h64a16 16 0 0116 16v64a16 16 0 01-16 16z" fill="currentColor" stroke="currentColor" stroke-linejoin="round" stroke-width="1"   />
+</svg>
--- a/client/simple/src/svg/select-dark.svg
+++ b/client/simple/src/svg/select-dark.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
+<g><polygon fill="#ddd" points="128,192 256,320 384,192"/></g>
+</svg>
--- a/client/simple/src/svg/select-light.svg
+++ b/client/simple/src/svg/select-light.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
+<g><polygon points="128,192 256,320 384,192"/></g>
+</svg>
--- a/client/simple/static/.gitattributes
+++ b/client/simple/static/.gitattributes
@@ -0,0 +1,2 @@
+leaflet.css -diff
+leaflet.js -diff
--- a/client/simple/theme_icons.js
+++ b/client/simple/theme_icons.js
@@ -0,0 +1,84 @@
+/**
+ * Generate icons.html for the jinja templates of the simple theme.
+ */
+
+import { argv } from "node:process";
+import { dirname, resolve } from "node:path";
+import { jinja_svg_sets } from "./tools/jinja_svg_catalog.js";
+
+const HERE = dirname(argv[1]) + "/";
+const dest = resolve(HERE, "../../searx/templates/simple/icons.html");
+
+/** @type import("./tools/jinja_svg_catalog.js").JinjaMacro[] */
+const searxng_jinja_macros = [
+  { name: "icon",       class: "sxng-icon-set" },
+  { name: "icon_small", class: "sxng-icon-set-small" },
+  { name: "icon_big",   class: "sxng-icon-set-big" },
+];
+
+
+const sxng_icon_opts ={
+  multipass: true,
+  plugins: [
+    { name: "removeTitle" },
+    { name: "removeXMLNS" },
+    { name: "addAttributesToSVGElement",
+      params: {
+        attributes: [
+          {
+            "aria-hidden": "true",
+          }]}}]
+};
+
+
+/** @type import("./tools/jinja_svg_catalog.js").IconSet */
+const simple_icons = [
+  {
+    base: resolve(HERE, "node_modules/ionicons/dist/svg"),
+    set: {
+      "alert": "alert-outline.svg",
+      "appstore": "apps-outline.svg",
+      "book": "book-outline.svg",
+      "close": "close-outline.svg",
+      "download": "download-outline.svg",
+      "ellipsis-vertical": "ellipsis-vertical-outline.svg",
+      "file-tray-full": "file-tray-full-outline.svg",
+      "film": "film-outline.svg",
+      "globe": "globe-outline.svg",
+      "heart": "heart-outline.svg",
+      "image": "image-outline.svg",
+      "layers": "layers-outline.svg",
+      "leecher": "arrow-down.svg",
+      "location": "location-outline.svg",
+      "magnet": "magnet-outline.svg",
+      "musical-notes": "musical-notes-outline.svg",
+      "navigate-down": "chevron-down-outline.svg",
+      "navigate-left": "chevron-back-outline.svg",
+      "navigate-right": "chevron-forward-outline.svg",
+      "navigate-up": "chevron-up-outline.svg",
+      "people": "people-outline.svg",
+      "play": "play-outline.svg",
+      "radio": "radio-outline.svg",
+      "save": "save-outline.svg",
+      "school": "school-outline.svg",
+      "search": "search-outline.svg",
+      "seeder": "swap-vertical.svg",
+      "settings": "settings-outline.svg",
+      "tv": "tv-outline.svg",
+    },
+    svgo_opts: sxng_icon_opts,
+  },
+  // some of the ionicons are not suitable for a dark theme, we fixed the svg
+  // manually in src/svg/ionicons
+  // - https://github.com/searxng/searxng/pull/4284#issuecomment-2680550342
+  {
+    base: resolve(HERE, "src/svg/ionicons"),
+    set: {
+      "information-circle": "information-circle-outline.svg",
+      "newspaper": "newspaper-outline.svg",
+    },
+    svgo_opts: sxng_icon_opts,
+  }
+];
+
+jinja_svg_sets(dest, searxng_jinja_macros, simple_icons);
--- a/client/simple/tools/img.js
+++ b/client/simple/tools/img.js
@@ -0,0 +1,78 @@
+import fs from "fs";
+import path from "path";
+import sharp from "sharp";
+import { optimize as svgo } from "svgo";
+
+/**
+ * @typedef {object} Src2Dest - Mapping of src to dest
+ * @property {string} src - Name of the source file.
+ * @property {string} dest - Name of the destination file.
+ */
+
+
+/**
+ * Convert a list of SVG files to PNG.
+ *
+ * @param {Src2Dest[]} items - Array of SVG files (src: SVG, dest:PNG) to convert.
+ */
+
+async function svg2png (items) {
+  items.forEach(
+    async (item) => {
+      try {
+        fs.mkdir(path.dirname(item.dest), { recursive: true }, (err) => {
+          if (err)
+            throw err;
+        });
+
+        const info = await sharp(item.src).png({
+          force: true,
+          compressionLevel: 9,
+          palette: true,
+        }).toFile(item.dest);
+
+        console.log(
+          `[svg2png] created ${item.dest} -- bytes: ${info.size}, w:${info.width}px,  h:${info.height}px`
+        );
+      } catch (err) {
+        console.error(`ERROR: ${item.dest} -- ${err}`);
+        throw(err);
+      }
+    }
+  );
+}
+
+
+/**
+ * Optimize SVG images for WEB.
+ *
+ * @param {import('svgo').Config} svgo_opts - Options passed to svgo.
+ * @param {Src2Dest[]} items - Array of SVG files (src:SVG, dest:SVG) to optimize.
+ */
+
+async function svg2svg(svgo_opts, items) {
+  items.forEach(
+    async (item) => {
+      try {
+        fs.mkdir(path.dirname(item.dest), { recursive: true }, (err) => {
+          if (err)
+            throw err;
+        });
+
+        const raw = fs.readFileSync(item.src, "utf8");
+        const opt = svgo(raw, svgo_opts);
+        fs.writeFileSync(item.dest, opt.data);
+        console.log(
+          `[svg2svg] optimized: ${item.dest} -- src: ${item.src}`
+        );
+
+      } catch (err) {
+        console.error(`ERROR: optimize src: ${item.src} -- ${err}`);
+        throw(err);
+      }
+    }
+  );
+}
+
+
+export { svg2png, svg2svg };
--- a/client/simple/tools/jinja_svg_catalog.html.edge
+++ b/client/simple/tools/jinja_svg_catalog.html.edge
@@ -0,0 +1,26 @@
+{{--
+This is a EDGE https://edgejs.dev/ template to generate a HTML Jinja template
+for the backend.  Example output of this EDGE template:
+- https://github.com/searxng/searxng/blob/master/searx/templates/simple/icons.html
+--}}
+{#
+Catalog of SVG symbols that can be inserted into the HTML output of a Jinja
+template. This file from:
+
+  client/simple/tools/icon_catalog.edge.html
+#}
+
+{%-
+set catalog = {
+@each((svg, name) in svg_catalog)
+    '{{{name}}}' : '{{{svg}}}',
+@end
+}
+-%}
+
+@each(macro in macros)
+
+{% macro {{ macro.name }}(action, alt) -%}
+  {{ open_curly_brace }} catalog[action] | replace("{{__jinja_class_placeholder__}}", "{{ macro.class }}") | safe {{ close_curly_brace }}
+{%- endmacro %}
+@end
--- a/client/simple/tools/jinja_svg_catalog.js
+++ b/client/simple/tools/jinja_svg_catalog.js
@@ -0,0 +1,132 @@
+import fs from "fs";
+import { resolve, dirname } from "path";
+import { Edge } from 'edge.js';
+import { optimize as svgo } from "svgo";
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const __jinja_class_placeholder__ = "__jinja_class_placeholder__";
+
+// -- types
+
+/**
+ * @typedef {object} IconSet - A set of icons
+ * @property {object[]} set - Array of SVG icons, where property name is the
+ * name of the icon and value is the src of the SVG (relative to base).
+ * @property {string} base - Folder in which the SVG src files are located.
+ * @property {import("svgo").Config} svgo_opts - svgo options for this set.
+ */
+
+/**
+ * @typedef {object} IconSVG - Mapping of icon name to SVG source file.
+ * @property {string} name - Name of the icon isource file.
+ * @property {string} src - Name of the destination file.
+ * @property {import("svgo").Config} svgo_opts - Options passed to svgo.
+ */
+
+/**
+ * @typedef {object} JinjaMacro - Arguments to create a jinja macro
+ * @property {string} name - Name of the jinja macro.
+ * @property {string} class - SVG's class name (value of XML class attribute)
+ */
+
+
+// -- functions
+
+/**
+ * Generate a jinja template with a catalog of SVG icons that can be
+ * used in in other HTML jinja templates.
+ *
+ * @param {string} dest - filename of the generate jinja template.
+ * @param {JinjaMacro} macros - Jinja macros to create.
+ * @param {IconSVG[]} items - Array of SVG items.
+ */
+
+function jinja_svg_catalog(dest, macros, items) {
+
+  const svg_catalog = {};
+  const edge_template = resolve(__dirname, "jinja_svg_catalog.html.edge");
+
+  items.forEach(
+    (item) => {
+
+      /** @type {import("svgo").Config} */
+      // JSON.stringify & JSON.parse are used to create a deep copy of the
+      // item.svgo_opts object
+      const svgo_opts = JSON.parse(JSON.stringify(item.svgo_opts));
+      svgo_opts.plugins.push({
+        name: "addClassesToSVGElement",
+        params: {
+          classNames: [__jinja_class_placeholder__]
+        }}
+      );
+
+      try {
+        const raw = fs.readFileSync(item.src, "utf8");
+        const opt = svgo(raw, svgo_opts);
+        svg_catalog[item.name] = opt.data;
+      } catch (err) {
+        console.error(`ERROR: jinja_svg_catalog processing ${item.name} src: ${item.src} -- ${err}`);
+        throw(err);
+      }
+    }
+  );
+
+  fs.mkdir(dirname(dest), { recursive: true }, (err) => {
+    if (err) throw err;
+  });
+
+  const ctx = {
+    svg_catalog: svg_catalog,
+    macros: macros,
+    edge_template: edge_template,
+    __jinja_class_placeholder__: __jinja_class_placeholder__,
+    // see https://github.com/edge-js/edge/issues/162
+    open_curly_brace : "{{",
+    close_curly_brace : "}}"
+  };
+
+  const jinjatmpl = Edge.create().renderRawSync(
+	  fs.readFileSync(edge_template, "utf-8"),
+	  ctx
+  );
+
+  fs.writeFileSync(dest, jinjatmpl);
+  console.log(`[jinja_svg_catalog] created: ${dest}`);
+}
+
+
+/**
+ * Calls jinja_svg_catalog for a collection of icon sets where each set has its
+ * own parameters.
+ *
+ * @param {string} dest - filename of the generate jinja template.
+ * @param {JinjaMacro} macros - Jinja macros to create.
+ * @param {IconSet[]} sets - Array of SVG sets.
+ */
+function jinja_svg_sets(dest, macros, sets) {
+  /** @type IconSVG[] */
+  const items = [];
+  const all = [];
+  for (const obj of sets) {
+
+    for (const [name, file] of Object.entries(obj.set)) {
+      if (all.includes(name)) {
+        throw new Error(`ERROR: ${name} has already been defined`);
+      }
+      items.push({
+        name: name,
+        src: resolve(obj.base, file),
+        svgo_opts: obj.svgo_opts,
+      });
+    }
+    jinja_svg_catalog(dest, macros, items);
+  }
+}
+
+// -- exports
+
+export {
+  jinja_svg_sets,
+  jinja_svg_catalog,
+};
--- a/client/simple/tools/plg.js
+++ b/client/simple/tools/plg.js
@@ -0,0 +1,41 @@
+/**
+ * Custom vite plugins to build the web-client components of the simple theme.
+ *
+ * HINT:
+ *
+ *   This is an inital implementation for the migration of the build process
+ *   from grunt to vite.  For fully support (vite: build & serve) more work is
+ *   needed.
+ */
+
+import { svg2png } from "./img.js";
+import { svg2svg } from "./img.js";
+
+/**
+ * Vite plugin to convert a list of SVG files to PNG.
+ *
+ * @param {import('./img.js').Src2Dest} items - Array of SVG files (src: SVG, dest:PNG) to convert.
+ */
+function plg_svg2png(items) {
+  return {
+    name: 'searxng-simple-svg2png',
+    apply: 'build', // or 'serve'
+    async writeBundle() { svg2png(items); },
+  };
+}
+
+/**
+ * Vite plugin to optimize SVG images for WEB.
+ *
+ * @param {import('svgo').Config} svgo_opts - Options passed to svgo.
+ * @param {import('./img.js').Src2Dest} items - Array of SVG files (src:SVG, dest:SVG) to optimize.
+ */
+function plg_svg2svg(svgo_opts, items) {
+  return {
+    name: 'searxng-simple-svg2png',
+    apply: 'build', // or 'serve'
+    async writeBundle() { svg2svg(items, svgo_opts); },
+  };
+}
+
+export { plg_svg2png, plg_svg2svg };
--- a/client/simple/vite.config.js
+++ b/client/simple/vite.config.js
@@ -0,0 +1,185 @@
+/**
+ * CONFIG: https://vite.dev/config/
+ */
+
+import { resolve } from "node:path";
+import { defineConfig } from "vite";
+import stylelint from "vite-plugin-stylelint";
+import { viteStaticCopy } from "vite-plugin-static-copy";
+import { plg_svg2png } from "./tools/plg.js";
+import { plg_svg2svg } from "./tools/plg.js";
+
+
+const ROOT = "../..";  // root of the git reposetory
+
+const PATH = {
+
+  dist: resolve(ROOT, "searx/static/themes/simple"),
+  // dist: resolve(ROOT, "client/simple/dist"),
+
+  src: "src",
+  modules: "node_modules",
+  brand: "src/brand",
+  static: resolve(ROOT, "client/simple/static"),
+  leaflet: resolve(ROOT, "client/simple/node_modules/leaflet/dist"),
+  templates: resolve(ROOT, "searx/templates/simple"),
+};
+
+const svg2svg_opts = {
+  plugins: [
+    { name: "preset-default" },
+    "sortAttrs",
+    "convertStyleToAttrs",
+  ]
+};
+
+const svg2svg_favicon_opts = {
+  plugins: [
+    { name: "preset-default" },
+    "sortAttrs",
+  ]
+};
+
+
+export default defineConfig({
+
+  root: PATH.src,
+  mode: "production",
+  // mode: "development",
+
+  // FIXME: missing CCS sourcemaps!!
+  // see: https://github.com/vitejs/vite/discussions/13845#discussioncomment-11992084
+  //
+  // what I have tried so far (see config below):
+  //
+  // - build.sourcemap
+  // - esbuild.sourcemap
+  // - css.preprocessorOptions.less.sourceMap
+
+  css: {
+    devSourcemap: true,
+    preprocessorOptions: {
+      less: {
+        // FIXME: missing CCS sourcemaps!!
+        sourceMap: {
+          outputSourceFiles: true,
+          sourceMapURL: (name) => { const s = name.split('/'); return s[s.length - 1] + '.map'; },
+        },
+        // env: 'development',
+        // relativeUrls: true,
+        // javascriptEnabled: true,
+      },
+    },
+  },  // end: css
+
+  esbuild : {
+    // FIXME: missing CCS sourcemaps!!
+    sourcemap: true
+  },
+
+  build: {
+    manifest: "manifest.json",
+    emptyOutDir: true,
+    assetsDir: "",
+    outDir: PATH.dist,
+
+    // FIXME: missing CCS sourcemaps!!
+    sourcemap: true,
+
+    // https://vite.dev/config/build-options.html#build-cssminify
+    cssMinify: true,
+    // cssMinify: "esbuild",
+    minify: "esbuild",
+
+    rollupOptions: {
+      input: {
+
+        // build CSS files
+        "css/searxng.min.css": PATH.src + "/less/style-ltr.less",
+        "css/searxng-rtl.min.css": PATH.src + "/less/style-rtl.less",
+        "css/rss.min.css": PATH.src + "/less/rss.less",
+
+        // build JS files
+        "js/searxng.head.min": PATH.src + "/js/searxng.head.js",
+        "js/searxng.min": PATH.src + "/js/searxng.js",
+
+      },
+
+      // file naming conventions / pathnames are relative to outDir (PATH.dist)
+      output: {
+        entryFileNames: "[name].js",
+        chunkFileNames: "[name].js",
+        assetFileNames: "[name].[ext]",
+        // Vite does not support "rollupOptions.output.sourcemap".
+        // Please use "build.sourcemap" instead.
+        // sourcemap: true,
+      },
+
+    },
+  },  // end: build
+
+  plugins: [
+
+    stylelint({
+      build: true,
+      emitWarningAsError: true,
+      fix: true,
+    }),
+
+    // Leaflet
+
+    viteStaticCopy({
+      targets: [
+        { src: PATH.leaflet + "/leaflet.{js,js.map}", dest: PATH.dist + "/js" },
+        { src: PATH.leaflet + "/images/*.png", dest: PATH.dist + "/css/images/" },
+        { src: PATH.leaflet + "/*.{css,css.map}", dest: PATH.dist + "/css" },
+        { src: PATH.static + "/**/*", dest: PATH.dist },
+      ]
+    }),
+
+    // -- svg images
+
+    plg_svg2svg(
+      [
+        { src: PATH.src + "/svg/empty_favicon.svg", dest: PATH.dist + "/img/empty_favicon.svg" },
+        { src: PATH.src + "/svg/select-dark.svg", dest: PATH.dist + "/img/select-dark.svg" },
+        { src: PATH.src + "/svg/select-light.svg", dest: PATH.dist + "/img/select-light.svg" },
+      ],
+      svg2svg_opts,
+    ),
+
+    // SearXNG brand (static)
+
+    plg_svg2png(
+      [
+        { src: PATH.brand + "/searxng-wordmark.svg", dest: PATH.dist + "/img/favicon.png" },
+        { src: PATH.brand + "/searxng.svg", dest: PATH.dist + "/img/searxng.png" },
+      ],
+    ),
+
+    // -- svg
+    plg_svg2svg(
+      [
+        { src: PATH.brand + "/searxng.svg", dest: PATH.dist + "/img/searxng.svg" },
+        { src: PATH.brand + "/img_load_error.svg", dest: PATH.dist + "/img/img_load_error.svg" },
+      ],
+      svg2svg_opts,
+    ),
+
+    // -- favicon
+    plg_svg2svg(
+      [ { src: PATH.brand + "/searxng-wordmark.svg", dest: PATH.dist + "/img/favicon.svg" } ],
+      svg2svg_favicon_opts,
+    ),
+
+    // -- simple templates
+    plg_svg2svg(
+      [
+        { src: PATH.brand + "/searxng-wordmark.svg", dest: PATH.templates + "/searxng-wordmark.min.svg" },
+      ],
+      svg2svg_opts
+    ),
+
+  ] // end: plugins
+
+});