|
|
Line 1: |
Line 1: |
− | <style> /* <source lang="css"> */
| |
− | #troop-background {
| |
− | position: absolute;
| |
− | top: 0px;
| |
− | left: 0px;
| |
− | width: 100%;
| |
− | height: 100%;
| |
− | background: rgba(0,0,0,0.4);
| |
− | z-index: 10;
| |
− | display: none;
| |
− | }
| |
| | | |
− | #troop-background.window-visible {
| |
− | display: block;
| |
− | }
| |
− |
| |
− | #troop-select {
| |
− | position: fixed;
| |
− | width: 250px;
| |
− | height: 100px;
| |
− | top: 300px;
| |
− | left: 300px;
| |
− | background: #eee;
| |
− | -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
| |
− | -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
| |
− | box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
| |
− | -moz-border-radius: 5px;
| |
− | -webkit-border-radius: 5px;
| |
− | border-radius: 5px;
| |
− | padding: 10px;
| |
− | }
| |
− |
| |
− | #troop-filter-selector {
| |
− | width: 140px;
| |
− | }
| |
− |
| |
− | #troop-filter-type {
| |
− | width: 100px;
| |
− | }
| |
− |
| |
− | #troop-filter {
| |
− | width: 104px;
| |
− | }
| |
− |
| |
− | #troop-filter,
| |
− | #troop-select-none,
| |
− | #troop-select-all {
| |
− | background-image: none;
| |
− | background-color: #003378;
| |
− | background: -moz-linear-gradient(top, #0049AB 35%, #003378 65%);
| |
− | background: -webkit-linear-gradient(top, #0049AB 35%, #003378 65%);
| |
− | background: -o-linear-gradient(top, #0049AB 35%, #003378 65%);
| |
− | background: -ms-linear-gradient(top, #0049AB 35%, #003378 65%);
| |
− | background: linear-gradient(to bottom, #0049AB 35%, #003378 65%);
| |
− | border: 1px solid #003378;
| |
− | }
| |
− |
| |
− | #troop-filter:hover,
| |
− | #troop-select-none:hover,
| |
− | #troop-select-all:hover {
| |
− | background: -moz-linear-gradient(top, #003A89 35%, #002960 65%);
| |
− | background: -webkit-linear-gradient(top, #003A89 35%, #002960 65%);
| |
− | background: -o-linear-gradient(top, #003A89 35%, #002960 65%);
| |
− | background: -ms-linear-gradient(top, #003A89 35%, #002960 65%);
| |
− | background: linear-gradient(to bottom, #003A89 35%, #002960 65%);
| |
− | }
| |
− |
| |
− | #troop-filter:active,
| |
− | #troop-select-none:active,
| |
− | #troop-select-all:active {
| |
− | background: -moz-linear-gradient(top, #003378 35%, #0049AB 65%);
| |
− | background: -webkit-linear-gradient(top, #003378 35%, #0049AB 65%);
| |
− | background: -o-linear-gradient(top, #003378 35%, #0049AB 65%);
| |
− | background: -ms-linear-gradient(top, #003378 35%, #0049AB 65%);
| |
− | background: linear-gradient(to bottom, #003378 35%, #0049AB 65%);
| |
− | }
| |
− |
| |
− | #troop-select-none,
| |
− | #troop-select-all {
| |
− | width: 100px;
| |
− | }
| |
− |
| |
− | #troop-filter-cancel,
| |
− | #filter-reset {
| |
− | background-image: none;
| |
− | background-color: #8A1F1F;
| |
− | background: -moz-linear-gradient(top, #C22727 35%, #8A1F1F 65%);
| |
− | background: -webkit-linear-gradient(top, #C22727 35%, #8A1F1F 65%);
| |
− | background: -o-linear-gradient(top, #C22727 35%, #8A1F1F 65%);
| |
− | background: -ms-linear-gradient(top, #C22727 35%, #8A1F1F 65%);
| |
− | background: linear-gradient(to bottom, #C22727 35%, #8A1F1F 65%);
| |
− | border: 1px solid #8A1F1F;
| |
− | }
| |
− |
| |
− | #troop-filter-cancel:hover,
| |
− | #filter-reset:hover {
| |
− | background: -moz-linear-gradient(top, #9B1F1F 35%, #6E1919 65%);
| |
− | background: -webkit-linear-gradient(top, #9B1F1F 35%, #6E1919 65%);
| |
− | background: -o-linear-gradient(top, #9B1F1F 35%, #6E1919 65%);
| |
− | background: -ms-linear-gradient(top, #9B1F1F 35%, #6E1919 65%);
| |
− | background: linear-gradient(to bottom, #9B1F1F 35%, #6E1919 65%);
| |
− | }
| |
− |
| |
− | #troop-filter-cancel:active,
| |
− | #filter-reset:active {
| |
− | background: -moz-linear-gradient(top, #8A1F1F 35%, #C22727 65%);
| |
− | background: -webkit-linear-gradient(top, #8A1F1F 35%, #C22727 65%);
| |
− | background: -o-linear-gradient(top, #8A1F1F 35%, #C22727 65%);
| |
− | background: -ms-linear-gradient(top, #8A1F1F 35%, #C22727 65%);
| |
− | background: linear-gradient(to bottom, #8A1F1F 35%, #C22727 65%);
| |
− | }
| |
− |
| |
− | #troop-filter-execute,
| |
− | #filter-execute {
| |
− | background-image: none;
| |
− | background-color: #337800;
| |
− | background: -moz-linear-gradient(top, #49AB00 35%, #337800 65%);
| |
− | background: -webkit-linear-gradient(top, #49AB00 35%, #337800 65%);
| |
− | background: -o-linear-gradient(top, #49AB00 35%, #337800 65%);
| |
− | background: -ms-linear-gradient(top, #49AB00 35%, #337800 65%);
| |
− | background: linear-gradient(to bottom, #49AB00 35%, #337800 65%);
| |
− | border: 1px solid #337800;
| |
− | }
| |
− |
| |
− | #troop-filter-execute:hover,
| |
− | #filter-execute:hover {
| |
− | background: -moz-linear-gradient(top, #3A8900 35%, #296000 65%);
| |
− | background: -webkit-linear-gradient(top, #3A8900 35%, #296000 65%);
| |
− | background: -o-linear-gradient(top, #3A8900 35%, #296000 65%);
| |
− | background: -ms-linear-gradient(top, #3A8900 35%, #296000 65%);
| |
− | background: linear-gradient(to bottom, #3A8900 35%, #296000 65%);
| |
− | }
| |
− |
| |
− | #troop-filter-execute:active,
| |
− | #filter-execute:active {
| |
− | background: -moz-linear-gradient(top, #337800 35%, #49AB00 65%);
| |
− | background: -webkit-linear-gradient(top, #337800 35%, #49AB00 65%);
| |
− | background: -o-linear-gradient(top, #337800 35%, #49AB00 65%);
| |
− | background: -ms-linear-gradient(top, #337800 35%, #49AB00 65%);
| |
− | background: linear-gradient(to bottom, #337800 35%, #49AB00 65%);
| |
− | }
| |
− | /* </source> */ </style>
| |
− |
| |
− | <table style="text-align: center; border-collapse: collapse;">
| |
− | <tr>
| |
− | <td valign="bottom" rowspan="3"><b>Filters:</b></td>
| |
− | <td colspan="2"><u>Town Hall</u></td>
| |
− | <td colspan="2"><u>Trophies</u></td>
| |
− | </tr>
| |
− | <tr>
| |
− | <td>Min</td>
| |
− | <td>Max</td>
| |
− | <td>Min</td>
| |
− | <td>Max</td>
| |
− | <td style="text-align: left;">
| |
− | <button type="button" id="troop-filter" onclick="troopFilterInitiate()">Troop Filter</button>
| |
− | <span id="troop-filter-type-text" title="Will show all attack strategies that include at least one of the selected troop types." style="font-weight: bold;">Includes</span>
| |
− | <span id="troop-filter-text" style="font-weight: bold;">All</span></td>
| |
− | </tr>
| |
− | <tr>
| |
− | <td><input type="number" id="min-town-hall" value="1" style="text-align: right; width: 50px;"></input></td>
| |
− | <td><input type="number" id="max-town-hall" style="text-align: right; width: 50px;"></input></td>
| |
− | <td><input type="number" id="min-trophies" value="0" style="text-align: right; width: 50px;"></input></td>
| |
− | <td><input type="number" id="max-trophies" style="text-align: right; width: 50px;"></input></td>
| |
− | <td style="text-align: left;">
| |
− | <button type="button" id="filter-execute" onclick="attackStrategyFilter()" style="font-weight: bold;">Go!</button>
| |
− | <button type="button" id="filter-reset" onclick="attackStrategyReset()" style="font-weight: bold;">Reset</button>
| |
− | </td>
| |
− | </tr>
| |
− | </table>
| |
− |
| |
− | <div id="troop-background">
| |
− | <div id="troop-select">
| |
− | <table width="100%" style="text-align: center;">
| |
− | <tr>
| |
− | <td style="text-align: right;">
| |
− | <select id="troop-filter-selector" size="4" multiple="multiple">
| |
− | <option selected value="Barbarian">Barbarian</option>
| |
− | <option selected value="Archer">Archer</option>
| |
− | <option selected value="Goblin">Goblin</option>
| |
− | <option selected value="Giant">Giant</option>
| |
− | <option selected value="Wall Breaker">Wall Breaker</option>
| |
− | <option selected value="Balloon">Balloon</option>
| |
− | <option selected value="Wizard">Wizard</option>
| |
− | <option selected value="Healer">Healer</option>
| |
− | <option selected value="Dragon">Dragon</option>
| |
− | <option selected value="P.E.K.K.A">P.E.K.K.A</option>
| |
− | <option selected value="Minion">Minion</option>
| |
− | <option selected value="Hog Rider">Hog Rider</option>
| |
− | <option selected value="Valkyrie">Valkyrie</option>
| |
− | <option selected value="Golem">Golem</option>
| |
− | <option selected value="Witch">Witch</option>
| |
− | <option selected value="Lava Hound">Lava Hound</option>
| |
− | </select>
| |
− | </td>
| |
− | <td valign="top" style="text-align: left;">
| |
− | <button type="button" id="troop-select-all" onclick="troopSelectAll()">All</button>
| |
− | <br/>
| |
− | <button type="button" id="troop-select-none" onclick="troopSelectNone()">None</button>
| |
− | <br/>
| |
− | <select id="troop-filter-type">
| |
− | <option selected value="Includes">Includes</option>
| |
− | <option value="Excludes">Excludes</option>
| |
− | <option value="Only">Only</option>
| |
− | </select>
| |
− | </td>
| |
− | </tr>
| |
− | <tr>
| |
− | <td colspan="2">
| |
− | <button type="button" id="troop-filter-cancel" onclick="troopFilterCancel()">Cancel</button>
| |
− | <span width="2px"></span>
| |
− | <button type="button" id="troop-filter-execute" onclick="troopFilterExecute()">OK</button>
| |
− | </td>
| |
− | </tr>
| |
− | </table>
| |
− | </div>
| |
− | </div>
| |
− |
| |
− | <script>
| |
− |
| |
− | window.onload = function() {
| |
− | importArticle({ type: "script", article: "MediaWiki:Common.js/AttackStrategies.js" });
| |
− | };
| |
− | </script>
| |