forked from enviPath/enviPy
Merge branch 'develop' into enhancement/licenses
This commit is contained in:
@ -1,6 +1,5 @@
|
||||
{% extends "framework.html" %}
|
||||
{% load static %}
|
||||
{% load envipytags %}
|
||||
{% block content %}
|
||||
|
||||
<div class="panel-group" id="reviewListAccordion">
|
||||
|
||||
@ -192,7 +192,7 @@
|
||||
<div class="panel-body list-group-item" id="ReviewedContent">
|
||||
{% if object_type == 'package' %}
|
||||
{% for obj in reviewed_objects %}
|
||||
<a class="list-group-item" href="{{ obj.url }}">{{ obj.name }}
|
||||
<a class="list-group-item" href="{{ obj.url }}">{{ obj.name|safe }}
|
||||
<span class="glyphicon glyphicon-star" aria-hidden="true"
|
||||
style="float:right" data-toggle="tooltip"
|
||||
data-placement="top" title="" data-original-title="Reviewed">
|
||||
@ -201,7 +201,7 @@
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% for obj in reviewed_objects|slice:":50" %}
|
||||
<a class="list-group-item" href="{{ obj.url }}">{{ obj.name }}{# <i>({{ obj.package.name }})</i> #}
|
||||
<a class="list-group-item" href="{{ obj.url }}">{{ obj.name|safe }}{# <i>({{ obj.package.name }})</i> #}
|
||||
<span class="glyphicon glyphicon-star" aria-hidden="true"
|
||||
style="float:right" data-toggle="tooltip"
|
||||
data-placement="top" title="" data-original-title="Reviewed">
|
||||
@ -221,11 +221,11 @@
|
||||
<div class="panel-body list-group-item" id="UnreviewedContent">
|
||||
{% if object_type == 'package' %}
|
||||
{% for obj in unreviewed_objects %}
|
||||
<a class="list-group-item" href="{{ obj.url }}">{{ obj.name }}</a>
|
||||
<a class="list-group-item" href="{{ obj.url }}">{{ obj.name|safe }}</a>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% for obj in unreviewed_objects|slice:":50" %}
|
||||
<a class="list-group-item" href="{{ obj.url }}">{{ obj.name }}</a>
|
||||
<a class="list-group-item" href="{{ obj.url }}">{{ obj.name|safe }}</a>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -236,9 +236,9 @@
|
||||
<ul class='list-group'>
|
||||
{% for obj in objects %}
|
||||
{% if object_type == 'user' %}
|
||||
<a class="list-group-item" href="{{ obj.url }}">{{ obj.username }}</a>
|
||||
<a class="list-group-item" href="{{ obj.url }}">{{ obj.username|safe }}</a>
|
||||
{% else %}
|
||||
<a class="list-group-item" href="{{ obj.url }}">{{ obj.name }}</a>
|
||||
<a class="list-group-item" href="{{ obj.url }}">{{ obj.name|safe }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
@ -1,15 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html data-theme="envipath">
|
||||
{% load static %}
|
||||
<head>
|
||||
<title>{{ title }}</title>
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%; /* ensure body fills viewport */
|
||||
overflow-x: hidden; /* prevent horizontal scroll */
|
||||
}
|
||||
</style>
|
||||
{# TODO use bundles from bootstrap 3.3.7 #}
|
||||
<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>
|
||||
@ -20,7 +22,16 @@
|
||||
<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 -->
|
||||
<meta name="csrf-token" content="{{ csrf_token }}">
|
||||
|
||||
{# 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;
|
||||
|
||||
@ -33,8 +44,7 @@
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{# Favicon #}
|
||||
<link rel="shortcut icon" type="image/png" href="{% static 'images/favicon.ico' %}"/>
|
||||
|
||||
<!-- {# C3 CSS #}-->
|
||||
<!-- <link id="css-c3" href="{% static 'css/c3.css' %}" rel="stylesheet" type="text/css"/>-->
|
||||
<!-- {# EP CSS #}-->
|
||||
@ -68,6 +78,8 @@
|
||||
|
||||
</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 -->
|
||||
@ -146,8 +158,7 @@
|
||||
</li>
|
||||
{% if meta.user.username == 'anonymous' %}
|
||||
<li>
|
||||
<a href="#signup" id="loginButton" data-toggle="modal" data-target="#signupmodal"
|
||||
style="margin-right:10px">Login</a>
|
||||
<a href="{% url 'login' %}" id="loginButton" style="margin-right:10px">Login</a>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="dropdown">
|
||||
@ -177,6 +188,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- End legacy Bootstrap navbar -->
|
||||
|
||||
<div id="docContent" class="content container">
|
||||
{% if breadcrumbs %}
|
||||
<div id="bread">
|
||||
@ -221,7 +235,8 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<!-- FOOTER - Legacy Bootstrap -->
|
||||
<div class="legacy-bootstrap">
|
||||
<div class="container text-center">
|
||||
<hr/>
|
||||
<div class="row">
|
||||
@ -258,6 +273,9 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End legacy Bootstrap footer -->
|
||||
|
||||
<script>
|
||||
$(function () {
|
||||
// Hide actionsbutton if theres no action defined
|
||||
@ -268,7 +286,6 @@
|
||||
</script>
|
||||
{% block modals %}
|
||||
{% include "modals/cite_modal.html" %}
|
||||
{% include "modals/signup_modal.html" %}
|
||||
{% include "modals/predict_modal.html" %}
|
||||
{% include "modals/batch_predict_modal.html" %}
|
||||
{% endblock %}
|
||||
|
||||
206
templates/framework_modern.html
Normal file
206
templates/framework_modern.html
Normal file
@ -0,0 +1,206 @@
|
||||
<!doctype html>
|
||||
<html data-theme="envipath" lang="en">
|
||||
{% load static %}
|
||||
<head>
|
||||
<title>{{ title }}</title>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="csrf-token" content="{{ csrf_token }}" />
|
||||
|
||||
{# Favicon #}
|
||||
<link
|
||||
rel="shortcut icon"
|
||||
type="image/png"
|
||||
href="{% static 'images/favicon.ico' %}"
|
||||
/>
|
||||
|
||||
{# Tailwind CSS + DaisyUI Output #}
|
||||
<link
|
||||
href="{% static 'css/output.css' %}"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
/>
|
||||
|
||||
{# jQuery - Keep for compatibility with existing JS #}
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
||||
|
||||
{# Font Awesome #}
|
||||
<link
|
||||
href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
{# Discourse embed for community #}
|
||||
<script src="https://community.envipath.org/javascripts/embed-topics.js"></script>
|
||||
|
||||
<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>
|
||||
|
||||
{# 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 || []);
|
||||
_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 class="min-h-screen bg-base-300">
|
||||
{% include "includes/navbar.html" %}
|
||||
|
||||
{# Main Content Area #}
|
||||
<main class="w-full">
|
||||
{% block main_content %}
|
||||
{# Breadcrumbs - outside main content, optional #}
|
||||
{% if breadcrumbs %}
|
||||
<div id="bread" class="max-w-7xl mx-auto px-4 py-4">
|
||||
<div class="text-sm breadcrumbs">
|
||||
<ul>
|
||||
{% for elem in breadcrumbs %}
|
||||
{% for name, url in elem.items %}
|
||||
{% if forloop.parentloop.last %}
|
||||
<li>{{ name }}</li>
|
||||
{% else %}
|
||||
<li><a href="{{ url }}">{{ name }}</a></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Main content container - paper effect on medium+ screens #}
|
||||
<div
|
||||
id="docContent"
|
||||
class="w-full xl:w-xl md:mx-auto md:my-8 bg-base-100 md:shadow-2xl md:rounded-lg border-2"
|
||||
>
|
||||
{# Messages - inside paper #}
|
||||
{% if message %}
|
||||
<div id="message" class="alert alert-info m-4">{{ message }}</div>
|
||||
{% endif %}
|
||||
|
||||
{# Page content - no enforced styles #}
|
||||
{% block content %}
|
||||
{% endblock content %}
|
||||
|
||||
{# License - inside paper if present #}
|
||||
{% if meta.url_contains_package and meta.current_package.license %}
|
||||
<div class="collapse collapse-arrow bg-base-200 m-8">
|
||||
<input type="checkbox" checked />
|
||||
<div class="collapse-title text-xl font-medium">License</div>
|
||||
<div class="collapse-content">
|
||||
<a
|
||||
target="_blank"
|
||||
href="{{ meta.current_package.license.link }}"
|
||||
>
|
||||
<img
|
||||
src="{{ meta.current_package.license.image_link }}"
|
||||
alt="License"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock main_content %}
|
||||
</main>
|
||||
|
||||
{% include "includes/footer.html" %}
|
||||
|
||||
{# Floating Help Tab #}
|
||||
{% if not public_mode %}
|
||||
<div class="fixed right-0 top-1/2 -translate-y-1/2 z-50">
|
||||
<a
|
||||
href="https://community.envipath.org/"
|
||||
target="_blank"
|
||||
class="flex items-center justify-center btn btn-secondary hover:btn-secondary-focus text-secondary-content text-sm shadow-lg transition-all duration-300 hover:scale-105 hover:-translate-x-1"
|
||||
title="Get Help from the Community"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="lucide lucide-message-circle-question-mark-icon lucide-message-circle-question-mark"
|
||||
>
|
||||
<path
|
||||
d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"
|
||||
/>
|
||||
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
|
||||
<path d="M12 17h.01" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% block modals %}
|
||||
{% include "modals/search_modal.html" %}
|
||||
{% endblock %}
|
||||
|
||||
<script>
|
||||
$(function () {
|
||||
// Hide actionsbutton if there's no action defined
|
||||
if ($("#actionsButton ul").children().length > 0) {
|
||||
$("#actionsButton").show();
|
||||
}
|
||||
});
|
||||
|
||||
// Global keyboard shortcut for search (Cmd+K on Mac, Ctrl+K on Windows/Linux)
|
||||
document.addEventListener("keydown", function (event) {
|
||||
// Check if user is typing in an input field
|
||||
const activeElement = document.activeElement;
|
||||
const isInputField =
|
||||
activeElement &&
|
||||
(activeElement.tagName === "INPUT" ||
|
||||
activeElement.tagName === "TEXTAREA" ||
|
||||
activeElement.contentEditable === "true");
|
||||
|
||||
if (isInputField) {
|
||||
return; // Don't trigger shortcut when typing in input fields
|
||||
}
|
||||
|
||||
// Check for Cmd+K (Mac) or Ctrl+K (Windows/Linux)
|
||||
const isMac = /Mac/.test(navigator.platform);
|
||||
const isCorrectModifier = isMac ? event.metaKey : event.ctrlKey;
|
||||
|
||||
if (isCorrectModifier && event.key === "k") {
|
||||
event.preventDefault();
|
||||
search_modal.showModal();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
69
templates/includes/footer.html
Normal file
69
templates/includes/footer.html
Normal file
@ -0,0 +1,69 @@
|
||||
{% load static %}
|
||||
<div class="lg:max-w-5xl mt-10 mx-auto bg-base-300 text-base-content">
|
||||
|
||||
<footer class="footer sm:footer-horizontal p-10">
|
||||
{% if not public_mode %}
|
||||
<nav>
|
||||
<h6 class="footer-title">Services</h6>
|
||||
<a class="link link-hover" href="/">Predict</a>
|
||||
<a class="link link-hover" href="/search">Search</a>
|
||||
<a class="link link-hover" href="/package">Browse</a>
|
||||
{% if user.is_authenticated %}
|
||||
<a class="link link-hover" href="/model">Your Collections</a>
|
||||
{% endif %}
|
||||
<a href="https://wiki.envipath.org/" target="_blank" class="link link-hover">Documentation</a>
|
||||
</nav>
|
||||
{% endif %}
|
||||
<nav>
|
||||
<h6 class="footer-title">Company</h6>
|
||||
<a class="link link-hover" href="/about">About us</a>
|
||||
<a class="link link-hover" href="/contact">Contact us</a>
|
||||
<a class="link link-hover" href="/careers">Careers</a>
|
||||
<a class="link link-hover" href="/legal">Legal</a>
|
||||
</nav>
|
||||
<nav>
|
||||
<h6 class="footer-title">Legal</h6>
|
||||
<a class="link link-hover" href="/terms">Terms of use</a>
|
||||
<a class="link link-hover" href="/privacy">Privacy policy</a>
|
||||
<a class="link link-hover" href="/cookie-policy">Cookie policy</a>
|
||||
<a class="link link-hover" href="/cite">Cite enviPath</a>
|
||||
</nav>
|
||||
</footer>
|
||||
<footer class="footer border-neutral-300 border-t-2 px-10 py-4">
|
||||
<div class="flex flex-row justify-between w-full items-start">
|
||||
<aside class="grid-flow-col items-center">
|
||||
<svg class="fill-neutral-content flex-shrink-0 h-14 m-2" viewbox="0 0 65 65" >
|
||||
<use
|
||||
href="{% static "/images/logo-square.svg" %}#ep-logo-square"
|
||||
>
|
||||
</use>
|
||||
</svg>
|
||||
|
||||
enviPath Ltd.
|
||||
<br />
|
||||
Biodegredation prediction since 2015.
|
||||
</p>
|
||||
</aside>
|
||||
<aside class="text-sm text-base-200 mt-2"><span class="text-xs tracking-tight">Version</span> <span class="text-base font-bold">{{ meta.version }}</span></aside>
|
||||
</div>
|
||||
<nav class="md:place-self-center md:justify-self-end">
|
||||
<div class="grid grid-flow-col gap-4">
|
||||
<a href="https://www.youtube.com/@envipath7231" target="_blank">
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 fill-current">
|
||||
<title>YouTube</title>
|
||||
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://community.envipath.org/" target="_blank">
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 fill-current">
|
||||
<title>Discourse</title>
|
||||
<path d="M12.103 0C18.666 0 24 5.485 24 11.997c0 6.51-5.33 11.99-11.9 11.99L0 24V11.79C0 5.28 5.532 0 12.103 0zm.116 4.563c-2.593-.003-4.996 1.352-6.337 3.57-1.33 2.208-1.387 4.957-.148 7.22L4.4 19.61l4.794-1.074c2.745 1.225 5.965.676 8.136-1.39 2.17-2.054 2.86-5.228 1.737-7.997-1.135-2.778-3.84-4.59-6.84-4.585h-.008z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/company/envipath/" target="_blank">
|
||||
<img src="{% static "/images/linkedin.png" %}" alt="LinkedIn" class="w-6 h-6">
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</footer>
|
||||
</div>
|
||||
147
templates/includes/navbar.html
Normal file
147
templates/includes/navbar.html
Normal file
@ -0,0 +1,147 @@
|
||||
{% load static %}
|
||||
{# Modern DaisyUI Navbar #}
|
||||
<div class="navbar bg-neutral-50 text-neutral-950 shadow-lg x-50">
|
||||
<div class="navbar-start">
|
||||
<a href="{{ meta.server_url }}" class="btn btn-ghost normal-case text-xl">
|
||||
<svg class="h-8 fill-base-content" viewBox="0 0 104 26" role="img">
|
||||
<use href="{% static "/images/logo-name.svg" %}#ep-logo-name" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% if not public_mode %}
|
||||
<div class="navbar-center hidden lg:flex">
|
||||
<a href="#" role="button" class="btn btn-ghost" id="predictLink"
|
||||
>Predict</a
|
||||
>
|
||||
<!-- <li><a href="{{ meta.server_url }}/package" id="packageLink">Package</a></li> -->
|
||||
<!--<li><a href="{{ meta.server_url }}/browse" id="browseLink">Browse</a></li>-->
|
||||
<div class="dropdown dropdown-center">
|
||||
<div tabindex="0" role="button" class="btn btn-ghost">Browse</div>
|
||||
<ul
|
||||
tabindex="-1"
|
||||
class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm"
|
||||
>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="navbar-end">
|
||||
{% if not public_mode %}
|
||||
<button
|
||||
type="button"
|
||||
onclick="search_modal.showModal()"
|
||||
class="btn btn-ghost"
|
||||
>
|
||||
<div
|
||||
class="flex items-center badge badge-dash space-x-1 bg-base-200 text-base-content/50 p-2 m-1"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="lucide lucide-search-icon lucide-search"
|
||||
>
|
||||
<path d="m21 21-4.34-4.34" />
|
||||
<circle cx="11" cy="11" r="8" />
|
||||
</svg>
|
||||
<span id="search-shortcut">⌘K</span>
|
||||
</div>
|
||||
</button>
|
||||
{% endif %}
|
||||
{% if meta.user.username == 'anonymous' or public_mode %}
|
||||
<a href="{% url 'login' %}" id="loginButton" class="p-2">Login</a>
|
||||
{% else %}
|
||||
<div class="dropdown dropdown-end">
|
||||
<div
|
||||
tabindex="0"
|
||||
role="button"
|
||||
class="btn btn-ghost m-1 btn-circle"
|
||||
id="loggedInButton"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="lucide lucide-circle-user-icon lucide-circle-user"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<circle cx="12" cy="10" r="3" />
|
||||
<path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662" />
|
||||
</svg>
|
||||
</div>
|
||||
<ul
|
||||
tabindex="-1"
|
||||
class="dropdown-content menu bg-base-100 rounded-box z-50 w-52 p-2 shadow-sm"
|
||||
>
|
||||
<li><a href="{{ meta.user.url }}" id="accountbutton">Settings</a></li>
|
||||
<li>
|
||||
<form
|
||||
id="logoutForm"
|
||||
action="{% url 'logout' %}"
|
||||
method="post"
|
||||
style="display: none;"
|
||||
>
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="logout" value="true" />
|
||||
</form>
|
||||
<a
|
||||
href="#"
|
||||
id="logoutButton"
|
||||
onclick="event.preventDefault(); document.getElementById('logoutForm').submit();"
|
||||
>Logout</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// OS-aware search shortcut display
|
||||
(function () {
|
||||
const isMac = /Mac/.test(navigator.platform);
|
||||
const shortcutElement = document.getElementById("search-shortcut");
|
||||
if (shortcutElement) {
|
||||
shortcutElement.textContent = isMac ? "⌘K" : "Ctrl+K";
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
@ -1,186 +1,360 @@
|
||||
{% extends "framework.html" %}
|
||||
{% extends "framework_modern.html" %}
|
||||
{% load static %}
|
||||
{% block content %}
|
||||
<!-- TODO rename ids as well as remove pathways if modal is closed!-->
|
||||
<div class="modal fade" tabindex="-1" id="foundMatching" role="dialog" aria-labelledby="foundModal"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">
|
||||
<span aria-hidden="true">×</span>
|
||||
<span class="sr-only">Close</span>
|
||||
</button>
|
||||
<h4 class="modal-title" id="newPackMod">Found Pathway in Database</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>We found at least one pathway in the database with the given root
|
||||
compound. Do you want to open any of the existing pathways or
|
||||
predict a new one? To open an existing pathway, simply click
|
||||
on the pathway, to predict a new one, click Predict. The predicted
|
||||
pathway might differ from the ones in the database due to the
|
||||
settings used in the prediction.</p>
|
||||
<div id="foundPathways"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a id="modal-predict" class="btn btn-primary" href="#">Predict</a>
|
||||
<button type="button" id="cancel-predict" class="btn btn-default" data-dismiss="modal">Cancel
|
||||
</button>
|
||||
{% block main_content %}
|
||||
|
||||
<!-- Hero Section with Logo and Search -->
|
||||
<section class="hero h-fit max-w-5xl w-full shadow-none mx-auto relative">
|
||||
|
||||
<div class="hero min-h-[calc(100vh*0.4)] bg-gradient-to-br from-primary-800 to-primary-600"
|
||||
style="background-image: url('{% static "/images/hero.png" %}'); background-size: cover; background-position: center;"
|
||||
>
|
||||
<div class="hero-overlay"></div>
|
||||
<!-- Predict Pathway text over the image -->
|
||||
<div class="absolute bottom-40 left-1/8 -translate-x-8 z-10">
|
||||
<h2 class="text-3xl text-base-100 text-shadow-lg text-left">Predict Your Pathway</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="shadow-md max-w-5xl mx-auto bg-base-200">
|
||||
|
||||
<!-- Predict Pathway Section -->
|
||||
<div class="flex-col lg:flex-row-reverse w-full mx-auto -mt-32 relative z-20 mb-10 ">
|
||||
<div class="card bg-base-100 shrink-0 shadow-xl w-3/4 mx-auto transition-all duration-300 ease-in-out">
|
||||
<div class="card-body">
|
||||
<!-- Input Mode Toggle - Fixed position outside fieldset -->
|
||||
<div class="flex flex-row justify-start items-center h-fit ml-8 my-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- <span class="text-sm text-neutral-500">Input Mode:</span> -->
|
||||
<label class="toggle text-base-content toggle-md">
|
||||
<input type="checkbox" />
|
||||
<svg aria-label="smiles mode" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="size-5">
|
||||
<g
|
||||
stroke-linejoin="round"
|
||||
stroke-linecap="round"
|
||||
stroke-width="2"
|
||||
fill="currentColor"
|
||||
stroke="none"
|
||||
>
|
||||
<path fill-rule="evenodd" d="M8 2.75A.75.75 0 0 1 8.75 2h7.5a.75.75 0 0 1 0 1.5h-3.215l-4.483 13h2.698a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1 0-1.5h3.215l4.483-13H8.75A.75.75 0 0 1 8 2.75Z" clip-rule="evenodd" />
|
||||
</g>
|
||||
</svg>
|
||||
<svg
|
||||
aria-label="draw mode"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
stroke="none"
|
||||
class="size-5"
|
||||
>
|
||||
<path d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z" />
|
||||
|
||||
</svg>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<fieldset class="fieldset transition-all duration-300 ease-in-out overflow-hidden">
|
||||
<form id="index-form" action="{{ meta.current_package.url }}/pathway" method="POST">
|
||||
{% csrf_token %}
|
||||
<div id="text-input-container" class="transition-all duration-300 ease-in-out opacity-100 transform scale-100">
|
||||
<div class="join w-full mx-auto">
|
||||
<input type="text" id="index-form-text-input" placeholder="canonical SMILES string" class="input grow input-md join-item" />
|
||||
<button class="btn btn-neutral join-item">Predict!</button>
|
||||
</div>
|
||||
<div class="label relative w-full mt-1" >
|
||||
<div class="flex gap-2">
|
||||
<a href="#" class="example-link cursor-pointer hover:text-primary"
|
||||
data-smiles="CN1C=NC2=C1C(=O)N(C(=O)N2C)C"
|
||||
title="load example">Caffeine</a>
|
||||
<a href="#" class="example-link cursor-pointer hover:text-primary"
|
||||
data-smiles="CC(C)CC1=CC=C(C=C1)C(C)C(=O)O"
|
||||
title="load example">Ibuprofen</a>
|
||||
</div>
|
||||
<a class="absolute top-0 left-[calc(100%-5.4rem)]" href="#">Advanced</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="ketcher-container" class="hidden w-full transition-all duration-300 ease-in-out opacity-0 transform scale-95">
|
||||
<iframe id="index-ketcher" src="{% static '/js/ketcher2/ketcher.html' %}"
|
||||
width="100%" height="400" class="rounded-lg"></iframe>
|
||||
<button class="btn btn-lg bg-primary-950 text-primary-50 join-item w-full mt-2">Predict!</button>
|
||||
<a class="label mx-auto w-full mt-1" href="#">Advanced</a>
|
||||
</div>
|
||||
<input type="hidden" id="index-form-smiles" name="smiles" value="smiles">
|
||||
<input type="hidden" id="index-form-predict" name="predict" value="predict">
|
||||
<input type="hidden" id="current-action" value="predict">
|
||||
</form>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<div class="jumbotron">
|
||||
<h1>
|
||||
<img id="image-logo-long" class="img-responsive" alt="enviPath" width="1000ex"
|
||||
src='{% static "/images/logo-long.svg" %}'/>
|
||||
</h1>
|
||||
<p>enviPath is a database and prediction system for the microbial
|
||||
biotransformation of organic environmental contaminants. The
|
||||
database provides the possibility to store and view experimentally
|
||||
observed biotransformation pathways. The pathway prediction system
|
||||
provides different relative reasoning models to predict likely biotransformation
|
||||
pathways and products. You can try it out below.
|
||||
</p>
|
||||
<p>
|
||||
<a class="btn" style="background-color:#222222;color:#9d9d9d" role="button" target="_blank"
|
||||
href="https://wiki.envipath.org/index.php/Main_Page">Learn more >></a>
|
||||
</p>
|
||||
|
||||
|
||||
<!-- Community News Section -->
|
||||
<section class="py-16 bg-base-200 z-10 mx-8">
|
||||
<div class="max-w-7xl mx-auto px-4">
|
||||
<h2 class="h2 font-bold text-left mb-8">Community Updates</h2>
|
||||
|
||||
<div id="community-news-container" class="flex gap-4 justify-center">
|
||||
<!-- News cards will be populated here -->
|
||||
<div id="loading" class="flex justify-center w-full">
|
||||
<span class="loading loading-spinner loading-lg"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-right mt-6">
|
||||
<a href="https://community.envipath.org/c/announcements/10" target="_blank" class="btn btn-ghost btn-sm">
|
||||
Read More Announcements
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Discourse API integration -->
|
||||
<script src="{% static 'js/discourse-api.js' %}"></script>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mission Statement Section -->
|
||||
<section class="py-16 from-base-200 to-base-100 bg-gradient-to-b">
|
||||
<div class="mx-auto px-8 md:px-12">
|
||||
<div class="flex flex-row gap-4">
|
||||
<div class="w-1/3">
|
||||
<img src="{% static "/images/ep-rule-artwork.png" %}" alt="rule-based iterative tree greneration" class="w-full h-full object-contain" />
|
||||
</div>
|
||||
<div class="space-y-4 text-left w-2/3 mr-8">
|
||||
<h2 class="h2 font-bold mb-8">About enviPath</h2>
|
||||
<p class="">
|
||||
enviPath is a database and prediction system for the microbial
|
||||
biotransformation of organic environmental contaminants. The
|
||||
database provides the possibility to store and view experimentally
|
||||
observed biotransformation pathways.
|
||||
</p>
|
||||
<p class="">
|
||||
The pathway prediction system provides different relative reasoning models
|
||||
to predict likely biotransformation pathways and products. Explore our tools
|
||||
and contribute to advancing environmental biotransformation research.
|
||||
</p>
|
||||
<div class="flex flex-row gap-4 float-right">
|
||||
<a href="/about" class="btn btn-ghost-neutral">Read More</a>
|
||||
<a href="/about" class="btn btn-neutral">Publications</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="loading"></div>
|
||||
<div class="col-xs-4">
|
||||
<d-topics-list discourse-url="https://community.envipath.org" per-page="10" category="10"
|
||||
template="complete"></d-topics-list>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<form id="index-form" action="{{ meta.current_package.url }}/pathway" method="POST">
|
||||
{% csrf_token %}
|
||||
<div class="input-group" id="index-form-bar">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li>
|
||||
<iframe id="index-form-ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%"
|
||||
height="510"></iframe>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<input type="text" class="form-control" id='index-form-text-input'
|
||||
placeholder="Enter a SMILES to predict a Pathway or type something to search">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false" id="action-button">Predict <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a id="dropdown-predict">Predict</a></li>
|
||||
<li><a id="dropdown-search">Search</a></li>
|
||||
</ul>
|
||||
<button class="btn" style="background-color:#222222;color:#9d9d9d" type="button" id="run-button">Go!
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Partners Section -->
|
||||
<section class="py-14 sm:py-12 bg-base-100">
|
||||
<div class="mx-auto px-6 lg:px-8">
|
||||
<div class="divider"><h2 class="text-center text-lg/8 font-semibold">Backed by Science</h2></div>
|
||||
<div class="mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-3">
|
||||
<img src="{% static "/images/uoa-logo-small.png" %}" alt="The University of Auckland" class=" max-h-20 w-full object-contain lg:col-span-1" />
|
||||
<img src="{% static "/images/logo-eawag.svg" %}" alt="Eawag" class=" max-h-12 w-full object-contain lg:col-span-1" />
|
||||
<img src="{% static "/images/uzh-logo.svg" %}" alt="University of Zurich" class="2 max-h-16 w-full object-contain lg:col-span-1" />
|
||||
</div>
|
||||
<input type="hidden" id="index-form-smiles" name="smiles" value="smiles">
|
||||
<input type="hidden" id="index-form-predict" name="predict" value="predict">
|
||||
</form>
|
||||
</div>
|
||||
<p></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script language="javascript">
|
||||
var currentPackage = "{{ meta.current_package.url }}";
|
||||
|
||||
function goButtonClicked() {
|
||||
$(this).prop("disabled", true);
|
||||
// Discourse API integration is now handled by discourse-api.js
|
||||
|
||||
var action = $('#action-button').text().trim();
|
||||
// Function to render Discourse topics into cards
|
||||
function renderDiscourseTopics(topics) {
|
||||
const container = document.getElementById('community-news-container');
|
||||
if (!container) return;
|
||||
|
||||
var textSmiles = $('#index-form-text-input').val().trim();
|
||||
// Clear container
|
||||
container.innerHTML = '';
|
||||
|
||||
if (textSmiles === '') {
|
||||
$(this).prop("disabled", false);
|
||||
return;
|
||||
}
|
||||
// Create cards for each topic
|
||||
topics.forEach(topic => {
|
||||
const card = createDiscourseCard(topic);
|
||||
container.insertAdjacentHTML('beforeend', card);
|
||||
});
|
||||
}
|
||||
|
||||
var ketcherSmiles = getKetcher('index-form-ketcher').getSmiles().trim();
|
||||
// Function to create HTML card for a topic
|
||||
function createDiscourseCard(topic) {
|
||||
const date = new Date(topic.created_at).toLocaleDateString();
|
||||
|
||||
if (action !== 'Search' && ketcherSmiles !== '' && textSmiles !== ketcherSmiles) {
|
||||
console.log("Ketcher and TextInput differ!");
|
||||
}
|
||||
return `
|
||||
<div class="card bg-white shadow-xs hover:shadow-lg transition-shadow duration-300 h-64 w-75 flex-shrink-0">
|
||||
<div class="card-body flex flex-col h-full">
|
||||
<h3 class="card-title leading-tight font-normal tracking-tight h-12 mb-2 line-clamp-2 text-ellipsis wrap-break-word overflow-hidden">
|
||||
<a href="${topic.url}" target="_blank" class="hover:text-primary">
|
||||
${topic.title}
|
||||
</a>
|
||||
</h3>
|
||||
<div class="text-sm line-clamp-4 break-words" >
|
||||
${topic.excerpt}
|
||||
</div>
|
||||
|
||||
if (action === 'Search') {
|
||||
var par = {};
|
||||
par['search'] = textSmiles;
|
||||
par['mode'] = 'text';
|
||||
var queryString = $.param(par, true);
|
||||
window.location.href = "/search?" + queryString;
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="avatar tooltip tooltip-right" data-tip="${topic.author}">
|
||||
<div class="w-8 rounded-full">
|
||||
<img src="${topic.author_avatar}" alt="${topic.author}" />
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs text-gray-500">${date}</span>
|
||||
</div>
|
||||
<a href="${topic.url}" target="_blank" class="btn btn-ghost text-neutral-500 rounded-full p-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 7v14"/>
|
||||
<path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Make render function globally available
|
||||
window.renderDiscourseTopics = renderDiscourseTopics;
|
||||
|
||||
// Toggle functionality with smooth animations
|
||||
function toggleInputMode() {
|
||||
const toggle = $('input[type="checkbox"]');
|
||||
const textContainer = $('#text-input-container');
|
||||
const ketcherContainer = $('#ketcher-container');
|
||||
const formCard = $('.card');
|
||||
const fieldset = $('.fieldset');
|
||||
|
||||
if (toggle.is(':checked')) {
|
||||
// Draw mode - show Ketcher, hide text input
|
||||
textContainer.addClass('opacity-0 transform scale-95');
|
||||
textContainer.removeClass('opacity-100 transform scale-100');
|
||||
|
||||
// Adjust fieldset padding for Ketcher mode - reduce padding and make more compact
|
||||
fieldset.removeClass('p-8');
|
||||
fieldset.addClass('p-4');
|
||||
|
||||
// Wait for fade out to complete, then hide and show new content
|
||||
setTimeout(() => {
|
||||
textContainer.addClass('hidden');
|
||||
ketcherContainer.removeClass('hidden opacity-0 transform scale-95');
|
||||
ketcherContainer.addClass('opacity-100 transform scale-100');
|
||||
|
||||
// Force re-evaluation of iframe size
|
||||
const iframe = document.getElementById('index-ketcher');
|
||||
if (iframe) {
|
||||
iframe.style.height = '400px';
|
||||
}
|
||||
}, 300);
|
||||
} else {
|
||||
$('#index-form-smiles').val(textSmiles);
|
||||
$('#index-form').submit();
|
||||
// SMILES mode - show text input, hide Ketcher
|
||||
ketcherContainer.addClass('opacity-0 transform scale-95');
|
||||
ketcherContainer.removeClass('opacity-100 transform scale-100');
|
||||
|
||||
// Restore fieldset padding for text input mode
|
||||
fieldset.removeClass('p-4');
|
||||
fieldset.addClass('p-8');
|
||||
|
||||
// Wait for fade out to complete, then hide and show new content
|
||||
setTimeout(() => {
|
||||
ketcherContainer.addClass('hidden');
|
||||
textContainer.removeClass('hidden opacity-0 transform scale-95');
|
||||
textContainer.addClass('opacity-100 transform scale-100');
|
||||
}, 300);
|
||||
|
||||
// Transfer SMILES from Ketcher to text input if available
|
||||
if (window.indexKetcher && window.indexKetcher.getSmiles) {
|
||||
const smiles = window.indexKetcher.getSmiles();
|
||||
if (smiles && smiles.trim() !== '') {
|
||||
$('#index-form-text-input').val(smiles);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function actionDropdownClicked() {
|
||||
var suffix = ' <span class="caret"></span>';
|
||||
var dropdownVal = $(this).text();
|
||||
|
||||
if (dropdownVal === 'Search') {
|
||||
$("#index-form").attr("action", '/search');
|
||||
$("#index-form").attr("method", 'GET');
|
||||
} else {
|
||||
$("#index-form").attr("action", currentPackage + "/pathway");
|
||||
}
|
||||
|
||||
$('#action-button').html(dropdownVal + suffix);
|
||||
}
|
||||
|
||||
function ketcherToTextInput() {
|
||||
$('#index-form-text-input').val(this.ketcher.getSmiles());
|
||||
// Ketcher integration
|
||||
function indexKetcherToTextInput() {
|
||||
$('#index-form-smiles').val(this.ketcher.getSmiles());
|
||||
}
|
||||
|
||||
$(function () {
|
||||
// Initialize fieldset with proper padding
|
||||
$('.fieldset').addClass('p-8');
|
||||
|
||||
$('#index-form').on("keydown", function (e) {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
goButtonClicked();
|
||||
}
|
||||
});
|
||||
// Toggle event listener
|
||||
$('input[type="checkbox"]').on('change', toggleInputMode);
|
||||
|
||||
// Code that should be executed once DOM is ready goes here
|
||||
$('#dropdown-predict').on('click', actionDropdownClicked);
|
||||
$('#dropdown-search').on('click', actionDropdownClicked);
|
||||
|
||||
$('#run-button').on('click', goButtonClicked);
|
||||
|
||||
// Update Ketcher Width
|
||||
var fullWidth = $('#index-form-bar').width();
|
||||
$('#index-form-ketcher').width(fullWidth);
|
||||
|
||||
// add a listener that gets triggered whenever the structure in ketcher has changed
|
||||
$('#index-form-ketcher').on('load', function () {
|
||||
// Ketcher iframe load handler
|
||||
$('#index-ketcher').on('load', function() {
|
||||
const checkKetcherReady = () => {
|
||||
win = this.contentWindow
|
||||
const win = this.contentWindow;
|
||||
if (win.ketcher && 'editor' in win.ketcher) {
|
||||
window.indexKetcher = win.ketcher;
|
||||
win.ketcher.editor.event.change.handlers.push({
|
||||
once: false,
|
||||
priority: 0,
|
||||
f: ketcherToTextInput,
|
||||
f: indexKetcherToTextInput,
|
||||
ketcher: win.ketcher
|
||||
});
|
||||
} else {
|
||||
setTimeout(checkKetcherReady, 100);
|
||||
}
|
||||
};
|
||||
|
||||
checkKetcherReady();
|
||||
});
|
||||
|
||||
// Handle example link clicks
|
||||
$('.example-link').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
const smiles = $(this).data('smiles');
|
||||
const title = $(this).attr('title');
|
||||
|
||||
// Check if we're in Ketcher mode or text input mode
|
||||
if ($('input[type="checkbox"]').is(':checked')) {
|
||||
// In Ketcher mode - set the SMILES in Ketcher
|
||||
if (window.indexKetcher && window.indexKetcher.setMolecule) {
|
||||
window.indexKetcher.setMolecule(smiles);
|
||||
}
|
||||
} else {
|
||||
// In text input mode - set the SMILES in the text input
|
||||
$('#index-form-text-input').val(smiles);
|
||||
}
|
||||
|
||||
// Show a brief feedback
|
||||
const originalText = $(this).text();
|
||||
$(this).text(`loaded!`);
|
||||
setTimeout(() => {
|
||||
$(this).text(originalText);
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
// Handle form submission on Enter
|
||||
$('#index-form').on("submit", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
var textSmiles = '';
|
||||
|
||||
// Check if we're in Ketcher mode and extract SMILES
|
||||
if ($('input[type="checkbox"]').is(':checked') && window.indexKetcher) {
|
||||
textSmiles = window.indexKetcher.getSmiles().trim();
|
||||
} else {
|
||||
textSmiles = $('#index-form-text-input').val().trim();
|
||||
}
|
||||
|
||||
if (textSmiles === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
$('#index-form-smiles').val(textSmiles);
|
||||
$("#index-form").attr("action", currentPackage + "/pathway");
|
||||
$("#index-form").attr("method", 'POST');
|
||||
this.submit();
|
||||
});
|
||||
|
||||
// Discourse topics are now loaded automatically by discourse-api.js
|
||||
});
|
||||
</script>
|
||||
{% endblock content %}
|
||||
{% endblock main_content %}
|
||||
|
||||
@ -26,12 +26,12 @@
|
||||
{% endif %}
|
||||
<h4 class="panel-title">
|
||||
<a id="{{ obj.id }}-link" data-toggle="collapse" data-parent="#migration-detail"
|
||||
href="#{{ obj.id }}">{{ obj.name }}</a>
|
||||
href="#{{ obj.id }}">{{ obj.name|safe }}</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="{{ obj.id }}" class="panel-collapse collapse {% if not obj.status %}in{% endif %}">
|
||||
<div class="panel-body list-group-item">
|
||||
<a class="list-group-item" href="{{ obj.detail_url }}">{{ obj.name }} Migration Detail Page</a>
|
||||
<a class="list-group-item" href="{{ obj.detail_url }}">{{ obj.name|safe }} Migration Detail Page</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
{% endif %}
|
||||
<h4 class="panel-title">
|
||||
<a id="{{ obj.id }}-link" data-toggle="collapse" data-parent="#migration-detail"
|
||||
href="#{{ obj.id }}">{{ obj.name }}</a>
|
||||
href="#{{ obj.id }}">{{ obj.name|safe }}</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="{{ obj.id }}" class="panel-collapse collapse {% if not obj.status %}in{% endif %}">
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
<div class="modal fade" tabindex="-1" id="new_model_modal" role="dialog" aria-labelledby="new_model_modal"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
@ -47,14 +48,14 @@
|
||||
<option disabled>Reviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<option disabled>Unreviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if not obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
@ -68,14 +69,14 @@
|
||||
<option disabled>Reviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<option disabled>Unreviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if not obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<div class="modal fade" tabindex="-1" id="new_pathway_modal" role="dialog" aria-labelledby="new_pathway_modal"
|
||||
aria-hidden="true" style="overflow-y: auto;">
|
||||
@ -111,7 +112,7 @@
|
||||
|
||||
<select id="settingSelect" name="settingSelect" class="form-control">
|
||||
{% for setting in available_settings %}
|
||||
<option value="{{ setting.id }}">{{ setting.name }}</option>
|
||||
<option value="{{ setting.id }}">{{ setting.name|safe }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<p></p>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
|
||||
<div id="new_prediction_setting_modal" class="modal" tabindex="-1">
|
||||
@ -40,14 +41,14 @@
|
||||
<option disabled>Reviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<option disabled>Unreviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if not obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
@ -57,7 +58,7 @@
|
||||
<select id="model-based-prediction-setting-model" name="model-based-prediction-setting-model" class="form-control" data-width='100%'>
|
||||
<option disabled selected>Select the model</option>
|
||||
{% for m in models %}
|
||||
<option value="{{ m.url }}">{{ m.name }}</option>
|
||||
<option value="{{ m.url }}">{{ m.name|safe }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<label for="model-based-prediction-setting-threshold">Threshold</label>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<div class="modal fade bs-modal-lg" id="add_pathway_edge_modal" tabindex="-1" aria-labelledby="add_pathway_edge_modal"
|
||||
aria-modal="true"
|
||||
@ -36,7 +37,7 @@
|
||||
<select id="add_pathway_edge_substrates" name="edge-substrates"
|
||||
data-actions-box='true' class="form-control" multiple data-width='100%'>
|
||||
{% for n in pathway.nodes %}
|
||||
<option data-smiles="{{ n.default_node_label.smiles }}" value="{{ n.url }}">{{ n.default_node_label.name }}</option>
|
||||
<option data-smiles="{{ n.default_node_label.smiles }}" value="{{ n.url }}">{{ n.default_node_label.name|safe }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
@ -47,7 +48,7 @@
|
||||
<select id="add_pathway_edge_products" name="edge-products"
|
||||
data-actions-box='true' class="form-control" multiple data-width='100%'>
|
||||
{% for n in pathway.nodes %}
|
||||
<option data-smiles="{{ n.default_node_label.smiles }}" value="{{ n.url }}">{{ n.default_node_label.name }}</option>
|
||||
<option data-smiles="{{ n.default_node_label.smiles }}" value="{{ n.url }}">{{ n.default_node_label.name|safe }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<!-- Delete Edge -->
|
||||
<div id="delete_pathway_edge_modal" class="modal" tabindex="-1">
|
||||
@ -19,7 +20,7 @@
|
||||
data-actions-box='true' class="form-control" data-width='100%'>
|
||||
<option value="" disabled selected>Select Reaction to delete</option>
|
||||
{% for e in pathway.edges %}
|
||||
<option value="{{ e.url }}">{{ e.edge_label.name }}</option>
|
||||
<option value="{{ e.url }}">{{ e.edge_label.name|safe }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<input type="hidden" id="hidden" name="hidden" value="delete"/>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
{% load static %}
|
||||
|
||||
<!-- Delete Node -->
|
||||
<div id="delete_pathway_node_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
@ -19,7 +20,7 @@
|
||||
data-actions-box='true' class="form-control" data-width='100%'>
|
||||
<option value="" disabled selected>Select Compound to delete</option>
|
||||
{% for n in pathway.nodes %}
|
||||
<option value="{{ n.url }}">{{ n.default_node_label.name }}</option>
|
||||
<option value="{{ n.url }}">{{ n.default_node_label.name|safe }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<input type="hidden" id="hidden" name="hidden" value="delete"/>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<!-- Edit Compound -->
|
||||
<div id="edit_compound_modal" class="modal" tabindex="-1">
|
||||
@ -15,12 +16,12 @@
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="compound-name">Name</label>
|
||||
<input id="compound-name" class="form-control" name="compound-name" value="{{ compound.name}}">
|
||||
<input id="compound-name" class="form-control" name="compound-name" value="{{ compound.name|safe}}">
|
||||
</p>
|
||||
<p>
|
||||
<label for="compound-description">Description</label>
|
||||
<input id="compound-description" type="text" class="form-control"
|
||||
value="{{ compound.description }}"
|
||||
value="{{ compound.description|safe }}"
|
||||
name="compound-description">
|
||||
</p>
|
||||
</form>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<!-- Edit Compound -->
|
||||
<div id="edit_compound_structure_modal" class="modal" tabindex="-1">
|
||||
@ -15,12 +16,12 @@
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="compound-structure-name">Name</label>
|
||||
<input id="compound-structure-name" class="form-control" name="compound-structure-name" value="{{ compound_structure.name }}">
|
||||
<input id="compound-structure-name" class="form-control" name="compound-structure-name" value="{{ compound_structure.name|safe }}">
|
||||
</p>
|
||||
<p>
|
||||
<label for="compound-structure-description">Description</label>
|
||||
<input id="compound-structure-description" type="text" class="form-control"
|
||||
value="{{ compound_structure.description }}" name="compound-structure-description">
|
||||
value="{{ compound_structure.description|safe }}" name="compound-structure-description">
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<!-- Edit Package Permission -->
|
||||
<div id="edit_group_member_modal" class="modal" tabindex="-1">
|
||||
@ -39,7 +40,7 @@
|
||||
{% endfor %}
|
||||
<option disabled>Groups</option>
|
||||
{% for g in groups %}
|
||||
<option value="{{ g.url }}">{{ g.name }}</option>
|
||||
<option value="{{ g.url }}">{{ g.name|safe }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<input type="hidden" name="action" value="add">
|
||||
@ -81,7 +82,7 @@
|
||||
accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<div class="col-xs-8">
|
||||
{{ g.name }}
|
||||
{{ g.name|safe }}
|
||||
<input type="hidden" name="member" value="{{ g.url }}"/>
|
||||
<input type="hidden" name="action" value="remove">
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<!-- Edit Model -->
|
||||
<div id="edit_model_modal" class="modal" tabindex="-1">
|
||||
@ -16,12 +17,12 @@
|
||||
<p>
|
||||
<label for="model-name">Name</label>
|
||||
<input id="model-name" type="text" class="form-control" name="model-name"
|
||||
value="{{ model.name }}">
|
||||
value="{{ model.name|safe }}">
|
||||
</p>
|
||||
<p>
|
||||
<label for="model-description">Description</label>
|
||||
<input id="model-description" type="text" class="form-control" name="model-description"
|
||||
value="{{ model.description }}">
|
||||
value="{{ model.description|safe }}">
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<!-- Edit Node -->
|
||||
<div id="edit_node_modal" class="modal" tabindex="-1">
|
||||
@ -15,12 +16,12 @@
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="node-name">Name</label>
|
||||
<input id="node-name" class="form-control" name="node-name" value="{{ node.name}}">
|
||||
<input id="node-name" class="form-control" name="node-name" value="{{ node.name|safe}}">
|
||||
</p>
|
||||
<p>
|
||||
<label for="node-description">Description</label>
|
||||
<input id="node-description" type="text" class="form-control"
|
||||
value="{{ node.description }}"
|
||||
value="{{ node.description|safe }}"
|
||||
name="node-description">
|
||||
</p>
|
||||
</form>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<!-- Edit Package -->
|
||||
<div id="edit_package_modal" class="modal" tabindex="-1">
|
||||
@ -15,12 +16,12 @@
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="package-name">Name</label>
|
||||
<input id="package-name" class="form-control" name="package-name" value="{{ package.name}}">
|
||||
<input id="package-name" class="form-control" name="package-name" value="{{ package.name|safe}}">
|
||||
</p>
|
||||
<p>
|
||||
<label for="package-description">Description</label>
|
||||
<input id="package-description" type="text" class="form-control"
|
||||
value="{{ package.description }}"
|
||||
value="{{ package.description|safe }}"
|
||||
name="package-description">
|
||||
</p>
|
||||
</form>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<!-- Edit Package Permission -->
|
||||
<div id="edit_package_permissions_modal" class="modal" tabindex="-1">
|
||||
@ -46,7 +47,7 @@
|
||||
{% endfor %}
|
||||
<option disabled>Groups</option>
|
||||
{% for g in groups %}
|
||||
<option value="{{ g.url }}">{{ g.name }}</option>
|
||||
<option value="{{ g.url }}">{{ g.name|safe }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
@ -100,7 +101,7 @@
|
||||
accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<div class="col-xs-4">
|
||||
{{ gp.group.name }}
|
||||
{{ gp.group.name|safe }}
|
||||
<input type="hidden" name="grantee" value="{{ gp.group.url }}"/>
|
||||
</div>
|
||||
<div class="col-xs-2">
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<!-- Edit Pathway -->
|
||||
<div id="edit_pathway_modal" class="modal" tabindex="-1">
|
||||
@ -15,12 +16,12 @@
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="pathway-name">Name</label>
|
||||
<input id="pathway-name" class="form-control" name="pathway-name" value="{{ pathway.name }}">
|
||||
<input id="pathway-name" class="form-control" name="pathway-name" value="{{ pathway.name|safe }}">
|
||||
</p>
|
||||
<p>
|
||||
<label for="pathway-description">Description</label>
|
||||
<textarea id="pathway-description" type="text" class="form-control" name="pathway-description"
|
||||
rows="10">{{ pathway.description }}</textarea>
|
||||
rows="10">{{ pathway.description|safe }}</textarea>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
<td colspan="2">
|
||||
<select id="model" name="model" class="form-control" data-width='100%'>
|
||||
{% for m in models %}
|
||||
<option value="{{ m.id }}" {% if user.prediction_settings.model.url == m.url %}selected{% endif %}>{{ m.name }}</option>
|
||||
<option value="{{ m.id }}" {% if user.prediction_settings.model.url == m.url %}selected{% endif %}>{{ m.name|safe }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</td>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<!-- Edit Reaction -->
|
||||
<div id="edit_reaction_modal" class="modal" tabindex="-1">
|
||||
@ -14,12 +15,12 @@
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="reaction-name">Name</label>
|
||||
<input id="reaction-name" class="form-control" name="reaction-name" value="{{ reaction.name }}">
|
||||
<input id="reaction-name" class="form-control" name="reaction-name" value="{{ reaction.name|safe }}">
|
||||
</p>
|
||||
<p>
|
||||
<label for="reaction-description">Description</label>
|
||||
<input id="reaction-description" type="text" class="form-control"
|
||||
value="{{ reaction.description }}" name="reaction-description">
|
||||
value="{{ reaction.description|safe }}" name="reaction-description">
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<!-- Edit Rule -->
|
||||
<div id="edit_rule_modal" class="modal" tabindex="-1">
|
||||
@ -14,12 +15,12 @@
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="rule-name">Name</label>
|
||||
<input id="rule-name" class="form-control" name="rule-name" value="{{ rule.name }}">
|
||||
<input id="rule-name" class="form-control" name="rule-name" value="{{ rule.name|safe }}">
|
||||
</p>
|
||||
<p>
|
||||
<label for="rule-description">Description</label>
|
||||
<input id="rule-description" type="text" class="form-control"
|
||||
value="{{ rule.description }}" name="rule-description">
|
||||
value="{{ rule.description|safe }}" name="rule-description">
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<!-- Edit User -->
|
||||
<div id="edit_user_modal" class="modal" tabindex="-1">
|
||||
@ -18,7 +19,7 @@
|
||||
<select id="default-package" name="default-package" class="form-control" data-width='100%'>
|
||||
<option disabled>Select a Package</option>
|
||||
{% for p in meta.writeable_packages %}
|
||||
<option value="{{ p.url }}" {% if p.id == meta.user.default_package.id %}selected{% endif %}>{{ p.name }}</option>
|
||||
<option value="{{ p.url }}" {% if p.id == meta.user.default_package.id %}selected{% endif %}>{{ p.name|safe }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</p>
|
||||
@ -27,7 +28,7 @@
|
||||
<select id="default-group" name="default-group" class="form-control" data-width='100%'>
|
||||
<option disabled>Select a Group</option>
|
||||
{% for g in meta.available_groups %}
|
||||
<option value="{{ g.url }}" {% if g.id == meta.user.default_group.id %}selected{% endif %}>{{ g.name }}</option>
|
||||
<option value="{{ g.url }}" {% if g.id == meta.user.default_group.id %}selected{% endif %}>{{ g.name|safe }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</p>
|
||||
@ -36,7 +37,7 @@
|
||||
<select id="default-prediction-setting" name="default-prediction-setting" class="form-control" data-width='100%'>
|
||||
<option disabled>Select a Setting</option>
|
||||
{% for s in meta.available_settings %}
|
||||
<option value="{{ s.url }}" {% if s.id == meta.user.default_setting.id %}selected{% endif %}>{{ s.name }}</option>
|
||||
<option value="{{ s.url }}" {% if s.id == meta.user.default_setting.id %}selected{% endif %}>{{ s.name|safe }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</p>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
<div class="modal fade" tabindex="-1" id="evaluate_model_modal" role="dialog" aria-labelledby="evaluate_model_modal"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
@ -24,14 +25,14 @@
|
||||
<option disabled>Reviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<option disabled>Unreviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if not obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<!-- Copy Object -->
|
||||
<div id="generic_copy_object_modal" class="modal" tabindex="-1">
|
||||
@ -18,7 +19,7 @@
|
||||
data-width='100%'>
|
||||
<option disabled selected>Select Target Package</option>
|
||||
{% for p in meta.writeable_packages %}
|
||||
<option value="{{ p.url }}">{{ p.name }}</option>`
|
||||
<option value="{{ p.url }}">{{ p.name|safe }}</option>`
|
||||
{% endfor %}
|
||||
</select>
|
||||
<input type="hidden" name="hidden" value="copy">
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
|
||||
<style>
|
||||
@ -55,7 +56,7 @@
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">Set Aliases for {{ current_object.name }}</h4>
|
||||
<h4 class="modal-title">Set Aliases for {{ current_object.name|safe }}</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="set_aliases_modal_form" accept-charset="UTF-8" action="{{ current_object.url }}"
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<!-- Delete Object -->
|
||||
<div id="generic_set_external_reference_modal" class="modal" tabindex="-1">
|
||||
@ -23,7 +24,7 @@
|
||||
{% if entity == object_type %}
|
||||
{% for db in databases %}
|
||||
<option id="db-select-{{ db.database.pk }}" data-input-placeholder="{{ db.placeholder }}"
|
||||
value="{{ db.database.id }}">{{ db.database.name }}</option>`
|
||||
value="{{ db.database.id }}">{{ db.database.name|safe }}</option>`
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
{% load static %}
|
||||
<div class="modal fade bs-modal-lg" id="set_scenario_modal" tabindex="-1" aria-labelledby="set_scenario_modal"
|
||||
aria-modal="true" role="dialog">
|
||||
@ -7,7 +8,7 @@
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">Set Scenarios for {{ current_object.name }}</h4>
|
||||
<h4 class="modal-title">Set Scenarios for {{ current_object.name|safe }}</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="loading_scenario_div" class="text-center"></div>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
<div class="modal fade"
|
||||
tabindex="-1"
|
||||
id="manage_api_token_modal"
|
||||
@ -41,7 +42,7 @@
|
||||
<div class="input-group">
|
||||
<input type="hidden" name="hidden" value="delete">
|
||||
<input type="hidden" name="token-id" value="{{ t.pk }}">
|
||||
<input type="text" class="form-control" value="{{ t.name }}" disabled>
|
||||
<input type="text" class="form-control" value="{{ t.name|safe }}" disabled>
|
||||
<span class="input-group-btn">
|
||||
<button type="submit" class="btn btn-danger">Delete</button>
|
||||
</span>
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
<option disabled>Select a Setting</option>
|
||||
{% for s in meta.available_settings %}
|
||||
<option value="{{ s.url }}"{% if s.id == meta.user.default_setting.id %}selected{% endif %}>
|
||||
{{ s.name }}{% if s.id == meta.user.default_setting.id %} <i>(User default)</i>{% endif %}
|
||||
{{ s.name|safe }}{% if s.id == meta.user.default_setting.id %} <i>(User default)</i>{% endif %}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
|
||||
535
templates/modals/search_modal.html
Normal file
535
templates/modals/search_modal.html
Normal file
@ -0,0 +1,535 @@
|
||||
{% load static %}
|
||||
<dialog id="search_modal" class="modal @max-sm:modal-top justify-center">
|
||||
<div class="modal-box w-lvw sm:w-[85vw] sm:max-w-5xl h-full sm:h-8/12 p-1" >
|
||||
|
||||
<!-- Search Input and Mode Selector -->
|
||||
<div class="form-control mb-4 flex-shrink-0 w-full">
|
||||
<div class="join w-full m-0 p-3 items-center">
|
||||
<label class="input join-item input-ghost grow">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
|
||||
<input type="text" autofocus
|
||||
id="modal_searchbar"
|
||||
placeholder="Benfuracarb"
|
||||
class="grow" aria-label="Search" />
|
||||
</label>
|
||||
|
||||
<!-- Mode Dropdown -->
|
||||
<div>
|
||||
<button type="button"
|
||||
tabindex="0"
|
||||
id="modal_mode_button"
|
||||
popovertarget="search_dropdown_menu" style="anchor-name:--anchor-1"
|
||||
class="btn join-item btn-ghost">
|
||||
Text
|
||||
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</button>
|
||||
<ul tabindex="0"" class="dropdown dropdown-end menu bg-base-200 rounded-box z-[100] w-64 p-2 shadow-lg" popover id="search_dropdown_menu" style="position-anchor:--anchor-1">
|
||||
<li class="menu-title">Text</li>
|
||||
<li>
|
||||
<a id="modal_dropdown_text"
|
||||
class="tooltip tooltip-left"
|
||||
data-tip="Search on object names and descriptions">
|
||||
Text
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-title">SMILES</li>
|
||||
<li>
|
||||
<a id="modal_dropdown_smiles_default"
|
||||
class="tooltip tooltip-left"
|
||||
data-tip="Ignores stereochemistry and charge">
|
||||
Default
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="modal_dropdown_smiles_canonical"
|
||||
class="tooltip tooltip-left"
|
||||
data-tip="Ignores stereochemistry, preserves charge">
|
||||
Canonical
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="modal_dropdown_smiles_exact"
|
||||
class="tooltip tooltip-left"
|
||||
data-tip="Exact match for stereochemistry and charge">
|
||||
Exact
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-title">InChI</li>
|
||||
<li>
|
||||
<a id="modal_dropdown_inchikey"
|
||||
class="tooltip tooltip-left"
|
||||
data-tip="Search by InChIKey">
|
||||
InChIKey
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button type="button" id="modal_search_button" class="btn btn-xs btn-ghost join-item">
|
||||
<kbd class="kbd kbd-sm p-1 text-base-content/50">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-corner-down-left-icon lucide-corner-down-left"><path d="M20 4v7a4 4 0 0 1-4 4H4"/><path d="m9 10-5 5 5 5"/></svg>
|
||||
</kbd>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Package Selector with Pills -->
|
||||
<div class="form-control mb-4 flex-shrink-0">
|
||||
<!-- Pills Container -->
|
||||
<div id="modal_package_pills_container"
|
||||
class="flex flex-wrap gap-2 p-3 border-2 border-dashed border-base-300 rounded-lg m-3 min-h-[3rem] items-center">
|
||||
<!-- Pills will be added here dynamically -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Package Dropdown Menu -->
|
||||
<ul class="dropdown dropdown-end menu bg-base-200 rounded-box z-[100] w-80 max-h-96 overflow-y-auto p-2 shadow-lg"
|
||||
popover
|
||||
id="package_dropdown_menu"
|
||||
style="position-anchor:--anchor-packages">
|
||||
{% if unreviewed_packages %}
|
||||
<li class="menu-title">Reviewed Packages</li>
|
||||
{% for obj in reviewed_packages %}
|
||||
<li>
|
||||
<a class="package-option flex justify-between items-center"
|
||||
data-package-url="{{ obj.url }}"
|
||||
data-package-name="{{ obj.name }}">
|
||||
<span>{{ obj.name }}</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 package-checkmark hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
<li class="menu-title">Unreviewed Packages</li>
|
||||
{% for obj in unreviewed_packages %}
|
||||
<li>
|
||||
<a class="package-option flex justify-between items-center"
|
||||
data-package-url="{{ obj.url }}"
|
||||
data-package-name="{{ obj.name }}">
|
||||
<span>{{ obj.name }}</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 package-checkmark hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<li class="menu-title">Reviewed Packages</li>
|
||||
{% for obj in reviewed_packages %}
|
||||
<li>
|
||||
<a class="package-option flex justify-between items-center"
|
||||
data-package-url="{{ obj.url }}"
|
||||
data-package-name="{{ obj.name }}">
|
||||
<span>{{ obj.name }}</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 package-checkmark hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Loading Indicator -->
|
||||
<div id="search_loading" class="hidden justify-center py-8 flex-shrink-0">
|
||||
<span class="loading loading-spinner loading-lg text-primary"></span>
|
||||
</div>
|
||||
|
||||
<!-- Results Container - scrollable -->
|
||||
<div id="search_results" class="flex-1 overflow-y-auto min-h-0 p-2"></div>
|
||||
</div>
|
||||
|
||||
<!-- Backdrop to close -->
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button>close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
// Package Selector Module - Data-driven multiselect package selection
|
||||
const PackageSelector = {
|
||||
// Single source of truth: array of selected packages
|
||||
selectedPackages: [],
|
||||
|
||||
elements: {
|
||||
pillsContainer: null,
|
||||
packageDropdown: null,
|
||||
packageOptions: null
|
||||
},
|
||||
|
||||
init() {
|
||||
this.cacheElements();
|
||||
this.loadInitialSelection();
|
||||
this.attachEventListeners();
|
||||
this.render();
|
||||
},
|
||||
|
||||
cacheElements() {
|
||||
this.elements.pillsContainer = document.getElementById('modal_package_pills_container');
|
||||
this.elements.packageDropdown = document.getElementById('package_dropdown_menu');
|
||||
this.elements.packageOptions = document.querySelectorAll('.package-option');
|
||||
},
|
||||
|
||||
loadInitialSelection() {
|
||||
// Load pre-selected packages from server-rendered pills
|
||||
const existingPills = this.elements.pillsContainer.querySelectorAll('.badge');
|
||||
existingPills.forEach(pill => {
|
||||
this.selectedPackages.push({
|
||||
url: pill.dataset.packageUrl,
|
||||
name: pill.dataset.packageName
|
||||
});
|
||||
});
|
||||
|
||||
// If no pills found, select all reviewed packages by default
|
||||
if (this.selectedPackages.length === 0) {
|
||||
// Iterate through all menu items and collect reviewed packages
|
||||
const menuItems = this.elements.packageDropdown.querySelectorAll('li');
|
||||
|
||||
for (const item of menuItems) {
|
||||
// Check if this is the "Unreviewed Packages" menu title
|
||||
if (item.classList.contains('menu-title') &&
|
||||
item.textContent.trim() === 'Unreviewed Packages') {
|
||||
break; // Stop processing after this point
|
||||
}
|
||||
|
||||
// Check for package options (only reviewed packages reach here)
|
||||
const packageOption = item.querySelector('.package-option');
|
||||
if (packageOption) {
|
||||
this.selectedPackages.push({
|
||||
url: packageOption.dataset.packageUrl,
|
||||
name: packageOption.dataset.packageName
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
attachEventListeners() {
|
||||
// Toggle package selection on dropdown item click
|
||||
this.elements.packageOptions.forEach(option => {
|
||||
option.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation(); // Prevent dropdown from closing
|
||||
const packageUrl = option.dataset.packageUrl;
|
||||
const packageName = option.dataset.packageName;
|
||||
this.togglePackageSelection(packageUrl, packageName);
|
||||
});
|
||||
});
|
||||
|
||||
// Remove package when X is clicked (using event delegation)
|
||||
this.elements.pillsContainer.addEventListener('click', (e) => {
|
||||
if (e.target.classList.contains('package-remove-btn') || e.target.closest('.package-remove-btn')) {
|
||||
const pill = e.target.closest('.badge');
|
||||
if (pill) {
|
||||
const packageUrl = pill.dataset.packageUrl;
|
||||
this.removePackage(packageUrl);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
togglePackageSelection(packageUrl, packageName) {
|
||||
const index = this.selectedPackages.findIndex(pkg => pkg.url === packageUrl);
|
||||
|
||||
if (index !== -1) {
|
||||
// Remove from selection
|
||||
this.selectedPackages.splice(index, 1);
|
||||
} else {
|
||||
// Add to selection
|
||||
this.selectedPackages.push({ url: packageUrl, name: packageName });
|
||||
}
|
||||
|
||||
this.render();
|
||||
},
|
||||
|
||||
removePackage(packageUrl) {
|
||||
const index = this.selectedPackages.findIndex(pkg => pkg.url === packageUrl);
|
||||
if (index !== -1) {
|
||||
this.selectedPackages.splice(index, 1);
|
||||
this.render();
|
||||
}
|
||||
},
|
||||
|
||||
render() {
|
||||
this.renderPills();
|
||||
this.renderAddButton();
|
||||
this.renderCheckmarks();
|
||||
},
|
||||
|
||||
renderPills() {
|
||||
// Clear existing pills and button (except placeholder)
|
||||
const pills = this.elements.pillsContainer.querySelectorAll('.badge');
|
||||
pills.forEach(pill => pill.remove());
|
||||
|
||||
const existingButton = this.elements.pillsContainer.querySelector('#modal_package_add_button');
|
||||
if (existingButton) {
|
||||
existingButton.remove();
|
||||
}
|
||||
|
||||
// Create pills from data
|
||||
this.selectedPackages.forEach(pkg => {
|
||||
const pill = this.createPillElement(pkg.url, pkg.name);
|
||||
this.elements.pillsContainer.appendChild(pill);
|
||||
});
|
||||
},
|
||||
|
||||
renderAddButton() {
|
||||
// Only render button if there are packages available
|
||||
if (this.elements.packageOptions.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const button = document.createElement('button');
|
||||
button.type = 'button';
|
||||
button.id = 'modal_package_add_button';
|
||||
button.setAttribute('popovertarget', 'package_dropdown_menu');
|
||||
button.style.cssText = 'anchor-name:--anchor-packages';
|
||||
button.className = 'btn btn-sm btn-ghost gap-2 text-base-content/50';
|
||||
|
||||
button.innerHTML = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus-icon lucide-plus"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
|
||||
Add Package
|
||||
`;
|
||||
|
||||
this.elements.pillsContainer.appendChild(button);
|
||||
},
|
||||
|
||||
createPillElement(packageUrl, packageName) {
|
||||
const pill = document.createElement('span');
|
||||
pill.className = 'badge badge-outline gap-2 max-w-xs';
|
||||
pill.dataset.packageUrl = packageUrl;
|
||||
pill.dataset.packageName = packageName;
|
||||
|
||||
pill.innerHTML = `
|
||||
<span class="truncate" title="${packageName}">${packageName}</span>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4 cursor-pointer hover:text-error package-remove-btn flex-shrink-0 rotate-45"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M5 12h14"/><path d="M12 5v14"/>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
return pill;
|
||||
},
|
||||
|
||||
renderCheckmarks() {
|
||||
// Update all checkmarks based on selected packages
|
||||
this.elements.packageOptions.forEach(option => {
|
||||
const packageUrl = option.dataset.packageUrl;
|
||||
const isSelected = this.selectedPackages.some(pkg => pkg.url === packageUrl);
|
||||
const checkmark = option.querySelector('.package-checkmark');
|
||||
|
||||
if (checkmark) {
|
||||
checkmark.classList.toggle('hidden', !isSelected);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
getSelectedPackages() {
|
||||
return this.selectedPackages.map(pkg => pkg.url);
|
||||
}
|
||||
};
|
||||
|
||||
// Modal and Search Management
|
||||
const modal = document.getElementById('search_modal');
|
||||
const searchbar = document.getElementById('modal_searchbar');
|
||||
const searchButton = document.getElementById('modal_search_button');
|
||||
const modeButton = document.getElementById('modal_mode_button');
|
||||
const resultsDiv = document.getElementById('search_results');
|
||||
const loadingDiv = document.getElementById('search_loading');
|
||||
|
||||
// MutationObserver to detect when modal opens
|
||||
const observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach((mutation) => {
|
||||
if (mutation.attributeName === 'open' && modal.open) {
|
||||
PackageSelector.render();
|
||||
// Delay focus to allow CSS transitions to complete (modal has 0.3s transition)
|
||||
setTimeout(() => {
|
||||
searchbar.focus();
|
||||
}, 320);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(modal, { attributes: true });
|
||||
|
||||
// Clear results when modal closes
|
||||
modal.addEventListener('close', function() {
|
||||
resultsDiv.innerHTML = '';
|
||||
loadingDiv.classList.add('hidden');
|
||||
searchbar.value = '';
|
||||
});
|
||||
|
||||
|
||||
// Mode dropdown handlers
|
||||
const dropdownMenu = document.getElementById('search_dropdown_menu');
|
||||
|
||||
const modeButtons = [
|
||||
{ id: 'modal_dropdown_text', text: 'Text' },
|
||||
{ id: 'modal_dropdown_smiles_default', text: 'Default' },
|
||||
{ id: 'modal_dropdown_smiles_canonical', text: 'Canonical' },
|
||||
{ id: 'modal_dropdown_smiles_exact', text: 'Exact' },
|
||||
{ id: 'modal_dropdown_inchikey', text: 'InChIKey' }
|
||||
];
|
||||
|
||||
modeButtons.forEach(({ id, text }) => {
|
||||
document.getElementById(id).addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
modeButton.innerHTML = text + ` <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>`;
|
||||
// Close dropdown using popover API
|
||||
if (dropdownMenu && typeof dropdownMenu.hidePopover === 'function') {
|
||||
dropdownMenu.hidePopover();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Initialize Package Selector
|
||||
PackageSelector.init();
|
||||
|
||||
// Search Response Handler
|
||||
function handleSearchResponse(data) {
|
||||
resultsDiv.innerHTML = '';
|
||||
|
||||
function makeContent(objs) {
|
||||
let links = '';
|
||||
objs.forEach(obj => {
|
||||
links += `<a href="${obj.url}" class="block px-4 py-2 hover:bg-base-300 rounded-lg transition-colors">${obj.name}</a>`;
|
||||
});
|
||||
return links;
|
||||
}
|
||||
|
||||
let allEmpty = true;
|
||||
let content = '';
|
||||
|
||||
// Category order for better UX
|
||||
const categoryOrder = ['Compounds', 'Compound Structures', 'Rules', 'Reactions', 'Pathways'];
|
||||
|
||||
categoryOrder.forEach(key => {
|
||||
if (!data[key] || data[key].length < 1) {
|
||||
return;
|
||||
}
|
||||
allEmpty = false;
|
||||
|
||||
content += `
|
||||
<div class="collapse collapse-arrow bg-base-200 mb-2">
|
||||
<input type="checkbox" checked />
|
||||
<div class="collapse-title font-medium">
|
||||
${key} <span class="badge badge-neutral badge-sm ml-2">${data[key].length}</span>
|
||||
</div>
|
||||
<div class="collapse-content">
|
||||
${makeContent(data[key])}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
if (allEmpty) {
|
||||
resultsDiv.innerHTML = `
|
||||
<div class="alert alert-warning">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
||||
</svg>
|
||||
<span>No results found</span>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
resultsDiv.innerHTML = `
|
||||
<div class="mb-2">
|
||||
<div class="text-sm font-semibold text-base-content/70 mb-2">Results</div>
|
||||
${content}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// Search Execution
|
||||
function performSearch(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const query = searchbar.value.trim();
|
||||
|
||||
if (!query) {
|
||||
console.log('Search phrase empty, won\'t do search');
|
||||
return;
|
||||
}
|
||||
|
||||
const selPacks = PackageSelector.getSelectedPackages();
|
||||
|
||||
if (selPacks.length < 1) {
|
||||
console.log('No package selected, won\'t do search');
|
||||
resultsDiv.innerHTML = `
|
||||
<div class="alert alert-info">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<span>Please select at least one package</span>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
const mode = modeButton.textContent.trim().toLowerCase();
|
||||
|
||||
const params = new URLSearchParams();
|
||||
selPacks.forEach(pack => params.append('packages', pack));
|
||||
params.append('search', query);
|
||||
params.append('mode', mode);
|
||||
|
||||
// Show loading
|
||||
loadingDiv.classList.remove('hidden');
|
||||
resultsDiv.innerHTML = '';
|
||||
|
||||
fetch(`{{ SERVER_BASE }}/search?${params.toString()}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Accept': 'application/json'
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Search request failed');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(result => {
|
||||
loadingDiv.classList.add('hidden');
|
||||
handleSearchResponse(result);
|
||||
})
|
||||
.catch(error => {
|
||||
loadingDiv.classList.add('hidden');
|
||||
console.error('Search error:', error);
|
||||
resultsDiv.innerHTML = `
|
||||
<div class="alert alert-error">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<span>Search failed. Please try again.</span>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
}
|
||||
|
||||
// Event listeners for search
|
||||
searchButton.addEventListener('click', performSearch);
|
||||
searchbar.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Enter') {
|
||||
performSearch(e);
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
@ -1,110 +0,0 @@
|
||||
<div class="modal fade bs-modal-sm" id="signupmodal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content">
|
||||
<br>
|
||||
<div class="bs-example bs-example-tabs">
|
||||
<ul id="myTab" class="nav nav-tabs">
|
||||
<li class="active">
|
||||
<a href="#signin" data-toggle="tab">Sign In</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="#signup" data-toggle="tab">Register</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="#why" data-toggle="tab">Why?</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="myTabContent" class="tab-content">
|
||||
<div class="tab-pane fade active in" id="signin">
|
||||
<form class="form-horizontal" method="post" action="{% url 'login' %}">
|
||||
{% csrf_token %}
|
||||
<fieldset>
|
||||
<input type="hidden" name="login" id="login" value="true"/>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="username">Username:</label>
|
||||
<div class="controls">
|
||||
<input required id="username" name="username" type="text" class="form-control"
|
||||
placeholder="username" autocomplete="username">
|
||||
</div>
|
||||
<label class="control-label" for="passwordinput">Password:</label>
|
||||
<div class="controls">
|
||||
<input required id="passwordinput" name="password" class="form-control"
|
||||
type="password" placeholder="********" autocomplete="current-password">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Button -->
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="signin"></label>
|
||||
<div class="controls">
|
||||
<button id="signin" name="signin" class="btn btn-success">Sign In</button>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Why tab -->
|
||||
<div class="tab-pane fade in" id="why">
|
||||
<p>After you register, you have more permissions on
|
||||
this site, e.g., can create your own
|
||||
packages, submit data for review, and set access
|
||||
permissions to your data.</p>
|
||||
<p></p>
|
||||
<p>
|
||||
<br> Please
|
||||
contact <a href="mailto:admin@envipath.org">admin@envipath.org</a>
|
||||
if you have any questions.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Register -->
|
||||
<div class="tab-pane fade"
|
||||
id="signup">
|
||||
<div id="passwordGuideline" class="alert alert-info">
|
||||
The password must contain 8 to 30 characters<br>
|
||||
The following characters are allowed:
|
||||
- Upper and lower case characters<br>
|
||||
- Digits<br>
|
||||
- Special characters _, -, +<br>
|
||||
|
||||
</div>
|
||||
|
||||
<form id="signup-action" class="form-horizontal" action="{% url 'login' %}" method="post">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="register" id="register" value="true"/>
|
||||
|
||||
<label class="control-label" for="userid">Username:</label>
|
||||
<input id="userid" name="username" class="form-control" type="text" placeholder="user" required autocomplete="username">
|
||||
|
||||
<label class="control-label" for="email">Email:</label>
|
||||
<input id="email" name="email" class="form-control" type="email" placeholder="user@envipath.org" required>
|
||||
|
||||
<label class="control-label" for="password">Password:</label>
|
||||
<input id="password" name="password" class="form-control" type="password" placeholder="********" required autocomplete="new-password">
|
||||
|
||||
<label class="control-label" for="rpassword">Repeat Password:</label>
|
||||
<input id="rpassword" name="rpassword" class="form-control" type="password" placeholder="********" required autocomplete="new-password">
|
||||
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="confirmsignup"></label>
|
||||
<div class="controls">
|
||||
<button id="confirmsignup" name="confirmsignup" class="btn btn-success">Sign Up
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<center>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
</center>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -13,7 +13,7 @@
|
||||
<div class="panel-group" id="rule-detail">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
|
||||
{{ rule.name }}
|
||||
{{ rule.name|safe }}
|
||||
<div id="actionsButton"
|
||||
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
|
||||
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
|
||||
@ -60,7 +60,7 @@
|
||||
<div id="rule-reaction-patterns" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for r in rule.srs %}
|
||||
<a class="list-group-item" href="{{ r.url }}">{{ r.name }}</a>
|
||||
<a class="list-group-item" href="{{ r.url }}">{{ r.name|safe }}</a>
|
||||
<div align="center">
|
||||
<p>
|
||||
{{r.as_svg|safe}}
|
||||
@ -81,7 +81,7 @@
|
||||
<div id="rule-scenario" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for s in rule.scenarios.all %}
|
||||
<a class="list-group-item" href="{{ s.url }}">{{ s.name }} <i>({{ s.package.name }})</i></a>
|
||||
<a class="list-group-item" href="{{ s.url }}">{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
<div class="panel-group" id="compound-detail">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
|
||||
{{ compound.name }}
|
||||
{{ compound.name|safe }}
|
||||
<div id="actionsButton"
|
||||
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
|
||||
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
|
||||
@ -64,7 +64,7 @@
|
||||
</div>
|
||||
<div id="compound-desc" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{{ compound.description }}
|
||||
{{ compound.description|safe }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -133,7 +133,7 @@
|
||||
<div id="compound-reaction" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for r in compound.related_reactions %}
|
||||
<a class="list-group-item" href="{{ r.url }}">{{ r.name }} <i>({{ r.package.name }})</i></a>
|
||||
<a class="list-group-item" href="{{ r.url }}">{{ r.name|safe }} <i>({{ r.package.name|safe }})</i></a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
@ -150,7 +150,7 @@
|
||||
<div id="compound-pathway" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for r in compound.related_pathways %}
|
||||
<a class="list-group-item" href="{{ r.url }}">{{ r.name }} <i>({{ r.package.name }})</i></a>
|
||||
<a class="list-group-item" href="{{ r.url }}">{{ r.name|safe }} <i>({{ r.package.name|safe }})</i></a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
@ -167,7 +167,7 @@
|
||||
<div id="compound-scenario" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for s in compound.scenarios.all %}
|
||||
<a class="list-group-item" href="{{ s.url }}">{{ s.name }} <i>({{ s.package.name }})</i></a>
|
||||
<a class="list-group-item" href="{{ s.url }}">{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
<div class="panel-group" id="compound-structure-detail">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
|
||||
{{ compound_structure.name }}
|
||||
{{ compound_structure.name|safe }}
|
||||
<div id="actionsButton"
|
||||
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
|
||||
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
|
||||
@ -28,7 +28,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p> {{ compound_structure.description }} </p>
|
||||
<p> {{ compound_structure.description|safe }} </p>
|
||||
</div>
|
||||
|
||||
<!-- Image -->
|
||||
@ -86,7 +86,7 @@
|
||||
<div id="compound-structure-scenario" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for s in compound_structure.scenarios.all %}
|
||||
<a class="list-group-item" href="{{ s.url }}">{{ s.name }} <i>({{ s.package.name }})</i></a>
|
||||
<a class="list-group-item" href="{{ s.url }}">{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<div class="panel-group" id="edge-detail">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
|
||||
{{ edge.edge_label.name }}
|
||||
{{ edge.edge_label.name|safe }}
|
||||
<div id="actionsButton"
|
||||
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
|
||||
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
|
||||
@ -36,7 +36,7 @@
|
||||
</div>
|
||||
<div id="edge-desc" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{{ edge.description }}
|
||||
{{ edge.description|safe }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -82,12 +82,12 @@
|
||||
<div id="edge-description-smiles" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for educt in edge.start_nodes.all %}
|
||||
<a class="btn btn-default" href="{{ educt.url }}">{{ educt.name }}</a>
|
||||
<a class="btn btn-default" href="{{ educt.url }}">{{ educt.name|safe }}</a>
|
||||
{% endfor %}
|
||||
<span class="glyphicon glyphicon-arrow-right" style="margin-left:5em;margin-right:5em;"
|
||||
aria-hidden="true"></span>
|
||||
{% for product in edge.end_nodes.all %}
|
||||
<a class="btn btn-default" href="{{ product.url }}">{{ product.name }}</a>
|
||||
<a class="btn btn-default" href="{{ product.url }}">{{ product.name|safe }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
@ -116,7 +116,7 @@
|
||||
<div id="edge-rules" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for r in edge.edge_label.rules.all %}
|
||||
<a class="list-group-item" href="{{ r.url }}">{{ r.name }}</a>
|
||||
<a class="list-group-item" href="{{ r.url }}">{{ r.name|safe }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
@ -132,7 +132,7 @@
|
||||
<div id="edge-scenario" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for s in edge.scenarios.all %}
|
||||
<a class="list-group-item" href="{{ s.url }}">{{ s.name }} <i>({{ s.package.name }})</i></a>
|
||||
<a class="list-group-item" href="{{ s.url }}">{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<div class="panel-group" id="package-detail">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
|
||||
{{ group.name }}
|
||||
{{ group.name|safe }}
|
||||
<div id="actionsButton"
|
||||
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
|
||||
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
|
||||
@ -26,7 +26,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p> {{ group.description }} </p>
|
||||
<p> {{ group.description|safe }} </p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -39,10 +39,10 @@
|
||||
</div>
|
||||
<ul class="list-group">
|
||||
{% for um in group.user_member.all %}
|
||||
<a class="list-group-item" href="{{ um.url }}">{{ um.username }}</a>
|
||||
<a class="list-group-item" href="{{ um.url }}">{{ um.username|safe }}</a>
|
||||
{% endfor %}
|
||||
{% for gm in group.group_member.all %}
|
||||
<a class="list-group-item" href="{{ gm.url }}">{{ gm.name }}</a>
|
||||
<a class="list-group-item" href="{{ gm.url }}">{{ gm.name|safe }}</a>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
@ -56,7 +56,7 @@
|
||||
</div>
|
||||
<ul class="list-group">
|
||||
{% for p in packages %}
|
||||
<a class="list-group-item" href="{{ p.url }}">{{ p.name }}</a>
|
||||
<a class="list-group-item" href="{{ p.url }}">{{ p.name|safe }}</a>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,162 +3,262 @@
|
||||
{% load envipytags %}
|
||||
{% block content %}
|
||||
|
||||
{% block action_modals %}
|
||||
{% include "modals/objects/edit_model_modal.html" %}
|
||||
{% include "modals/objects/evaluate_model_modal.html" %}
|
||||
{% include "modals/objects/retrain_model_modal.html" %}
|
||||
{% include "modals/objects/generic_delete_modal.html" %}
|
||||
{% endblock action_modals %}
|
||||
{% block action_modals %}
|
||||
{% include "modals/objects/edit_model_modal.html" %}
|
||||
{% include "modals/objects/evaluate_model_modal.html" %}
|
||||
{% include "modals/objects/retrain_model_modal.html" %}
|
||||
{% include "modals/objects/generic_delete_modal.html" %}
|
||||
{% endblock action_modals %}
|
||||
|
||||
<!-- Include required libs -->
|
||||
<script src="https://d3js.org/d3.v5.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.js"></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.css" rel="stylesheet">
|
||||
<!-- Include required libs -->
|
||||
<script src="https://d3js.org/d3.v5.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.js"></script>
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<div class="panel-group" id="model-detail">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
|
||||
{{ model.name }}
|
||||
<div id="actionsButton"
|
||||
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
|
||||
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
|
||||
aria-haspopup="true" aria-expanded="false"><span
|
||||
class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
|
||||
style="padding-right:1em"></span></a>
|
||||
<ul id="actionsList" class="dropdown-menu">
|
||||
{% block actions %}
|
||||
{% include "actions/objects/model.html" %}
|
||||
{% endblock %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="panel-group" id="model-detail">
|
||||
<div class="panel panel-default">
|
||||
<div
|
||||
class="panel-heading"
|
||||
id="headingPanel"
|
||||
style="font-size:2rem;height: 46px"
|
||||
>
|
||||
{{ model.name|safe }}
|
||||
<div
|
||||
id="actionsButton"
|
||||
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
|
||||
class="dropdown"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="dropdown-toggle"
|
||||
data-toggle="dropdown"
|
||||
role="button"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
><span class="glyphicon glyphicon-wrench"></span> Actions
|
||||
<span class="caret"></span><span style="padding-right:1em"></span
|
||||
></a>
|
||||
<ul id="actionsList" class="dropdown-menu">
|
||||
{% block actions %}
|
||||
{% include "actions/objects/model.html" %}
|
||||
{% endblock %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>{{ model.description|safe }}</p>
|
||||
</div>
|
||||
{% if model|classname == 'MLRelativeReasoning' or model|classname == 'RuleBasedRelativeReasoning' %}
|
||||
<!-- Rule Packages -->
|
||||
<div
|
||||
class="panel panel-default panel-heading list-group-item"
|
||||
style="background-color:silver"
|
||||
>
|
||||
<h4 class="panel-title">
|
||||
<a
|
||||
id="rule-package-link"
|
||||
data-toggle="collapse"
|
||||
data-parent="#model-detail"
|
||||
href="#rule-package"
|
||||
>Rule Packages</a
|
||||
>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="rule-package" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for p in model.rule_packages.all %}
|
||||
<a class="list-group-item" href="{{ p.url }}"
|
||||
>{{ p.name|safe }}</a
|
||||
>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Reaction Packages -->
|
||||
<div
|
||||
class="panel panel-default panel-heading list-group-item"
|
||||
style="background-color:silver"
|
||||
>
|
||||
<h4 class="panel-title">
|
||||
<a
|
||||
id="reaction-package-link"
|
||||
data-toggle="collapse"
|
||||
data-parent="#model-detail"
|
||||
href="#reaction-package"
|
||||
>Rule Packages</a
|
||||
>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="reaction-package" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for p in model.data_packages.all %}
|
||||
<a class="list-group-item" href="{{ p.url }}"
|
||||
>{{ p.name|safe }}</a
|
||||
>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% if model.eval_packages.all|length > 0 %}
|
||||
<!-- Eval Packages -->
|
||||
<div
|
||||
class="panel panel-default panel-heading list-group-item"
|
||||
style="background-color:silver"
|
||||
>
|
||||
<h4 class="panel-title">
|
||||
<a
|
||||
id="eval-package-link"
|
||||
data-toggle="collapse"
|
||||
data-parent="#model-detail"
|
||||
href="#eval-package"
|
||||
>Rule Packages</a
|
||||
>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="eval-package" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for p in model.eval_packages.all %}
|
||||
<a class="list-group-item" href="{{ p.url }}"
|
||||
>{{ p.name|safe }}</a
|
||||
>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p> {{ model.description }} </p>
|
||||
</div>
|
||||
{% endif %}
|
||||
<!-- Model Status -->
|
||||
<div
|
||||
class="panel panel-default panel-heading list-group-item"
|
||||
style="background-color:silver"
|
||||
>
|
||||
<h4 class="panel-title">
|
||||
<a
|
||||
id="model-status-link"
|
||||
data-toggle="collapse"
|
||||
data-parent="#model-detail"
|
||||
href="#model-status"
|
||||
>Model Status</a
|
||||
>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="model-status" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">{{ model.status }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if model.ready_for_prediction %}
|
||||
<!-- Predict Panel -->
|
||||
<div
|
||||
class="panel panel-default panel-heading list-group-item"
|
||||
style="background-color:silver"
|
||||
>
|
||||
<h4 class="panel-title">
|
||||
<a
|
||||
id="predict-smiles-link"
|
||||
data-toggle="collapse"
|
||||
data-parent="#model-detail"
|
||||
href="#predict-smiles"
|
||||
>Predict</a
|
||||
>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="predict-smiles" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
<div class="input-group">
|
||||
<input
|
||||
id="smiles-to-predict"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="CCN(CC)C(=O)C1=CC(=CC=C1)C"
|
||||
/>
|
||||
<span class="input-group-btn">
|
||||
<button
|
||||
class="btn btn-default"
|
||||
type="submit"
|
||||
id="predict-button"
|
||||
>
|
||||
Predict!
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
{% if model|classname == 'MLRelativeReasoning' or model|classname == 'RuleBasedRelativeReasoning'%}
|
||||
<!-- Rule Packages -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="rule-package-link" data-toggle="collapse" data-parent="#model-detail"
|
||||
href="#rule-package">Rule Packages</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="rule-package" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for p in model.rule_packages.all %}
|
||||
<a class="list-group-item" href="{{ p.url }}">{{ p.name }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Reaction Packages -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="reaction-package-link" data-toggle="collapse" data-parent="#model-detail"
|
||||
href="#reaction-package">Rule Packages</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="reaction-package" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for p in model.data_packages.all %}
|
||||
<a class="list-group-item" href="{{ p.url }}">{{ p.name }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% if model.eval_packages.all|length > 0 %}
|
||||
<!-- Eval Packages -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="eval-package-link" data-toggle="collapse" data-parent="#model-detail"
|
||||
href="#eval-package">Rule Packages</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="eval-package" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for p in model.eval_packages.all %}
|
||||
<a class="list-group-item" href="{{ p.url }}">{{ p.name }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<!-- Model Status -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="model-status-link" data-toggle="collapse" data-parent="#model-detail"
|
||||
href="#model-status">Model Status</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="model-status" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{{ model.status }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if model.ready_for_prediction %}
|
||||
<!-- Predict Panel -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="predict-smiles-link" data-toggle="collapse" data-parent="#model-detail"
|
||||
href="#predict-smiles">Predict</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="predict-smiles" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
<div class="input-group">
|
||||
<input id="smiles-to-predict" type="text" class="form-control"
|
||||
placeholder="CCN(CC)C(=O)C1=CC(=CC=C1)C">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="submit" id="predict-button">Predict!</button>
|
||||
</span>
|
||||
</div>
|
||||
<div id="predictLoading"></div>
|
||||
<div id="predictResultTable"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Predict Panel -->
|
||||
{% endif %}
|
||||
<div id="predictLoading"></div>
|
||||
<div id="predictResultTable"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Predict Panel -->
|
||||
{% endif %}
|
||||
|
||||
{% if model.ready_for_prediction and model.app_domain %}
|
||||
<!-- App Domain -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="app-domain-assessment-link" data-toggle="collapse" data-parent="#model-detail"
|
||||
href="#app-domain-assessment">Applicability Domain Assessment</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="app-domain-assessment" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
<div class="input-group">
|
||||
<input id="smiles-to-assess" type="text" class="form-control" placeholder="CCN(CC)C(=O)C1=CC(=CC=C1)C">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="submit" id="assess-button">Assess!</button>
|
||||
</span>
|
||||
</div>
|
||||
<div id="appDomainLoading"></div>
|
||||
<div id="appDomainAssessmentResultTable"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End App Domain -->
|
||||
{% endif %}
|
||||
{% if model.ready_for_prediction and model.app_domain %}
|
||||
<!-- App Domain -->
|
||||
<div
|
||||
class="panel panel-default panel-heading list-group-item"
|
||||
style="background-color:silver"
|
||||
>
|
||||
<h4 class="panel-title">
|
||||
<a
|
||||
id="app-domain-assessment-link"
|
||||
data-toggle="collapse"
|
||||
data-parent="#model-detail"
|
||||
href="#app-domain-assessment"
|
||||
>Applicability Domain Assessment</a
|
||||
>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="app-domain-assessment" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
<div class="input-group">
|
||||
<input
|
||||
id="smiles-to-assess"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="CCN(CC)C(=O)C1=CC(=CC=C1)C"
|
||||
/>
|
||||
<span class="input-group-btn">
|
||||
<button
|
||||
class="btn btn-default"
|
||||
type="submit"
|
||||
id="assess-button"
|
||||
>
|
||||
Assess!
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div id="appDomainLoading"></div>
|
||||
<div id="appDomainAssessmentResultTable"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End App Domain -->
|
||||
{% endif %}
|
||||
|
||||
{% if model.model_status == 'FINISHED' %}
|
||||
<!-- Single Gen Curve Panel -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="sg-curve-link" data-toggle="collapse" data-parent="#model-detail"
|
||||
href="#sg-curve">Precision Recall Curve</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="sg-curve" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
<!-- Center container contents -->
|
||||
<div class="container" style="display: flex;justify-content: center;">
|
||||
<div id="sg-curve-plotdiv" class="chart">
|
||||
<div id="sg-chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% if model.model_status == 'FINISHED' %}
|
||||
<!-- Single Gen Curve Panel -->
|
||||
<div
|
||||
class="panel panel-default panel-heading list-group-item"
|
||||
style="background-color:silver"
|
||||
>
|
||||
<h4 class="panel-title">
|
||||
<a
|
||||
id="sg-curve-link"
|
||||
data-toggle="collapse"
|
||||
data-parent="#model-detail"
|
||||
href="#sg-curve"
|
||||
>Precision Recall Curve</a
|
||||
>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="sg-curve" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
<!-- Center container contents -->
|
||||
<div
|
||||
class="container"
|
||||
style="display: flex;justify-content: center;"
|
||||
>
|
||||
<div id="sg-curve-plotdiv" class="chart">
|
||||
<div id="sg-chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{# prettier-ignore-start #}
|
||||
<script>
|
||||
$(function () {
|
||||
if (!($('#sg-chart').length > 0)) {
|
||||
@ -265,138 +365,162 @@
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<!-- End Single Gen Curve Panel -->
|
||||
{% endif %}
|
||||
</div>
|
||||
{# prettier-ignore-end #}
|
||||
<!-- End Single Gen Curve Panel -->
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
function handlePredictionResponse(data) {
|
||||
res = "<table class='table table-striped'>";
|
||||
res += "<thead>";
|
||||
res += "<th scope='col'>#</th>";
|
||||
|
||||
function handlePredictionResponse(data) {
|
||||
res = "<table class='table table-striped'>"
|
||||
res += "<thead>"
|
||||
res += "<th scope='col'>#</th>"
|
||||
columns = ["products", "image", "probability", "btrule"];
|
||||
|
||||
columns = ['products', 'image', 'probability', 'btrule']
|
||||
for (col in columns) {
|
||||
res += "<th scope='col'>" + columns[col] + "</th>";
|
||||
}
|
||||
|
||||
for (col in columns) {
|
||||
res += "<th scope='col'>" + columns[col] + "</th>"
|
||||
res += "</thead>";
|
||||
res += "<tbody>";
|
||||
var cnt = 1;
|
||||
for (transformation in data) {
|
||||
res += "<tr>";
|
||||
res += "<th scope='row'>" + cnt + "</th>";
|
||||
res +=
|
||||
"<th scope='row'>" +
|
||||
data[transformation]["products"][0].join(", ") +
|
||||
"</th>";
|
||||
res +=
|
||||
"<th scope='row'>" +
|
||||
"<img width='400' src='{% url 'depict' %}?smiles=" +
|
||||
encodeURIComponent(data[transformation]["products"][0].join(".")) +
|
||||
"'></th>";
|
||||
res +=
|
||||
"<th scope='row'>" +
|
||||
data[transformation]["probability"].toFixed(3) +
|
||||
"</th>";
|
||||
if (data[transformation]["btrule"] != null) {
|
||||
res +=
|
||||
"<th scope='row'>" +
|
||||
"<a href='" +
|
||||
data[transformation]["btrule"]["url"] +
|
||||
"'>" +
|
||||
data[transformation]["btrule"]["name"] +
|
||||
"</a>" +
|
||||
"</th>";
|
||||
} else {
|
||||
res += "<th scope='row'>N/A</th>";
|
||||
}
|
||||
res += "</tr>";
|
||||
cnt += 1;
|
||||
}
|
||||
|
||||
res += "</tbody>";
|
||||
res += "</table>";
|
||||
$("#predictResultTable").append(res);
|
||||
}
|
||||
|
||||
function clear(divid) {
|
||||
$("#" + divid).removeClass("alert alert-danger");
|
||||
$("#" + divid).empty();
|
||||
}
|
||||
|
||||
if ($("#predict-button").length > 0) {
|
||||
$("#predict-button").on("click", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
clear("predictResultTable");
|
||||
|
||||
data = {
|
||||
smiles: $("#smiles-to-predict").val(),
|
||||
classify: "ILikeCats!",
|
||||
};
|
||||
|
||||
if (data["smiles"].trim() === "") {
|
||||
$("#predictResultTable").addClass("alert alert-danger");
|
||||
$("#predictResultTable").append(
|
||||
"Please enter a SMILES string to predict!",
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
makeLoadingGif("#predictLoading", "{% static '/images/wait.gif' %}");
|
||||
$.ajax({
|
||||
type: "get",
|
||||
data: data,
|
||||
url: "",
|
||||
success: function (data, textStatus) {
|
||||
try {
|
||||
$("#predictLoading").empty();
|
||||
handlePredictionResponse(data);
|
||||
} catch (error) {
|
||||
$("#predictLoading").empty();
|
||||
$("#predictResultTable").addClass("alert alert-danger");
|
||||
$("#predictResultTable").append(
|
||||
"Error while processing response :/",
|
||||
);
|
||||
}
|
||||
},
|
||||
error: function (jqXHR, textStatus, errorThrown, x) {
|
||||
$("#predictLoading").empty();
|
||||
$("#predictResultTable").addClass("alert alert-danger");
|
||||
$("#predictResultTable").append(jqXHR.responseJSON.error);
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
res += "</thead>"
|
||||
res += "<tbody>"
|
||||
var cnt = 1;
|
||||
for (transformation in data) {
|
||||
res += "<tr>"
|
||||
res += "<th scope='row'>" + cnt + "</th>"
|
||||
res += "<th scope='row'>" + data[transformation]['products'][0].join(', ') + "</th>"
|
||||
res += "<th scope='row'>" + "<img width='400' src='{% url 'depict' %}?smiles=" + encodeURIComponent(data[transformation]['products'][0].join('.')) + "'></th>"
|
||||
res += "<th scope='row'>" + data[transformation]['probability'].toFixed(3) + "</th>"
|
||||
if (data[transformation]['btrule'] != null) {
|
||||
res += "<th scope='row'>" + "<a href='" + data[transformation]['btrule']['url'] + "'>" + data[transformation]['btrule']['name'] + "</a>" + "</th>"
|
||||
} else {
|
||||
res += "<th scope='row'>N/A</th>"
|
||||
}
|
||||
res += "</tr>"
|
||||
cnt += 1;
|
||||
if ($("#assess-button").length > 0) {
|
||||
$("#assess-button").on("click", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
clear("appDomainAssessmentResultTable");
|
||||
|
||||
data = {
|
||||
smiles: $("#smiles-to-assess").val(),
|
||||
"app-domain-assessment": "ILikeCats!",
|
||||
};
|
||||
|
||||
if (data["smiles"].trim() === "") {
|
||||
$("#appDomainAssessmentResultTable").addClass("alert alert-danger");
|
||||
$("#appDomainAssessmentResultTable").append(
|
||||
"Please enter a SMILES string to predict!",
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
makeLoadingGif("#appDomainLoading", "{% static '/images/wait.gif' %}");
|
||||
$.ajax({
|
||||
type: "get",
|
||||
data: data,
|
||||
url: "",
|
||||
success: function (data, textStatus) {
|
||||
try {
|
||||
$("#appDomainLoading").empty();
|
||||
handleAssessmentResponse("{% url 'depict' %}", data);
|
||||
console.log(data);
|
||||
} catch (error) {
|
||||
$("#appDomainLoading").empty();
|
||||
$("#appDomainAssessmentResultTable").addClass(
|
||||
"alert alert-danger",
|
||||
);
|
||||
$("#appDomainAssessmentResultTable").append(
|
||||
"Error while processing response :/",
|
||||
);
|
||||
}
|
||||
|
||||
res += "</tbody>"
|
||||
res += "</table>"
|
||||
$("#predictResultTable").append(res);
|
||||
}
|
||||
|
||||
function clear(divid) {
|
||||
$("#" + divid).removeClass("alert alert-danger");
|
||||
$("#" + divid).empty();
|
||||
}
|
||||
|
||||
if ($('#predict-button').length > 0) {
|
||||
$("#predict-button").on("click", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
clear("predictResultTable");
|
||||
|
||||
data = {
|
||||
"smiles": $("#smiles-to-predict").val(),
|
||||
"classify": "ILikeCats!"
|
||||
}
|
||||
|
||||
if (data["smiles"].trim() === "") {
|
||||
$("#predictResultTable").addClass("alert alert-danger");
|
||||
$("#predictResultTable").append("Please enter a SMILES string to predict!");
|
||||
return;
|
||||
}
|
||||
|
||||
makeLoadingGif("#predictLoading", "{% static '/images/wait.gif' %}");
|
||||
$.ajax({
|
||||
type: 'get',
|
||||
data: data,
|
||||
url: '',
|
||||
success: function (data, textStatus) {
|
||||
try {
|
||||
$("#predictLoading").empty();
|
||||
handlePredictionResponse(data);
|
||||
} catch (error) {
|
||||
|
||||
$("#predictLoading").empty();
|
||||
$("#predictResultTable").addClass("alert alert-danger");
|
||||
$("#predictResultTable").append("Error while processing response :/");
|
||||
}
|
||||
},
|
||||
error: function (jqXHR, textStatus, errorThrown, x) {
|
||||
$("#predictLoading").empty();
|
||||
$("#predictResultTable").addClass("alert alert-danger");
|
||||
$("#predictResultTable").append(jqXHR.responseJSON.error);
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if ($('#assess-button').length > 0) {
|
||||
$("#assess-button").on("click", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
clear("appDomainAssessmentResultTable");
|
||||
|
||||
data = {
|
||||
"smiles": $("#smiles-to-assess").val(),
|
||||
"app-domain-assessment": "ILikeCats!"
|
||||
}
|
||||
|
||||
if (data["smiles"].trim() === "") {
|
||||
$("#appDomainAssessmentResultTable").addClass("alert alert-danger");
|
||||
$("#appDomainAssessmentResultTable").append("Please enter a SMILES string to predict!");
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
|
||||
makeLoadingGif("#appDomainLoading", "{% static '/images/wait.gif' %}");
|
||||
$.ajax({
|
||||
type: 'get',
|
||||
data: data,
|
||||
url: '',
|
||||
success: function (data, textStatus) {
|
||||
try {
|
||||
$("#appDomainLoading").empty();
|
||||
handleAssessmentResponse("{% url 'depict' %}", data);
|
||||
console.log(data);
|
||||
} catch (error) {
|
||||
$("#appDomainLoading").empty();
|
||||
$("#appDomainAssessmentResultTable").addClass("alert alert-danger");
|
||||
$("#appDomainAssessmentResultTable").append("Error while processing response :/");
|
||||
}
|
||||
},
|
||||
error: function (jqXHR, textStatus, errorThrown) {
|
||||
$("#appDomainLoading").empty();
|
||||
$("#appDomainAssessmentResultTable").addClass("alert alert-danger");
|
||||
$("#appDomainAssessmentResultTable").append(jqXHR.responseJSON.error);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
},
|
||||
error: function (jqXHR, textStatus, errorThrown) {
|
||||
$("#appDomainLoading").empty();
|
||||
$("#appDomainAssessmentResultTable").addClass("alert alert-danger");
|
||||
$("#appDomainAssessmentResultTable").append(
|
||||
jqXHR.responseJSON.error,
|
||||
);
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{% endblock content %}
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<div class="panel-group" id="node-detail">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
|
||||
{{ node.name }}
|
||||
{{ node.name|safe }}
|
||||
<div id="actionsButton"
|
||||
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
|
||||
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
|
||||
@ -39,7 +39,7 @@
|
||||
</div>
|
||||
<div id="node-desc" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{{ node.description }}
|
||||
{{ node.description|safe }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -98,7 +98,7 @@
|
||||
<div id="node-scenario" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for s in node.scenarios.all %}
|
||||
<a class="list-group-item" href="{{ s.url }}">{{ s.name }} <i>({{ s.package.name }})</i></a>
|
||||
<a class="list-group-item" href="{{ s.url }}">{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
<div class="panel-group" id="package-detail">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
|
||||
{{ package.name }}
|
||||
{{ package.name|safe }}
|
||||
<div id="actionsButton"
|
||||
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
|
||||
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
|
||||
|
||||
@ -98,7 +98,7 @@
|
||||
<div class="panel-group" id="pwAccordion">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
|
||||
{{ pathway.name }}
|
||||
{{ pathway.name|safe }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
@ -236,7 +236,7 @@
|
||||
<div id="pathway-scenario" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for s in pathway.scenarios.all %}
|
||||
<a class="list-group-item" href="{{ s.url }}">{{ s.name }} <i>({{ s.package.name }})</i></a>
|
||||
<a class="list-group-item" href="{{ s.url }}">{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
@ -266,7 +266,7 @@
|
||||
<td colspan="2">
|
||||
<li class="list-group-item">
|
||||
<a href="{{ pathway.setting.model.url }}">
|
||||
{{ pathway.setting.model.name }}
|
||||
{{ pathway.setting.model.name|safe }}
|
||||
</a>
|
||||
</li>
|
||||
</td>
|
||||
@ -299,7 +299,7 @@
|
||||
{% for p in pathway.setting.rule_packages.all %}
|
||||
<li class="list-group-item">
|
||||
<a href="{{ p.url }}">
|
||||
{{ p.name }}
|
||||
{{ p.name|safe }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
<div class="panel-group" id="reaction-detail">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
|
||||
{{ reaction.name }}
|
||||
{{ reaction.name|safe }}
|
||||
<div id="actionsButton"
|
||||
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
|
||||
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
|
||||
@ -38,7 +38,7 @@
|
||||
</div>
|
||||
<div id="reaction-desc" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{{ reaction.description }}
|
||||
{{ reaction.description|safe }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -84,12 +84,12 @@
|
||||
<div id="reaction-description-smiles" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for educt in reaction.educts.all %}
|
||||
<a class="btn btn-default" href="{{ educt.url }}">{{ educt.name }}</a>
|
||||
<a class="btn btn-default" href="{{ educt.url }}">{{ educt.name|safe }}</a>
|
||||
{% endfor %}
|
||||
<span class="glyphicon glyphicon-arrow-right" style="margin-left:5em;margin-right:5em;"
|
||||
aria-hidden="true"></span>
|
||||
{% for product in reaction.products.all %}
|
||||
<a class="btn btn-default" href="{{ product.url }}">{{ product.name }}</a>
|
||||
<a class="btn btn-default" href="{{ product.url }}">{{ product.name|safe }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
@ -118,7 +118,7 @@
|
||||
<div id="reaction-rules" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for r in reaction.rules.all %}
|
||||
<a class="list-group-item" href="{{ r.url }}">{{ r.name }}</a>
|
||||
<a class="list-group-item" href="{{ r.url }}">{{ r.name|safe }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
@ -152,7 +152,7 @@
|
||||
<div id="reaction-pathway" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for r in reaction.related_pathways %}
|
||||
<a class="list-group-item" href="{{ r.url }}">{{ r.name }}</a>
|
||||
<a class="list-group-item" href="{{ r.url }}">{{ r.name|safe }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
@ -168,7 +168,7 @@
|
||||
<div id="reaction-scenario" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for s in reaction.scenarios.all %}
|
||||
<a class="list-group-item" href="{{ s.url }}">{{ s.name }} <i>({{ s.package.name }})</i></a>
|
||||
<a class="list-group-item" href="{{ s.url }}">{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<div class="panel-group" id="scenario-detail">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
|
||||
{{ scenario.name }}
|
||||
{{ scenario.name|safe }}
|
||||
<div id="actionsButton"
|
||||
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
|
||||
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
|
||||
@ -30,7 +30,7 @@
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Description</div>
|
||||
<div class="panel-body">
|
||||
{{ scenario.description }}
|
||||
{{ scenario.description|safe }}
|
||||
<br>
|
||||
{{ scenario.scenario_type }}
|
||||
<br>
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
<div class="panel-group" id="rule-detail">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
|
||||
{{ rule.name }}
|
||||
{{ rule.name|safe }}
|
||||
<div id="actionsButton"
|
||||
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
|
||||
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
|
||||
@ -29,7 +29,7 @@
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>
|
||||
{{ rule.description }}
|
||||
{{ rule.description|safe }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -145,7 +145,7 @@
|
||||
<div id="rule-composite-rule" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for cr in rule.parallelrule_set.all %}
|
||||
<a class="list-group-item" href="{{ cr.url }}">{{ cr.name }}</a>
|
||||
<a class="list-group-item" href="{{ cr.url }}">{{ cr.name|safe }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
@ -162,7 +162,7 @@
|
||||
<div id="rule-scenario" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for s in rule.scenarios.all %}
|
||||
<a class="list-group-item" href="{{ s.url }}">{{ s.name }}</a>
|
||||
<a class="list-group-item" href="{{ s.url }}">{{ s.name|safe }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
@ -179,7 +179,7 @@
|
||||
<div id="rule-reaction" class="panel-collapse collapse">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for r in rule.related_reactions %}
|
||||
<a class="list-group-item" href="{{ r.url }}">{{ r.name }}</a>
|
||||
<a class="list-group-item" href="{{ r.url }}">{{ r.name|safe }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
@ -196,7 +196,7 @@
|
||||
<div id="rule-pathway" class="panel-collapse collapse">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for r in rule.related_pathways %}
|
||||
<a class="list-group-item" href="{{ r.url }}">{{ r.name }}</a>
|
||||
<a class="list-group-item" href="{{ r.url }}">{{ r.name|safe }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
<div id="default-package" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
<li class="list-group-item">
|
||||
<a href="{{ user.default_package.url }}"> {{ user.default_package.name }}</a>
|
||||
<a href="{{ user.default_package.url }}"> {{ user.default_package.name|safe }}</a>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
@ -58,7 +58,7 @@
|
||||
<div class="panel-body list-group-item">
|
||||
{% for g in meta.available_groups %}
|
||||
<li class="list-group-item">
|
||||
<a href="{{ g.url }}"> {{ g.name }}</a>
|
||||
<a href="{{ g.url }}"> {{ g.name|safe }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -90,7 +90,7 @@
|
||||
<td colspan="2">
|
||||
<li class="list-group-item">
|
||||
<a href="{{user.default_setting.model.url}}">
|
||||
{{ user.default_setting.model.name }}
|
||||
{{ user.default_setting.model.name|safe }}
|
||||
</a>
|
||||
</li>
|
||||
</td>
|
||||
@ -123,7 +123,7 @@
|
||||
{% for p in user.default_setting.rule_packages.all %}
|
||||
<li class="list-group-item">
|
||||
<a href="{{p.url}}">
|
||||
{{ p.name }}
|
||||
{{ p.name|safe }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<p></p>
|
||||
{{ pathway.name }}
|
||||
{{ pathway.name|safe }}
|
||||
<div id="viz">
|
||||
<svg width="2000" height="2000"> <!-- Sehr großes SVG für Zoom -->
|
||||
<defs>
|
||||
|
||||
@ -11,13 +11,13 @@
|
||||
<option disabled>Reviewed Packages</option>
|
||||
{% endif %}
|
||||
{% for obj in reviewed_objects %}
|
||||
<option value="{{ obj.url }}" selected>{{ obj.name }}</option>
|
||||
<option value="{{ obj.url }}" selected>{{ obj.name|safe }}</option>
|
||||
{% endfor %}
|
||||
{% if unreviewed_objects %}
|
||||
<option disabled>Unreviewed Packages</option>
|
||||
{% endif %}
|
||||
{% for obj in unreviewed_objects %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
132
templates/static/about_us.html
Normal file
132
templates/static/about_us.html
Normal file
@ -0,0 +1,132 @@
|
||||
{% extends "framework_modern.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block main_content %}
|
||||
<div class="max-w-4xl mx-auto px-4 py-8">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="text-sm breadcrumbs mb-4">
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li>About Us</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="bg-base-100 shadow-xl rounded-lg p-8">
|
||||
<h1 class="text-4xl font-bold mb-6">About enviPath</h1>
|
||||
|
||||
<div class="prose max-w-none">
|
||||
<!-- Hero Image/Graphic -->
|
||||
<div class="mb-8">
|
||||
<img src="{% static '/images/ep-rule-artwork.png' %}" alt="enviPath System" class="w-full max-w-2xl mx-auto rounded-lg shadow-md" />
|
||||
</div>
|
||||
|
||||
<p class="text-lg mb-6">
|
||||
enviPath is a comprehensive database and prediction system for the microbial biotransformation of
|
||||
organic environmental contaminants. Since 2015, we have been at the forefront of computational
|
||||
environmental chemistry, helping researchers understand and predict biodegradation pathways.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">Our Mission</h2>
|
||||
<p class="mb-4">
|
||||
Our mission is to advance environmental science through innovative computational tools that predict
|
||||
and analyze the biotransformation of chemical compounds. We strive to provide researchers, regulators,
|
||||
and industry professionals with accurate, accessible tools for understanding environmental fate and behavior.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">What We Offer</h2>
|
||||
<div class="grid md:grid-cols-2 gap-6 mb-6">
|
||||
<div class="card bg-base-200 shadow-md">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-primary">Pathway Database</h3>
|
||||
<p>Access experimentally observed biotransformation pathways and reactions from curated scientific literature.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-base-200 shadow-md">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-primary">Prediction System</h3>
|
||||
<p>Use our relative reasoning models to predict likely biotransformation pathways and products for new compounds.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-base-200 shadow-md">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-primary">Machine Learning Models</h3>
|
||||
<p>Leverage advanced ML algorithms trained on extensive biodegradation data for accurate predictions.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-base-200 shadow-md">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-primary">Community Platform</h3>
|
||||
<p>Join our active community of researchers to share knowledge, discuss findings, and collaborate.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">Our Technology</h2>
|
||||
<p class="mb-4">
|
||||
enviPath employs a unique combination of rule-based and machine learning approaches to predict
|
||||
biotransformation pathways:
|
||||
</p>
|
||||
<ul class="list-disc list-inside mb-4 space-y-2">
|
||||
<li><strong>Relative Reasoning:</strong> Uses structural similarity to known biotransformations</li>
|
||||
<li><strong>Rule-Based Systems:</strong> Applies expert-curated transformation rules</li>
|
||||
<li><strong>Machine Learning:</strong> Leverages neural networks for pattern recognition</li>
|
||||
<li><strong>Hybrid Models:</strong> Combines multiple approaches for optimal accuracy</li>
|
||||
</ul>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">Our Partners</h2>
|
||||
<p class="mb-4">
|
||||
enviPath is backed by leading research institutions and collaborators:
|
||||
</p>
|
||||
<div class="flex flex-wrap justify-center items-center gap-8 my-8">
|
||||
<img src="{% static '/images/uoa-logo-small.png' %}" alt="The University of Auckland" class="h-20 object-contain" />
|
||||
<img src="{% static '/images/logo-eawag.svg' %}" alt="Eawag" class="h-16 object-contain" />
|
||||
<img src="{% static '/images/uzh-logo.svg' %}" alt="University of Zurich" class="h-20 object-contain" />
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">Our Team</h2>
|
||||
<p class="mb-4">
|
||||
enviPath is developed and maintained by a dedicated team of computational chemists, environmental
|
||||
scientists, and software engineers. Our interdisciplinary approach ensures that the platform meets
|
||||
the needs of the scientific community while remaining accessible and user-friendly.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">Research Impact</h2>
|
||||
<p class="mb-4">
|
||||
Since its inception, enviPath has contributed to numerous scientific publications and environmental
|
||||
assessments. Our tools are used by:
|
||||
</p>
|
||||
<ul class="list-disc list-inside mb-4 space-y-2">
|
||||
<li>Academic researchers in environmental chemistry and toxicology</li>
|
||||
<li>Regulatory agencies for chemical risk assessment</li>
|
||||
<li>Chemical manufacturers for product development and safety evaluation</li>
|
||||
<li>Environmental consultants for contamination studies</li>
|
||||
</ul>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">Open Science Commitment</h2>
|
||||
<p class="mb-4">
|
||||
We are committed to open science principles. enviPath provides free access to our database and
|
||||
prediction tools for academic research. We actively contribute to the scientific community through
|
||||
publications, open-source software, and collaboration.
|
||||
</p>
|
||||
|
||||
<div class="card bg-primary text-primary-content mt-8">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Get Involved</h3>
|
||||
<p>Join our community, contribute data, or collaborate on research projects.</p>
|
||||
<div class="card-actions justify-end mt-4">
|
||||
<a href="https://community.envipath.org/" target="_blank" class="btn btn-secondary">Visit Community</a>
|
||||
<a href="/contact" class="btn btn-ghost">Contact Us</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">Publications</h2>
|
||||
<p class="mb-4">
|
||||
To learn more about the science behind enviPath, please visit our
|
||||
<a href="/cite" class="link link-primary">citations page</a> for key publications and how to cite our work.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock main_content %}
|
||||
190
templates/static/careers.html
Normal file
190
templates/static/careers.html
Normal file
@ -0,0 +1,190 @@
|
||||
{% extends "framework_modern.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block main_content %}
|
||||
<div class="max-w-4xl mx-auto px-4 py-8">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="text-sm breadcrumbs mb-4">
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li>Jobs & Careers</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="bg-base-100 shadow-xl rounded-lg p-8">
|
||||
<h1 class="text-4xl font-bold mb-6">Jobs & Careers</h1>
|
||||
|
||||
<div class="prose max-w-none">
|
||||
<p class="text-lg mb-6">
|
||||
Join our team of passionate scientists and developers working at the intersection of environmental
|
||||
chemistry, computational science, and machine learning. Help us build the future of biodegradation prediction.
|
||||
</p>
|
||||
|
||||
<!-- Hero Card -->
|
||||
<div class="card bg-gradient-to-br from-primary to-secondary text-primary-content mb-8">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-2xl">Why Work With Us?</h2>
|
||||
<p>
|
||||
At enviPath, we're committed to advancing environmental science through innovative technology.
|
||||
We offer a collaborative, research-focused environment where your work directly impacts
|
||||
environmental protection and sustainability.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">What We Value</h2>
|
||||
<div class="grid md:grid-cols-2 gap-4 mb-6 not-prose">
|
||||
<div class="flex items-start gap-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary flex-shrink-0 mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="font-semibold">Scientific Excellence</h3>
|
||||
<p class="text-sm">Rigorous research and peer-reviewed contributions</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary flex-shrink-0 mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="font-semibold">Collaboration</h3>
|
||||
<p class="text-sm">Work with leading institutions worldwide</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary flex-shrink-0 mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="font-semibold">Innovation</h3>
|
||||
<p class="text-sm">Push the boundaries of computational chemistry</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary flex-shrink-0 mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="font-semibold">Impact</h3>
|
||||
<p class="text-sm">Contribute to environmental protection</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">Current Opportunities</h2>
|
||||
|
||||
<div class="alert alert-info mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="font-bold">No Current Openings</h3>
|
||||
<div class="text-sm">We don't have any open positions at the moment, but we're always interested in hearing from talented individuals. Please check back later or reach out with your CV.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Example Job Posting Structure (for when there are openings) -->
|
||||
<!--
|
||||
<div class="card bg-base-200 shadow-md mb-4">
|
||||
<div class="card-body">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h3 class="card-title text-xl">Position Title</h3>
|
||||
<div class="flex gap-2 mt-2">
|
||||
<div class="badge badge-primary">Full-time</div>
|
||||
<div class="badge badge-outline">Remote</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-sm text-base-content/70">Posted: Date</div>
|
||||
</div>
|
||||
<p class="mt-4">Brief description of the role...</p>
|
||||
<div class="card-actions justify-end mt-4">
|
||||
<button class="btn btn-primary">Apply Now</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">Types of Roles</h2>
|
||||
<p class="mb-4">We typically hire for the following types of positions:</p>
|
||||
|
||||
<div class="space-y-4 mb-6">
|
||||
<div class="card bg-base-200">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-lg">Computational Chemists</h3>
|
||||
<p>Develop and improve prediction models, curate chemical databases, and validate predictions against experimental data.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-200">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-lg">Machine Learning Engineers</h3>
|
||||
<p>Build and optimize ML models for biotransformation prediction, feature engineering, and model deployment.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-200">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-lg">Software Developers</h3>
|
||||
<p>Develop and maintain the enviPath platform, API, and user interfaces using Python, Django, and modern web technologies.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-200">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-lg">Postdoctoral Researchers</h3>
|
||||
<p>Conduct independent research, publish findings, and contribute to grant proposals in computational environmental chemistry.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">Student Opportunities</h2>
|
||||
<p class="mb-4">
|
||||
We regularly host students for internships, Master's theses, and PhD projects. If you're interested
|
||||
in computational chemistry, machine learning, or environmental science, we'd love to hear from you.
|
||||
</p>
|
||||
|
||||
<div class="card bg-secondary text-secondary-content mb-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Academic Collaborations</h3>
|
||||
<p>
|
||||
We partner with universities including the University of Auckland, Eawag, and University of Zurich.
|
||||
Check with your academic advisor about potential collaboration opportunities.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">How to Apply</h2>
|
||||
<p class="mb-4">
|
||||
Interested in joining our team? Here's how to get in touch:
|
||||
</p>
|
||||
<ol class="list-decimal list-inside mb-6 space-y-2">
|
||||
<li>Review our <a href="/about" class="link link-primary">about page</a> to understand our mission and work</li>
|
||||
<li>Prepare your CV/resume and a brief cover letter explaining your interest</li>
|
||||
<li>Visit our <a href="https://community.envipath.org/" target="_blank" class="link link-primary">community forums</a> or reach out via <a href="https://www.linkedin.com/company/envipath/" target="_blank" class="link link-primary">LinkedIn</a></li>
|
||||
<li>Include links to your publications, GitHub profile, or portfolio if relevant</li>
|
||||
</ol>
|
||||
|
||||
<div class="alert alert-success">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="font-bold">We Value Diversity</h3>
|
||||
<div class="text-sm">enviPath is an equal opportunity employer. We celebrate diversity and are committed to creating an inclusive environment for all team members.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider my-8"></div>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">Contact</h2>
|
||||
<p class="mb-4">
|
||||
Have questions about careers at enviPath? Visit our <a href="/contact" class="link link-primary">contact page</a>
|
||||
or join our <a href="https://community.envipath.org/" target="_blank" class="link link-primary">community forums</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock main_content %}
|
||||
204
templates/static/cite.html
Normal file
204
templates/static/cite.html
Normal file
@ -0,0 +1,204 @@
|
||||
{% extends "framework_modern.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block main_content %}
|
||||
<div class="max-w-4xl mx-auto px-4 py-8">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="text-sm breadcrumbs mb-4">
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li>How to Cite enviPath</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="bg-base-100 shadow-xl rounded-lg p-8">
|
||||
<h1 class="text-4xl font-bold mb-6">How to Cite enviPath</h1>
|
||||
|
||||
<div class="prose max-w-none">
|
||||
<p class="text-lg mb-6">
|
||||
If you use enviPath in your research, please cite our work. Citations help us demonstrate the
|
||||
impact of our platform and support continued development and maintenance.
|
||||
</p>
|
||||
|
||||
<div class="alert alert-info mb-8">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="font-bold">Quick Reference</h3>
|
||||
<div class="text-sm">The citation depends on which specific tools or models you used. Please cite the relevant publications below.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">Main Platform Citation</h2>
|
||||
<p class="mb-4">
|
||||
If you use the enviPath platform in general, please cite:
|
||||
</p>
|
||||
|
||||
<div class="card bg-base-200 mb-6">
|
||||
<div class="card-body">
|
||||
<h3 class="font-semibold mb-2">Advancements in biotransformation pathway prediction: enhancements, datasets, and novel functionalities in enviPath</h3>
|
||||
<p class="text-sm mb-4">
|
||||
<strong>Authors:</strong> Hafner, J., Lorsbach, T., Schmidt, S., Brydon, L., Dost, K., Zhang, K., Fenner, K., and Wicker, J.<br>
|
||||
<strong>Journal:</strong> Journal of Cheminformatics, 16(1), 93<br>
|
||||
<strong>Year:</strong> 2024<br>
|
||||
<strong>DOI:</strong> <a href="https://doi.org/10.1186/s13321-024-00881-6" target="_blank" class="link link-primary">10.1186/s13321-024-00881-6</a>
|
||||
</p>
|
||||
<div class="collapse collapse-arrow bg-base-300">
|
||||
<input type="checkbox" />
|
||||
<div class="collapse-title font-medium text-sm">
|
||||
Show BibTeX
|
||||
</div>
|
||||
<div class="collapse-content">
|
||||
<pre class="text-xs overflow-x-auto"><code>@ARTICLE{Hafner2024,
|
||||
title = "Advancements in biotransformation pathway prediction:
|
||||
enhancements, datasets, and novel functionalities in enviPath",
|
||||
author = "Hafner, Jasmin and Lorsbach, Tim and Schmidt, Sebastian and
|
||||
Brydon, Liam and Dost, Katharina and Zhang, Kunyang and Fenner,
|
||||
Kathrin and Wicker, J{\"o}rg",
|
||||
journal = "J. Cheminform.",
|
||||
publisher = "Springer Science and Business Media LLC",
|
||||
volume = 16,
|
||||
number = 1,
|
||||
pages = "93",
|
||||
month = aug,
|
||||
year = 2024,
|
||||
doi = "10.1186/s13321-024-00881-6"
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">Pathway Prediction System</h2>
|
||||
<p class="mb-4">
|
||||
If you use the pathway prediction functionality, please also cite:
|
||||
</p>
|
||||
|
||||
<div class="card bg-base-200 mb-6">
|
||||
<div class="card-body">
|
||||
<h3 class="font-semibold mb-2">Predicting Biodegradation Pathways Using a Hybrid Relative Reasoning Model</h3>
|
||||
<p class="text-sm mb-4">
|
||||
<strong>Authors:</strong> Wicker, J., Fenner, K., Ellis, L., Kramer, S.<br>
|
||||
<strong>Journal:</strong> Biotechnology and Bioengineering, 110(3), 837-846<br>
|
||||
<strong>Year:</strong> 2013<br>
|
||||
<strong>DOI:</strong> <a href="https://doi.org/10.1002/bit.24744" target="_blank" class="link link-primary">10.1002/bit.24744</a>
|
||||
</p>
|
||||
<div class="collapse collapse-arrow bg-base-300">
|
||||
<input type="checkbox" />
|
||||
<div class="collapse-title font-medium text-sm">
|
||||
Show BibTeX
|
||||
</div>
|
||||
<div class="collapse-content">
|
||||
<pre class="text-xs overflow-x-auto"><code>@article{wicker2013predicting,
|
||||
title={Predicting biodegradation pathways using a hybrid relative reasoning model},
|
||||
author={Wicker, J{\"o}rg and Fenner, Kathrin and Ellis, Lynda and Kramer, Stefan},
|
||||
journal={Biotechnology and Bioengineering},
|
||||
volume={110},
|
||||
number={3},
|
||||
pages={837--846},
|
||||
year={2013},
|
||||
publisher={Wiley Online Library},
|
||||
doi={10.1002/bit.24744}
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">Machine Learning Models</h2>
|
||||
|
||||
<h3 class="text-xl font-semibold mt-6 mb-3">enviPath-Transformer (Latest ML Model)</h3>
|
||||
<div class="card bg-base-200 mb-6">
|
||||
<div class="card-body">
|
||||
<p class="text-sm mb-2">
|
||||
If you use the Transformer-based prediction model, please cite:
|
||||
</p>
|
||||
<p class="text-sm mb-4">
|
||||
<strong>Authors:</strong> Brydon, L., Zhang, K., Dobbie, G., Taškova, K., and Wicker, J.<br>
|
||||
<strong>Journal:</strong> Journal of Cheminformatics, 17(1), 21<br>
|
||||
<strong>Year:</strong> 2025<br>
|
||||
<strong>DOI:</strong> <a href="https://doi.org/10.1186/s13321-025-00969-7" target="_blank" class="link link-primary">10.1186/s13321-025-00969-7</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="text-xl font-semibold mt-6 mb-3">Relative Reasoning Models</h3>
|
||||
<div class="card bg-base-200 mb-6">
|
||||
<div class="card-body">
|
||||
<p class="text-sm mb-2">
|
||||
For relative reasoning and machine learning approaches:
|
||||
</p>
|
||||
<p class="text-sm mb-4">
|
||||
<strong>Authors:</strong> Fenner, K., Gao, J., Kramer, S., Ellis, L., Wackett, L.<br>
|
||||
<strong>Journal:</strong> Environmental Science & Technology, 42(15), 5761-5767<br>
|
||||
<strong>Year:</strong> 2008<br>
|
||||
<strong>DOI:</strong> <a href="https://doi.org/10.1021/es800408g" target="_blank" class="link link-primary">10.1021/es800408g</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">Package-Specific Citations</h2>
|
||||
<p class="mb-4">
|
||||
If you use data from a specific package within enviPath, please also acknowledge the package creators
|
||||
and cite any relevant publications associated with that package. Package-specific citation information
|
||||
is available on each package's detail page.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">Example Acknowledgment Text</h2>
|
||||
<p class="mb-4">
|
||||
You may use the following text in your acknowledgments section:
|
||||
</p>
|
||||
|
||||
<div class="card bg-base-200 mb-6">
|
||||
<div class="card-body">
|
||||
<p class="italic text-sm">
|
||||
"Biotransformation pathway predictions were performed using enviPath
|
||||
(<a href="https://envipath.org" target="_blank" class="link link-primary">https://envipath.org</a>),
|
||||
a database and prediction system for microbial biotransformation of organic environmental contaminants."
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">Additional Resources</h2>
|
||||
<p class="mb-4">
|
||||
For a complete list of publications related to enviPath, please visit:
|
||||
</p>
|
||||
<ul class="list-disc list-inside mb-6 space-y-2">
|
||||
<li>
|
||||
<a href="https://community.envipath.org/" target="_blank" class="link link-primary">
|
||||
enviPath Community - Publications Section
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://wiki.envipath.org/" target="_blank" class="link link-primary">
|
||||
enviPath Documentation - References
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="alert alert-success mt-8">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="font-bold">Thank You!</h3>
|
||||
<div class="text-sm">
|
||||
Thank you for citing enviPath. Your citations help demonstrate the impact of our work and
|
||||
enable us to continue providing this resource to the scientific community.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider my-8"></div>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">Questions?</h2>
|
||||
<p class="mb-4">
|
||||
If you're unsure which papers to cite or have questions about citations, please
|
||||
<a href="/contact" class="link link-primary">contact us</a> or ask on our
|
||||
<a href="https://community.envipath.org/" target="_blank" class="link link-primary">community forums</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock main_content %}
|
||||
169
templates/static/contact.html
Normal file
169
templates/static/contact.html
Normal file
@ -0,0 +1,169 @@
|
||||
{% extends "framework_modern.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block main_content %}
|
||||
<div class="max-w-4xl mx-auto px-4 py-8">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="text-sm breadcrumbs mb-4">
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li>Contact & Support</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="bg-base-100 shadow-xl rounded-lg p-8">
|
||||
<h1 class="text-4xl font-bold mb-6">Contact & Support</h1>
|
||||
|
||||
<div class="prose max-w-none">
|
||||
<p class="text-lg mb-6">
|
||||
We're here to help! Whether you have questions about using enviPath, need technical support,
|
||||
or want to discuss collaboration opportunities, we'd love to hear from you.
|
||||
</p>
|
||||
|
||||
<!-- Contact Methods Grid -->
|
||||
<div class="grid md:grid-cols-2 gap-6 mb-8 not-prose">
|
||||
<!-- Community Support -->
|
||||
<div class="card bg-primary text-primary-content shadow-lg">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z" />
|
||||
</svg>
|
||||
Community Forums
|
||||
</h2>
|
||||
<p>Get help from our active community of users and developers.</p>
|
||||
<div class="card-actions justify-end">
|
||||
<a href="https://community.envipath.org/" target="_blank" class="btn btn-secondary">Visit Forums</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Documentation -->
|
||||
<div class="card bg-secondary text-secondary-content shadow-lg">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
||||
</svg>
|
||||
Documentation
|
||||
</h2>
|
||||
<p>Browse our comprehensive documentation and tutorials.</p>
|
||||
<div class="card-actions justify-end">
|
||||
<a href="https://wiki.envipath.org/" target="_blank" class="btn btn-accent">Read Docs</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">Get Support</h2>
|
||||
<p class="mb-4">
|
||||
For the fastest response, we recommend using our community forums where you can:
|
||||
</p>
|
||||
<ul class="list-disc list-inside mb-6 space-y-2">
|
||||
<li>Ask questions and get answers from the community</li>
|
||||
<li>Report bugs or technical issues</li>
|
||||
<li>Request new features</li>
|
||||
<li>Share your research and findings</li>
|
||||
<li>Find tutorials and how-to guides</li>
|
||||
</ul>
|
||||
|
||||
<div class="alert alert-info mb-8">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="font-bold">Before Contacting Support</h3>
|
||||
<div class="text-sm">Please check our documentation and search the community forums for existing answers.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">Business & Collaboration Inquiries</h2>
|
||||
<p class="mb-4">
|
||||
For business inquiries, partnership opportunities, or custom development requests, please reach out
|
||||
through our community platform or LinkedIn.
|
||||
</p>
|
||||
|
||||
<div class="card bg-base-200 mb-8">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">enviPath Ltd.</h3>
|
||||
<p>Biodegradation prediction since 2015</p>
|
||||
<div class="flex gap-4 mt-4">
|
||||
<a href="https://www.linkedin.com/company/envipath/" target="_blank" class="btn btn-outline btn-sm">
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 fill-current mr-2">
|
||||
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
||||
</svg>
|
||||
LinkedIn
|
||||
</a>
|
||||
<a href="https://www.youtube.com/@envipath7231" target="_blank" class="btn btn-outline btn-sm">
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 fill-current mr-2">
|
||||
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814z"/>
|
||||
</svg>
|
||||
YouTube
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">Report Security Issues</h2>
|
||||
<p class="mb-4">
|
||||
If you discover a security vulnerability, please report it responsibly. Do not post security issues
|
||||
publicly. Instead, please contact us directly through the community forums using a private message
|
||||
to the administrators.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">Media & Press</h2>
|
||||
<p class="mb-4">
|
||||
For media inquiries, press releases, or interview requests, please reach out through our
|
||||
community platform or LinkedIn.
|
||||
</p>
|
||||
|
||||
<div class="divider my-8"></div>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">Frequently Asked Questions</h2>
|
||||
|
||||
<div class="join join-vertical w-full">
|
||||
<div class="collapse collapse-arrow join-item border border-base-300">
|
||||
<input type="radio" name="faq-accordion" />
|
||||
<div class="collapse-title text-lg font-medium">
|
||||
How do I get started with enviPath?
|
||||
</div>
|
||||
<div class="collapse-content">
|
||||
<p>Simply visit our homepage and try the prediction tool! For full access to all features, create a free account. Check out our <a href="https://wiki.envipath.org/" target="_blank" class="link link-primary">documentation</a> for detailed guides.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="collapse collapse-arrow join-item border border-base-300">
|
||||
<input type="radio" name="faq-accordion" />
|
||||
<div class="collapse-title text-lg font-medium">
|
||||
Is enviPath free to use?
|
||||
</div>
|
||||
<div class="collapse-content">
|
||||
<p>Yes! enviPath is free for academic research and educational purposes. For commercial use or custom solutions, please contact us for licensing options.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="collapse collapse-arrow join-item border border-base-300">
|
||||
<input type="radio" name="faq-accordion" />
|
||||
<div class="collapse-title text-lg font-medium">
|
||||
How do I cite enviPath in my research?
|
||||
</div>
|
||||
<div class="collapse-content">
|
||||
<p>Please visit our <a href="/cite" class="link link-primary">citation page</a> for detailed information on how to properly cite enviPath in your publications.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="collapse collapse-arrow join-item border border-base-300">
|
||||
<input type="radio" name="faq-accordion" />
|
||||
<div class="collapse-title text-lg font-medium">
|
||||
Can I contribute data to enviPath?
|
||||
</div>
|
||||
<div class="collapse-content">
|
||||
<p>Yes! We welcome contributions from the scientific community. Please visit our <a href="https://community.envipath.org/" target="_blank" class="link link-primary">community forums</a> to learn about the contribution process.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock main_content %}
|
||||
145
templates/static/cookie_policy.html
Normal file
145
templates/static/cookie_policy.html
Normal file
@ -0,0 +1,145 @@
|
||||
{% extends "framework_modern.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block main_content %}
|
||||
<div class="max-w-4xl mx-auto px-4 py-8">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="text-sm breadcrumbs mb-4">
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li>Cookie Policy</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="bg-base-100 shadow-xl rounded-lg p-8">
|
||||
<h1 class="text-4xl font-bold mb-6">Cookie Policy</h1>
|
||||
|
||||
<div class="prose max-w-none">
|
||||
<p class="text-lg mb-6">
|
||||
This Cookie Policy explains how enviPath uses cookies and similar technologies to recognize you when
|
||||
you visit our platform. It explains what these technologies are and why we use them.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">1. What Are Cookies?</h2>
|
||||
<p class="mb-4">
|
||||
Cookies are small data files that are placed on your computer or mobile device when you visit a website.
|
||||
Cookies are widely used by website owners to make their websites work, or to work more efficiently, as
|
||||
well as to provide reporting information.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">2. Why We Use Cookies</h2>
|
||||
<p class="mb-4">We use cookies for several reasons:</p>
|
||||
<ul class="list-disc list-inside mb-4 space-y-2">
|
||||
<li><strong>Essential Cookies:</strong> Required for the platform to function properly</li>
|
||||
<li><strong>Analytics Cookies:</strong> Help us understand how visitors interact with our platform</li>
|
||||
<li><strong>Functional Cookies:</strong> Enable enhanced functionality and personalization</li>
|
||||
<li><strong>Security Cookies:</strong> Authenticate users and prevent fraudulent use</li>
|
||||
</ul>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">3. Types of Cookies We Use</h2>
|
||||
|
||||
<div class="overflow-x-auto mb-6">
|
||||
<table class="table table-zebra w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Cookie Type</th>
|
||||
<th>Purpose</th>
|
||||
<th>Duration</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Session Cookies</strong></td>
|
||||
<td>Maintain your login state and session data</td>
|
||||
<td>Session</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>CSRF Token</strong></td>
|
||||
<td>Security protection against cross-site request forgery</td>
|
||||
<td>Session</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Matomo Analytics</strong></td>
|
||||
<td>Track usage patterns and improve our services</td>
|
||||
<td>13 months</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>OAuth Tokens</strong></td>
|
||||
<td>Authentication and authorization for API access</td>
|
||||
<td>Varies</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">4. Matomo Analytics</h2>
|
||||
<p class="mb-4">
|
||||
We use Matomo, an open-source web analytics platform, to collect information about how visitors use enviPath.
|
||||
Matomo uses cookies to collect standard internet log information and visitor behavior patterns. The information
|
||||
generated by cookies about your use of the platform is transmitted to our servers.
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
We analyze this information to:
|
||||
</p>
|
||||
<ul class="list-disc list-inside mb-4 space-y-2">
|
||||
<li>Understand how users interact with our platform</li>
|
||||
<li>Identify popular features and areas for improvement</li>
|
||||
<li>Detect and diagnose technical issues</li>
|
||||
<li>Generate reports on platform usage</li>
|
||||
</ul>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">5. Third-Party Cookies</h2>
|
||||
<p class="mb-4">
|
||||
In addition to our own cookies, we may use various third-party cookies to report usage statistics and
|
||||
provide integrated services:
|
||||
</p>
|
||||
<ul class="list-disc list-inside mb-4 space-y-2">
|
||||
<li><strong>Discourse Community:</strong> For our community forums at community.envipath.org</li>
|
||||
<li><strong>External CDNs:</strong> For loading libraries like jQuery and Font Awesome</li>
|
||||
</ul>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">6. Managing Cookies</h2>
|
||||
<p class="mb-4">
|
||||
Most web browsers allow you to control cookies through their settings. However, if you limit the ability
|
||||
of websites to set cookies, you may worsen your overall user experience, as some features may not function
|
||||
properly.
|
||||
</p>
|
||||
|
||||
<div class="alert alert-warning mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
<span><strong>Note:</strong> Disabling essential cookies will prevent you from using certain features of enviPath.</span>
|
||||
</div>
|
||||
|
||||
<h3 class="text-xl font-semibold mt-6 mb-3">Browser Settings</h3>
|
||||
<p class="mb-4">You can manage cookies in your browser settings:</p>
|
||||
<ul class="list-disc list-inside mb-4 space-y-2">
|
||||
<li><strong>Chrome:</strong> Settings → Privacy and security → Cookies and other site data</li>
|
||||
<li><strong>Firefox:</strong> Options → Privacy & Security → Cookies and Site Data</li>
|
||||
<li><strong>Safari:</strong> Preferences → Privacy → Cookies and website data</li>
|
||||
<li><strong>Edge:</strong> Settings → Cookies and site permissions → Cookies and site data</li>
|
||||
</ul>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">7. Updates to This Policy</h2>
|
||||
<p class="mb-4">
|
||||
We may update this Cookie Policy from time to time to reflect changes in technology, legislation, or our
|
||||
operations. Please check this page regularly for updates.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">8. Contact Us</h2>
|
||||
<p class="mb-4">
|
||||
If you have questions about our use of cookies, please <a href="/contact" class="link link-primary">contact us</a>.
|
||||
</p>
|
||||
|
||||
<div class="alert alert-info mt-8">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<span>Last updated: 2025</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock main_content %}
|
||||
139
templates/static/legal.html
Normal file
139
templates/static/legal.html
Normal file
@ -0,0 +1,139 @@
|
||||
{% extends "framework_modern.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block main_content %}
|
||||
<div class="max-w-4xl mx-auto px-4 py-8">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="text-sm breadcrumbs mb-4">
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li>Legal</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="bg-base-100 shadow-xl rounded-lg p-8">
|
||||
<h1 class="text-4xl font-bold mb-6">Legal Information</h1>
|
||||
|
||||
<div class="prose max-w-none">
|
||||
<p class="text-lg mb-6">
|
||||
Welcome to enviPath's legal information center. Here you can find all our legal documents,
|
||||
policies, and terms that govern the use of our platform.
|
||||
</p>
|
||||
|
||||
<!-- Legal Documents Grid -->
|
||||
<div class="grid md:grid-cols-2 gap-6 mb-8">
|
||||
<!-- Terms of Use -->
|
||||
<div class="card bg-base-200 shadow-md">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-primary">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
Terms of Use
|
||||
</h3>
|
||||
<p class="text-sm mb-4">
|
||||
Our terms and conditions that govern the use of enviPath services, including
|
||||
licensing, user responsibilities, and platform usage guidelines.
|
||||
</p>
|
||||
<div class="card-actions justify-end">
|
||||
<a href="/terms" class="btn btn-primary btn-sm">Read Terms</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Privacy Policy -->
|
||||
<div class="card bg-base-200 shadow-md">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-primary">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
Privacy Policy
|
||||
</h3>
|
||||
<p class="text-sm mb-4">
|
||||
How we collect, use, and protect your personal information when you use
|
||||
enviPath, including data handling practices and your privacy rights.
|
||||
</p>
|
||||
<div class="card-actions justify-end">
|
||||
<a href="/privacy" class="btn btn-primary btn-sm">Read Policy</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cookie Policy -->
|
||||
<div class="card bg-base-200 shadow-md">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-primary">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
Cookie Policy
|
||||
</h3>
|
||||
<p class="text-sm mb-4">
|
||||
Information about the cookies and tracking technologies we use on enviPath,
|
||||
including analytics and essential functionality cookies.
|
||||
</p>
|
||||
<div class="card-actions justify-end">
|
||||
<a href="/cookie-policy" class="btn btn-primary btn-sm">Read Policy</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Citation Guidelines -->
|
||||
<div class="card bg-base-200 shadow-md">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-primary">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
Citation Guidelines
|
||||
</h3>
|
||||
<p class="text-sm mb-4">
|
||||
How to properly cite enviPath in your research publications and academic work,
|
||||
including recommended citation formats and acknowledgments.
|
||||
</p>
|
||||
<div class="card-actions justify-end">
|
||||
<a href="/cite" class="btn btn-primary btn-sm">View Guidelines</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Access Section -->
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">Quick Access</h2>
|
||||
<div class="grid md:grid-cols-3 gap-4 mb-6">
|
||||
<a href="/terms" class="btn btn-outline btn-sm w-full">Terms of Use</a>
|
||||
<a href="/privacy" class="btn btn-outline btn-sm w-full">Privacy Policy</a>
|
||||
<a href="/cookie-policy" class="btn btn-outline btn-sm w-full">Cookie Policy</a>
|
||||
</div>
|
||||
|
||||
<!-- Important Information -->
|
||||
<div class="alert alert-info mt-8">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="font-bold">Important Notice</h3>
|
||||
<p class="text-sm">
|
||||
By using enviPath, you agree to be bound by our Terms of Use and Privacy Policy.
|
||||
We recommend reviewing these documents regularly as they may be updated from time to time.
|
||||
For questions about our legal policies, please <a href="/contact" class="link link-primary">contact us</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Information -->
|
||||
<div class="card bg-primary text-primary-content mt-8">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Questions About Our Legal Policies?</h3>
|
||||
<p>If you have any questions or concerns about our legal documents, please don't hesitate to reach out to us.</p>
|
||||
<div class="card-actions justify-end mt-4">
|
||||
<a href="/contact" class="btn btn-secondary">Contact Us</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock main_content %}
|
||||
@ -1,59 +1,236 @@
|
||||
{% extends "static/static_base.html" %}
|
||||
{% extends "static/login_base.html" %}
|
||||
|
||||
{% block title %}enviPath - Sign In{% endblock %}
|
||||
|
||||
{% block extra_styles %}
|
||||
/* Tab styling */ .tab-content { display: none; } .tab-content.active {
|
||||
display: block; } input[type="radio"].tab-radio { display: none; } .tab-label
|
||||
{ cursor: pointer; padding: 0.75rem 1.5rem; border-bottom: 2px solid
|
||||
transparent; transition: all 0.3s ease; } .tab-label:hover { background-color:
|
||||
rgba(0, 0, 0, 0.05); } input[type="radio"].tab-radio:checked + .tab-label {
|
||||
border-bottom-color: #3b82f6; font-weight: 600; }
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% if message %}
|
||||
<div class="alert alert-danger" role="alert">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% elif success_message %}
|
||||
<div class="alert alert-success" role="alert">
|
||||
{{ success_message }}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="alert alert-success" role="alert">
|
||||
Kia ora! We are running our closed beta tests at the moment. It would be great to get your help as tester,
|
||||
you
|
||||
can apply to become tester by registering for this page, just hit the button below. More information on the
|
||||
beta
|
||||
test is available in our <a href="https://community.envipath.org/t/apply-to-join-our-closed-beta/95">
|
||||
community
|
||||
form</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="modal-dialog" style="margin:30px auto; z-index:9999;">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<form class="form-horizontal" method="post" action="{% url 'login' %}">
|
||||
{% csrf_token %}
|
||||
<fieldset>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="username">Username</label>
|
||||
<div class="controls">
|
||||
<input required id="username" name="username" type="text"
|
||||
class="form-control" placeholder="username" autocomplete="username">
|
||||
</div>
|
||||
<label class="control-label" for="passwordinput">Password:</label>
|
||||
<div class="controls">
|
||||
<input required id="passwordinput" name="password" class="form-control"
|
||||
type="password" placeholder="********" autocomplete="current-password">
|
||||
</div>
|
||||
<div class="form-group text-center" style="margin-top:15px;">
|
||||
<a href="{% url 'password_reset' %}">Forgot your password?</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tab Navigation -->
|
||||
<div class="border-b border-base-300 mb-6">
|
||||
<div class="flex justify-start">
|
||||
<input
|
||||
type="radio"
|
||||
name="auth-tab"
|
||||
id="tab-signin"
|
||||
class="tab-radio"
|
||||
checked
|
||||
/>
|
||||
<label for="tab-signin" class="tab-label">Sign In</label>
|
||||
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="signin"></label>
|
||||
<div class="controls">
|
||||
<button id="signin" name="signin" class="btn btn-success pull-right">Sign In
|
||||
</button>
|
||||
<a class="btn btn-primary" href="{% url 'register' %}">Create an Account</a>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" name="next" value="{{ next }}"/>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<input type="radio" name="auth-tab" id="tab-signup" class="tab-radio" />
|
||||
<label for="tab-signup" class="tab-label">Register</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sign In Tab -->
|
||||
<div id="content-signin" class="tab-content active">
|
||||
<form method="post" action="{% url 'login' %}" class="space-y-4">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="login" value="true" />
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="username">
|
||||
<span class="label-text">Username</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
name="username"
|
||||
placeholder="username"
|
||||
class="input input-bordered w-full"
|
||||
required
|
||||
autocomplete="username"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="passwordinput">
|
||||
<span class="label-text">Password</span>
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="passwordinput"
|
||||
name="password"
|
||||
placeholder="••••••••"
|
||||
class="input input-bordered w-full"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="text-right">
|
||||
<a href="{% url 'password_reset' %}" class="link link-primary text-sm"
|
||||
>Forgot password?</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="next" value="{{ next }}" />
|
||||
|
||||
<button type="submit" name="signin" class="btn btn-primary w-full">
|
||||
Sign In
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Register Tab -->
|
||||
<div id="content-signup" class="tab-content">
|
||||
<div class="alert alert-info mb-4 text-sm">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
class="h-6 w-6 shrink-0 stroke-current"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
></path>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="font-bold">Password Requirements</div>
|
||||
<div class="text-xs mt-1">
|
||||
• 8 to 30 characters<br />
|
||||
• Upper and lower case letters<br />
|
||||
• Digits and special characters (_, -, +)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form method="post" action="{% url 'register' %}" class="space-y-4">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="register" value="true" />
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="userid">
|
||||
<span class="label-text">Username</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="userid"
|
||||
name="username"
|
||||
placeholder="username"
|
||||
class="input input-bordered w-full"
|
||||
required
|
||||
autocomplete="username"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="email">
|
||||
<span class="label-text">Email</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="user@envipath.org"
|
||||
class="input input-bordered w-full"
|
||||
required
|
||||
autocomplete="email"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="password">
|
||||
<span class="label-text">Password</span>
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
placeholder="••••••••"
|
||||
class="input input-bordered w-full"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="rpassword">
|
||||
<span class="label-text">Repeat Password</span>
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="rpassword"
|
||||
name="rpassword"
|
||||
placeholder="••••••••"
|
||||
class="input input-bordered w-full"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="next" value="{{ next }}" />
|
||||
|
||||
<button type="submit" name="confirmsignup" class="btn btn-success w-full">
|
||||
Sign Up
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Why Register Section -->
|
||||
<div class="mt-6 p-4 bg-base-200 rounded-lg">
|
||||
<h3 class="font-semibold mb-2">Why register?</h3>
|
||||
<p class="text-sm mb-2">
|
||||
enviPath is free for academic research and educational purposes.
|
||||
However, we require registration to ensure the security of the platform
|
||||
and to prevent abuse.
|
||||
</p>
|
||||
<p class="text-sm mt-3">
|
||||
Questions? Check our
|
||||
<a
|
||||
href="https://wiki.envipath.org/"
|
||||
target="_blank"
|
||||
class="link link-primary"
|
||||
>documentation</a
|
||||
>
|
||||
or the
|
||||
<a
|
||||
href="https://community.envipath.org/"
|
||||
target="_blank"
|
||||
class="link link-primary"
|
||||
>community forums</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script>
|
||||
// Tab switching functionality
|
||||
document.querySelectorAll('input[name="auth-tab"]').forEach((radio) => {
|
||||
radio.addEventListener("change", function () {
|
||||
// Hide all content
|
||||
document.querySelectorAll(".tab-content").forEach((content) => {
|
||||
content.classList.remove("active");
|
||||
});
|
||||
|
||||
// Show selected content
|
||||
const contentId = "content-" + this.id.replace("tab-", "");
|
||||
document.getElementById(contentId).classList.add("active");
|
||||
});
|
||||
});
|
||||
|
||||
// Check for hash in URL to auto-select tab
|
||||
window.addEventListener("DOMContentLoaded", function () {
|
||||
const hash = window.location.hash.substring(1); // Remove the # symbol
|
||||
if (hash === "signup" || hash === "signin") {
|
||||
const tabRadio = document.getElementById("tab-" + hash);
|
||||
if (tabRadio) {
|
||||
tabRadio.checked = true;
|
||||
// Trigger change event to show correct content
|
||||
tabRadio.dispatchEvent(new Event("change"));
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
83
templates/static/login_base.html
Normal file
83
templates/static/login_base.html
Normal file
@ -0,0 +1,83 @@
|
||||
{% load static %}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="envipath">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{% block title %}enviPath{% endblock %}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="shortcut icon" type="image/png" href="{% static 'images/favicon.ico' %}"/>
|
||||
|
||||
<!-- Tailwind CSS Output -->
|
||||
<link href="{% static 'css/output.css' %}" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<style>
|
||||
{% block extra_styles %}{% endblock %}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-base-100">
|
||||
<div class="flex h-screen">
|
||||
<!-- Left side - Hero Image -->
|
||||
<div class="hidden lg:flex lg:w-1/2 bg-cover bg-center bg-no-repeat items-center justify-center p-12"
|
||||
style="background-image: linear-gradient(135deg, color-mix(in oklab, var(--color-primary) 30%, transparent) 0%, color-mix(in oklab, var(--color-primary-600) 40%, transparent) 100%), url('{% static "/images/hero.png" %}');">
|
||||
<div class="text-left text-white space-y-6">
|
||||
<svg class="h-16 w-auto fill-white" viewBox="0 0 104 26" role="img">
|
||||
<use href='{% static "/images/logo-name.svg" %}#ep-logo-name' />
|
||||
</svg>
|
||||
<p class="text-lg max-w-md mx-auto">
|
||||
Predict and explore microbial biotransformation pathways for environmental contaminants
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right side - Content -->
|
||||
<div class="w-full lg:w-1/2 flex flex-col items-center justify-center p-8 overflow-y-auto">
|
||||
<div class="w-full max-w-md flex-1 flex flex-col justify-center">
|
||||
<!-- Logo for mobile -->
|
||||
<div class="lg:hidden text-center mb-8">
|
||||
<svg class="h-12 w-auto mx-auto fill-current" viewBox="0 0 104 26" role="img">
|
||||
<use href='{% static "/images/logo-name.svg" %}#ep-logo-name' />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Messages -->
|
||||
{% if message %}
|
||||
<div class="alert alert-error mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>{{ message }}</span>
|
||||
</div>
|
||||
{% elif success_message %}
|
||||
<div class="alert alert-success mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>{{ success_message }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% block content %}{% endblock %}
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Footer with legal links - positioned at bottom of right column -->
|
||||
<div class="w-full mt-auto pt-4">
|
||||
<div class="flex justify-center items-center space-x-6 text-sm text-base-content/50">
|
||||
<a href="/legal" class="link link-hover">Legal</a>
|
||||
<span class="text-base-content/30">•</span>
|
||||
<a href="/terms" class="link link-hover">Terms of Use</a>
|
||||
<span class="text-base-content/30">•</span>
|
||||
<a href="/privacy" class="link link-hover">Privacy Policy</a>
|
||||
<span class="text-base-content/30">•</span>
|
||||
<a href="/cookie-policy" class="link link-hover">Cookie Policy</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{% block extra_scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
@ -1,5 +1,30 @@
|
||||
{% extends "static/static_base.html" %}
|
||||
{% extends "static/login_base.html" %}
|
||||
|
||||
{% block title %}enviPath - Password Reset Complete{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<p>Your password has been reset successfully. <a href="{% url 'login' %}">Login</a></p>
|
||||
<!-- Success Icon -->
|
||||
<div class="flex justify-center mb-6">
|
||||
<div class="rounded-full bg-success/20 p-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 stroke-success" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<div class="text-center mb-8">
|
||||
<h2 class="text-3xl font-bold mb-4">Password Reset Complete!</h2>
|
||||
<p class="text-base-content/70 mb-4">
|
||||
Your password has been successfully reset.
|
||||
</p>
|
||||
<p class="text-sm text-base-content/60">
|
||||
You can now sign in with your new password.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="space-y-4">
|
||||
<a href="{% url 'login' %}" class="btn btn-primary w-full">Sign In</a>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@ -1,31 +1,94 @@
|
||||
{% extends "static/static_base.html" %}
|
||||
{% extends "static/login_base.html" %}
|
||||
|
||||
{% block title %}enviPath - Set New Password{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="modal-dialog" style="margin:30px auto; z-index:9999;">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<h2>Enter new password</h2>
|
||||
<form method="post">
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="id_new_password1">New password:</label>
|
||||
<input type="password" class="form-control" name="new_password1" autocomplete="new-password"
|
||||
required=""
|
||||
aria-describedby="id_new_password1_helptext" id="id_new_password1">
|
||||
<span class="helptext" id="id_new_password1_helptext"></span></p>
|
||||
<!-- Title -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-3xl font-bold mb-2">Set New Password</h2>
|
||||
<p class="text-base-content/70">Please enter your new password below.</p>
|
||||
</div>
|
||||
|
||||
{{ form.new_password1.help_text|safe }}
|
||||
|
||||
<p>
|
||||
<label for="id_new_password2">New password confirmation:</label>
|
||||
<input type="password" class="form-control" name="new_password2" autocomplete="new-password"
|
||||
required=""
|
||||
aria-describedby="id_new_password2_helptext" id="id_new_password2">
|
||||
{{ form.new_password2.help_text|safe }}
|
||||
</p>
|
||||
<button class="btn btn-primary" type="submit">Reset Password</button>
|
||||
</form>
|
||||
<!-- Messages -->
|
||||
{% if validlink %}
|
||||
<!-- Password Requirements Info -->
|
||||
<div class="alert alert-info mb-4 text-sm">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-6 w-6 shrink-0 stroke-current">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="font-bold">Password Requirements</div>
|
||||
<div class="text-xs mt-1">
|
||||
• 8 to 30 characters<br>
|
||||
• Upper and lower case letters<br>
|
||||
• Digits and special characters (_, -, +)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
<!-- Reset Password Form -->
|
||||
<form method="post" class="space-y-4">
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="id_new_password1">
|
||||
<span class="label-text">New Password</span>
|
||||
</label>
|
||||
<input type="password" id="id_new_password1" name="new_password1" placeholder="••••••••"
|
||||
class="input input-bordered w-full" required autocomplete="new-password">
|
||||
{% if form.new_password1.help_text %}
|
||||
<label class="label">
|
||||
<span class="label-text-alt text-base-content/60">{{ form.new_password1.help_text }}</span>
|
||||
</label>
|
||||
{% endif %}
|
||||
{% if form.new_password1.errors %}
|
||||
<label class="label">
|
||||
<span class="label-text-alt text-error">{{ form.new_password1.errors|join:", " }}</span>
|
||||
</label>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="id_new_password2">
|
||||
<span class="label-text">Confirm New Password</span>
|
||||
</label>
|
||||
<input type="password" id="id_new_password2" name="new_password2" placeholder="••••••••"
|
||||
class="input input-bordered w-full" required autocomplete="new-password">
|
||||
{% if form.new_password2.help_text %}
|
||||
<label class="label">
|
||||
<span class="label-text-alt text-base-content/60">{{ form.new_password2.help_text }}</span>
|
||||
</label>
|
||||
{% endif %}
|
||||
{% if form.new_password2.errors %}
|
||||
<label class="label">
|
||||
<span class="label-text-alt text-error">{{ form.new_password2.errors|join:", " }}</span>
|
||||
</label>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary w-full">Reset Password</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<!-- Invalid Link -->
|
||||
<div class="alert alert-error mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<div>
|
||||
<div class="font-bold">Invalid Reset Link</div>
|
||||
<div class="text-sm">This password reset link is invalid or has expired.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<a href="{% url 'password_reset' %}" class="btn btn-primary w-full">Request New Reset Link</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Back to Sign In -->
|
||||
<div class="mt-6 text-center text-sm text-base-content/70">
|
||||
<p>Remember your password?
|
||||
<a href="{% url 'login' %}" class="link link-primary">Sign in</a>
|
||||
</p>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@ -1,7 +1,30 @@
|
||||
{% extends "static/static_base.html" %}
|
||||
{% extends "static/login_base.html" %}
|
||||
|
||||
{% block title %}enviPath - Reset Email Sent{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="alert alert-success" role="alert">
|
||||
An email has been sent with instructions to reset your password.
|
||||
<!-- Success Icon -->
|
||||
<div class="flex justify-center mb-6">
|
||||
<div class="rounded-full bg-success/20 p-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 stroke-success" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 19v-8.93a2 2 0 01.89-1.664l7-4.666a2 2 0 012.22 0l7 4.666A2 2 0 0121 10.07V19M3 19a2 2 0 002 2h14a2 2 0 002-2M3 19l6.75-4.5M21 19l-6.75-4.5M3 10l6.75 4.5M21 10l-6.75 4.5m0 0l-1.14.76a2 2 0 01-2.22 0l-1.14-.76" />
|
||||
</svg>
|
||||
</div>
|
||||
{% endblock %}
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<div class="text-center mb-8">
|
||||
<h2 class="text-3xl font-bold mb-4">Check Your Email</h2>
|
||||
<p class="text-base-content/70 mb-4">
|
||||
We've sent an email with instructions to reset your password.
|
||||
</p>
|
||||
<p class="text-sm text-base-content/60">
|
||||
If you don't see it in your inbox, please check your spam folder.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="space-y-4">
|
||||
<a href="{% url 'login' %}" class="btn btn-primary w-full">Back to Sign In</a>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@ -1,23 +1,33 @@
|
||||
{% extends "static/static_base.html" %}
|
||||
{% extends "static/login_base.html" %}
|
||||
|
||||
{% block title %}enviPath - Reset Password{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="modal-dialog" style="margin:30px auto; z-index:9999;">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<form method="post">
|
||||
{% csrf_token %}
|
||||
<label class="control-label" for="username">Email:</label>
|
||||
<input type="email" name="email" class="form-control" maxlength="254"
|
||||
required="" id="id_email">
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="signin"></label>
|
||||
<div class="controls">
|
||||
<button id="signin" name="signin" type="submit" class="btn btn-success">Send
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-3xl font-bold mb-2">Reset Password</h2>
|
||||
<p class="text-base-content/70">Enter your email address and we'll send you a link to reset your password.</p>
|
||||
</div>
|
||||
|
||||
<!-- Reset Password Form -->
|
||||
<form method="post" class="space-y-4">
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="id_email">
|
||||
<span class="label-text">Email</span>
|
||||
</label>
|
||||
<input type="email" id="id_email" name="email" placeholder="user@envipath.org"
|
||||
class="input input-bordered w-full" required autocomplete="email">
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary w-full">Send Reset Link</button>
|
||||
</form>
|
||||
|
||||
<!-- Back to Sign In -->
|
||||
<div class="mt-6 text-center text-sm text-base-content/70">
|
||||
<p>Remember your password?
|
||||
<a href="{% url 'login' %}" class="link link-primary">Sign in</a>
|
||||
</p>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
138
templates/static/privacy_policy.html
Normal file
138
templates/static/privacy_policy.html
Normal file
@ -0,0 +1,138 @@
|
||||
{% extends "framework_modern.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block main_content %}
|
||||
<div class="max-w-4xl mx-auto px-4 py-8">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="text-sm breadcrumbs mb-4">
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li>Privacy Policy</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="bg-base-100 shadow-xl rounded-lg p-8">
|
||||
<h1 class="text-4xl font-bold mb-6">Privacy Policy</h1>
|
||||
|
||||
<div class="prose max-w-none">
|
||||
<p class="text-lg mb-6">
|
||||
enviPath is committed to protecting your privacy. This Privacy Policy explains how we collect, use,
|
||||
disclose, and safeguard your information when you use our platform.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">1. Information We Collect</h2>
|
||||
|
||||
<h3 class="text-xl font-semibold mt-6 mb-3">Personal Information</h3>
|
||||
<p class="mb-4">
|
||||
We may collect personal information that you voluntarily provide when you:
|
||||
</p>
|
||||
<ul class="list-disc list-inside mb-4 space-y-2">
|
||||
<li>Register for an account</li>
|
||||
<li>Use our prediction services</li>
|
||||
<li>Submit data or pathways</li>
|
||||
<li>Contact our support team</li>
|
||||
<li>Participate in our community forums</li>
|
||||
</ul>
|
||||
<p class="mb-4">
|
||||
This information may include: name, email address, institution affiliation, and research interests.
|
||||
</p>
|
||||
|
||||
<h3 class="text-xl font-semibold mt-6 mb-3">Usage Data</h3>
|
||||
<p class="mb-4">
|
||||
We automatically collect certain information when you visit, use, or navigate the platform. This includes:
|
||||
</p>
|
||||
<ul class="list-disc list-inside mb-4 space-y-2">
|
||||
<li>IP address and browser type</li>
|
||||
<li>Pages visited and time spent</li>
|
||||
<li>Referring/exit pages</li>
|
||||
<li>Prediction queries and results</li>
|
||||
<li>Operating system and device information</li>
|
||||
</ul>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">2. How We Use Your Information</h2>
|
||||
<p class="mb-4">We use the information we collect to:</p>
|
||||
<ul class="list-disc list-inside mb-4 space-y-2">
|
||||
<li>Provide, operate, and maintain our services</li>
|
||||
<li>Improve and personalize user experience</li>
|
||||
<li>Understand and analyze usage patterns</li>
|
||||
<li>Develop new features and services</li>
|
||||
<li>Communicate with you about updates and support</li>
|
||||
<li>Prevent fraudulent activities and ensure security</li>
|
||||
<li>Conduct research and analysis for scientific advancement</li>
|
||||
</ul>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">3. Data Sharing and Disclosure</h2>
|
||||
<p class="mb-4">
|
||||
We do not sell your personal information. We may share your information in the following situations:
|
||||
</p>
|
||||
<ul class="list-disc list-inside mb-4 space-y-2">
|
||||
<li><strong>Academic Research:</strong> Anonymized usage data may be used for research purposes</li>
|
||||
<li><strong>Legal Requirements:</strong> When required by law or to protect our rights</li>
|
||||
<li><strong>Service Providers:</strong> With trusted third parties who assist in operating our platform</li>
|
||||
<li><strong>Public Data:</strong> Data you explicitly mark as public will be accessible to other users</li>
|
||||
</ul>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">4. Data Retention</h2>
|
||||
<p class="mb-4">
|
||||
We retain your personal information for as long as necessary to provide our services and fulfill the
|
||||
purposes outlined in this policy. You may request deletion of your account and associated data at any time.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">5. Analytics and Cookies</h2>
|
||||
<p class="mb-4">
|
||||
We use Matomo analytics to understand how users interact with our platform. This helps us improve our
|
||||
services. For more details, see our <a href="/cookie-policy" class="link link-primary">Cookie Policy</a>.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">6. Data Security</h2>
|
||||
<p class="mb-4">
|
||||
We implement appropriate technical and organizational security measures to protect your personal information.
|
||||
However, no electronic transmission or storage is 100% secure, and we cannot guarantee absolute security.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">7. Your Rights</h2>
|
||||
<p class="mb-4">Depending on your location, you may have the following rights:</p>
|
||||
<ul class="list-disc list-inside mb-4 space-y-2">
|
||||
<li>Access to your personal data</li>
|
||||
<li>Correction of inaccurate data</li>
|
||||
<li>Deletion of your data</li>
|
||||
<li>Restriction of processing</li>
|
||||
<li>Data portability</li>
|
||||
<li>Objection to processing</li>
|
||||
</ul>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">8. Third-Party Services</h2>
|
||||
<p class="mb-4">
|
||||
Our platform may contain links to third-party websites or integrate with external services
|
||||
(e.g., Discourse community forums). We are not responsible for the privacy practices of these third parties.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">9. Children's Privacy</h2>
|
||||
<p class="mb-4">
|
||||
enviPath is not intended for users under the age of 16. We do not knowingly collect personal information
|
||||
from children. If you believe we have collected information from a child, please contact us.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">10. Changes to This Policy</h2>
|
||||
<p class="mb-4">
|
||||
We may update this Privacy Policy from time to time. We will notify you of any changes by posting the
|
||||
new policy on this page and updating the "Last updated" date.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">11. Contact Us</h2>
|
||||
<p class="mb-4">
|
||||
If you have questions or concerns about this Privacy Policy, please
|
||||
<a href="/contact" class="link link-primary">contact us</a>.
|
||||
</p>
|
||||
|
||||
<div class="alert alert-info mt-8">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<span>Last updated: 2025</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock main_content %}
|
||||
@ -1,65 +0,0 @@
|
||||
{% extends "static/static_base.html" %}
|
||||
|
||||
{% block content %}
|
||||
{% if message %}
|
||||
<div class="alert alert-danger" role="alert">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="alert alert-success" role="alert">
|
||||
Kia ora! We are running our closed beta tests at the moment. It would be great to get your help as tester,
|
||||
you
|
||||
can apply to become tester by registering for this page, just hit the button below. More information on the
|
||||
beta
|
||||
test is available in our <a href="https://community.envipath.org/t/apply-to-join-our-closed-beta/95">
|
||||
community
|
||||
form</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="modal-dialog" style="margin:30px auto; z-index:9999;">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<form class="form-horizontal" method="post" action="{% url 'register' %}">
|
||||
{% csrf_token %}
|
||||
<fieldset>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="username">Username</label>
|
||||
<div class="controls">
|
||||
<input required id="username" name="username" type="text"
|
||||
class="form-control" placeholder="username" autocomplete="username">
|
||||
</div>
|
||||
<label class="control-label" for="email">Email</label>
|
||||
<div class="controls">
|
||||
<input required id="email" name="email" type="text"
|
||||
class="form-control" placeholder="email" autocomplete="email">
|
||||
</div>
|
||||
<label class="control-label" for="passwordinput">Password:</label>
|
||||
<div class="controls">
|
||||
<input required id="passwordinput" name="password" class="form-control"
|
||||
type="password" placeholder="********" autocomplete="current-password">
|
||||
</div>
|
||||
<label class="control-label" for="passwordinput2">Password:</label>
|
||||
<div class="controls">
|
||||
<input required id="passwordinput2" name="rpassword" class="form-control"
|
||||
type="password" placeholder="********" autocomplete="current-password">
|
||||
</div>
|
||||
<div class="form-group text-center" style="margin-top:15px;">
|
||||
<a href="{% url 'password_reset' %}">Forgot your password?</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="signin"></label>
|
||||
<div class="controls">
|
||||
<button id="signin" name="signin" class="btn btn-success pull-right">Sign Up
|
||||
</button>
|
||||
<a class="btn btn-primary" href="{% url 'login' %}">Already have an Account?</a>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" name="next" value="{{ next }}"/>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
96
templates/static/terms_of_use.html
Normal file
96
templates/static/terms_of_use.html
Normal file
@ -0,0 +1,96 @@
|
||||
{% extends "framework_modern.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block main_content %}
|
||||
<div class="max-w-4xl mx-auto px-4 py-8">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="text-sm breadcrumbs mb-4">
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li>Terms of Use</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="bg-base-100 shadow-xl rounded-lg p-8">
|
||||
<h1 class="text-4xl font-bold mb-6">Terms of Use</h1>
|
||||
|
||||
<div class="prose max-w-none">
|
||||
<p class="text-lg mb-6">
|
||||
Welcome to enviPath. By accessing and using this platform, you agree to be bound by these terms of use.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">1. Acceptance of Terms</h2>
|
||||
<p class="mb-4">
|
||||
By accessing and using enviPath, you accept and agree to be bound by the terms and provision of this agreement.
|
||||
If you do not agree to these terms, please do not use our services.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">2. Use License</h2>
|
||||
<p class="mb-4">
|
||||
Permission is granted to temporarily access the materials (information or software) on enviPath for personal,
|
||||
non-commercial research and educational use only. This is the grant of a license, not a transfer of title.
|
||||
</p>
|
||||
<p class="mb-4">Under this license you may not:</p>
|
||||
<ul class="list-disc list-inside mb-4 space-y-2">
|
||||
<li>Modify or copy the materials</li>
|
||||
<li>Use the materials for any commercial purpose</li>
|
||||
<li>Attempt to decompile or reverse engineer any software contained on enviPath</li>
|
||||
<li>Remove any copyright or other proprietary notations from the materials</li>
|
||||
</ul>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">3. Data and Content</h2>
|
||||
<p class="mb-4">
|
||||
Users may submit, upload, or otherwise make available data and content to enviPath. By doing so, you grant
|
||||
enviPath a license to use, modify, publicly perform, publicly display, reproduce, and distribute such content.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">4. Disclaimer</h2>
|
||||
<p class="mb-4">
|
||||
The materials on enviPath are provided on an 'as is' basis. enviPath makes no warranties, expressed or implied,
|
||||
and hereby disclaims and negates all other warranties including, without limitation, implied warranties or
|
||||
conditions of merchantability, fitness for a particular purpose, or non-infringement of intellectual property.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">5. Limitations</h2>
|
||||
<p class="mb-4">
|
||||
In no event shall enviPath or its suppliers be liable for any damages (including, without limitation, damages
|
||||
for loss of data or profit, or due to business interruption) arising out of the use or inability to use the
|
||||
materials on enviPath.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">6. Academic Use and Citations</h2>
|
||||
<p class="mb-4">
|
||||
If you use enviPath in your research, we request that you cite our work appropriately. Please visit our
|
||||
<a href="/cite" class="link link-primary">citation page</a> for details.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">7. License Information</h2>
|
||||
<p class="mb-4">
|
||||
For detailed license information about enviPath data and software, please refer to the
|
||||
<a href="https://community.envipath.org/t/envipath-license/109" target="_blank" class="link link-primary">
|
||||
enviPath License documentation
|
||||
</a>.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">8. Modifications</h2>
|
||||
<p class="mb-4">
|
||||
enviPath may revise these terms of use at any time without notice. By using this platform, you are agreeing
|
||||
to be bound by the then current version of these terms of use.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-semibold mt-8 mb-4">9. Contact Information</h2>
|
||||
<p class="mb-4">
|
||||
If you have any questions about these Terms of Use, please <a href="/contact" class="link link-primary">contact us</a>.
|
||||
</p>
|
||||
|
||||
<div class="alert alert-info mt-8">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<span>Last updated: 2025</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock main_content %}
|
||||
Reference in New Issue
Block a user