feat: initial bulma restructuring
This commit is contained in:
@@ -145,7 +145,7 @@ label {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 800px) {
|
||||
@media screen and (max-width: 800px) {
|
||||
flex: 0 1 calc(25% - 0.5em);
|
||||
}
|
||||
|
||||
|
||||
@@ -3,88 +3,43 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Käfigrechner</title>
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<meta content="width=device-width, initial-scale=1" name="viewport" />
|
||||
<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>
|
||||
<button class="button has-tooltip-multiline has-tooltip-bottom has-text-link" data-tooltip="This is a tooltip!">
|
||||
Hover me
|
||||
</button>
|
||||
|
||||
<div class="top-navigation">
|
||||
<div class="homebutton">
|
||||
<a href="https://vdrd.de">
|
||||
<div class="navbar">
|
||||
<div class="navbar-brand">
|
||||
<a class="button" href="https://vdrd.de">
|
||||
<b data-i18n-key="back-to-home">zurück zur Homepage</b>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<div class="content">
|
||||
<h1 data-i18n-key="app-name">Käfigrechner</h1>
|
||||
<h1 data-i18n-key="app-name" class="title is-1">Käfigrechner</h1>
|
||||
<div class="container-form">
|
||||
<div class="cards" id="container-cages">
|
||||
<div class="card" id="card-SavicSuiteRoyaleXL">
|
||||
<label for="SavicSuiteRoyaleXL">
|
||||
<input type="checkbox" id="SavicSuiteRoyaleXL"/>
|
||||
<div class="card-photo">
|
||||
<img alt-i18n-key="alt-savic-xl" src="assets/img/savic-xl.jpeg">
|
||||
</div>
|
||||
<div class="info-container">
|
||||
<h4><b>Savic Suite Royale XL</b></h4>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="card" id="card-SavicSuiteRoyale95Double">
|
||||
<label for="SavicSuiteRoyale95Double">
|
||||
<input type="checkbox" id="SavicSuiteRoyale95Double"/>
|
||||
<div class="card-photo">
|
||||
<div>
|
||||
<img alt-i18n-key="alt-savic-95-double" src="assets/img/savic-95-double.jpg">
|
||||
</div>
|
||||
<div class="info-container">
|
||||
<h4><b>Savic Suite Royale 95 Double</b></h4>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="card" id="card-TiakiKleintierkäfigEtagere">
|
||||
<label for="TiakiKleintierkäfigEtagere">
|
||||
<input type="checkbox" id="TiakiKleintierkäfigEtagere"/>
|
||||
<div class="card-photo">
|
||||
<img alt-i18n-key="alt-tiaki" src="assets/img/tiaki.jpeg">
|
||||
</div>
|
||||
<div class="info-container">
|
||||
<h4><b>TIAKI Kleintierkäfig Étagère</b></h4>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="card" id="card-ManualMeasurements">
|
||||
<label data-i18n-key="cage-measurements" for="form-cage-measurements">Käfigmaße</label>
|
||||
<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">
|
||||
<div class="input-measurement">
|
||||
<label for="width" data-i18n-key="width-cm">Breite (cm)</label>
|
||||
<input class="measurement" type="number" id="width">
|
||||
<label for="width" class="label" data-i18n-key="width-cm">Breite (cm)</label>
|
||||
<input class="input" type="number" id="width">
|
||||
</div>
|
||||
<div class="input-measurement">
|
||||
<label for="depth" data-i18n-key="depth-cm">Tiefe (cm)</label>
|
||||
<input class="measurement" type="number" id="depth">
|
||||
</div>
|
||||
<div class="input-measurement">
|
||||
<label for="height" data-i18n-key="height-cm">Höhe (cm)</label>
|
||||
<input class="measurement" type="number" id="height">
|
||||
<label for="depth" class="label" data-i18n-key="depth-cm">Tiefe (cm)</label>
|
||||
<input class="input" type="number" id="depth">
|
||||
</div>
|
||||
<label for="height" class="label" data-i18n-key="height-cm">Höhe (cm)</label>
|
||||
<input class="input" type="number" id="height">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -92,8 +47,8 @@
|
||||
|
||||
<div class="container-inputs">
|
||||
<div class="input-element">
|
||||
<label for="numFullFloors" data-i18n-key="full-floors">Vollebenen</label>
|
||||
<div class="tooltip">
|
||||
<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"
|
||||
@@ -104,32 +59,42 @@
|
||||
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 class="tooltiptext" data-i18n-key="full-floors-tooltip">Als Vollebenen zählen alle Ebenen die größer als 0.5m² sind, inklusive des Käfigbodens.</span>
|
||||
</div>
|
||||
<div class="ncontainer">
|
||||
<div class="input-group">
|
||||
<button id="decreaseFloorNum">-</button>
|
||||
<input type="text" id="numFullFloors" value="3" readonly>
|
||||
<button id="increaseFloorNum">+</button>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="input-element">
|
||||
<div class="slidecontainer">
|
||||
<label for="numRats" id="labelNumRats"></label>
|
||||
<input type="range" min="3" max="15" value="4" class="slider" id="numRats">
|
||||
<div class="ncontainer">
|
||||
<div class="input-group">
|
||||
<button id="decreaseFloorNum">-</button>
|
||||
<input type="text" id="numFullFloors" value="3" readonly>
|
||||
<button id="increaseFloorNum">+</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container output-element">
|
||||
<strong data-i18n-key="result">Ergebnis</strong>
|
||||
<div id="resultsDiv"></div>
|
||||
<div class="input-element">
|
||||
<div class="slidecontainer">
|
||||
<label for="numRats" id="labelNumRats"></label>
|
||||
<input type="range" min="3" max="15" value="4" class="slider" id="numRats">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container output-element">
|
||||
<strong data-i18n-key="result">Ergebnis</strong>
|
||||
<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>
|
||||
Reference in New Issue
Block a user