318 lines
14 KiB
HTML
318 lines
14 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"/>
|
|
<meta name="description"
|
|
content="Rechner für die Größe eines Rattenkäfigs basierend auf den Empfehlungen des VdRD e.V.">
|
|
<meta name="keywords" content="Farbratten, Käfig, Ratten, Rechner, Rat, Calculator, Cage">
|
|
<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="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-hashtag" aria-hidden="true"></i>
|
|
</span>
|
|
<p data-i18n="how-many-rats-does-this-cage-fit">How many rats does this cage fit?</p>
|
|
</a>
|
|
</li>
|
|
<li data-tab-id="2">
|
|
<a>
|
|
<span class="icon is-small">
|
|
<i class="fas fa-question" aria-hidden="true"></i>
|
|
</span>
|
|
<p data-i18n="what-cage-should-i-get">What cage should I get?</p>
|
|
</a>
|
|
</li>
|
|
<li data-tab-id="3">
|
|
<a>
|
|
<span class="icon is-small">
|
|
<i class="fas fa-check" aria-hidden="true"></i>
|
|
</span>
|
|
<p data-i18n="check-existing-cage">Check existing cage</p>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tab-content">
|
|
<!--- Check how many rats fit --->
|
|
<div class="is-active" data-content-id="1">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<h2 class="title is-4"><label data-i18n="cage-measurements"
|
|
for="form-cage-measurements">Käfigmaße</label></h2>
|
|
<form>
|
|
<div class="field">
|
|
<label for="num-rats-width" class="label" data-i18n="width-cm">Breite (cm)</label>
|
|
<p class="control has-icons-left">
|
|
<input class="input" type="number" id="num-rats-width" placeholder="100 cm">
|
|
<span class="icon is-small is-left">
|
|
<i class="fas fa-ruler-horizontal"></i>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="num-rats-depth" class="label" data-i18n="depth-cm">Tiefe (cm)</label>
|
|
<p class="control has-icons-left">
|
|
<input class="input" type="number" id="num-rats-depth" placeholder="50 cm">
|
|
<span class="icon is-small is-left">
|
|
<i class="fas fa-ruler"></i>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="num-rats-height" class="label" data-i18n="height-cm">Höhe (cm)</label>
|
|
<p class="control has-icons-left">
|
|
<input class="input" type="number" id="num-rats-height" placeholder="120 cm">
|
|
<span class="icon is-small is-left">
|
|
<i class="fas fa-ruler-vertical"></i>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="num-rats-numFullFloors" class="label" data-i18n="full-floors">
|
|
Vollebenen
|
|
</label>
|
|
|
|
<input class="control" type="number" id="num-rats-numFullFloors" value="3" step="1">
|
|
<p class="help">Als Vollebenen zählen alle Ebenen die größer als 0.5m² sind, inklusive des
|
|
Käfigbodens.</p>
|
|
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer is-fullwidth">
|
|
<div class="card result-card" id="num-rats-result-card">
|
|
<div class="card-header">
|
|
<h2 class="card-header-title is-3 is-centered" data-i18n="result">Ergebnis</h2>
|
|
</div>
|
|
<div class="card-content">
|
|
<div id="num-rats-resultsDiv"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--- Cage calc --->
|
|
<div class="" data-content-id="2">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<h2 class="title is-4">
|
|
<label data-i18n="number-of-rats" class="label" for="cage-calc">Anzahl der Ratten</label>
|
|
</h2>
|
|
<form id="cage-calc">
|
|
<div class="column">
|
|
<label id="cageCalcLabelNumRats" for="cageCalcNumRats" class="label"></label>
|
|
<input type="range" min="3" max="15" value="4" class="slider" id="cageCalcNumRats">
|
|
<img class="inline-icon" src="assets/img/logo_transparent.png" alt="Kleine Ratte">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="card-footer is-fullwidth">
|
|
<div class="card result-card" id="cage-calc-result-card">
|
|
<div class="card-header">
|
|
<h2 class="card-header-title is-3 is-centered" data-i18n="result">Ergebnis</h2>
|
|
</div>
|
|
<div class="card-content">
|
|
<div id="cageCalcResultsDiv"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--- Check cage --->
|
|
<div class="" data-content-id="3">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<h2 class="title is-4"><label class="label" data-i18n="cage-measurements"
|
|
for="form-cage-measurements">Käfigmaße</label></h2>
|
|
<form id="form-cage-measurements" class="form-measurements">
|
|
|
|
<div class="field">
|
|
<label for="width" class="label" data-i18n="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>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="depth" class="label" data-i18n="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>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="height" class="label" data-i18n="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>
|
|
|
|
<div class="columns">
|
|
<div class="column">
|
|
<div class="field">
|
|
<label for="numFullFloors" class="label"
|
|
data-i18n="full-floors">Vollebenen</label>
|
|
|
|
<input class="control" type="number" id="numFullFloors" value="3" step="1">
|
|
<p class="help">Als Vollebenen zählen alle Ebenen die größer als 0.5m² sind, inklusive
|
|
des Käfigbodens.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column">
|
|
|
|
<div class="field">
|
|
<label class="label" for="numRats" id="labelNumRats" data-i18n="number-of-rats">Anzahl
|
|
an
|
|
Ratten</label>
|
|
<input type="range" min="3" max="15" value="4" class="control slider" id="numRats">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer is-fullwidth">
|
|
<div class="card result-card" id="result-card">
|
|
<div class="card-header">
|
|
<h2 class="card-header-title is-3 is-centered" data-i18n="result">Ergebnis</h2>
|
|
</div>
|
|
<div class="card-content">
|
|
<div id="resultsDiv"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer" aria-label="Footer">
|
|
<div class="columns">
|
|
<div class="column">
|
|
<div class="block">
|
|
<img class="footer-logo" src="assets/img/logo_ausgeschrieben.png"
|
|
alt="Logo Verein der Rattenliebhaber und -halter Deutschland e.v.">
|
|
</div>
|
|
<div class="block">
|
|
<div class="language-switcher">
|
|
<label for="locale-switcher" class="footer-title title label" data-i18n="change-language">Sprache
|
|
ändern</label>
|
|
<select data-i18n-switcher class="select" id="locale-switcher">
|
|
<option value="en">English</option>
|
|
<option value="de">Deutsch</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="block">
|
|
<h3 class="footer-title title" data-i18n="information-on-rat-husbandry">Informationen zur
|
|
Rattenhaltung</h3>
|
|
<ul class="footer-links">
|
|
<li class="footer-link"><a href="https://vdrd.de/vor-der-anschaffung/" data-i18n="basic-rat-info">Grundwissen
|
|
Rattenhaltung</a></li>
|
|
<li class="footer-link"><a href="https://vdrd.de/das-rattenheim/" data-i18n="cage">Käfig</a></li>
|
|
<li class="footer-link"><a href="https://vdrd.de/ernaehrung/" data-i18n="food">Ernährung</a></li>
|
|
<li class="footer-link"><a href="https://vdrd.de/anzahl-geschlecht-und-bezugsquelle/"
|
|
data-i18n="adopting-rats">Ratten adoptieren</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="block">
|
|
<h3 class="footer-title title" data-i18n="about">Über uns</h3>
|
|
<ul class="footer-links">
|
|
<li class="footer-link"><a href="https://vdrd.de/" data-i18n="the-vdrd">Der VdRD e.V.</a></li>
|
|
<li class="footer-link"><a href="https://vdrd.de/impressum" data-i18n="imprint">Impressum</a></li>
|
|
<li class="footer-link"><a href="https://codeberg.org/moanos/rettenrechner" data-i18n="source-code">Quellcode</a>
|
|
</li>
|
|
<li class="footer-link">
|
|
<a class="js-modal-trigger is-text is-link" data-target="modal-feedback"
|
|
data-i18n="give-feedback">
|
|
Feedback geben
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="modal-feedback" class="modal">
|
|
|
|
<div class="modal-background"></div>
|
|
<div class="modal-card">
|
|
<header class="modal-card-head">
|
|
<h2 data-i18n="feedback" class="modal-card-title">Feedback</h2>
|
|
<button class="delete" aria-label="close"></button>
|
|
</header>
|
|
<div class="modal-card-body">
|
|
<div class="section">
|
|
<p>
|
|
Wir freuen uns sehr, wenn du uns Feedback zu unserem Rattenrechner gibst!
|
|
Der einfachste Weg das zu tun ist per E-Mail an <a
|
|
href="mailto:webmaster@vdrd.de">webmaster@vdrd.de</a>.
|
|
</p>
|
|
<p>
|
|
Der Code dieser Website ist <a href="https://codeberg.org/moanos/rettenrechner">öffentlich
|
|
einsehbar.</a>
|
|
Gerne kannst du auch direkt dort <a href="https://codeberg.org/moanos/rettenrechner/issues">einen
|
|
Issue</a> eröffnen!
|
|
</p>
|
|
</div>
|
|
<div class="section">
|
|
<h1 class="title" data-i18n="sus-title">Bewerte den Rechner</h1>
|
|
<p class="is-spaced mb-4" data-i18n="explanation-feedback"></p>
|
|
<form id="sus-form">
|
|
<!--- Questions here --->
|
|
<div class="control" id="sus-control">
|
|
<button class="button is-primary" type="submit" data-i18n="submit">Absenden</button>
|
|
</div>
|
|
|
|
</form>
|
|
<div id="response-message" class="notification is-hidden"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="./bundle.js"></script>
|
|
|
|
</body>
|
|
</html> |