[proxy] upon Haketilo launch automatically open Haketilo landing page in user's default web browser

* The landing page instructs user to configure browser's proxy settings.
* It is now possible to choose the IP address to listen on via command line parameter.
* The browser launching behavior can be switched off via command line parameter.

25 files changed, 440 insertions, 148 deletions

diff --git a/src/hydrilla/proxy/addon.py b/src/hydrilla/proxy/addon.py
index 328d4a1..cca7924 100644
--- a/src/hydrilla/proxy/addon.py
+++ b/src/hydrilla/proxy/addon.py
@@ -48,6 +48,7 @@ from ..exceptions import HaketiloException
 from ..translations import smart_gettext as _
 from ..url_patterns import parse_url, ParsedUrl
 from .state_impl import ConcreteHaketiloState
+from . import state
 from . import policies
 from . import http_messages
 
@@ -83,27 +84,47 @@ class MitmproxyHeadersWrapper():
         return self.headers.items(multi=True)
 
 
+class LoggerToMitmproxy(state.Logger):
+    def warn(self, msg: str) -> None:
+        ctx.log.warn(f'Haketilo: {msg}')
+
+
 @dc.dataclass(frozen=True)
 class FlowHandlingData:
     request_url: ParsedUrl
     policy:      policies.Policy
 
 
+@dc.dataclass
+class PassedOptions:
+    haketilo_dir:            t.Optional[str]  = None
+    haketilo_listen_host:    t.Optional[str]  = None
+    haketilo_listen_port:    t.Optional[int]  = None
+    haketilo_launch_browser: t.Optional[bool] = None
+
+    @property
+    def fully_configured(self) -> bool:
+        return (self.haketilo_dir            is not None and
+                self.haketilo_listen_host    is not None and
+                self.haketilo_listen_port    is not None and
+                self.haketilo_launch_browser is not None)
+
+
 magical_mitm_it_url_reg = re.compile(r'^http://mitm.it(/.*)?$')
 dummy_url = parse_url('http://dummy.replacement.url')
 
 
 @dc.dataclass
 class HaketiloAddon:
-    """
-    .......
-    """
-    configured:      bool = False
-    configured_lock: Lock = dc.field(default_factory=Lock)
+    initial_options: PassedOptions = PassedOptions()
+    configured:      bool          = False
+    configured_lock: Lock          = dc.field(default_factory=Lock)
 
     flows_data:      dict[int, FlowHandlingData] = dc.field(default_factory=dict)
     flows_data_lock: Lock                        = dc.field(default_factory=Lock)
 
+    logger: LoggerToMitmproxy = dc.field(default_factory=LoggerToMitmproxy)
+
     state: t.Optional[ConcreteHaketiloState] = None
 
     def load(self, loader: addonmanager.Loader) -> None:
@@ -112,29 +133,74 @@ class HaketiloAddon:
             name     = 'haketilo_dir',
             typespec = str,
             default  = '~/.haketilo/',
-            help     = "Point to a Haketilo data directory to use",
+            help     = "Point to a Haketilo data directory to use"
+        )
+        loader.add_option(
+            name     = 'haketilo_listen_host',
+            typespec = str,
+            default  = '127.0.0.1',
+            help     = "Specify the address proxy listens on"
+        )
+        loader.add_option(
+            name     = 'haketilo_listen_port',
+            typespec = int,
+            default  = 8080,
+            help     = "Specify the port listens on"
+        )
+        loader.add_option(
+            name     = 'haketilo_launch_browser',
+            typespec = bool,
+            default  = True,
+            help     = "Specify whether to attempt to open a browser window with Haketilo page displayed inside"
         )
 
     def configure(self, updated: set[str]) -> None:
-        """...."""
-        if 'haketilo_dir' not in updated:
-            return
-
         with self.configured_lock:
-            if self.configured:
-                ctx.log.warn(_('haketilo_dir_already_configured'))
+            val_names = ('dir', 'listen_host', 'listen_port', 'launch_browser')
+            for val_name in val_names:
+                key = f'haketilo_{val_name}'
+
+                if key not in updated:
+                    continue
+
+                if getattr(self.initial_options, key) is not None:
+                    fmt = _('warn.proxy.setting_already_configured_{}')
+                    self.logger.warn(fmt.format(key))
+                    continue
+
+                new_val = getattr(ctx.options, key)
+                setattr(self.initial_options, key, new_val)
+
+            if self.configured or not self.initial_options.fully_configured:
                 return
 
             try:
-                haketilo_dir = Path(ctx.options.haketilo_dir)
-
-                self.state = ConcreteHaketiloState.make(haketilo_dir / 'store')
+                haketilo_dir = self.initial_options.haketilo_dir
+                listen_host  = self.initial_options.haketilo_listen_host
+                listen_port  = self.initial_options.haketilo_listen_port
+
+                self.state = ConcreteHaketiloState.make(
+                    store_dir   = Path(t.cast(str, haketilo_dir)) / 'store',
+                    listen_host = t.cast(str, listen_host),
+                    listen_port = t.cast(int, listen_port),
+                    logger      = self.logger
+                )
             except Exception as e:
                 tb.print_exception(None, e, e.__traceback__)
                 sys.exit(1)
 
             self.configured = True
 
+    def running(self) -> None:
+        with self.configured_lock:
+            assert self.configured
+
+        assert self.state is not None
+
+        if self.initial_options.haketilo_launch_browser:
+            if not self.state.launch_browser():
+                self.logger.warn(_('warn.proxy.couldnt_launch_browser'))
+
     def get_handling_data(self, flow: http.HTTPFlow) -> FlowHandlingData:
         policy: policies.Policy
 
diff --git a/src/hydrilla/proxy/policies/__init__.py b/src/hydrilla/proxy/policies/__init__.py
index 448420a..e958cbd 100644
--- a/src/hydrilla/proxy/policies/__init__.py
+++ b/src/hydrilla/proxy/policies/__init__.py
@@ -15,4 +15,4 @@ from .rule import RuleBlockPolicyFactory, RuleAllowPolicyFactory
 from .misc import FallbackAllowPolicy, FallbackBlockPolicy, ErrorBlockPolicy, \
     DoNothingPolicy
 
-from .web_ui import WebUIPolicyFactory
+from .web_ui import WebUIMainPolicyFactory, WebUILandingPolicyFactory
diff --git a/src/hydrilla/proxy/policies/web_ui.py b/src/hydrilla/proxy/policies/web_ui.py
index 9d31696..f35b0b7 100644
--- a/src/hydrilla/proxy/policies/web_ui.py
+++ b/src/hydrilla/proxy/policies/web_ui.py
@@ -47,14 +47,27 @@ class WebUIPolicy(base.Policy):
     priority: t.ClassVar[base.PolicyPriority] = base.PolicyPriority._THREE
 
     haketilo_state: state.HaketiloState
+    ui_domain:      web_ui.UIDomain
 
     def consume_request(self, request_info: http_messages.RequestInfo) \
         -> http_messages.ProducedResponse:
-        return web_ui.process_request(request_info, self.haketilo_state)
-
+        return web_ui.process_request(
+            request_info = request_info,
+            state        = self.haketilo_state,
+            ui_domain    = self.ui_domain
+        )
 
 @dc.dataclass(frozen=True, unsafe_hash=True)
 class WebUIPolicyFactory(base.PolicyFactory):
-    """...."""
+    ui_domain: t.ClassVar[web_ui.UIDomain]
+
     def make_policy(self, haketilo_state: state.HaketiloState) -> WebUIPolicy:
-        return WebUIPolicy(haketilo_state)
+        return WebUIPolicy(haketilo_state, self.ui_domain)
+
+@dc.dataclass(frozen=True, unsafe_hash=True)
+class WebUIMainPolicyFactory(WebUIPolicyFactory):
+    ui_domain = web_ui.UIDomain.MAIN
+
+@dc.dataclass(frozen=True, unsafe_hash=True)
+class WebUILandingPolicyFactory(WebUIPolicyFactory):
+    ui_domain = web_ui.UIDomain.LANDING_PAGE
diff --git a/src/hydrilla/proxy/state.py b/src/hydrilla/proxy/state.py
index 5e09367..7fb7bac 100644
--- a/src/hydrilla/proxy/state.py
+++ b/src/hydrilla/proxy/state.py
@@ -520,6 +520,12 @@ class HaketiloGlobalSettings:
     repo_refresh_seconds:  int
 
 
+class Logger(ABC):
+    @abstractmethod
+    def warn(self, msg: str) -> None:
+        ...
+
+
 class MissingItemError(ValueError):
     """...."""
     pass
@@ -594,3 +600,22 @@ class HaketiloState(ABC):
     ) -> None:
         """...."""
         ...
+
+    @property
+    @abstractmethod
+    def listen_host(self) -> str:
+        ...
+
+    @property
+    @abstractmethod
+    def listen_port(self) -> int:
+        ...
+
+    @abstractmethod
+    def launch_browser(self) -> bool:
+        ...
+
+    @property
+    @abstractmethod
+    def logger(self) -> Logger:
+        ...
diff --git a/src/hydrilla/proxy/state_impl/base.py b/src/hydrilla/proxy/state_impl/base.py
index 357ae88..df3287b 100644
--- a/src/hydrilla/proxy/state_impl/base.py
+++ b/src/hydrilla/proxy/state_impl/base.py
@@ -34,6 +34,7 @@ subtype.
 import sqlite3
 import threading
 import secrets
+import webbrowser
 import dataclasses as dc
 import typing as t
 
@@ -137,6 +138,9 @@ PayloadsData = t.Mapping[st.PayloadRef, st.PayloadData]
 class HaketiloStateWithFields(st.HaketiloState):
     """...."""
     store_dir:      Path
+    _listen_host:   str
+    _listen_port:   int
+    _logger:        st.Logger
     connection:     sqlite3.Connection
     settings:       st.HaketiloGlobalSettings
     current_cursor: t.Optional[sqlite3.Cursor] = None
@@ -251,3 +255,29 @@ class HaketiloStateWithFields(st.HaketiloState):
         dependencies as well as at startup.
         """
         ...
+
+    @property
+    def listen_host(self) -> str:
+        if self._listen_host != '0.0.0.0':
+            return '127.0.0.1'
+
+        return self._listen_host
+
+    @property
+    def listen_port(self) -> int:
+        return self._listen_port
+
+    @property
+    def efective_listen_addr(self) -> str:
+        effective_host = self._listen_host
+        if self._listen_host == '0.0.0.0':
+            effective_host = '127.0.0.1'
+
+        return f'http://{effective_host}:{self._listen_port}'
+
+    def launch_browser(self) -> bool:
+        return webbrowser.open(self.efective_listen_addr)
+
+    @property
+    def logger(self) -> st.Logger:
+        return self._logger
diff --git a/src/hydrilla/proxy/state_impl/concrete_state.py b/src/hydrilla/proxy/state_impl/concrete_state.py
index d2d6e56..83522cf 100644
--- a/src/hydrilla/proxy/state_impl/concrete_state.py
+++ b/src/hydrilla/proxy/state_impl/concrete_state.py
@@ -198,12 +198,29 @@ class ConcreteHaketiloState(base.HaketiloStateWithFields):
     def _rebuild_structures(self, cursor: sqlite3.Cursor) -> None:
         new_policy_tree = base.PolicyTree()
 
-        ui_factory = policies.WebUIPolicyFactory(builtin=True)
-        web_ui_pattern = 'http*://hkt.mitm.it/***'
-        for parsed_pattern in url_patterns.parse_pattern(web_ui_pattern):
+        web_ui_main_pattern = 'http*://hkt.mitm.it/***'
+        web_ui_main_factory = policies.WebUIMainPolicyFactory(builtin=True)
+
+        for parsed_pattern in url_patterns.parse_pattern(web_ui_main_pattern):
+            new_policy_tree = new_policy_tree.register(
+                parsed_pattern = parsed_pattern,
+                item           = web_ui_main_factory
+            )
+
+        web_ui_landing_pattern = f'{self.efective_listen_addr}/***'
+        web_ui_landing_factory = policies.WebUILandingPolicyFactory(
+            builtin = True
+        )
+
+        try:
+            parsed_pattern, = url_patterns.parse_pattern(web_ui_landing_pattern)
+        except url_patterns.HaketiloURLException:
+            fmt = _('warn.proxy.failed_to_register_landing_page_at_{}')
+            self.logger.warn(fmt.format(web_ui_landing_pattern))
+        else:
             new_policy_tree = new_policy_tree.register(
-                parsed_pattern,
-                ui_factory
+                parsed_pattern = parsed_pattern,
+                item           = web_ui_landing_factory
             )
 
         # Put script blocking/allowing rules in policy tree.
@@ -346,7 +363,12 @@ class ConcreteHaketiloState(base.HaketiloStateWithFields):
             self.settings = load_settings(cursor)
 
     @staticmethod
-    def make(store_dir: Path) -> 'ConcreteHaketiloState':
+    def make(
+            store_dir:   Path,
+            listen_host: str,
+            listen_port: int,
+            logger:      st.Logger
+    ) -> 'ConcreteHaketiloState':
         store_dir.mkdir(parents=True, exist_ok=True)
 
         connection = sqlite3.connect(
@@ -360,7 +382,10 @@ class ConcreteHaketiloState(base.HaketiloStateWithFields):
         global_settings = load_settings(connection.cursor())
 
         return ConcreteHaketiloState(
-            store_dir  = store_dir,
-            connection = connection,
-            settings   = global_settings
+            store_dir    = store_dir,
+            _logger      = logger,
+            _listen_host = listen_host,
+            _listen_port = listen_port,
+            connection   = connection,
+            settings     = global_settings
         )
diff --git a/src/hydrilla/proxy/web_ui/__init__.py b/src/hydrilla/proxy/web_ui/__init__.py
index a5dddab..1ae5dba 100644
--- a/src/hydrilla/proxy/web_ui/__init__.py
+++ b/src/hydrilla/proxy/web_ui/__init__.py
@@ -4,4 +4,5 @@
 #
 # Available under the terms of Creative Commons Zero v1.0 Universal.
 
+from ._app import UIDomain
 from .root import process_request
diff --git a/src/hydrilla/proxy/web_ui/_app.py b/src/hydrilla/proxy/web_ui/_app.py
index ab15918..f54f72e 100644
--- a/src/hydrilla/proxy/web_ui/_app.py
+++ b/src/hydrilla/proxy/web_ui/_app.py
@@ -4,6 +4,8 @@
 #
 # Available under the terms of Creative Commons Zero v1.0 Universal.
 
+import enum
+import dataclasses as dc
 import typing as t
 
 import flask
@@ -11,8 +13,17 @@ import flask
 from .. import state as st
 
 
+class UIDomain(enum.Enum):
+    MAIN         = enum.auto()
+    LANDING_PAGE = enum.auto()
+
+@dc.dataclass(init=False)
 class WebUIApp(flask.Flask):
-    _haketilo_state: st.HaketiloState
+    _haketilo_state:     st.HaketiloState
+    _haketilo_ui_domain: t.ClassVar[UIDomain]
 
 def get_haketilo_state() -> st.HaketiloState:
     return t.cast(WebUIApp, flask.current_app)._haketilo_state
+
+def get_haketilo_ui_domain() -> UIDomain:
+    return t.cast(WebUIApp, flask.current_app)._haketilo_ui_domain
diff --git a/src/hydrilla/proxy/web_ui/root.py b/src/hydrilla/proxy/web_ui/root.py
index 18ea18e..57dc958 100644
--- a/src/hydrilla/proxy/web_ui/root.py
+++ b/src/hydrilla/proxy/web_ui/root.py
@@ -29,6 +29,7 @@
 .....
 """
 
+import dataclasses as dc
 import typing as t
 
 from threading import Lock
@@ -71,10 +72,21 @@ def get_settings() -> st.HaketiloGlobalSettings:
     return _app.get_haketilo_state().get_settings()
 
 
+@dc.dataclass(init=False)
 class WebUIAppImpl(_app.WebUIApp):
+    # Flask app is not thread-safe and has to be accompanied by an ugly lock.
+    # This can cause slow requests to block other requests, so we might need a
+    # better workaround at some later point.
+    _haketilo_app_lock: Lock
+
+    _haketilo_blueprints: t.ClassVar[t.Sequence[flask.Blueprint]]
+    _haketilo_ui_domain:  t.ClassVar[_app.UIDomain]
+
     def __init__(self):
         super().__init__(__name__)
 
+        self._haketilo_app_lock = Lock()
+
         self.jinja_options = {
             **self.jinja_options,
             'loader':        jinja2.PackageLoader(__package__),
@@ -99,19 +111,13 @@ class WebUIAppImpl(_app.WebUIApp):
 
         self.before_request(authenticate_by_referrer)
 
-        for blueprint in [
-                rules.bp, repos.bp, items.bp, items_import.bp, prompts.bp
-        ]:
-            self.register_blueprint(blueprint)
+        for bp in self._haketilo_blueprints:
+            self.register_blueprint(bp)
 
-# Flask app is not thread-safe and has to be accompanied by an ugly lock. This
-# can cause slow requests to block other requests, so we might need a better
-# workaround at some later point.
-app      = WebUIAppImpl()
-app_lock = Lock()
 
+home_bp = flask.Blueprint('home', __package__)
 
-@app.route('/', methods=['GET'])
+@home_bp.route('/', methods=['GET'])
 def home(errors: t.Mapping[str, bool] = {}) -> werkzeug.Response:
     state = _app.get_haketilo_state()
 
@@ -122,7 +128,7 @@ def home(errors: t.Mapping[str, bool] = {}) -> werkzeug.Response:
     )
     return flask.make_response(html, 200)
 
-@app.route('/', methods=['POST'])
+@home_bp.route('/', methods=['POST'])
 def home_post() -> werkzeug.Response:
     action = flask.request.form['action']
 
@@ -149,22 +155,57 @@ def home_post() -> werkzeug.Response:
 
     return flask.redirect(flask.url_for('.home'), 303)
 
+blueprints_main = \
+    (rules.bp, repos.bp, items.bp, items_import.bp, prompts.bp, home_bp)
+
+@dc.dataclass(init=False)
+class AppMain(WebUIAppImpl):
+    _haketilo_blueprints = blueprints_main
+    _haketilo_ui_domain  = _app.UIDomain.MAIN
+
+
+landing_bp = flask.Blueprint('landing_page', __package__)
+
+@landing_bp.route('/', methods=['GET'])
+def landing(errors: t.Mapping[str, bool] = {}) -> werkzeug.Response:
+    state = _app.get_haketilo_state()
+
+    html = flask.render_template(
+        'landing.html.jinja',
+        listen_host = state.listen_host,
+        listen_port = state.listen_port
+    )
+    return flask.make_response(html, 200)
+
+@dc.dataclass(init=False)
+class AppLandingPage(WebUIAppImpl):
+    _haketilo_blueprints = (landing_bp,)
+    _haketilo_ui_domain  = _app.UIDomain.LANDING_PAGE
+
+
+apps_seq = [AppMain(), AppLandingPage()]
+apps = dict((app._haketilo_ui_domain, app) for app in apps_seq)
+
+
 def process_request(
         request_info: http_messages.RequestInfo,
-        state: st.HaketiloState
+        state:        st.HaketiloState,
+        ui_domain:    _app.UIDomain = _app.UIDomain.MAIN
 ) -> http_messages.ProducedResponse:
     path = '/'.join(('', *request_info.url.path_segments))
     if (request_info.url.has_trailing_slash):
         path += '/'
 
-    with app_lock:
+    app = apps[ui_domain]
+
+    with app._haketilo_app_lock:
         app._haketilo_state = state
 
         app.jinja_env.install_gettext_translations(make_translation())
 
         flask_response = app.test_client().open(
             path         = path,
-            base_url     = f'{request_info.url.scheme}://hkt.mitm.it',
+            base_url     = request_info.url.url_without_path,
             method       = request_info.method,
             query_string = request_info.url.query,
             headers      = [*request_info.headers.items()],
diff --git a/src/hydrilla/proxy/web_ui/templates/base.html.jinja b/src/hydrilla/proxy/web_ui/templates/base.html.jinja
index e4760bf..f89b39a 100644
--- a/src/hydrilla/proxy/web_ui/templates/base.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/base.html.jinja
@@ -17,11 +17,9 @@ You can choose to use either of these licenses or both.
 I, Wojtek Kosior, thereby promise not to sue for violation of this
 file's licenses. Although I request that you do not make use of this
 code in a proprietary work, I am not going to enforce this in court.
--#}
+#}
 <!DOCTYPE html>
 
-{% set settings = get_settings() %}
-
 {% macro button_row(buttons_data, common_fields={}) %}
   <div class="flex-row">
     {% for classes, text, extra_fields in buttons_data %}
@@ -223,96 +221,13 @@ code in a proprietary work, I am not going to enforce this in court.
           .hide {
               display: none !important;
           }
-
-          ul#nav {
-              -moz-user-select: none;
-              user-select: none;
-              display: flex;
-              justify-content: stretch;
-              white-space: nowrap;
-              background-color: #e0e0e0;
-              margin: 0;
-              padding: 0;
-              border-bottom: 2px solid #444;
-              overflow-x: scroll;
-          }
-
-          li.nav-entry, li.nav-separator {
-              list-style-type: none;
-          }
-
-          li.nav-entry {
-              background-color: #70af70;
-              font-size: 115%;
-              cursor: pointer;
-              text-align: center;
-              flex: 1 1 0;
-          }
-
-          li.nav-separator {
-              flex: 0 0 2px;
-              background-color: inherit;
-          }
-
-          li.big-separator {
-              flex: 4 0 2px;
-          }
-
-          li.nav-entry:hover {
-              box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
-          }
-
-          ul#nav > li.nav-active {
-              background-color: #65A065;
-              color: #222;
-              box-shadow: none;
-              cursor: default;
-          }
-
-          ul#nav > li > :only-child {
-              display: block;
-              padding: 10px;
-          }
-        {% endblock %}
+        {% endblock style %}
     </style>
-    {% endblock %}
+    {% endblock head %}
   </head>
   <body>
-    {% set active_endpoint = get_current_endpoint() %}
-    {%
-      set navigation_bar = [
-          ('home',                 _('web_ui.base.nav.home'),      false),
-          ('rules.rules',          _('web_ui.base.nav.rules'),     false),
-          ('items.packages',       _('web_ui.base.nav.packages'),  false),
-          ('items.libraries',      _('web_ui.base.nav.libraries'), true),
-          ('repos.repos',          _('web_ui.base.nav.repos'),     false),
-          ('import.items_import',  _('web_ui.base.nav.import'),    false)
-      ]
-    %}
-    <ul id="nav">
-      {%
-        for endpoint, label, advanced_user_only in navigation_bar
-            if not advanced_user_only or settings.advanced_user
-      %}
-        {% if not loop.first %}
-          {% set sep_classes = ['nav-separator'] %}
-          {% if loop.last %}
-            {% do sep_classes.append('big-separator') %}
-          {% endif %}
-          <li class="{{ sep_classes|join(' ') }}"></li>
-        {% endif %}
-
-        {% if endpoint == active_endpoint %}
-          <li class="nav-entry nav-active"><div>{{ label }}</div></li>
-        {% else %}
-          <li class="nav-entry">
-            <a href="{{ url_for(endpoint) }}" draggable="false">
-              {{ label }}
-            </a>
-          </li>
-        {% endif %}
-      {% endfor %}
-    </ul>
-    <div id="main">{% block main required %}{% endblock %}</div>
+    {% block body %}
+      <div id="main">{% block main required %}{% endblock %}</div>
+    {% endblock body %}
   </body>
 </html>
diff --git a/src/hydrilla/proxy/web_ui/templates/hkt_mitm_it_base.html.jinja b/src/hydrilla/proxy/web_ui/templates/hkt_mitm_it_base.html.jinja
new file mode 100644
index 0000000..6a6de99
--- /dev/null
+++ b/src/hydrilla/proxy/web_ui/templates/hkt_mitm_it_base.html.jinja
@@ -0,0 +1,116 @@
+{#
+SPDX-License-Identifier: GPL-3.0-or-later OR CC-BY-SA-4.0
+
+Proxy web UI base page template of htk.mitm.it meta-site.
+
+This file is part of Hydrilla&Haketilo.
+
+Copyright (C) 2022 Wojtek Kosior
+
+Dual licensed under
+* GNU General Public License v3.0 or later and
+* Creative Commons Attribution Share Alike 4.0 International.
+
+You can choose to use either of these licenses or both.
+
+
+I, Wojtek Kosior, thereby promise not to sue for violation of this
+file's licenses. Although I request that you do not make use of this
+code in a proprietary work, I am not going to enforce this in court.
+#}
+{% extends "base.html.jinja" %}
+
+{% set settings = get_settings() %}
+
+{% block style %}
+  {{ super() }}
+  ul#nav {
+      -moz-user-select: none;
+      user-select: none;
+      display: flex;
+      justify-content: stretch;
+      white-space: nowrap;
+      background-color: #e0e0e0;
+      margin: 0;
+      padding: 0;
+      border-bottom: 2px solid #444;
+      overflow-x: scroll;
+  }
+
+  li.nav-entry, li.nav-separator {
+      list-style-type: none;
+  }
+
+  li.nav-entry {
+      background-color: #70af70;
+      font-size: 115%;
+      cursor: pointer;
+      text-align: center;
+      flex: 1 1 0;
+  }
+
+  li.nav-separator {
+      flex: 0 0 2px;
+      background-color: inherit;
+  }
+
+  li.big-separator {
+      flex: 4 0 2px;
+  }
+
+  li.nav-entry:hover {
+      box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
+  }
+
+  ul#nav > li.nav-active {
+      background-color: #65A065;
+      color: #222;
+      box-shadow: none;
+      cursor: default;
+  }
+
+  ul#nav > li > :only-child {
+      display: block;
+      padding: 10px;
+  }
+{% endblock style %}
+
+{% block body %}
+  {% set active_endpoint = get_current_endpoint() %}
+  {%
+    set navigation_bar = [
+        ('home.home',            _('web_ui.base.nav.home'),      false),
+        ('rules.rules',          _('web_ui.base.nav.rules'),     false),
+        ('items.packages',       _('web_ui.base.nav.packages'),  false),
+        ('items.libraries',      _('web_ui.base.nav.libraries'), true),
+        ('repos.repos',          _('web_ui.base.nav.repos'),     false),
+        ('import.items_import',  _('web_ui.base.nav.import'),    false)
+    ]
+  %}
+  <ul id="nav">
+    {%
+      for endpoint, label, advanced_user_only in navigation_bar
+          if not advanced_user_only or settings.advanced_user
+    %}
+      {% if not loop.first %}
+        {% set sep_classes = ['nav-separator'] %}
+        {% if loop.last %}
+          {% do sep_classes.append('big-separator') %}
+        {% endif %}
+        <li class="{{ sep_classes|join(' ') }}"></li>
+      {% endif %}
+
+      {% if endpoint == active_endpoint %}
+        <li class="nav-entry nav-active"><div>{{ label }}</div></li>
+      {% else %}
+        <li class="nav-entry">
+          <a href="{{ url_for(endpoint) }}" draggable="false">
+            {{ label }}
+          </a>
+        </li>
+      {% endif %}
+    {% endfor %}
+  </ul>
+
+  {{ super() }}
+{% endblock body %}
diff --git a/src/hydrilla/proxy/web_ui/templates/import.html.jinja b/src/hydrilla/proxy/web_ui/templates/import.html.jinja
index 7636b77..6ec9947 100644
--- a/src/hydrilla/proxy/web_ui/templates/import.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/import.html.jinja
@@ -18,7 +18,7 @@ I, Wojtek Kosior, thereby promise not to sue for violation of this
 file's licenses. Although I request that you do not make use of this
 code in a proprietary work, I am not going to enforce this in court.
 #}
-{% extends "base.html.jinja" %}
+{% extends "hkt_mitm_it_base.html.jinja" %}
 
 {% block title %} {{ _('web_ui.import.title') }} {% endblock %}
 
diff --git a/src/hydrilla/proxy/web_ui/templates/index.html.jinja b/src/hydrilla/proxy/web_ui/templates/index.html.jinja
index e42f5e9..010c2ed 100644
--- a/src/hydrilla/proxy/web_ui/templates/index.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/index.html.jinja
@@ -18,7 +18,7 @@ I, Wojtek Kosior, thereby promise not to sue for violation of this
 file's licenses. Although I request that you do not make use of this
 code in a proprietary work, I am not going to enforce this in court.
 #}
-{% extends "base.html.jinja" %}
+{% extends "hkt_mitm_it_base.html.jinja" %}
 
 {% block title %} {{ _('web_ui.home.title') }} {% endblock %}
 
diff --git a/src/hydrilla/proxy/web_ui/templates/items/item_view.html.jinja b/src/hydrilla/proxy/web_ui/templates/items/item_view.html.jinja
index e517f3b..ccfa6b9 100644
--- a/src/hydrilla/proxy/web_ui/templates/items/item_view.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/items/item_view.html.jinja
@@ -18,7 +18,7 @@ I, Wojtek Kosior, thereby promise not to sue for violation of this
 file's licenses. Although I request that you do not make use of this
 code in a proprietary work, I am not going to enforce this in court.
 #}
-{% extends "base.html.jinja" %}
+{% extends "hkt_mitm_it_base.html.jinja" %}
 
 {% macro version_with_repo(info) -%}
   {{ info.info.version_string }}
diff --git a/src/hydrilla/proxy/web_ui/templates/items/libraries.html.jinja b/src/hydrilla/proxy/web_ui/templates/items/libraries.html.jinja
index 0a72b64..0996b8b 100644
--- a/src/hydrilla/proxy/web_ui/templates/items/libraries.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/items/libraries.html.jinja
@@ -18,7 +18,7 @@ I, Wojtek Kosior, thereby promise not to sue for violation of this
 file's licenses. Although I request that you do not make use of this
 code in a proprietary work, I am not going to enforce this in court.
 #}
-{% extends "base.html.jinja" %}
+{% extends "hkt_mitm_it_base.html.jinja" %}
 
 {% block title %} {{ _('web_ui.libraries.title') }} {% endblock %}
 
diff --git a/src/hydrilla/proxy/web_ui/templates/items/packages.html.jinja b/src/hydrilla/proxy/web_ui/templates/items/packages.html.jinja
index bc6b5bb..b79d594 100644
--- a/src/hydrilla/proxy/web_ui/templates/items/packages.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/items/packages.html.jinja
@@ -18,7 +18,7 @@ I, Wojtek Kosior, thereby promise not to sue for violation of this
 file's licenses. Although I request that you do not make use of this
 code in a proprietary work, I am not going to enforce this in court.
 #}
-{% extends "base.html.jinja" %}
+{% extends "hkt_mitm_it_base.html.jinja" %}
 
 {% block title %} {{ _('web_ui.packages.title') }} {% endblock %}
 
diff --git a/src/hydrilla/proxy/web_ui/templates/landing.html.jinja b/src/hydrilla/proxy/web_ui/templates/landing.html.jinja
new file mode 100644
index 0000000..6314cfd
--- /dev/null
+++ b/src/hydrilla/proxy/web_ui/templates/landing.html.jinja
@@ -0,0 +1,49 @@
+{#
+SPDX-License-Identifier: GPL-3.0-or-later OR CC-BY-SA-4.0
+
+Proxy web UI landing page.
+
+This file is part of Hydrilla&Haketilo.
+
+Copyright (C) 2022 Wojtek Kosior
+
+Dual licensed under
+* GNU General Public License v3.0 or later and
+* Creative Commons Attribution Share Alike 4.0 International.
+
+You can choose to use either of these licenses or both.
+
+
+I, Wojtek Kosior, thereby promise not to sue for violation of this
+file's licenses. Although I request that you do not make use of this
+code in a proprietary work, I am not going to enforce this in court.
+#}
+{% extends "base.html.jinja" %}
+
+{% block title %} {{ _('web_ui.landing.title') }} {% endblock %}
+
+{% block main %}
+  <h3>
+    {{ _('web_ui.landing.heading.haketilo_is_running') }}
+  </h3>
+
+  <p>
+    {{ _('web_ui.landing.web_ui.landing.what_to_do_1') }}
+  </p>
+
+  {{ label(_('web_ui.landing.host_label')) }}
+
+  <p>
+    {{ listen_host }}
+  </p>
+
+  {{ label(_('web_ui.landing.port_label')) }}
+
+  <p>
+    {{ listen_port }}
+  </p>
+
+  <p class="has-colored-links">
+    {{ _('web_ui.landing.html.what_to_do_2')|safe }}
+  </p>
+{% endblock %}
diff --git a/src/hydrilla/proxy/web_ui/templates/prompts/auto_install_error.html.jinja b/src/hydrilla/proxy/web_ui/templates/prompts/auto_install_error.html.jinja
index f4f600c..a17e61d 100644
--- a/src/hydrilla/proxy/web_ui/templates/prompts/auto_install_error.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/prompts/auto_install_error.html.jinja
@@ -18,7 +18,7 @@ I, Wojtek Kosior, thereby promise not to sue for violation of this
 file's licenses. Although I request that you do not make use of this
 code in a proprietary work, I am not going to enforce this in court.
 #}
-{% extends "base.html.jinja" %}
+{% extends "hkt_mitm_it_base.html.jinja" %}
 
 {% block title %}
   {{ _('web_ui.prompts.auto_install_error.title') }}
diff --git a/src/hydrilla/proxy/web_ui/templates/prompts/package_suggestion.html.jinja b/src/hydrilla/proxy/web_ui/templates/prompts/package_suggestion.html.jinja
index ba06ae9..2df38b3 100644
--- a/src/hydrilla/proxy/web_ui/templates/prompts/package_suggestion.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/prompts/package_suggestion.html.jinja
@@ -19,7 +19,7 @@ I, Wojtek Kosior, thereby promise not to sue for violation of this
 file's licenses. Although I request that you do not make use of this
 code in a proprietary work, I am not going to enforce this in court.
 #}
-{% extends "base.html.jinja" %}
+{% extends "hkt_mitm_it_base.html.jinja" %}
 
 {% block title %}
   {{ _('web_ui.prompts.package_suggestion.title') }}
diff --git a/src/hydrilla/proxy/web_ui/templates/repos/add.html.jinja b/src/hydrilla/proxy/web_ui/templates/repos/add.html.jinja
index f635444..106af53 100644
--- a/src/hydrilla/proxy/web_ui/templates/repos/add.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/repos/add.html.jinja
@@ -18,7 +18,7 @@ I, Wojtek Kosior, thereby promise not to sue for violation of this
 file's licenses. Although I request that you do not make use of this
 code in a proprietary work, I am not going to enforce this in court.
 #}
-{% extends "base.html.jinja" %}
+{% extends "hkt_mitm_it_base.html.jinja" %}
 
 {% block title %} {{ _('web_ui.repos.add.title') }} {% endblock %}
 
diff --git a/src/hydrilla/proxy/web_ui/templates/repos/index.html.jinja b/src/hydrilla/proxy/web_ui/templates/repos/index.html.jinja
index e670b59..4f09ae6 100644
--- a/src/hydrilla/proxy/web_ui/templates/repos/index.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/repos/index.html.jinja
@@ -18,7 +18,7 @@ I, Wojtek Kosior, thereby promise not to sue for violation of this
 file's licenses. Although I request that you do not make use of this
 code in a proprietary work, I am not going to enforce this in court.
 #}
-{% extends "base.html.jinja" %}
+{% extends "hkt_mitm_it_base.html.jinja" %}
 
 {% block title %}{{ _('web_ui.repos.title') }}{% endblock %}
 
diff --git a/src/hydrilla/proxy/web_ui/templates/repos/show_single.html.jinja b/src/hydrilla/proxy/web_ui/templates/repos/show_single.html.jinja
index 04075c4..c4b7a9a 100644
--- a/src/hydrilla/proxy/web_ui/templates/repos/show_single.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/repos/show_single.html.jinja
@@ -18,7 +18,7 @@ I, Wojtek Kosior, thereby promise not to sue for violation of this
 file's licenses. Although I request that you do not make use of this
 code in a proprietary work, I am not going to enforce this in court.
 #}
-{% extends "base.html.jinja" %}
+{% extends "hkt_mitm_it_base.html.jinja" %}
 
 {% block title %} {{ _('web_ui.repos.single.title') }} {% endblock %}
 
diff --git a/src/hydrilla/proxy/web_ui/templates/rules/add.html.jinja b/src/hydrilla/proxy/web_ui/templates/rules/add.html.jinja
index 430c5ca..6d21ccd 100644
--- a/src/hydrilla/proxy/web_ui/templates/rules/add.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/rules/add.html.jinja
@@ -18,7 +18,7 @@ I, Wojtek Kosior, thereby promise not to sue for violation of this
 file's licenses. Although I request that you do not make use of this
 code in a proprietary work, I am not going to enforce this in court.
 #}
-{% extends "base.html.jinja" %}
+{% extends "hkt_mitm_it_base.html.jinja" %}
 
 {% block title %} {{ _('web_ui.rules.add.title') }} {% endblock %}
 
diff --git a/src/hydrilla/proxy/web_ui/templates/rules/index.html.jinja b/src/hydrilla/proxy/web_ui/templates/rules/index.html.jinja
index 799eaba..57cc8ad 100644
--- a/src/hydrilla/proxy/web_ui/templates/rules/index.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/rules/index.html.jinja
@@ -18,7 +18,7 @@ I, Wojtek Kosior, thereby promise not to sue for violation of this
 file's licenses. Although I request that you do not make use of this
 code in a proprietary work, I am not going to enforce this in court.
 #}
-{% extends "base.html.jinja" %}
+{% extends "hkt_mitm_it_base.html.jinja" %}
 
 {% block title %}{{ _('web_ui.rules.title') }}{% endblock %}
 
diff --git a/src/hydrilla/proxy/web_ui/templates/rules/show_single.html.jinja b/src/hydrilla/proxy/web_ui/templates/rules/show_single.html.jinja
index 9bf2c75..95e8009 100644
--- a/src/hydrilla/proxy/web_ui/templates/rules/show_single.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/rules/show_single.html.jinja
@@ -18,7 +18,7 @@ I, Wojtek Kosior, thereby promise not to sue for violation of this
 file's licenses. Although I request that you do not make use of this
 code in a proprietary work, I am not going to enforce this in court.
 #}
-{% extends "base.html.jinja" %}
+{% extends "hkt_mitm_it_base.html.jinja" %}
 
 {% block title %} {{ _('web_ui.rules.single.title') }} {% endblock %}