Files
enviPy-bayer/templates/framework.html
Tobias O 21d30a923f [Refactor] Large scale formatting/linting (#193)
All html files now prettier formatted and fixes for incompatible blocks applied

Co-authored-by: Tim Lorsbach <tim@lorsba.ch>
Reviewed-on: enviPath/enviPy#193
Co-authored-by: Tobias O <tobias.olenyi@envipath.com>
Co-committed-by: Tobias O <tobias.olenyi@envipath.com>
2025-11-12 22:47:10 +13:00

423 lines
16 KiB
HTML

<!doctype html>
<html data-theme="envipath">
{% load static %}
<head>
<title>{{ title }}</title>
<meta name="csrf-token" content="{{ csrf_token }}" />
{# Favicon #}
<link
rel="shortcut icon"
type="image/png"
href="{% static 'images/favicon.ico' %}"
/>
{# Tailwind CSS disabled for legacy Bootstrap framework #}
{# Pages using this framework will be migrated to framework_modern.html incrementally #}
{# <link href="{% static 'css/output.css' %}" rel="stylesheet" type="text/css"/> #}
{# Legacy Bootstrap 3.3.7 - scoped to .legacy-bootstrap #}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<link
href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/css/bootstrap-select.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/js/bootstrap-select.min.js"></script>
<script src="https://community.envipath.org/javascripts/embed-topics.js"></script>
<!-- CDN END -->
{# Bootstrap compatibility styles #}
<style>
/* Ensure proper viewport behavior */
html,
body {
height: 100%; /* ensure body fills viewport */
overflow-x: hidden; /* prevent horizontal scroll */
}
</style>
<script>
const csrftoken = document.querySelector("[name=csrf-token]").content;
// Setup CSRF header for all jQuery AJAX requests
$.ajaxSetup({
beforeSend: function (xhr, settings) {
if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
},
});
</script>
<!-- {# C3 CSS #}-->
<!-- <link id="css-c3" href="{% static 'css/c3.css' %}" rel="stylesheet" type="text/css"/>-->
<!-- {# EP CSS #}-->
<!-- <link id="css-pps_white_general" href="{% static 'css/epp.css' %}" rel="stylesheet" type="text/css"/>-->
{# General EP JS #}
<script src="{% static 'js/pps.js' %}"></script>
{# Modal Steps for Stepwise Modal Wizards #}
<script src="{% static 'js/jquery-bootstrap-modal-steps.js' %}"></script>
{% if not debug %}
<!-- Matomo -->
<script>
var _paq = (window._paq = window._paq || []);
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(["trackPageView"]);
_paq.push(["enableLinkTracking"]);
(function () {
var u = "//matomo.envipath.com/";
_paq.push(["setTrackerUrl", u + "matomo.php"]);
_paq.push(["setSiteId", "{{ meta.site_id }}"]);
var d = document,
g = d.createElement("script"),
s = d.getElementsByTagName("script")[0];
g.async = true;
g.src = u + "matomo.js";
s.parentNode.insertBefore(g, s);
})();
</script>
<!-- End Matomo Code -->
{% endif %}
</head>
<body>
<!-- Legacy Bootstrap navbar - isolated from Tailwind -->
<div class="legacy-bootstrap">
<nav
class="navbar navbar-default navbar-inverse"
style="border-radius:0px;"
role="navigation"
>
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header navbar-header-framework">
<!-- <button type="button" class="navbar-toggle navbar-toggle-framework" data-toggle="collapse"-->
<!-- data-target="#navbarCollapse">-->
<!-- <span class="sr-only">Toggle navigation</span>-->
<!-- <span class="icon-bar"></span>-->
<!-- <span class="icon-bar"></span>-->
<!-- <span class="icon-bar"></span>-->
<!-- </button>-->
<a
id="pictureLink"
href="{{ meta.server_url }}"
class="navbar-brand"
>
<img
id="image-logo-short-white.svg"
src="{% static "/images/logo-short-white.svg" %}"
width="100"
alt="enviPath"
/>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div
class="navbar-collapse collapse-framework navbar-collapse-framework collapse"
id="navbarCollapse"
>
<ul class="nav navbar-nav navbar-nav-framework">
<li>
<a href="{{ meta.server_url }}/predict"> Predict Pathway </a>
</li>
{# <li class="dropdown">#}
{# <a data-toggle="dropdown" class="dropdown-toggle" href="#">Predict Pathway<b class="caret"></b></a>#}
{# <ul role="menu" class="dropdown-menu">#}
{# <li>#}
{# <a class="button" data-toggle="modal" data-target="#predict_modal">#}
{# <i class=" glyphicon glyphicon-tag"></i> Predict Pathway#}
{# </a>#}
{# </li>#}
{# <li>#}
{# <a class="button" data-toggle="modal" data-target="#batch_predict_modal">#}
{# <i class=" glyphicon glyphicon-tags"></i> Batch Prediction#}
{# </a>#}
{# </li>#}
{# </ul>#}
{# </li>#}
<li>
<a href="{{ meta.server_url }}/package" id="packageLink"
>Package</a
>
</li>
<li>
<a href="{{ meta.server_url }}/search" id="searchLink"
>Search</a
>
</li>
<li>
<a href="{{ meta.server_url }}/model" id="modelLink"
>Modelling</a
>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#"
>Browse Data<b class="caret"></b
></a>
<ul role="menu" class="dropdown-menu">
<li>
<a href="{{ meta.server_url }}/pathway" id="pathwayLink"
>Pathway</a
>
</li>
<li>
<a href="{{ meta.server_url }}/rule" id="ruleLink">Rule</a>
</li>
<li>
<a href="{{ meta.server_url }}/compound" id="compoundLink"
>Compound</a
>
</li>
<li>
<a href="{{ meta.server_url }}/reaction" id="reactionLink"
>Reaction</a
>
</li>
<li>
<a
href="{{ meta.server_url }}/model"
id="relative-reasoningLink"
>Model</a
>
</li>
<li>
<a href="{{ meta.server_url }}/scenario" id="scenarioLink"
>Scenario</a
>
</li>
{# <li><a href="{{ meta.server_url }}/setting" id="settingLink">Setting</a></li>#}
{# <li><a href="{{ meta.server_url }}/user" id="userLink">User</a></li>#}
{# <li><a href="{{ meta.server_url }}/group" id="groupLink">Group</a></li>#}
</ul>
</li>
</ul>
<ul
class="nav navbar-nav navbar-right navbar-nav-framework navbar-right-framework"
>
<li>
<a href="https://community.envipath.org/" id="communityLink"
>Community</a
>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#"
>Info <b class="caret"></b
></a>
<ul role="menu" class="dropdown-menu">
<!--<li><a href="{{ meta.server_url }}/funding" id="fundingLink">Funding</a></li>-->
<li>
<a
href="https://community.envipath.org/t/envipath-license/109"
id="licenceLink"
>Licences</a
>
</li>
<li class="divider"></li>
<li>
<a
target="_blank"
href="https://wiki.envipath.org/"
id="wikiLink"
>Documentation Wiki</a
>
</li>
<li>
<a
href="#"
id="citeButton"
data-toggle="modal"
data-target="#citemodal"
>How to cite enviPath</a
>
</li>
<li class="divider"></li>
<li><a>Version: {{ meta.version }}</a></li>
</ul>
</li>
{% if meta.user.username == 'anonymous' %}
<li>
<a
href="{% url 'login' %}"
id="loginButton"
style="margin-right:10px"
>Login</a
>
</li>
{% else %}
<li class="dropdown">
<a
data-toggle="dropdown"
id="loggedInButton"
class="dropdown-toggle"
id="logedInButton"
href="#"
>
<div id="username">
{{ user.username }}<b class="caret"></b>
</div>
</a>
<ul role="menu" class="dropdown-menu">
<li>
<a href="{{ meta.user.url }}" id="accountbutton"
>My Account</a
>
</li>
<li class="divider"></li>
<form
class="navbar-form navbar-left navbar-left-framework"
role="logout"
action="{% url 'logout' %}"
method="post"
>
{% csrf_token %}
<div class="form-group">
<input type="hidden" name="logout" value="true" />
</div>
<button type="submit" class="btn btn-default">
Logout
</button>
</form>
</ul>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
</div>
<!-- End legacy Bootstrap navbar -->
<div id="docContent" class="content container">
{% if breadcrumbs %}
<div id="bread">
<ol class="breadcrumb">
{% for elem in breadcrumbs %}
{% for name, url in elem.items %}
{% if forloop.parentloop.last %}
<li class="active">{{ name }}</li>
{% else %}
<li>
<a href="{{ url }}">{{ name }}</a>
</li>
{% endif %}
{% endfor %}
{% endfor %}
</ol>
</div>
{% endif %}
{% if message %}
<div id="message">{{ message }}</div>
{% endif %}
{% block content %}
{% endblock content %}
{% if meta.url_contains_package and meta.current_package.license %}
<p></p>
<div class="panel-group" id="license_accordion">
<div
class="panel panel-default list-group-item"
style="background-color:#f5f5f5"
>
<div class="panel-title">
<a
data-toggle="collapse"
data-parent="#licence_accordion"
href="#license"
>License</a
>
</div>
</div>
<div id="license" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
<a target="_blank" href="{{ meta.current_package.license.link }}">
<img src="{{ meta.current_package.license.image_link }}" />
</a>
</div>
</div>
</div>
{% endif %}
</div>
<!-- FOOTER - Legacy Bootstrap -->
<div class="legacy-bootstrap">
<div class="container text-center">
<hr />
<div class="row">
<div class="col-lg-12">
<ul class="nav nav-pills nav-justified">
<li>
<a href="http://ml.auckland.ac.nz" target="_blank">
<img
id="image-uoalogo"
height="60"
src="{% static "/images/UoA-Logo-Primary-RGB-Small.png" %}"
alt="The Univserity of Auckland"
/>
</a>
</li>
<li>
<a href="https://eawag.ch" target="_blank">
<img
id="image-ealogo"
height="60"
src="{% static "/images/ealogo.gif" %}"
alt="Eawag"
/>
</a>
</li>
<li>
<a href="https://www.uzh.ch/" target="_blank">
<img
id="image-ufzlogo"
height="60"
src="{% static "/images/uzh-logo.svg" %}"
alt="University of Zurich"
/>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="nav nav-pills nav-justified">
<!-- <li><a href="https://envipath.com/imprint/" target="_blank">Impressum/Imprint</a></li>-->
<li>
<a href="mailto:admin@envipath.org" target="_blank">Contact</a>
</li>
<!-- <li><a href="http://envipath.com" target="_blank"> enviPath UG (haftungsbeschr&auml;nkt) &amp; Co. KG &copy;-->
<!-- {{ YEAR }}</a></li>-->
</ul>
</div>
</div>
</div>
<!-- End legacy Bootstrap footer -->
<script>
$(function () {
// Hide actionsbutton if theres no action defined
if ($("#actionsButton ul").children().length > 0) {
$("#actionsButton").show();
}
});
</script>
{% block modals %}
{% include "modals/cite_modal.html" %}
{% include "modals/predict_modal.html" %}
{% include "modals/batch_predict_modal.html" %}
{% endblock %}
</body>
</html>