IPKM/isotopetable
3
0
Fork 0
Code Issues Pull Requests Actions Activity

added bootstrap theme

Browse Source
This commit is contained in:
Markus Rosenstihl
2025-03-23 21:02:44 +01:00
parent 96c23c62d1
commit f50f6fc7cd
4 changed files with 82 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
isotables/isotopapp/templates/home.html
View File

@@ -1,37 +1,68 @@
<div class="center">
<h1>NMR Frequency Calculator</h1>
<form action="result">
<table>
<tr>
<td>Source isotope:</td>
<td> <input type="text" name="isotope1" placeholder="Current isotope"></td>
</tr>
<tr>
<td>Source frequency in MHz: </td><td><input type="number" name="freq" step="any" placeholder="Larmor frequency in MHz"></td>
</tr>
<tr>
<td>Destination isotope: <td><input type="text" name="isotope2" placeholder="Other isotope"></td>
<td><button type="submit" name="transform">Search</button></td>
</tr>
<tr>
<td>Frequency range in MHz: <td><input type="number" name="freq_range" step="any" placeholder="Range in MHz"></td>
<td><button type="submit" name="search">Search</button></td>
</tr>
<tr>
<td>Gradient in T/m:</td> <td><input type="number" name="gradient" step="any" placeholder="Gradient in T/m"></td>
<td><button type="submit" name="calculate">Search</button></td>
<td>(assuming 5mm sample diameter)</td>
</tr>
</table>
</form>
</div>
<style>
.center {
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<style>
.table-striped>tbody>tr:nth-child(odd) {
background-color: LemonChiffon;
}
.center {
margin: auto;
width: 60%;
border: 3px solid #a5addb;
padding: 10px;
}
</style>
}
</style>
<div class="container text-center">
<h1>NMR Frequency Calculator</h1>
<form action="result">
<div class="row row-cols-6">
<div class="col"> <label class="form-label">Source isotope:</label></div>
<div class="col">
<select name="isotope1" class="form-select" size="1">
{% for i in isotopes %}
<option value="{{ i.0 }}">{{ i.1 }}</option>
{% endfor %}
</select>
{# <input type="text" name="isotope1" class="form-control" placeholder="Current isotope">#}
</div>
</div>
<div class="row row-cols-6">
<div class="col"><label class="form-label">Source frequency in MHz:</label></div>
<div class="col"><input type="number" name="freq" class="form-control" step="any" value=100 placeholder="Larmor frequency in MHz"></div>
</div>
<div class="row row-cols-6">
<label class="form-label">Destination isotope:</label>
<div class="col"> <select name="isotope2" class="form-select" size="1">
{% for i in isotopes %}
<option value="{{ i.0 }}">{{ i.1 }}</option>
{% endfor %}
</select></div>
<div class="col">
<button type="submit" name="transform" class="btn btn-primary btn-sm">Search</button>
</div>
</div>
<div class="row row-cols-6">
<label class="form-label">Frequency range in MHz:</label>
<div class="col"><input type="number" name="freq_range" class="form-control" step="any" placeholder="Range in MHz"></div>
<div class="col">
<button type="submit" name="search" class="btn btn-primary btn-sm ">Search</button>
</div>
</div>
<div class="row row-cols-6">
<label class="form-label">Gradient in T/m:<br>(assuming &#x2300;5mm)</label>
<div class="col"><input type="number" name="gradient" class="form-control" step="any" placeholder="Gradient in T/m"></div>
<div class="col">
<button type="submit" name="calculate" class="btn btn-primary btn-sm">Search</button>
</div>
</div>
</form>
</div>
<div>
{{ ans }}
</div>

52
isotables/isotopapp/templates/result.html
View File

@@ -1,11 +1,15 @@
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<div class="center">
<table>
<table class="table w-auto table-responsive-sm table-striped table-hover table-bordered">
<caption>
Table downloaded from <a href="https://easyspin.org/documentation/isotopetable.html">easyspin.org</a>
(2023-07-29 markusro)
</caption>
<thead>
<thead class="table-dark">
<tr>
<th scope="col">N</th>
<th scope="col">Symbol</th>
@@ -35,54 +39,18 @@
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #a5addb;
width: 40%;
border: 0px solid #a5addb;
padding: 10px;
}
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 1.2rem;
letter-spacing: 1px;
}
caption {
caption-side: bottom;
padding: 8px;
font-weight: normal;
font-size: 0.8rem;
text-align: center;
}
thead,
tfoot {
background-color: rgb(228 240 245);
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 10px 4px;
text-align: center;
}
td:last-of-type {
text-align: center;
}
tbody > tr:nth-of-type(even) {
background-color: rgb(237 238 242);
}
tfoot th {
text-align: right;
}
tfoot td {
font-weight: bold;
text-align: left;
}
</style>