CCPBioSim · jkalayan · Jun 19, 2026 · May 22, 2026 · May 22, 2026 · May 22, 2026
diff --git a/biosimdb_interface/__init__.py b/biosimdb_interface/__init__.py
@@ -26,13 +26,17 @@ def create_app(test_config=None):
         Configured Flask app instance.
     """
     # create and configure the app
+    APPLICATION_BASE = os.getenv("APPLICATION_BASE", "")
     app = Flask(
         __name__,  # name of the current Python module
         template_folder="templates",  # where html files are stored.
         static_folder="static",  # used for css and js files.
+        static_url_path=f"{APPLICATION_BASE}/static",
         instance_relative_config=True,
     )  # create flask instance
 
+    app.config["APPLICATION_BASE"] = os.getenv("APPLICATION_BASE", "")
+
     # check secret key is not "dev" for prod
     secret_key = os.getenv("SECRET_KEY", "dev")
     if secret_key == "dev" and not app.debug:
@@ -47,6 +51,7 @@ def create_app(test_config=None):
         AUTH_URL=os.getenv("AUTH_URL", ""),
         TOKEN_URL=os.getenv("TOKEN_URL", ""),
         BASE_URL=os.getenv("BASE_URL", ""),
+        JOOMLA_BASE_URL=os.getenv("JOOMLA_BASE_URL", "").rstrip("/"),
         API_BASE=os.getenv("API_BASE", ""),
         REDIRECT_URI=os.getenv("REDIRECT_URI", ""),
         SCOPES=os.getenv("SCOPES", "").strip(),
@@ -61,7 +66,11 @@ def create_app(test_config=None):
 
     @app.context_processor
     def inject_base_url():
-        return {"BASE_URL": app.config.get("BASE_URL") or ""}
+        return {
+            "BASE_URL": app.config.get("BASE_URL", ""),
+            "JOOMLA_BASE_URL": app.config.get("JOOMLA_BASE_URL", ""),
+            "APPLICATION_BASE": app.config.get("APPLICATION_BASE", ""),
+        }
 
     # ensure the instance folder exists
     try:
@@ -71,10 +80,10 @@ def inject_base_url():
 
     from .form import form_bp
 
-    app.register_blueprint(form_bp)
+    app.register_blueprint(form_bp, url_prefix=app.config["APPLICATION_BASE"])
 
     from .login import bp as login_bp
 
-    app.register_blueprint(login_bp)
+    app.register_blueprint(login_bp, url_prefix=app.config["APPLICATION_BASE"])
 
     return app
diff --git a/biosimdb_interface/schema/__init__.py b/biosimdb_interface/schema/__init__.py
diff --git a/biosimdb_interface/static/js/form/metadata.js b/biosimdb_interface/static/js/form/metadata.js
@@ -28,7 +28,7 @@ document.addEventListener('click', function(e) {
             });
         });
 
-        fetch('/extract_metadata', {
+        fetch(window.APPLICATION_BASE + '/extract_metadata', {
             method: 'POST',
             body: formData
         })
@@ -421,7 +421,7 @@ function requireExtraction(form) {
 function validateAndSubmit(form, onSuccess) {
     const formData = new FormData(form);
     formData.append('save', '1');
-    fetch('/webform', { method: 'POST', body: formData })
+    fetch(window.APPLICATION_BASE + '/webform', { method: 'POST', body: formData })
         .then(r => r.json())
         .then(data => {
             if (data.validation_errors && data.validation_errors.length > 0) {

diff --git a/biosimdb_interface/templates/form/webform.html b/biosimdb_interface/templates/form/webform.html
@@ -29,7 +29,7 @@
 
 
 <div class="py-4 mt-3 mb-3">
-<form class="upload-form container bg-white rounded border p-4 mb-5" action="/webform" method="POST" enctype="multipart/form-data" id="simulationForm">
+<form class="upload-form container bg-white rounded border p-4 mb-5" action="{{ url_for('form.webform') }}" method="POST" enctype="multipart/form-data" id="simulationForm">
 
     <div class="position-relative d-flex align-items-center mb-2">
         <a href="{{ BASE_URL }}/communities/biosimdb" target="_blank" class="btn btn-sm btn-outline-primary">BioSimDB ↗</a>
@@ -75,12 +75,12 @@ <h5 class="mb-0 text-center">{{ section.title }}</h5>
                 </div>
             {% endfor %}
 
-        <div class="position-fixed bottom-0 start-50 translate-middle-x" style="z-index:1030; width:100%;">
+        <!-- <div class="position-fixed bottom-0 start-50 translate-middle-x" style="z-index:1030; width:100%;">
             <div class="container bg-white border-start border-end p-3 d-grid gap-2">
                 <input type="submit" class="btn btn-outline-success btn-lg" name="save" value="Download Simulation Metadata">
                 <input type="submit" class="btn btn-outline-success btn-lg" name="submit" value="Submit to BioSimDB">
             </div>
-        </div>
+        </div> -->
 
 </form>
 </div>

diff --git a/biosimdb_interface/templates/macros/webform.html b/biosimdb_interface/templates/macros/webform.html
@@ -261,6 +261,12 @@ <h5 class="text-center mb-2">Simulation Metadata</h5>
         <a href="#section_{{ meta_section | replace(' ', '_') }}" class="btn btn-outline-secondary btn-sm text-decoration-none">{{ meta_group.label or meta_section }}</a>
         {% endfor %}
     </div>
+
+    <!-- Include submit/save buttons in sticky top -->
+    <div class="container bg-white border-start border-end p-3 d-grid gap-2">
+        <input type="submit" class="btn btn-outline-success btn-lg" name="save" value="Download Simulation Metadata">
+        <input type="submit" class="btn btn-outline-success btn-lg" name="submit" value="Submit to BioSimDB">
+    </div>
 </nav>
 
 {% for meta_section, meta_group in simulation_metadata.items() %}

diff --git a/biosimdb_interface/templates/main/base.html b/biosimdb_interface/templates/main/base.html
@@ -1,5 +1,4 @@
 {#
-  base.html
   Site-wide base template. All other templates extend this.
 
   Blocks:
@@ -9,7 +8,8 @@
   Features:
     - Renders flashed messages as dismissible Bootstrap alerts.
     - Loads Bootstrap 5 JS bundle from CDN.
-    - Includes head.html for shared <head> content (meta, CSS, title).
+    - Includes head.html for shared <head> content.
+    - Includes Joomla header/footer only when JOOMLA_BASE_URL is configured.
 #}
 
 <!DOCTYPE html>
@@ -19,8 +19,9 @@
     {% include 'main/head.html' %}
 </head>
 
-<body>
+<body{% if JOOMLA_BASE_URL %} class="site com_ccpbiosim wrapper-static view-ourcommunity no-layout no-task itemid-138"{% endif %}>
 
+    <!-- Alerts returned from flask -->
     {% with messages = get_flashed_messages(with_categories=true) %}
     {% if messages %}
         <div class="container mt-3">
@@ -34,10 +35,33 @@
     {% endif %}
     {% endwith %}
 
-    {% block content %}{% endblock %}
+    {% if JOOMLA_BASE_URL %}
+        {% include 'main/joomla_header.html' %}
+    {% endif %}
+
+    <div class="{% if JOOMLA_BASE_URL %}site-grid{% else %}container py-4{% endif %}">
+        <div class="{% if JOOMLA_BASE_URL %}grid-child container-component{% endif %}">
+            {% if JOOMLA_BASE_URL %}
+                <div id="system-message-container" aria-live="polite"></div>
+            {% endif %}
+            <main>
+                {% block content %}{% endblock %}
+            </main>
+        </div>
+    </div>
 
+    {% if JOOMLA_BASE_URL %}
+        {% include 'main/joomla_footer.html' %}
+    {% endif %}
+
+    <!-- bootstrap js for webform -->
     {% block scripts %}
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+
+    <!-- find the base set in config -->
+    <script>
+    window.APPLICATION_BASE = "{{ APPLICATION_BASE }}";
+    </script>
     {% endblock %}
 
 </body>

diff --git a/biosimdb_interface/templates/main/head.html b/biosimdb_interface/templates/main/head.html
@@ -1,20 +1,19 @@
 {#
-  head.html
   Shared <head> partial included by base.html.
 
-  Loads:
-    - Bootstrap 5.3.2 CSS (CDN) (https://getbootstrap.com/docs/5.3/)
-    - Application stylesheet (styles/styles.css)
-    - Application SCSS (styles/styles.scss)
-    - Page title and favicon
+  Loads core app assets. Joomla assets are included only when
+  JOOMLA_BASE_URL is configured.
 #}
 
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
- <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/styles.css') }}">
- <link rel="stylesheet" href="{{ url_for('static', filename='styles/styles.scss') }}">
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>BioSimDB</title>
 
- <TITLE>
-    BioSimDB Interface
- </TITLE>
+{% if JOOMLA_BASE_URL %}
+    {% include 'main/joomla_head.html' %}
+{% endif %}
 
- <link rel="shortcut icon" sizes="any" type="image/x-icon" href="{{ url_for('static', filename='images/white-BioSimDB-logo-notext.svg') }}">
+<!-- Bootstrap and webform css here -->
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/styles.css') }}">
+<link rel="stylesheet" href="{{ url_for('static', filename='styles/styles.scss') }}">
diff --git a/biosimdb_interface/templates/main/joomla_footer.html b/biosimdb_interface/templates/main/joomla_footer.html
@@ -0,0 +1,26 @@
+{#
+  Joomla site footer.
+
+  Included only when JOOMLA_BASE_URL is configured.
+#}
+
+<footer class="container-footer footer full-width">
+    <div class="grid-child">
+        <ul id="mod-menu110" class="mod-menu mod-list nav ">
+            <li class="nav-item item-117"><a href="{{ JOOMLA_BASE_URL }}/#" >About</a></li>
+            <li class="nav-item item-118"><a href="{{ JOOMLA_BASE_URL }}/contact" >Contact</a></li>
+            <li class="nav-item item-119"><a href="{{ JOOMLA_BASE_URL }}/accessibility" >Accessibility</a></li>
+            <li class="nav-item item-120"><a href="{{ JOOMLA_BASE_URL }}/privacy" >Privacy</a></li>
+            <li class="nav-item item-184"><a href="{{ JOOMLA_BASE_URL }}/administrators" >Administrators</a></li>
+        </ul>
+
+        <div id="mod-custom112" class="mod-custom custom">
+            <p style="text-align: center;"><img class="float-none" style="margin-left: 10px; margin-right: 10px;" src="{{ JOOMLA_BASE_URL }}/images/logos/stfc-white.png" alt="STFC logo" width="300" height="77"><img class="float-none" style="margin-left: 10px; margin-right: 10px;" src="{{ JOOMLA_BASE_URL }}/images/logos/epsrc-white.png" alt="EPSRC logo" width="300"><img class="float-none" style="margin-left: 10px; margin-right: 10px;" src="{{ JOOMLA_BASE_URL }}/images/logos/cosec-white.png" alt="CoSeC logo" width="105"></p>
+            <p style="text-align: center;"><small>CCPBioSim acknowledges the funding support it receives from UKRI - EPSRC through an SLA with Scientific Computing at UKRI - STFC </small></p>
+        </div>
+    </div>
+</footer>
+
+<a href="#top" id="back-top" class="back-to-top-link" aria-label="Back to Top">
+    <span class="icon-arrow-up icon-fw" aria-hidden="true"></span>
+</a>
diff --git a/biosimdb_interface/templates/main/joomla_head.html b/biosimdb_interface/templates/main/joomla_head.html
@@ -0,0 +1,63 @@
+{#
+  Joomla <head> assets.
+
+  Included only when JOOMLA_BASE_URL is configured.
+#}
+
+<meta name="generator" content="Joomla! - Open Source Content Management">
+<link href="{{ JOOMLA_BASE_URL }}/media/system/images/joomla-favicon.svg" rel="icon" type="image/svg+xml">
+<link href="{{ JOOMLA_BASE_URL }}/media/system/images/favicon.ico" rel="alternate icon" type="image/vnd.microsoft.icon">
+<link href="{{ JOOMLA_BASE_URL }}/media/system/images/joomla-favicon-pinned.svg" rel="mask-icon" color="#000">
+
+<link href="{{ JOOMLA_BASE_URL }}/media/system/css/joomla-fontawesome.min.css?34280d" rel="lazy-stylesheet"><noscript><link href="{{ JOOMLA_BASE_URL }}/media/system/css/joomla-fontawesome.min.css?34280d" rel="stylesheet"></noscript>
+<link href="{{ JOOMLA_BASE_URL }}/media/com_ccpbiosim/css/site.css?34280d" rel="stylesheet">
+<link href="{{ JOOMLA_BASE_URL }}/media/templates/site/cassiopeia/css/template.min.css?34280d" rel="stylesheet">
+<link href="{{ JOOMLA_BASE_URL }}/media/templates/site/cassiopeia/css/global/colors_standard.min.css?34280d" rel="stylesheet">
+<link href="{{ JOOMLA_BASE_URL }}/media/mod_menu/css/mod-menu.min.css?a45ede" rel="stylesheet">
+<link href="{{ JOOMLA_BASE_URL }}/media/templates/site/ccpbiosim_extended/css/global/colors.min.css?34280d" rel="stylesheet">
+<link href="{{ JOOMLA_BASE_URL }}/media/templates/site/ccpbiosim_extended/css/global/fonts.min.css?34280d" rel="stylesheet">
+<link href="{{ JOOMLA_BASE_URL }}/media/templates/site/cassiopeia/css/vendor/joomla-custom-elements/joomla-alert.min.css?0.4.1" rel="stylesheet">
+<link href="{{ JOOMLA_BASE_URL }}/media/templates/site/ccpbiosim_extended/css/user.css?34280d" rel="stylesheet">
+<style>:root {
+    --hue: 214;
+    --template-bg-light: #f0f4fb;
+    --template-text-dark: #495057;
+    --template-text-light: #ffffff;
+    --template-link-color: var(--link-color);
+    --template-special-color: #001B4C;
+    --cassiopeia-font-family-body: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
+        --cassiopeia-font-weight-normal: 400;--cassiopeia-font-family-headings: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
+        --cassiopeia-font-weight-headings: 700;
+}</style>
+<style>:root {
+    --body-bg: rgb(254, 254, 254);
+    --body-color: rgb(23, 23, 23);
+    --btnbg: rgb(39, 170, 223);
+    --btnbgh: rgb(25, 152, 200);
+    --btncolor: rgb(254, 254, 254);
+    --btncolorh: rgb(254, 254, 254);
+    --footerbg: rgb(15, 23, 42);
+    --footercolor: rgb(254, 254, 254);
+    --headerbg: rgb(29, 121, 137);
+    --headercolor: rgb(255, 255, 255);
+    --link-color: rgb(29, 121, 137);
+    --link-hover-color: rgb(14, 59, 67);
+}</style>
+<style>:root {
+    --body-font-size: 1rem;
+    --h1size: 2rem;
+    --h2size: 1.7rem;
+    --h3size: 1.5rem;
+}</style>
+
+<script src="{{ JOOMLA_BASE_URL }}/media/vendor/metismenujs/js/metismenujs.min.js?1.4.0" defer></script>
+<script src="{{ JOOMLA_BASE_URL }}/media/com_ccpbiosim/js/site.js?34280d"></script>
+<script src="{{ JOOMLA_BASE_URL }}/media/templates/site/cassiopeia/js/mod_menu/menu-metismenu.min.js?34280d" defer></script>
+<script type="application/json" class="joomla-script-options new">{"joomla.jtext":{"ERROR":"Error","MESSAGE":"Message","NOTICE":"Notice","WARNING":"Warning","JCLOSE":"Close","JOK":"OK","JOPEN":"Open"},"system.paths":{"root":"","rootFull":"https:\/\/dev.ccpbiosim.ac.uk\/","base":"","baseFull":"https:\/\/dev.ccpbiosim.ac.uk\/"},"csrf.token":"f8e362e0bee4e9031376d0638ae83b0b","accessibility-options":{"labels":{"menuTitle":"Accessibility Options","increaseText":"Increase Text Size","decreaseText":"Decrease Text Size","increaseTextSpacing":"Increase Text Spacing","decreaseTextSpacing":"Decrease Text Spacing","invertColors":"Invert Colours","grayHues":"Grey Hues","underlineLinks":"Underline Links","bigCursor":"Big Cursor","readingGuide":"Reading Guide","textToSpeech":"Text to Speech","speechToText":"Speech to Text","resetTitle":"Reset","closeTitle":"Close"},"icon":{"position":{"left":{"size":"0","units":"px"}},"useEmojis":false},"hotkeys":{"enabled":true,"helpTitles":true},"textToSpeechLang":["en-GB"],"speechToTextLang":["en-GB"]}}</script>
+<script src="{{ JOOMLA_BASE_URL }}/media/system/js/core.min.js?a3d8f8"></script>
+<script src="{{ JOOMLA_BASE_URL }}/media/templates/site/cassiopeia/js/template.min.js?34280d" type="module"></script>
+<script src="{{ JOOMLA_BASE_URL }}/media/vendor/bootstrap/js/collapse.min.js?5.3.8" type="module"></script>
+<script src="{{ JOOMLA_BASE_URL }}/media/mod_menu/js/menu.min.js?5a565f" type="module"></script>
+<script src="{{ JOOMLA_BASE_URL }}/media/system/js/messages.min.js?9a4811" type="module"></script>
+<script src="{{ JOOMLA_BASE_URL }}/media/vendor/accessibility/js/accessibility.min.js?3.0.17" defer></script>
+<script type="module">window.addEventListener("load", function() {new Accessibility(Joomla.getOptions("accessibility-options") || {});});</script>
diff --git a/biosimdb_interface/templates/main/joomla_header.html b/biosimdb_interface/templates/main/joomla_header.html
@@ -0,0 +1,48 @@
+{#
+  Joomla site header.
+
+  Included only when JOOMLA_BASE_URL is configured.
+#}
+
+<header class="header container-header full-width">
+    <div class="grid-child">
+        <div class="navbar-brand">
+            <a class="brand-logo" href="{{ JOOMLA_BASE_URL }}/">
+                <img loading="eager" decoding="async" src="{{ JOOMLA_BASE_URL }}/images/logos/ccpbiosim/CCPBioSim-logo-white-side-text.svg" alt="CCPBioSim" width="300" height="98">
+            </a>
+        </div>
+    </div>
+
+    <div class="grid-child container-nav">
+        <nav class="navbar navbar-expand-lg" aria-label="Nav Menu">
+            <button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle Navigation">
+                <span class="icon-menu" aria-hidden="true"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbar1">
+                <ul class="mod-menu mod-menu_dropdown-metismenu metismenu mod-list ">
+                    <li class="metismenu-item item-134 level-1 active deeper parent">
+                        <button class="mod-menu__heading nav-header mm-collapsed mm-toggler mm-toggler-nolink" aria-haspopup="true" aria-expanded="false">People</button>
+                        <ul class="mm-collapse">
+                            <li class="metismenu-item item-138 level-2 current active"><a href="{{ JOOMLA_BASE_URL }}/people/our-community" aria-current="page">Our Community</a></li>
+                            <li class="metismenu-item item-139 level-2"><a href="{{ JOOMLA_BASE_URL }}/people/core-team" >Core Team</a></li>
+                            <li class="metismenu-item item-140 level-2"><a href="{{ JOOMLA_BASE_URL }}/people/management-team" >Management Team</a></li>
+                            <li class="metismenu-item item-141 level-2"><a href="{{ JOOMLA_BASE_URL }}/people/advisory-board" >Advisory Board</a></li>
+                        </ul>
+                    </li>
+                    <li class="metismenu-item item-132 level-1"><a href="{{ JOOMLA_BASE_URL }}/science" >Science</a></li>
+                    <li class="metismenu-item item-405 level-1"><a href="{{ JOOMLA_BASE_URL }}/impact" >Impact</a></li>
+                    <li class="metismenu-item item-137 level-1"><span class="mod-menu__heading nav-header">BioSimDB</span></li>
+                    <li class="metismenu-item item-133 level-1"><a href="{{ JOOMLA_BASE_URL }}/software" >Software</a></li>
+                    <li class="metismenu-item item-135 level-1 deeper parent">
+                        <button class="mod-menu__heading nav-header mm-collapsed mm-toggler mm-toggler-nolink" aria-haspopup="true" aria-expanded="false">Events</button>
+                        <ul class="mm-collapse">
+                            <li class="metismenu-item item-256 level-2"><a href="{{ JOOMLA_BASE_URL }}/events/upcoming-events" >Upcoming Events</a></li>
+                            <li class="metismenu-item item-257 level-2"><a href="{{ JOOMLA_BASE_URL }}/events/past-events" >Past Events</a></li>
+                        </ul>
+                    </li>
+                    <li class="metismenu-item item-136 level-1"><a href="{{ JOOMLA_BASE_URL }}/training" >Training</a></li>
+                </ul>
+            </div>
+        </nav>
+    </div>
+</header>
diff --git a/tests/conftest.py b/tests/conftest.py
@@ -21,6 +21,7 @@ def app():
             "BASE_URL": "http://localhost",
             "REDIRECT_URI": "http://localhost/callback",
             "SCOPES": "test",
+            "APPLICATION_BASE": "",
         }
     )
     yield app