You've already forked calculator
170 lines
4.2 KiB
HTML
170 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
body {
|
|
text-align: left;
|
|
width: 40%;
|
|
font-family: Verdana, bitstream vera sans, sans-serif;
|
|
font-size: 12px;
|
|
background-color: #000;
|
|
color: #e5e5e5;
|
|
line-height: 1.8em;
|
|
}
|
|
p {
|
|
white-space: pre-wrap;
|
|
}
|
|
h1 {
|
|
font-size: 28px;
|
|
}
|
|
a {
|
|
text-decoration: none;
|
|
color: #00cd00;
|
|
}
|
|
a:hover {
|
|
color: #0f0;
|
|
}
|
|
table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
}
|
|
th, td {
|
|
padding: 8px;
|
|
text-align: left;
|
|
}
|
|
input {
|
|
background-color: #000;
|
|
color: #e5e5e5;
|
|
border: 1px solid #e5e5e5;
|
|
padding: 4px;
|
|
margin: 0;
|
|
}
|
|
input[type="text"] {
|
|
width: 30%;
|
|
}
|
|
input[type="submit"] {
|
|
background-color: #000;
|
|
color: #e5e5e5;
|
|
border: 1px solid #e5e5e5;
|
|
padding: 4px;
|
|
margin: 0;
|
|
}
|
|
input[type="submit"]:hover {
|
|
background-color: #0f0;
|
|
color: #000;
|
|
border: 1px solid #0f0;
|
|
}
|
|
button {
|
|
background-color: #000;
|
|
color: #e5e5e5;
|
|
border: 1px solid #e5e5e5;
|
|
padding: 4px;
|
|
margin: 0;
|
|
}
|
|
button:hover {
|
|
background-color: #0f0;
|
|
color: #000;
|
|
border: 1px solid #0f0;
|
|
}
|
|
select {
|
|
background-color: #000;
|
|
color: #e5e5e5;
|
|
border: 1px solid #e5e5e5;
|
|
padding: 4px;
|
|
margin: 0;
|
|
width: 15%;
|
|
}
|
|
select:hover {
|
|
background-color: #0f0;
|
|
color: #000;
|
|
border: 1px solid #0f0;
|
|
}
|
|
footer {
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
font-size: 10px;
|
|
}
|
|
@media screen and (max-width: 1024px) {
|
|
body {
|
|
width: 100%;
|
|
font-size: 1em;
|
|
}
|
|
h1 {
|
|
font-size: 1.5em;
|
|
}
|
|
.hidden-mobile {
|
|
display: none;
|
|
}
|
|
input[type="text"] {
|
|
width: 50%;
|
|
}
|
|
select {
|
|
width: 20%;
|
|
}
|
|
}
|
|
</style>
|
|
<title>Calculators</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
</head>
|
|
|
|
<body>
|
|
<header class="page-header">
|
|
<div class="container">
|
|
<h1 class="text-center"><a href="{{ host }}">Calculators</a></h1>
|
|
</div>
|
|
</header>
|
|
{% if index is defined %}
|
|
<div class="container">
|
|
<ul>
|
|
{% for k, v in index.items() %}
|
|
<li><a href="{{ v }}">{{ k }}</a></li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %} {% if calculator is defined %}
|
|
<div class="container">
|
|
<h2>{{ calculator.name }}</h2>
|
|
<p>{{ calculator.description }}</p>
|
|
<form action="{{ calculator.url }}" method="post">
|
|
<table>
|
|
{% for k, v in values.items() %}
|
|
<tr>
|
|
<td>{{ k|title() }}</td>
|
|
<td>
|
|
{% if k == "type" %}
|
|
<select name="{{ k }}" style="width: 35%;">
|
|
{% for opt in v.options %}
|
|
<option value="{{ opt }}" {% if opt == v.value %}selected{% endif %}>{{ opt }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% else %}
|
|
<input type="text" name="{{ k }}" value="{{ v.value }}" {% if v.readonly is defined %}readonly{% endif %} autocomplete="off" />
|
|
{% if v.units is defined %}
|
|
<select name="{{ k }}_unit">
|
|
{% for unit in v.units %}
|
|
<option value="{{ unit }}" {% if unit == v.selected %}selected{% endif %}>{{ unit }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% endif %}
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
<input type="submit" value="Calculate" />
|
|
<button type="button" onclick="window.location.href='{{ calculator.url }}'">Reset</button>
|
|
</form>
|
|
</div>
|
|
{% endif %}
|
|
{% if error is defined %}
|
|
<div class="container">
|
|
<h2>Error</h2>
|
|
<p>{{ error }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</body>
|
|
</html>
|