diff options
| author | Sébastien Dailly <sebastien@dailly.me> | 2024-02-24 11:31:28 +0100 |
|---|---|---|
| committer | Sébastien Dailly <sebastien@dailly.me> | 2024-02-24 11:31:28 +0100 |
| commit | ef9beb0814c36cda979a4ed7e9175e72e69540ac (patch) | |
| tree | c2852b1dd5df53f5d78e9e952f29360d50126e06 /calculette_aoo/index.html | |
| parent | 9e7f27c60a425e2baa67cd459d8509a43b1d123d (diff) | |
New application: build upgrade helper for aoo
Diffstat (limited to 'calculette_aoo/index.html')
| -rw-r--r-- | calculette_aoo/index.html | 180 |
1 files changed, 180 insertions, 0 deletions
diff --git a/calculette_aoo/index.html b/calculette_aoo/index.html new file mode 100644 index 0000000..6dd2955 --- /dev/null +++ b/calculette_aoo/index.html @@ -0,0 +1,180 @@ +<!DOCTYPE html> +<html> +<head> +<title>AOO PC Builder</title> +<meta charset="UTF-8"> +<meta name="viewport" content="width=device-width, initial-scale=1"> + +<link rel="stylesheet" type="text/css" href="/theme/font-awesome/css/fontawesome.css"> +<link rel="stylesheet" type="text/css" href="/theme/font-awesome/css/brands.css"> +<link rel="stylesheet" type="text/css" href="/theme/font-awesome/css/solid.css"> + + +<style> +* { + box-sizing: border-box; +} + +/* Style the body */ +body { + font-family: Arial; + margin: 0; +} + +/* Header/logo Title */ +.header { + padding: 50px; + text-align: center; + color: white; + background-color: #333; +} + +/* Column container */ +.row { + display: grid; + grid-auto-flow: column; +} + +.side { + flex: 30%; + padding: 20px; +} + +/* Main column */ +.main { + flex: 70%; + background-color: white; + padding: 20px; +} + +input[type='text'] { font-size: 24px; } + +fieldset { + display: table; +} +fieldset div { + display: table-row; +} + +fieldset label { + display: table-cell; + padding-right: 20px; + vertical-align: middle; +} + +textarea { + width: 100%; + height: 300px; +} + +table tr td input { width: 2em; text-align: center} +table tr td input.wellplaced { background-color: lightgreen;} +table tr td input.misplaced { background-color: gold;} +tr:first-child { outline: thin solid; } + +/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */ +@media screen and (max-width: 700px) { + .row, .navbar { + flex-direction: column; + } +} +</style> +</head> +<body> + +<!-- Header --> +<div class="header"> + <h1>AOO PC Builder</h1> +</div> + +<!-- The flexible grid (content) --> +<div class="main"> + <div> + <noscript>Sorry, you need to enable JavaScript to see this page.</noscript> + <script id="lib" type="text/javascript" defer="defer" src="js/aoo.js"></script> + <script> + var script = document.getElementById('lib'); + script.addEventListener('load', function() { + lib.run(); + }); + </script> + </div> + <form id="form" > + <div class="row"> + <fieldset> + <div> + <label for="a">A</label> + <input type="number" id="a" name="a" value="2"/> + </div> + <div> + <label for="m">M</label> + <input type="number" id="m" name="m" value="5"/> + </div> + <div> + <label for="fm">FM</label> + <input type="number" id="fm" name="fm" value="9"/> + </div> + <div> + <label for="rm">RM</label> + <input type="number" id="rm" name="rm" value="7"/> + </div> + <div> + <label for="pm">PM</label> + <input type="number" id="pm" name="pm" value="40"/> + </div> + </fieldset> + <fieldset> + <div> + <label for="a">Upgrade A</label> + <input type="number" id="a_bonus" name="a" value="0"/> + </div> + <div> + <label for="m">Upgrade M</label> + <input type="number" id="m_bonus" name="m" value="0"/> + </div> + <div> + <label for="fm">Upgrade FM</label> + <input type="number" id="fm_bonus" name="fm" value="0"/> + </div> + <div> + <label for="rm">Upgrade RM</label> + <input type="number" id="rm_bonus" name="rm" value="0"/> + </div> + <div> + <label for="pm">Upgrade PM</label> + <input type="number" id="pm_bonus" name="pm" value="0"/> + </div> + </fieldset> + </div> + <div class="row"> + <fieldset> + <div> + <label for="xp">XP à dépenser</label> + <input type="number" id="xp" name="xp" value="1000"/> + </div> + <div> + <label for="tours">Tour de combats</label> + <input type="number" id="tours" name="tours" value="5"/> + </div> + <div> + <label for="cost">Couts du sort</label> + <input type="number" id="cost" name="cost" value="8"/> + </div> + <div> + <label for="dammage">Dégats du sort</label> + <input type="number" id="dammage" name="dammage" value="6"/> + </div> + <div> + <label for="fm_oponent">FM de l’adversaire</label> + <input type="number" id="fm_oponent" name="fm_oponent" value="10"/> + </div> + </fieldset> + </div> + <input id="send" type="submit" value="Charger"/> + </form> + <h2>Résultats</h2> + <textarea id="result" > + </textarea> +</div> +</body> +</html> |