142 lines
5.1 KiB
HTML
142 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head lang="en">
|
|
<meta charset="UTF-8">
|
|
<meta name="author" content="Adam Skotarczak">
|
|
|
|
<title>Avorion Distance Calculator</title>
|
|
<link rel="stylesheet" href="css/main.css" type="text/css">
|
|
|
|
<!-- Material Design Lite begin -->
|
|
<link rel="stylesheet" href="libs/material.orange-deep_orange.min.css" />
|
|
<script defer src="libs/material.1-3-0.min.js"></script>
|
|
<!-- Material Design Lite end -->
|
|
|
|
<script src="libs/jquery-3.6.0.min.js"></script>
|
|
|
|
<script>
|
|
$(document).ready(function(){
|
|
/* Hier der jQuery-Code */
|
|
});
|
|
</script>
|
|
|
|
<!--Hier wird die externe JavaScript-Datei zum berechnen eingebunden -->
|
|
<script src="js/main.js"></script>
|
|
</head>
|
|
<body onload="start();">
|
|
|
|
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
|
|
<div class="mdl-layout__drawer">
|
|
<span class="mdl-layout-title"> </span>
|
|
<nav class="mdl-navigation">
|
|
|
|
<!-- left Menue
|
|
<a class="mdl-navigation__link" href="">Link</a>
|
|
-->
|
|
|
|
</nav>
|
|
</div>
|
|
<main class="mdl-layout__content">
|
|
<div class="page-content">
|
|
|
|
<!-- Your content goes here begin -->
|
|
|
|
<!-- Numeric Textfield with Floating Label -->
|
|
<div class="Titel">
|
|
Avorion Distance Calculator
|
|
</div>
|
|
<div>
|
|
<p>
|
|
<a href="https://github.com/realAscot/AvorionDistanceCalculator/releases">
|
|
<img src="https://camo.githubusercontent.com/a0a3d08faacbf827e5824b3333edc96945e5c1a0b4ba67568ffe6f0fc7f4cbf3/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f7265616c4173636f742f41766f72696f6e44697374616e636543616c63756c61746f723f736f72743d73656d766572" alt="GitHub release (latest by semver)" data-canonical-src="https://img.shields.io/github/v/release/realAscot/AvorionDistanceCalculator?sort=semver" style="max-width: 100%;">
|
|
</a>
|
|
</p>
|
|
</div>
|
|
<div class="Feldbeschreibung">
|
|
Starting coordinates:
|
|
</div>
|
|
<form action="#" onsubmit="calculate(); return false;">
|
|
|
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
|
<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="koordinateX">
|
|
<label class="mdl-textfield__label" for="koordinateX">Koordinate X ...</label>
|
|
<span class="mdl-textfield__error">Input is not a number!</span>
|
|
</div>
|
|
|
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
|
<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="koordinateY">
|
|
<label class="mdl-textfield__label" for="koordinateY">Koordinate Y ...</label>
|
|
<span class="mdl-textfield__error">Input is not a number!</span>
|
|
</div>
|
|
|
|
<!-- Raised button with ripple -->
|
|
<button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Calculate</button>
|
|
</form>
|
|
<div style="padding-top: 25px;">
|
|
<table class="tabelle-ergebniss">
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<div class="Ergebniss">Result:</div>
|
|
</td>
|
|
<td style="width: 100%;">
|
|
<div class="Ergebniss" id="result">
|
|
-
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
<!-- Distanztabelle -->
|
|
<table class="distanztabelle">
|
|
<tbody>
|
|
<tr style="background-color:#FFB380;">
|
|
<td class="distaceTableColumn">Iron:</td>
|
|
<td class="distaceTableColumn">overall</td>
|
|
</tr>
|
|
<tr style="background-color:#FFFFFF;">
|
|
<td class="distaceTableColumn">Titanium:</td>
|
|
<td class="distaceTableColumn">from 420 sectors to the center</td>
|
|
</tr>
|
|
<tr style="background-color:#4DFF4D;">
|
|
<td class="distaceTableColumn">Naonit:</td>
|
|
<td class="distaceTableColumn">from 360 sectors to the center</td>
|
|
</tr>
|
|
<tr style="background-color:dodgerblue">
|
|
<td class="distaceTableColumn">Trinium:</td>
|
|
<td class="distaceTableColumn">from 290 sectors to the center</td>
|
|
</tr>
|
|
<tr style="background-color:gold;">
|
|
<td class="distaceTableColumn">Xanion:</td>
|
|
<td class="distaceTableColumn">from 210 sectors to the center</td>
|
|
</tr>
|
|
<tr style="background-color:coral;">
|
|
<td class="distaceTableColumn">Orgonit:</td>
|
|
<td class="distaceTableColumn">from 145 sectors to the center</td>
|
|
</tr>
|
|
<tr style="background-color:#FF2626;">
|
|
<td class="distaceTableColumn">Avorion:</td>
|
|
<td class="distaceTableColumn">from 75 sectors to the center</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
<hr>
|
|
<div>
|
|
<p class="version" id="version">
|
|
</p>
|
|
<!-- Your content goes here end -->
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</body>
|
|
</html> |