Major CSS improvements. New icons.

application/page/Catalog_Page.php

@@ -12,14 +12,17 @@
         /**
          * Array of arrays of monsters, grouped by attribute id.
          */
-	   public $monsters = [];
-	   
-	   public $filters = [
-	       "element" => "",
-	       "name" => "",
-	       "min_stars" => 1,
-	       "max_stars" => 6,
-	   ];
+        public $monsters = [];
+
+        /**
+         * The filters the page can handle.
+         */
+        public $filters = [
+            "element" => "",
+            "name" => "",
+            "min_stars" => 1,
+            "max_stars" => 6,
+        ];
 
         /**
          * Constructor.
@@ -43,7 +46,11 @@
             $this->description = "Catalog of all monsters";
             $this->canonical = $root . "catalog/";
         }
-        
+
+        /**
+         * Parses the request looking for the selected filters, validates them
+         * and adds them to the $filters array.
+         */
         private function parse_filters(){
             if (isset($_GET["element"])){
                 $f_element = strtoupper($_GET["element"]);
@@ -62,7 +69,13 @@
             }
             return;
         }
-        
+
+        /**
+         * Builds the query to the rune table using the selected or default
+         * filters.
+         * 
+         * @return The query to be executed.
+         */
         private function build_query(){
             $s = "SELECT id FROM k_monster WHERE obtainable = 1 AND awakens_from IS NULL AND natural_stars >= " . $this->filters["min_stars"] . " AND natural_stars <= " . $this->filters["max_stars"];
             if (strlen($this->filters["element"]) > 0){

application/page/Fusion_Page.php

@@ -2,6 +2,7 @@
 
     require_once($path["page"] . "Page.php");
     require_once($path["entity"] . "K_Fusion.php");
+    require_once($path["entity"] . "K_Monster.php");
 
 
     /**
@@ -10,10 +11,22 @@
     class Fusion_Page extends Page{
 
         /**
-         * List of top-level fusions.
+         * List of top-level {@see K_Fusion}s to display.
          */
         public $fusion = [];
 
+        /**
+         * List of top-level fuseable {@see K_Monster}s (for filter).
+         */
+        public $products = [];
+
+        /**
+         * The filters the page can handle.
+         */
+        public $filters = [
+            "product" => 0,
+        ];
+
         /**
          * Constructor.
          *
@@ -26,12 +39,18 @@
             global $root;
             parent::__construct($db);
             $this->view = $path["view"] . "fusion.php";
+            $this->parse_filters();
             $s =
               "SELECT DISTINCT product " .
               "FROM k_fusion " .
               "WHERE stars = 5 " .
               "ORDER BY stars DESC; ";
             $q = $this->db->query($s);
+            while ($r = $q->fetchArray(SQLITE3_ASSOC)){
+                array_push($this->products, new K_Monster($this->db, $r["product"]));
+            }
+            $s = $this->build_query();
+            $q = $this->db->query($s);
             while ($r = $q->fetchArray(SQLITE3_ASSOC)){
                 array_push($this->fusion, new Fusion($this->db, $r["product"]));
             }
@@ -39,5 +58,34 @@
             $this->description = "Fusion chart";
             $this->canonical = $root . "fusion/";
         }
+
+        /**
+         * Parses the request looking for the selected filters, validates them
+         * and adds them to the $filters array.
+         */
+        private function parse_filters(){
+            if (isset($_GET["product"]) && intval($_GET["product"]) > 0){
+                $this->filters["product"] = $_GET["product"];
+            }
+            return;
+        }
+
+        /**
+         * Builds the query to the rune table using the selected or default
+         * filters.
+         * 
+         * @return The query to be executed.
+         */
+        private function build_query(){
+            $s =
+              "SELECT DISTINCT product " .
+              "FROM k_fusion " .
+              "WHERE stars = 5 ";
+            if ($this->filters["product"] > 0){
+                $s = $s . " AND product = " . strtoupper($this->filters["product"]) . " ";
+            }
+            $s = $s . "ORDER BY stars DESC;";
+            return $s;
+        }
     }
 ?>

application/page/Monsters_Page.php

@@ -14,7 +14,7 @@
         public $monsters = [];
 
         /**
-         * The filters the page canhandle.
+         * The filters the page can handle.
          */
         public $filters = [
             "element" => "",

application/page/Report_Skillup_Page.php

@@ -15,9 +15,9 @@
         public $monsters = [];
 
         public $filters = [
-            "min_stars" => 1,
+            "min_stars" => 5,
             "max_stars" => 6,
-            "min_natural_stars" => 1,
+            "min_natural_stars" => 5,
             "max_natural_stars" => 5,
             "in_storage" => true,
             "without_runes" => true

application/view/catalog.php

@@ -33,127 +33,152 @@
 <?php
         include __DIR__ . "/inc/header.php";
 ?>
-            <section class='filters'>
-                <h2>
-                    Catalog filters
-                </h2>
-                <form action='/catalog/' method='get'>
-                    <table>
-                        <tr>
-                            <td class='filter'>
-                                <span>Element:</span>
+        <section class='filters'>
+            <h2>
+                Catalog filters
+            </h2>
+            <form action='/catalog/' method='get'>
+                <table>
+                    <tr>
+                        <td class='filter'>
+                            <span>Element:</span>
 <?php
-                                $fire_selected = "";
-                                $water_selected = "";
-                                $wind_selected = "";
-                                $light_selected = "";
-                                $dark_selected = "";
-                                switch (strtoupper($page->filters["element"])){
-                                    case "FIRE":
-                                        $fire_selected = "selected='selected'";
-                                        break;
-                                    case "WATER":
-                                        $water_selected = "selected='selected'";
-                                        break;
-                                    case "WIND":
-                                        $wind_selected = "selected='selected'";
-                                        break;
-                                    case "LIGHT":
-                                        $light_selected = "selected='selected'";
-                                        break;
-                                    case "DARK":
-                                        $dark_selected = "selected='selected'";
-                                        break;
-                                }
+                            $fire_selected = "";
+                            $water_selected = "";
+                            $wind_selected = "";
+                            $light_selected = "";
+                            $dark_selected = "";
+                            switch (strtoupper($page->filters["element"])){
+                                case "FIRE":
+                                    $fire_selected = "selected='selected'";
+                                    break;
+                                case "WATER":
+                                    $water_selected = "selected='selected'";
+                                    break;
+                                case "WIND":
+                                    $wind_selected = "selected='selected'";
+                                    break;
+                                case "LIGHT":
+                                    $light_selected = "selected='selected'";
+                                    break;
+                                case "DARK":
+                                    $dark_selected = "selected='selected'";
+                                    break;
+                            }
 ?>
-                                <select name='element' id='filter_type'>
-                                    <option value=''>All</option>
-                                    <option value='Fire' <?=$fire_selected?>>Fire</option>
-                                    <option value='Water' <?=$water_selected?>>Water</option>
-                                    <option value='Wind' <?=$wind_selected?>>Wind</option>
-                                    <option value='Light' <?=$light_selected?>>Light</option>
-                                    <option value='Dark' <?=$dark_selected?>>Dark</option>
-                                </select>
-                            </td>
-                            <td class='filter'>
-                                <span>Name:</span>
-                                <input type='text' name='name' id='filter_name' value='<?=$page->filters["name"]?>'/>
-                            </td>
-                            <td class='filter' id='filter_stars'>
-                                <span>Min. stars:</span>
-                                <input type='number' name='min_stars' id='filter_stars_min' min='1' max='6' value='<?=$page->filters["min_stars"]?>'/>
-                                <br/>
-                                <span>Max. stars:</span>
-                                <input type='number' name='max_stars' id='filter_stars_max' min='1' max='6' value='<?=$page->filters["max_stars"]?>'/>
-                            </td>
-                        </tr>
-                    </table>
-                    <div id='filter_apply'>
-                        <input type='submit' value='Apply'/>
-                    </div>
-                </form>
-            </section> <!-- #filters -->
-            <section class='list'>
-                <h2>
-                    Catalog
-                </h2>
-                <article>
+                            <select name='element' id='filter_type'>
+                                <option value=''>All</option>
+                                <option value='Fire' <?=$fire_selected?>>Fire</option>
+                                <option value='Water' <?=$water_selected?>>Water</option>
+                                <option value='Wind' <?=$wind_selected?>>Wind</option>
+                                <option value='Light' <?=$light_selected?>>Light</option>
+                                <option value='Dark' <?=$dark_selected?>>Dark</option>
+                            </select>
+                        </td>
+                        <td class='filter' id='filter_stars'>
+                            <span>Stars:</span>
+                            <input type='number' name='min_stars' id='filter_stars_min' min='1' max='6' value='<?=$page->filters["min_stars"]?>'/>
+                            -
+                            <input type='number' name='max_stars' id='filter_stars_max' min='1' max='6' value='<?=$page->filters["max_stars"]?>'/>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class='filter' colspan='2'>
+                            <span>Name:</span>
+                            <input type='text' name='name' id='filter_name' value='<?=$page->filters["name"]?>'/>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class='filter' colspan='2'>
 <?php
-                    $element = "";
-                    foreach ($page->monsters as $mon){
-                        if ($mon->element != $element){
-                            if ($element != ""){
+                            $checked = "";
+                            if ($page->filters["in_storage"]){
+                                $checked = "checked";
+                            }
 ?>
-                                </article>
-                                <article>
+                            <input type='checkbox' name='in_storage' <?=$checked?>/>
+                            Show monsters in storage
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class='filter' colspan='2'>
 <?php
+                            $checked = "";
+                            if ($page->filters["without_runes"]){
+                                $checked = "checked";
                             }
-                            $element = $mon->element;
-                        }
-                        if ($mon->awakens_from == "" && $mon->awakens_to == ""){
-                            // No to, no from, silver monster.
-                            $star_class ="star_silver";
-                            $mon_title = $mon->element . " " . $mon->name;
+?>
+                            <input type='checkbox' name='without_runes' <?=$checked?>/>
+                            Show monsters without runes
+                        </td>
+                    </tr>
+                </table>
+                <div id='filter_apply'>
+                    <input type='submit' value='Apply'/>
+                </div>
+            </form>
+        </section> <!-- #filters -->
+        <section class='list'>
+            <h2>
+                Catalog
+            </h2>
+            <article>
+<?php
+                $element = "";
+                foreach ($page->monsters as $mon){
+                    if ($mon->element != $element){
+                        if ($element != ""){
+?>
+                            </article>
+                            <article>
+<?php
                         }
-                        elseif ($mon->awakens_from =! "" && $mon->awakens_to == ""){
-                            // Already awakened
-                            if ($mon->base_stars - $mon->natural_stars == 1){
-                                // Normal awaken.
-                                $star_class ="star_purple";
-                            }
-                            else{
-                                // Second awaken.
-                                $star_class ="star_red";
-                            }
-                            $mon_title = $mon->name;
+                        $element = $mon->element;
+                    }
+                    if ($mon->awakens_from == "" && $mon->awakens_to == ""){
+                        // No to, no from, silver monster.
+                        $star_class ="star_silver";
+                        $mon_title = $mon->element . " " . $mon->name;
+                    }
+                    elseif ($mon->awakens_from =! "" && $mon->awakens_to == ""){
+                        // Already awakened
+                        if ($mon->base_stars - $mon->natural_stars == 1){
+                            // Normal awaken.
+                            $star_class ="star_purple";
                         }
-                        elseif ($mon->awakens_to =! ""){
-                            // Awakeable.
-                            $star_class ="star_gold";
-                            $mon_title = $mon->element . " " . $mon->name;
+                        else{
+                            // Second awaken.
+                            $star_class ="star_red";
                         }
+                        $mon_title = $mon->name;
+                    }
+                    elseif ($mon->awakens_to =! ""){
+                        // Awakeable.
+                        $star_class ="star_gold";
+                        $mon_title = $mon->element . " " . $mon->name;
+                    }
 ?>
-                        <div class='monster'>
-                            <a href='/catalog/<?=$mon->id?>'>
-                                <div class='monster_panel'>
-                                    <span class='stars'>
+                    <div class='monster'>
+                        <a href='/catalog/<?=$mon->id?>'>
+                            <div class='monster_panel'>
+                                <span class='stars'>
 <?php
-                                        for ($i = 0; $i < $mon->natural_stars; $i ++){
+                                    for ($i = 0; $i < $mon->natural_stars; $i ++){
 ?>
-                                            <img class='star <?=$star_class?>' src='<?=$path["img"]["layout"] . "icon/star.png"?>'/>
+                                        <img class='star <?=$star_class?>' src='<?=$path["img"]["layout"] . "icon/star.png"?>'/>
 <?php
-                                        }
+                                    }
 ?>
-                                    </span>
-                                    <img title='<?=$mon_title?>' class='monster border_<?=$mon->element?>' src='<?=$mon->get_image()?>'/>
-                                </div>
-                            </a>
-                        </div>
+                                </span>
+                                <img title='<?=$mon_title?>' class='monster border_<?=$mon->element?>' src='<?=$mon->get_image()?>'/>
+                            </div>
+                        </a>
+                    </div>
 <?php
-                    }
+                }
 ?>
-                </article>
-            </section> <!-- #catalog -->
+            </article>
+        </section> <!-- #catalog -->
 
 <?php
         include __DIR__ . "/inc/footer.php";

application/view/fusion.php

@@ -33,6 +33,38 @@
 <?php
         include __DIR__ . "/inc/header.php";
 ?>
+        <section class='filters'>
+            <h2>
+                Fusion filter
+            </h2>
+            <form action='/fusion/' method='get'>
+                <table>
+                    <tr>
+                        <td class='filter'>
+                            <select name='product' id='filter_product'>
+                                <option value=''>All</option>
+<?php
+                                foreach ($page->products as $product){
+                                    if ($product->id == $page->filters["product"]){
+                                        $selected = "selected";
+                                    }
+                                    else{
+                                        $selected = "";
+                                    }
+?>
+                                     <option value='<?=$product->id?>' <?=$selected?>><?=$product->element?> <?=$product->name?></option>
+<?php
+                                }
+?>
+                            </select>
+                        </td>
+                    </tr>
+                </table>
+                <div id='filter_apply'>
+                    <input type='submit' value='Apply'/>
+                </div>
+            </form>
+        </section> <!-- #filters -->
         <section class='content'>
             <h2>
                 Fusion

application/view/inc/footer.php

@@ -7,8 +7,6 @@
                 <br/>
                 Source code available on <a href='https://github.com'>Github</a> under the GPLv3.
             </td>
-            <td id='footer_center'>
-            </td>
             <td id='footer_right'>
                 Neither I nor this tool are  affiliated with or endorsed by <a href='http://com2us.com/'>Com2uS</a> in any way. The Summoners War logo and the monster images are property of their respective owners (Com2US, probably). Monsters images and info are parsed from <a href='https://swarfarm.com'>https://swarfarm.com</a>.
             </td>

application/view/monster.php

@@ -33,16 +33,16 @@
 <?php
         include __DIR__ . "/inc/header.php";
 ?>
-        <section class='content'>
+        <section id='monster' class='content'>
 <?php
-            if ($mon->monster->awakens_from == "" && $mon->monster->awakens_to == ""){
+            if ($page->monster->monster->awakens_from == "" && $page->monster->monster->awakens_to == ""){
                 // No to, no from, silver monster.
                 $star_class ="star_silver";
-                $mon_title = $mon->monster->element . " " . $mon->monster->name;
+                $mon_title = $page->monster->monster->element . " " . $page->monster->monster->name;
             }
-            elseif ($mon->monster->awakens_from =! "" && $mon->monster->awakens_to == ""){
+            elseif ($page->monster->monster->awakens_from =! "" && $page->monster->monster->awakens_to == ""){
                 // Already awakened
-                if ($mon->monster->base_stars - $mon->monster->natural_stars == 1){
+                if ($page->monster->monster->base_stars - $page->monster->monster->natural_stars == 1){
                     // Normal awaken.
                     $star_class ="star_purple";
                 }
@@ -50,20 +50,21 @@
                     // Second awaken.
                     $star_class ="star_red";
                 }
-                $mon_title = $mon->monster->name;
+                $mon_title = $page->monster->monster->name;
             }
-            elseif ($mon->monster->awakens_to =! ""){
+            elseif ($page->monster->monster->awakens_to =! ""){
                 // Awakeable.
                 $star_class ="star_gold";
-                $mon_title = $mon->monster->element . " " . $mon->monster->name;
+                $mon_title = $page->monster->monster->element . " " . $page->monster->monster->name;
             }
 ?>
+            <h2>
+                <span>
+                    <?=$mon_title?>
+                </span>
+            </h2>
             <article id='profile'>
                 <div class='monster_panel'>
-                    <img title='<?=$mon_title?>' class='monstr=er border_<?=$page->monster->monster->element?>' src='<?=$page->monster->monster->get_image()?>'/>
-                </div>
-                <div id='details'>
-                    <h1><?=$mon_title?></h1>
                     <span class='stars'>
 <?php
                         for ($i = 0; $i < $page->monster->stars; $i ++){
@@ -73,10 +74,11 @@
                         }
 ?>
                     </span>
+                    <img title='<?=$mon_title?>' class='monster border_<?=$page->monster->monster->element?>' src='<?=$page->monster->monster->get_image()?>'/>
                     <span class='level'>
-                        Lv. <?=$page->monster->level?>
+                        <?=$page->monster->level?>
                     </span>
-                </div> <!-- #details -->
+                </div>
 <?php
                 $building_attack = floor(($page->monster->base_attack * $page->building_stats["atk"] / 100) + ($page->monster->base_attack * $page->building_stats["elm"][$page->monster->monster->element] / 100));
                 $building_defense = floor($page->building_stats["def"] * $page->monster->base_defense / 100);
@@ -388,25 +390,32 @@
                     </tr>
                 </table>
             </article> <!-- #profile -->
-            <article id='runes'>
-                <table id='table_runes'>
+        </section>
+        <section id='runes' class='list'>
+            <h2>
+                <span>
+                    Runes
+                </span>
+            </h2>
 <?php
-                    $total_efficiency = 0;
-                    $total_max_efficiency = 0;
-                    $total_reached_efficiency = 0;
-                    $total_level = 0;
-                    $total_stars = 0;
-                    $total_value = 0;
-                    $total_runes = 0;
-                    foreach ($page->monster->rune as $rune){
-                        $total_efficiency += $rune->efficiency;
-                        $total_max_efficiency += $rune->max_efficiency;
-                        $total_reached_efficiency += ($rune->efficiency * 100 / $rune->max_efficiency);
-                        $total_level += $rune->level;
-                        $total_stars += $rune->stars;
-                        $total_value += $rune->value;
-                        $total_runes ++;
+            $total_efficiency = 0;
+            $total_max_efficiency = 0;
+            $total_reached_efficiency = 0;
+            $total_level = 0;
+            $total_stars = 0;
+            $total_value = 0;
+            $total_runes = 0;
+            foreach ($page->monster->rune as $rune){
+                $total_efficiency += $rune->efficiency;
+                $total_max_efficiency += $rune->max_efficiency;
+                $total_reached_efficiency += ($rune->efficiency * 100 / $rune->max_efficiency);
+                $total_level += $rune->level;
+                $total_stars += $rune->stars;
+                $total_value += $rune->value;
+                $total_runes ++;
 ?>
+                <article>
+                    <table class='rune'>
                         <tr>
                             <td class='icon'>
                                 <div class='rune_panel rune_slot_<?=$rune->slot?> rune_level_<?=$rune->level?> rune_quality_<?=$rune->quality?> rune_original_quality_<?=$rune->original_quality?>'>
@@ -416,7 +425,7 @@
 <?php
                                         for ($i = 0; $i < $rune->stars; $i ++){
 ?>
-                                            <img class='star' src='<?=$path["img"]["layout"] . "icon/star_silver.png"?>'/>
+                                            <img class='star' src='<?=$path["img"]["layout"] . "icon/star.png"?>'/>
 <?php
                                         }
 ?>
@@ -675,73 +684,72 @@
                                 </table>
                             </td>
                         </tr>
-                        
+                    </table>
+                </article>
 <?php
-                    }
+            }
 ?>
+            <article id='rune_averages'>
+                <table id='table_averages'>
+                    <tr>
+                        <td class='title'>
+                            Avg. level:
+                        </td>
+                        <td class='value'>
+                            <?=number_format($total_level / $total_runes, 2)?>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class='title'>
+                            Avg. stars:
+                        </td>
+                        <td class='value'>
+                            <?=number_format($total_stars / $total_runes, 2)?>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class='title'>
+                            Avg. value:
+                        </td>
+                        <td class='value'>
+                            <?=number_format($total_value / $total_runes, 2, '.', '')?>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class='title'>
+                            Total value:
+                        </td>
+                        <td class='value'>
+                            <?=$total_value?>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class='title'>
+                            Avg. efficiency:
+                        </td>
+                        <td class='value'>
+                            <?=number_format($total_efficiency / $total_runes, 2)?>%
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class='title'>
+                            Avg. max. efficiency:
+                        </td>
+                        <td class='value'>
+                            <?=number_format($total_max_efficiency / $total_runes, 2)?>%
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class='title'>
+                            Avg. reached efficiency:
+                        </td>
+                        <td class='value'>
+                            <?=number_format($total_reached_efficiency / $total_runes, 2)?>%
+                        </td>
+                    </tr>
                 </table>
-                <div id='rune_averages'>
-                    <table id='table_averages'>
-                        <tr>
-                            <td class='title'>
-                                Avg. level:
-                            </td>
-                            <td class='value'>
-                                <?=number_format($total_level / $total_runes, 2)?>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td class='title'>
-                                Avg. stars:
-                            </td>
-                            <td class='value'>
-                                <?=number_format($total_stars / $total_runes, 2)?>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td class='title'>
-                                Avg. value:
-                            </td>
-                            <td class='value'>
-                                <?=number_format($total_value / $total_runes, 2, '.', '')?>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td class='title'>
-                                Total value:
-                            </td>
-                            <td class='value'>
-                                <?=$total_value?>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td class='title'>
-                                Avg. efficiency:
-                            </td>
-                            <td class='value'>
-                                <?=number_format($total_efficiency / $total_runes, 2)?>%
-                            </td>
-                        </tr>
-                        <tr>
-                            <td class='title'>
-                                Avg. max. efficiency:
-                            </td>
-                            <td class='value'>
-                                <?=number_format($total_max_efficiency / $total_runes, 2)?>%
-                            </td>
-                        </tr>
-                        <tr>
-                            <td class='title'>
-                                Avg. reached efficiency:
-                            </td>
-                            <td class='value'>
-                                <?=number_format($total_reached_efficiency / $total_runes, 2)?>%
-                            </td>
-                        </tr>
-                    </table>
-                </div>
             </article>
-        </section> <!-- #monster -->
+        </section> <!-- runes -->
 
 <?php
         include __DIR__ . "/inc/footer.php";

application/view/monster_info.php

@@ -56,13 +56,12 @@
                 }
 ?>
                 <section class='content'>
+                    <h2>
+                        <?=$mon_title?>
+                    </h2>
                     <article class='stage'>
                         <div class='profile'>
                             <div class='monster_panel'>
-                                <img title='<?=$mon_title?>' class='monster border_<?=$page->monster[$i]->element?>' src='<?=$page->monster[$i]->get_image()?>'/>
-                            </div>
-                            <div class='details'>
-                                <h4><?=$mon_title?></h4>
                                 <span class='stars'>
 <?php
                                     for ($j = 0; $j < $page->monster[$i]->base_stars; $j ++){
@@ -72,12 +71,18 @@
                                     }
 ?>
                                 </span>
-                                <span class='archetype'>
-                                    <?=$page->monster[$i]->archetype?>
-                                </span>
-                            </div> <!-- #details -->
+                                <img title='<?=$mon_title?>' class='monster border_<?=$page->monster[$i]->element?>' src='<?=$page->monster[$i]->get_image()?>'/>
+                            </div>
                         </div>
                         <table class='stats'>
+                            <tr>
+                                <th>
+                                    Type
+                                </th>
+                                <th>
+                                    <?=$page->monster[$i]->archetype?>
+                                </th>
+                            </tr>
                             <tr>
                                 <th>
                                     ATK

application/view/monsters.php

@@ -75,18 +75,21 @@
                                     <option value='Dark' <?=$dark_selected?>>Dark</option>
                                 </select>
                             </td>
-                            <td class='filter'>
-                                <span>Name:</span>
-                                <input type='text' name='name' id='filter_name' value='<?=$page->filters["name"]?>'/>
-                            </td>
                             <td class='filter' id='filter_stars'>
-                                <span>Min. stars:</span>
+                                <span>Stars:</span>
                                 <input type='number' name='min_stars' id='filter_stars_min' min='1' max='6' value='<?=$page->filters["min_stars"]?>'/>
-                                <br/>
-                                <span>Max. stars:</span>
+                                -
                                 <input type='number' name='max_stars' id='filter_stars_max' min='1' max='6' value='<?=$page->filters["max_stars"]?>'/>
                             </td>
-                            <td class='filter'>
+                        </tr>
+                        <tr>
+                            <td class='filter' colspan='2'>
+                                <span>Name:</span>
+                                <input type='text' name='name' id='filter_name' value='<?=$page->filters["name"]?>'/>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class='filter' colspan='2'>
 <?php
                                 $checked = "";
                                 if ($page->filters["in_storage"]){
@@ -95,7 +98,10 @@
 ?>
                                 <input type='checkbox' name='in_storage' <?=$checked?>/>
                                 Show monsters in storage
-                                <br/>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class='filter' colspan='2'>
 <?php
                                 $checked = "";
                                 if ($page->filters["without_runes"]){

application/view/report.php

@@ -45,29 +45,36 @@
                         It sorts monster not by the absolute ammount of remaining power-ups, but by a ponderated list tht takes into account to which skills the previous power ups have gone, placing more value in the more advanced skills. 
                     </p>
                     <div class='report_filters'>
-                        <div class='filter' id='filter_stars'>
-                            <span>Min. stars:</span>
-                            <input type='number' name='min_stars' id='filter_stars_min' min='1' max='6' value='5'/>
-                            <br/>
-                            <span>Max. stars:</span>
-                            <input type='number' name='max_stars' id='filter_stars_max' min='1' max='6' value='6'/>
-                        </div>
-                        <div class='filter' id='filter_stars'>
-                            <span>Min. natural stars:</span>
-                            <input type='number' name='min_natural_stars' id='filter_stars_min' min='1' max='5' value='1'/>
-                            <br/>
-                            <span>Max. natural stars:</span>
-                            <input type='number' name='max_natural_stars' id='filter_stars_max' min='1' max='5' value='5'/>
-                        </div>
-                        <div class='filter'>
-                            <input type='checkbox' name='in_storage'/>
-                            Show monsters in storage
-                            <br/>
-                            <input type='checkbox' name='without_runes'/>
-                            Show monsters without runes
-                        </div>
+                        <table>
+                            <tr>
+                                <td class='filter' id='filter_stars'>
+                                    <span>Stars:</span>
+                                    <input type='number' name='min_stars' min='1' max='6' value='5'/>
+                                    -
+                                    <input type='number' name='max_stars'  min='1' max='6' value='6'/>
+                                </td>
+                                <td class='filter' id='filter_stars'>
+                                    <span>Natural stars:</span>
+                                    <input type='number' name='min_natural_stars' min='1' max='5' value='5'/>
+                                    -
+                                    <input type='number' name='max_natural_stars' min='1' max='5' value='5'/>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class='filter' colspan='2'>
+                                    <input type='checkbox' name='in_storage'/>
+                                    Show monsters in storage
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class='filter' colspan='2'>
+                                    <input type='checkbox' name='without_runes'/>
+                                    Show monsters without runes
+                                </td>
+                            </tr>
+                        </table>
                         <div id='filter_apply'>
-                            <input type='submit' value='Generate'/>
+                            <input type='submit' value='Apply'/>
                         </div>
                     </div>
                 </form>

application/view/report_skillup.php

@@ -33,237 +33,244 @@
 <?php
         include __DIR__ . "/inc/header.php";
 ?>
-            <section class='filters'>
-                <h2>
-                    <span>
-                        Monster filters
-                    </span>
-                </h2>
-                <form action='/report/skillup/' method='get'>
-                    <div class='filter' id='filter_stars'>
-                        <span>Min. stars:</span>
-                        <input type='number' name='min_stars' id='filter_stars_min' min='1' max='6' value='<?=$page->filters["min_stars"]?>'/>
-                        <br/>
-                        <span>Max. stars:</span>
-                        <input type='number' name='max_stars' id='filter_stars_max' min='1' max='6' value='<?=$page->filters["max_stars"]?>'/>
-                    </div>
-                    <div class='filter' id='filter_stars'>
-                        <span>Min. natural stars:</span>
-                        <input type='number' name='min_natural_stars' id='filter_stars_min' min='1' max='5' value='<?=$page->filters["min_natural_stars"]?>'/>
-                        <br/>
-                        <span>Max. natural stars:</span>
-                        <input type='number' name='max_natural_stars' id='filter_stars_max' min='1' max='5' value='<?=$page->filters["max_natural_stars"]?>'/>
-                    </div>
-                    <div class='filter'>
+        <section class='filters'>
+            <h2>
+                <span>
+                    Monster filters
+                </span>
+            </h2>
+            <form action='/report/skillup/' method='get'>
+                <table>
+                    <tr>
+                        <td class='filter' id='filter_stars'>
+                            <span>Stars:</span>
+                            <input type='number' name='min_stars' min='1' max='6' value='<?=$page->filters["min_stars"]?>'/>
+                            -
+                            <input type='number' name='max_stars'  min='1' max='6' value='<?=$page->filters["max_stars"]?>'/>
+                        </td>
+                        <td class='filter' id='filter_stars'>
+                            <span>Natural stars:</span>
+                            <input type='number' name='min_natural_stars' min='1' max='6' value='<?=$page->filters["min_natural_stars"]?>'/>
+                            -
+                            <input type='number' name='max_natural_stars' min='1' max='6' value='<?=$page->filters["max_natural_stars"]?>'/>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class='filter' colspan='2'>
 <?php
-                        $checked = "";
-                        if ($page->filters["in_storage"]){
-                            $checked = "checked";
-                        }
+                            $checked = "";
+                            if ($page->filters["in_storage"]){
+                                $checked = "checked";
+                            }
 ?>
-                        <input type='checkbox' name='in_storage' <?=$checked?>/>
-                        Show monsters in storage
-                        <br/>
+                            <input type='checkbox' name='in_storage' <?=$checked?>/>
+                            Show monsters in storage
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class='filter' colspan='2'>
 <?php
-                        $checked = "";
-                        if ($page->filters["without_runes"]){
-                            $checked = "checked";
-                        }
+                            $checked = "";
+                            if ($page->filters["without_runes"]){
+                                $checked = "checked";
+                            }
 ?>
-                        <input type='checkbox' name='without_runes' <?=$checked?>/>
-                        Show monsters without runes
-                    </div>
-                    <div id='filter_apply'>
-                        <input type='submit' value='Apply'/>
-                    </div>
-                </form>
-            </section> <!-- #filters -->
+                            <input type='checkbox' name='without_runes' <?=$checked?>/>
+                            Show monsters without runes
+                        </td>
+                    </tr>
+                </table>
+                <div id='filter_apply'>
+                    <input type='submit' value='Apply'/>
+                </div>
+            </form>
+        </section> <!-- #filters -->
 <?php
-            $index = 1;
-            foreach ($page->monsters as $mon){
-                if ($mon->monster->awakens_from == "" && $mon->monster->awakens_to == ""){
-                    // No to, no from, silver monster.
-                    $star_src = $path["img"]["layout"] . "icon/star_silver.png";
-                    $mon_title = $mon->monster->element . " " . $mon->monster->name;
-                }
-                elseif ($mon->monster->awakens_from =! "" && $mon->monster->awakens_to == ""){
-                    // Already awakened.
-                    $star_src = $path["img"]["layout"] . "icon/star_aw.png";
-                    $mon_title = $mon->monster->name;
-                }
-                elseif ($mon->monster->awakens_to =! ""){
-                    // Awakeable.
-                    $star_src = $path["img"]["layout"] . "icon/star.png";
-                    $mon_title = $mon->monster->element . " " . $mon->monster->name;
-                }
-                if ($mon->monster->awakens_from == "" && $mon->monster->awakens_to == ""){
-                    // No to, no from, silver monster.
-                    $star_class ="star_silver";
-                    $mon_title = $mon->monster->element . " " . $mon->monster->name;
-                }
-                elseif ($mon->monster->awakens_from =! "" && $mon->monster->awakens_to == ""){
-                    // Already awakened
-                    if ($mon->monster->base_stars - $mon->monster->natural_stars == 1){
-                        // Normal awaken.
-                        $star_class = "star_purple";
-                    }
-                    else{
-                        // Second awaken.
-                        $star_class = "star_red";
-                    }
-                    $mon_title = $mon->monster->name;
-                }
-                elseif ($mon->monster->awakens_to =! ""){
-                    // Awakeable.
-                    $star_class = "star_gold";
-                    $mon_title = $mon->monster->element . " " . $mon->monster->name;
-                }
-                switch ($index % 10){
-                    case 1:
-                        $index_title = $index . "<span class='superindex'>st</span> - " . $mon_title;
-                        break;
-                    case 2:
-                        $index_title = $index . "<span class='superindex'>nd</span> - " . $mon_title;
-                        break;
-                    case 3:
-                        $index_title = $index . "<span class='superindex'>rd</span> - " . $mon_title;
-                        break;
-                    default:
-                        $index_title = $index . "<span class='superindex'>th</span> - " . $mon_title;
-                        break;
+        $index = 1;
+        foreach ($page->monsters as $mon){
+            if ($mon->monster->awakens_from == "" && $mon->monster->awakens_to == ""){
+                // No to, no from, silver monster.
+                $star_src = $path["img"]["layout"] . "icon/star_silver.png";
+                $mon_title = $mon->monster->element . " " . $mon->monster->name;
+            }
+            elseif ($mon->monster->awakens_from =! "" && $mon->monster->awakens_to == ""){
+                // Already awakened.
+                $star_src = $path["img"]["layout"] . "icon/star_aw.png";
+                $mon_title = $mon->monster->name;
+            }
+            elseif ($mon->monster->awakens_to =! ""){
+                // Awakeable.
+                $star_src = $path["img"]["layout"] . "icon/star.png";
+                $mon_title = $mon->monster->element . " " . $mon->monster->name;
+            }
+            if ($mon->monster->awakens_from == "" && $mon->monster->awakens_to == ""){
+                // No to, no from, silver monster.
+                $star_class ="star_silver";
+                $mon_title = $mon->monster->element . " " . $mon->monster->name;
+            }
+            elseif ($mon->monster->awakens_from =! "" && $mon->monster->awakens_to == ""){
+                // Already awakened
+                if ($mon->monster->base_stars - $mon->monster->natural_stars == 1){
+                    // Normal awaken.
+                    $star_class = "star_purple";
                 }
-                switch ($index % 100){
-                    case 11:
-                    case 12:
-                    case 13:
-                        $index_title = $index . "<span class='superindex'>th</span> - " . $mon_title;
-                        break;
+                else{
+                    // Second awaken.
+                    $star_class = "star_red";
                 }
+                $mon_title = $mon->monster->name;
+            }
+            elseif ($mon->monster->awakens_to =! ""){
+                // Awakeable.
+                $star_class = "star_gold";
+                $mon_title = $mon->monster->element . " " . $mon->monster->name;
+            }
+            switch ($index % 10){
+                case 1:
+                    $index_title = $index . "<span class='superindex'>st</span> - " . $mon_title;
+                    break;
+                case 2:
+                    $index_title = $index . "<span class='superindex'>nd</span> - " . $mon_title;
+                    break;
+                case 3:
+                    $index_title = $index . "<span class='superindex'>rd</span> - " . $mon_title;
+                    break;
+                default:
+                    $index_title = $index . "<span class='superindex'>th</span> - " . $mon_title;
+                    break;
+            }
+            switch ($index % 100){
+                case 11:
+                case 12:
+                case 13:
+                    $index_title = $index . "<span class='superindex'>th</span> - " . $mon_title;
+                    break;
+            }
 ?>
-                <section class='content'>
-                    <h2>
-                        <span>
-                            <?=$index_title?>
-                        </span>
-                    </h2>
-                    <article>
-                        <div class='monster'>
-                            <div class='profile'>
-                                <div class='monster_panel'>
-                                    <span class='stars'>
+            <section class='content'>
+                <h2>
+                    <span>
+                        <?=$index_title?>
+                    </span>
+                </h2>
+                <article>
+                    <div class='monster'>
+                        <div class='profile'>
+                            <div class='monster_panel'>
+                                <span class='stars'>
 <?php
-                                        for ($i = 0; $i < $mon->stars; $i ++){
+                                    for ($i = 0; $i < $mon->stars; $i ++){
 ?>
-                                            <img class='star <?=$star_class?>' src='<?=$path["img"]["layout"] . "icon/star.png"?>'/>
+                                        <img class='star <?=$star_class?>' src='<?=$path["img"]["layout"] . "icon/star.png"?>'/>
 <?php
-                                        }
+                                    }
 ?>
-                                    </span>
-                                    <img title='<?=$mon_title?>' class='monster border_<?=$mon->monster->element?>' src='<?=$mon->monster->get_image()?>'/>
-                                    <span class='level'>
-                                        <?=$mon->level?>
-                                    </span>
-                                </div>
-                            </div> <!-- .profile -->
-                            <div class='skills'>
+                                </span>
+                                <img title='<?=$mon_title?>' class='monster border_<?=$mon->monster->element?>' src='<?=$mon->monster->get_image()?>'/>
+                                <span class='level'>
+                                    <?=$mon->level?>
+                                </span>
+                            </div>
+                        </div> <!-- .profile -->
+                        <div class='skills'>
 <?php
-                                    $skill_num = 1;
-                                    $absolute_level = 0;
-                                    $absolute_max_level = 0;
-                                    $ponderated_level = 0;
-                                    $ponderated_max_level = 0;
-                                    foreach ($mon->monster->skill as $skill){
+                            $skill_num = 1;
+                            $absolute_level = 0;
+                            $absolute_max_level = 0;
+                            $ponderated_level = 0;
+                            $ponderated_max_level = 0;
+                            foreach ($mon->monster->skill as $skill){
+                                if ($skill->max_level > 1){
+                                    $absolute_max_level += $skill->max_level - 1;
+                                }
+                                switch ($skill_num){
+                                    case 1:
+                                        $cur_lvl = $mon->skill_1_level;
                                         if ($skill->max_level > 1){
-                                            $absolute_max_level += $skill->max_level - 1;
+                                            $absolute_level += $cur_lvl - 1;
+                                            $ponderated_level += $cur_lvl - 1;
+                                            $ponderated_max_level += $skill->max_level - 1;
                                         }
-                                        switch ($skill_num){
-                                            case 1:
-                                                $cur_lvl = $mon->skill_1_level;
-                                                if ($skill->max_level > 1){
-                                                    $absolute_level += $cur_lvl - 1;
-                                                    $ponderated_level += $cur_lvl - 1;
-                                                    $ponderated_max_level += $skill->max_level - 1;
-                                                }
-                                                break;
-                                            case 2:
-                                                $cur_lvl = $mon->skill_2_level;
-                                                if ($skill->max_level > 1){
-                                                    $absolute_level += $cur_lvl - 1;
-                                                    $ponderated_level += ($cur_lvl - 1) * 1.5;
-                                                    $ponderated_max_level += ($skill->max_level - 1) * 1.5;
-                                                }
-                                                break;
-                                            case 3:
-                                                $cur_lvl = $mon->skill_3_level;
-                                                if ($skill->max_level > 1){
-                                                    $absolute_level += $cur_lvl - 1;
-                                                    $ponderated_level += ($cur_lvl - 1) * 2.0;
-                                                    $ponderated_max_level += ($skill->max_level - 1) * 2.0;
-                                                }
-                                                break;
-                                            case 4:
-                                                $cur_lvl = $mon->skill_4_level;
-                                                if ($skill->max_level > 1){
-                                                    $absolute_level += $cur_lvl - 1;
-                                                    $ponderated_level += ($cur_lvl - 1) * 2.5;
-                                                    $ponderated_max_level += ($skill->max_level - 1) * 2.5;
-                                                }
-                                                break;
+                                        break;
+                                    case 2:
+                                        $cur_lvl = $mon->skill_2_level;
+                                        if ($skill->max_level > 1){
+                                            $absolute_level += $cur_lvl - 1;
+                                            $ponderated_level += ($cur_lvl - 1) * 1.5;
+                                            $ponderated_max_level += ($skill->max_level - 1) * 1.5;
                                         }
-                                        $max_lvl = $skill->max_level;
-                                        if ($max_lvl == $cur_lvl){
-                                            $maxed = "maxed";
+                                        break;
+                                    case 3:
+                                        $cur_lvl = $mon->skill_3_level;
+                                        if ($skill->max_level > 1){
+                                            $absolute_level += $cur_lvl - 1;
+                                            $ponderated_level += ($cur_lvl - 1) * 2.0;
+                                            $ponderated_max_level += ($skill->max_level - 1) * 2.0;
                                         }
-                                        else{
-                                            $maxed = "";
+                                        break;
+                                    case 4:
+                                        $cur_lvl = $mon->skill_4_level;
+                                        if ($skill->max_level > 1){
+                                            $absolute_level += $cur_lvl - 1;
+                                            $ponderated_level += ($cur_lvl - 1) * 2.5;
+                                            $ponderated_max_level += ($skill->max_level - 1) * 2.5;
                                         }
+                                        break;
+                                }
+                                $max_lvl = $skill->max_level;
+                                if ($max_lvl == $cur_lvl){
+                                    $maxed = "maxed";
+                                }
+                                else{
+                                    $maxed = "";
+                                }
 ?>
-                                    <div class='skill'>
-                                        <img title='<?=$skill->description?>' src='<?=$skill->get_image()?>'/>
-                                        <span class='skill_level <?=$maxed?>'>
-                                            <?=$cur_lvl?>/<?=$max_lvl?>
-                                        </span>
-                                        <span class='skill_name'>
-                                            <?=$skill->name?>
-                                        </span>
-                                    </div>
+                            <div class='skill'>
+                                <img title='<?=$skill->description?>' src='<?=$skill->get_image()?>'/>
+                                <span class='skill_level <?=$maxed?>'>
+                                    <?=$cur_lvl?>/<?=$max_lvl?>
+                                </span>
+                                <span class='skill_name'>
+                                    <?=$skill->name?>
+                                </span>
+                            </div>
 <?php
-                                        $skill_num ++;
-                                    }
+                                $skill_num ++;
+                            }
 ?>
-                            </div> <!-- #skills -->
-                            <table id='skill_averages'>
-                                <tr>
-                                    <td class='title'>
-                                        Absolute skill-ups:
-                                    </td>
-                                    <td class='value'>
-                                        <?=number_format($absolute_level * 100 / $absolute_max_level, 2)?>%
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td class='title'>
-                                        Ponderated skill-ups:
-                                    </td>
-                                    <td class='value'>
-                                        <?=number_format($ponderated_level * 100 / $ponderated_max_level, 2)?>%
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td class='title'>
-                                        Remaining skill-ups:
-                                    </td>
-                                    <td class='value'>
-                                        <?=$absolute_max_level - $absolute_level?>
-                                    </td>
-                                </tr>
-                            </table>
-                        </div>
-                    </article>
-                </section> 
+                        </div> <!-- #skills -->
+                        <table id='skill_averages'>
+                            <tr>
+                                <td class='title'>
+                                    Absolute skill-ups:
+                                </td>
+                                <td class='value'>
+                                    <?=number_format($absolute_level * 100 / $absolute_max_level, 2)?>%
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class='title'>
+                                    Ponderated skill-ups:
+                                </td>
+                                <td class='value'>
+                                    <?=number_format($ponderated_level * 100 / $ponderated_max_level, 2)?>%
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class='title'>
+                                    Remaining skill-ups:
+                                </td>
+                                <td class='value'>
+                                    <?=$absolute_max_level - $absolute_level?>
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                </article>
+            </section> 
 <?php
-                $index ++;
-            }
+            $index ++;
+        }
 ?>
 
 

public/css/fusion.css

@@ -1,3 +1,8 @@
+.box{
+    border: 0.2em solid #777777;
+    background-color: #655c59;
+}
+
 article{
     text-align: left;
 }
@@ -6,10 +11,13 @@ article div.f5{
     width: 100%;
     margin: 1em 0 2em 4em;
 }
+@media screen and (max-width : 990px){
+    article div.f5{
+        margin: 1em 0 1em 1.5em;
+    }
+}
 
 article div.f5 .box{
-    border: 0.3em solid #333333;
-    background-color: #816945;
     display: inline-block;
     padding: 0.5em;
 }
@@ -48,10 +56,13 @@ article div.f5 div.ingredients{
     padding-top: 0.5em;
     margin-bottom: 1em;
 }
+@media screen and (max-width : 990px){
+    article div.f5 div.ingredients{
+        margin-left: 2em;
+    }
+}
 
 article div.f5 div.ingredients div.f4 .box{
-    border: 0.3em solid #333333;
-    background-color: #816945;
     display: inline-block;
     padding: 0em;
     margin-bottom: -0.3em;

public/css/home.css

@@ -15,7 +15,7 @@ article{
         display: block;
         width: 80%;
         margin: 1em auto;
-        padding: 1em 1em 0.5em 1em;
+        /*padding: 1em 1em 0.5em 1em;*/
     }
 }
 

public/css/monster.css

@@ -1,54 +1,24 @@
-article#profile{
+section#monster{
     max-width: 60%;
     display: inline-block;
-    vertical-align: top;
+    vertical-align: middle;
     margin: 0.2em;
     position: relative;
-    padding: 0.2em;
 }
+
 @media screen and (max-width : 990px){
-    article#profile{
-        width: 95%;
-        max-width: 95%;
+    section#monster{
+        width: 90%;
+        max-width: 90%;
         margin: 0.2em auto;
         display: block;
     }
 }
 
-article#profile div#details{
+section#monster article#profile table#stats{
+    font-size: 90%;
+    vertical-align: middle;
     display: inline-block;
-    vertical-align: top;
-    text-align: center;
-}
-article#profile div#details h1{
-    color: #ffffff;
-    text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000;
-    font-size: 190%;
-    margin: 0.2em;
-}
-article#profile div#details span.stars{
-    display: block;
-}
-article#profile div#details span.stars img.star{
-    width: 1.5em;
-    height: 1.5em;
-    margin: -0.1em;
-}
-article#profile div#details span.level{
-    color: #ffffff;
-    display: block;
-    text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000;
-}
-article#profile h4{
-    color: #ffffff;
-    font-weight: bold;
-    text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.4em #000000;
-    margin: 0.1em;
-    display: block;
-}
-
-article#profile table#stats{
-    font-size: 100%;
     border: 0.1em solid black;
     color: #ffffff;
     margin: 2em auto 2em auto;
@@ -56,107 +26,130 @@ article#profile table#stats{
     border-radius: 0.4em;
 }
 
-article#profile table#stats th{
+section#monster article#profile table#stats th{
     font-weight: bold;
     background-color: #00000066;
 }
 
-article#profile table#stats td{
+section#monster article#profile table#stats td{
     font-weight: bold;
     background-color: #ffffff33;
 }
 
-article#profile table#stats td, th{
+section#monster article#profile table#stats td, th{
     padding: 0.2em;
     border: 0.1em solid #000000;
 }
 
-article#profile table#stats td.extra{
+section#monster article#profile table#stats td.extra{
     color: #aaaaff;
 }
 
-article#profile table#stats td.total{
+section#monster article#profile table#stats td.total{
     color: #f2c920;
     font-weight: bold;
 }
 
-article#profile div#skills{
+section#monster article#profile div#skills{
     text-align: center;
 }
 
-article#profile div#skills div.skill{
+section#monster article#profile div#skills div.skill{
     display: inline-block;
     vertical-align: top;
-    margin: 0.5em;
+    margin: 0.2em;
     color: #ffffff;
     text-align: center;
     max-width: 20%;
+    position: relative;
 }
 
-article#profile div#skills div.skill img.skill_img{
+section#monster article#profile div#skills div.skill img.skill_img{
     width: 5em;
     height: 5em;
     border: 0.3em solid #f2c920;
     border-radius: 0.5em;
 }
-article#profile div#skills div.skill span.skill_level{
+section#monster article#profile div#skills div.skill span.skill_level{
     font-size: 130%;
-    position: relative;
-    top: -2em;
-    right: -0.8em;
+    position: absolute;
+    top: 2.8em;
+    right: 1.8em;
     text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.4em #000000, 0 0 0.4em #000000, 0 0 0.6em #000000, 0 0 0.6em #000000, 0 0 0.8em #000000, 0 0 0.8em #000000;
 }
 
-article#profile div#skills div.skill span.skill_level.maxed{
+section#monster article#profile div#skills div.skill span.skill_level.maxed{
     color: #f2c920;
 }
 
-article#profile div#skills div.skill span.skill_name{
+section#monster article#profile div#skills div.skill span.skill_name{
     text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.4em #000000;
-    margin-top: -2.5em;
+    margin-top: 0;
     display: block;
     font-weight: bold;
 }
 
-article#profile div#skills div.skill span.skill_description{
-    font-size: 90%;
+section#monster article#profile div#skills div.skill span.skill_description{
+    font-size: 80%;
     font-style: italic;
+    margin: 0;
+    padding: 0;
+    display: block;
+    line-height: 0.95em;
 }
 
-article#profile div#skills div.skill span.skill_effects{
+section#monster article#profile div#skills div.skill span.skill_effects{
     display: block;
     text-align: center;
     margin-top: 1em;
 }
 
-article#profile div#skills div.skill span.skill_effects img.effect_img{
+section#monster article#profile div#skills div.skill span.skill_effects img.effect_img{
     width: 1.5em;
     height: 1.5em;
     border: 0.1em solid #000000;
     border-radius: 0.5em;
 }
 
-article#profile div#skills div.skill table.skill_up{
-    font-size: 80%;
-    margin-top: 1em;
+section#monster article#profile div#skills div.skill table.skill_up{
+    margin: 0.5em 0 0 0;
+    border-collapse: collapse;
 }
 
-article#profile div#skills div.skill table.skill_up td{
+section#monster article#profile div#skills div.skill table.skill_up td{
+    font-size: 90%;
     color: #888888;
+    padding: 0.2em 
+    border: 0 solid #000000;
+    line-height: 1em;
+}
+@media screen and (max-width : 990px){
+    section#monster article#profile div#skills div.skill table.skill_up td{
+        padding: 0;
+        border: 0.1em solid black;
+        line-height: 0.95em;
+        font-size: 70%;
+    }
 }
 
-article#profile div#skills div.skill table.skill_up td.level{
+section#monster article#profile div#skills div.skill table.skill_up td.level{
     font-style: italic;
     padding-right: 0.8em;
-    min-width: 3em; 
+    min-width: 2em;
+    font-size: 80%
+}
+@media screen and (max-width : 990px){
+    section#monster article#profile div#skills div.skill table.skill_up td.level{
+        font-size: 70%
+    }
 }
 
-article#profile div#skills div.skill table.skill_up td.aquired{
+section#monster article#profile div#skills div.skill table.skill_up td.aquired{
     color: #ffffff;
     font-weight: bold;
 }
 
-article#profile table#skill_averages{
+section#monster article#profile table#skill_averages{
     margin: 3em auto 2em auto;
     color: #ffffff;
     font-size: 120%;
@@ -167,138 +160,45 @@ article#profile table#skill_averages{
     padding-bottom: 2em;
 }
 
-article#profile table#skill_averages td.title{
+section#monster article#profile table#skill_averages td.title{
     padding-left: 4em;
     text-align: right;
 }
-article#profile table#skill_averages td.value{
+section#monster article#profile table#skill_averages td.value{
     padding-right: 4em;
     text-align: left;
     padding-left: 1em;
 }
 
-article#runes{
-    max-width: 45%;
+section#runes{
+    max-width: 35%;
     display: inline-block;
     vertical-align: top;
-    /*width: 7em;*/
-    border: 0.2em solid #000000;
-    margin: 0.5em;
     position: relative;
-    border-radius: 15%;
-    background: #351e0b;
-    border: 0.2em solid #f2c920;
-    border-radius: 0.5em;
-    padding: 0em;
-}
+} 
 @media screen and (max-width : 990px){
-    article#runes{
-        width: 95%;
-        max-width: 95%;
+    section#runes{
+        width: 90%;
+        max-width: 90%;
+        margin: 0.2em auto;
+        display: block;
     }
 }
-article#runes table#table_runes{
-    border-collapse: collapse;
-}
-
-article#runes table#table_runes td.stats{
-    color: #ffffff;
-    border-bottom: 0.1em solid #ffffff;
-}
-
-article#runes table#table_runes td.stats table{
-    color: #ffffff;
-    font-size: 80%;
-}
-
-article#runes table#table_runes td.stats table tr.main_stat{
-    font-weight: bold;
-    font-size: 110%;
-}
-
-article#runes table#table_runes td.stats table tr.innate_stat{
-    font-style: italic;
-}
-
-article#runes table#table_runes td.stats table td.stat{
-    text-align: right;
-}
-article#runes table#table_runes td.stats table td.value{
-    text-align: left;
-    padding-left: 1em;
-}
-
-article#runes table#table_runes td.stats table td.craft{
-    color: #ff7700;
-}
-
-article#runes table#table_runes td.details{
-    color: #ffffff;
-    border-bottom: 0.1em solid #ffffff;
-    padding-left: 0.5em;
-}
-
-article#runes table#table_runes td.details table.table_details{
-    font-size: 80%;
-}
-
-article#runes table#table_runes td.details table.table_details td.title{
-    text-align: right;
-}
-article#runes table#table_runes td.details table.table_details td.value{
-    text-align: left;
-    padding-left: 1em;
-}
-
-article#runes table#table_runes td.details table.table_details span.quality{
-    border: 0.1em solid #000000;
-    border-radius: 0.2em;
-    font-weight: bold;
-    color: #ffffff;
-    text-shadow: 0 0 0.1em #000000;
-    padding: 0 0.3em;
-}
-
-article#runes table#table_runes td.details table.table_details span.quality.quality_normal{
-    background-color: #cccccc;
-}
-
-article#runes table#table_runes td.details table.table_details span.quality.quality_magic{
-    background-color: #55ff55;
-}
-
-article#runes table#table_runes td.details table.table_details span.quality.quality_rare{
-    background-color: #15c6e1;
-}
-
-article#runes table#table_runes td.details table.table_details span.quality.quality_hero{
-    background-color: #ad7fa8;
-}
-
-article#runes table#table_runes td.details table.table_details span.quality.quality_legend{
-    background-color: #f57900;
-}
-
-article#runes table#table_runes td.details{
-    color: #ffffff;
-    border-bottom: 0.1em solid #ffffff;
-    padding-left: 0.5em;
-}
 
-article#runes div#rune_averages{
+section#runes article#rune_averages{
     margin: 5em auto 2em auto;
     text-align: center;
 }
 
-article#runes div#rune_averages table#table_averages{
+section#runes article#rune_averages table#table_averages{
     margin: auto;
     color: #ffffff;
 }
 
-article#runes div#rune_averages table#table_averages td.title{
+section#runes article#rune_averages table#table_averages td.title{
     text-align: right;
 }
-article#runes div#rune_averages table#table_averages td.value{
+section#runes article#rune_averages table#table_averages td.value{
     text-align: left;
     padding-left: 1em;
 }

public/css/monster_info.css

@@ -13,7 +13,7 @@
 article.stage{
     margin: 0.5em;
     position: relative;
-    padding: 0.3em;
+    padding: 0.3em 0.1em;
 }
 
 article.stage div.profile{
@@ -21,32 +21,6 @@ article.stage div.profile{
     vertical-align: top;
 }
 
-article.stage div.profile div.details{
-    display: inline-block;
-    vertical-align: top;
-    text-align: center;
-}
-article.stage div.profile div.details span.stars{
-    display: block;
-}
-article.stage div.profile div.details span.stars img.star{
-    width: 1em;
-    height: 1em;
-}
-article.stage div.profile div.details span.archetype{
-    color: #ffffff;
-    display: block;
-    text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000;
-    font-size: 80%;
-}
-article.stage div.profile h4{
-    color: #ffffff;
-    font-weight: bold;
-    text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.4em #000000;
-    margin: 0.1em;
-    display: block;
-}
-
 article.stage table.stats{
     font-size: 65%;
     border: 0.1em solid black;
@@ -128,12 +102,14 @@ article.stage div.extra div.essences div.essence span{
 
 article.stage div.skills{
     text-align: center;
+    margin: 0;
+    padding: 0;
 }
 
 article.stage div.skills div.skill{
     display: inline-block;
     vertical-align: top;
-    margin: 0.5em;
+    margin: 0.2em;
     color: #ffffff;
     text-align: center;
     max-width: 20%;
@@ -142,20 +118,23 @@ article.stage div.skills div.skill{
 article.stage div.skills div.skill img.skill_img{
     width: 4em;
     height: 4em;
-    border: 0.2em solid #f2c920;
-    border-radius: 0.4em;
+    border: 0.3em solid #f2c920;
+    border-radius: 0.5em;
 }
 
 article.stage div.skills div.skill span.skill_name{
     text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.4em #000000;
     display: block;
     font-weight: bold;
-    font-size: 90%;
 }
 
 article.stage div.skills div.skill span.skill_description{
-    font-size: 70%;
+    font-size: 80%;
     font-style: italic;
+    margin: 0;
+    padding: 0;
+    display: block;
+    line-height: 0.95em;
 }
 
 article.stage div.skills div.skill span.skill_effects{
@@ -173,16 +152,35 @@ article.stage div.skills div.skill span.skill_effects img.effect_img{
 
 article.stage div.skills div.skill table.skill_up{
     font-size: 70%;
-    margin-top: 1em;
+    margin: 0.5em 0 0 0;
+    border-collapse: collapse;
 }
 
+
 article.stage div.skills div.skill table.skill_up td{
-    color: #ffffff;
-    padding: 0.03em 0.3em;
+    font-size: 90%;
+    color: #888888;
+    padding: 0.2em 
+    border: 0 solid #000000;
+    line-height: 1em;
+}
+@media screen and (max-width : 990px){
+    article.stage div.skills div.skill table.skill_up td{
+        padding: 0;
+        border: 0.1em solid black;
+        line-height: 0.95em;
+        font-size: 70%;
+    }
 }
 
 article.stage div.skills div.skill table.skill_up td.level{
     font-style: italic;
     padding-right: 0.8em;
-    min-width: 3em; 
+    min-width: 2em;
+    font-size: 80%
+}
+@media screen and (max-width : 990px){
+    article.stage div.skills div.skill table.skill_up td.level{
+        font-size: 70%
+    }
 }

public/css/monsters.css

@@ -17,6 +17,11 @@ section.list div.monster div.monster_tooltip{
 section.list div.monster:hover div.monster_tooltip{
     display: block;
 }
+@media screen and (max-width : 990px){
+    section.list div.monster:hover div.monster_tooltip{
+        display: none;
+    }
+}
 
 section.list div.monster div.monster_tooltip h4{
     color: #ffffff;

public/css/report.css

@@ -5,6 +5,13 @@ body#body_reports section.report{
     vertical-align: top;
     margin: 0.5em;
 }
+@media screen and (max-width : 990px){
+    body#body_reports section.report{
+        width: 90%;
+        margin: 0.5em auto;
+        display: block;
+    }
+}
 
 body#body_reports section.report article{
     text-align: left;
@@ -40,8 +47,16 @@ body#body_reports section.report article div.report_filters{
     background-color: #aa8866;
     display: block;
 }
+@media screen and (max-width : 990px){
+    body#body_reports section.report article div.report_filters{
+        width: 90%;
+        font-size: 80%;
+        margin: 1em auto;
+    }
+}
 body#body_reports section.report article div.report_filters table{
     border-collapse: collapse;
+    margin: auto;
 }
 
 body#body_reports section.report article div.report_filters td.filter_separator{
@@ -93,11 +108,8 @@ body#body_reports section.report article div.report_filters td.filter_title span
 }
 
 body#body_report_skillup section.content{
-    display: inline-block;
-    min-width: 75%;
-    margin: 2em auto 0 auto;
+    display: block;
     text-align: left;
-    width: auto;
 }
 
 body#body_report_skillup section.content div.monster div.profile{
@@ -163,6 +175,8 @@ body#body_report_skillup section.content div.monster div.skills div.skill span.s
     top: 3.2em;
     display: block;
     margin-top: -1.3em;
+    font-size: 80%;
+    line-height: 0.9em;
 }
 
 body#body_report_skillup section.content div.monster table#skill_averages{
@@ -174,9 +188,11 @@ body#body_report_skillup section.content div.monster table#skill_averages{
 }
 @media screen and (max-width : 990px){
     body#body_report_skillup section.content div.monster table#skill_averages{
-        display: block;
-        margin: auto;
-        font-size: 80%;
+        display: revert;
+        margin: -2em auto auto auto;
+        font-size: 100%;
+        width: 70%;
+        max-width: 90%;
     }
 
 }
@@ -231,12 +247,25 @@ body#body_report_runeupgrade section.content article div.monster{
     width: 10em;
     max-width: 15%;
 }
+@media screen and (max-width : 990px){
+    body#body_report_runeupgrade section.content article div.monster{
+        display: block;
+        max-width: 100%;
+        width: initial;
+    }
+}
 
 body#body_report_runeupgrade section.content article div.monster_runes{
     display:inline-block;
     vertical-align: top;
     max-width: 80%;
 }
+@media screen and (max-width : 990px){
+    body#body_report_runeupgrade section.content article div.monster_runes{
+        display: block;
+        max-width: 100%;
+    }
+}
 
 body#body_report_runeupgrade section.content article div.monster_runes > table.rune{
     font-size: 80%;

public/css/ui.css

@@ -168,6 +168,7 @@ header div#logo h1#logo_text span.small{
 header nav{
     display: inline-block;
     vertical-align: middle;
+    font-size: 80%;
 }
 header nav a{
     font-size: 2em;
@@ -213,7 +214,7 @@ footer table#footer_table{
     table-layout: fixed;
 }
 footer table#footer_table td{
-    width: 33%;
+    width: 45%;
     padding: 0.5em;
 }
 @media screen and (max-width : 990px){
@@ -221,6 +222,7 @@ footer table#footer_table td{
         width: auto;
         padding: 0.2em;
         font-size: 70%;
+        line-height: 0.9em;
     }
 }
 input[type=button], input[type=submit]{