147 lines
6.3 KiB
HTML
147 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Käfigrechner</title>
|
|
<meta content="width=device-width, initial-scale=1" name="viewport"/>
|
|
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="navbar">
|
|
<div class="navbar-brand">
|
|
<div class="navbar-item">
|
|
<img src="assets/img/logo_vdrd.png" alt="VdRD Log">
|
|
<h1 data-i18n-key="app-name" class="title is-3">Käfigrechner</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="content">
|
|
<div class="tabs is-centered is-boxed is-toggle" id="primary-tabs">
|
|
<ul>
|
|
<li class="is-active" data-tab-id="1">
|
|
<a>
|
|
<span class="icon is-small">
|
|
<i class="fas fa-number" aria-hidden="true"></i>
|
|
</span>
|
|
How many rats does this cage fit?
|
|
</a>
|
|
</li>
|
|
<li data-tab-id="2">
|
|
<a>
|
|
<span class="icon is-small">
|
|
<i class="fas fa-question" aria-hidden="true"></i>
|
|
</span>
|
|
What cage should I get?
|
|
</a>
|
|
</li>
|
|
<li data-tab-id="3">
|
|
<a>
|
|
<span class="icon is-small">
|
|
<i class="fas fa-check" aria-hidden="true"></i>
|
|
</span>
|
|
Check existing cage
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tab-content">
|
|
<div class="is-active" data-content-id="1">
|
|
<p>Here you can check how many rats could fit in your cage.</p>
|
|
</div>
|
|
<div class="" data-content-id="2">
|
|
<p>Here is a list of cages you can get.</p>
|
|
</div>
|
|
<div class="" data-content-id="3">
|
|
<div class="card" id="container-cages">
|
|
<div class="card-content" id="card-ManualMeasurements">
|
|
<h2 class="title is-4"><label data-i18n-key="cage-measurements"
|
|
for="form-cage-measurements">Käfigmaße</label></h2>
|
|
<form id="form-cage-measurements" class="form-measurements">
|
|
|
|
<label for="width" class="label" data-i18n-key="width-cm">Breite (cm)</label>
|
|
<p class="control has-icons-left">
|
|
<input class="input" type="number" id="width" placeholder="100 cm">
|
|
<span class="icon is-small is-left">
|
|
<i class="fas fa-ruler-horizontal"></i>
|
|
</span>
|
|
</p>
|
|
|
|
<label for="depth" class="label" data-i18n-key="depth-cm">Tiefe (cm)</label>
|
|
<p class="control has-icons-left">
|
|
<input class="input" type="number" id="depth" placeholder="50 cm">
|
|
<span class="icon is-small is-left">
|
|
<i class="fas fa-ruler"></i>
|
|
</span>
|
|
</p>
|
|
|
|
<label for="height" class="label" data-i18n-key="height-cm">Höhe (cm)</label>
|
|
<p class="control has-icons-left">
|
|
<input class="input" type="number" id="height" placeholder="120 cm">
|
|
<span class="icon is-small is-left">
|
|
<i class="fas fa-ruler-vertical"></i>
|
|
</span>
|
|
</p>
|
|
|
|
|
|
<div class="columns">
|
|
<div class="column">
|
|
<label for="numFullFloors" class="label"
|
|
data-i18n-key="full-floors">Vollebenen</label>
|
|
<span data-tooltip="Als Vollebenen zählen alle Ebenen die größer als 0.5m² sind, inklusive des Käfigbodens.">
|
|
<svg class="text-grey-dark" width="18" height="18" viewBox="0 0 18 18" fill="none"
|
|
stroke="currentColor">
|
|
<path d="M9.00026 12.6C9.00026 12.6 9.00026 12.1224 9.00026 11.5333V8.86666C9.00026 8.57211 8.76148 8.33333 8.46693 8.33333H7.93359"
|
|
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
<path d="M8.73346 5.26666C8.58619 5.26666 8.4668 5.38605 8.4668 5.53333C8.4668 5.68061 8.58619 5.8 8.73346 5.8C8.88074 5.8 9.00013 5.68061 9.00013 5.53333C9.00013 5.38605 8.88074 5.26666 8.73346 5.26666V5.26666"
|
|
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z"
|
|
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
</svg>
|
|
</span>
|
|
<input type="number" id="numFullFloors" value="3" step="1">
|
|
</div>
|
|
|
|
<div class="column">
|
|
<label for="numRats" id="labelNumRats" data-i18n-key="number-of-rats">Anzahl an
|
|
Ratten</label>
|
|
<input type="range" min="3" max="15" value="4" class="slider" id="numRats">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="title is-3" data-i18n-key="result">Ergebnis</h2>
|
|
</div>
|
|
<div class="card-content">
|
|
<div id="resultsDiv"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="./bundle.js"></script>
|
|
|
|
<div class="footer">
|
|
<div class="language-switcher">
|
|
<label aria-hidden="false" style="display: none" data-i18n-key="change-language"></label>
|
|
<select data-i18n-switcher class="locale-switcher" id="locale-switcher">
|
|
<option value="en">English</option>
|
|
<option value="de">Deutsch</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |