Hugging Face's logo

Spaces:
dmsaylor
/
CHRIS
Running

App Files Community
CHRIS / quantity_module /templates /quantity_index.html
3v324v23's picture
3v324v23
extending new template to all tools
570b086
Raw History Blame Contribute Delete
11 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CHRIS</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script> -->
<!-- <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-svg.js"></script> -->
<script id="MathJax-script" async src="{{ url_for('static',filename='mathjax/tex-mml-svg.js') }}"></script>
<script src="{{ url_for('static',filename='jquery.slim.min.js') }}" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="{{ url_for('static',filename='popper.min.js') }}" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="{{ url_for('static',filename='bootstrap.min.js') }}" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles.css') }}">
<style>
table, th, td {
border: 1px solid black;
text-align: left;
}
</style>
</head>
{% extends "base.html" %}
{% block content %}
<p> For details on how to use the CHRIS total quantity module, please click the information icons next to each section header. <!-- and read the
<a href="{{url_for('.static', filename='exposure2_COU.html')}}"> context of use (COU)</a>, which includes limitations of use.
For a history of updates, please see the <a href="{{url_for('.static', filename='Changelog.html')}}"> changelog</a>.For reference and disclaimer information,
please see the <a href="{{url_for('.static', filename='color3_RST.html')}}"> RST information</a> page.-->
</p>
<body>
<form method="POST">
<!-- Chemical input section -->
<table id="table1" align="left" style="float: none;">
<tr><td colspan="2"><h4> Chemical identity <button type="button" class="Info_btn" data-toggle="modal" data-target="#LeachModal" >&#9432;</button> </h4></td></tr>
<tr>
<th> Identifier type </th>
<td> <select name="IDtype">
<option value="CAS" selected>CAS</option>
<option value="SMILES" >SMILES</option>
<option value="InChI" >InChI</option>
<option value="common" >Common name</option>
</select>
</td>
</tr>
<tr>
<th>Identifier</th>
<td><input name="chemName" id="chemName" type="text" value="" required></td>
</tr>
</tr>
<th>Extracted amount</th>
<td><input name="amount" id="amount" value="1.0" step="any" min="0.000001" type="number" required></td>
</tr>
</tr>
<th> Amount units</th>
<td><select name="units">
<option value="mg" selected>mg</option>
<option value="µg">µg</option>
</select>
</td>
<!-- Modal -->
<div id="LeachModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Bulk chemical</h4>
</div>
<div class="modal-body">
<p><em>Identifier type and identifier</em> - Please select the identifier type and enter the chemical identifier.
For example, if the CAS number is known, select CAS from the pull down menu and enter the CAS number in the identifier field.
If the CAS number is unknown, CHRIS can identify the molecular structure through a SMILES code or InChI, which can
be found for many chemicals using <a href="https://pubchem.ncbi.nlm.nih.gov">PubChem</a> or generated based on
the molecular structure using tools such as <a href="https://cactus.nci.nih.gov/cgi-bin/osra/index.cgi">OSRA</a>.
Alternatively, CHRIS can attempt to identify the chemical using a common name for the chemical.</p>
<p><em>Extracted amount</em> - Enter the mass of the substance extracted from the device. </p>
<p><em>Amount units</em> - Select the appropriate units for the amount, micrograms (µg) or milligrams (mg).</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Polymer matrix input section -->
<tr><td colspan="2"><h4> Polymer matrix <button type="button" class="Info_btn" data-toggle="modal" data-target="#PolymerModal">&#9432;</button> </td></tr></h4>
<tr>
<th>Matrix</th>
<td><select name="polymer" id="polymer" style="max-width:20em;">
<option value="{{polymers[0]}}" selected>{{polymers[0]}}</option>
{% for polymer in polymers[1:] %}
<option value="{{polymer}}">{{polymer}}</option>
{% endfor %}
</select>
</td>
</tr>
<tr>
<th>Mass (g)</th>
<td><input name="mass" id="mass" step="any" value="1.0" min="0.000001" type="number" required> </td>
</tr>
<tr>
<th>Density (g/cm<sup>3</sup>)</th>
<td><input name="density" id="density" step="any" value="1.0" min="0.01" type="number" required></td>
</tr>
<tr>
<th>Glass transition temperature (&deg;C)</th>
<td><input name="Polymer_Tg" id="Polymer_Tg" step="any" min="-273.15" max="500" value="0" type="number" required></td>
</tr>
<!-- Modal -->
<div id="PolymerModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Polymer Matrix</h4>
</div>
<div class="modal-body">
<p><em>Matrix</em> - Please select your polymer matrix from the list. If your polymer is not listed below, please select &#34;Other polymer&#34;.
For polymer mixtures/blends, co-polymers, or composites (e.g. glass fiber reinforced matrices), the component or phase that is worst-case for exposure,
i.e. the softest or least glassy (lowest T<sub>g</sub>) component can be selected if listed (which, in turn, assumes the entire system is composed of the worst-case component or phase).
In these scenarios, a justification should be provided for the choice of worst-case component of the polymer system. </p>
<p><em>Mass</em> - Enter the mass of the polymer matrix in grams.</p>
<p><em>Density</em> - Enter the estimated density of the polymer matrix in grams per cubic centimeter. Note that a rough estimate (e.g. +/- 10%) is acceptable.</p>
<p><em>Glass transition temperature</em> - Enter the T<sub>g</sub> of the polymer matrix in degrees Celsius. Note that the extraction temperature must be higher than T<sub>g</sub> to use this module. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Extraction parameters input section -->
<tr><td colspan="2"><h4> Extraction parameters <button type=button class="Info_btn" data-toggle="modal" data-target="#ExtractionModal">&#9432;</button></td></tr> </h4>
<tr><th>Device surface area (cm<sup>2</sup>)</th><td> <input name="area" id="area" step="any" value="5.0" min="0.001" type="number" required></td></tr>
<tr><th>Duration (hours)</th><td> <input name="time" id="time" step="any" value="24.0" min="0.001" type="number" required></td></tr>
<tr><th>Iterations</th><td> <input name="iterations" id="iterations" step="1" value="1" min="1" type="number" required></td></tr>
<tr><th>Temperature (&deg;C)</th><td> <input name="T" id="T" step="any" value="50.0" min="25" max="75" type="number" required></td></tr>
<tr><th>Solvent</th>
<td> <select name="solventname" id="solventname">
<option value="{{solvents[0]}}" selected>{{solvents[0]}}</option>
{% for solvent in solvents[1:] %}
<option value="{{solvent}}">{{solvent}}</option>
{% endfor %}
</select> </td></tr>
<tr><th>Solvent volume (mL)</th><td> <input name="solventvol" id="solventvol" step="any" value="10.0" min="0.001" type="number" required></td></tr>
<tr><th>Swelling amount (wt%)</th><td> <input name="swelling" id="swelling" step="any" value="10.0" max="100.0" min="0.0" type="number" required></td></tr>
<tr><th>Partition coefficient</th><td> <input name="K" id="K" step="any" value="10.0" min="0.00001" type="number" required></td></tr>
</table>
<!-- Modal -->
<div id="ExtractionModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Extraction parameters</h4>
</div>
<div class="modal-body">
<p><em>Device surface area</em> - Enter the solvent-contacting surface area of the component being evaluated in square centimeters.
<p><em>Duration</em> - Enter the duration of the extraction experiment in hours.
<p><em>Iterations</em> - Enter the number of iterations (i.e., number of extraction cycles).
<p><em>Temperature</em> - Enter the temperature of the extraction experiment in degrees Celsius.
<p><em>Solvent</em> - Select the extraction solvent from the list.
<p><em>Solvent volume</em> - Enter the volume of solvent used for extraction.
<p><em>Swelling amount</em> - Enter the weight percent of the extraction solvent in the swollen polymer, accounting for crystallinity, if any (i.e., \( (m_s-m_0)/(m_s-X_c m_0) \times 100 \), where \( m_s \) and \( m_0 \) are the swollen and initial mass, respectively, and \( X_c \) is the crystalline fraction).
<p><em>Partition coefficient</em> - If known, enter the polymer/solvent partition coefficient of the extractable.
If not known, the default worst-case value of 10 can be used for typical device polymers, hydrophobic extractables, and semi- or non-polar extraction solvents.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<p><button type="submit">Estimate total quantity</button></p>
</form>
</body>
{% endblock %}
</html>